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_profile_water.php"; |
49 var url = "includes/db_profile_water.php"; |
|
50 // tooltips |
|
51 $("#name").jqxTooltip({ content: 'De unieke naam van dit water profiel.' }); |
|
52 $("#notes").jqxTooltip({ content: 'Extra opmerkingen over dit water.' }); |
|
53 $("#calcium").jqxTooltip({ content: 'Calcium (Ca).' }); |
|
54 $("#bicarbonate").jqxTooltip({ content: 'Bicarbonaat (HCO3). Berekend meteen de Totale alkaliteit.' }); |
|
55 $("#sulfate").jqxTooltip({ content: 'Calcium Sulfaat (CaSO4).' }); |
|
56 $("#chloride").jqxTooltip({ content: 'Chloride (Cl).' }); |
|
57 $("#sodium").jqxTooltip({ content: 'Natrium, oftewel keukenzout (Na). In berekeningen ook vaak als Sodium.' }); |
|
58 $("#magnesium").jqxTooltip({ content: 'Magnesium (Mg).' }); |
|
59 $("#ph").jqxTooltip({ content: 'De zuurgraad (pH).' }); |
|
60 $("#total_alkalinity").jqxTooltip({ content: 'Totale alkaliniteit. Berekend meteen de Bicarbonaat.' }); |
|
61 |
47 // prepare the data |
62 // prepare the data |
48 var source = { |
63 var source = { |
49 datatype: "json", |
64 datatype: "json", |
50 cache: false, |
65 cache: false, |
51 datafields: [ |
66 datafields: [ |
111 } |
129 } |
112 }); |
130 }); |
113 } |
131 } |
114 }; |
132 }; |
115 // initialize the input fields. |
133 // initialize the input fields. |
116 $("#name").jqxInput({ theme: theme, width: 250, height: 23 }); |
134 $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); |
117 $("#calcium").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
135 $("#notes").jqxInput({ theme: theme, width: 800, height: 100 }); |
118 $("#bicarbonate").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
136 $("#calcium").jqxNumberInput( Spin1dec1 ); |
119 $("#sulfate").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
137 $("#bicarbonate").jqxNumberInput( Spin1dec1 ); |
120 $("#chloride").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
138 $("#sulfate").jqxNumberInput( Spin1dec1 ); |
121 $("#sodium").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
139 $("#chloride").jqxNumberInput( Spin1dec1 ); |
122 $("#magnesium").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
140 $("#sodium").jqxNumberInput( Spin1dec1 ); |
123 $("#ph").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
141 $("#magnesium").jqxNumberInput( Spin1dec1 ); |
124 |
142 $("#ph").jqxNumberInput( Spin2pH ); |
125 $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); |
143 $("#total_alkalinity").jqxNumberInput( Spin1dec1 ); |
126 $("#total_alkalinity").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
144 |
127 var dataAdapter = new $.jqx.dataAdapter(source); |
145 var dataAdapter = new $.jqx.dataAdapter(source); |
128 var editrow = -1; |
146 var editrow = -1; |
129 // initialize jqxGrid |
147 // initialize jqxGrid |
130 $("#jqxgrid").jqxGrid({ |
148 $("#jqxgrid").jqxGrid({ |
131 width: 1280, |
149 width: 1280, |
137 renderstatusbar: function (statusbar) { |
155 renderstatusbar: function (statusbar) { |
138 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
156 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
139 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>"); |
157 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>"); |
140 container.append(addButton); |
158 container.append(addButton); |
141 statusbar.append(container); |
159 statusbar.append(container); |
142 addButton.jqxButton({ theme: theme, width: 120, height: 20 }); |
160 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); |
143 // add new row. |
161 // add new row. |
144 addButton.click(function (event) { |
162 addButton.click(function (event) { |
145 editrow = -1; |
163 editrow = -1; |
146 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); |
164 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
147 $("#name").val(''); |
165 $("#name").val(''); |
148 $("#calcium").val(''); |
166 $("#calcium").val(0); |
149 $("#bicarbonate").val(''); |
167 $("#bicarbonate").val(0); |
150 $("#sulfate").val(''); |
168 $("#sulfate").val(0); |
151 $("#chloride").val(''); |
169 $("#chloride").val(0); |
152 $("#sodium").val(''); |
170 $("#sodium").val(0); |
153 $("#magnesium").val(''); |
171 $("#magnesium").val(0); |
154 $("#ph").val(''); |
172 $("#ph").val(7); |
155 $("#notes").val(''); |
173 $("#notes").val(''); |
156 $("#total_alkalinity").val(''); |
174 $("#total_alkalinity").val(0); |
157 $("#popupWindow").jqxWindow('open'); |
175 $("#popupWindow").jqxWindow('open'); |
158 }); |
176 }); |
159 }, |
177 }, |
160 filterable: true, |
178 filterable: false, |
161 filtermode: 'excel', |
179 filtermode: 'excel', |
162 columns: [ |
180 columns: [ |
163 { text: 'Water Profiel', datafield: 'name', width: 250 }, |
181 { text: 'Water Profiel', datafield: 'name', width: 225 }, |
164 { text: 'Opmerkingen', datafield: 'notes', width: 475 }, |
182 { text: 'Opmerkingen', datafield: 'notes' }, |
165 { text: 'Natrium', datafield: 'sodium', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
183 { text: 'Ca', datafield: 'calcium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
166 { text: 'Chloride', datafield: 'chloride', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
184 { text: 'Mg', datafield: 'magnesium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
167 { text: 'Sulfaat', datafield: 'sulfate', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
185 { text: 'Na', datafield: 'sodium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
168 { text: 'Zuurgraad', datafield: 'ph', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
186 { text: 'CaCO3', datafield: 'total_alkalinity', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
169 { text: 'Alkaliteit', datafield: 'total_alkalinity', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
187 { text: 'Cl', datafield: 'chloride', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
170 { text: 'Wijzig', datafield: 'Edit', columntype: 'button', cellsrenderer: function () { |
188 { text: 'SO4', datafield: 'sulfate', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
|
189 { text: 'pH', datafield: 'ph', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
|
190 { text: 'Wijzig', datafield: 'Edit', width: 100, columntype: 'button', cellsrenderer: function () { |
171 return "Wijzig"; |
191 return "Wijzig"; |
172 }, buttonclick: function (row) { |
192 }, buttonclick: function (row) { |
173 // open the popup window when the user clicks a button. |
193 // open the popup window when the user clicks a button. |
174 editrow = row; |
194 editrow = row; |
175 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); |
195 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
176 // get the clicked row's data and initialize the input fields. |
196 // get the clicked row's data and initialize the input fields. |
177 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
197 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
178 $("#name").val(dataRecord.name); |
198 $("#name").val(dataRecord.name); |
179 $("#calcium").val(dataRecord.calcium); |
199 $("#calcium").val(dataRecord.calcium); |
180 $("#bicarbonate").val(dataRecord.bicarbonate); |
200 $("#bicarbonate").val(dataRecord.bicarbonate); |
189 $("#popupWindow").jqxWindow('open'); |
209 $("#popupWindow").jqxWindow('open'); |
190 } |
210 } |
191 } |
211 } |
192 ] |
212 ] |
193 }); |
213 }); |
|
214 |
|
215 $("#total_alkalinity").on('change', function (event) { |
|
216 dataRecord.bicarbonate = parseFloat(event.args.value) * 1.22; |
|
217 $("#bicarbonate").val(dataRecord.bicarbonate); |
|
218 }); |
|
219 $("#bicarbonate").on('change', function (event) { |
|
220 dataRecord.total_alkalinity = parseFloat(event.args.value) * 50 / 61; |
|
221 $("#total_alkalinity").val(dataRecord.total_alkalinity); |
|
222 }); |
|
223 |
194 // initialize the popup window and buttons. |
224 // initialize the popup window and buttons. |
195 $("#popupWindow").jqxWindow({ |
225 $("#popupWindow").jqxWindow({ |
196 width: 860, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.40 |
226 width: 1050, |
|
227 height: 550, |
|
228 resizable: false, |
|
229 theme: theme, |
|
230 isModal: true, |
|
231 autoOpen: false, |
|
232 cancelButton: $("#Cancel"), |
|
233 modalOpacity: 0.40 |
197 }); |
234 }); |
198 $("#popupWindow").on('open', function () { |
235 $("#popupWindow").on('open', function () { |
199 $("#name").jqxInput('selectAll'); |
236 $("#name").jqxInput('selectAll'); |
200 }); |
237 }); |
201 $("#Delete").jqxButton({ theme: theme }); |
238 $("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme }); |
202 $("#Delete").click(function () { |
239 $("#Delete").click(function () { |
203 if (editrow >= 0) { |
240 if (editrow >= 0) { |
204 // Open a popup to confirm this action. |
241 // Open a popup to confirm this action. |
205 $('#eventWindow').jqxWindow('open'); |
242 $('#eventWindow').jqxWindow('open'); |
206 $("#delOk").click(function () { |
243 $("#delOk").click(function () { |
208 $("#jqxgrid").jqxGrid('deleterow', rowID); |
245 $("#jqxgrid").jqxGrid('deleterow', rowID); |
209 }); |
246 }); |
210 } |
247 } |
211 $("#popupWindow").jqxWindow('hide'); |
248 $("#popupWindow").jqxWindow('hide'); |
212 }); |
249 }); |
213 $("#Cancel").jqxButton({ theme: theme }); |
250 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); |
214 $("#Save").jqxButton({ theme: theme }); |
251 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); |
215 // update the edited row when the user clicks the 'Save' button. |
252 // update the edited row when the user clicks the 'Save' button. |
216 $("#Save").click(function () { |
253 $("#Save").click(function () { |
|
254 var rowID = -1; |
217 if (editrow >= 0) { |
255 if (editrow >= 0) { |
218 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
256 rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
219 var row = { |
257 } |
220 record: rowID, |
258 var row = { |
221 name: $("#name").val(), |
259 record: rowID, |
222 calcium: parseFloat($("#calcium").jqxNumberInput('decimal')), |
260 name: $("#name").val(), |
223 bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')), |
261 calcium: parseFloat($("#calcium").jqxNumberInput('decimal')), |
224 sulfate: parseFloat($("#sulfate").jqxNumberInput('decimal')), |
262 bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')), |
225 chloride: parseFloat($("#chloride").jqxNumberInput('decimal')), |
263 sulfate: parseFloat($("#sulfate").jqxNumberInput('decimal')), |
226 sodium: parseFloat($("#sodium").jqxNumberInput('decimal')), |
264 chloride: parseFloat($("#chloride").jqxNumberInput('decimal')), |
227 magnesium: parseFloat($("#magnesium").jqxNumberInput('decimal')), |
265 sodium: parseFloat($("#sodium").jqxNumberInput('decimal')), |
228 ph: parseFloat($("#ph").jqxNumberInput('decimal')), |
266 magnesium: parseFloat($("#magnesium").jqxNumberInput('decimal')), |
229 notes: $("#notes").val(), |
267 ph: parseFloat($("#ph").jqxNumberInput('decimal')), |
230 total_alkalinity: parseFloat($("#total_alkalinity").jqxNumberInput('decimal')) |
268 notes: $("#notes").val(), |
231 }; |
269 total_alkalinity: parseFloat($("#total_alkalinity").jqxNumberInput('decimal')) |
|
270 }; |
|
271 if (editrow >= 0) { |
232 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
272 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
233 $("#popupWindow").jqxWindow('hide'); |
|
234 } else { |
273 } else { |
235 // Insert a record |
274 $('#jqxgrid').jqxGrid('addrow', null, row); |
236 var newrow = { |
275 } |
237 record: -1, |
276 $("#popupWindow").jqxWindow('hide'); |
238 name: $("#name").val(), |
277 location.reload( true ); // reload ourself. |
239 calcium: parseFloat($("#calcium").jqxNumberInput('decimal')), |
|
240 bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')), |
|
241 sulfate: parseFloat($("#sulfate").jqxNumberInput('decimal')), |
|
242 chloride: parseFloat($("#chloride").jqxNumberInput('decimal')), |
|
243 sodium: parseFloat($("#sodium").jqxNumberInput('decimal')), |
|
244 magnesium: parseFloat($("#magnesium").jqxNumberInput('decimal')), |
|
245 ph: parseFloat($("#ph").jqxNumberInput('decimal')), |
|
246 notes: $("#notes").val(), |
|
247 total_alkalinity: parseFloat($("#total_alkalinity").jqxNumberInput('decimal')) |
|
248 }; |
|
249 $('#jqxgrid').jqxGrid('addrow', null, newrow); |
|
250 $("#popupWindow").jqxWindow('hide'); |
|
251 } |
|
252 }); |
278 }); |
253 createDelElements(); |
279 createDelElements(); |
254 }); |
280 }); |
255 |
281 |