|
1 /***************************************************************************** |
|
2 * Copyright (C) 2014-2018 |
|
3 * |
|
4 * Michiel Broek <mbroek at mbse dot eu> |
|
5 * |
|
6 * This file is part of BrewCloud |
|
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_profile_styles.php"; |
|
47 // prepare the data |
|
48 var source = { |
|
49 datatype: "json", |
|
50 cache: false, |
|
51 datafields: [ |
|
52 { name: 'record', type: 'number' }, |
|
53 { name: 'name', type: 'string' }, |
|
54 { name: 'category', type: 'string' }, |
|
55 { name: 'category_number', type: 'number' }, |
|
56 { name: 'style_letter', type: 'string' }, |
|
57 { name: 'style_guide', type: 'string' }, |
|
58 { name: 'type', type: 'string' }, |
|
59 { name: 'og_min', type: 'float' }, |
|
60 { name: 'og_max', type: 'float' }, |
|
61 { name: 'fg_min', type: 'float' }, |
|
62 { name: 'fg_max', type: 'float' }, |
|
63 { name: 'ibu_min', type: 'float' }, |
|
64 { name: 'ibu_max', type: 'float' }, |
|
65 { name: 'color_min', type: 'float' }, |
|
66 { name: 'color_max', type: 'float' }, |
|
67 { name: 'carb_min', type: 'float' }, |
|
68 { name: 'carb_max', type: 'float' }, |
|
69 { name: 'abv_min', type: 'float' }, |
|
70 { name: 'abv_max', type: 'float' }, |
|
71 { name: 'notes', type: 'string' }, |
|
72 { name: 'profile', type: 'string' }, |
|
73 { name: 'ingredients', type: 'string' }, |
|
74 { name: 'examples', type: 'string' } |
|
75 ], |
|
76 id: 'record', |
|
77 url: url, |
|
78 deleterow: function (rowid, commit) { |
|
79 // synchronize with the server - send delete command |
|
80 var data = "delete=true&" + $.param({ record: rowid }); |
|
81 $.ajax({ |
|
82 dataType: 'json', |
|
83 url: url, |
|
84 cache: false, |
|
85 data: data, |
|
86 success: function (data, status, xhr) { |
|
87 // delete command is executed. |
|
88 commit(true); |
|
89 }, |
|
90 error: function (jqXHR, textStatus, errorThrown) { |
|
91 commit(false); |
|
92 } |
|
93 }); |
|
94 }, |
|
95 addrow: function (rowid, rowdata, position, commit) { |
|
96 var data = "insert=true&" + $.param(rowdata); |
|
97 $.ajax({ |
|
98 dataType: 'json', |
|
99 url: url, |
|
100 cache: false, |
|
101 data: data, |
|
102 success: function (data, status, xhr) { |
|
103 commit(true); |
|
104 }, |
|
105 error: function(jqXHR, textStatus, errorThrown) { |
|
106 commit(false); |
|
107 } |
|
108 }); |
|
109 }, |
|
110 updaterow: function (rowid, rowdata, commit) { |
|
111 var data = "update=true&" + $.param(rowdata); |
|
112 $.ajax({ |
|
113 dataType: 'json', |
|
114 url: url, |
|
115 cache: false, |
|
116 data: data, |
|
117 success: function (data, status, xhr) { |
|
118 // update command is executed. |
|
119 commit(true); |
|
120 }, |
|
121 error: function(jqXHR, textStatus, errorThrown) { |
|
122 commit(false); |
|
123 } |
|
124 }); |
|
125 } |
|
126 }; |
|
127 var srcType = [ "Lager", "Ale", "Mead", "Wheat", "Mixed", "Cider" ]; |
|
128 // initialize the input fields. |
|
129 $("#name").jqxInput({ theme: theme, width: 250, height: 23 }); |
|
130 $("#category").jqxInput({ theme: theme, width: 250, height: 23 }); |
|
131 $("#category_number").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, max: 1000, decimalDigits: 0, spinButtons: true }); |
|
132 $("#style_letter").jqxInput({ theme: theme, width: 250, height: 23 }); |
|
133 $("#style_guide").jqxInput({ theme: theme, width: 250, height: 23 }); |
|
134 $("#type").jqxDropDownList({ theme: theme, source: srcType, width: 90, height: 23, dropDownHeight: 185 }); |
|
135 $("#og_min").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 1.000, max: 1.200, decimalDigits: 3, spinButtons: true, spinButtonsStep: 0.001 }); |
|
136 $("#og_max").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 1.000, max: 1.200, decimalDigits: 3, spinButtons: true, spinButtonsStep: 0.001 }); |
|
137 $("#fg_min").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0.990, max: 1.100, decimalDigits: 3, spinButtons: true, spinButtonsStep: 0.001 }); |
|
138 $("#fg_max").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 1.000, max: 1.100, decimalDigits: 3, spinButtons: true, spinButtonsStep: 0.001 }); |
|
139 $("#ibu_min").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, max: 200, decimalDigits: 0, spinButtons: true }); |
|
140 $("#ibu_max").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, max: 200, decimalDigits: 0, spinButtons: true }); |
|
141 $("#color_min").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 1, max: 200, decimalDigits: 0, spinButtons: true }); |
|
142 $("#color_max").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 1, max: 200, decimalDigits: 0, spinButtons: true }); |
|
143 $("#carb_min").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, max: 5, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1 }); |
|
144 $("#carb_max").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, max: 5, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1 }); |
|
145 $("#abv_min").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, max: 20, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1 }); |
|
146 $("#abv_max").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, max: 20, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1 }); |
|
147 |
|
148 $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); |
|
149 $("#profile").jqxInput({ theme: theme, width: 640, height: 48 }); |
|
150 $("#ingredients").jqxInput({ theme: theme, width: 640, height: 23 }); |
|
151 $("#examples").jqxInput({ theme: theme, width: 640, height: 48 }); |
|
152 var dataAdapter = new $.jqx.dataAdapter(source); |
|
153 var editrow = -1; |
|
154 // initialize jqxGrid |
|
155 $("#jqxgrid").jqxGrid({ |
|
156 width: 1280, |
|
157 height: 630, |
|
158 source: dataAdapter, |
|
159 theme: theme, |
|
160 showstatusbar: true, |
|
161 localization: getLocalization(), |
|
162 renderstatusbar: function (statusbar) { |
|
163 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></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>"); |
|
165 container.append(addButton); |
|
166 statusbar.append(container); |
|
167 addButton.jqxButton({ theme: theme, width: 120, height: 20 }); |
|
168 // add new row. |
|
169 addButton.click(function (event) { |
|
170 editrow = -1; |
|
171 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); |
|
172 $("#name").val(''); |
|
173 $("#category").val(''); |
|
174 $("#category_number").val(''); |
|
175 $("#style_letter").val(''); |
|
176 $("#style_guide").val(''); |
|
177 $("#type").val(''); |
|
178 $("#og_min").val(''); |
|
179 $("#og_max").val(''); |
|
180 $("#fg_min").val(''); |
|
181 $("#fg_max").val(''); |
|
182 $("#ibu_min").val(''); |
|
183 $("#ibu_max").val(''); |
|
184 $("#color_min").val(''); |
|
185 $("#color_max").val(''); |
|
186 $("#carb_min").val(''); |
|
187 $("#carb_max").val(''); |
|
188 $("#abv_min").val(''); |
|
189 $("#abv_max").val(''); |
|
190 $("#notes").val(''); |
|
191 $("#profile").val(''); |
|
192 $("#ingredients").val(''); |
|
193 $("#examples").val(''); |
|
194 $("#popupWindow").jqxWindow('open'); |
|
195 }); |
|
196 }, |
|
197 filterable: true, |
|
198 filtermode: 'excel', |
|
199 columns: [ |
|
200 { text: 'Groep', datafield: 'style_letter', width: 30 }, |
|
201 { text: 'Style Name', datafield: 'name' }, |
|
202 { text: 'OG', datafield: 'og_min', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3' }, |
|
203 { text: 'OG', datafield: 'og_max', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3' }, |
|
204 { text: 'FG', datafield: 'fg_min', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3' }, |
|
205 { text: 'FG', datafield: 'fg_max', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3' }, |
|
206 { text: 'IBU', datafield: 'ibu_min', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f0' }, |
|
207 { text: 'IBU', datafield: 'ibu_max', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f0' }, |
|
208 { text: 'EBC', datafield: 'color_min', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f0' }, |
|
209 { text: 'EBC', datafield: 'color_max', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f0' }, |
|
210 { text: 'Co2', datafield: 'carb_min', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
|
211 { text: 'Co2', datafield: 'carb_max', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
|
212 { text: 'ABV', datafield: 'abv_min', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
|
213 { text: 'ABV', datafield: 'abv_max', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
|
214 { text: 'Wijzig', datafield: 'Edit', width: 120, align: 'center', columntype: 'button', cellsrenderer: function () { |
|
215 return "Wijzig"; |
|
216 }, buttonclick: function (row) { |
|
217 // open the popup window when the user clicks a button. |
|
218 editrow = row; |
|
219 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); |
|
220 // get the clicked row's data and initialize the input fields. |
|
221 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
|
222 $("#name").val(dataRecord.name); |
|
223 $("#category").val(dataRecord.category); |
|
224 $("#category_number").val(dataRecord.category_number); |
|
225 $("#style_letter").val(dataRecord.style_letter); |
|
226 $("#style_guide").val(dataRecord.style_guide); |
|
227 $("#type").val(dataRecord.type); |
|
228 $("#og_min").val(dataRecord.og_min); |
|
229 $("#og_max").val(dataRecord.og_max); |
|
230 $("#fg_min").val(dataRecord.fg_min); |
|
231 $("#fg_max").val(dataRecord.fg_max); |
|
232 $("#ibu_min").val(dataRecord.ibu_min); |
|
233 $("#ibu_max").val(dataRecord.ibu_max); |
|
234 $("#color_min").val(dataRecord.color_min); |
|
235 $("#color_max").val(dataRecord.color_max); |
|
236 $("#carb_min").val(dataRecord.carb_min); |
|
237 $("#carb_max").val(dataRecord.carb_max); |
|
238 $("#abv_min").val(dataRecord.abv_min); |
|
239 $("#abv_max").val(dataRecord.abv_max); |
|
240 $("#notes").val(dataRecord.notes); |
|
241 $("#profile").val(dataRecord.profile); |
|
242 $("#ingredients").val(dataRecord.ingredients); |
|
243 $("#examples").val(dataRecord.examples); |
|
244 // show the popup window. |
|
245 $("#popupWindow").jqxWindow('open'); |
|
246 } |
|
247 } |
|
248 ] |
|
249 }); |
|
250 // initialize the popup window and buttons. |
|
251 $("#popupWindow").jqxWindow({ |
|
252 width: 860, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.40 |
|
253 }); |
|
254 $("#popupWindow").on('open', function () { |
|
255 $("#name").jqxInput('selectAll'); |
|
256 }); |
|
257 $("#Delete").jqxButton({ theme: theme }); |
|
258 $("#Delete").click(function () { |
|
259 if (editrow >= 0) { |
|
260 // Open a popup to confirm this action. |
|
261 $('#eventWindow').jqxWindow('open'); |
|
262 $("#delOk").click(function () { |
|
263 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
|
264 $("#jqxgrid").jqxGrid('deleterow', rowID); |
|
265 }); |
|
266 } |
|
267 $("#popupWindow").jqxWindow('hide'); |
|
268 }); |
|
269 $("#Cancel").jqxButton({ theme: theme }); |
|
270 $("#Save").jqxButton({ theme: theme }); |
|
271 // update the edited row when the user clicks the 'Save' button. |
|
272 $("#Save").click(function () { |
|
273 if (editrow >= 0) { |
|
274 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
|
275 var row = { |
|
276 record: rowID, |
|
277 name: $("#name").val(), |
|
278 category: $("#category").val(), |
|
279 category_number: parseFloat($("#category_number").jqxNumberInput('decimal')), |
|
280 style_letter: $("#style_letter").val(), |
|
281 style_guide: $("#style_guide").val(), |
|
282 type: $("#type").val(), |
|
283 og_min: parseFloat($("#og_min").jqxNumberInput('decimal')), |
|
284 og_max: parseFloat($("#og_max").jqxNumberInput('decimal')), |
|
285 fg_min: parseFloat($("#fg_min").jqxNumberInput('decimal')), |
|
286 fg_max: parseFloat($("#fg_max").jqxNumberInput('decimal')), |
|
287 ibu_min: parseFloat($("#ibu_min").jqxNumberInput('decimal')), |
|
288 ibu_max: parseFloat($("#ibu_max").jqxNumberInput('decimal')), |
|
289 color_min: parseFloat($("#color_min").jqxNumberInput('decimal')), |
|
290 color_max: parseFloat($("#color_max").jqxNumberInput('decimal')), |
|
291 carb_min: parseFloat($("#carb_min").jqxNumberInput('decimal')), |
|
292 carb_max: parseFloat($("#carb_max").jqxNumberInput('decimal')), |
|
293 abv_min: parseFloat($("#abv_min").jqxNumberInput('decimal')), |
|
294 abv_max: parseFloat($("#abv_max").jqxNumberInput('decimal')), |
|
295 notes: $("#notes").val(), |
|
296 profile: $("#profile").val(), |
|
297 ingredients: $("#ingredients").val(), |
|
298 examples: $("#examples").val() |
|
299 }; |
|
300 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
|
301 $("#popupWindow").jqxWindow('hide'); |
|
302 } else { |
|
303 // Insert a record |
|
304 var newrow = { |
|
305 record: -1, |
|
306 name: $("#name").val(), |
|
307 category: $("#category").val(), |
|
308 category_number: parseFloat($("#category_number").jqxNumberInput('decimal')), |
|
309 style_letter: $("#style_letter").val(), |
|
310 style_guide: $("#style_guide").val(), |
|
311 type: $("#type").val(), |
|
312 og_min: parseFloat($("#og_min").jqxNumberInput('decimal')), |
|
313 og_max: parseFloat($("#og_max").jqxNumberInput('decimal')), |
|
314 fg_min: parseFloat($("#fg_min").jqxNumberInput('decimal')), |
|
315 fg_max: parseFloat($("#fg_max").jqxNumberInput('decimal')), |
|
316 ibu_min: parseFloat($("#ibu_min").jqxNumberInput('decimal')), |
|
317 ibu_max: parseFloat($("#ibu_max").jqxNumberInput('decimal')), |
|
318 color_min: parseFloat($("#color_min").jqxNumberInput('decimal')), |
|
319 color_max: parseFloat($("#color_max").jqxNumberInput('decimal')), |
|
320 carb_min: parseFloat($("#carb_min").jqxNumberInput('decimal')), |
|
321 carb_max: parseFloat($("#carb_max").jqxNumberInput('decimal')), |
|
322 abv_min: parseFloat($("#abv_min").jqxNumberInput('decimal')), |
|
323 abv_max: parseFloat($("#abv_max").jqxNumberInput('decimal')), |
|
324 notes: $("#notes").val(), |
|
325 profile: $("#profile").val(), |
|
326 ingredients: $("#ingredients").val(), |
|
327 examples: $("#examples").val() |
|
328 }; |
|
329 $('#jqxgrid').jqxGrid('addrow', null, newrow); |
|
330 $("#popupWindow").jqxWindow('hide'); |
|
331 } |
|
332 }); |
|
333 createDelElements(); |
|
334 }); |
|
335 |