www/js/rec_new.js

Tue, 22 Jan 2019 20:27:45 +0100

author
Michiel Broek <mbroek@mbse.eu>
date
Tue, 22 Jan 2019 20:27:45 +0100
changeset 195
2ac491548d8d
parent 170
71850ebe5a1c
child 232
daf2d9d6fa18
permissions
-rw-r--r--

Fermentables 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. Added the added and dissolved_protein fields. Removed the ibu_gal_per_lb field. Redesigned the web page. Code cleanup.

/*****************************************************************************
 * Copyright (C) 2018-2019
 *
 * Michiel Broek <mbroek at mbse dot eu>
 *
 * This file is part of BMS
 *
 * 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.
 *****************************************************************************/


$(document).ready(function () {

	// tooltips
	$("#name").jqxTooltip({ content: 'De naam voor dit recept.' });
	$("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit recept.' });
	$("#type").jqxTooltip({ content: 'Het brouw type van dit recept.' });

	// editers
	var srcType = [ "All Grain", "Partial Mash", "Extract" ];
	$("#name").jqxInput({ theme: theme, width: 640, height: 23 });
	$("#notes").jqxInput({ theme: theme, width: 960, height: 200 });
	$("#type").jqxDropDownList({ theme: theme, source: srcType, width: 125, height: 23, dropDownHeight: 95 });
	$("#boil_time").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 4, max: 360, decimalDigits: 0, spinButtons: true });
	$("#efficiency").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 40, max: 100, decimalDigits: 0, spinButtons: true, symbol: '%', symbolPosition: 'right'  });
	$("#est_og").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 1.010, max: 1.2, decimalDigits: 3, spinButtons: true, spinButtonsStep: 0.001 });

	$("#st_name").jqxInput({ theme: theme, width: 250, height: 23 });
	$("#st_category").jqxInput({ theme: theme, width: 250, height: 23 });
	$("#st_category_number").jqxInput({ theme: theme, width: 70, height: 23 });
	$("#st_style_letter").jqxInput({ theme: theme, width: 250, height: 23 });
	$("#st_style_guide").jqxInput({ theme: theme, width: 250, height: 23 });
	$("#st_notes").jqxInput({ theme: theme, width: 800, height: 100 });
	$("#st_type").jqxInput({ theme: theme, width: 90, height: 23 });
	$("#st_og_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
	$("#st_og_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
	$("#st_fg_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
	$("#st_fg_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
	$("#st_ibu_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
	$("#st_ibu_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
	$("#st_color_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
	$("#st_color_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
	$("#st_carb_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
	$("#st_carb_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
	$("#st_abv_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
	$("#st_abv_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
	$("#st_profile").jqxInput({ theme: theme, width: 800, height: 48 });
	$("#st_ingredients").jqxInput({ theme: theme, width: 800, height: 23 });
	$("#st_examples").jqxInput({ theme: theme, width: 800, height: 48 });

	// Default values.
	$("#type").val('All Grain');
	$("#boil_time").val(90);
	$("#efficiency").val(75);
	$("#est_og").val(1.052);

	$("#styleSelect").jqxDropDownList({
		placeHolder: "Kies bierstijl:",
		theme: theme,
		source: styleslist,
		displayMember: "name",
		width: 150,
		height: 27,
		dropDownWidth: 500,
		dropDownHeight: 500,
		renderer: function (index, label, value) {
		var datarecord = styleslist.records[index];
			return datarecord.style_guide + " " + datarecord.style_letter+ " " + datarecord.name;
		}
	});
	$("#styleSelect").on('select', function (event) {
		if (event.args) {
			var index = event.args.index;
			var datarecord = styleslist.records[index];
			$("#st_name").val(datarecord.name);
			$("#st_category").val(datarecord.category);
			$("#st_category_number").val(datarecord.category_number);
			$("#st_style_letter").val(datarecord.style_letter);
			$("#st_style_guide").val(datarecord.style_guide);
			$("#st_type").val(datarecord.type);
			$("#st_og_min").val(datarecord.og_min);
			$("#st_og_max").val(datarecord.og_max);
			$("#st_fg_min").val(datarecord.fg_min);
			$("#st_fg_max").val(datarecord.fg_max);
			$("#st_ibu_min").val(datarecord.ibu_min);
			$("#st_ibu_max").val(datarecord.ibu_max);
			$("#st_color_min").val(datarecord.color_min);
			$("#st_color_max").val(datarecord.color_max);
			$("#st_carb_min").val(datarecord.carb_min);
			$("#st_carb_max").val(datarecord.carb_max);
			$("#st_abv_min").val(datarecord.abv_min);
			$("#st_abv_max").val(datarecord.abv_max);
			$("#st_notes").val(datarecord.notes);
			$("#st_profile").val(datarecord.profile);
			$("#st_ingredients").val(datarecord.ingredients);
			$("#st_examples").val(datarecord.examples);
		}
	});

	//Creating wizard module
	var wizard = (function () {

		//Adding event listeners
		var _addHandlers = function () {
			$('#name').on('change', function (event) { wizard.validate(true); });
			$('#type').on('change', function (event) { wizard.validate(true); });
			$('#boil_time').on('change', function (event) { wizard.validate(true); });
			$('#est_og').on('change', function (event) { wizard.validate(true); });
			$('#efficiency').on('change', function (event) { wizard.validate(true); });
			$('#styleSelect').on('change', function (event) { wizard.validate(true); });
			$('#nextButtonCompleted').click(function () {
				console.log("insert start");
				var newrow = {
					record: -1,
					name: $("#name").val(),
					notes: $("#notes").val(),
					st_name: $('#st_name').val(),
					st_letter: $('#st_style_letter').val(),
					st_guide: $('#st_style_guide').val(),
					st_category: $('#st_category').val(),
					st_category_number: parseFloat($('#st_category_number').jqxNumberInput('decimal')),
					st_type: $("#st_type").val(),
					st_og_min: parseFloat($("#st_og_min").jqxNumberInput('decimal')),
					st_og_max: parseFloat($("#st_og_max").jqxNumberInput('decimal')),
					st_fg_min: parseFloat($("#st_fg_min").jqxNumberInput('decimal')),
					st_fg_max: parseFloat($("#st_fg_max").jqxNumberInput('decimal')),
					st_ibu_min: parseFloat($("#st_ibu_min").jqxNumberInput('decimal')),
					st_ibu_max: parseFloat($("#st_ibu_max").jqxNumberInput('decimal')),
					st_color_min: parseFloat($("#st_color_min").jqxNumberInput('decimal')),
					st_color_max: parseFloat($("#st_color_max").jqxNumberInput('decimal')),
					st_carb_min: parseFloat($("#st_carb_min").jqxNumberInput('decimal')),
					st_carb_max: parseFloat($("#st_carb_max").jqxNumberInput('decimal')),
					st_abv_min: parseFloat($("#st_abv_min").jqxNumberInput('decimal')),
					st_abv_max: parseFloat($("#st_abv_max").jqxNumberInput('decimal')),
					type: $("#type").val(),
					batch_size: 20.0,
					boil_size: 22.0,
					boil_time: parseFloat($("#boil_time").jqxNumberInput('decimal')),
					efficiency: parseFloat($("#efficiency").jqxNumberInput('decimal')),
					est_og: parseFloat($("#est_og").jqxNumberInput('decimal')),
					est_fg: 1.000,
					est_color: 0,
					est_abv: 0.0,
					est_carb: 0.0,
					color_method: "Morey",
					est_ibu: 0,
					ibu_method: "Tinseth",
					mash_name: "",
					mash_ph: 5.4,
					sparge_temp: 78.0,
					sparge_volume: 12.0,
					sparge_ph: 5.8,
					sparge_source: 'Bron 1',
					sparge_acid_type: 'Melkzuur',
					sparge_acid_perc: 80,
					sparge_acid_amount: 0,
					calc_acid: true
				};
				var data = "insert=true&return=" + my_return + "&" + $.param(newrow);
				$.ajax({
					dataType: 'json',
					url: "includes/db_recipes.php",
					cache: false,
					data: data,
					type: "POST",
					success: function (data, status, xhr) {
						// update command is executed.
						window.location.href = my_return;
					},
					error: function(jqXHR, textStatus, errorThrown) {
					}
				});
			});
			$('.nextButton').click(function () {
				wizard.validate(true);
				$('#jqxTabs').jqxTabs('next');
			});
			$('.backButton').click(function () {
				wizard.validate(true);
				$('#jqxTabs').jqxTabs('previous');
			});
		};

		return {
			//Initializing the wizzard - creating all elements, adding event handlers and starting the validation
			init: function () {
				$('#jqxTabs').jqxTabs({
					theme: theme,
					height: 630,
					width: 1280,
					autoHeight: false,
					position: 'top',
					keyboardNavigation: false
				});
				$('#nextButtonBase').jqxButton({ theme: theme, width: 150 });
				$('#nextButtonStyle').jqxButton({ theme: theme, width: 150});
				$('#backButtonStyle').jqxButton({ theme: theme, width: 150});
				$('#nextButtonCompleted').jqxButton({ theme: theme, width: 150});
				$('#backButtonCompleted').jqxButton({ theme: theme, width: 150});
				_addHandlers();
				this.validate();
				this.showHint('Validation hints.');
			},

			//Validating all wizard tabs
			validate: function (notify) {
				if (!this.firstTab(notify)) {
					$('#jqxTabs').jqxTabs('disableAt', 1);
					$('#jqxTabs').jqxTabs('disableAt', 2);
					return;
				} else {
					$('#jqxTabs').jqxTabs('enableAt', 1);
				}
				if (!this.secondTab(notify)) {
					$('#jqxTabs').jqxTabs('disableAt', 2);
					return;
				} else {
					$('#jqxTabs').jqxTabs('enableAt', 2);
				}
			},

			//Displaying message to the user
			showHint: function (message, selector) {
				if (typeof selector === 'undefined') {
					selector = '.hint';
				}
				if (message === '') {
					message = 'Ok, je mag doorgaan.';
				}
				$(selector).html('<strong>' + message + '</strong>');
			},

			//Validating the first tab
			firstTab: function (notify) {
				var name = $('#name').val(),
				    type = $('#type').val(),
				    boil_time = parseFloat($("#boil_time").jqxNumberInput('decimal')),
				    est_og = parseFloat($("#est_og").jqxNumberInput('decimal')),
				    efficiency = parseFloat($("#efficiency").jqxNumberInput('decimal')),
				    message = '';
				if (name.length < 3) {
					message += 'Je moet een recept naam invullen. <br />';
				}
				// Check if name already exists.
				if (type.length < 1) {
					message += 'Je moet een brouw type kiezen. <br />';
				}
				if ((boil_time < 4) || (boil_time > 360)) {
					message += 'De kooktijd moet tussen 4 en 360 minuten zijn. <br />';
				}
				if ((est_og < 1.010) || (est_og > 1.200)) {
					message += 'Het OG moet tussen 1.010 en 1.200 zijn. <br />';
				}
				if ((efficiency < 35) || (efficiency > 95)) {
					message += 'Het brouwzaal rendement moet tussen 35 en 95 zijn. <br />';
				}
				if (message !== '') {
					if (notify) {
						this.showHint(message, '#hintBase');
					}
					return false;
				}
				this.showHint('Ok, je mag doorgaan.', '#hintBase');
				return true;
			},

			//Validating the second tab
			secondTab: function (notify) {
				var stylesel = $('#styleSelect').val(),
				    message = '';
				if (stylesel.length < 3) {
					message += 'Je moet een bierstijl kiezen. <br />';
				}
				if (message !== '') {
					if (notify) {
						this.showHint(message, '#hintStyle');
					}
					return false;
				}
				this.showHint('Ok, je mag doorgaan.', '#hintStyle');
				return true;
			}
		}
	} ());

	//Initializing the wizard
	wizard.init();
});

mercurial