comparison: www/js/profile_mash.js
www/js/profile_mash.js
- changeset 120
- b28a3d6143bc
- parent 45
- 95251bedfab4
- child 213
- b0d484a5525e
equal
deleted
inserted
replaced
| 119:ae5e8d740173 | 120:b28a3d6143bc |
|---|---|
| 31 isModal: true, | 31 isModal: true, |
| 32 modalOpacity: 0.4, | 32 modalOpacity: 0.4, |
| 33 okButton: $('#delOk'), | 33 okButton: $('#delOk'), |
| 34 cancelButton: $('#delCancel'), | 34 cancelButton: $('#delCancel'), |
| 35 initContent: function () { | 35 initContent: function () { |
| 36 $('#delOk').jqxButton({ width: '65px', theme: theme }); | 36 $('#delOk').jqxButton({ template: "danger", width: '65px', theme: theme }); |
| 37 $('#delCancel').jqxButton({ width: '65px', theme: theme }); | 37 $('#delCancel').jqxButton({ template: "success", width: '65px', theme: theme }); |
| 38 $('#delCancel').focus(); | 38 $('#delCancel').focus(); |
| 39 } | 39 } |
| 40 }); | 40 }); |
| 41 $('#eventWindow').jqxWindow('hide'); | 41 $('#eventWindow').jqxWindow('hide'); |
| 42 } | 42 } |
| 140 commit(true); | 140 commit(true); |
| 141 } | 141 } |
| 142 }; | 142 }; |
| 143 var stepAdapter = new $.jqx.dataAdapter(stepSource); | 143 var stepAdapter = new $.jqx.dataAdapter(stepSource); |
| 144 $("#grid").jqxGrid({ | 144 $("#grid").jqxGrid({ |
| 145 width: 640, | 145 width: 800, |
| 146 height: 330, | 146 height: 330, |
| 147 source: stepAdapter, | 147 source: stepAdapter, |
| 148 theme: theme, | 148 theme: theme, |
| 149 selectionmode: 'singlerow', | 149 selectionmode: 'singlerow', |
| 150 editmode: 'selectedrow', | 150 editmode: 'selectedrow', |
| 153 rendertoolbar: function (toolbar) { | 153 rendertoolbar: function (toolbar) { |
| 154 var me = this; | 154 var me = this; |
| 155 var container = $("<div style='margin: 5px;'></div>"); | 155 var container = $("<div style='margin: 5px;'></div>"); |
| 156 toolbar.append(container); | 156 toolbar.append(container); |
| 157 container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />'); | 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" />'); | 158 container.append('<input style="margin-left: 290px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); |
| 159 $("#addrowbutton").jqxButton({ theme: theme, width: 150 }); | 159 $("#addrowbutton").jqxButton({ theme: theme, width: 150 }); |
| 160 $("#deleterowbutton").jqxButton({ theme: theme, width: 150 }); | 160 $("#deleterowbutton").jqxButton({ theme: theme, width: 150 }); |
| 161 // create new row. | 161 // create new row. |
| 162 $("#addrowbutton").on('click', function () { | 162 $("#addrowbutton").on('click', function () { |
| 163 var datarow = generaterow(); | 163 var datarow = generaterow(); |
| 173 } | 173 } |
| 174 }); | 174 }); |
| 175 }, | 175 }, |
| 176 columns: [ | 176 columns: [ |
| 177 { text: 'Stap naam', datafield: 'step_name' }, | 177 { text: 'Stap naam', datafield: 'step_name' }, |
| 178 { text: 'Stap type', datafield: 'step_type', width: 100, columntype: 'dropdownlist', | 178 { text: 'Stap type', datafield: 'step_type', width: 120, columntype: 'dropdownlist', |
| 179 createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) { | 179 createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) { |
| 180 var dataSource = [ "Infusion", "Temperature", "Decoction" ]; | 180 var dataSource = [ "Infusion", "Temperature", "Decoction" ]; |
| 181 editor.jqxDropDownList({ source: dataSource, dropDownHeight: 95 }); | 181 editor.jqxDropDownList({ |
| 182 } | 182 source: dataSource, |
| 183 }, | 183 dropDownHeight: 95, |
| 184 { text: 'Temperatuur', datafield: 'step_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1', | 184 dropDownWidth: 120 |
| 185 }); | |
| 186 } | |
| 187 }, | |
| 188 { text: 'Temperatuur', datafield: 'step_temp', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1', | |
| 185 validation: function (cell, value) { | 189 validation: function (cell, value) { |
| 186 if (value < 35 || value > 80) { | 190 if (value < 35 || value > 80) { |
| 187 return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." }; | 191 return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." }; |
| 188 } | 192 } |
| 189 return true; | 193 return true; |
| 190 } | 194 } |
| 191 }, | 195 }, |
| 192 { text: 'Eind', datafield: 'end_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1', | 196 { text: 'Eind temp', datafield: 'end_temp', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1', |
| 193 validation: function (cell, value) { | 197 validation: function (cell, value) { |
| 194 if (value < 35 || value > 80) { | 198 if (value < 35 || value > 80) { |
| 195 return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." }; | 199 return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." }; |
| 196 } | 200 } |
| 197 return true; | 201 return true; |
| 198 } | 202 } |
| 199 }, | 203 }, |
| 200 { text: 'Tijd', datafield: 'step_time', width: 70, align: 'right', cellsalign: 'right', | 204 { text: 'Rusttijd', datafield: 'step_time', width: 80, align: 'right', cellsalign: 'right', |
| 201 validation: function (cell, value) { | 205 validation: function (cell, value) { |
| 202 if (value < 1 || value > 360) { | 206 if (value < 1 || value > 360) { |
| 203 return { result: false, message: "De tijd moet tussen 1 en 360 zijn." }; | 207 return { result: false, message: "De tijd moet tussen 1 en 360 zijn." }; |
| 204 } | 208 } |
| 205 return true; | 209 return true; |
| 206 } | 210 } |
| 207 }, | 211 }, |
| 208 { text: 'Stap', datafield: 'ramp_time', width: 70, align: 'right', cellsalign: 'right', | 212 { text: 'Staptijd', datafield: 'ramp_time', width: 80, align: 'right', cellsalign: 'right', |
| 209 validation: function (cell, value) { | 213 validation: function (cell, value) { |
| 210 if (value < 1 || value > 60) { | 214 if (value < 1 || value > 60) { |
| 211 return { result: false, message: "De tijd moet tussen 1 en 60 zijn." }; | 215 return { result: false, message: "De tijd moet tussen 1 en 60 zijn." }; |
| 212 } | 216 } |
| 213 return true; | 217 return true; |
| 220 }); | 224 }); |
| 221 }; | 225 }; |
| 222 | 226 |
| 223 // initialize the input fields. | 227 // initialize the input fields. |
| 224 $("#name").jqxInput({ theme: theme, width: 250, height: 23 }); | 228 $("#name").jqxInput({ theme: theme, width: 250, height: 23 }); |
| 225 $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); | 229 $("#notes").jqxInput({ theme: theme, width: 800, height: 100 }); |
| 226 var editrow = -1; | 230 var editrow = -1; |
| 227 // initialize jqxGrid | 231 // initialize jqxGrid |
| 228 $("#jqxgrid").jqxGrid({ | 232 $("#jqxgrid").jqxGrid({ |
| 229 width: 1280, | 233 width: 1280, |
| 230 height: 630, | 234 height: 630, |
| 239 statusbar.append(container); | 243 statusbar.append(container); |
| 240 addButton.jqxButton({ theme: theme, width: 120, height: 20 }); | 244 addButton.jqxButton({ theme: theme, width: 120, height: 20 }); |
| 241 // add new row. | 245 // add new row. |
| 242 addButton.click(function (event) { | 246 addButton.click(function (event) { |
| 243 editrow = -1; | 247 editrow = -1; |
| 244 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); | 248 $("#popupWindow").jqxWindow({ position: { x: 160, y: 30 } }); |
| 245 $("#name").val(''); | 249 $("#name").val(''); |
| 246 $("#notes").val(''); | 250 $("#notes").val(''); |
| 247 editsteps(''); | 251 editsteps(''); |
| 248 $("#popupWindow").jqxWindow('open'); | 252 $("#popupWindow").jqxWindow('open'); |
| 249 }); | 253 }); |
| 256 { text: 'Wijzig', datafield: 'Edit', width: 120, align: 'center', columntype: 'button', cellsrenderer: function () { | 260 { text: 'Wijzig', datafield: 'Edit', width: 120, align: 'center', columntype: 'button', cellsrenderer: function () { |
| 257 return "Wijzig"; | 261 return "Wijzig"; |
| 258 }, buttonclick: function (row) { | 262 }, buttonclick: function (row) { |
| 259 // open the popup window when the user clicks a button. | 263 // open the popup window when the user clicks a button. |
| 260 editrow = row; | 264 editrow = row; |
| 261 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); | 265 $("#popupWindow").jqxWindow({ position: { x: 160, y: 30 } }); |
| 262 // get the clicked row's data and initialize the input fields. | 266 // get the clicked row's data and initialize the input fields. |
| 263 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); | 267 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
| 264 $("#name").val(dataRecord.name); | 268 $("#name").val(dataRecord.name); |
| 265 $("#notes").val(dataRecord.notes); | 269 $("#notes").val(dataRecord.notes); |
| 266 editsteps(dataRecord); | 270 editsteps(dataRecord); |
| 270 } | 274 } |
| 271 ] | 275 ] |
| 272 }); | 276 }); |
| 273 // initialize the popup window and buttons. | 277 // initialize the popup window and buttons. |
| 274 $("#popupWindow").jqxWindow({ | 278 $("#popupWindow").jqxWindow({ |
| 275 width: 860, | 279 width: 960, |
| 276 height: 550, | 280 height: 550, |
| 277 resizable: false, | 281 resizable: false, |
| 278 theme: theme, | 282 theme: theme, |
| 279 isModal: true, | 283 isModal: true, |
| 280 autoOpen: false, | 284 autoOpen: false, |
| 282 modalOpacity: 0.40 | 286 modalOpacity: 0.40 |
| 283 }); | 287 }); |
| 284 $("#popupWindow").on('open', function () { | 288 $("#popupWindow").on('open', function () { |
| 285 $("#name").jqxInput('selectAll'); | 289 $("#name").jqxInput('selectAll'); |
| 286 }); | 290 }); |
| 287 $("#Delete").jqxButton({ theme: theme }); | 291 $("#Delete").jqxButton({ template: "danger", width: '80px', theme: theme }); |
| 288 $("#Delete").click(function () { | 292 $("#Delete").click(function () { |
| 289 if (editrow >= 0) { | 293 if (editrow >= 0) { |
| 290 // Open a popup to confirm this action. | 294 // Open a popup to confirm this action. |
| 291 $('#eventWindow').jqxWindow('open'); | 295 $('#eventWindow').jqxWindow('open'); |
| 292 $("#delOk").click(function () { | 296 $("#delOk").click(function () { |
| 294 $("#jqxgrid").jqxGrid('deleterow', rowID); | 298 $("#jqxgrid").jqxGrid('deleterow', rowID); |
| 295 }); | 299 }); |
| 296 } | 300 } |
| 297 $("#popupWindow").jqxWindow('hide'); | 301 $("#popupWindow").jqxWindow('hide'); |
| 298 }); | 302 }); |
| 299 $("#Cancel").jqxButton({ theme: theme }); | 303 $("#Cancel").jqxButton({ template: "primary", width: '80px', theme: theme }); |
| 300 $("#Save").jqxButton({ theme: theme }); | 304 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); |
| 301 // update the edited row when the user clicks the 'Save' button. | 305 // update the edited row when the user clicks the 'Save' button. |
| 302 $("#Save").click(function () { | 306 $("#Save").click(function () { |
| 303 var steprows = $('#grid').jqxGrid('getrows'); | 307 var steprows = $('#grid').jqxGrid('getrows'); |
| 304 if (editrow >= 0) { | 308 if (editrow >= 0) { |
| 305 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); | 309 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
