comparison: www/js/profile_mash.js
www/js/profile_mash.js
- changeset 215
- 83cee005d2d9
- parent 213
- b0d484a5525e
- child 245
- 3649c3d31d15
equal
deleted
inserted
replaced
| 214:3e240fd7ef13 | 215:83cee005d2d9 |
|---|---|
| 41 $('#eventWindow').jqxWindow('hide'); | 41 $('#eventWindow').jqxWindow('hide'); |
| 42 } | 42 } |
| 43 | 43 |
| 44 | 44 |
| 45 $(document).ready(function () { | 45 $(document).ready(function () { |
| 46 | |
| 47 var steprow = 0; | |
| 48 var stepData = {}; | |
| 49 var dataRecord = {}; | |
| 46 var url = "includes/db_profile_mash.php"; | 50 var url = "includes/db_profile_mash.php"; |
| 51 | |
| 47 // tooltips | 52 // tooltips |
| 48 $("#name").jqxTooltip({ content: 'De naam voor dit maisch profiel.' }); | 53 $("#name").jqxTooltip({ content: 'De naam voor dit maisch profiel.' }); |
| 49 $("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit maisch profiel.' }); | 54 $("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit maisch profiel.' }); |
| 50 // prepare the data | 55 // prepare the data |
| 51 var source = { | 56 var source = { |
| 109 commit(false); | 114 commit(false); |
| 110 } | 115 } |
| 111 }); | 116 }); |
| 112 } | 117 } |
| 113 }; | 118 }; |
| 119 // Initialize the input fields. | |
| 120 $("#m_step_name").jqxInput({ theme: theme, width: 320, height: 23 }); | |
| 121 $("#m_step_type").jqxDropDownList({ | |
| 122 theme: theme, | |
| 123 source: MashStepTypeAdapter, | |
| 124 valueMember: 'id', | |
| 125 displayMember: 'nl', | |
| 126 width: 180, | |
| 127 height: 23, | |
| 128 autoDropDownHeight: true | |
| 129 }); | |
| 130 $("#m_step_temp").jqxNumberInput( Spin1dec5 ); | |
| 131 $("#m_step_temp").jqxNumberInput({ Min: 30, Max: 80 }); | |
| 132 $("#m_end_temp").jqxNumberInput( Spin1dec5 ); | |
| 133 $("#m_end_temp").jqxNumberInput({ Min: 30, Max: 80 }); | |
| 134 $("#m_step_time").jqxNumberInput( PosInt ); | |
| 135 $("#m_step_time").jqxNumberInput({ Min: 1, Max: 120 }); | |
| 136 $("#m_ramp_time").jqxNumberInput( PosInt ); | |
| 137 $("#m_ramp_time").jqxNumberInput({ Min: 1, Max: 30 }); | |
| 138 | |
| 114 var dataAdapter = new $.jqx.dataAdapter(source); | 139 var dataAdapter = new $.jqx.dataAdapter(source); |
| 115 // Inline steps editor | 140 // Inline steps editor |
| 116 var editsteps = function (data) { | 141 var editsteps = function (data) { |
| 117 var generaterow = function () { | 142 var generaterow = function () { |
| 118 var row = {}; | 143 var row = {}; |
| 142 commit(true); | 167 commit(true); |
| 143 } | 168 } |
| 144 }; | 169 }; |
| 145 var stepAdapter = new $.jqx.dataAdapter(stepSource); | 170 var stepAdapter = new $.jqx.dataAdapter(stepSource); |
| 146 $("#grid").jqxGrid({ | 171 $("#grid").jqxGrid({ |
| 147 width: 800, | 172 width: 1020, |
| 148 height: 330, | 173 height: 330, |
| 149 source: stepAdapter, | 174 source: stepAdapter, |
| 150 theme: theme, | 175 theme: theme, |
| 151 selectionmode: 'singlerow', | 176 selectionmode: 'singlerow', |
| 152 editmode: 'selectedcell', | |
| 153 editable: true, | |
| 154 localization: getLocalization(), | 177 localization: getLocalization(), |
| 155 showtoolbar: true, | 178 showtoolbar: true, |
| 156 rendertoolbar: function (toolbar) { | 179 rendertoolbar: function (toolbar) { |
| 157 var me = this; | 180 var me = this; |
| 158 var container = $("<div style='margin: 5px;'></div>"); | 181 var container = $("<div style='margin: 5px;'></div>"); |
| 159 toolbar.append(container); | 182 toolbar.append(container); |
| 160 container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />'); | 183 container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />'); |
| 161 container.append('<input style="margin-left: 290px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); | 184 container.append('<input style="margin-left: 450px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); |
| 162 $("#addrowbutton").jqxButton({ template: "primary", theme: theme, width: 150 }); | 185 $("#addrowbutton").jqxButton({ template: "primary", theme: theme, width: 150 }); |
| 163 $("#deleterowbutton").jqxButton({ template: "primary", theme: theme, width: 150 }); | 186 $("#deleterowbutton").jqxButton({ template: "primary", theme: theme, width: 150 }); |
| 164 // create new row. | 187 // create new row. |
| 165 $("#addrowbutton").on('click', function () { | 188 $("#addrowbutton").on('click', function () { |
| 166 var datarow = generaterow(); | 189 var datarow = generaterow(); |
| 176 } | 199 } |
| 177 }); | 200 }); |
| 178 }, | 201 }, |
| 179 columns: [ | 202 columns: [ |
| 180 { text: 'Stap naam', datafield: 'step_name' }, | 203 { text: 'Stap naam', datafield: 'step_name' }, |
| 181 { text: 'Stap type', datafield: 'step_type', width: 150, columntype: 'dropdownlist', | 204 { text: 'Stap type', datafield: 'step_type', width: 150, |
| 182 createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) { | 205 cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) { |
| 183 var dataSource = [ "0", "1", "2" ]; | 206 return "<div style='margin: 4px;'>" + MashStepTypeData[value].nl + "</div>"; |
| 184 editor.jqxDropDownList({ | |
| 185 source: dataSource, | |
| 186 dropDownHeight: 95, | |
| 187 dropDownWidth: 120 | |
| 188 }); | |
| 189 } | 207 } |
| 190 }, | 208 }, |
| 191 { text: 'Temperatuur', datafield: 'step_temp', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1', | 209 { text: 'Begin °C', datafield: 'step_temp', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
| 192 validation: function (cell, value) { | 210 { text: 'Eind °C', datafield: 'end_temp', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, |
| 193 if (value < 35 || value > 80) { | 211 { text: 'Rusttijd', datafield: 'step_time', width: 80, align: 'right', cellsalign: 'right' }, |
| 194 return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." }; | 212 { text: 'Opwarmtijd', datafield: 'ramp_time', width: 80, align: 'right', cellsalign: 'right' }, |
| 213 { text: 'Wijzig', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () { | |
| 214 return "Wijzig"; | |
| 215 }, buttonclick: function (row) { | |
| 216 steprow = row; | |
| 217 stepData = $("#grid").jqxGrid('getrowdata', steprow); | |
| 218 $("#m_step_name").val(stepData.step_name); | |
| 219 $("#m_step_type").val(stepData.step_type); | |
| 220 $("#m_step_temp").val(stepData.step_temp); | |
| 221 $("#m_end_temp").val(stepData.end_temp); | |
| 222 $("#m_step_time").val(stepData.step_time); | |
| 223 $("#m_ramp_time").val(stepData.ramp_time); | |
| 224 // show the popup window. | |
| 225 $("#popupStep").jqxWindow('open'); | |
| 195 } | 226 } |
| 196 return true; | 227 } |
| 197 } | |
| 198 }, | |
| 199 { text: 'Eind temp', datafield: 'end_temp', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1', | |
| 200 validation: function (cell, value) { | |
| 201 if (value < 35 || value > 80) { | |
| 202 return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." }; | |
| 203 } | |
| 204 return true; | |
| 205 } | |
| 206 }, | |
| 207 { text: 'Rusttijd', datafield: 'step_time', width: 80, align: 'right', cellsalign: 'right', | |
| 208 validation: function (cell, value) { | |
| 209 if (value < 1 || value > 360) { | |
| 210 return { result: false, message: "De tijd moet tussen 1 en 360 zijn." }; | |
| 211 } | |
| 212 return true; | |
| 213 } | |
| 214 }, | |
| 215 { text: 'Staptijd', datafield: 'ramp_time', width: 80, align: 'right', cellsalign: 'right', | |
| 216 validation: function (cell, value) { | |
| 217 if (value < 1 || value > 60) { | |
| 218 return { result: false, message: "De tijd moet tussen 1 en 60 zijn." }; | |
| 219 } | |
| 220 return true; | |
| 221 } | |
| 222 } | |
| 223 ] | 228 ] |
| 224 }); | |
| 225 $("#grid").on('cellendedit', function (event) { | |
| 226 $('#grid').jqxGrid('sortby', 'step_temp', 'asc'); | |
| 227 }); | 229 }); |
| 228 }; | 230 }; |
| 229 | 231 |
| 230 // initialize the input fields. | 232 // initialize the input fields. |
| 231 $("#name").jqxInput({ theme: theme, width: 480, height: 23 }); | 233 $("#name").jqxInput({ theme: theme, width: 480, height: 23 }); |
| 246 statusbar.append(container); | 248 statusbar.append(container); |
| 247 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); | 249 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); |
| 248 // add new row. | 250 // add new row. |
| 249 addButton.click(function (event) { | 251 addButton.click(function (event) { |
| 250 editrow = -1; | 252 editrow = -1; |
| 251 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); | |
| 252 $("#name").val('Nieuw maisch schema'); | 253 $("#name").val('Nieuw maisch schema'); |
| 253 $("#notes").val(''); | 254 $("#notes").val(''); |
| 254 editsteps(''); | 255 editsteps(''); |
| 255 $("#popupWindow").jqxWindow('open'); | 256 $("#popupWindow").jqxWindow('open'); |
| 256 }); | 257 }); |
| 261 { text: 'Maish schema', datafield: 'name', width: 250 }, | 262 { text: 'Maish schema', datafield: 'name', width: 250 }, |
| 262 { text: 'Opmerkingen', datafield: 'notes' }, | 263 { text: 'Opmerkingen', datafield: 'notes' }, |
| 263 { text: 'Wijzig', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function () { | 264 { text: 'Wijzig', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function () { |
| 264 return "Wijzig"; | 265 return "Wijzig"; |
| 265 }, buttonclick: function (row) { | 266 }, buttonclick: function (row) { |
| 266 // open the popup window when the user clicks a button. | |
| 267 editrow = row; | 267 editrow = row; |
| 268 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); | |
| 269 // get the clicked row's data and initialize the input fields. | 268 // get the clicked row's data and initialize the input fields. |
| 270 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); | 269 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
| 271 $("#name").val(dataRecord.name); | 270 $("#name").val(dataRecord.name); |
| 272 $("#notes").val(dataRecord.notes); | 271 $("#notes").val(dataRecord.notes); |
| 273 editsteps(dataRecord); | 272 editsteps(dataRecord); |
| 279 }); | 278 }); |
| 280 // initialize the popup window and buttons. | 279 // initialize the popup window and buttons. |
| 281 $("#popupWindow").jqxWindow({ | 280 $("#popupWindow").jqxWindow({ |
| 282 width: 1050, | 281 width: 1050, |
| 283 height: 580, | 282 height: 580, |
| 283 position: { x: 110, y: 30 }, | |
| 284 resizable: false, | 284 resizable: false, |
| 285 theme: theme, | 285 theme: theme, |
| 286 isModal: true, | 286 isModal: true, |
| 287 autoOpen: false, | 287 autoOpen: false, |
| 288 cancelButton: $("#Cancel"), | 288 cancelButton: $("#Cancel"), |
| 289 modalOpacity: 0.40 | 289 modalOpacity: 0.40 |
| 290 }); | 290 }); |
| 291 $("#popupWindow").on('open', function () { | 291 $("#popupWindow").on('open', function () { |
| 292 $("#name").jqxInput('selectAll'); | 292 $("#name").jqxInput('selectAll'); |
| 293 }); | 293 }); |
| 294 $("#popupStep").jqxWindow({ | |
| 295 width: 800, | |
| 296 height: 300, | |
| 297 position: { x: 230, y: 100 }, | |
| 298 resizable: false, | |
| 299 theme: theme, | |
| 300 isModal: true, | |
| 301 autoOpen: false, | |
| 302 cancelButton: $("#Ready"), | |
| 303 modalOpacity: 0.40 | |
| 304 }); | |
| 305 | |
| 306 // step detail popup update values. | |
| 307 $("#Ready").jqxButton({ template: "success", width: '90px', theme: theme }); | |
| 308 $("#Ready").click(function () { | |
| 309 $("#grid").jqxGrid('setcellvalue', steprow, 'step_name', $("#m_step_name").val()); | |
| 310 $("#grid").jqxGrid('setcellvalue', steprow, 'step_type', $("#m_step_type").val()); | |
| 311 $("#grid").jqxGrid('setcellvalue', steprow, 'step_temp', $("#m_step_temp").val()); | |
| 312 $("#grid").jqxGrid('setcellvalue', steprow, 'end_temp', $("#m_end_temp").val()); | |
| 313 $("#grid").jqxGrid('setcellvalue', steprow, 'step_time', $("#m_step_time").val()); | |
| 314 $("#grid").jqxGrid('setcellvalue', steprow, 'ramp_time', $("#m_ramp_time").val()); | |
| 315 $('#grid').jqxGrid('sortby', 'step_temp', 'asc'); | |
| 316 }); | |
| 317 | |
| 318 // mash profile popup. | |
| 294 $("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme }); | 319 $("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme }); |
| 295 $("#Delete").click(function () { | 320 $("#Delete").click(function () { |
| 296 if (editrow >= 0) { | 321 if (editrow >= 0) { |
| 297 // Open a popup to confirm this action. | 322 // Open a popup to confirm this action. |
| 298 $('#eventWindow').jqxWindow('open'); | 323 $('#eventWindow').jqxWindow('open'); |
