164 var me = this; |
165 var me = this; |
165 var container = $("<div style='margin: 5px;'></div>"); |
166 var container = $("<div style='margin: 5px;'></div>"); |
166 toolbar.append(container); |
167 toolbar.append(container); |
167 container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />'); |
168 container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />'); |
168 container.append('<input style="margin-left: 290px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); |
169 container.append('<input style="margin-left: 290px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); |
169 $("#addrowbutton").jqxButton({ theme: theme, width: 150 }); |
170 $("#addrowbutton").jqxButton({ template: "primary", theme: theme, width: 150 }); |
170 $("#deleterowbutton").jqxButton({ theme: theme, width: 150 }); |
171 $("#deleterowbutton").jqxButton({ template: "danger", theme: theme, width: 150 }); |
171 // create new row. |
172 // create new row. |
172 $("#addrowbutton").on('click', function () { |
173 $("#addrowbutton").on('click', function () { |
173 var datarow = generaterow(); |
174 var datarow = generaterow(); |
174 var commit = $("#grid").jqxGrid('addrow', null, datarow); |
175 var commit = $("#grid").jqxGrid('addrow', null, datarow); |
175 }); |
176 }); |
183 } |
184 } |
184 }); |
185 }); |
185 }, |
186 }, |
186 columns: [ |
187 columns: [ |
187 { text: 'Stap naam', datafield: 'name' }, |
188 { text: 'Stap naam', datafield: 'name' }, |
188 { text: 'Min temperatuur', datafield: 'target_lo', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1', |
189 { text: 'Min. °C', datafield: 'target_lo', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1', |
189 validation: function (cell, value) { |
190 validation: function (cell, value) { |
190 if (value < 0 || value > 40) { |
191 if (value < 0 || value > 40) { |
191 return { result: false, message: "De temperatuur moet tussen 0 en 40 zijn." }; |
192 return { result: false, message: "De temperatuur moet tussen 0 en 40 zijn." }; |
192 } |
193 } |
193 return true; |
194 return true; |
194 } |
195 } |
195 }, |
196 }, |
196 { text: 'Max temperatuur', datafield: 'target_hi', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1', |
197 { text: 'Max. °C', datafield: 'target_hi', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1', |
197 validation: function (cell, value) { |
198 validation: function (cell, value) { |
198 if (value < 0 || value > 40) { |
199 if (value < 0 || value > 40) { |
199 return { result: false, message: "De temperatuur moet tussen 0 en 40 zijn." }; |
200 return { result: false, message: "De temperatuur moet tussen 0 en 40 zijn." }; |
200 } |
201 } |
201 return true; |
202 return true; |
218 return true; |
219 return true; |
219 } |
220 } |
220 } |
221 } |
221 ] |
222 ] |
222 }); |
223 }); |
223 // $("#grid").on('cellendedit', function (event) { |
|
224 // $('#grid').jqxGrid('sortby', 'step_temp', 'asc'); |
|
225 // }); |
|
226 }; |
224 }; |
227 |
225 |
228 // initialize the input fields. |
226 // initialize the input fields. |
229 $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); |
227 $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); |
230 $("#inittemp_lo").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 110, height: 23, min: 0, max: 40, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1 }); |
228 $("#inittemp_lo").jqxNumberInput( Spin1dec5 ); |
231 $("#inittemp_hi").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 110, height: 23, min: 0, max: 40, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1 }); |
229 $("#inittemp_lo").jqxNumberInput({ max: 40 }); |
|
230 $("#inittemp_hi").jqxNumberInput( Spin1dec5 ); |
|
231 $("#inittemp_hi").jqxNumberInput({ max: 40 }); |
232 $("#fridgemode").jqxCheckBox({ theme: theme, height: 23, enableContainerClick: false }); |
232 $("#fridgemode").jqxCheckBox({ theme: theme, height: 23, enableContainerClick: false }); |
233 |
233 |
234 var editrow = -1; |
234 var editrow = -1; |
235 // initialize jqxGrid |
235 // initialize jqxGrid |
236 $("#jqxgrid").jqxGrid({ |
236 $("#jqxgrid").jqxGrid({ |
243 renderstatusbar: function (statusbar) { |
243 renderstatusbar: function (statusbar) { |
244 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
244 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
245 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>"); |
245 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>"); |
246 container.append(addButton); |
246 container.append(addButton); |
247 statusbar.append(container); |
247 statusbar.append(container); |
248 addButton.jqxButton({ theme: theme, width: 120, height: 20 }); |
248 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); |
249 // add new row. |
249 // add new row. |
250 addButton.click(function (event) { |
250 addButton.click(function (event) { |
251 editrow = -1; |
251 editrow = -1; |
252 $("#popupWindow").jqxWindow({ position: { x: 110, y: 40 } }); |
252 $("#name").val('Nieuw vergist profiel'); |
253 $("#name").val(''); |
|
254 dataRecord.uuid = ''; |
253 dataRecord.uuid = ''; |
255 $("#inittemp_lo").val('20.0'); |
254 $("#inittemp_lo").val(20.0); |
256 $("#inittemp_hi").val('20.0'); |
255 $("#inittemp_hi").val(20.0); |
257 $("#fridgemode").val('0'); |
256 $("#fridgemode").val(0); |
258 dataRecord.totalsteps = 0; |
257 dataRecord.totalsteps = 0; |
259 dataRecord.duration = 0; |
258 dataRecord.duration = 0; |
260 editsteps(''); |
259 editsteps(''); |
261 $("#popupWindow").jqxWindow('open'); |
260 $("#popupWindow").jqxWindow('open'); |
262 }); |
261 }); |
263 }, |
262 }, |
264 filterable: true, |
263 filterable: false, |
265 filtermode: 'excel', |
|
266 columns: [ |
264 columns: [ |
267 { text: 'Vergisting profiel', datafield: 'name' }, |
265 { text: 'Vergisting profiel', datafield: 'name' }, |
268 { text: 'Min. temperatuur', datafield: 'inittemp_lo', width: 150, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
266 { text: 'Min. start °C', datafield: 'inittemp_lo', width: 150, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
269 { text: 'Max. temperatuur', datafield: 'inittemp_hi', width: 150, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
267 { text: 'Max. start °C', datafield: 'inittemp_hi', width: 150, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
270 { text: 'Stappen', datafield: 'totalsteps', width: 80, align: 'right', cellsalign: 'right' }, |
268 { text: 'Stappen', datafield: 'totalsteps', width: 80, align: 'right', cellsalign: 'right' }, |
271 { text: 'Tijdsduur', datafield: 'duration', width: 150, align: 'right', cellsalign: 'right', |
269 { text: 'Tijdsduur', datafield: 'duration', width: 150, align: 'right', cellsalign: 'right', |
272 cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) { |
270 cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) { |
273 //var rowData = $("#fermentableGrid").jqxGrid('getrowdata', row); |
271 //var rowData = $("#fermentableGrid").jqxGrid('getrowdata', row); |
274 if (value < 24) { |
272 if (value < 24) { |
282 var show = days+" dagen, "+hours+" uur"; |
280 var show = days+" dagen, "+hours+" uur"; |
283 } |
281 } |
284 return "<span style='margin: 3px; margin-top: 6px; float: "+columnproperties.cellsalign+"'>"+show+"</span>"; |
282 return "<span style='margin: 3px; margin-top: 6px; float: "+columnproperties.cellsalign+"'>"+show+"</span>"; |
285 } |
283 } |
286 }, |
284 }, |
287 { text: 'Wijzig', datafield: 'Edit', width: 120, align: 'center', columntype: 'button', cellsrenderer: function () { |
285 { text: 'Wijzig', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function () { |
288 return "Wijzig"; |
286 return "Wijzig"; |
289 }, buttonclick: function (row) { |
287 }, buttonclick: function (row) { |
290 // open the popup window when the user clicks a button. |
|
291 editrow = row; |
288 editrow = row; |
292 $("#popupWindow").jqxWindow({ position: { x: 110, y: 40 } }); |
|
293 // get the clicked row's data and initialize the input fields. |
289 // get the clicked row's data and initialize the input fields. |
294 dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
290 dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
295 $("#name").val(dataRecord.name); |
291 $("#name").val(dataRecord.name); |
296 $("#inittemp_lo").val(parseFloat(dataRecord.inittemp_lo)); |
292 $("#inittemp_lo").val(parseFloat(dataRecord.inittemp_lo)); |
297 $("#inittemp_hi").val(parseFloat(dataRecord.inittemp_hi)); |
293 $("#inittemp_hi").val(parseFloat(dataRecord.inittemp_hi)); |