--- a/www/js/inv_mash_profiles.js Tue Aug 28 11:30:42 2018 +0200
+++ b/www/js/inv_mash_profiles.js Tue Aug 28 20:54:53 2018 +0200
@@ -44,6 +44,10 @@
$(document).ready(function () {
var url = "includes/db_inventory_mash_profiles.php";
+ // tooltips
+ $("#name").jqxTooltip({ content: 'De naam voor dit maisch profiel.' });
+ $("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit maich profiel.' });
+ $("#grid").jqxTooltip({ content: 'De maisch stappen in dit profiel.'});
// prepare the data
var source = {
datatype: "json",
@@ -53,12 +57,6 @@
{ name: 'name', type: 'string' },
{ name: 'notes', type: 'string' },
{ name: 'steps', type: 'array' }
- // { name: 'step_name', type: 'string', map: 'steps>step_name' },
- // { name: 'step_type', type: 'string', map: 'steps>step_type' },
- // { name: 'step_temp', type: 'float', map: 'steps>step_temp' },
- // { name: 'step_time', type: 'float', map: 'steps>step_time' },
- // { name: 'tamp_time', type: 'float', map: 'steps>ramp_time' },
- // { name: 'end_temp', type: 'float', map: 'steps>end_temp' }
],
id: 'record',
url: url,
@@ -112,7 +110,7 @@
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
-
+ // Inline steps editor
var editsteps = function (data) {
var generaterow = function () {
var row = {};
@@ -136,22 +134,9 @@
{ name: 'end_temp', type: 'float' }
],
addrow: function (rowid, rowdata, position, commit) {
- // synchronize with the server - send insert command
- // call commit with parameter true if the synchronization with the server is successful
- //and with parameter false if the synchronization failed.
- // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
},
deleterow: function (rowid, commit) {
- // synchronize with the server - send delete command
- // call commit with parameter true if the synchronization with the server is successful
- //and with parameter false if the synchronization failed.
- commit(true);
- },
- updaterow: function (rowid, newdata, commit) {
- // synchronize with the server - send update command
- // call commit with parameter true if the synchronization with the server is successful
- // and with parameter false if the synchronization failed.
commit(true);
}
};
@@ -161,28 +146,18 @@
height: 330,
source: stepAdapter,
theme: theme,
+ selectionmode: 'singlerow',
+ editmode: 'selectedrow',
+ editable: true,
showtoolbar: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $("<div style='margin: 5px;'></div>");
toolbar.append(container);
- container.append('<input id="addrowbutton" type="button" value="Add New Row" />');
- container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Delete Selected Row" />');
- container.append('<input style="margin-left: 5px;" id="updaterowbutton" type="button" value="Update Selected Row" />');
- $("#addrowbutton").jqxButton({ theme: theme });
- $("#deleterowbutton").jqxButton({ theme: theme });
- $("#updaterowbutton").jqxButton({ theme: theme });
- // update row.
- $("#updaterowbutton").on('click', function () {
- var datarow = generaterow();
- var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
- var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
- if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
- var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
- var commit = $("#grid").jqxGrid('updaterow', id, datarow);
- $("#grid").jqxGrid('ensurerowvisible', selectedrowindex);
- }
- });
+ container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />');
+ container.append('<input style="margin-left: 140px;" id="deleterowbutton" type="button" value="Verwijder stap" />');
+ $("#addrowbutton").jqxButton({ theme: theme, width: 150 });
+ $("#deleterowbutton").jqxButton({ theme: theme, width: 150 });
// create new row.
$("#addrowbutton").on('click', function () {
var datarow = generaterow();
@@ -200,13 +175,49 @@
},
columns: [
{ text: 'Stap naam', datafield: 'step_name' },
- { text: 'Stap type', datafield: 'step_type', width: 100 },
- { text: 'Temperatuur', datafield: 'step_temp', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
- { text: 'Eind', datafield: 'end_temp', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
- { text: 'Tijd', datafield: 'step_time', width: 70, align: 'right', cellsalign: 'right' },
- { text: 'Stap', datafield: 'ramp_time', width: 70, align: 'right', cellsalign: 'right' }
+ { text: 'Stap type', datafield: 'step_type', width: 100, columntype: 'dropdownlist',
+ createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
+ var dataSource = [ "Infusion", "Temperature", "Decoction" ];
+ editor.jqxDropDownList({ source: dataSource, dropDownHeight: 95 });
+ }
+ },
+ { text: 'Temperatuur', datafield: 'step_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1',
+ validation: function (cell, value) {
+ if (value < 35 || value > 80) {
+ return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." };
+ }
+ return true;
+ }
+ },
+ { text: 'Eind', datafield: 'end_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1',
+ validation: function (cell, value) {
+ if (value < 35 || value > 80) {
+ return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." };
+ }
+ return true;
+ }
+ },
+ { text: 'Tijd', datafield: 'step_time', width: 70, align: 'right', cellsalign: 'right',
+ validation: function (cell, value) {
+ if (value < 1 || value > 360) {
+ return { result: false, message: "De tijd moet tussen 1 en 360 zijn." };
+ }
+ return true;
+ }
+ },
+ { text: 'Stap', datafield: 'ramp_time', width: 70, align: 'right', cellsalign: 'right',
+ validation: function (cell, value) {
+ if (value < 1 || value > 60) {
+ return { result: false, message: "De tijd moet tussen 1 en 60 zijn." };
+ }
+ return true;
+ }
+ }
]
});
+ $("#grid").on('cellendedit', function (event) {
+ $('#grid').jqxGrid('sortby', 'step_temp', 'asc');
+ });
};
// initialize the input fields.
@@ -289,15 +300,14 @@
$("#Save").jqxButton({ theme: theme });
// update the edited row when the user clicks the 'Save' button.
$("#Save").click(function () {
+ var steprows = $('#grid').jqxGrid('getrows');
if (editrow >= 0) {
var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
- var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
-// $("#name").val(dataRecord.name);
var row = {
record: rowID,
name: $("#name").val(),
notes: $("#notes").val(),
- steps: dataRecord.steps
+ steps: steprows
};
$('#jqxgrid').jqxGrid('updaterow', rowID, row);
$("#popupWindow").jqxWindow('hide');
@@ -306,7 +316,8 @@
var newrow = {
record: -1,
name: $("#name").val(),
- notes: $("#notes").val()
+ notes: $("#notes").val(),
+ steps: steprows
};
$('#jqxgrid').jqxGrid('addrow', null, newrow);
$("#popupWindow").jqxWindow('hide');