Hops database bool to int types. Dropdown lists are using tables with indexes. Dropdown lists display in Dutch. Save and delete in the database now use POST instead of GET. Removed the useat field. Redesigned the web page. Code cleanup.

Tue, 22 Jan 2019 22:46:58 +0100

author
Michiel Broek <mbroek@mbse.eu>
date
Tue, 22 Jan 2019 22:46:58 +0100
changeset 196
531d5458782f
parent 195
2ac491548d8d
child 197
63174cff2cc1

Hops database bool to int types. Dropdown lists are using tables with indexes. Dropdown lists display in Dutch. Save and delete in the database now use POST instead of GET. Removed the useat field. Redesigned the web page. Code cleanup.

README.design file | annotate | diff | comparison | revisions
www/import/from_brouwhulp.php file | annotate | diff | comparison | revisions
www/includes/db_inventory_hops.php file | annotate | diff | comparison | revisions
www/inv_hops.php file | annotate | diff | comparison | revisions
www/js/global.js file | annotate | diff | comparison | revisions
www/js/inv_hops.js file | annotate | diff | comparison | revisions
--- a/README.design	Tue Jan 22 20:27:45 2019 +0100
+++ b/README.design	Tue Jan 22 22:46:58 2019 +0100
@@ -34,8 +34,8 @@
 Database inventaris:		Werking	Maten	Index/Strings Bool/Ints	Utf-8	POST
 ----------------------------	-------	-------	------------- ---------	-----	----
 inventory_equipments		Ok.	Ok.
-inventory_fermentables		Ok.	Ok.		Ok.	Ok.		Ok.
-inventory_hops			Ok.	Ok.
+inventory_fermentables		Ok.	Ok.		Ok.	Ok.	Ok.	Ok.
+inventory_hops			Ok.	Ok.		Ok.	Ok.	Ok.	Ok.
 inventory_miscs			Ok.
 inventory_suppliers		Ok.	Ok.
 inventory_water			Ok.	Ok.
--- a/www/import/from_brouwhulp.php	Tue Jan 22 20:27:45 2019 +0100
+++ b/www/import/from_brouwhulp.php	Tue Jan 22 22:46:58 2019 +0100
@@ -165,9 +165,25 @@
 			$sql .= "', myrcene='" . floatval($hop->MYCRENE);
 		if ($hop->HSI)
 			$sql .= "', hsi='" . floatval($hop->HSI);
-		$sql .= "', useat='Boil";	// brouwhulp says Aroma always :)
-		$sql .= "', type='" . $hop->TYPE;
-		$sql .= "', form='" . $hop->FORM;
+
+		if ($hop->TYPE == 'Bittering')
+			$sql .= "', type='0";
+		else if ($hop->TYPE == 'Aroma')
+			$sql .= "', type='1";
+		else if ($hop->TYPE == 'Both')
+			$sql .= "', type='2";
+		else
+			echo "Unknown TYPE " . $hop->TYPE . PHP_EOL;
+
+		if ($hop->FORM == 'Pellet')
+			$sql .= "', form='0";
+		else if ($hop->FORM == 'Plug')
+			$sql .= "', form='1";
+		else if ($hop->FORM == 'Leaf')
+			$sql .= "', form='2";
+		else
+			echo "Unknown FORM " . $hop->FORM . PHP_EOL;
+
 		$sql .= "', notes='" . mysqli_real_escape_string($db, $hop->NOTES);
 		$sql .= "', origin='" . mysqli_real_escape_string($db, $hop->ORIGIN);
 		$sql .= "', substitutes='" . mysqli_real_escape_string($db, $hop->SUBSTITUTES);
@@ -178,6 +194,10 @@
 			$sql .= "', cost='" . floatval($hop->COST);
 		if ($hop->TOTAL_OIL)
 			$sql .= "', total_oil='" . floatval($hop->TOTAL_OIL);
+		if ($hop->HARVEST_DATE) {
+			$date = substr($hop->HARVEST_DATE, 6, 4).'-'.substr($hop->HARVEST_DATE, 3, 2).'-'.substr($hop->HARVEST_DATE, 0, 2);
+			$sql .= "', production_date='" . $date;
+		}
 		$sql .= "';";
 		if (! $result = mysqli_query($db, $sql)) {
 			printf("Error: %s\n", mysqli_error($db));
--- a/www/includes/db_inventory_hops.php	Tue Jan 22 20:27:45 2019 +0100
+++ b/www/includes/db_inventory_hops.php	Tue Jan 22 22:46:58 2019 +0100
@@ -11,81 +11,74 @@
 }
 mysqli_set_charset($connect, "utf8" );
 
-// get data and store in a json array
-$query = "SELECT * FROM inventory_hops ORDER BY origin,name";
-if (isset($_GET['insert'])) {
-	// INSERT COMMAND
-	$sql  = "INSERT INTO `inventory_hops` SET name='" . mysqli_real_escape_string($connect, $_GET['name']);
-	$sql .= "', alpha='" . $_GET['alpha'];
-	$sql .= "', beta='" . $_GET['beta'];
-	$sql .= "', humulene='" . $_GET['humulene'];
-	$sql .= "', caryophyllene='" . $_GET['caryophyllene'];
-	$sql .= "', cohumulone='" . $_GET['cohumulone'];
-	$sql .= "', myrcene='" . $_GET['myrcene'];
-	$sql .= "', hsi='" . $_GET['hsi'];
-	$sql .= "', type='" . $_GET['type'];
-	$sql .= "', form='" . $_GET['form'];
-	$sql .= "', notes='" . mysqli_real_escape_string($connect, $_GET['notes']);
-	$sql .= "', origin='" . mysqli_real_escape_string($connect, $_GET['origin']);
-	$sql .= "', substitutes='" . mysqli_real_escape_string($connect, $_GET['substitutes']);
-	($_GET['always_on_stock'] == 'true') ? $sql .= "', always_on_stock='1" : $sql .= "', always_on_stock='0";
-	$sql .= "', inventory='" . floatval($_GET['inventory']) / 1000.0;
-	$sql .= "', cost='" . $_GET['cost'];
-	$sql .= "', production_date='" . $_GET['production_date'];
-	$sql .= "', tht_date='" . $_GET['tht_date'];
-	$sql .= "', total_oil='" . $_GET['total_oil'];
-	$sql .= "';";
+if (isset($_POST['insert']) || isset($_POST['update'])) {
+	if (isset($_POST['insert'])) {
+		$sql  = "INSERT INTO `inventory_hops` SET ";
+	}
+	if (isset($_POST['update'])) {
+		$sql  = "UPDATE `inventory_hops` SET ";
+	}
+
+	$sql .= "name='" . mysqli_real_escape_string($connect, $_POST['name']);
+	$sql .= "', alpha='" . $_POST['alpha'];
+	$sql .= "', beta='" . $_POST['beta'];
+	$sql .= "', humulene='" . $_POST['humulene'];
+	$sql .= "', caryophyllene='" . $_POST['caryophyllene'];
+	$sql .= "', cohumulone='" . $_POST['cohumulone'];
+	$sql .= "', myrcene='" . $_POST['myrcene'];
+	$sql .= "', hsi='" . $_POST['hsi'];
+	$sql .= "', type='" . $_POST['type'];
+	$sql .= "', form='" . $_POST['form'];
+	$sql .= "', notes='" . mysqli_real_escape_string($connect, $_POST['notes']);
+	$sql .= "', origin='" . mysqli_real_escape_string($connect, $_POST['origin']);
+	$sql .= "', substitutes='" . mysqli_real_escape_string($connect, $_POST['substitutes']);
+	($_POST['always_on_stock'] == 'true') ? $sql .= "', always_on_stock='1" : $sql .= "', always_on_stock='0";
+	$sql .= "', inventory='" . floatval($_POST['inventory']) / 1000.0;
+	$sql .= "', cost='" . $_POST['cost'] . "'";
+	if ($_POST['production_date'] == '')
+		$sql .= ", production_date=NULL";
+	else
+		$sql .= ", production_date='" . $_POST['production_date'] . "'";
+	if ($_POST['tht_date'] == '')
+		$sql .= ", tht_date=NULL";
+	else
+		$sql .= ", tht_date='" . $_POST['tht_date'] . "'";
+	$sql .= ", total_oil='" . $_POST['total_oil'];
+	if (isset($_POST['insert'])) {
+		$sql .= "';";
+	}
+	if (isset($_POST['update'])) {
+		$sql .= "' WHERE record='" . $_POST['record'] . "';";
+	}
+	syslog(LOG_NOTICE, $sql);
+
 	$result = mysqli_query($connect, $sql);
 	if (! $result) {
 		syslog(LOG_NOTICE, "db_inventory_hops: ".$sql." result: ".mysqli_error($connect));
 	} else {
-		syslog(LOG_NOTICE, "db_inventory_hops: inserted ".$_GET['name']);
+		if (isset($_POST['update'])) {
+			syslog(LOG_NOTICE, "db_inventory_hops: updated record ".$_POST['record']);
+		} else {
+			$lastid = mysqli_insert_id($connect);
+			syslog(LOG_NOTICE, "db_inventory_hops: inserted record ".$lastid);
+		}
 	}
 	echo $result;
 
-} else if (isset($_GET['update'])) {
-	// UPDATE COMMAND
-	$sql  = "UPDATE `inventory_hops` SET name='" . mysqli_real_escape_string($connect, $_GET['name']);
-	$sql .= "', alpha='" . $_GET['alpha'];
-	$sql .= "', beta='" . $_GET['beta'];
-	$sql .= "', humulene='" . $_GET['humulene'];
-	$sql .= "', caryophyllene='" . $_GET['caryophyllene'];
-	$sql .= "', cohumulone='" . $_GET['cohumulone'];
-	$sql .= "', myrcene='" . $_GET['myrcene'];
-	$sql .= "', hsi='" . $_GET['hsi'];
-	$sql .= "', type='" . $_GET['type'];
-	$sql .= "', form='" . $_GET['form'];
-	$sql .= "', notes='" . mysqli_real_escape_string($connect, $_GET['notes']);
-	$sql .= "', origin='" . mysqli_real_escape_string($connect, $_GET['origin']);
-	$sql .= "', substitutes='" . mysqli_real_escape_string($connect, $_GET['substitutes']);
-	($_GET['always_on_stock'] == 'true') ? $sql .= "', always_on_stock='1" : $sql .= "', always_on_stock='0";
-	$sql .= "', inventory='" . floatval($_GET['inventory']) / 1000.0;
-	$sql .= "', cost='" . $_GET['cost'];
-	$sql .= "', production_date='" . $_GET['production_date'];
-	$sql .= "', tht_date='" . $_GET['tht_date'];
-	$sql .= "', total_oil='" . $_GET['total_oil'];
-	$sql .= "' WHERE record='" . $_GET['record'] . "';";
+} else if (isset($_POST['delete'])) {
+	// DELETE COMMAND
+	$sql = "DELETE FROM `inventory_hops` WHERE record='".$_POST['record']."';";
 	$result = mysqli_query($connect, $sql);
 	if (! $result) {
 		syslog(LOG_NOTICE, "db_inventory_hops: ".$sql." result: ".mysqli_error($connect));
 	} else {
-		syslog(LOG_NOTICE, "db_inventory_hops: updated record ".$_GET['record']);
-	}
-	echo $result;
-
-} else if (isset($_GET['delete'])) {
-	// DELETE COMMAND
-	$sql = "DELETE FROM `inventory_hops` WHERE record='".$_GET['record']."';";
-	$result = mysqli_query($connect, $sql);
-	if (! $result) {
-		syslog(LOG_NOTICE, "db_inventory_hops: ".$sql." result: ".mysqli_error($connect));
-	} else {
-		syslog(LOG_NOTICE, "db_inventory_hops: deleted record ".$_GET['record']);
+		syslog(LOG_NOTICE, "db_inventory_hops: deleted record ".$_POST['record']);
 	}
 	echo $result;
 
 } else {
 	// SELECT COMMAND
+	$query = "SELECT * FROM inventory_hops ORDER BY origin,name";
 	$result = mysqli_query($connect, $query) or die("SQL Error 1: " . mysqli_error($connect));
 	while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
 		$hops[] = array(
--- a/www/inv_hops.php	Tue Jan 22 20:27:45 2019 +0100
+++ b/www/inv_hops.php	Tue Jan 22 22:46:58 2019 +0100
@@ -19,54 +19,58 @@
        <td align="left" colspan="3" style="vertical-align: top;"><input id="name" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Alphazuur %:</td>
-       <td align="left" style="vertical-align: top;"><input id="alpha" /></td>
-       <td align="right" style="vertical-align: top;">Betazuur %:</td>
-       <td align="left" style="vertical-align: top;"><input id="beta" /></td>
+       <td align="right" style="vertical-align: top;">Opmerkingen:</td>
+       <td align="left" colspan="3"><textarea id="notes"></textarea></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Humuleen %:</td>
-       <td align="left" style="vertical-align: top;"><input id="humulene" /></td>
-       <td align="right" style="vertical-align: top;">Caryophylleen %:</td>
-       <td align="left" style="vertical-align: top;"><input id="caryophyllene" /></td>
-      </tr>
-      <tr>
-       <td align="right" style="vertical-align: top;">Cohumuloon %:</td>
-       <td align="left"  style="vertical-align: top;"><input id="cohumulone" /></td>
+       <td align="right" style="vertical-align: top;">Type hop:</td>
+       <td align="left"><div id="type"></div></td>
        <td align="right" style="vertical-align: top;">Totaal oliegehalte %:</td>
        <td align="left"  colspan="3" style="vertical-align: top;"><input id="total_oil" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Myrceen %:</td>
-       <td align="left" style="vertical-align: top;"><input id="myrcene" /></td>
-       <td align="right" style="vertical-align: top;">Hop stabiliteitindex:</td>
-       <td align="left" style="vertical-align: top;"><input id="hsi" /></td>
+       <td align="right" style="vertical-align: top;">Herkomst:</td>
+       <td align="left" style="vertical-align: top;"><input id="origin" /></td>
+       <td align="right" style="vertical-align: top;">Humuleen %:</td>
+       <td align="left" style="vertical-align: top;"><input id="humulene" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Soort:</td>
-       <td align="left"><div id="type"></div></td>
-       <td align="right" style="vertical-align: top;">Vorm:</td>
-       <td align="left"><div id="form"></div></td>
+       <td align="right" style="vertical-align: top;">Vervangen door:</td>
+       <td align="left" style="vertical-align: top;"><input id="substitutes" /></td>
+       <td align="right" style="vertical-align: top;">Caryophylleen %:</td>
+       <td align="left" style="vertical-align: top;"><input id="caryophyllene" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Herkomst:</td>
-       <td align="left" style="vertical-align: top;"><input id="origin" /></td>
-       <td align="right" style="vertical-align: top;">Vervangen door:</td>
-       <td align="left" style="vertical-align: top;"><input id="substitutes" /></td>
+       <td align="right" style="vertical-align: top;">Hop stabiliteitindex:</td>
+       <td align="left" style="vertical-align: top;"><input id="hsi" /></td>
+       <td align="right" style="vertical-align: top;">Myrceen %:</td>
+       <td align="left" style="vertical-align: top;"><input id="myrcene" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Altijd op voorraad::</td>
-       <td align="left" colspan="3"><div id="always_on_stock"></div></td>
+       <td colspan="2"> </td>
+       <td align="right" style="vertical-align: top;">Cohumuloon %:</td>
+       <td align="left"  style="vertical-align: top;"><input id="cohumulone" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Opmerkingen:</td>
-       <td align="left" colspan="3"><textarea id="notes"></textarea></td>
+       <td colspan="4"><hr></td>
       </tr>
       <tr>
        <td align="right" style="vertical-align: top;">Voorraad in gram:</td>
        <td align="left"><div id="inventory"></div></td>
+       <td align="right" style="vertical-align: top;">Vorm van de voorraad:</td>
+       <td align="left"><div id="form"></div></td>
+      </tr>
+      <tr>
        <td align="right" style="vertical-align: top;">Prijs per kg.:</td>
        <td align="left"><div id="cost"></div></td>
+       <td align="right" style="vertical-align: top;">Alphazuur %:</td>
+       <td align="left" style="vertical-align: top;"><input id="alpha" /></td>
+      </tr>
+      <tr>
+       <td align="right" style="vertical-align: top;">Altijd op voorraad:</td>
+       <td align="left"><div id="always_on_stock"></div></td>
+       <td align="right" style="vertical-align: top;">Betazuur %:</td>
+       <td align="left" style="vertical-align: top;"><input id="beta" /></td>
       </tr>
       <tr>
        <td align="right" style="vertical-align: top;">Oogst datum:</td>
@@ -75,10 +79,10 @@
        <td align="left" style="vertical-align: top;"><div id="tht_date"></div></td>
       </tr>
       <tr>
-       <td style="padding-top: 10px;" align="right"><input type="button" id="Delete" value="Delete" /></td>
+       <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: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></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>
       </tr>
      </table>
     </div>
--- a/www/js/global.js	Tue Jan 22 20:27:45 2019 +0100
+++ b/www/js/global.js	Tue Jan 22 22:46:58 2019 +0100
@@ -101,6 +101,30 @@
 };
 var AddedAdapter = new $.jqx.dataAdapter(AddedSource);
 
+var HopTypeData = [
+	{ id: 0, en: 'Bittering', nl: 'bitterhop' },
+	{ id: 1, en: 'Aroma',     nl: 'aromahop' },
+	{ id: 2, en: 'Both',      nl: 'beide' }
+];
+var HopTypeSource = {
+	localdata: HopTypeData,
+	datatype: "array",
+	datafields: [{ name: 'id' }, { name: 'en' }, { name: 'nl' }]
+};
+var HopTypeAdapter = new $.jqx.dataAdapter(HopTypeSource);
+
+var HopFormData = [
+	{ id: 0, en: 'Pellet', nl: 'pellets' },
+	{ id: 1, en: 'Plug',   nl: 'plugs' },
+	{ id: 2, en: 'Leaf',   nl: 'bellen' }
+];
+var HopFormSource = {
+	localdata: HopFormData,
+	datatype: "array",
+	datafields: [{ name: 'id' }, { name: 'en' }, { name: 'nl' }] 
+};
+var HopFormAdapter = new $.jqx.dataAdapter(HopFormSource);
+
 
 
 
@@ -164,6 +188,18 @@
 	spinButtons: true,
 	spinButtonsStep: 0.5
 };
+var Perc1dec1 = {
+	inputMode: 'simple',
+	spinMode: 'simple',
+	theme: theme,
+	width: 110,
+	height: 23,
+	min: 0,
+	max: 100,
+	decimalDigits: 1,
+	spinButtons: true,
+	spinButtonsStep: 0.1
+};
 var Spin2dec1 = {
 	inputMode: 'simple',
 	spinMode: 'simple',
--- a/www/js/inv_hops.js	Tue Jan 22 20:27:45 2019 +0100
+++ b/www/js/inv_hops.js	Tue Jan 22 22:46:58 2019 +0100
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Copyright (C) 2014-2018
+ * Copyright (C) 2014-2019
  *
  * Michiel Broek <mbroek at mbse dot eu>
  *
@@ -33,8 +33,8 @@
 		okButton: $('#delOk'),
 		cancelButton: $('#delCancel'),
 		initContent: function () {
-			$('#delOk').jqxButton({ width: '65px', theme: theme });
-			$('#delCancel').jqxButton({ width: '65px', theme: theme });
+			$('#delOk').jqxButton({ template: "danger", width: '65px', theme: theme });
+			$('#delCancel').jqxButton({ template: "success", width: '65px', theme: theme });
 			$('#delCancel').focus();
 		}
 	});
@@ -58,12 +58,12 @@
 			{ name: 'cohumulone', type: 'float' },
 			{ name: 'myrcene', type: 'float' },
 			{ name: 'hsi', type: 'float' },
-			{ name: 'type', type: 'string' },
-			{ name: 'form', type: 'string' },
+			{ name: 'type', type: 'int' },
+			{ name: 'form', type: 'int' },
 			{ name: 'notes', type: 'string' },
 			{ name: 'origin', type: 'string' },
 			{ name: 'substitutes', type: 'string' },
-			{ name: 'always_on_stock', type: 'bool' },
+			{ name: 'always_on_stock', type: 'int' },
 			{ name: 'inventory', type: 'float' },
 			{ name: 'cost', type: 'float' },
 			{ name: 'production_date', type: 'string' },
@@ -80,6 +80,7 @@
 				url: url,
 				cache: false,
 				data: data,
+				type: "POST",
 				success: function (data, status, xhr) {
 					// delete command is executed.
 					commit(true);
@@ -96,6 +97,7 @@
 				url: url,
 				cache: false,
 				data: data,
+				type: "POST",
 				success: function (data, status, xhr) {
 					commit(true);
 				},
@@ -111,6 +113,7 @@
 				url: url,
 				cache: false,
 				data: data,
+				type: "POST",
 				success: function (data, status, xhr) {
 					// update command is executed.
 					commit(true);
@@ -121,30 +124,45 @@
 			});
 		}
 	};
-//	var srcUse = [ "Boil", "Dry Hop", "Mash", "First Wort", "Aroma" ];	// Only in recipes
 	var srcType = [ "Bittering", "Aroma", "Both" ];
 	var srcForm = [ "Pellet", "Plug", "Leaf" ];
 	// initialize the input fields.
-	$("#name").jqxInput({ theme: theme, width: 250, height: 23 });
-	$("#alpha").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true });
-	$("#beta").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true });
-	$("#humulene").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true });
-	$("#caryophyllene").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true });
-	$("#cohumulone").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true });
-	$("#myrcene").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true });
-	$("#hsi").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true });
+	$("#name").jqxInput({ theme: theme, width: 640, height: 23 });
+	$("#alpha").jqxNumberInput( Perc1dec1 );
+	$("#beta").jqxNumberInput( Perc1dec1 );
+	$("#humulene").jqxNumberInput( Perc1dec1 );
+	$("#caryophyllene").jqxNumberInput( Perc1dec1 );
+	$("#cohumulone").jqxNumberInput( Perc1dec1 );
+	$("#myrcene").jqxNumberInput( Perc1dec1 );
+	$("#hsi").jqxNumberInput( Perc1dec5 );
 
-	$("#type").jqxDropDownList({ theme: theme, source: srcType, width: 90, height: 23, dropDownHeight: 95 });
-	$("#form").jqxDropDownList({ theme: theme, source: srcForm, width: 90, height: 23, dropDownHeight: 95 });
+	$("#type").jqxDropDownList({
+		theme: theme,
+		source: HopTypeAdapter,
+		valueMember: 'id',
+		displayMember: 'nl',
+		width: 150,
+		height: 23,
+		autoDropDownHeight: true
+	});
+	$("#form").jqxDropDownList({
+		theme: theme,
+		source: HopFormAdapter,
+		valueMember: 'id',
+		displayMember: 'nl',
+		width: 150,
+		height: 23,
+		autoDropDownHeight: true
+	});
 	$("#notes").jqxInput({ theme: theme, width: 640, height: 100 });
-	$("#origin").jqxInput({ theme: theme, width: 250, height: 23 });
-	$("#substitutes").jqxInput({ theme: theme, width: 250, height: 23 });
+	$("#origin").jqxInput({ theme: theme, width: 320, height: 23 });
+	$("#substitutes").jqxInput({ theme: theme, width: 320, height: 23 });
 	$("#always_on_stock").jqxCheckBox({ theme: theme, width: 120, height: 23 });
-	$("#inventory").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true });
-	$("#production_date").jqxDateTimeInput({ theme: theme, width: 100, height: 23, formatString: 'yyyy-MM-dd' });
-	$("#cost").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 2, spinButtons: true });
-	$("#tht_date").jqxDateTimeInput({ theme: theme, width: 100, height: 23, formatString: 'yyyy-MM-dd' });
-	$("#total_oil").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true });
+	$("#inventory").jqxNumberInput( Spin1dec1 );
+	$("#production_date").jqxDateTimeInput( Dateopts );
+	$("#cost").jqxNumberInput( Spin2dec1 );
+	$("#tht_date").jqxDateTimeInput( Dateopts );
+	$("#total_oil").jqxNumberInput( Perc1dec1 );
 	var dataAdapter = new $.jqx.dataAdapter(source);
 	var editrow = -1;
 	// initialize jqxGrid
@@ -160,30 +178,30 @@
 			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;'>Nieuw</span></div>");
 			container.append(addButton);
 			statusbar.append(container);
-			addButton.jqxButton({ theme: theme, width: 120, height: 20 });
+			addButton.jqxButton({ theme: theme, width: 90, height: 20 });
 			// add new row.
 			addButton.click(function (event) {
 				editrow = -1;
-				$("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } });
-				$("#name").val('');
-				$("#alpha").val('');
-				$("#beta").val('');
-				$("#humulene").val('');
-				$("#caryophyllene").val('');
-				$("#cohumulone").val('');
-				$("#myrcene").val('');
-				$("#hsi").val('');
-				$("#type").val('Bittering');
-				$("#form").val('Pellet');
+				$("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } });
+				$("#name").val('Nieuwe hop');
+				$("#alpha").val(0);
+				$("#beta").val(0);
+				$("#humulene").val(0);
+				$("#caryophyllene").val(0);
+				$("#cohumulone").val(0);
+				$("#myrcene").val(0);
+				$("#hsi").val(0);
+				$("#type").val(0);
+				$("#form").val(0);
 				$("#notes").val('');
 				$("#origin").val('');
 				$("#substitutes").val('');
-				$("#always_on_stock").val('');
-				$("#inventory").val('');
-				$("#cost").val('');
+				$("#always_on_stock").val(0);
+				$("#inventory").val(0);
+				$("#cost").val(0);
 				$("#production_date").val('');
 				$("#tht_date").val('');
-				$("#total_oil").val('');
+				$("#total_oil").val(0);
 				$("#popupWindow").jqxWindow('open');
 			});
 		},
@@ -192,8 +210,16 @@
 		columns: [
 			{ text: 'Herkomst', datafield: 'origin', align: 'center', cellsalign: 'center', width: 150 },
 			{ text: 'Hop Naam', datafield: 'name' },
-			{ text: 'Soort', datafield: 'type', align: 'center', cellsalign: 'center', width: 90 },
-			{ text: 'Vorm', datafield: 'form', align: 'center', cellsalign: 'center', width: 90 },
+			{ text: 'Soort', datafield: 'type', align: 'center', cellsalign: 'center', width: 90,
+			  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
+				return "<div style='margin: 4px;' class='jqx-center-align'>" + HopTypeData[value].nl + "</div>";
+			  }
+			},
+			{ text: 'Vorm', datafield: 'form', align: 'center', cellsalign: 'center', width: 90,
+			  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
+				return "<div style='margin: 4px;' class='jqx-center-align'>" + HopFormData[value].nl + "</div>";
+			  }
+		       	},
 			{ text: 'Alpha %', datafield: 'alpha', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
 			{ text: 'Beta %', datafield: 'beta', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
 			{ text: 'Cohumuloon %%', datafield: 'cohumulone', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
@@ -201,12 +227,12 @@
 			{ text: 'Oogst datum', datafield: 'production_date', align: 'center', cellsalign: 'center', width: 100 },
 			{ text: 'Voor, gr.', datafield: 'inventory', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
 			{ text: 'Prijs /kg', datafield: 'cost', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'c2' },
-			{ text: 'Wijzig', datafield: 'Wijzig', columntype: 'button', width: 120, align: 'center', cellsrenderer: function () {
+			{ text: 'Wijzig', datafield: 'Wijzig', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
 				return "Wijzig";
 				}, buttonclick: function (row) {
 					// open the popup window when the user clicks a button.
 					editrow = row;
-					$("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } });
+					$("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } });
 					// get the clicked row's data and initialize the input fields.
 					var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
 					$("#name").val(dataRecord.name);
@@ -236,12 +262,19 @@
 	});
 	// initialize the popup window and buttons.
 	$("#popupWindow").jqxWindow({
-		width: 860, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.40
+		width: 1050,
+		height: 550,
+		resizable: false,
+		theme: theme,
+		isModal: true,
+		autoOpen: false,
+		cancelButton: $("#Cancel"),
+		modalOpacity: 0.40
 	});
 	$("#popupWindow").on('open', function () {
 		$("#name").jqxInput('selectAll');
 	});
-	$("#Delete").jqxButton({ theme: theme });
+	$("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme });
 	$("#Delete").click(function () {
 		if (editrow >= 0) {
 			// Open a popup to confirm this action.
@@ -253,63 +286,43 @@
 		}
 		$("#popupWindow").jqxWindow('hide');
 	});
-	$("#Cancel").jqxButton({ theme: theme });
-	$("#Save").jqxButton({ theme: theme });
+	$("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme });
+	$("#Save").jqxButton({ template: "success", width: '90px', theme: theme });
 	// update the edited row when the user clicks the 'Save' button.
 	$("#Save").click(function () {
+		var rowID = -1;
 		if (editrow >= 0) {
 			var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
-			var row = {
-				record: rowID,
-				name: $("#name").val(),
-				alpha: parseFloat($("#alpha").jqxNumberInput('decimal')),
-				beta: parseFloat($("#beta").jqxNumberInput('decimal')),
-				humulene: parseFloat($("#humulene").jqxNumberInput('decimal')),
-				caryophyllene: parseFloat($("#caryophyllene").jqxNumberInput('decimal')),
-				cohumulone: parseFloat($("#cohumulone").jqxNumberInput('decimal')),
-				myrcene: parseFloat($("#myrcene").jqxNumberInput('decimal')),
-				hsi: parseFloat($("#hsi").jqxNumberInput('decimal')),
-				type: $("#type").val(),
-				form: $("#form").val(),
-				notes: $("#notes").val(),
-				origin: $("#origin").val(),
-				substitutes: $("#substitutes").val(),
-				always_on_stock: $("#always_on_stock").val(),
-				inventory: parseFloat($("#inventory").jqxNumberInput('decimal')),
-		                cost: parseFloat($("#cost").jqxNumberInput('decimal')),
-		                production_date: $("#production_date").val(),
-		                tht_date: $("#tht_date").val(),
-				total_oil: parseFloat($("#total_oil").jqxNumberInput('decimal'))
-			};
+		}
+		var row = {
+			record: rowID,
+			name: $("#name").val(),
+			alpha: parseFloat($("#alpha").jqxNumberInput('decimal')),
+			beta: parseFloat($("#beta").jqxNumberInput('decimal')),
+			humulene: parseFloat($("#humulene").jqxNumberInput('decimal')),
+			caryophyllene: parseFloat($("#caryophyllene").jqxNumberInput('decimal')),
+			cohumulone: parseFloat($("#cohumulone").jqxNumberInput('decimal')),
+			myrcene: parseFloat($("#myrcene").jqxNumberInput('decimal')),
+			hsi: parseFloat($("#hsi").jqxNumberInput('decimal')),
+			type: $("#type").val(),
+			form: $("#form").val(),
+			notes: $("#notes").val(),
+			origin: $("#origin").val(),
+			substitutes: $("#substitutes").val(),
+			always_on_stock: $("#always_on_stock").val(),
+			inventory: parseFloat($("#inventory").jqxNumberInput('decimal')),
+	                cost: parseFloat($("#cost").jqxNumberInput('decimal')),
+	                production_date: $("#production_date").val(),
+	                tht_date: $("#tht_date").val(),
+			total_oil: parseFloat($("#total_oil").jqxNumberInput('decimal'))
+		};
+		if (editrow >= 0) {
 			$('#jqxgrid').jqxGrid('updaterow', rowID, row);
-			$("#popupWindow").jqxWindow('hide');
 		} else {
-			// Insert a record
-			var newrow = {
-				record: -1,
-				name: $("#name").val(),
-				alpha: parseFloat($("#alpha").jqxNumberInput('decimal')),
-				beta: parseFloat($("#beta").jqxNumberInput('decimal')),
-				humulene: parseFloat($("#humulene").jqxNumberInput('decimal')),
-				caryophyllene: parseFloat($("#caryophyllene").jqxNumberInput('decimal')),
-				cohumulone: parseFloat($("#cohumulone").jqxNumberInput('decimal')),
-				myrcene: parseFloat($("#myrcene").jqxNumberInput('decimal')),
-				hsi: parseFloat($("#hsi").jqxNumberInput('decimal')),
-				type: $("#type").val(),
-				form: $("#form").val(),
-				notes: $("#notes").val(),
-				origin: $("#origin").val(),
-				substitutes: $("#substitutes").val(),
-				always_on_stock: $("#always_on_stock").val(),
-				inventory: parseFloat($("#inventory").jqxNumberInput('decimal')),
-				cost: parseFloat($("#cost").jqxNumberInput('decimal')),
-				production_date: $("#production_date").val(),
-				tht_date: $("#tht_date").val(),
-				total_oil: parseFloat($("#total_oil").jqxNumberInput('decimal'))
-			};
-			$('#jqxgrid').jqxGrid('addrow', null, newrow);
-			$("#popupWindow").jqxWindow('hide');
+			$('#jqxgrid').jqxGrid('addrow', null, row);
 		}
+		$("#popupWindow").jqxWindow('hide');
+		location.reload( true );        // reload ourself.
 	});
 	createDelElements();
 });

mercurial