www/js/inv_waters.js

changeset 205
08488ac3bbb1
parent 99
f433193f7bb6
child 206
b78e1111fc58
equal deleted inserted replaced
204:5df88c6dc903 205:08488ac3bbb1
1 /***************************************************************************** 1 /*****************************************************************************
2 * Copyright (C) 2014-2018 2 * Copyright (C) 2014-2019
3 * 3 *
4 * Michiel Broek <mbroek at mbse dot eu> 4 * Michiel Broek <mbroek at mbse dot eu>
5 * 5 *
6 * This file is part of BrewCloud 6 * This file is part of BrewCloud
7 * 7 *
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' },
86 $.ajax({ 89 $.ajax({
87 dataType: 'json', 90 dataType: 'json',
88 url: url, 91 url: url,
89 cache: false, 92 cache: false,
90 data: data, 93 data: data,
94 type: "POST",
91 success: function (data, status, xhr) { 95 success: function (data, status, xhr) {
92 // delete command is executed. 96 // delete command is executed.
93 commit(true); 97 commit(true);
94 }, 98 },
95 error: function (jqXHR, textStatus, errorThrown) { 99 error: function (jqXHR, textStatus, errorThrown) {
102 $.ajax({ 106 $.ajax({
103 dataType: 'json', 107 dataType: 'json',
104 url: url, 108 url: url,
105 cache: false, 109 cache: false,
106 data: data, 110 data: data,
111 type: "POST",
107 success: function (data, status, xhr) { 112 success: function (data, status, xhr) {
108 commit(true); 113 commit(true);
109 }, 114 },
110 error: function(jqXHR, textStatus, errorThrown) { 115 error: function(jqXHR, textStatus, errorThrown) {
111 commit(false); 116 commit(false);
117 $.ajax({ 122 $.ajax({
118 dataType: 'json', 123 dataType: 'json',
119 url: url, 124 url: url,
120 cache: false, 125 cache: false,
121 data: data, 126 data: data,
127 type: "POST",
122 success: function (data, status, xhr) { 128 success: function (data, status, xhr) {
123 // update command is executed. 129 // update command is executed.
124 commit(true); 130 commit(true);
125 }, 131 },
126 error: function(jqXHR, textStatus, errorThrown) { 132 error: function(jqXHR, textStatus, errorThrown) {
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

mercurial