www/js/inv_waters.js

Tue, 04 Jun 2019 19:50:06 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Tue, 04 Jun 2019 19:50:06 +0200
changeset 396
804800d8e885
parent 287
ad939b702674
child 488
77f1617b6994
permissions
-rw-r--r--

Added console logging in the grid write callback functions. Removed grid sorting, it is done on the server side. Alert popup for block row edit functions. Better grid live updates. In recipe and product print show the whirlpool time. The checklist now shows misc ingredients added in the mash. Show hops added in the whirlpool. Most ingredient names are now quoted.

/*****************************************************************************
 * Copyright (C) 2014-2019
 *
 * Michiel Broek <mbroek at mbse dot eu>
 *
 * This file is part of BrewCloud
 *
 * This is free software; you can redistribute it and/or modify it
 * under the terms of the GNU General Public License as published by the
 * Free Software Foundation; either version 2, or (at your option) any
 * later version.
 *
 * BrewCloud is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with ThermFerm; see the file COPYING.  If not, write to the Free
 * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
 *****************************************************************************/


function createDelElements() {
	$('#eventWindow').jqxWindow({
		theme: theme,
		position: { x: 490, y: 210 },
		width: 300,
		height: 175,
		resizable: false,
		isModal: true,
		modalOpacity: 0.4,
		okButton: $('#delOk'),
		cancelButton: $('#delCancel'),
		initContent: function () {
			$('#delOk').jqxButton({ template: "danger", width: '65px', theme: theme });
			$('#delCancel').jqxButton({ template: "success", width: '65px', theme: theme });
			$('#delCancel').focus();
		}
	});
	$('#eventWindow').jqxWindow('hide');
}


$(document).ready(function () {

	var dataRecord = {};

	var url = "includes/db_inventory_water.php";
	// tooltips
	$("#name").jqxTooltip({ content: 'De unieke naam van dit brouwwater.' });
	$("#notes").jqxTooltip({ content: 'Extra opmerkingen over dit water.' });
	$("#unlimited_stock").jqxTooltip({ content: 'Onbeperkte voorraad zoals kraanwater en bronnen.' });
	$("#calcium").jqxTooltip({ content: 'Calcium (Ca).' });
	$("#bicarbonate").jqxTooltip({ content: 'Bicarbonaat (HCO3). Berekend meteen de Totale alkaliteit.' });
	$("#sulfate").jqxTooltip({ content: 'Calcium Sulfaat (CaSO4).' });
	$("#chloride").jqxTooltip({ content: 'Chloride (Cl).' });
	$("#sodium").jqxTooltip({ content: 'Natrium, oftewel keukenzout (Na). In berekeningen ook vaak als Sodium.' });
	$("#magnesium").jqxTooltip({ content: 'Magnesium (Mg).' });
	$("#ph").jqxTooltip({ content: 'De zuurgraad (pH).' });
	$("#total_alkalinity").jqxTooltip({ content: 'Totale alkaliniteit. Berekend meteen de Bicarbonaat.' });
	$("#inventory").jqxTooltip({ content: 'Voorraad in liters.' });
	$("#cost").jqxTooltip({ content: 'Kostprijs per liter. 5 cijfers achter de comma zodat het kraanwater er ook in kan.' });
	// prepare the data
	var source = {
		datatype: "json",
		cache: false,
		datafields: [
			{ name: 'record', type: 'number' },
			{ name: 'name', type: 'string' },
			{ name: 'unlimited_stock', type: 'int' },
			{ name: 'calcium', type: 'float' },
			{ name: 'bicarbonate', type: 'float' },
			{ name: 'sulfate', type: 'float' },
			{ name: 'chloride', type: 'float' },
			{ name: 'sodium', type: 'float' },
			{ name: 'magnesium', type: 'float' },
			{ name: 'ph', type: 'float' },
			{ name: 'notes', type: 'string' },
			{ name: 'total_alkalinity', type: 'float' },
			{ name: 'inventory', type: 'float' },
			{ name: 'cost', type: 'float' }
		],
		id: 'record',
		url: url,
		deleterow: function (rowid, commit) {
			// synchronize with the server - send delete command
			var data = "delete=true&" + $.param({ record: rowid });
			$.ajax({
				dataType: 'json',
				url: url,
				cache: false,
				data: data,
				type: "POST",
				success: function (data, status, xhr) {
					// delete command is executed.
					commit(true);
				},
				error: function (jqXHR, textStatus, errorThrown) {
					commit(false);
				}
			});
		},
		addrow: function (rowid, rowdata, position, commit) {
			var data = "insert=true&" + $.param(rowdata);
			$.ajax({
				dataType: 'json',
				url: url,
				cache: false,
				data: data,
				type: "POST",
				success: function (data, status, xhr) {
					commit(true);
				},
				error: function(jqXHR, textStatus, errorThrown) {
                                        commit(false);
                                }
                        });
                },
		updaterow: function (rowid, rowdata, commit) {
			var data = "update=true&" + $.param(rowdata);
			$.ajax({
				dataType: 'json',
				url: url,
				cache: false,
				data: data,
				type: "POST",
				success: function (data, status, xhr) {
					// update command is executed.
					commit(true);
				},
				error: function(jqXHR, textStatus, errorThrown) {
					commit(false);
				}
			});
		}
	};
	// initialize the input fields.
	$("#name").jqxInput({ theme: theme, width: 640, height: 23 });
	$("#notes").jqxInput({ theme: theme, width: 640, height: 100 });
	$("#unlimited_stock").jqxCheckBox({ theme: theme, width: 120, height: 23 });
	$("#calcium").jqxNumberInput( Spin1dec );
	$("#bicarbonate").jqxNumberInput( Spin1dec );
	$("#sulfate").jqxNumberInput( Spin1dec );
	$("#chloride").jqxNumberInput( Spin1dec );
	$("#sodium").jqxNumberInput( Spin1dec );
	$("#magnesium").jqxNumberInput( Spin1dec );
	$("#ph").jqxNumberInput( Spin2pH );
	$("#total_alkalinity").jqxNumberInput( Spin1dec );
	$("#inventory").jqxNumberInput( Spin1dec );
	$("#cost").jqxNumberInput({inputMode: 'simple', theme: theme, width: 110, height: 23, min: 0, decimalDigits: 5, spinButtons: true });
	var dataAdapter = new $.jqx.dataAdapter(source);
	var editrow = -1;
	// initialize jqxGrid
	$("#jqxgrid").jqxGrid({
		width: 1280,
		height: 630,
		source: dataAdapter,
		theme: theme,
		showstatusbar: true,
		renderstatusbar: function (statusbar) {
			var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
			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: 90, height: 20 });
			// add new row.
			addButton.click(function (event) {
				editrow = -1;
				$("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } });
				$("#name").val('Nieuw brouwwater');
				$("#unlimited_stock").val(0);
				$("#calcium").val(0);
				$("#bicarbonate").val(0);
				$("#sulfate").val(0);
				$("#chloride").val(0);
				$("#sodium").val(0);
				$("#magnesium").val(0);
				$("#ph").val(7);
				$("#notes").val('');
				$("#total_alkalinity").val(0);
				$("#inventory").val(0);
				$("#cost").val(0);
				$("#popupWindow").jqxWindow('open');
			});
		},
		filterable: false,
		columns: [
			{ text: 'Water leverancier', datafield: 'name', width: 225 },
			{ text: 'Opmerkingen', datafield: 'notes' },
			{ text: 'Onbeperkt', datafield: 'unlimited_stock', columntype: 'checkbox', width: 80 },
			{ text: 'Voorraad', datafield: 'inventory', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1',
			  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
				var amount = "";
				if (value > 0 && rowdata.unlimited_stock == 0)
					amount = dataAdapter.formatNumber(value,"f1")+" L";
				return "<span style='margin: 3px; margin-top: 6px; float: right;'>" + amount + "</span>";
			  }
			},
			{ text: '', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function () {
				return "Wijzig";
				}, buttonclick: function (row) {
					// open the popup window when the user clicks a button.
					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);
					$("#name").val(dataRecord.name);
					$("#unlimited_stock").val(dataRecord.unlimited_stock);
					$("#calcium").val(dataRecord.calcium);
					$("#bicarbonate").val(dataRecord.bicarbonate);
					$("#sulfate").val(dataRecord.sulfate);
					$("#chloride").val(dataRecord.chloride);
					$("#sodium").val(dataRecord.sodium);
					$("#magnesium").val(dataRecord.magnesium);
					$("#ph").val(dataRecord.ph);
					$("#notes").val(dataRecord.notes);
					$("#total_alkalinity").val(dataRecord.total_alkalinity);
					$("#inventory").val(dataRecord.inventory);
					$("#cost").val(dataRecord.cost);
					// show the popup window.
					$("#popupWindow").jqxWindow('open');
				}
			}
		]
	});

	$("#total_alkalinity").on('change', function (event) {
		dataRecord.bicarbonate = parseFloat(event.args.value) * 1.22;
		$("#bicarbonate").val(dataRecord.bicarbonate);
	});
	$("#bicarbonate").on('change', function (event) {
		dataRecord.total_alkalinity = parseFloat(event.args.value) * 50 / 61;
		$("#total_alkalinity").val(dataRecord.total_alkalinity);
	});

	// initialize the popup window and buttons.
	$("#popupWindow").jqxWindow({
		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({ template: "danger", width: '90px', theme: theme });
	$("#Delete").click(function () {
		if (editrow >= 0) {
			// Open a popup to confirm this action.
			$('#eventWindow').jqxWindow('open');
			$("#delOk").click(function () {
				var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
				$("#jqxgrid").jqxGrid('deleterow', rowID);
			});
		}
		$("#popupWindow").jqxWindow('hide');
	});
	$("#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(),
			unlimited_stock: $("#unlimited_stock").val(),
			calcium: parseFloat($("#calcium").jqxNumberInput('decimal')),
			bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')),
			sulfate: parseFloat($("#sulfate").jqxNumberInput('decimal')),
			chloride: parseFloat($("#chloride").jqxNumberInput('decimal')),
			sodium: parseFloat($("#sodium").jqxNumberInput('decimal')),
			magnesium: parseFloat($("#magnesium").jqxNumberInput('decimal')),
			ph: parseFloat($("#ph").jqxNumberInput('decimal')),
			notes: $("#notes").val(),
			total_alkalinity: parseFloat($("#total_alkalinity").jqxNumberInput('decimal')),
			inventory: parseFloat($("#inventory").jqxNumberInput('decimal')),
			cost: parseFloat($("#cost").jqxNumberInput('decimal'))
		};
		if (editrow >= 0) {
			$('#jqxgrid').jqxGrid('updaterow', rowID, row);
		} else {
			$('#jqxgrid').jqxGrid('addrow', null, row);
		}
		$("#popupWindow").jqxWindow('hide');
		location.reload( true );        // reload ourself.
	});
	createDelElements();
});

mercurial