comparison: www/js/profile_fermentation.js
www/js/profile_fermentation.js
- changeset 487
- 06df1320327c
- parent 286
- 124af734af68
- child 494
- af28ebe4a779
equal
deleted
inserted
replaced
| 486:e17155b3086a | 487:06df1320327c |
|---|---|
| 42 } | 42 } |
| 43 | 43 |
| 44 | 44 |
| 45 $(document).ready(function () { | 45 $(document).ready(function () { |
| 46 | 46 |
| 47 var dataRecord = {}; | |
| 48 var url = "includes/db_profile_fermentation.php"; | |
| 49 // tooltips | 47 // tooltips |
| 50 $("#name").jqxTooltip({ content: 'De naam voor dit vergisting profiel.' }); | 48 $("#name").jqxTooltip({ content: 'De naam voor dit vergisting profiel.' }); |
| 51 $("#inittemp_lo").jqxTooltip({ content: 'De minimale begin temperatuur van dit profiel.' }); | 49 $("#inittemp_lo").jqxTooltip({ content: 'De minimale begin temperatuur van dit profiel.' }); |
| 52 $("#inittemp_hi").jqxTooltip({ content: 'De maximale begin temperatuur van dit profiel.' }); | 50 $("#inittemp_hi").jqxTooltip({ content: 'De maximale begin temperatuur van dit profiel.' }); |
| 51 | |
| 52 var dataRecord = {}, | |
| 53 url = 'includes/db_profile_fermentation.php', | |
| 53 // prepare the data | 54 // prepare the data |
| 54 var source = { | 55 source = { |
| 55 datatype: "json", | 56 datatype: "json", |
| 56 cache: false, | 57 cache: false, |
| 57 datafields: [ | 58 datafields: [ |
| 58 { name: 'record', type: 'number' }, | 59 { name: 'record', type: 'number' }, |
| 59 { name: 'uuid', type: 'string' }, | 60 { name: 'uuid', type: 'string' }, |
| 75 url: url, | 76 url: url, |
| 76 cache: false, | 77 cache: false, |
| 77 data: data, | 78 data: data, |
| 78 type: "POST", | 79 type: "POST", |
| 79 success: function (data, status, xhr) { | 80 success: function (data, status, xhr) { |
| 80 // delete command is executed. | |
| 81 commit(true); | 81 commit(true); |
| 82 location.reload( true ); | |
| 82 }, | 83 }, |
| 83 error: function (jqXHR, textStatus, errorThrown) { | 84 error: function (jqXHR, textStatus, errorThrown) { |
| 84 commit(false); | 85 commit(false); |
| 85 } | 86 } |
| 86 }); | 87 }); |
| 93 cache: false, | 94 cache: false, |
| 94 data: data, | 95 data: data, |
| 95 type: "POST", | 96 type: "POST", |
| 96 success: function (data, status, xhr) { | 97 success: function (data, status, xhr) { |
| 97 commit(true); | 98 commit(true); |
| 99 location.reload( true ); | |
| 98 }, | 100 }, |
| 99 error: function(jqXHR, textStatus, errorThrown) { | 101 error: function(jqXHR, textStatus, errorThrown) { |
| 100 commit(false); | 102 commit(false); |
| 101 } | 103 } |
| 102 }); | 104 }); |
| 108 url: url, | 110 url: url, |
| 109 cache: false, | 111 cache: false, |
| 110 data: data, | 112 data: data, |
| 111 type: "POST", | 113 type: "POST", |
| 112 success: function (data, status, xhr) { | 114 success: function (data, status, xhr) { |
| 113 // update command is executed. | |
| 114 commit(true); | 115 commit(true); |
| 116 location.reload( true ); | |
| 115 }, | 117 }, |
| 116 error: function(jqXHR, textStatus, errorThrown) { | 118 error: function(jqXHR, textStatus, errorThrown) { |
| 117 commit(false); | 119 commit(false); |
| 118 } | 120 } |
| 119 }); | 121 }); |
| 120 } | 122 } |
| 121 }; | 123 }, |
| 122 var dataAdapter = new $.jqx.dataAdapter(source); | 124 dataAdapter = new $.jqx.dataAdapter(source); |
| 123 | 125 |
| 124 // Inline steps editor | 126 // Inline steps editor |
| 125 var editsteps = function (data) { | 127 var editsteps = function (data) { |
| 126 var generaterow = function () { | 128 var generaterow = function () { |
| 127 var row = {}; | 129 var row = {}; |
| 148 commit(true); | 150 commit(true); |
| 149 }, | 151 }, |
| 150 deleterow: function (rowid, commit) { | 152 deleterow: function (rowid, commit) { |
| 151 commit(true); | 153 commit(true); |
| 152 } | 154 } |
| 153 }; | 155 }, |
| 154 var stepAdapter = new $.jqx.dataAdapter(stepSource); | 156 stepAdapter = new $.jqx.dataAdapter(stepSource); |
| 155 $("#grid").jqxGrid({ | 157 $("#grid").jqxGrid({ |
| 156 width: 800, | 158 width: 800, |
| 157 height: 330, | 159 height: 330, |
| 158 source: stepAdapter, | 160 source: stepAdapter, |
| 159 theme: theme, | 161 theme: theme, |
| 160 selectionmode: 'singlerow', | 162 selectionmode: 'singlerow', |
| 161 editmode: 'selectedcell', | 163 editmode: 'selectedcell', |
| 162 editable: true, | 164 editable: true, |
| 163 showtoolbar: true, | 165 showtoolbar: true, |
| 164 rendertoolbar: function (toolbar) { | 166 rendertoolbar: function (toolbar) { |
| 165 var me = this; | |
| 166 var container = $("<div style='margin: 5px;'></div>"); | 167 var container = $("<div style='margin: 5px;'></div>"); |
| 167 toolbar.append(container); | 168 toolbar.append(container); |
| 168 container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />'); | 169 container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />'); |
| 169 container.append('<input style="margin-left: 290px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); | 170 container.append('<input style="margin-left: 290px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); |
| 170 $("#addrowbutton").jqxButton({ template: "primary", theme: theme, width: 150 }); | 171 $("#addrowbutton").jqxButton({ template: "primary", theme: theme, width: 150 }); |
| 171 $("#deleterowbutton").jqxButton({ template: "danger", theme: theme, width: 150 }); | 172 $("#deleterowbutton").jqxButton({ template: "danger", theme: theme, width: 150 }); |
| 172 // create new row. | 173 // create new row. |
| 173 $("#addrowbutton").on('click', function () { | 174 $("#addrowbutton").on('click', function () { |
| 174 var datarow = generaterow(); | 175 var datarow = generaterow(); |
| 175 var commit = $("#grid").jqxGrid('addrow', null, datarow); | 176 $("#grid").jqxGrid('addrow', null, datarow); |
| 176 }); | 177 }); |
| 177 // delete row. | 178 // delete row. |
| 178 $("#deleterowbutton").on('click', function () { | 179 $("#deleterowbutton").on('click', function () { |
| 179 var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex'); | 180 var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex'); |
| 180 var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount; | 181 var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount; |
| 181 if (selectedrowindex >= 0 && selectedrowindex < rowscount) { | 182 if (selectedrowindex >= 0 && selectedrowindex < rowscount) { |
| 182 var id = $("#grid").jqxGrid('getrowid', selectedrowindex); | 183 var id = $("#grid").jqxGrid('getrowid', selectedrowindex); |
| 183 var commit = $("#grid").jqxGrid('deleterow', id); | 184 $("#grid").jqxGrid('deleterow', id); |
| 184 } | 185 } |
| 185 }); | 186 }); |
| 186 }, | 187 }, |
| 187 columns: [ | 188 columns: [ |
| 188 { text: 'Stap naam', datafield: 'name' }, | 189 { text: 'Stap naam', datafield: 'name' }, |
| 238 height: 630, | 239 height: 630, |
| 239 source: dataAdapter, | 240 source: dataAdapter, |
| 240 theme: theme, | 241 theme: theme, |
| 241 showstatusbar: true, | 242 showstatusbar: true, |
| 242 renderstatusbar: function (statusbar) { | 243 renderstatusbar: function (statusbar) { |
| 243 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); | 244 var addButton, container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
| 244 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 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 container.append(addButton); | 246 container.append(addButton); |
| 246 statusbar.append(container); | 247 statusbar.append(container); |
| 247 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); | 248 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); |
| 248 // add new row. | 249 // add new row. |
| 249 addButton.click(function (event) { | 250 addButton.click(function (event) { |
| 265 { text: 'Min. start °C', 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' }, |
| 266 { text: 'Max. start °C', 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' }, |
| 267 { text: 'Stappen', datafield: 'totalsteps', width: 80, align: 'right', cellsalign: 'right' }, | 268 { text: 'Stappen', datafield: 'totalsteps', width: 80, align: 'right', cellsalign: 'right' }, |
| 268 { text: 'Tijdsduur', datafield: 'duration', width: 150, align: 'right', | 269 { text: 'Tijdsduur', datafield: 'duration', width: 150, align: 'right', |
| 269 cellsrenderer: function (row, columnfield, value, defaulthtml, column) { | 270 cellsrenderer: function (row, columnfield, value, defaulthtml, column) { |
| 271 var show, days, hours; | |
| 270 if (value < 24) { | 272 if (value < 24) { |
| 271 var show = value+" uur"; | 273 show = value + ' uur'; |
| 272 } else { | 274 } else { |
| 273 var days = Math.floor(value / 24); | 275 days = Math.floor(value / 24); |
| 274 var hours = value % 24; | 276 hours = value % 24; |
| 275 if (days == 1) | 277 if (days == 1) |
| 276 var show = days+" dag, "+hours+" uur"; | 278 show = days + ' dag, ' + hours + ' uur'; |
| 277 else | 279 else |
| 278 var show = days+" dagen, "+hours+" uur"; | 280 show = days + ' dagen, ' + hours + ' uur'; |
| 279 } | 281 } |
| 280 return "<span style='margin: 3px; margin-top: 6px; float: right;'>"+show+"</span>"; | 282 return "<span style='margin: 3px; margin-top: 6px; float: right;'>" + show + "</span>"; |
| 281 } | 283 } |
| 282 }, | 284 }, |
| 283 { text: '', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function () { | 285 { text: '', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: |
| 284 return "Wijzig"; | 286 function () { |
| 287 return "Wijzig"; | |
| 285 }, buttonclick: function (row) { | 288 }, buttonclick: function (row) { |
| 286 editrow = row; | 289 editrow = row; |
| 287 // get the clicked row's data and initialize the input fields. | 290 // get the clicked row's data and initialize the input fields. |
| 288 dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); | 291 dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
| 289 $("#name").val(dataRecord.name); | 292 $("#name").val(dataRecord.name); |
| 326 }); | 329 }); |
| 327 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); | 330 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); |
| 328 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); | 331 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); |
| 329 // update the edited row when the user clicks the 'Save' button. | 332 // update the edited row when the user clicks the 'Save' button. |
| 330 $("#Save").click(function () { | 333 $("#Save").click(function () { |
| 331 var steprows = $('#grid').jqxGrid('getrows'); | 334 var row, rowID = -1, steprows = $('#grid').jqxGrid('getrows'); |
| 332 var rowID = -1; | |
| 333 if (editrow >= 0) { | 335 if (editrow >= 0) { |
| 334 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); | 336 rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
| 335 } | 337 } |
| 336 var row = { | 338 row = { |
| 337 record: rowID, | 339 record: rowID, |
| 338 uuid: dataRecord.uuid, | 340 uuid: dataRecord.uuid, |
| 339 name: $("#name").val(), | 341 name: $("#name").val(), |
| 340 inittemp_lo: parseFloat($("#inittemp_lo").jqxNumberInput('decimal')), | 342 inittemp_lo: parseFloat($("#inittemp_lo").jqxNumberInput('decimal')), |
| 341 inittemp_hi: parseFloat($("#inittemp_hi").jqxNumberInput('decimal')), | 343 inittemp_hi: parseFloat($("#inittemp_hi").jqxNumberInput('decimal')), |
| 346 $('#jqxgrid').jqxGrid('updaterow', rowID, row); | 348 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
| 347 } else { | 349 } else { |
| 348 $('#jqxgrid').jqxGrid('addrow', null, row); | 350 $('#jqxgrid').jqxGrid('addrow', null, row); |
| 349 } | 351 } |
| 350 $("#popupWindow").jqxWindow('hide'); | 352 $("#popupWindow").jqxWindow('hide'); |
| 351 location.reload( true ); // reload ourself. | |
| 352 }); | 353 }); |
| 353 createDelElements(); | 354 createDelElements(); |
| 354 }); | 355 }); |
| 355 | 356 |
