www/js/inv_hops.js

changeset 196
531d5458782f
parent 37
9362eb9e9e5b
child 199
dad62ec9af18
equal deleted inserted replaced
195:2ac491548d8d 196:531d5458782f
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 }
56 { name: 'humulene', type: 'float' }, 56 { name: 'humulene', type: 'float' },
57 { name: 'caryophyllene', type: 'float' }, 57 { name: 'caryophyllene', type: 'float' },
58 { name: 'cohumulone', type: 'float' }, 58 { name: 'cohumulone', type: 'float' },
59 { name: 'myrcene', type: 'float' }, 59 { name: 'myrcene', type: 'float' },
60 { name: 'hsi', type: 'float' }, 60 { name: 'hsi', type: 'float' },
61 { name: 'type', type: 'string' }, 61 { name: 'type', type: 'int' },
62 { name: 'form', type: 'string' }, 62 { name: 'form', type: 'int' },
63 { name: 'notes', type: 'string' }, 63 { name: 'notes', type: 'string' },
64 { name: 'origin', type: 'string' }, 64 { name: 'origin', type: 'string' },
65 { name: 'substitutes', type: 'string' }, 65 { name: 'substitutes', type: 'string' },
66 { name: 'always_on_stock', type: 'bool' }, 66 { name: 'always_on_stock', type: 'int' },
67 { name: 'inventory', type: 'float' }, 67 { name: 'inventory', type: 'float' },
68 { name: 'cost', type: 'float' }, 68 { name: 'cost', type: 'float' },
69 { name: 'production_date', type: 'string' }, 69 { name: 'production_date', type: 'string' },
70 { name: 'tht_date', type: 'string' }, 70 { name: 'tht_date', type: 'string' },
71 { name: 'total_oil', type: 'float' } 71 { name: 'total_oil', type: 'float' }
78 $.ajax({ 78 $.ajax({
79 dataType: 'json', 79 dataType: 'json',
80 url: url, 80 url: url,
81 cache: false, 81 cache: false,
82 data: data, 82 data: data,
83 type: "POST",
83 success: function (data, status, xhr) { 84 success: function (data, status, xhr) {
84 // delete command is executed. 85 // delete command is executed.
85 commit(true); 86 commit(true);
86 }, 87 },
87 error: function (jqXHR, textStatus, errorThrown) { 88 error: function (jqXHR, textStatus, errorThrown) {
94 $.ajax({ 95 $.ajax({
95 dataType: 'json', 96 dataType: 'json',
96 url: url, 97 url: url,
97 cache: false, 98 cache: false,
98 data: data, 99 data: data,
100 type: "POST",
99 success: function (data, status, xhr) { 101 success: function (data, status, xhr) {
100 commit(true); 102 commit(true);
101 }, 103 },
102 error: function(jqXHR, textStatus, errorThrown) { 104 error: function(jqXHR, textStatus, errorThrown) {
103 commit(false); 105 commit(false);
109 $.ajax({ 111 $.ajax({
110 dataType: 'json', 112 dataType: 'json',
111 url: url, 113 url: url,
112 cache: false, 114 cache: false,
113 data: data, 115 data: data,
116 type: "POST",
114 success: function (data, status, xhr) { 117 success: function (data, status, xhr) {
115 // update command is executed. 118 // update command is executed.
116 commit(true); 119 commit(true);
117 }, 120 },
118 error: function(jqXHR, textStatus, errorThrown) { 121 error: function(jqXHR, textStatus, errorThrown) {
119 commit(false); 122 commit(false);
120 } 123 }
121 }); 124 });
122 } 125 }
123 }; 126 };
124 // var srcUse = [ "Boil", "Dry Hop", "Mash", "First Wort", "Aroma" ]; // Only in recipes
125 var srcType = [ "Bittering", "Aroma", "Both" ]; 127 var srcType = [ "Bittering", "Aroma", "Both" ];
126 var srcForm = [ "Pellet", "Plug", "Leaf" ]; 128 var srcForm = [ "Pellet", "Plug", "Leaf" ];
127 // initialize the input fields. 129 // initialize the input fields.
128 $("#name").jqxInput({ theme: theme, width: 250, height: 23 }); 130 $("#name").jqxInput({ theme: theme, width: 640, height: 23 });
129 $("#alpha").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); 131 $("#alpha").jqxNumberInput( Perc1dec1 );
130 $("#beta").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); 132 $("#beta").jqxNumberInput( Perc1dec1 );
131 $("#humulene").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); 133 $("#humulene").jqxNumberInput( Perc1dec1 );
132 $("#caryophyllene").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); 134 $("#caryophyllene").jqxNumberInput( Perc1dec1 );
133 $("#cohumulone").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); 135 $("#cohumulone").jqxNumberInput( Perc1dec1 );
134 $("#myrcene").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); 136 $("#myrcene").jqxNumberInput( Perc1dec1 );
135 $("#hsi").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); 137 $("#hsi").jqxNumberInput( Perc1dec5 );
136 138
137 $("#type").jqxDropDownList({ theme: theme, source: srcType, width: 90, height: 23, dropDownHeight: 95 }); 139 $("#type").jqxDropDownList({
138 $("#form").jqxDropDownList({ theme: theme, source: srcForm, width: 90, height: 23, dropDownHeight: 95 }); 140 theme: theme,
141 source: HopTypeAdapter,
142 valueMember: 'id',
143 displayMember: 'nl',
144 width: 150,
145 height: 23,
146 autoDropDownHeight: true
147 });
148 $("#form").jqxDropDownList({
149 theme: theme,
150 source: HopFormAdapter,
151 valueMember: 'id',
152 displayMember: 'nl',
153 width: 150,
154 height: 23,
155 autoDropDownHeight: true
156 });
139 $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); 157 $("#notes").jqxInput({ theme: theme, width: 640, height: 100 });
140 $("#origin").jqxInput({ theme: theme, width: 250, height: 23 }); 158 $("#origin").jqxInput({ theme: theme, width: 320, height: 23 });
141 $("#substitutes").jqxInput({ theme: theme, width: 250, height: 23 }); 159 $("#substitutes").jqxInput({ theme: theme, width: 320, height: 23 });
142 $("#always_on_stock").jqxCheckBox({ theme: theme, width: 120, height: 23 }); 160 $("#always_on_stock").jqxCheckBox({ theme: theme, width: 120, height: 23 });
143 $("#inventory").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); 161 $("#inventory").jqxNumberInput( Spin1dec1 );
144 $("#production_date").jqxDateTimeInput({ theme: theme, width: 100, height: 23, formatString: 'yyyy-MM-dd' }); 162 $("#production_date").jqxDateTimeInput( Dateopts );
145 $("#cost").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 2, spinButtons: true }); 163 $("#cost").jqxNumberInput( Spin2dec1 );
146 $("#tht_date").jqxDateTimeInput({ theme: theme, width: 100, height: 23, formatString: 'yyyy-MM-dd' }); 164 $("#tht_date").jqxDateTimeInput( Dateopts );
147 $("#total_oil").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); 165 $("#total_oil").jqxNumberInput( Perc1dec1 );
148 var dataAdapter = new $.jqx.dataAdapter(source); 166 var dataAdapter = new $.jqx.dataAdapter(source);
149 var editrow = -1; 167 var editrow = -1;
150 // initialize jqxGrid 168 // initialize jqxGrid
151 $("#jqxgrid").jqxGrid({ 169 $("#jqxgrid").jqxGrid({
152 width: 1280, 170 width: 1280,
158 renderstatusbar: function (statusbar) { 176 renderstatusbar: function (statusbar) {
159 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); 177 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
160 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>"); 178 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>");
161 container.append(addButton); 179 container.append(addButton);
162 statusbar.append(container); 180 statusbar.append(container);
163 addButton.jqxButton({ theme: theme, width: 120, height: 20 }); 181 addButton.jqxButton({ theme: theme, width: 90, height: 20 });
164 // add new row. 182 // add new row.
165 addButton.click(function (event) { 183 addButton.click(function (event) {
166 editrow = -1; 184 editrow = -1;
167 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); 185 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } });
168 $("#name").val(''); 186 $("#name").val('Nieuwe hop');
169 $("#alpha").val(''); 187 $("#alpha").val(0);
170 $("#beta").val(''); 188 $("#beta").val(0);
171 $("#humulene").val(''); 189 $("#humulene").val(0);
172 $("#caryophyllene").val(''); 190 $("#caryophyllene").val(0);
173 $("#cohumulone").val(''); 191 $("#cohumulone").val(0);
174 $("#myrcene").val(''); 192 $("#myrcene").val(0);
175 $("#hsi").val(''); 193 $("#hsi").val(0);
176 $("#type").val('Bittering'); 194 $("#type").val(0);
177 $("#form").val('Pellet'); 195 $("#form").val(0);
178 $("#notes").val(''); 196 $("#notes").val('');
179 $("#origin").val(''); 197 $("#origin").val('');
180 $("#substitutes").val(''); 198 $("#substitutes").val('');
181 $("#always_on_stock").val(''); 199 $("#always_on_stock").val(0);
182 $("#inventory").val(''); 200 $("#inventory").val(0);
183 $("#cost").val(''); 201 $("#cost").val(0);
184 $("#production_date").val(''); 202 $("#production_date").val('');
185 $("#tht_date").val(''); 203 $("#tht_date").val('');
186 $("#total_oil").val(''); 204 $("#total_oil").val(0);
187 $("#popupWindow").jqxWindow('open'); 205 $("#popupWindow").jqxWindow('open');
188 }); 206 });
189 }, 207 },
190 filterable: true, 208 filterable: true,
191 filtermode: 'excel', 209 filtermode: 'excel',
192 columns: [ 210 columns: [
193 { text: 'Herkomst', datafield: 'origin', align: 'center', cellsalign: 'center', width: 150 }, 211 { text: 'Herkomst', datafield: 'origin', align: 'center', cellsalign: 'center', width: 150 },
194 { text: 'Hop Naam', datafield: 'name' }, 212 { text: 'Hop Naam', datafield: 'name' },
195 { text: 'Soort', datafield: 'type', align: 'center', cellsalign: 'center', width: 90 }, 213 { text: 'Soort', datafield: 'type', align: 'center', cellsalign: 'center', width: 90,
196 { text: 'Vorm', datafield: 'form', align: 'center', cellsalign: 'center', width: 90 }, 214 cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
215 return "<div style='margin: 4px;' class='jqx-center-align'>" + HopTypeData[value].nl + "</div>";
216 }
217 },
218 { text: 'Vorm', datafield: 'form', align: 'center', cellsalign: 'center', width: 90,
219 cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
220 return "<div style='margin: 4px;' class='jqx-center-align'>" + HopFormData[value].nl + "</div>";
221 }
222 },
197 { text: 'Alpha %', datafield: 'alpha', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' }, 223 { text: 'Alpha %', datafield: 'alpha', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
198 { text: 'Beta %', datafield: 'beta', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' }, 224 { text: 'Beta %', datafield: 'beta', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
199 { text: 'Cohumuloon %%', datafield: 'cohumulone', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' }, 225 { text: 'Cohumuloon %%', datafield: 'cohumulone', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
200 { text: 'HSI', datafield: 'hsi', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, 226 { text: 'HSI', datafield: 'hsi', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
201 { text: 'Oogst datum', datafield: 'production_date', align: 'center', cellsalign: 'center', width: 100 }, 227 { text: 'Oogst datum', datafield: 'production_date', align: 'center', cellsalign: 'center', width: 100 },
202 { text: 'Voor, gr.', datafield: 'inventory', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, 228 { text: 'Voor, gr.', datafield: 'inventory', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
203 { text: 'Prijs /kg', datafield: 'cost', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'c2' }, 229 { text: 'Prijs /kg', datafield: 'cost', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'c2' },
204 { text: 'Wijzig', datafield: 'Wijzig', columntype: 'button', width: 120, align: 'center', cellsrenderer: function () { 230 { text: 'Wijzig', datafield: 'Wijzig', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
205 return "Wijzig"; 231 return "Wijzig";
206 }, buttonclick: function (row) { 232 }, buttonclick: function (row) {
207 // open the popup window when the user clicks a button. 233 // open the popup window when the user clicks a button.
208 editrow = row; 234 editrow = row;
209 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); 235 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } });
210 // get the clicked row's data and initialize the input fields. 236 // get the clicked row's data and initialize the input fields.
211 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); 237 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
212 $("#name").val(dataRecord.name); 238 $("#name").val(dataRecord.name);
213 $("#alpha").val(dataRecord.alpha); 239 $("#alpha").val(dataRecord.alpha);
214 $("#beta").val(dataRecord.beta); 240 $("#beta").val(dataRecord.beta);
234 } 260 }
235 ] 261 ]
236 }); 262 });
237 // initialize the popup window and buttons. 263 // initialize the popup window and buttons.
238 $("#popupWindow").jqxWindow({ 264 $("#popupWindow").jqxWindow({
239 width: 860, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.40 265 width: 1050,
266 height: 550,
267 resizable: false,
268 theme: theme,
269 isModal: true,
270 autoOpen: false,
271 cancelButton: $("#Cancel"),
272 modalOpacity: 0.40
240 }); 273 });
241 $("#popupWindow").on('open', function () { 274 $("#popupWindow").on('open', function () {
242 $("#name").jqxInput('selectAll'); 275 $("#name").jqxInput('selectAll');
243 }); 276 });
244 $("#Delete").jqxButton({ theme: theme }); 277 $("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme });
245 $("#Delete").click(function () { 278 $("#Delete").click(function () {
246 if (editrow >= 0) { 279 if (editrow >= 0) {
247 // Open a popup to confirm this action. 280 // Open a popup to confirm this action.
248 $('#eventWindow').jqxWindow('open'); 281 $('#eventWindow').jqxWindow('open');
249 $("#delOk").click(function () { 282 $("#delOk").click(function () {
251 $("#jqxgrid").jqxGrid('deleterow', rowID); 284 $("#jqxgrid").jqxGrid('deleterow', rowID);
252 }); 285 });
253 } 286 }
254 $("#popupWindow").jqxWindow('hide'); 287 $("#popupWindow").jqxWindow('hide');
255 }); 288 });
256 $("#Cancel").jqxButton({ theme: theme }); 289 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme });
257 $("#Save").jqxButton({ theme: theme }); 290 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme });
258 // update the edited row when the user clicks the 'Save' button. 291 // update the edited row when the user clicks the 'Save' button.
259 $("#Save").click(function () { 292 $("#Save").click(function () {
293 var rowID = -1;
260 if (editrow >= 0) { 294 if (editrow >= 0) {
261 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); 295 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
262 var row = { 296 }
263 record: rowID, 297 var row = {
264 name: $("#name").val(), 298 record: rowID,
265 alpha: parseFloat($("#alpha").jqxNumberInput('decimal')), 299 name: $("#name").val(),
266 beta: parseFloat($("#beta").jqxNumberInput('decimal')), 300 alpha: parseFloat($("#alpha").jqxNumberInput('decimal')),
267 humulene: parseFloat($("#humulene").jqxNumberInput('decimal')), 301 beta: parseFloat($("#beta").jqxNumberInput('decimal')),
268 caryophyllene: parseFloat($("#caryophyllene").jqxNumberInput('decimal')), 302 humulene: parseFloat($("#humulene").jqxNumberInput('decimal')),
269 cohumulone: parseFloat($("#cohumulone").jqxNumberInput('decimal')), 303 caryophyllene: parseFloat($("#caryophyllene").jqxNumberInput('decimal')),
270 myrcene: parseFloat($("#myrcene").jqxNumberInput('decimal')), 304 cohumulone: parseFloat($("#cohumulone").jqxNumberInput('decimal')),
271 hsi: parseFloat($("#hsi").jqxNumberInput('decimal')), 305 myrcene: parseFloat($("#myrcene").jqxNumberInput('decimal')),
272 type: $("#type").val(), 306 hsi: parseFloat($("#hsi").jqxNumberInput('decimal')),
273 form: $("#form").val(), 307 type: $("#type").val(),
274 notes: $("#notes").val(), 308 form: $("#form").val(),
275 origin: $("#origin").val(), 309 notes: $("#notes").val(),
276 substitutes: $("#substitutes").val(), 310 origin: $("#origin").val(),
277 always_on_stock: $("#always_on_stock").val(), 311 substitutes: $("#substitutes").val(),
278 inventory: parseFloat($("#inventory").jqxNumberInput('decimal')), 312 always_on_stock: $("#always_on_stock").val(),
279 cost: parseFloat($("#cost").jqxNumberInput('decimal')), 313 inventory: parseFloat($("#inventory").jqxNumberInput('decimal')),
280 production_date: $("#production_date").val(), 314 cost: parseFloat($("#cost").jqxNumberInput('decimal')),
281 tht_date: $("#tht_date").val(), 315 production_date: $("#production_date").val(),
282 total_oil: parseFloat($("#total_oil").jqxNumberInput('decimal')) 316 tht_date: $("#tht_date").val(),
283 }; 317 total_oil: parseFloat($("#total_oil").jqxNumberInput('decimal'))
318 };
319 if (editrow >= 0) {
284 $('#jqxgrid').jqxGrid('updaterow', rowID, row); 320 $('#jqxgrid').jqxGrid('updaterow', rowID, row);
285 $("#popupWindow").jqxWindow('hide');
286 } else { 321 } else {
287 // Insert a record 322 $('#jqxgrid').jqxGrid('addrow', null, row);
288 var newrow = { 323 }
289 record: -1, 324 $("#popupWindow").jqxWindow('hide');
290 name: $("#name").val(), 325 location.reload( true ); // reload ourself.
291 alpha: parseFloat($("#alpha").jqxNumberInput('decimal')),
292 beta: parseFloat($("#beta").jqxNumberInput('decimal')),
293 humulene: parseFloat($("#humulene").jqxNumberInput('decimal')),
294 caryophyllene: parseFloat($("#caryophyllene").jqxNumberInput('decimal')),
295 cohumulone: parseFloat($("#cohumulone").jqxNumberInput('decimal')),
296 myrcene: parseFloat($("#myrcene").jqxNumberInput('decimal')),
297 hsi: parseFloat($("#hsi").jqxNumberInput('decimal')),
298 type: $("#type").val(),
299 form: $("#form").val(),
300 notes: $("#notes").val(),
301 origin: $("#origin").val(),
302 substitutes: $("#substitutes").val(),
303 always_on_stock: $("#always_on_stock").val(),
304 inventory: parseFloat($("#inventory").jqxNumberInput('decimal')),
305 cost: parseFloat($("#cost").jqxNumberInput('decimal')),
306 production_date: $("#production_date").val(),
307 tht_date: $("#tht_date").val(),
308 total_oil: parseFloat($("#total_oil").jqxNumberInput('decimal'))
309 };
310 $('#jqxgrid').jqxGrid('addrow', null, newrow);
311 $("#popupWindow").jqxWindow('hide');
312 }
313 }); 326 });
314 createDelElements(); 327 createDelElements();
315 }); 328 });
316 329

mercurial