comparison: www/js/inv_mash_profiles.js
www/js/inv_mash_profiles.js
- changeset 45
- 95251bedfab4
- parent 44
- 6fea20eead56
- child 46
- ff9be9dbcac0
equal
deleted
inserted
replaced
| 44:6fea20eead56 | 45:95251bedfab4 |
|---|---|
| 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_inventory_mash_profiles.php"; | |
| 47 // tooltips | |
| 48 $("#name").jqxTooltip({ content: 'De naam voor dit maisch profiel.' }); | |
| 49 $("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit maich profiel.' }); | |
| 50 $("#grid").jqxTooltip({ content: 'De maisch stappen in dit profiel.'}); | |
| 51 // prepare the data | |
| 52 var source = { | |
| 53 datatype: "json", | |
| 54 cache: false, | |
| 55 datafields: [ | |
| 56 { name: 'record', type: 'number' }, | |
| 57 { name: 'name', type: 'string' }, | |
| 58 { name: 'notes', type: 'string' }, | |
| 59 { name: 'steps', type: 'array' } | |
| 60 ], | |
| 61 id: 'record', | |
| 62 url: url, | |
| 63 deleterow: function (rowid, commit) { | |
| 64 // synchronize with the server - send delete command | |
| 65 var data = "delete=true&" + $.param({ record: rowid }); | |
| 66 $.ajax({ | |
| 67 dataType: 'json', | |
| 68 url: url, | |
| 69 cache: false, | |
| 70 data: data, | |
| 71 success: function (data, status, xhr) { | |
| 72 // delete command is executed. | |
| 73 commit(true); | |
| 74 }, | |
| 75 error: function (jqXHR, textStatus, errorThrown) { | |
| 76 commit(false); | |
| 77 } | |
| 78 }); | |
| 79 }, | |
| 80 addrow: function (rowid, rowdata, position, commit) { | |
| 81 var data = "insert=true&" + $.param(rowdata); | |
| 82 $.ajax({ | |
| 83 dataType: 'json', | |
| 84 url: url, | |
| 85 cache: false, | |
| 86 data: data, | |
| 87 success: function (data, status, xhr) { | |
| 88 commit(true); | |
| 89 }, | |
| 90 error: function(jqXHR, textStatus, errorThrown) { | |
| 91 commit(false); | |
| 92 } | |
| 93 }); | |
| 94 }, | |
| 95 updaterow: function (rowid, rowdata, commit) { | |
| 96 var data = "update=true&" + $.param(rowdata); | |
| 97 $.ajax({ | |
| 98 dataType: 'json', | |
| 99 url: url, | |
| 100 cache: false, | |
| 101 data: data, | |
| 102 success: function (data, status, xhr) { | |
| 103 // update command is executed. | |
| 104 commit(true); | |
| 105 }, | |
| 106 error: function(jqXHR, textStatus, errorThrown) { | |
| 107 commit(false); | |
| 108 } | |
| 109 }); | |
| 110 } | |
| 111 }; | |
| 112 var dataAdapter = new $.jqx.dataAdapter(source); | |
| 113 // Inline steps editor | |
| 114 var editsteps = function (data) { | |
| 115 var generaterow = function () { | |
| 116 var row = {}; | |
| 117 row["step_name"] = "Stap 1"; | |
| 118 row["step_type"] = "Infusion"; | |
| 119 row["step_temp"] = 62.0; | |
| 120 row['step_time'] = 20.0; | |
| 121 row['ramp_time'] = 1.0; | |
| 122 row['end_temp'] = 62.0; | |
| 123 return row; | |
| 124 } | |
| 125 var stepSource = { | |
| 126 localdata: data.steps, | |
| 127 datatype: "local", | |
| 128 datafields: [ | |
| 129 { name: 'step_name', type: 'string' }, | |
| 130 { name: 'step_type', type: 'string' }, | |
| 131 { name: 'step_temp', type: 'float' }, | |
| 132 { name: 'step_time', type: 'float' }, | |
| 133 { name: 'ramp_time', type: 'float' }, | |
| 134 { name: 'end_temp', type: 'float' } | |
| 135 ], | |
| 136 addrow: function (rowid, rowdata, position, commit) { | |
| 137 commit(true); | |
| 138 }, | |
| 139 deleterow: function (rowid, commit) { | |
| 140 commit(true); | |
| 141 } | |
| 142 }; | |
| 143 var stepAdapter = new $.jqx.dataAdapter(stepSource); | |
| 144 $("#grid").jqxGrid({ | |
| 145 width: 640, | |
| 146 height: 330, | |
| 147 source: stepAdapter, | |
| 148 theme: theme, | |
| 149 selectionmode: 'singlerow', | |
| 150 editmode: 'selectedrow', | |
| 151 editable: true, | |
| 152 showtoolbar: true, | |
| 153 rendertoolbar: function (toolbar) { | |
| 154 var me = this; | |
| 155 var container = $("<div style='margin: 5px;'></div>"); | |
| 156 toolbar.append(container); | |
| 157 container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />'); | |
| 158 container.append('<input style="margin-left: 140px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); | |
| 159 $("#addrowbutton").jqxButton({ theme: theme, width: 150 }); | |
| 160 $("#deleterowbutton").jqxButton({ theme: theme, width: 150 }); | |
| 161 // create new row. | |
| 162 $("#addrowbutton").on('click', function () { | |
| 163 var datarow = generaterow(); | |
| 164 var commit = $("#grid").jqxGrid('addrow', null, datarow); | |
| 165 }); | |
| 166 // delete row. | |
| 167 $("#deleterowbutton").on('click', function () { | |
| 168 var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex'); | |
| 169 var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount; | |
| 170 if (selectedrowindex >= 0 && selectedrowindex < rowscount) { | |
| 171 var id = $("#grid").jqxGrid('getrowid', selectedrowindex); | |
| 172 var commit = $("#grid").jqxGrid('deleterow', id); | |
| 173 } | |
| 174 }); | |
| 175 }, | |
| 176 columns: [ | |
| 177 { text: 'Stap naam', datafield: 'step_name' }, | |
| 178 { text: 'Stap type', datafield: 'step_type', width: 100, columntype: 'dropdownlist', | |
| 179 createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) { | |
| 180 var dataSource = [ "Infusion", "Temperature", "Decoction" ]; | |
| 181 editor.jqxDropDownList({ source: dataSource, dropDownHeight: 95 }); | |
| 182 } | |
| 183 }, | |
| 184 { text: 'Temperatuur', datafield: 'step_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1', | |
| 185 validation: function (cell, value) { | |
| 186 if (value < 35 || value > 80) { | |
| 187 return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." }; | |
| 188 } | |
| 189 return true; | |
| 190 } | |
| 191 }, | |
| 192 { text: 'Eind', datafield: 'end_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1', | |
| 193 validation: function (cell, value) { | |
| 194 if (value < 35 || value > 80) { | |
| 195 return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." }; | |
| 196 } | |
| 197 return true; | |
| 198 } | |
| 199 }, | |
| 200 { text: 'Tijd', datafield: 'step_time', width: 70, align: 'right', cellsalign: 'right', | |
| 201 validation: function (cell, value) { | |
| 202 if (value < 1 || value > 360) { | |
| 203 return { result: false, message: "De tijd moet tussen 1 en 360 zijn." }; | |
| 204 } | |
| 205 return true; | |
| 206 } | |
| 207 }, | |
| 208 { text: 'Stap', datafield: 'ramp_time', width: 70, align: 'right', cellsalign: 'right', | |
| 209 validation: function (cell, value) { | |
| 210 if (value < 1 || value > 60) { | |
| 211 return { result: false, message: "De tijd moet tussen 1 en 60 zijn." }; | |
| 212 } | |
| 213 return true; | |
| 214 } | |
| 215 } | |
| 216 ] | |
| 217 }); | |
| 218 $("#grid").on('cellendedit', function (event) { | |
| 219 $('#grid').jqxGrid('sortby', 'step_temp', 'asc'); | |
| 220 }); | |
| 221 }; | |
| 222 | |
| 223 // initialize the input fields. | |
| 224 $("#name").jqxInput({ theme: theme, width: 250, height: 23 }); | |
| 225 $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); | |
| 226 var editrow = -1; | |
| 227 // initialize jqxGrid | |
| 228 $("#jqxgrid").jqxGrid({ | |
| 229 width: 1280, | |
| 230 height: 630, | |
| 231 source: dataAdapter, | |
| 232 theme: theme, | |
| 233 showstatusbar: true, | |
| 234 localization: getLocalization(), | |
| 235 renderstatusbar: function (statusbar) { | |
| 236 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); | |
| 237 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>"); | |
| 238 container.append(addButton); | |
| 239 statusbar.append(container); | |
| 240 addButton.jqxButton({ theme: theme, width: 120, height: 20 }); | |
| 241 // add new row. | |
| 242 addButton.click(function (event) { | |
| 243 editrow = -1; | |
| 244 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); | |
| 245 $("#name").val(''); | |
| 246 $("#notes").val(''); | |
| 247 editsteps(''); | |
| 248 $("#popupWindow").jqxWindow('open'); | |
| 249 }); | |
| 250 }, | |
| 251 filterable: true, | |
| 252 filtermode: 'excel', | |
| 253 columns: [ | |
| 254 { text: 'Maish schema', datafield: 'name', width: 250 }, | |
| 255 { text: 'Opmerkingen', datafield: 'notes' }, | |
| 256 { text: 'Wijzig', datafield: 'Edit', width: 120, align: 'center', columntype: 'button', cellsrenderer: function () { | |
| 257 return "Wijzig"; | |
| 258 }, buttonclick: function (row) { | |
| 259 // open the popup window when the user clicks a button. | |
| 260 editrow = row; | |
| 261 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); | |
| 262 // get the clicked row's data and initialize the input fields. | |
| 263 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); | |
| 264 $("#name").val(dataRecord.name); | |
| 265 $("#notes").val(dataRecord.notes); | |
| 266 editsteps(dataRecord); | |
| 267 // show the popup window. | |
| 268 $("#popupWindow").jqxWindow('open'); | |
| 269 } | |
| 270 } | |
| 271 ] | |
| 272 }); | |
| 273 // initialize the popup window and buttons. | |
| 274 $("#popupWindow").jqxWindow({ | |
| 275 width: 860, | |
| 276 height: 550, | |
| 277 resizable: false, | |
| 278 theme: theme, | |
| 279 isModal: true, | |
| 280 autoOpen: false, | |
| 281 cancelButton: $("#Cancel"), | |
| 282 modalOpacity: 0.40 | |
| 283 }); | |
| 284 $("#popupWindow").on('open', function () { | |
| 285 $("#name").jqxInput('selectAll'); | |
| 286 }); | |
| 287 $("#Delete").jqxButton({ theme: theme }); | |
| 288 $("#Delete").click(function () { | |
| 289 if (editrow >= 0) { | |
| 290 // Open a popup to confirm this action. | |
| 291 $('#eventWindow').jqxWindow('open'); | |
| 292 $("#delOk").click(function () { | |
| 293 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); | |
| 294 $("#jqxgrid").jqxGrid('deleterow', rowID); | |
| 295 }); | |
| 296 } | |
| 297 $("#popupWindow").jqxWindow('hide'); | |
| 298 }); | |
| 299 $("#Cancel").jqxButton({ theme: theme }); | |
| 300 $("#Save").jqxButton({ theme: theme }); | |
| 301 // update the edited row when the user clicks the 'Save' button. | |
| 302 $("#Save").click(function () { | |
| 303 var steprows = $('#grid').jqxGrid('getrows'); | |
| 304 if (editrow >= 0) { | |
| 305 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); | |
| 306 var row = { | |
| 307 record: rowID, | |
| 308 name: $("#name").val(), | |
| 309 notes: $("#notes").val(), | |
| 310 steps: steprows | |
| 311 }; | |
| 312 $('#jqxgrid').jqxGrid('updaterow', rowID, row); | |
| 313 $("#popupWindow").jqxWindow('hide'); | |
| 314 } else { | |
| 315 // Insert a record | |
| 316 var newrow = { | |
| 317 record: -1, | |
| 318 name: $("#name").val(), | |
| 319 notes: $("#notes").val(), | |
| 320 steps: steprows | |
| 321 }; | |
| 322 $('#jqxgrid').jqxGrid('addrow', null, newrow); | |
| 323 $("#popupWindow").jqxWindow('hide'); | |
| 324 } | |
| 325 }); | |
| 326 createDelElements(); | |
| 327 }); | |
| 328 |
