The miscs grid rebuild to use a popup editor for the rows.

Thu, 31 Jan 2019 17:16:51 +0100

author
Michiel Broek <mbroek@mbse.eu>
date
Thu, 31 Jan 2019 17:16:51 +0100
changeset 225
ad2e1e3ccaca
parent 224
d3cdcfac81cb
child 226
40e68b18b50d

The miscs grid rebuild to use a popup editor for the rows.

www/includes/db_recipes.php file | annotate | diff | comparison | revisions
www/js/rec_edit.js file | annotate | diff | comparison | revisions
www/rec_edit.php file | annotate | diff | comparison | revisions
--- a/www/includes/db_recipes.php	Thu Jan 31 14:09:54 2019 +0100
+++ b/www/includes/db_recipes.php	Thu Jan 31 17:16:51 2019 +0100
@@ -138,7 +138,7 @@
 			$fermentable .= ',"f_percentage":' . $item['f_percentage'];
 			$fermentable .= ',"f_di_ph":' . $item['f_di_ph'];
 			$fermentable .= ',"f_acid_to_ph_57":' . $item['f_acid_to_ph_57'] . '}';
-			syslog(LOG_NOTICE, $fermentable);
+			//syslog(LOG_NOTICE, $fermentable);
 			$fermentables .= $fermentable;
 		}
 	}
@@ -169,23 +169,34 @@
 			$hop .= ',"h_cohumulone":' . $item['h_cohumulone'];
 			$hop .= ',"h_myrcene":' . $item['h_myrcene'];
 			$hop .= ',"h_total_oil":' . $item['h_total_oil'] . '}';
-			syslog(LOG_NOTICE, $hop);
+			//syslog(LOG_NOTICE, $hop);
 			$hops .= $hop;
 		}
 	}
 	$hops .= ']';
 	$sql .= "', json_hops='" . $hops;
 
+	$miscs = '[';
+	$comma = FALSE;
 	if (isset($_POST['miscs'])) {
 		$array = $_POST['miscs'];
-		foreach($array as $key => $item){ 
-			foreach ($disallowed as $disallowed_key) {
-				unset($array[$key]["$disallowed_key"]);
-			}
+		foreach($array as $key => $item) {
+			if ($comma)
+				$miscs .= ',';
+			$comma = TRUE;
+			$misc  = '{"m_name":"' . str_replace($rescapers,$rreplacements,$item['m_name']);
+			$misc .= '","m_amount":' . $item['m_amount'];
+			$misc .= ',"m_type":' . $item['m_type'];
+			$misc .= ',"m_use_use":' . $item['m_use_use'];
+			$misc .= ',"m_time":' . $item['m_time'];
+			$misc .= ',"m_amount_is_weight":' . $item['m_amount_is_weight'];
+			$misc .= ',"m_cost":' . $item['m_cost'] . '}';
+			syslog(LOG_NOTICE, $misc);
+			$miscs .= $misc;
 		}
-		syslog(LOG_NOTICE, "json_miscs: ".str_replace($rescapers,$rreplacements,json_encode($array)));
-		$sql .= "', json_miscs='" . str_replace($rescapers,$rreplacements,json_encode($array));
 	}
+	$miscs .= ']';
+	$sql .= "', json_miscs='" . $miscs;
 
 	if (isset($_POST['yeasts'])) {
 		$array = $_POST['yeasts'];
--- a/www/js/rec_edit.js	Thu Jan 31 14:09:54 2019 +0100
+++ b/www/js/rec_edit.js	Thu Jan 31 17:16:51 2019 +0100
@@ -335,7 +335,6 @@
 				var row = rows[i];
 				if (row.m_name == name) {
 					found = true;
-					$("#miscGrid").jqxGrid('setcellvalue', i, 'm_weight', amount);
 					$("#miscGrid").jqxGrid('setcellvalue', i, 'm_amount', amount / 1000);
 					break;
 				}
@@ -354,8 +353,9 @@
 								row["m_type"] = record.type;
 								row["m_use_use"] = record.use_use;
 								row["m_time"] = 0;
-								row["m_weight"] = amount;
 								row["m_amount_is_weight"] = record.amount_is_weight;
+								row["m_inventory"] = record.inventory;
+								row["m_avail"] = 1;
 								var commit = $("#miscGrid").jqxGrid('addrow', null, row);
 							}
 						}
@@ -1433,7 +1433,7 @@
 		var fermentableAdapter = new $.jqx.dataAdapter(fermentableSource);
 		$("#fermentableGrid").jqxGrid({
 			width: 1240,
-			height: 400,
+			height: 450,
 			source: fermentableAdapter,
 			theme: theme,
 			selectionmode: 'singlerow',
@@ -1638,7 +1638,7 @@
                 var hopAdapter = new $.jqx.dataAdapter(hopSource);
                 $("#hopGrid").jqxGrid({
                         width: 1240,
-                        height: 400,
+                        height: 510,
                         source: hopAdapter,
                         theme: theme,
                         selectionmode: 'singlerow',
@@ -1821,7 +1821,8 @@
                                 { name: 'm_use_use', type: 'int' },
                                 { name: 'm_time', type: 'float' },
                                 { name: 'm_amount_is_weight', type: 'int' },
-				{ name: 'm_weight', type: 'float' }
+				{ name: 'm_inventory', type: 'float' },
+				{ name: 'm_avail', type: 'int' }
                         ],
                         addrow: function (rowid, rowdata, position, commit) {
                                 commit(true);
@@ -1835,7 +1836,6 @@
 				var data = new Array();
 				for (var i = 0; i < records.length; i++) {
 					var row = records[i];
-					row.m_weight = row.m_amount * 1000;
 					data.push(row);
 					// Initial set water agent values.
 					switch (row.m_name) {
@@ -1892,13 +1892,11 @@
 			},
 		});
                 $("#miscGrid").jqxGrid({
-                        width: 960,
-                        height: 400,
+                        width: 1240,
+                        height: 525,
                         source: miscAdapter,
                         theme: theme,
                         selectionmode: 'singlerow',
-                        editmode: 'selectedcell',
-                        editable: true,
                         localization: getLocalization(),
                         showtoolbar: true,
                         rendertoolbar: function (toolbar) {
@@ -1908,11 +1906,12 @@
                                 container.append('<div style="float: left; margin-left: 165px;" id="maddrowbutton"></div>');
 				container.append('<div style="float: left; margin-left: 10px; margin-top: 5px;">In voorraad:</div>');
 				container.append('<div style="float: left; margin-left: 10px;" id="minstockbutton"></div>');
-                                container.append('<input style="float: left; margin-left: 200px;" id="mdeleterowbutton" type="button" value="Verwijder ingredient" />');
+                                container.append('<input style="float: left; margin-left: 400px;" id="mdeleterowbutton" type="button" value="Verwijder ingredi&euml;nt" />');
                                 // add misc from dropdownlist.
                                 $("#maddrowbutton").jqxDropDownList({
-                                        placeHolder: "Kies ingredient:",
+                                        placeHolder: "Kies ingredi&euml;nt:",
                                         theme: theme,
+					template: "primary",
                                         source: misclist,
                                         displayMember: "name",
                                         width: 150,
@@ -1931,8 +1930,8 @@
                                                 row["m_type"] = datarecord.type;
                                                 row["m_use_use"] = datarecord.use_use;
                                                 row["m_time"] = 0;
-						row["m_weight"] = 0;
                                                 row["m_amount_is_weight"] = datarecord.amount_is_weight;
+						row["m_inventory"] = datarecord.inventory;
                                                 var commit = $("#miscGrid").jqxGrid('addrow', null, row);
                                         }
                                 });
@@ -1942,12 +1941,12 @@
 					misclist.dataBind();
 				});
                                 // delete selected misc.
-                                $("#mdeleterowbutton").jqxButton({ theme: theme, height: 27, width: 150 });
+                                $("#mdeleterowbutton").jqxButton({ template: "danger", theme: theme, height: 27, width: 150 });
                                 $("#mdeleterowbutton").on('click', function () {
                                         var selectedrowindex = $("#miscGrid").jqxGrid('getselectedrowindex');
                                         var rowscount = $("#miscGrid").jqxGrid('getdatainformation').rowscount;
 					var type = $("#miscGrid").jqxGrid('getcellvalue', selectedrowindex, "m_type");
-                                        if (selectedrowindex >= 0 && selectedrowindex < rowscount && type != "Water agent")  {
+                                        if (selectedrowindex >= 0 && selectedrowindex < rowscount && type != 4) {	// Water agent
                                                 var id = $("#miscGrid").jqxGrid('getrowid', selectedrowindex);
                                                 var commit = $("#miscGrid").jqxGrid('deleterow', id);
                                         }
@@ -1957,84 +1956,64 @@
 				$('#jqxTabs').jqxTabs('next');
 			},
 			columns: [
-                                { text: 'Ingredient', editable: false, datafield: 'm_name' },
-                                { text: 'Type', editable: false, width: 120, align: 'center', cellsalign: 'center', datafield: 'm_type' },
-                                { text: 'Gebruik', width: 110, align: 'center', cellsalign: 'center', datafield: 'm_use_use', columntype: 'dropdownlist',
-				  createeditor: function (row, column, editor) {
-					var srcUseUse = [ "Mash", "Boil", "Primary", "Secondary", "Bottling" ];
-					editor.jqxDropDownList({ autoDropDownHeight: true, source: srcUseUse });
-				  },
-				  cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
-					var type = $("#miscGrid").jqxGrid('getcellvalue', row, "m_type");
-					if (type == "Water agent")
-						return oldvalue;
+                                { text: 'Ingredient', datafield: 'm_name' },
+                                { text: 'Type', width: 140, datafield: 'm_type',
+				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
+					return "<div style='margin: 4px;'>" + MiscTypeData[value].nl + "</div>";
+				  }
+			       	},
+                                { text: 'Gebruik', width: 140, datafield: 'm_use_use',
+				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
+					return "<div style='margin: 4px;'>" + MiscUseData[value].nl + "</div>";
 				  }
 			       	},
-				{ datafield: 'm_amount_is_weight', hidden: true },	// We need to declare this column
-				{ datafield: 'm_amount', hidden: true },		// We need to declare this column
-                                { text: 'Hoeveelheid', datafield: 'm_weight', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'f2',
-                                  columntype: 'numberinput',
+                                { text: 'Tijd', datafield: 'm_time', width: 90, align: 'right',
+				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
+					if (rowdata.m_use_use == 2) {	// Boil
+						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f0")+" min.</div>";
+					} else if ((rowdata.m_use_use == 3) || (rowdata.m_use_use == 4)) {	// Primary or Secondary
+						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value/1440, "f0")+" dagen</div>";
+					} else {
+						var tijd = 0;
+						return "<div style='margin: 4px;'> </div>";
+					}
+				  },
+                                },
+				{ text: 'Hoeveel', datafield: 'm_amount', width: 110, align: 'right',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
 					var vstr = rowdata.m_amount_is_weight ? "gr":"ml";
-					return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value,"f2")+" "+vstr+"</div>";
+					return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value * 1000,"f2")+" "+vstr+"</div>";
 				  },
-                                  validation: function (cell, value) {
-					var high = parseFloat(dataRecord.boil_size) * 1000;
-                                        if (value < 0 || value > high) {
-                                                return { result: false, message: "Hoeveelheid moet tussen 0 en "+high+" zijn" };
-                                        }
-                                        return true;
-                                  },
-				  initeditor: function (row, cellvalue, editor) {
-					editor.jqxNumberInput({
-						inputMode: 'simple', min: 0, max: parseFloat(dataRecord.boil_size) * 1000,
-						decimalDigits: 2, spinButtons: false
-					});
-				  },
-				  cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
-					var type = $("#miscGrid").jqxGrid('getcellvalue', row, "m_type");
-					if (type == "Water agent")
-						return oldvalue;
-				  }
-                                },
-                                { text: 'Tijd', datafield: 'm_time', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f0',
-                                  columntype: 'numberinput',
+				},
+				{ text: 'Voorraad', datafield: 'm_inventory', width: 110, align: 'right',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					if (rowdata.m_use_use == 'Boil') {
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f0")+" m</div>";
-					} else if (rowdata.m_use_use == 'Secondary') {
-						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f0")+" d</div>";
-					} else {
-						var tijd = 0;
-						return "<div style='margin: 4px;' class='jqx-right-align'> </div>";
-					}
-				  },
-				  initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
-					editor.jqxNumberInput({ decimalDigits: 0, digits: 3, min: 0, max: parseFloat(dataRecord.boil_time) });
+					var vstr = rowdata.m_amount_is_weight ? "gr":"ml";
+					return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value * 1000,"f2")+" "+vstr+"</div>";
 				  },
-				  cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
-					var use = $("#miscGrid").jqxGrid('getcellvalue', row, "m_use_use");
-					if ((use != "Boil") && (use != "Secondary"))
-						return oldvalue;
-				  },
-                                  validation: function (cell, value) {
-					var high = parseFloat(dataRecord.boil_time);
-                                        if (value < 0 || value > high ) {
-                                                return { result: false, message: "De tijd moet 0-"+high+" zijn" };
-                                        }
-                                        return true;
-                                  }
-                                }
+				},
+				{ text: 'Wijzig', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
+					return "Wijzig";
+					}, buttonclick: function (row) {
+						miscRow = row;
+						miscData = $("#miscGrid").jqxGrid('getrowdata', miscRow);
+						if (miscData.m_amount_is_weight)
+							$("#wm_pmpt_amount").html("Gewicht gram:");
+						else
+							$("#wm_pmpt_amount").html("Volume ml:");
+						$("#wm_name").val(miscData.m_name);
+						$("#wm_amount").val(miscData.m_amount * 1000);
+						if ((miscData.m_use_use == 3) || (miscData.m_use_use == 4))	// Primary or Secondary
+							$("#wm_time").val(miscData.m_time / 1440);
+						else
+							$("#wm_time").val(miscData.m_time);
+						$("#wm_use_use").val(miscData.m_use_use);
+						// show the popup window.
+						if (miscData.m_type != 4)
+							$("#popupMisc").jqxWindow('open');
+					}
+				}
                         ]
                 });
-		$("#miscGrid").on('cellendedit', function (event) {
-			var args = event.args;
-			console.log("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (args.rowindex) + ", Value: " + args.value);
-			$("#miscGrid").jqxGrid('setcellvalue', args.rowindex, args.datafield, args.value);
-			if (args.datafield == 'm_weight') {
-				$("#miscGrid").jqxGrid('setcellvalue', args.rowindex, 'm_amount', parseFloat(args.value) / 1000);
-			}
-		});
         };
 
 	// Inline yeasts editor
@@ -2735,7 +2714,6 @@
 			parseFloat(rowdata.h_alpha), $("#ibu_method").val()
 		);
 		rowdata.h_amount = amount;
-//		$("#hopGrid").jqxGrid('setcellvalue', hopRow, 'h_amount', amount);
 		calcIBUs();
 	});
 	$("#wh_ibu").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 90, height: 23, decimalDigits: 1, readOnly: true });
@@ -2803,6 +2781,102 @@
 	});
 
 	// Tab 4, Diversen
+	$("#popupMisc").jqxWindow({
+		width: 800,
+		height: 275,
+		position: { x: 230, y: 100 },
+		resizable: false,
+		theme: theme,
+		isModal: true,
+		autoOpen: false,
+		cancelButton: $("#MiscReady"),
+		modalOpacity: 0.40
+	});
+	$("#MiscReady").jqxButton({ template: "success", width: '90px', theme: theme });
+	$("#MiscReady").click(function () {
+		$("#miscGrid").jqxGrid('sortby', 'm_use_use', 'asc');
+	});
+	$("#wm_name").jqxInput({ theme: theme, width: 320, height: 23 });
+	$("#wm_instock").jqxCheckBox({ theme: theme, height: 23 });
+	$("#wm_instock").on('change', function (event) {
+		miscinstock = event.args.checked;
+		misclist.dataBind();
+	});
+	$("#wm_select").jqxDropDownList({
+		placeHolder: "Kies ingredi&euml;nt:",
+		theme: theme,
+		source: misclist,
+		displayMember: "name",
+		width: 150,
+		height: 23,
+		dropDownWidth: 500,
+		dropDownHeight: 500
+	});
+	$("#wm_select").on('select', function (event) {
+		if (event.args) {
+			var index = event.args.index;
+			var datarecord = misclist.records[index];
+			var rowdata = $("#miscGrid").jqxGrid('getrowdata', miscRow);
+			$("#wm_name").val(datarecord.name);
+			rowdata.m_name = datarecord.name;
+			rowdata.m_cost = datarecord.cost;
+			rowdata.m_type = datarecord.type;
+			rowdata.m_use_use = datarecord.use_use;
+			rowdata.m_amount_is_weight = datarecord.amount_is_weight;
+			rowdata.m_inventory = datarecord.inventory;
+		}
+	});
+	$("#wm_amount").jqxNumberInput( Spin1dec1 );
+	$('#wm_amount').on('change', function (event) {
+		console.log("amount changed: "+event.args.value);
+		var amount = parseFloat(event.args.value) / 1000;
+		var rowdata = $("#miscGrid").jqxGrid('getrowdata', miscRow);
+		rowdata.m_amount = amount;
+	});
+	$("#wm_time").jqxNumberInput( PosInt );
+	$("#wm_time").on('change', function (event) {
+		console.log("time changed: "+event.args.value);
+		var rowdata = $("#miscGrid").jqxGrid('getrowdata', miscRow);
+		var newtime = parseFloat(event.args.value);
+
+		if (rowdata.m_use_use == 2) {	// Boil
+			if (newtime > parseFloat($("#boil_time").jqxNumberInput('decimal'))) {
+				newtime = parseFloat($("#boil_time").jqxNumberInput('decimal'));
+				$("#wm_time").val(newtime);
+			}
+		        rowdata.m_time = newtime;
+		} else if ((rowdata.m_use_use == 3) || (rowdata.m_use_use == 4)) {	// Primary or Secondary
+			if (newtime > 21) {
+				newtime = 21;
+				$("#wm_time").val(newtime);
+			}
+			rowdata.m_time = newtime * 1440;
+		}
+	});
+	$("#wm_use_use").jqxDropDownList({
+		theme: theme,
+		source: MiscUseAdapter,
+		valueMember: 'id',
+		displayMember: 'nl',
+		width: 180,
+		height: 23,
+		autoDropDownHeight: true,
+		dropDownVerticalAlignment: 'top'
+	});
+	$("#wm_use_use").on('select', function (event) {
+		if (event.args) {
+			var index = event.args.index;
+			var rowdata = $("#miscGrid").jqxGrid('getrowdata', miscRow);
+			rowdata.m_use_use = index;
+			if ((index == 2) || (index == 3) || (index == 4)) {	// Boil, Primary or Secondary
+				$("#wm_time").jqxNumberInput({ spinButtons: true, readOnly: false, width: 110 });
+			} else {
+				rowdata.m_time = 0;
+				$("#wm_time").jqxNumberInput({ spinButtons: false, readOnly: true, width: 90 });
+				$("#wm_time").val(0);
+			}
+		}
+	});
 
 	// Tab 5, Gist
 
--- a/www/rec_edit.php	Thu Jan 31 14:09:54 2019 +0100
+++ b/www/rec_edit.php	Thu Jan 31 17:16:51 2019 +0100
@@ -151,10 +151,8 @@
      <div> <!-- tab misc -->
       <div style="overflow: hidden;">
        <table style="width: 100%;">
-        <tr>
-         <td align="right" style="vertical-align: top;">Diversen:</td>
-         <td align="left" colspan="3"><div id="miscGrid">Graat</div></td>
-        </tr>
+        <tr><td>&nbsp;</td></tr>
+        <tr><td align="center"><div id="miscGrid"></div></td></tr>
        </table>
       </div>
      </div> <!-- tab misc -->
@@ -416,6 +414,43 @@
     </div>
    </div>
 
+   <div id="popupMisc">
+    <div>Wijzig diversen detail.</div>
+    <div style="overflow: hidden;">
+     <table style="width: 100%;">
+      <tr>
+       <td align="right" style="vertical-align: top;">Ingredi&euml;nt naam:</td>
+       <td style="padding: 3px;"><input readonly="1" id="wm_name" /></div></td>
+      </tr>
+      <tr>
+       <td align="right" style="vertical-align: top;">Ander ingredi&euml;nt:</td>
+       <td style="padding: 3px;"><div style='overflow: hidden;'>
+        <div style="float: left;" id="wm_select"></div>
+        <div style="float: left; margin-left: 10px;">In voorraad:</div>
+        <div style="float: left; margin-left: 10px;" id="wm_instock"></div></div>
+       </td>
+      </tr>
+      <tr>
+       <td align="right" style="vertical-align: top;"><div id="wm_pmpt_amount">Hoeveelheid:</div></td>
+       <td style="padding: 3px;"><div id="wm_amount"></div></td>
+      </tr>
+      <tr>
+       <td align="right" style="vertical-align: top;"><div id="wm_pmpt_time">Tijdsduur:</div></td>
+       <td style="padding: 3px;"><div id="wm_time"></div></td>
+      </tr>
+      <tr>
+       <td align="right" style="vertical-align: top;">Gebruik tijdens:</td>
+       <td style="padding: 3px;"><div id="wm_use_use"></div></td>
+      </tr>
+      <tr>
+       <td style="padding-top: 30px;" colspan="2" align="center">
+        <input id="MiscReady" type="button" value="Sla op" />
+       </td>
+      </tr>
+     </table>
+    </div>
+   </div>
+
 <?php
 confirm_delete();
 page_footer();

mercurial