Added total cost values to the fermenter and hop editor screens.

Wed, 23 Jan 2019 22:53:24 +0100

author
Michiel Broek <mbroek@mbse.eu>
date
Wed, 23 Jan 2019 22:53:24 +0100
changeset 199
dad62ec9af18
parent 198
f0ec83e1e01f
child 200
7b2f11652d67

Added total cost values to the fermenter and hop editor screens.

www/inv_fermentables.php file | annotate | diff | comparison | revisions
www/inv_hops.php file | annotate | diff | comparison | revisions
www/js/inv_fermentables.js file | annotate | diff | comparison | revisions
www/js/inv_hops.js file | annotate | diff | comparison | revisions
--- a/www/inv_fermentables.php	Wed Jan 23 22:36:31 2019 +0100
+++ b/www/inv_fermentables.php	Wed Jan 23 22:53:24 2019 +0100
@@ -13,7 +13,7 @@
    <div id="popupWindow">
     <div>Wijzig vergistbaar product</div>
     <div style="overflow: hidden;">
-     <table>
+     <table style="width: 100%;">
       <tr>
        <td align="right" style="vertical-align: top;">Product naam:</td>
        <td align="left" colspan="3" style="vertical-align: top;"><input id="name" /></td>
@@ -79,20 +79,24 @@
       <tr>
        <td align="right" style="vertical-align: top;">Voorraad:</td>
        <td align="left"><div id="inventory"></div></td>
+       <td align="right" style="vertical-align: top;">Productie datum:</td>
+       <td align="left" style="vertical-align: top;"><div id="production_date"></div></td>
+      </tr>
+      <tr>
        <td align="right" style="vertical-align: top;">Prijs per kg:</td>
        <td align="left"><div id="cost"></div></td>
-      </tr>
-      <tr>
-       <td align="right" style="vertical-align: top;">Productie datum:</td>
-       <td align="left" style="vertical-align: top;"><div id="production_date"></div></td>
        <td align="right" style="vertical-align: top;">Gebruik voor datum:</td>
        <td align="left" style="vertical-align: top;"><div id="tht_date"></div></td>
       </tr>
       <tr>
-       <td style="padding-top: 40px;" align="right"><input type="button" id="Delete" value="Verwijder" /></td>
+       <td align="right" style="vertical-align: top;">Waarde voorraad:</td>
+       <td align="left" colspan="3"><div id="totval"></div></td>
+      </tr>
+      <tr>
+       <td style="padding-top: 15px;" align="right"><input type="button" id="Delete" value="Verwijder" /></td>
        <td align="right"></td>
        <td align="right"></td>
-       <td style="padding-top: 40px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Sla op" /><input id="Cancel" type="button" value="Annuleer" /></td>
+       <td style="padding-top: 15px;" align="left"><input style="margin-right: 5px;" type="button" id="Save" value="Sla op" /><input id="Cancel" type="button" value="Annuleer" /></td>
       </tr>
      </table>
     </div>
--- a/www/inv_hops.php	Wed Jan 23 22:36:31 2019 +0100
+++ b/www/inv_hops.php	Wed Jan 23 22:53:24 2019 +0100
@@ -13,7 +13,7 @@
    <div id="popupWindow">
     <div>Wijzig hop.</div>
     <div style="overflow: hidden;">
-     <table>
+     <table style="width: 100%;">
       <tr>
        <td align="right" style="vertical-align: top;">Hop naam:</td>
        <td align="left" colspan="3" style="vertical-align: top;"><input id="name" /></td>
@@ -73,8 +73,13 @@
        <td align="left" style="vertical-align: top;"><input id="beta" /></td>
       </tr>
       <tr>
+       <td align="right" style="vertical-align: top;">Waarde voorraad:</td>
+       <td align="left"><div id="totval"></div></td>
        <td align="right" style="vertical-align: top;">Oogst datum:</td>
        <td align="left" style="vertical-align: top;"><div id="production_date"></div></td>
+      </tr>
+      <tr>
+       <td colspan="2"> </td>
        <td align="right" style="vertical-align: top;">Gebruik voor datum:</td>
        <td align="left" style="vertical-align: top;"><div id="tht_date"></div></td>
       </tr>
@@ -82,7 +87,7 @@
        <td style="padding-top: 40px;" align="right"><input type="button" id="Delete" value="Verwijder" /></td>
        <td align="right"></td>
        <td align="right"></td>
-       <td style="padding-top: 40px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Sla op" /><input id="Cancel" type="button" value="Annuleer" /></td>
+       <td style="padding-top: 40px;" align="left"><input style="margin-right: 5px;" type="button" id="Save" value="Sla op" /><input id="Cancel" type="button" value="Annuleer" /></td>
       </tr>
      </table>
     </div>
--- a/www/js/inv_fermentables.js	Wed Jan 23 22:36:31 2019 +0100
+++ b/www/js/inv_fermentables.js	Wed Jan 23 22:53:24 2019 +0100
@@ -43,6 +43,14 @@
 
 
 $(document).ready(function () {
+
+	var dataRecord = {};
+
+	function calcTotal(cost, inventory) {
+
+		$('#totval').val(cost * inventory);
+	}
+
 	var url = "includes/db_inventory_fermentables.php";
 	// prepare the data
 	var source = {
@@ -178,6 +186,9 @@
 	$("#production_date").jqxDateTimeInput( Dateopts );
 	$("#cost").jqxNumberInput( Spin2dec1 );
 	$("#tht_date").jqxDateTimeInput( Dateopts );
+	$("#totval").jqxNumberInput( Spin2dec1 );
+	$("#totval").jqxNumberInput({ width: 90, readOnly: true, spinButtons: false });
+
 	var dataAdapter = new $.jqx.dataAdapter(source);
 	var editrow = -1;
 	// initialize jqxGrid
@@ -263,7 +274,7 @@
 					editrow = row;
 					$("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } });
 					// get the clicked row's data and initialize the input fields.
-					var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
+					dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
 					$("#name").val(dataRecord.name);
 					$("#type").val(dataRecord.type);
 					$("#yield").val(dataRecord.yield);
@@ -288,12 +299,23 @@
 					$("#cost").val(dataRecord.cost);
 					$("#production_date").val(dataRecord.production_date);
 					$("#tht_date").val(dataRecord.tht_date);
+					calcTotal(dataRecord.cost, dataRecord.inventory);
 					// show the popup window.
 					$("#popupWindow").jqxWindow('open');
 				}
 			}
 		]
 	});
+
+	$("#cost").on('change', function (event) {
+		dataRecord.cost = parseFloat(event.args.value);
+		calcTotal(dataRecord.cost, dataRecord.inventory);
+	});
+	$("#inventory").on('change', function (event) {
+		dataRecord.inventory = parseFloat(event.args.value);
+		calcTotal(dataRecord.cost, dataRecord.inventory);
+	});
+
 	// initialize the popup window and buttons.
 	$("#popupWindow").jqxWindow({
 		width: 1050,
--- a/www/js/inv_hops.js	Wed Jan 23 22:36:31 2019 +0100
+++ b/www/js/inv_hops.js	Wed Jan 23 22:53:24 2019 +0100
@@ -43,6 +43,14 @@
 
 
 $(document).ready(function () {
+
+	var dataRecord = {};
+
+	function calcTotal(cost, inventory) {
+
+		$('#totval').val(cost * (inventory / 1000));
+	}
+
 	var url = "includes/db_inventory_hops.php";
 	// prepare the data
 	var source = {
@@ -163,6 +171,9 @@
 	$("#cost").jqxNumberInput( Spin2dec1 );
 	$("#tht_date").jqxDateTimeInput( Dateopts );
 	$("#total_oil").jqxNumberInput( Perc1dec1 );
+	$("#totval").jqxNumberInput( Spin2dec1 );
+	$("#totval").jqxNumberInput({ width: 90, readOnly: true, spinButtons: false });
+
 	var dataAdapter = new $.jqx.dataAdapter(source);
 	var editrow = -1;
 	// initialize jqxGrid
@@ -234,7 +245,7 @@
 					editrow = row;
 					$("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } });
 					// get the clicked row's data and initialize the input fields.
-					var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
+					dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
 					$("#name").val(dataRecord.name);
 					$("#alpha").val(dataRecord.alpha);
 					$("#beta").val(dataRecord.beta);
@@ -254,12 +265,23 @@
 					$("#production_date").val(dataRecord.production_date);
 					$("#tht_date").val(dataRecord.tht_date);
 					$("#total_oil").val(dataRecord.total_oil);
+					calcTotal(dataRecord.cost, dataRecord.inventory);
 					// show the popup window.
 					$("#popupWindow").jqxWindow('open');
 				}
 			}
 		]
 	});
+
+	$("#cost").on('change', function (event) {
+		dataRecord.cost = parseFloat(event.args.value);
+		calcTotal(dataRecord.cost, dataRecord.inventory);
+	});
+	$("#inventory").on('change', function (event) {
+		dataRecord.inventory = parseFloat(event.args.value);
+		calcTotal(dataRecord.cost, dataRecord.inventory);
+	});
+
 	// initialize the popup window and buttons.
 	$("#popupWindow").jqxWindow({
 		width: 1050,

mercurial