29 isModal: true, |
29 isModal: true, |
30 modalOpacity: 0.4, |
30 modalOpacity: 0.4, |
31 okButton: $('#delOk'), |
31 okButton: $('#delOk'), |
32 cancelButton: $('#delCancel'), |
32 cancelButton: $('#delCancel'), |
33 initContent: function () { |
33 initContent: function () { |
34 $('#delOk').jqxButton({ width: '65px', theme: theme }); |
34 $('#delOk').jqxButton({ template: "danger", width: '65px', theme: theme }); |
35 $('#delCancel').jqxButton({ width: '65px', theme: theme }); |
35 $('#delCancel').jqxButton({ template: "success", width: '65px', theme: theme }); |
36 $('#delCancel').focus(); |
36 $('#delCancel').focus(); |
37 } |
37 } |
38 }); |
38 }); |
39 $('#eventWindow').jqxWindow('hide'); |
39 $('#eventWindow').jqxWindow('hide'); |
40 } |
40 } |
41 |
41 |
42 |
42 |
43 $(document).ready(function () { |
43 $(document).ready(function () { |
|
44 |
|
45 var dataRecord = {}; |
|
46 |
|
47 function calcTotal(cost, inventory) { |
|
48 |
|
49 $('#totval').val(cost * (inventory / 1000)); |
|
50 } |
|
51 |
|
52 function prompts(isweight) { |
|
53 |
|
54 if (isweight) { |
|
55 $("#pmpt_cost").html('Prijs per kg:'); |
|
56 $("#pmpt_inventory").html('Voorraad gram:'); |
|
57 } else { |
|
58 $("#pmpt_cost").html('Prijs per liter:'); |
|
59 $("#pmpt_inventory").html('Voorraad ml:'); |
|
60 } |
|
61 } |
|
62 |
44 var url = "includes/db_inventory_miscs.php"; |
63 var url = "includes/db_inventory_miscs.php"; |
45 // prepare the data |
64 // prepare the data |
46 var source = { |
65 var source = { |
47 datatype: "json", |
66 datatype: "json", |
48 cache: false, |
67 cache: false, |
49 datafields: [ |
68 datafields: [ |
50 { name: 'record', type: 'number' }, |
69 { name: 'record', type: 'number' }, |
51 { name: 'name', type: 'string' }, |
70 { name: 'name', type: 'string' }, |
52 { name: 'type', type: 'string' }, |
71 { name: 'type', type: 'int' }, |
53 { name: 'use_use', type: 'string' }, |
72 { name: 'use_use', type: 'int' }, |
54 { name: 'time', type: 'float' }, |
73 { name: 'time', type: 'int' }, |
55 { name: 'amount', type: 'float' }, |
74 { name: 'amount', type: 'float' }, |
56 { name: 'amount_is_weight', type: 'bool' }, |
75 { name: 'amount_is_weight', type: 'int' }, |
57 { name: 'use_for', type: 'string' }, |
76 { name: 'use_for', type: 'string' }, |
58 { name: 'notes', type: 'string' }, |
77 { name: 'notes', type: 'string' }, |
59 { name: 'always_on_stock', type: 'bool' }, |
78 { name: 'always_on_stock', type: 'int' }, |
60 { name: 'inventory', type: 'float' }, |
79 { name: 'inventory', type: 'float' }, |
61 { name: 'cost', type: 'float' }, |
80 { name: 'cost', type: 'float' }, |
62 { name: 'production_date', type: 'string' }, |
81 { name: 'production_date', type: 'string' }, |
63 { name: 'tht_date', type: 'string' } |
82 { name: 'tht_date', type: 'string' } |
64 ], |
83 ], |
101 $.ajax({ |
122 $.ajax({ |
102 dataType: 'json', |
123 dataType: 'json', |
103 url: url, |
124 url: url, |
104 cache: false, |
125 cache: false, |
105 data: data, |
126 data: data, |
|
127 type: "POST", |
106 success: function (data, status, xhr) { |
128 success: function (data, status, xhr) { |
107 // update command is executed. |
129 // update command is executed. |
108 commit(true); |
130 commit(true); |
109 }, |
131 }, |
110 error: function(jqXHR, textStatus, errorThrown) { |
132 error: function(jqXHR, textStatus, errorThrown) { |
111 commit(false); |
133 commit(false); |
112 } |
134 } |
113 }); |
135 }); |
114 } |
136 } |
115 }; |
137 }; |
116 var srcType = [ "Spice", "Fining", "Water Agent", "Herb", "Flavor", "Yeast nutrient", "Other" ]; |
|
117 var srcUse = [ "Boil", "Mash", "Primary", "Secondary", "Bottling" ]; |
|
118 // initialize the input fields. |
138 // initialize the input fields. |
119 $("#name").jqxInput({ theme: theme, width: 250, height: 23 }); |
139 $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); |
120 $("#type").jqxDropDownList({ theme: theme, source: srcType, width: 130, height: 23, dropDownHeight: 220 }); |
140 $("#notes").jqxInput({ theme: theme, width: 800, height: 100 }); |
121 $("#use_use").jqxDropDownList({ theme: theme, source: srcUse, width: 90, height: 23, dropDownHeight: 156 }); |
141 |
122 $("#time").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 2, spinButtons: true }); |
142 $("#type").jqxDropDownList({theme: theme, |
|
143 source: MiscTypeAdapter, |
|
144 valueMember: 'id', |
|
145 displayMember: 'nl', |
|
146 width: 180, |
|
147 height: 23, |
|
148 autoDropDownHeight: true |
|
149 }); |
|
150 $("#use_use").jqxDropDownList({ |
|
151 theme: theme, |
|
152 source: MiscUseAdapter, |
|
153 valueMember: 'id', |
|
154 displayMember: 'nl', |
|
155 width: 180, |
|
156 height: 23, |
|
157 autoDropDownHeight: true |
|
158 }); |
|
159 $("#time").jqxNumberInput( PosInt ); |
123 $("#amount_is_weight").jqxCheckBox({ theme: theme, width: 120, height: 23 }); |
160 $("#amount_is_weight").jqxCheckBox({ theme: theme, width: 120, height: 23 }); |
124 $("#use_for").jqxInput({ theme: theme, width: 640, height: 48 }); |
161 $("#use_for").jqxInput({ theme: theme, width: 640, height: 48 }); |
125 $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); |
|
126 $("#always_on_stock").jqxCheckBox({ theme: theme, width: 120, height: 23 }); |
162 $("#always_on_stock").jqxCheckBox({ theme: theme, width: 120, height: 23 }); |
127 $("#inventory").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); |
163 $("#inventory").jqxNumberInput( Spin1dec1 ); |
128 $("#production_date").jqxDateTimeInput({ theme: theme, width: 100, height: 23, formatString: 'yyyy-MM-dd' }); |
164 $("#production_date").jqxDateTimeInput( Dateopts ); |
129 $("#cost").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 2, spinButtons: true }); |
165 $("#cost").jqxNumberInput( Spin2dec1 ); |
130 $("#tht_date").jqxDateTimeInput({ theme: theme, width: 100, height: 23, formatString: 'yyyy-MM-dd' }); |
166 $("#tht_date").jqxDateTimeInput( Dateopts ); |
|
167 $("#totval").jqxNumberInput( Spin2dec1 ); |
|
168 $("#totval").jqxNumberInput({ width: 90, readOnly: true, spinButtons: false }); |
131 |
169 |
132 var dataAdapter = new $.jqx.dataAdapter(source); |
170 var dataAdapter = new $.jqx.dataAdapter(source); |
133 var editrow = -1; |
171 var editrow = -1; |
134 // initialize jqxGrid |
172 // initialize jqxGrid |
135 $("#jqxgrid").jqxGrid({ |
173 $("#jqxgrid").jqxGrid({ |
142 renderstatusbar: function (statusbar) { |
180 renderstatusbar: function (statusbar) { |
143 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
181 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
144 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>"); |
182 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>"); |
145 container.append(addButton); |
183 container.append(addButton); |
146 statusbar.append(container); |
184 statusbar.append(container); |
147 addButton.jqxButton({ theme: theme, width: 120, height: 20 }); |
185 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); |
148 // add new row. |
186 // add new row. |
149 addButton.click(function (event) { |
187 addButton.click(function (event) { |
150 editrow = -1; |
188 editrow = -1; |
151 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); |
189 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
152 $("#name").val(''); |
190 $("#name").val(''); |
153 $("#type").val(''); |
191 $("#type").val(0); |
154 $("#use_use").val(''); |
192 $("#use_use").val(0); |
155 $("#time").val(''); |
193 $("#time").val(0); |
156 $("#amount_is_weight").val(''); |
194 $("#amount_is_weight").val(1); |
157 $("#use_for").val(''); |
195 $("#use_for").val(''); |
158 $("#notes").val(''); |
196 $("#notes").val(''); |
159 $("#always_on_stock").val(''); |
197 $("#always_on_stock").val(0); |
160 $("#inventory").val(''); |
198 $("#inventory").val(0); |
161 $("#cost").val(''); |
199 $("#cost").val(0); |
162 $("#production_date").val(''); |
200 $("#production_date").val(''); |
163 $("#tht_date").val(''); |
201 $("#tht_date").val(''); |
164 $("#popupWindow").jqxWindow('open'); |
202 $("#popupWindow").jqxWindow('open'); |
165 }); |
203 }); |
166 }, |
204 }, |
167 filterable: true, |
205 filterable: true, |
168 filtermode: 'excel', |
206 filtermode: 'excel', |
169 columns: [ |
207 columns: [ |
170 { text: 'Ingredient naam', datafield: 'name', width: 525 }, |
208 { text: 'Ingredient naam', datafield: 'name' }, |
171 { text: 'Soort', datafield: 'type', align: 'center', cellsalign: 'center', width: 110 }, |
209 { text: 'Type', datafield: 'type', align: 'center', cellsalign: 'center', width: 120, |
172 { text: 'Gebruik', datafield: 'use_use', align: 'center', cellsalign: 'center', width: 100 }, |
210 cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) { |
173 { text: 'Tijd', datafield: 'time', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'f2' }, |
211 return "<div style='margin: 4px;' class='jqx-center-align'>" + MiscTypeData[value].nl + "</div>"; |
|
212 } |
|
213 }, |
|
214 { text: 'Gebruik', datafield: 'use_use', align: 'center', cellsalign: 'center', width: 120, |
|
215 cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) { |
|
216 return "<div style='margin: 4px;' class='jqx-center-align'>" + MiscUseData[value].nl + "</div>"; |
|
217 } |
|
218 }, |
|
219 { text: 'Tijd', datafield: 'time', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'f0', |
|
220 cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) { |
|
221 if (value == 0) |
|
222 return "<div style='margin: 4px;' class='jqx-right-align'></div>"; |
|
223 if (value == 1) |
|
224 return "<div style='margin: 4px;' class='jqx-right-align'>1 minuut</div>"; |
|
225 if (value < 60) |
|
226 return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f0")+" minuten</div>"; |
|
227 if (value == 60) |
|
228 return "<div style='margin: 4px;' class='jqx-right-align'>1 uur</div>"; |
|
229 if (value < 1440) |
|
230 return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value / 60, "f0")+" uren</div>"; |
|
231 if (value == 1440) |
|
232 return "<div style='margin: 4px;' class='jqx-right-align'>1 dag</div>"; |
|
233 return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value / 1440, "f0")+" dagen</div>"; |
|
234 } |
|
235 }, |
174 { text: 'Voor. gr/ml.', datafield: 'inventory', width: 110, align: 'right', cellsalign: 'right' }, |
236 { text: 'Voor. gr/ml.', datafield: 'inventory', width: 110, align: 'right', cellsalign: 'right' }, |
175 { text: 'Prijs kg/l', datafield: 'cost', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'c2' }, |
237 { text: 'Prijs kg/l', datafield: 'cost', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'c2' }, |
176 { text: 'THT datum', datafield: 'tht_date', width: 100, align: 'center', cellsalign: 'center' }, |
238 { text: 'THT datum', datafield: 'tht_date', width: 100, align: 'center', cellsalign: 'center' }, |
177 { text: 'Wijzig', datafield: 'Edit', columntype: 'button', align: 'center', cellsrenderer: function () { |
239 { text: 'Wijzig', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () { |
178 return "Wijzig"; |
240 return "Wijzig"; |
179 }, buttonclick: function (row) { |
241 }, buttonclick: function (row) { |
180 // open the popup window when the user clicks a button. |
242 // open the popup window when the user clicks a button. |
181 editrow = row; |
243 editrow = row; |
182 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); |
244 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
183 // get the clicked row's data and initialize the input fields. |
245 // get the clicked row's data and initialize the input fields. |
184 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
246 dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
185 $("#name").val(dataRecord.name); |
247 $("#name").val(dataRecord.name); |
186 $("#type").val(dataRecord.type); |
248 $("#type").val(dataRecord.type); |
187 $("#use_use").val(dataRecord.use_use); |
249 $("#use_use").val(dataRecord.use_use); |
188 $("#time").val(dataRecord.time); |
250 $("#time").val(dataRecord.time); |
189 $("#amount_is_weight").val(dataRecord.amount_is_weight); |
251 $("#amount_is_weight").val(dataRecord.amount_is_weight); |
192 $("#always_on_stock").val(dataRecord.always_on_stock); |
254 $("#always_on_stock").val(dataRecord.always_on_stock); |
193 $("#inventory").val(dataRecord.inventory); |
255 $("#inventory").val(dataRecord.inventory); |
194 $("#cost").val(dataRecord.cost); |
256 $("#cost").val(dataRecord.cost); |
195 $("#production_date").val(dataRecord.production_date); |
257 $("#production_date").val(dataRecord.production_date); |
196 $("#tht_date").val(dataRecord.tht_date); |
258 $("#tht_date").val(dataRecord.tht_date); |
|
259 calcTotal(dataRecord.cost, dataRecord.inventory); |
|
260 prompts(dataRecord.amount_is_weight); |
197 // show the popup window. |
261 // show the popup window. |
198 $("#popupWindow").jqxWindow('open'); |
262 $("#popupWindow").jqxWindow('open'); |
199 } |
263 } |
200 } |
264 } |
201 ] |
265 ] |
202 }); |
266 }); |
|
267 |
|
268 $("#cost").on('change', function (event) { |
|
269 dataRecord.cost = parseFloat(event.args.value); |
|
270 calcTotal(dataRecord.cost, dataRecord.inventory); |
|
271 }); |
|
272 $("#inventory").on('change', function (event) { |
|
273 dataRecord.inventory = parseFloat(event.args.value); |
|
274 calcTotal(dataRecord.cost, dataRecord.inventory); |
|
275 }); |
|
276 $("#amount_is_weight").on('checked', function (event) { |
|
277 dataRecord.amount_is_weight = true; |
|
278 prompts(true); |
|
279 }); |
|
280 $("#amount_is_weight").on('unchecked', function (event) { |
|
281 dataRecord.amount_is_weight = false; |
|
282 prompts(false); |
|
283 }); |
|
284 |
203 // initialize the popup window and buttons. |
285 // initialize the popup window and buttons. |
204 $("#popupWindow").jqxWindow({ |
286 $("#popupWindow").jqxWindow({ |
205 width: 860, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.40 |
287 width: 1050, |
|
288 height: 550, |
|
289 resizable: false, |
|
290 theme: theme, |
|
291 isModal: true, |
|
292 autoOpen: false, |
|
293 cancelButton: $("#Cancel"), |
|
294 modalOpacity: 0.40 |
206 }); |
295 }); |
207 $("#popupWindow").on('open', function () { |
296 $("#popupWindow").on('open', function () { |
208 $("#name").jqxInput('selectAll'); |
297 $("#name").jqxInput('selectAll'); |
209 }); |
298 }); |
210 $("#Delete").jqxButton({ theme: theme }); |
299 $("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme }); |
211 $("#Delete").click(function () { |
300 $("#Delete").click(function () { |
212 if (editrow >= 0) { |
301 if (editrow >= 0) { |
213 // Open a popup to confirm this action. |
302 // Open a popup to confirm this action. |
214 $('#eventWindow').jqxWindow('open'); |
303 $('#eventWindow').jqxWindow('open'); |
215 $("#delOk").click(function () { |
304 $("#delOk").click(function () { |
217 $("#jqxgrid").jqxGrid('deleterow', rowID); |
306 $("#jqxgrid").jqxGrid('deleterow', rowID); |
218 }); |
307 }); |
219 } |
308 } |
220 $("#popupWindow").jqxWindow('hide'); |
309 $("#popupWindow").jqxWindow('hide'); |
221 }); |
310 }); |
222 $("#Cancel").jqxButton({ theme: theme }); |
311 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); |
223 $("#Save").jqxButton({ theme: theme }); |
312 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); |
224 // update the edited row when the user clicks the 'Save' button. |
313 // update the edited row when the user clicks the 'Save' button. |
225 $("#Save").click(function () { |
314 $("#Save").click(function () { |
|
315 var rowID = -1; |
226 if (editrow >= 0) { |
316 if (editrow >= 0) { |
227 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
317 rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
228 var row = { |
318 } |
229 record: rowID, |
319 var row = { |
230 name: $("#name").val(), |
320 record: rowID, |
231 type: $("#type").val(), |
321 name: $("#name").val(), |
232 use_use: $("#use_use").val(), |
322 type: $("#type").val(), |
233 time: parseFloat($("#time").jqxNumberInput('decimal')), |
323 use_use: $("#use_use").val(), |
234 amount_is_weight: $("#amount_is_weight").val(), |
324 time: parseFloat($("#time").jqxNumberInput('decimal')), |
235 use_for: $("#use_for").val(), |
325 amount_is_weight: $("#amount_is_weight").val(), |
236 notes: $("#notes").val(), |
326 use_for: $("#use_for").val(), |
237 always_on_stock: $("#always_on_stock").val(), |
327 notes: $("#notes").val(), |
238 inventory: parseFloat($("#inventory").jqxNumberInput('decimal')), |
328 always_on_stock: $("#always_on_stock").val(), |
239 cost: parseFloat($("#cost").jqxNumberInput('decimal')), |
329 inventory: parseFloat($("#inventory").jqxNumberInput('decimal')), |
240 production_date: $("#production_date").val(), |
330 cost: parseFloat($("#cost").jqxNumberInput('decimal')), |
241 tht_date: $("#tht_date").val() |
331 production_date: $("#production_date").val(), |
242 }; |
332 tht_date: $("#tht_date").val() |
|
333 }; |
|
334 if (editrow >= 0) { |
243 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
335 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
244 $("#popupWindow").jqxWindow('hide'); |
|
245 } else { |
336 } else { |
246 // Insert a record |
337 $('#jqxgrid').jqxGrid('addrow', null, row); |
247 var newrow = { |
338 } |
248 record: -1, |
339 $("#popupWindow").jqxWindow('hide'); |
249 name: $("#name").val(), |
340 location.reload( true ); // reload ourself. |
250 type: $("#type").val(), |
|
251 use_use: $("#use_use").val(), |
|
252 time: parseFloat($("#time").jqxNumberInput('decimal')), |
|
253 amount_is_weight: $("#amount_is_weight").val(), |
|
254 use_for: $("#use_for").val(), |
|
255 notes: $("#notes").val(), |
|
256 always_on_stock: $("#always_on_stock").val(), |
|
257 inventory: parseFloat($("#inventory").jqxNumberInput('decimal')), |
|
258 cost: parseFloat($("#cost").jqxNumberInput('decimal')), |
|
259 production_date: $("#production_date").val(), |
|
260 tht_date: $("#tht_date").val() |
|
261 }; |
|
262 $('#jqxgrid').jqxGrid('addrow', null, newrow); |
|
263 $("#popupWindow").jqxWindow('hide'); |
|
264 } |
|
265 }); |
341 }); |
266 createDelElements(); |
342 createDelElements(); |
267 }); |
343 }); |
268 |
344 |