42 } |
42 } |
43 |
43 |
44 |
44 |
45 $(document).ready(function () { |
45 $(document).ready(function () { |
46 |
46 |
47 var dataRecord = {}; |
|
48 |
|
49 var url = "includes/db_inventory_water.php"; |
|
50 // tooltips |
47 // tooltips |
51 $("#name").jqxTooltip({ content: 'De unieke naam van dit brouwwater.' }); |
48 $("#name").jqxTooltip({ content: 'De unieke naam van dit brouwwater.' }); |
52 $("#notes").jqxTooltip({ content: 'Extra opmerkingen over dit water.' }); |
49 $("#notes").jqxTooltip({ content: 'Extra opmerkingen over dit water.' }); |
53 $("#unlimited_stock").jqxTooltip({ content: 'Onbeperkte voorraad zoals kraanwater en bronnen.' }); |
50 $("#unlimited_stock").jqxTooltip({ content: 'Onbeperkte voorraad zoals kraanwater en bronnen.' }); |
54 $("#calcium").jqxTooltip({ content: 'Calcium (Ca).' }); |
51 $("#calcium").jqxTooltip({ content: 'Calcium (Ca).' }); |
59 $("#magnesium").jqxTooltip({ content: 'Magnesium (Mg).' }); |
56 $("#magnesium").jqxTooltip({ content: 'Magnesium (Mg).' }); |
60 $("#ph").jqxTooltip({ content: 'De zuurgraad (pH).' }); |
57 $("#ph").jqxTooltip({ content: 'De zuurgraad (pH).' }); |
61 $("#total_alkalinity").jqxTooltip({ content: 'Totale alkaliniteit. Berekend meteen de Bicarbonaat.' }); |
58 $("#total_alkalinity").jqxTooltip({ content: 'Totale alkaliniteit. Berekend meteen de Bicarbonaat.' }); |
62 $("#inventory").jqxTooltip({ content: 'Voorraad in liters.' }); |
59 $("#inventory").jqxTooltip({ content: 'Voorraad in liters.' }); |
63 $("#cost").jqxTooltip({ content: 'Kostprijs per liter. 5 cijfers achter de comma zodat het kraanwater er ook in kan.' }); |
60 $("#cost").jqxTooltip({ content: 'Kostprijs per liter. 5 cijfers achter de comma zodat het kraanwater er ook in kan.' }); |
|
61 |
|
62 var dataRecord = {}, |
|
63 url = 'includes/db_inventory_water.php', |
64 // prepare the data |
64 // prepare the data |
65 var source = { |
65 source = { |
66 datatype: "json", |
66 datatype: "json", |
67 cache: false, |
67 cache: false, |
68 datafields: [ |
68 datafields: [ |
69 { name: 'record', type: 'number' }, |
69 { name: 'record', type: 'number' }, |
70 { name: 'name', type: 'string' }, |
70 { name: 'name', type: 'string' }, |
91 url: url, |
91 url: url, |
92 cache: false, |
92 cache: false, |
93 data: data, |
93 data: data, |
94 type: "POST", |
94 type: "POST", |
95 success: function (data, status, xhr) { |
95 success: function (data, status, xhr) { |
96 // delete command is executed. |
|
97 commit(true); |
96 commit(true); |
|
97 location.reload( true ); |
98 }, |
98 }, |
99 error: function (jqXHR, textStatus, errorThrown) { |
99 error: function (jqXHR, textStatus, errorThrown) { |
100 commit(false); |
100 commit(false); |
101 } |
101 } |
102 }); |
102 }); |
124 url: url, |
125 url: url, |
125 cache: false, |
126 cache: false, |
126 data: data, |
127 data: data, |
127 type: "POST", |
128 type: "POST", |
128 success: function (data, status, xhr) { |
129 success: function (data, status, xhr) { |
129 // update command is executed. |
|
130 commit(true); |
130 commit(true); |
|
131 location.reload( true ); |
131 }, |
132 }, |
132 error: function(jqXHR, textStatus, errorThrown) { |
133 error: function(jqXHR, textStatus, errorThrown) { |
133 commit(false); |
134 commit(false); |
134 } |
135 } |
135 }); |
136 }); |
136 } |
137 } |
137 }; |
138 }, |
|
139 dataAdapter = new $.jqx.dataAdapter(source), |
|
140 editrow = -1; |
|
141 |
138 // initialize the input fields. |
142 // initialize the input fields. |
139 $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); |
143 $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); |
140 $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); |
144 $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); |
141 $("#unlimited_stock").jqxCheckBox({ theme: theme, width: 120, height: 23 }); |
145 $("#unlimited_stock").jqxCheckBox({ theme: theme, width: 120, height: 23 }); |
142 $("#calcium").jqxNumberInput( Spin1dec ); |
146 $("#calcium").jqxNumberInput( Spin1dec ); |
147 $("#magnesium").jqxNumberInput( Spin1dec ); |
151 $("#magnesium").jqxNumberInput( Spin1dec ); |
148 $("#ph").jqxNumberInput( Spin2pH ); |
152 $("#ph").jqxNumberInput( Spin2pH ); |
149 $("#total_alkalinity").jqxNumberInput( Spin1dec ); |
153 $("#total_alkalinity").jqxNumberInput( Spin1dec ); |
150 $("#inventory").jqxNumberInput( Spin1dec ); |
154 $("#inventory").jqxNumberInput( Spin1dec ); |
151 $("#cost").jqxNumberInput({inputMode: 'simple', theme: theme, width: 110, height: 23, min: 0, decimalDigits: 5, spinButtons: true }); |
155 $("#cost").jqxNumberInput({inputMode: 'simple', theme: theme, width: 110, height: 23, min: 0, decimalDigits: 5, spinButtons: true }); |
152 var dataAdapter = new $.jqx.dataAdapter(source); |
156 |
153 var editrow = -1; |
|
154 // initialize jqxGrid |
157 // initialize jqxGrid |
155 $("#jqxgrid").jqxGrid({ |
158 $("#jqxgrid").jqxGrid({ |
156 width: 1280, |
159 width: 1280, |
157 height: 630, |
160 height: 630, |
158 source: dataAdapter, |
161 source: dataAdapter, |
159 theme: theme, |
162 theme: theme, |
160 showstatusbar: true, |
163 showstatusbar: true, |
161 renderstatusbar: function (statusbar) { |
164 renderstatusbar: function (statusbar) { |
162 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
165 var addButton, container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
163 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>"); |
166 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 container.append(addButton); |
167 container.append(addButton); |
165 statusbar.append(container); |
168 statusbar.append(container); |
166 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); |
169 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); |
167 // add new row. |
170 // add new row. |
168 addButton.click(function (event) { |
171 addButton.click(function (event) { |
195 if (value > 0 && rowdata.unlimited_stock == 0) |
198 if (value > 0 && rowdata.unlimited_stock == 0) |
196 amount = dataAdapter.formatNumber(value,"f1")+" L"; |
199 amount = dataAdapter.formatNumber(value,"f1")+" L"; |
197 return "<span style='margin: 3px; margin-top: 6px; float: right;'>" + amount + "</span>"; |
200 return "<span style='margin: 3px; margin-top: 6px; float: right;'>" + amount + "</span>"; |
198 } |
201 } |
199 }, |
202 }, |
200 { text: '', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function () { |
203 { text: '', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', |
201 return "Wijzig"; |
204 cellsrenderer: function () { |
|
205 return "Wijzig"; |
202 }, buttonclick: function (row) { |
206 }, buttonclick: function (row) { |
203 // open the popup window when the user clicks a button. |
207 // open the popup window when the user clicks a button. |
204 editrow = row; |
208 editrow = row; |
205 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
209 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
206 // get the clicked row's data and initialize the input fields. |
210 // get the clicked row's data and initialize the input fields. |
207 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
211 dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
208 $("#name").val(dataRecord.name); |
212 $("#name").val(dataRecord.name); |
209 $("#unlimited_stock").val(dataRecord.unlimited_stock); |
213 $("#unlimited_stock").val(dataRecord.unlimited_stock); |
210 $("#calcium").val(dataRecord.calcium); |
214 $("#calcium").val(dataRecord.calcium); |
211 $("#bicarbonate").val(dataRecord.bicarbonate); |
215 $("#bicarbonate").val(dataRecord.bicarbonate); |
212 $("#sulfate").val(dataRecord.sulfate); |
216 $("#sulfate").val(dataRecord.sulfate); |
262 }); |
266 }); |
263 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); |
267 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); |
264 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); |
268 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); |
265 // update the edited row when the user clicks the 'Save' button. |
269 // update the edited row when the user clicks the 'Save' button. |
266 $("#Save").click(function () { |
270 $("#Save").click(function () { |
267 var rowID = -1; |
271 var row, rowID = -1; |
268 if (editrow >= 0) { |
272 if (editrow >= 0) { |
269 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
273 rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
270 } |
274 } |
271 var row = { |
275 row = { |
272 record: rowID, |
276 record: rowID, |
273 name: $("#name").val(), |
277 name: $("#name").val(), |
274 unlimited_stock: $("#unlimited_stock").val(), |
278 unlimited_stock: $("#unlimited_stock").val(), |
275 calcium: parseFloat($("#calcium").jqxNumberInput('decimal')), |
279 calcium: parseFloat($("#calcium").jqxNumberInput('decimal')), |
276 bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')), |
280 bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')), |
288 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
292 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
289 } else { |
293 } else { |
290 $('#jqxgrid').jqxGrid('addrow', null, row); |
294 $('#jqxgrid').jqxGrid('addrow', null, row); |
291 } |
295 } |
292 $("#popupWindow").jqxWindow('hide'); |
296 $("#popupWindow").jqxWindow('hide'); |
293 location.reload( true ); // reload ourself. |
|
294 }); |
297 }); |
295 createDelElements(); |
298 createDelElements(); |
296 }); |
299 }); |
297 |
300 |