Initial setup for mash steps editing.

Mon, 27 Aug 2018 22:58:20 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Mon, 27 Aug 2018 22:58:20 +0200
changeset 38
b7d44c98d609
parent 37
9362eb9e9e5b
child 39
400aae9fb0c8

Initial setup for mash steps editing.

www/import/from_brouwhulp.php file | annotate | diff | comparison | revisions
www/includes/db_inventory_mash_profiles.php file | annotate | diff | comparison | revisions
www/inv_mash_profiles.php file | annotate | diff | comparison | revisions
www/js/inv_mash_profiles.js file | annotate | diff | comparison | revisions
--- a/www/import/from_brouwhulp.php	Sat Aug 25 13:07:13 2018 +0200
+++ b/www/import/from_brouwhulp.php	Mon Aug 27 22:58:20 2018 +0200
@@ -399,9 +399,9 @@
 				if ($comma)
 					$steps .= ',';
 				$comma = TRUE;
-				$steps .= '{"name":"' . mysqli_real_escape_string($db, $step->NAME) . '"';
+				$steps .= '{"step_name":"' . mysqli_real_escape_string($db, $step->NAME) . '"';
 				if ($step->TYPE) {
-					$steps .= ',"type":"' . $step->TYPE . '"';
+					$steps .= ',"step_type":"' . $step->TYPE . '"';
 				}
 				if ($step->STEP_TEMP) {
 					$steps .= ',"step_temp":"' . $step->STEP_TEMP . '"';
--- a/www/includes/db_inventory_mash_profiles.php	Sat Aug 25 13:07:13 2018 +0200
+++ b/www/includes/db_inventory_mash_profiles.php	Mon Aug 27 22:58:20 2018 +0200
@@ -10,12 +10,12 @@
 }
 
 // get data and store in a json array
-$query = "SELECT * FROM inventory_mash_profiles";
+$query = "SELECT * FROM inventory_mash_profiles ORDER BY name";
 if (isset($_GET['insert'])) {
 	// INSERT COMMAND
 	$sql  = "INSERT INTO `inventory_mash_profiles` SET name='" . mysqli_real_escape_string($connect, $_GET['name']);
 	$sql .= "', notes='" . mysqli_real_escape_string($connect, $_GET['notes']);
-	$sql .= "', steps='" . mysqli_real_escape_string($connect, $_GET['steos']);
+	$sql .= "', steps='" . json_encode($_GET['steps']);
 	$sql .= "';";
 	$result = mysqli_query($connect, $sql);
 	if (! $result) {
@@ -29,7 +29,7 @@
 	// UPDATE COMMAND
 	$sql  = "UPDATE `inventory_mash_profiles` SET name='" . mysqli_real_escape_string($connect, $_GET['name']);
 	$sql .= "', notes='" . mysqli_real_escape_string($connect, $_GET['notes']);
-	$sql .= "', steps='" . mysqli_real_escape_string($connect, $_GET['steos']);
+	$sql .= "', steps='" . json_encode($_GET['steps']);
 	$sql .= "' WHERE record='" . $_GET['record'] . "';";
 	$result = mysqli_query($connect, $sql);
 	if (! $result) {
@@ -53,14 +53,22 @@
 } else {
 	// SELECT COMMAND
 	$result = mysqli_query($connect, $query) or die("SQL Error 1: " . mysqli_error($connect));
+	$mashprofiles = '[';
+	$comma = FALSE;
 	while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
-		$suppliers[] = array(
-			'record' => $row['record'],
-			'name' => $row['name'],
-			'notes' => $row['notes'],
-			'steps' => $row['steps']
-		);
+		// Manual encode to JSON.
+		if ($comma) {
+			$mashprofiles .= ',';
+		}
+		$comma = TRUE;
+		$mashprofiles .= '{"record":' . $row['record'];
+	        $mashprofiles .= ',"name":"'  . $row['name'];
+		$mashprofiles .= '","notes":"' . $row['notes'];
+		$mashprofiles .= '","steps":' . $row['steps'];
+		$mashprofiles .= '}';
 	}
-	echo json_encode($suppliers);
+	$mashprofiles .= ']';
+	header("Content-type: application/json");
+	echo $mashprofiles;
 }
 ?>
--- a/www/inv_mash_profiles.php	Sat Aug 25 13:07:13 2018 +0200
+++ b/www/inv_mash_profiles.php	Mon Aug 27 22:58:20 2018 +0200
@@ -23,6 +23,10 @@
        <td align="left" colspan="3"><textarea id="notes"></textarea></td>
       </tr>
       <tr>
+       <td align="right" style="vertical-align: top;">Stappen:</td>
+       <td align="left" colspan="3"><div id="grid">Graat</div></td>
+      </tr>
+      <tr>
        <td style="padding-top: 10px;" align="right"><input type="button" id="Delete" value="Delete" /></td>
        <td align="right"></td>
        <td align="right"></td>
--- a/www/js/inv_mash_profiles.js	Sat Aug 25 13:07:13 2018 +0200
+++ b/www/js/inv_mash_profiles.js	Mon Aug 27 22:58:20 2018 +0200
@@ -26,7 +26,7 @@
 		theme: theme,
 		position: { x: 490, y: 210 },
 		width: 300,
-		height: 145,
+		height: 175,
 		resizable: false,
 		isModal: true,
 		modalOpacity: 0.4,
@@ -52,7 +52,13 @@
 			{ name: 'record', type: 'number' },
 			{ name: 'name', type: 'string' },
 			{ name: 'notes', type: 'string' },
-			{ name: 'steps', 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,
@@ -105,10 +111,107 @@
 			});
 		}
 	};
+	var dataAdapter = new $.jqx.dataAdapter(source);
+
+	var editsteps = function (data) {
+		var generaterow = function () {
+			var row = {};
+			row["step_name"] = "Stap 1";
+			row["step_type"] = "Infusion";
+			row["step_temp"] = 62.0;
+			row['step_time'] = 20.0;
+			row['ramp_time'] = 1.0;
+			row['end_temp'] = 62.0;
+			return row;
+		}
+		var stepSource = {
+			localdata: data.steps,
+			datatype: "local",
+			datafields: [
+				{ name: 'step_name', type: 'string' },
+				{ name: 'step_type', type: 'string' },
+				{ 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) {
+				// 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);
+			}
+		};
+		var stepAdapter = new $.jqx.dataAdapter(stepSource);
+		$("#grid").jqxGrid({
+			width: 640,
+			height: 330,
+			source: stepAdapter,
+			theme: theme,
+			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);
+					}
+				});
+				// create new row.
+				$("#addrowbutton").on('click', function () {
+					var datarow = generaterow();
+					var commit = $("#grid").jqxGrid('addrow', null, datarow);
+				});
+				// delete row.
+				$("#deleterowbutton").on('click', function () {
+					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('deleterow', id);
+					}
+				});
+			},
+			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' }
+			]
+		});
+	};
+
 	// initialize the input fields.
 	$("#name").jqxInput({ theme: theme, width: 250, height: 23 });
 	$("#notes").jqxInput({ theme: theme, width: 640, height: 100 });
-	var dataAdapter = new $.jqx.dataAdapter(source);
 	var editrow = -1;
 	// initialize jqxGrid
 	$("#jqxgrid").jqxGrid({
@@ -123,13 +226,14 @@
 			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>");
 			container.append(addButton);
 			statusbar.append(container);
-			addButton.jqxButton({  width: 60, height: 20 });
+			addButton.jqxButton({ theme: theme, width: 120, height: 20 });
 			// add new row.
 			addButton.click(function (event) {
 				editrow = -1;
 				$("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } });
 				$("#name").val('');
 				$("#notes").val('');
+				editsteps('');
 				$("#popupWindow").jqxWindow('open');
 			});
 		},
@@ -137,9 +241,9 @@
 		filtermode: 'excel',
 		columns: [
 			{ text: 'Maish schema', datafield: 'name', width: 250 },
-			{ text: 'Notes', datafield: 'notes', width: 450 },
-			{ text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
-				return "Edit";
+			{ text: 'Opmerkingen', datafield: 'notes' },
+			{ text: 'Wijzig', datafield: 'Edit', width: 120, align: 'center', columntype: 'button', cellsrenderer: function () {
+				return "Wijzig";
 				}, buttonclick: function (row) {
 					// open the popup window when the user clicks a button.
 					editrow = row;
@@ -148,6 +252,7 @@
 					var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
 					$("#name").val(dataRecord.name);
 					$("#notes").val(dataRecord.notes);
+					editsteps(dataRecord);
 					// show the popup window.
 					$("#popupWindow").jqxWindow('open');
 				}
@@ -156,7 +261,14 @@
 	});
 	// initialize the popup window and buttons.
 	$("#popupWindow").jqxWindow({
-		width: 860, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.40
+		width: 860,
+		height: 600,
+		resizable: false,
+		theme: theme,
+		isModal: true,
+		autoOpen: false,
+		cancelButton: $("#Cancel"),
+		modalOpacity: 0.40
 	});
 	$("#popupWindow").on('open', function () {
 		$("#name").jqxInput('selectAll');
@@ -179,10 +291,13 @@
 	$("#Save").click(function () {
 		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()
+				notes: $("#notes").val(),
+				steps: dataRecord.steps
 			};
 			$('#jqxgrid').jqxGrid('updaterow', rowID, row);
 			$("#popupWindow").jqxWindow('hide');

mercurial