1+ {% extends 'api/base.html' %}
2+ {% block body %}
3+ < div class ="siimple-content siimple-content--medium ">
4+ < div class ="siimple--px-5 siimple--py-5 ">
5+ < div class ="siimple-h1 siimple--mb-3 " align ="center ">
6+ < a class ="siimple--color-white siimple--text-normal " href ="{% url 'index-view' %} " style ="text-decoration: none; "> Nutrigo</ a >
7+ </ div >
8+ < div class ="siimple-paragraph siimple-paragraph--lead siimple--color-white siimple-grid-col--sm-hide "
9+ align ="center ">
10+ Calculate nutrition for your favourite recipe!
11+ </ div >
12+ < div class ="siimple-field ">
13+ < textarea class ="siimple-textarea " id ="ingredients-value " rows ="13 " placeholder ="1 chicken breast
14+ 2 eggs
15+ 200 g of all-purpose flour
16+ ... "> </ textarea >
17+ </ div >
18+
19+ < div class ="siimple-grid ">
20+ < div class ="siimple-grid-row ">
21+ < div class ="siimple-grid-col siimple-grid-col--2 siimple-grid-col--sm-6 ">
22+ < div class ="siimple--mt-1 siimple--text-center siimple--color-white "> Servings</ div >
23+ </ div >
24+ < div class ="siimple-grid-col siimple-grid-col--2 siimple-grid-col--sm-6 ">
25+ < input type ="number " class ="siimple-input siimple--width-100 " id ="servings-value " value ="1 " min ="1 ">
26+ </ div >
27+
28+ < div class ="siimple-grid-col siimple-grid-col--8 siimple-grid-col--sm-12 ">
29+ < div class ="siimple-btn siimple-btn--primary siimple-btn--fluid " id ="calculate-button ">
30+ Calculate
31+ </ div >
32+ </ div >
33+ </ div >
34+ </ div >
35+
36+ < div class ="siimple-footer siimple--mt-1 " align ="center ">
37+ < a class ="siimple--color-white siimple--text-normal siimple--mr-2 footer-element "
38+ href ="https://github.com/MakuZo/nutrigo " target ="blank "> Github</ a >
39+ < a class ="siimple--color-white siimple--text-normal siimple--mr-2 footer-element " href ="{% url 'about-view' %} "> About</ a >
40+ < a class ="siimple--color-white siimple--text-normal siimple--mr-2 footer-element " href ="{% url 'calculate-from-text' %} "> API</ a >
41+ </ div >
42+ </ div >
43+ </ div >
44+
45+ < div class ="siimple-modal siimple-modal--medium " id ="result-modal " style ="display:none; ">
46+ < div class ="siimple-modal-content ">
47+ < div class ="siimple-modal-header ">
48+ < div class ="siimple-modal-header-title "> Results</ div >
49+ < div class ="siimple-modal-header-close " id ="modal-close "> </ div >
50+ </ div >
51+ < div class ="siimple-modal-body ">
52+ < div id ="nutrition-chart " style ="width: 100%; min-height: 300px "> </ div >
53+ < div id ="nutrition-table " class ="siimple-table siimple-table--border ">
54+ < div class ="siimple-table-header ">
55+ < div class ="siimple-table-row ">
56+ < div class ="siimple-table-cell "> Nutrient</ div >
57+ < div class ="siimple-table-cell "> Summary</ div >
58+ < div class ="siimple-table-cell "> Serving</ div >
59+ </ div >
60+ </ div >
61+ < div class ="siimple-table-body " id ="nutrition-table-body ">
62+ </ div >
63+ </ div >
64+ </ div >
65+ < div class ="siimple-modal-footer ">
66+ Note that presented values are approximate and shouldn't be considered as real.
67+ </ div >
68+ </ div >
69+ </ div >
70+
71+ < script >
72+ var namesForNutrients = units = {
73+ "ENERGY" : "Energy" ,
74+ "FAT" : "Fat" ,
75+ "PROTEIN" : "Protein" ,
76+ "CARB" : "Carbs" ,
77+ "FAT_SAT" : "Sat Fat" ,
78+ "FAT_POLY" : "Polyunsat Fat" ,
79+ "FAT_MONO" : "Monounsat Fat" ,
80+ "SUGAR" : "Sugar" ,
81+ "CHOLE" : "Chole" ,
82+ "SODIUM" : "Sodium" ,
83+ "POTAS" : "Potas" ,
84+ "FIBER" : "Fiber" ,
85+ }
86+ var chart = null ;
87+ function createChart ( data ) {
88+ chart = echarts . init ( document . getElementById ( "nutrition-chart" ) )
89+ option = {
90+ title : {
91+ text : `Total energy: ${ data . nutrition . ENERGY [ 0 ] } ,
92+ x : 'center'
93+ } ,
94+ tooltip : {
95+ trigger : 'item' ,
96+ formatter : "{a} <br/>{b} : {c}g ({d}%)"
97+ } ,
98+ legend : {
99+ bottom : 40 ,
100+ left : 'center' ,
101+ data : [ 'Fat' , 'Protein' , 'Carbs' ]
102+ } ,
103+ series : [
104+ {
105+ name : 'Nutrition' ,
106+ type : 'pie' ,
107+ radius : '55%' ,
108+ center : [ '50%' , '45%' ] ,
109+ data : [
110+ { value : data . nutrition . FAT [ 0 ] , name : 'Fat' , itemStyle : { color : '#FDE74C' } } ,
111+ { value : data . nutrition . PROTEIN [ 0 ] , name : 'Protein' , itemStyle : { color : '#5BC0EB' } } ,
112+ { value : data . nutrition . CARB [ 0 ] , name : 'Carbs' , itemStyle : { color : '#9BC53D' } } ,
113+ ] ,
114+ itemStyle : {
115+ emphasis : {
116+ shadowBlur : 10 ,
117+ shadowOffsetX : 0 ,
118+ shadowColor : 'rgba(0, 0, 0, 0.5)'
119+ }
120+ }
121+ }
122+ ]
123+ } ;
124+ chart . setOption ( option , true ) ;
125+ }
126+ function dropChart ( ) {
127+ chart . clear ( )
128+ }
129+ function postData ( ) {
130+ var xhr = new XMLHttpRequest ( ) ;
131+ var url = "{% url 'calculate-from-text' %}" ;
132+ xhr . open ( "POST" , url , true ) ;
133+ xhr . setRequestHeader ( "Content-Type" , "application/json" ) ;
134+ xhr . onreadystatechange = function ( ) {
135+ if ( xhr . readyState === 4 && xhr . status === 200 ) {
136+ var json = JSON . parse ( xhr . responseText ) ;
137+ // Show modal before creating chart
138+ document . getElementById ( "result-modal" ) . style . display = "" ;
139+ createChart ( json ) ;
140+ fillNutritionTable ( json ) ;
141+ }
142+ } ;
143+ var ings = document . getElementById ( "ingredients-value" ) . value . split ( "\n" ) ;
144+ var servings = parseInt ( document . getElementById ( "servings-value" ) . value ) ;
145+ var data = JSON . stringify ( { "ingredients" : ings , "servings" : servings } ) ;
146+ xhr . send ( data ) ;
147+ }
148+ function fillNutritionTable ( data ) {
149+ data = Object . entries ( data . nutrition ) ;
150+ var table = document . getElementById ( "nutrition-table-body" ) ;
151+ for ( var i = 0 ; i < data . length ; i ++ ) {
152+ // Prepare data
153+ var name = namesForNutrients [ data [ i ] [ 0 ] ] ;
154+ var unit = data [ i ] [ 1 ] [ 2 ] ;
155+ var summary = `${ data [ i ] [ 1 ] [ 0 ] } ${ unit } ;
156+ var serving = `${ data [ i ] [ 1 ] [ 1 ] } ${ unit } ;
157+ // Create a row
158+ var row = document . createElement ( "div" ) ;
159+ row . className = "siimple-table-row"
160+ // Fill in row
161+ var name_div = document . createElement ( "div" ) ;
162+ name_div . className = "siimple-table-cell" ;
163+ name_div . innerHTML = name ;
164+ var summary_div = document . createElement ( "div" ) ;
165+ summary_div . className = "siimple-table-cell" ;
166+ summary_div . innerHTML = summary ;
167+ var serving_div = document . createElement ( "div" ) ;
168+ serving_div . className = "siimple-table-cell" ;
169+ serving_div . innerHTML = serving ;
170+ row . appendChild ( name_div ) ;
171+ row . appendChild ( summary_div ) ;
172+ row . appendChild ( serving_div ) ;
173+ // Add row to table
174+ table . appendChild ( row ) ;
175+ }
176+ }
177+ function clearNutritionTable ( ) {
178+ var table = document . getElementById ( "nutrition-table-body" ) ;
179+ table . innerHTML = '' ;
180+ }
181+ document . getElementById ( "calculate-button" ) . addEventListener ( "click" , function ( ) {
182+ input = document . getElementById ( "ingredients-value" ) . value . trim ( ) ;
183+ if ( ! input ) {
184+ alert ( "Add some ingredients first" ) ;
185+ } else {
186+ postData ( ) ;
187+ }
188+ } ) ;
189+ document . getElementById ( "modal-close" ) . addEventListener ( "click" , function ( ) {
190+ document . getElementById ( "result-modal" ) . style . display = "none" ;
191+ dropChart ( ) ;
192+ clearNutritionTable ( ) ;
193+ } ) ;
194+ </ script >
195+ {% endblock %}
0 commit comments