comparison: www/js/profile_mash.js
www/js/profile_mash.js
- changeset 213
- b0d484a5525e
- parent 120
- b28a3d6143bc
- child 215
- 83cee005d2d9
equal
deleted
inserted
replaced
| 212:adda48f710cd | 213:b0d484a5525e |
|---|---|
| 44 | 44 |
| 45 $(document).ready(function () { | 45 $(document).ready(function () { |
| 46 var url = "includes/db_profile_mash.php"; | 46 var url = "includes/db_profile_mash.php"; |
| 47 // tooltips | 47 // tooltips |
| 48 $("#name").jqxTooltip({ content: 'De naam voor dit maisch profiel.' }); | 48 $("#name").jqxTooltip({ content: 'De naam voor dit maisch profiel.' }); |
| 49 $("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit maich profiel.' }); | 49 $("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit maisch profiel.' }); |
| 50 $("#grid").jqxTooltip({ content: 'De maisch stappen in dit profiel.'}); | |
| 51 // prepare the data | 50 // prepare the data |
| 52 var source = { | 51 var source = { |
| 53 datatype: "json", | 52 datatype: "json", |
| 54 cache: false, | 53 cache: false, |
| 55 datafields: [ | 54 datafields: [ |
| 66 $.ajax({ | 65 $.ajax({ |
| 67 dataType: 'json', | 66 dataType: 'json', |
| 68 url: url, | 67 url: url, |
| 69 cache: false, | 68 cache: false, |
| 70 data: data, | 69 data: data, |
| 70 type: "POST", | |
| 71 success: function (data, status, xhr) { | 71 success: function (data, status, xhr) { |
| 72 // delete command is executed. | 72 // delete command is executed. |
| 73 commit(true); | 73 commit(true); |
| 74 }, | 74 }, |
| 75 error: function (jqXHR, textStatus, errorThrown) { | 75 error: function (jqXHR, textStatus, errorThrown) { |
| 82 $.ajax({ | 82 $.ajax({ |
| 83 dataType: 'json', | 83 dataType: 'json', |
| 84 url: url, | 84 url: url, |
| 85 cache: false, | 85 cache: false, |
| 86 data: data, | 86 data: data, |
| 87 type: "POST", | |
| 87 success: function (data, status, xhr) { | 88 success: function (data, status, xhr) { |
| 88 commit(true); | 89 commit(true); |
| 89 }, | 90 }, |
| 90 error: function(jqXHR, textStatus, errorThrown) { | 91 error: function(jqXHR, textStatus, errorThrown) { |
| 91 commit(false); | 92 commit(false); |
| 97 $.ajax({ | 98 $.ajax({ |
| 98 dataType: 'json', | 99 dataType: 'json', |
| 99 url: url, | 100 url: url, |
| 100 cache: false, | 101 cache: false, |
| 101 data: data, | 102 data: data, |
| 103 type: "POST", | |
| 102 success: function (data, status, xhr) { | 104 success: function (data, status, xhr) { |
| 103 // update command is executed. | 105 // update command is executed. |
| 104 commit(true); | 106 commit(true); |
| 105 }, | 107 }, |
| 106 error: function(jqXHR, textStatus, errorThrown) { | 108 error: function(jqXHR, textStatus, errorThrown) { |
| 112 var dataAdapter = new $.jqx.dataAdapter(source); | 114 var dataAdapter = new $.jqx.dataAdapter(source); |
| 113 // Inline steps editor | 115 // Inline steps editor |
| 114 var editsteps = function (data) { | 116 var editsteps = function (data) { |
| 115 var generaterow = function () { | 117 var generaterow = function () { |
| 116 var row = {}; | 118 var row = {}; |
| 117 row["step_name"] = "Stap 1"; | 119 row['step_name'] = "Stap 1"; |
| 118 row["step_type"] = "Infusion"; | 120 row['step_type'] = 0; |
| 119 row["step_temp"] = 62.0; | 121 row['step_temp'] = 62.0; |
| 120 row['step_time'] = 20.0; | 122 row['step_time'] = 20.0; |
| 121 row['ramp_time'] = 1.0; | 123 row['ramp_time'] = 1.0; |
| 122 row['end_temp'] = 62.0; | 124 row['end_temp'] = 62.0; |
| 123 return row; | 125 return row; |
| 124 } | 126 } |
| 125 var stepSource = { | 127 var stepSource = { |
| 126 localdata: data.steps, | 128 localdata: data.steps, |
| 127 datatype: "local", | 129 datatype: "local", |
| 128 datafields: [ | 130 datafields: [ |
| 129 { name: 'step_name', type: 'string' }, | 131 { name: 'step_name', type: 'string' }, |
| 130 { name: 'step_type', type: 'string' }, | 132 { name: 'step_type', type: 'int' }, |
| 131 { name: 'step_temp', type: 'float' }, | 133 { name: 'step_temp', type: 'float' }, |
| 132 { name: 'step_time', type: 'float' }, | 134 { name: 'step_time', type: 'float' }, |
| 133 { name: 'ramp_time', type: 'float' }, | 135 { name: 'ramp_time', type: 'float' }, |
| 134 { name: 'end_temp', type: 'float' } | 136 { name: 'end_temp', type: 'float' } |
| 135 ], | 137 ], |
| 145 width: 800, | 147 width: 800, |
| 146 height: 330, | 148 height: 330, |
| 147 source: stepAdapter, | 149 source: stepAdapter, |
| 148 theme: theme, | 150 theme: theme, |
| 149 selectionmode: 'singlerow', | 151 selectionmode: 'singlerow', |
| 150 editmode: 'selectedrow', | 152 editmode: 'selectedcell', |
| 151 editable: true, | 153 editable: true, |
| 154 localization: getLocalization(), | |
| 152 showtoolbar: true, | 155 showtoolbar: true, |
| 153 rendertoolbar: function (toolbar) { | 156 rendertoolbar: function (toolbar) { |
| 154 var me = this; | 157 var me = this; |
| 155 var container = $("<div style='margin: 5px;'></div>"); | 158 var container = $("<div style='margin: 5px;'></div>"); |
| 156 toolbar.append(container); | 159 toolbar.append(container); |
| 157 container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />'); | 160 container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />'); |
| 158 container.append('<input style="margin-left: 290px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); | 161 container.append('<input style="margin-left: 290px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); |
| 159 $("#addrowbutton").jqxButton({ theme: theme, width: 150 }); | 162 $("#addrowbutton").jqxButton({ template: "primary", theme: theme, width: 150 }); |
| 160 $("#deleterowbutton").jqxButton({ theme: theme, width: 150 }); | 163 $("#deleterowbutton").jqxButton({ template: "primary", theme: theme, width: 150 }); |
| 161 // create new row. | 164 // create new row. |
| 162 $("#addrowbutton").on('click', function () { | 165 $("#addrowbutton").on('click', function () { |
| 163 var datarow = generaterow(); | 166 var datarow = generaterow(); |
| 164 var commit = $("#grid").jqxGrid('addrow', null, datarow); | 167 var commit = $("#grid").jqxGrid('addrow', null, datarow); |
| 165 }); | 168 }); |
| 173 } | 176 } |
| 174 }); | 177 }); |
| 175 }, | 178 }, |
| 176 columns: [ | 179 columns: [ |
| 177 { text: 'Stap naam', datafield: 'step_name' }, | 180 { text: 'Stap naam', datafield: 'step_name' }, |
| 178 { text: 'Stap type', datafield: 'step_type', width: 120, columntype: 'dropdownlist', | 181 { text: 'Stap type', datafield: 'step_type', width: 150, columntype: 'dropdownlist', |
| 179 createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) { | 182 createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) { |
| 180 var dataSource = [ "Infusion", "Temperature", "Decoction" ]; | 183 var dataSource = [ "0", "1", "2" ]; |
| 181 editor.jqxDropDownList({ | 184 editor.jqxDropDownList({ |
| 182 source: dataSource, | 185 source: dataSource, |
| 183 dropDownHeight: 95, | 186 dropDownHeight: 95, |
| 184 dropDownWidth: 120 | 187 dropDownWidth: 120 |
| 185 }); | 188 }); |
| 223 $('#grid').jqxGrid('sortby', 'step_temp', 'asc'); | 226 $('#grid').jqxGrid('sortby', 'step_temp', 'asc'); |
| 224 }); | 227 }); |
| 225 }; | 228 }; |
| 226 | 229 |
| 227 // initialize the input fields. | 230 // initialize the input fields. |
| 228 $("#name").jqxInput({ theme: theme, width: 250, height: 23 }); | 231 $("#name").jqxInput({ theme: theme, width: 480, height: 23 }); |
| 229 $("#notes").jqxInput({ theme: theme, width: 800, height: 100 }); | 232 $("#notes").jqxInput({ theme: theme, width: 800, height: 100 }); |
| 230 var editrow = -1; | 233 var editrow = -1; |
| 231 // initialize jqxGrid | 234 // initialize jqxGrid |
| 232 $("#jqxgrid").jqxGrid({ | 235 $("#jqxgrid").jqxGrid({ |
| 233 width: 1280, | 236 width: 1280, |
| 239 renderstatusbar: function (statusbar) { | 242 renderstatusbar: function (statusbar) { |
| 240 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); | 243 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
| 241 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>"); | 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;'>Add</span></div>"); |
| 242 container.append(addButton); | 245 container.append(addButton); |
| 243 statusbar.append(container); | 246 statusbar.append(container); |
| 244 addButton.jqxButton({ theme: theme, width: 120, height: 20 }); | 247 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); |
| 245 // add new row. | 248 // add new row. |
| 246 addButton.click(function (event) { | 249 addButton.click(function (event) { |
| 247 editrow = -1; | 250 editrow = -1; |
| 248 $("#popupWindow").jqxWindow({ position: { x: 160, y: 30 } }); | 251 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
| 249 $("#name").val(''); | 252 $("#name").val('Nieuw maisch schema'); |
| 250 $("#notes").val(''); | 253 $("#notes").val(''); |
| 251 editsteps(''); | 254 editsteps(''); |
| 252 $("#popupWindow").jqxWindow('open'); | 255 $("#popupWindow").jqxWindow('open'); |
| 253 }); | 256 }); |
| 254 }, | 257 }, |
| 255 filterable: true, | 258 filterable: true, |
| 256 filtermode: 'excel', | 259 filtermode: 'excel', |
| 257 columns: [ | 260 columns: [ |
| 258 { text: 'Maish schema', datafield: 'name', width: 250 }, | 261 { text: 'Maish schema', datafield: 'name', width: 250 }, |
| 259 { text: 'Opmerkingen', datafield: 'notes' }, | 262 { text: 'Opmerkingen', datafield: 'notes' }, |
| 260 { text: 'Wijzig', datafield: 'Edit', width: 120, align: 'center', columntype: 'button', cellsrenderer: function () { | 263 { text: 'Wijzig', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function () { |
| 261 return "Wijzig"; | 264 return "Wijzig"; |
| 262 }, buttonclick: function (row) { | 265 }, buttonclick: function (row) { |
| 263 // open the popup window when the user clicks a button. | 266 // open the popup window when the user clicks a button. |
| 264 editrow = row; | 267 editrow = row; |
| 265 $("#popupWindow").jqxWindow({ position: { x: 160, y: 30 } }); | 268 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
| 266 // get the clicked row's data and initialize the input fields. | 269 // get the clicked row's data and initialize the input fields. |
| 267 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); | 270 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
| 268 $("#name").val(dataRecord.name); | 271 $("#name").val(dataRecord.name); |
| 269 $("#notes").val(dataRecord.notes); | 272 $("#notes").val(dataRecord.notes); |
| 270 editsteps(dataRecord); | 273 editsteps(dataRecord); |
| 274 } | 277 } |
| 275 ] | 278 ] |
| 276 }); | 279 }); |
| 277 // initialize the popup window and buttons. | 280 // initialize the popup window and buttons. |
| 278 $("#popupWindow").jqxWindow({ | 281 $("#popupWindow").jqxWindow({ |
| 279 width: 960, | 282 width: 1050, |
| 280 height: 550, | 283 height: 580, |
| 281 resizable: false, | 284 resizable: false, |
| 282 theme: theme, | 285 theme: theme, |
| 283 isModal: true, | 286 isModal: true, |
| 284 autoOpen: false, | 287 autoOpen: false, |
| 285 cancelButton: $("#Cancel"), | 288 cancelButton: $("#Cancel"), |
| 286 modalOpacity: 0.40 | 289 modalOpacity: 0.40 |
| 287 }); | 290 }); |
| 288 $("#popupWindow").on('open', function () { | 291 $("#popupWindow").on('open', function () { |
| 289 $("#name").jqxInput('selectAll'); | 292 $("#name").jqxInput('selectAll'); |
| 290 }); | 293 }); |
| 291 $("#Delete").jqxButton({ template: "danger", width: '80px', theme: theme }); | 294 $("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme }); |
| 292 $("#Delete").click(function () { | 295 $("#Delete").click(function () { |
| 293 if (editrow >= 0) { | 296 if (editrow >= 0) { |
| 294 // Open a popup to confirm this action. | 297 // Open a popup to confirm this action. |
| 295 $('#eventWindow').jqxWindow('open'); | 298 $('#eventWindow').jqxWindow('open'); |
| 296 $("#delOk").click(function () { | 299 $("#delOk").click(function () { |
| 298 $("#jqxgrid").jqxGrid('deleterow', rowID); | 301 $("#jqxgrid").jqxGrid('deleterow', rowID); |
| 299 }); | 302 }); |
| 300 } | 303 } |
| 301 $("#popupWindow").jqxWindow('hide'); | 304 $("#popupWindow").jqxWindow('hide'); |
| 302 }); | 305 }); |
| 303 $("#Cancel").jqxButton({ template: "primary", width: '80px', theme: theme }); | 306 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); |
| 304 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); | 307 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); |
| 305 // update the edited row when the user clicks the 'Save' button. | 308 // update the edited row when the user clicks the 'Save' button. |
| 306 $("#Save").click(function () { | 309 $("#Save").click(function () { |
| 307 var steprows = $('#grid').jqxGrid('getrows'); | 310 var steprows = $('#grid').jqxGrid('getrows'); |
| 311 var rowID = -1; | |
| 308 if (editrow >= 0) { | 312 if (editrow >= 0) { |
| 309 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); | 313 rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
| 310 var row = { | 314 } |
| 311 record: rowID, | 315 var row = { |
| 312 name: $("#name").val(), | 316 record: rowID, |
| 313 notes: $("#notes").val(), | 317 name: $("#name").val(), |
| 314 steps: steprows | 318 notes: $("#notes").val(), |
| 315 }; | 319 steps: steprows |
| 320 }; | |
| 321 if (editrow >= 0) { | |
| 316 $('#jqxgrid').jqxGrid('updaterow', rowID, row); | 322 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
| 317 $("#popupWindow").jqxWindow('hide'); | |
| 318 } else { | 323 } else { |
| 319 // Insert a record | 324 $('#jqxgrid').jqxGrid('addrow', null, row); |
| 320 var newrow = { | 325 } |
| 321 record: -1, | 326 $("#popupWindow").jqxWindow('hide'); |
| 322 name: $("#name").val(), | 327 location.reload( true ); // reload ourself. |
| 323 notes: $("#notes").val(), | |
| 324 steps: steprows | |
| 325 }; | |
| 326 $('#jqxgrid').jqxGrid('addrow', null, newrow); | |
| 327 $("#popupWindow").jqxWindow('hide'); | |
| 328 } | |
| 329 }); | 328 }); |
| 330 createDelElements(); | 329 createDelElements(); |
| 331 }); | 330 }); |
| 332 | 331 |
