Mercurial > bms / file comparison

comparison: www/js/recipes.js

www/js/recipes.js

changeset 50
6d94167c2697
child 51
7224109adfe1
equal deleted inserted replaced
49:4d27a7fb1265 50:6d94167c2697
1 /*****************************************************************************
2 * Copyright (C) 2018
3 *
4 * Michiel Broek <mbroek at mbse dot eu>
5 *
6 * This file is part of BMS
7 *
8 * This is free software; you can redistribute it and/or modify it
9 * under the terms of the GNU General Public License as published by the
10 * Free Software Foundation; either version 2, or (at your option) any
11 * later version.
12 *
13 * BrewCloud is distributed in the hope that it will be useful, but
14 * WITHOUT ANY WARRANTY; without even the implied warranty of
15 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
16 * General Public License for more details.
17 *
18 * You should have received a copy of the GNU General Public License
19 * along with ThermFerm; see the file COPYING. If not, write to the Free
20 * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
21 *****************************************************************************/
22
23
24 function createDelElements() {
25 $('#eventWindow').jqxWindow({
26 theme: theme,
27 position: { x: 490, y: 210 },
28 width: 300,
29 height: 175,
30 resizable: false,
31 isModal: true,
32 modalOpacity: 0.4,
33 okButton: $('#delOk'),
34 cancelButton: $('#delCancel'),
35 initContent: function () {
36 $('#delOk').jqxButton({ width: '65px', theme: theme });
37 $('#delCancel').jqxButton({ width: '65px', theme: theme });
38 $('#delCancel').focus();
39 }
40 });
41 $('#eventWindow').jqxWindow('hide');
42 }
43
44
45 $(document).ready(function () {
46 var url = "includes/db_recipes.php";
47 // tooltips
48 $("#name").jqxTooltip({ content: 'De naam voor dit recept.' });
49 $("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit recept.' });
50 $("#style_name").jqxTooltip({ content: 'De bierstijl naam voor dit recept.'});
51 $("#type").jqxTooltip({ content: 'Het brouw type van dit recept.' });
52 // prepare the data
53 var source = {
54 datatype: "json",
55 cache: false,
56 datafields: [
57 { name: 'record', type: 'number' },
58 { name: 'style_name', type: 'string' },
59 { name: 'style_letter', type: 'string' },
60 { name: 'style_guide', type: 'string' },
61 { name: 'name', type: 'string' },
62 { name: 'notes', type: 'string' },
63 { name: 'type', type: 'number' },
64 { name: 'batch_size', type: 'float' },
65 { name: 'boil_time', type: 'float' },
66 { name: 'efficiency', type: 'float' },
67 { name: 'est_og', type: 'float' },
68 { name: 'est_fg', type: 'float' },
69 { name: 'est_color', type: 'float' },
70 { name: 'color_method', type: 'string' },
71 { name: 'est_ibu', type: 'float' },
72 { name: 'ibu_method', type: 'string' },
73 { name: 'json_fermentables', type: 'string' },
74 { name: 'json_hops', type: 'string' },
75 { name: 'json_miscs', type: 'string' },
76 { name: 'json_yeasts', type: 'string' },
77 { name: 'json_waters', type: 'string' },
78 { name: 'json_mash', type: 'string' }
79 ],
80 id: 'record',
81 url: url,
82 deleterow: function (rowid, commit) {
83 // synchronize with the server - send delete command
84 var data = "delete=true&" + $.param({ record: rowid });
85 $.ajax({
86 dataType: 'json',
87 url: url,
88 cache: false,
89 data: data,
90 success: function (data, status, xhr) {
91 // delete command is executed.
92 commit(true);
93 },
94 error: function (jqXHR, textStatus, errorThrown) {
95 commit(false);
96 }
97 });
98 },
99 addrow: function (rowid, rowdata, position, commit) {
100 var data = "insert=true&" + $.param(rowdata);
101 $.ajax({
102 dataType: 'json',
103 url: url,
104 cache: false,
105 data: data,
106 success: function (data, status, xhr) {
107 commit(true);
108 },
109 error: function(jqXHR, textStatus, errorThrown) {
110 commit(false);
111 }
112 });
113 },
114 updaterow: function (rowid, rowdata, commit) {
115 var data = "update=true&" + $.param(rowdata);
116 $.ajax({
117 dataType: 'json',
118 url: url,
119 cache: false,
120 data: data,
121 success: function (data, status, xhr) {
122 // update command is executed.
123 commit(true);
124 },
125 error: function(jqXHR, textStatus, errorThrown) {
126 commit(false);
127 }
128 });
129 }
130 };
131 var dataAdapter = new $.jqx.dataAdapter(source);
132 // Inline steps editor
133 /* var editsteps = function (data) {
134 var generaterow = function () {
135 var row = {};
136 row["step_name"] = "Stap 1";
137 row["step_type"] = "Infusion";
138 row["step_temp"] = 62.0;
139 row['step_time'] = 20.0;
140 row['ramp_time'] = 1.0;
141 row['end_temp'] = 62.0;
142 return row;
143 }
144 var stepSource = {
145 localdata: data.steps,
146 datatype: "local",
147 datafields: [
148 { name: 'step_name', type: 'string' },
149 { name: 'step_type', type: 'string' },
150 { name: 'step_temp', type: 'float' },
151 { name: 'step_time', type: 'float' },
152 { name: 'ramp_time', type: 'float' },
153 { name: 'end_temp', type: 'float' }
154 ],
155 addrow: function (rowid, rowdata, position, commit) {
156 commit(true);
157 },
158 deleterow: function (rowid, commit) {
159 commit(true);
160 }
161 };
162 var stepAdapter = new $.jqx.dataAdapter(stepSource);
163 $("#grid").jqxGrid({
164 width: 640,
165 height: 330,
166 source: stepAdapter,
167 theme: theme,
168 selectionmode: 'singlerow',
169 editmode: 'selectedrow',
170 editable: true,
171 showtoolbar: true,
172 rendertoolbar: function (toolbar) {
173 var me = this;
174 var container = $("<div style='margin: 5px;'></div>");
175 toolbar.append(container);
176 container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />');
177 container.append('<input style="margin-left: 140px;" id="deleterowbutton" type="button" value="Verwijder stap" />');
178 $("#addrowbutton").jqxButton({ theme: theme, width: 150 });
179 $("#deleterowbutton").jqxButton({ theme: theme, width: 150 });
180 // create new row.
181 $("#addrowbutton").on('click', function () {
182 var datarow = generaterow();
183 var commit = $("#grid").jqxGrid('addrow', null, datarow);
184 });
185 // delete row.
186 $("#deleterowbutton").on('click', function () {
187 var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
188 var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
189 if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
190 var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
191 var commit = $("#grid").jqxGrid('deleterow', id);
192 }
193 });
194 },
195 columns: [
196 { text: 'Stap naam', datafield: 'step_name' },
197 { text: 'Stap type', datafield: 'step_type', width: 100, columntype: 'dropdownlist',
198 createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
199 var dataSource = [ "Infusion", "Temperature", "Decoction" ];
200 editor.jqxDropDownList({ source: dataSource, dropDownHeight: 95 });
201 }
202 },
203 { text: 'Temperatuur', datafield: 'step_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1',
204 validation: function (cell, value) {
205 if (value < 35 || value > 80) {
206 return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." };
207 }
208 return true;
209 }
210 },
211 { text: 'Eind', datafield: 'end_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1',
212 validation: function (cell, value) {
213 if (value < 35 || value > 80) {
214 return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." };
215 }
216 return true;
217 }
218 },
219 { text: 'Tijd', datafield: 'step_time', width: 70, align: 'right', cellsalign: 'right',
220 validation: function (cell, value) {
221 if (value < 1 || value > 360) {
222 return { result: false, message: "De tijd moet tussen 1 en 360 zijn." };
223 }
224 return true;
225 }
226 },
227 { text: 'Stap', datafield: 'ramp_time', width: 70, align: 'right', cellsalign: 'right',
228 validation: function (cell, value) {
229 if (value < 1 || value > 60) {
230 return { result: false, message: "De tijd moet tussen 1 en 60 zijn." };
231 }
232 return true;
233 }
234 }
235 ]
236 });
237 $("#grid").on('cellendedit', function (event) {
238 $('#grid').jqxGrid('sortby', 'step_temp', 'asc');
239 });
240 };
241 */
242 // initialize the input fields.
243 var srcType = [ "All Grain", "Partial Mash", "Extract" ];
244 var srcColor = [ "Morey", "Mosher", "Daniels" ];
245 var srcIBU = [ "Tinseth", "Rager", "Garetz", "Daniels", "Mosher", "Noonan" ];
246 $("#name").jqxInput({ theme: theme, width: 640, height: 23 });
247 $("#notes").jqxInput({ theme: theme, width: 960, height: 200 });
248 $("#style_name").jqxInput({ theme: theme, width: 250, height: 23 });
249 $("#style_letter").jqxInput({ theme: theme, width: 100, height: 23 });
250 $("#style_guide").jqxInput({ theme: theme, width: 250, height: 23 });
251 $("#type").jqxDropDownList({ theme: theme, source: srcType, width: 125, height: 23, dropDownHeight: 95 });
252 $("#batch_size").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 4, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1, symbol: 'L', symbolPosition: 'right' });
253 $("#boil_time").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', template: "success", theme: theme, width: 100, height: 23, min: 4, max: 360, decimalDigits: 0, spinButtons: true });
254 $("#efficiency").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 40, max: 100, decimalDigits: 0, spinButtons: true, symbol: '%', symbolPosition: 'right' });
255 $("#est_og").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 1, max: 1.9, decimalDigits: 3, spinButtons: true, spinButtonsStep: 0.001 });
256 $("#est_fg").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 100, height: 23, min: 0.980, max: 1.040, decimalDigits: 3, readOnly: true });
257 $("#est_color").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 1, max: 200, decimalDigits: 0, spinButtons: true });
258 $("#color_method").jqxDropDownList({ theme: theme, source: srcColor, width: 125, height: 23, dropDownHeight: 95 });
259 $("#est_ibu").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 0, max: 200, decimalDigits: 0, spinButtons: true });
260 $("#ibu_method").jqxDropDownList({ theme: theme, source: srcIBU, width: 125, height: 23, dropDownHeight: 180 });
261 var editrow = -1;
262 // initialize jqxGrid
263 $("#jqxgrid").jqxGrid({
264 width: 1280,
265 height: 630,
266 source: dataAdapter,
267 groupable: true,
268 theme: theme,
269 showstatusbar: true,
270 localization: getLocalization(),
271 renderstatusbar: function (statusbar) {
272 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
273 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;'>Add</span></div>");
274 container.append(addButton);
275 statusbar.append(container);
276 addButton.jqxButton({ theme: theme, width: 120, height: 20 });
277 // add new row.
278 addButton.click(function (event) {
279 editrow = -1;
280 $("#popupWindow").jqxWindow({ position: { x: 40, y: 20 } });
281 $("#name").val('');
282 $("#notes").val('');
283 $("#style_name").val('');
284 $("#style_letter").val('');
285 $("#style_guide").val('');
286 $("#type").val('All Grain');
287 $("#batch_size").val(20);
288 $("#boil_time").val(90);
289 $("#efficiency").val(75);
290 $("#est_og").val(1.062);
291 $("#est_fg").val(1.000);
292 $("#est_color").val(0);
293 $("#color_method").val('Morey');
294 $("#est_ibu").val(0);
295 $("#ibu_method").val('Tinseth');
296 // editsteps('');
297 $("#popupWindow").jqxWindow('open');
298 });
299 },
300 filterable: true,
301 filtermode: 'excel',
302 columns: [
303 { text: 'Stijlgids', datafield: 'style_guide', width: 120 },
304 { text: 'Letter', datafield: 'style_letter', width: 60 },
305 { text: 'Stijl', datafield: 'style_name', width: 150 },
306 { text: 'Naam', datafield: 'name' },
307 { text: 'OG', datafield: 'est_og', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3' },
308 { text: 'EBC', datafield: 'est_color', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f0' },
309 { text: 'IBU', datafield: 'est_ibu', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f0' },
310 { text: 'Wijzig', datafield: 'Edit', width: 120, align: 'center', columntype: 'button', cellsrenderer: function () {
311 return "Wijzig";
312 }, buttonclick: function (row) {
313 // open the popup window when the user clicks a button.
314 editrow = row;
315 $("#popupWindow").jqxWindow({ position: { x: 40, y: 20 } });
316 // get the clicked row's data and initialize the input fields.
317 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
318 $("#name").val(dataRecord.name);
319 $("#notes").val(dataRecord.notes);
320 $("#style_name").val(dataRecord.style_name);
321 $("#style_letter").val(dataRecord.style_letter);
322 $("#style_guide").val(dataRecord.style_guide);
323 $("#type").val(dataRecord.type);
324 $("#batch_size").val(dataRecord.batch_size);
325 $("#boil_time").val(dataRecord.boil_time);
326 $("#efficiency").val(dataRecord.efficiency);
327 $("#est_og").val(dataRecord.est_og);
328 $("#est_fg").val(dataRecord.est_fg);
329 $("#est_color").val(dataRecord.est_color);
330 $("#color_method").val(dataRecord.color_method);
331 $("#est_ibu").val(dataRecord.est_ibu);
332 $("#ibu_method").val(dataRecord.ibu_method);
333 // editsteps(dataRecord);
334 // show the popup window.
335 $("#popupWindow").jqxWindow('open');
336 }
337 }
338 ],
339 groups: ['style_guide','style_letter' ]
340 });
341
342 // initialize the popup window and buttons.
343 $("#popupWindow").jqxWindow({
344 width: 1200,
345 height: 620,
346 resizable: false,
347 theme: theme,
348 isModal: true,
349 autoOpen: false,
350 cancelButton: $("#Cancel"),
351 modalOpacity: 0.40
352 });
353
354 // Tabs inside the popup window.
355 $('#jqxTabs').jqxTabs({
356 theme: theme,
357 autoHeight: false,
358 height: 580,
359 position: 'top'
360 });
361
362 $("#popupWindow").on('open', function () {
363 $("#name").jqxInput('selectAll');
364 });
365 $("#Delete").jqxButton({ width: '90px', theme: theme });
366 $("#Delete").click(function () {
367 if (editrow >= 0) {
368 // Open a popup to confirm this action.
369 $('#eventWindow').jqxWindow('open');
370 $("#delOk").click(function () {
371 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
372 $("#jqxgrid").jqxGrid('deleterow', rowID);
373 });
374 }
375 $("#popupWindow").jqxWindow('hide');
376 });
377 $("#Cancel").jqxButton({ width: '90px', theme: theme });
378 $("#Save").jqxButton({ width: '90px', theme: theme });
379 // update the edited row when the user clicks the 'Save' button.
380 $("#Save").click(function () {
381 // var steprows = $('#grid').jqxGrid('getrows');
382 if (editrow >= 0) {
383 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
384 var row = {
385 record: rowID,
386 name: $("#name").val(),
387 notes: $("#notes").val(),
388 style_name: $('#style_name').val(),
389 style_letter: $('#style_letter').val(),
390 style_guide: $('#style_guide').val(),
391 type: $("#type").val(),
392 batch_size: parseFloat($("#batch_size").jqxNumberInput('decimal')),
393 boil_time: parseFloat($("#boil_time").jqxNumberInput('decimal')),
394 efficiency: parseFloat($("#efficiency").jqxNumberInput('decimal')),
395 est_og: parseFloat($("#est_og").jqxNumberInput('decimal')),
396 est_fg: parseFloat($("#est_fg").jqxNumberInput('decimal')),
397 est_color: parseFloat($("#est_color").jqxNumberInput('decimal')),
398 color_method: $("#color_method").val(),
399 est_ibu: parseFloat($("#est_ibu").jqxNumberInput('decimal')),
400 ibu_method: $("#ibu_method").val()
401 // steps: steprows
402 };
403 $('#jqxgrid').jqxGrid('updaterow', rowID, row);
404 $("#popupWindow").jqxWindow('hide');
405 } else {
406 // Insert a record
407 var newrow = {
408 record: -1,
409 name: $("#name").val(),
410 notes: $("#notes").val(),
411 style_name: $('#style_name').val(),
412 style_letter: $('#style_letter').val(),
413 style_guide: $('#style_guide').val(),
414 type: $("#type").val(),
415 batch_size: parseFloat($("#batch_size").jqxNumberInput('decimal')),
416 boil_time: parseFloat($("#boil_time").jqxNumberInput('decimal')),
417 efficiency: parseFloat($("#efficiency").jqxNumberInput('decimal')),
418 est_og: parseFloat($("#est_og").jqxNumberInput('decimal')),
419 est_fg: parseFloat($("#est_fg").jqxNumberInput('decimal')),
420 est_color: parseFloat($("#est_color").jqxNumberInput('decimal')),
421 color_method: $("#color_method").val(),
422 est_ibu: parseFloat($("#est_ibu").jqxNumberInput('decimal')),
423 ibu_method: $("#ibu_method").val()
424 // steps: steprows
425 };
426 $('#jqxgrid').jqxGrid('addrow', null, newrow);
427 $("#popupWindow").jqxWindow('hide');
428 }
429 });
430 createDelElements();
431 });
432

Mercurial Repository: bms

mercurial