Added inline mash steps editor framework, the rough parts are ready.

Sat, 22 Sep 2018 22:08:49 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Sat, 22 Sep 2018 22:08:49 +0200
changeset 62
12c5eae75d1e
parent 61
3469979f83be
child 63
1d1e3002f26b

Added inline mash steps editor framework, the rough parts are ready.

www/js/recipes.js file | annotate | diff | comparison | revisions
--- a/www/js/recipes.js	Sat Sep 22 19:14:02 2018 +0200
+++ b/www/js/recipes.js	Sat Sep 22 22:08:49 2018 +0200
@@ -858,6 +858,139 @@
 	}; // editWater = function (data) {
 
 	// inline mash editor
+        var editMash = function (data) {
+		var generaterow = function () {
+			var row = {};
+			row["step_name"] = "Stap 1";
+			row["step_type"] = "Infusion";
+			row["step_infuse_amount"] = 15;
+			row["step_temp"] = 62.0;
+			row['step_time'] = 20.0;
+			row['ramp_time'] = 1.0;
+			row['end_temp'] = 62.0;
+			return row;
+		}
+                var mashSource = {
+                        localdata: data.mashs,
+                        datatype: "local",
+                        cache: false,
+                        datafields: [
+                                { name: 'step_name', type: 'string' },
+                                { name: 'step_type', type: 'string' },
+				{ name: 'step_infuse_amount', type: 'float' },
+				{ name: 'step_temp', type: 'float' },
+				{ name: 'step_time', type: 'float' },
+				{ name: 'ramp_time', type: 'float' },
+				{ name: 'end_temp', type: 'float' }
+                        ],
+                        addrow: function (rowid, rowdata, position, commit) {
+                                commit(true);
+                        },
+                        deleterow: function (rowid, commit) {
+                                commit(true);
+                        }
+                };
+                var mashAdapter = new $.jqx.dataAdapter(mashSource);
+                // dropdownlist datasource from profile_mash
+                var mashUrl = "include/db_profile_mash.php";
+                var mashInvSource = {
+                        datatype: "json",
+                        datafields: [
+                                { name: 'record', type: 'number' },
+                                { name: 'name', type: 'string' },
+                                { name: 'steps', type: 'array' }
+                        ],
+                        url: mashUrl,
+                        async: true
+                };
+                var mashlist = new $.jqx.dataAdapter(mashInvSource);
+
+                $("#mashGrid").jqxGrid({
+                        width: 960,
+                        height: 400,
+                        source: mashAdapter,
+                        theme: theme,
+                        selectionmode: 'singlerow',
+                        editmode: 'selectedrow',
+                        editable: true,
+                        localization: getLocalization(),
+                        showtoolbar: true,
+                        rendertoolbar: function (toolbar) {
+                                var me = this;
+                                var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
+                                toolbar.append(container);
+                                container.append('<input style="float: left; margin-left: 165px;" id="saddrowbutton" type="button" value="Nieuwe stap" />');
+                                container.append('<input style="float: left; margin-left: 230px;" id="sdeleterowbutton" type="button" value="Verwijder stap" />');
+				$("#saddrowbutton").jqxButton({ theme: theme, height: 27, width: 150 });
+				$("#saddrowbutton").on('click', function () {
+					var datarow = generaterow();
+					var commit = $("#mashGrid").jqxGrid('addrow', null, datarow);
+				});
+                                // delete selected yeast.
+                                $("#sdeleterowbutton").jqxButton({ theme: theme, height: 27, width: 150 });
+                                $("#sdeleterowbutton").on('click', function () {
+                                        var selectedrowindex = $("#mashGrid").jqxGrid('getselectedrowindex');
+                                        var rowscount = $("#mashGrid").jqxGrid('getdatainformation').rowscount;
+                                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
+                                                var id = $("#mashGrid").jqxGrid('getrowid', selectedrowindex);
+                                                var commit = $("#mashGrid").jqxGrid('deleterow', id);
+                                        }
+                                });
+                        },
+                        columns: [
+				{ text: 'Stap naam', datafield: 'step_name' },
+			        { text: 'Stap type', datafield: 'step_type', width: 110, columntype: 'dropdownlist',
+				  createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
+				  	var dataSource = [ "Infusion", "Temperature", "Decoction" ];
+					editor.jqxDropDownList({ source: dataSource, dropDownHeight: 105 });
+				  }
+				},
+				{ 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;
+				  }
+				},
+				{ text: 'Infuse', datafield: 'step_infuse_amount', width: 70, align: 'right', cellsalign: 'right',
+				  validation: function (cell, value) {
+					if (value < 0 || value > 60) {
+						return { result: false, message: "De waarde moet tussen 0 en 60 zijn." };
+					}
+					return true;
+				  }
+				}
+                        ]
+                });
+		$("#mashGrid").on('cellendedit', function (event) {
+			$('#mashGrid').jqxGrid('sortby', 'step_temp', 'asc');
+		});
+        };
 
 	// initialize the input fields.
 	var srcType = [ "All Grain", "Partial Mash", "Extract" ];
@@ -926,6 +1059,7 @@
 				editMisc('');
 				editYeast('');
 				editWater('');
+				editMash('');
 				$("#popupWindow").jqxWindow('open');
 			});
 		},
@@ -972,6 +1106,7 @@
 					editMisc(dataRecord);
 					editYeast(dataRecord);
 					editWater(dataRecord);
+					editMash(dataRecord);
 					// show the popup window.
 					$("#popupWindow").jqxWindow('open');
 				}
@@ -1025,6 +1160,7 @@
 		var miscrow = $('#miscGrid').jqxGrid('getrows');
 		var yeastrow = $('#yeastGrid').jqxGrid('getrows');
 		var waterrow = $('#waterGrid').jqxGrid('getrows');
+		var mashrow = $('#mashGrid').jqxGrid('getrows');
 		if (editrow >= 0) {
 			var rowRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
 			var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
@@ -1064,7 +1200,8 @@
 				hops: hoprow,
 				miscs: miscrow,
 				yeasts: yeastrow,
-				waters: waterrow
+				waters: waterrow,
+				mashs: mashrow
 			};
 			$('#jqxgrid').jqxGrid('updaterow', rowID, row);
 		} else {
@@ -1105,7 +1242,8 @@
 				hops: hoprow,
 				miscs: miscrow,
 				yeasts: yeastrow,
-				waters: waterrow
+				waters: waterrow,
+				mashs: mashrow
 			};
 			$('#jqxgrid').jqxGrid('addrow', null, newrow);
 		}

mercurial