31 isModal: true, |
31 isModal: true, |
32 modalOpacity: 0.4, |
32 modalOpacity: 0.4, |
33 okButton: $('#delOk'), |
33 okButton: $('#delOk'), |
34 cancelButton: $('#delCancel'), |
34 cancelButton: $('#delCancel'), |
35 initContent: function () { |
35 initContent: function () { |
36 $('#delOk').jqxButton({ width: '65px', theme: theme }); |
36 $('#delOk').jqxButton({ template: "danger", width: '65px', theme: theme }); |
37 $('#delCancel').jqxButton({ width: '65px', theme: theme }); |
37 $('#delCancel').jqxButton({ template: "success", width: '65px', theme: theme }); |
38 $('#delCancel').focus(); |
38 $('#delCancel').focus(); |
39 } |
39 } |
40 }); |
40 }); |
41 $('#eventWindow').jqxWindow('hide'); |
41 $('#eventWindow').jqxWindow('hide'); |
42 } |
42 } |
43 |
43 |
44 |
44 |
45 $(document).ready(function () { |
45 $(document).ready(function () { |
|
46 |
|
47 var dataRecord = {}; |
|
48 |
46 var url = "includes/db_inventory_water.php"; |
49 var url = "includes/db_inventory_water.php"; |
47 // tooltips |
50 // tooltips |
48 $("#name").jqxTooltip({ content: 'De unieke naam van dit brouwwater.' }); |
51 $("#name").jqxTooltip({ content: 'De unieke naam van dit brouwwater.' }); |
49 $("#notes").jqxTooltip({ content: 'Extra opmerkingen over dit water.' }); |
52 $("#notes").jqxTooltip({ content: 'Extra opmerkingen over dit water.' }); |
50 $("#unlimited_stock").jqxTooltip({ content: 'Onbeperkte voorraad zoals kraanwater en bronnen.' }); |
53 $("#unlimited_stock").jqxTooltip({ content: 'Onbeperkte voorraad zoals kraanwater en bronnen.' }); |
51 $("#calcium").jqxTooltip({ content: 'Calcium (Ca).' }); |
54 $("#calcium").jqxTooltip({ content: 'Calcium (Ca).' }); |
52 $("#bicarbonate").jqxTooltip({ content: 'Bicarbonaat (HCO3) kan worden gebruikt als invoer voor de Totale alkaliteit.' }); |
55 $("#bicarbonate").jqxTooltip({ content: 'Bicarbonaat (HCO3). Berekend meteen de Totale alkaliteit.' }); |
53 $("#sulfate").jqxTooltip({ content: 'Calcium Sulfaat (CaSO4).' }); |
56 $("#sulfate").jqxTooltip({ content: 'Calcium Sulfaat (CaSO4).' }); |
54 $("#chloride").jqxTooltip({ content: 'Chloride (Cl).' }); |
57 $("#chloride").jqxTooltip({ content: 'Chloride (Cl).' }); |
55 $("#sodium").jqxTooltip({ content: 'Natrium, oftewel keukenzout (Na). In berekeningen ook vaak als Sodium.' }); |
58 $("#sodium").jqxTooltip({ content: 'Natrium, oftewel keukenzout (Na). In berekeningen ook vaak als Sodium.' }); |
56 $("#magnesium").jqxTooltip({ content: 'Magnesium (Mg).' }); |
59 $("#magnesium").jqxTooltip({ content: 'Magnesium (Mg).' }); |
57 $("#ph").jqxTooltip({ content: 'De zuurgraad (pH).' }); |
60 $("#ph").jqxTooltip({ content: 'De zuurgraad (pH).' }); |
58 $("#total_alkalinity").jqxTooltip({ content: 'Totale alkaliniteit.' }); |
61 $("#total_alkalinity").jqxTooltip({ content: 'Totale alkaliniteit. Berekend meteen de Bicarbonaat.' }); |
59 $("#inventory").jqxTooltip({ content: 'Voorraad in liters.' }); |
62 $("#inventory").jqxTooltip({ content: 'Voorraad in liters.' }); |
60 $("#cost").jqxTooltip({ content: 'Kostprijs per liter. 5 cijfers achter de comma zodat het kraanwater er ook in kan.' }); |
63 $("#cost").jqxTooltip({ content: 'Kostprijs per liter. 5 cijfers achter de comma zodat het kraanwater er ook in kan.' }); |
61 // prepare the data |
64 // prepare the data |
62 var source = { |
65 var source = { |
63 datatype: "json", |
66 datatype: "json", |
64 cache: false, |
67 cache: false, |
65 datafields: [ |
68 datafields: [ |
66 { name: 'record', type: 'number' }, |
69 { name: 'record', type: 'number' }, |
67 { name: 'name', type: 'string' }, |
70 { name: 'name', type: 'string' }, |
68 { name: 'unlimited_stock', type: 'bool' }, |
71 { name: 'unlimited_stock', type: 'int' }, |
69 { name: 'calcium', type: 'float' }, |
72 { name: 'calcium', type: 'float' }, |
70 { name: 'bicarbonate', type: 'float' }, |
73 { name: 'bicarbonate', type: 'float' }, |
71 { name: 'sulfate', type: 'float' }, |
74 { name: 'sulfate', type: 'float' }, |
72 { name: 'chloride', type: 'float' }, |
75 { name: 'chloride', type: 'float' }, |
73 { name: 'sodium', type: 'float' }, |
76 { name: 'sodium', type: 'float' }, |
128 } |
134 } |
129 }); |
135 }); |
130 } |
136 } |
131 }; |
137 }; |
132 // initialize the input fields. |
138 // initialize the input fields. |
133 $("#name").jqxInput({ theme: theme, width: 250, height: 23 }); |
139 $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); |
|
140 $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); |
134 $("#unlimited_stock").jqxCheckBox({ theme: theme, width: 120, height: 23 }); |
141 $("#unlimited_stock").jqxCheckBox({ theme: theme, width: 120, height: 23 }); |
135 $("#calcium").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
142 $("#calcium").jqxNumberInput( Spin1dec1 ); |
136 $("#bicarbonate").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
143 $("#bicarbonate").jqxNumberInput( Spin1dec1 ); |
137 $("#sulfate").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
144 $("#sulfate").jqxNumberInput( Spin1dec1 ); |
138 $("#chloride").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
145 $("#chloride").jqxNumberInput( Spin1dec1 ); |
139 $("#sodium").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
146 $("#sodium").jqxNumberInput( Spin1dec1 ); |
140 $("#magnesium").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
147 $("#magnesium").jqxNumberInput( Spin1dec1 ); |
141 $("#ph").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
148 $("#ph").jqxNumberInput( Spin2pH ); |
142 |
149 $("#total_alkalinity").jqxNumberInput( Spin1dec1 ); |
143 $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); |
150 $("#inventory").jqxNumberInput( Spin1dec1 ); |
144 $("#total_alkalinity").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
|
145 $("#inventory").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
|
146 $("#cost").jqxNumberInput({inputMode: 'simple', spinMode: 'simple', theme: theme, width: 110, height: 23, min: 0, decimalDigits: 5, spinButtons: true }); |
151 $("#cost").jqxNumberInput({inputMode: 'simple', spinMode: 'simple', theme: theme, width: 110, height: 23, min: 0, decimalDigits: 5, spinButtons: true }); |
147 var dataAdapter = new $.jqx.dataAdapter(source); |
152 var dataAdapter = new $.jqx.dataAdapter(source); |
148 var editrow = -1; |
153 var editrow = -1; |
149 // initialize jqxGrid |
154 // initialize jqxGrid |
150 $("#jqxgrid").jqxGrid({ |
155 $("#jqxgrid").jqxGrid({ |
157 renderstatusbar: function (statusbar) { |
162 renderstatusbar: function (statusbar) { |
158 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
163 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
159 var addButton = $("<div style='float: right; margin-right: 15px;'><img style='position: relative; margin-top: 2px;' src='images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Nieuw</span></div>"); |
164 var addButton = $("<div style='float: right; margin-right: 15px;'><img style='position: relative; margin-top: 2px;' src='images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Nieuw</span></div>"); |
160 container.append(addButton); |
165 container.append(addButton); |
161 statusbar.append(container); |
166 statusbar.append(container); |
162 addButton.jqxButton({ theme: theme, width: 120, height: 20 }); |
167 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); |
163 // add new row. |
168 // add new row. |
164 addButton.click(function (event) { |
169 addButton.click(function (event) { |
165 editrow = -1; |
170 editrow = -1; |
166 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); |
171 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
167 $("#name").val(''); |
172 $("#name").val('Nieuw brouwwater'); |
168 $("#unlimited_stock").val(''); |
173 $("#unlimited_stock").val(0); |
169 $("#calcium").val(''); |
174 $("#calcium").val(0); |
170 $("#bicarbonate").val(''); |
175 $("#bicarbonate").val(0); |
171 $("#sulfate").val(''); |
176 $("#sulfate").val(0); |
172 $("#chloride").val(''); |
177 $("#chloride").val(0); |
173 $("#sodium").val(''); |
178 $("#sodium").val(0); |
174 $("#magnesium").val(''); |
179 $("#magnesium").val(0); |
175 $("#ph").val(''); |
180 $("#ph").val(7); |
176 $("#notes").val(''); |
181 $("#notes").val(''); |
177 $("#total_alkalinity").val(''); |
182 $("#total_alkalinity").val(0); |
178 $("#inventory").val(''); |
183 $("#inventory").val(0); |
179 $("#cost").val(''); |
184 $("#cost").val(0); |
180 $("#popupWindow").jqxWindow('open'); |
185 $("#popupWindow").jqxWindow('open'); |
181 }); |
186 }); |
182 }, |
187 }, |
183 filterable: true, |
188 filterable: false, |
184 filtermode: 'excel', |
|
185 columns: [ |
189 columns: [ |
186 { text: 'Water leverancier', datafield: 'name', width: 225 }, |
190 { text: 'Water leverancier', datafield: 'name', width: 225 }, |
187 { text: 'Opmerkingen', datafield: 'notes' }, |
191 { text: 'Opmerkingen', datafield: 'notes' }, |
188 { text: 'Onbeperkt', datafield: 'unlimited_stock', columntype: 'checkbox', width: 80 }, |
192 { text: 'Onbeperkt', datafield: 'unlimited_stock', columntype: 'checkbox', width: 80 }, |
189 { text: 'Liters', datafield: 'inventory', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
193 { text: 'Voorraad', datafield: 'inventory', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1', |
190 { text: 'Wijzig', datafield: 'Edit', width: 120, align: 'center', columntype: 'button', cellsrenderer: function () { |
194 cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) { |
|
195 |
|
196 } |
|
197 }, |
|
198 { text: 'Wijzig', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function () { |
191 return "Wijzig"; |
199 return "Wijzig"; |
192 }, buttonclick: function (row) { |
200 }, buttonclick: function (row) { |
193 // open the popup window when the user clicks a button. |
201 // open the popup window when the user clicks a button. |
194 editrow = row; |
202 editrow = row; |
195 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); |
203 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
196 // get the clicked row's data and initialize the input fields. |
204 // get the clicked row's data and initialize the input fields. |
197 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
205 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
198 $("#name").val(dataRecord.name); |
206 $("#name").val(dataRecord.name); |
199 $("#unlimited_stock").val(dataRecord.unlimited_stock); |
207 $("#unlimited_stock").val(dataRecord.unlimited_stock); |
200 $("#calcium").val(dataRecord.calcium); |
208 $("#calcium").val(dataRecord.calcium); |
212 $("#popupWindow").jqxWindow('open'); |
220 $("#popupWindow").jqxWindow('open'); |
213 } |
221 } |
214 } |
222 } |
215 ] |
223 ] |
216 }); |
224 }); |
|
225 |
|
226 $("#total_alkalinity").on('change', function (event) { |
|
227 dataRecord.bicarbonate = parseFloat(event.args.value) * 1.22; |
|
228 $("#bicarbonate").val(dataRecord.bicarbonate); |
|
229 }); |
|
230 $("#bicarbonate").on('change', function (event) { |
|
231 dataRecord.total_alkalinity = parseFloat(event.args.value) * 50 / 61; |
|
232 $("#total_alkalinity").val(dataRecord.total_alkalinity); |
|
233 }); |
|
234 |
217 // initialize the popup window and buttons. |
235 // initialize the popup window and buttons. |
218 $("#popupWindow").jqxWindow({ |
236 $("#popupWindow").jqxWindow({ |
219 width: 860, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.40 |
237 width: 1050, |
|
238 height: 550, |
|
239 resizable: false, |
|
240 theme: theme, |
|
241 isModal: true, |
|
242 autoOpen: false, |
|
243 cancelButton: $("#Cancel"), |
|
244 modalOpacity: 0.40 |
220 }); |
245 }); |
221 $("#popupWindow").on('open', function () { |
246 $("#popupWindow").on('open', function () { |
222 $("#name").jqxInput('selectAll'); |
247 $("#name").jqxInput('selectAll'); |
223 }); |
248 }); |
224 $("#Delete").jqxButton({ theme: theme }); |
249 $("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme }); |
225 $("#Delete").click(function () { |
250 $("#Delete").click(function () { |
226 if (editrow >= 0) { |
251 if (editrow >= 0) { |
227 // Open a popup to confirm this action. |
252 // Open a popup to confirm this action. |
228 $('#eventWindow').jqxWindow('open'); |
253 $('#eventWindow').jqxWindow('open'); |
229 $("#delOk").click(function () { |
254 $("#delOk").click(function () { |
231 $("#jqxgrid").jqxGrid('deleterow', rowID); |
256 $("#jqxgrid").jqxGrid('deleterow', rowID); |
232 }); |
257 }); |
233 } |
258 } |
234 $("#popupWindow").jqxWindow('hide'); |
259 $("#popupWindow").jqxWindow('hide'); |
235 }); |
260 }); |
236 $("#Cancel").jqxButton({ theme: theme }); |
261 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); |
237 $("#Save").jqxButton({ theme: theme }); |
262 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); |
238 // update the edited row when the user clicks the 'Save' button. |
263 // update the edited row when the user clicks the 'Save' button. |
239 $("#Save").click(function () { |
264 $("#Save").click(function () { |
|
265 var rowID = -1; |
240 if (editrow >= 0) { |
266 if (editrow >= 0) { |
241 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
267 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
242 var row = { |
268 } |
243 record: rowID, |
269 var row = { |
244 name: $("#name").val(), |
270 record: rowID, |
245 unlimited_stock: $("#unlimited_stock").val(), |
271 name: $("#name").val(), |
246 calcium: parseFloat($("#calcium").jqxNumberInput('decimal')), |
272 unlimited_stock: $("#unlimited_stock").val(), |
247 bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')), |
273 calcium: parseFloat($("#calcium").jqxNumberInput('decimal')), |
248 sulfate: parseFloat($("#sulfate").jqxNumberInput('decimal')), |
274 bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')), |
249 chloride: parseFloat($("#chloride").jqxNumberInput('decimal')), |
275 sulfate: parseFloat($("#sulfate").jqxNumberInput('decimal')), |
250 sodium: parseFloat($("#sodium").jqxNumberInput('decimal')), |
276 chloride: parseFloat($("#chloride").jqxNumberInput('decimal')), |
251 magnesium: parseFloat($("#magnesium").jqxNumberInput('decimal')), |
277 sodium: parseFloat($("#sodium").jqxNumberInput('decimal')), |
252 ph: parseFloat($("#ph").jqxNumberInput('decimal')), |
278 magnesium: parseFloat($("#magnesium").jqxNumberInput('decimal')), |
253 notes: $("#notes").val(), |
279 ph: parseFloat($("#ph").jqxNumberInput('decimal')), |
254 total_alkalinity: parseFloat($("#total_alkalinity").jqxNumberInput('decimal')), |
280 notes: $("#notes").val(), |
255 inventory: parseFloat($("#inventory").jqxNumberInput('decimal')), |
281 total_alkalinity: parseFloat($("#total_alkalinity").jqxNumberInput('decimal')), |
256 cost: parseFloat($("#cost").jqxNumberInput('decimal')) |
282 inventory: parseFloat($("#inventory").jqxNumberInput('decimal')), |
257 }; |
283 cost: parseFloat($("#cost").jqxNumberInput('decimal')) |
|
284 }; |
|
285 if (editrow >= 0) { |
258 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
286 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
259 $("#popupWindow").jqxWindow('hide'); |
|
260 } else { |
287 } else { |
261 // Insert a record |
288 $('#jqxgrid').jqxGrid('addrow', null, row); |
262 var newrow = { |
289 } |
263 record: -1, |
290 $("#popupWindow").jqxWindow('hide'); |
264 name: $("#name").val(), |
291 location.reload( true ); // reload ourself. |
265 unlimited_stock: $("#unlimited_stock").val(), |
|
266 calcium: parseFloat($("#calcium").jqxNumberInput('decimal')), |
|
267 bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')), |
|
268 sulfate: parseFloat($("#sulfate").jqxNumberInput('decimal')), |
|
269 chloride: parseFloat($("#chloride").jqxNumberInput('decimal')), |
|
270 sodium: parseFloat($("#sodium").jqxNumberInput('decimal')), |
|
271 magnesium: parseFloat($("#magnesium").jqxNumberInput('decimal')), |
|
272 ph: parseFloat($("#ph").jqxNumberInput('decimal')), |
|
273 notes: $("#notes").val(), |
|
274 total_alkalinity: parseFloat($("#total_alkalinity").jqxNumberInput('decimal')), |
|
275 inventory: parseFloat($("#inventory").jqxNumberInput('decimal')), |
|
276 cost: parseFloat($("#cost").jqxNumberInput('decimal')) |
|
277 }; |
|
278 $('#jqxgrid').jqxGrid('addrow', null, newrow); |
|
279 $("#popupWindow").jqxWindow('hide'); |
|
280 } |
|
281 }); |
292 }); |
282 createDelElements(); |
293 createDelElements(); |
283 }); |
294 }); |
284 |
295 |