changeset
Added new recipe screens and wizzard.
Thu, 27 Sep 2018 23:13:41 +0200
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Thu, 27 Sep 2018 23:13:41 +0200
- changeset 71
- e1c50b21b7e3
- parent 70
- 4da2414eabbc
- child 72
- 93a0be4f5be3
Added new recipe screens and wizzard.
| www/css/style.css | file | annotate | diff | comparison | revisions | |
| www/includes/db_recipes.php | file | annotate | diff | comparison | revisions | |
| www/js/rec_edit.js | file | annotate | diff | comparison | revisions | |
| www/js/rec_main.js | file | annotate | diff | comparison | revisions | |
| www/js/rec_new.js | file | annotate | diff | comparison | revisions | |
| www/rec_new.php | file | annotate | diff | comparison | revisions |
--- a/www/css/style.css Wed Sep 26 15:28:59 2018 +0200 +++ b/www/css/style.css Thu Sep 27 23:13:41 2018 +0200 @@ -192,3 +192,46 @@ box-shadow: #024 0 0px 1px 1px; } */ + + +/* + * New recipe wizzard + */ +#hintBase, #hintStyle { + float: left; + margin-top: 30px; + margin-right: 20px; + padding: 5px; + width: 600px; + color: yellow; +} +#section { + margin: 5px; +} +#baseButtonsWrapper { + float: right; + margin-top: 30px; + margin-right: 10px; + width: 160px; +} +#styleButtonsWrapper { + float: right; + margin-top: 30px; + margin-right: 10px; + width: 320px; +} +#completedButtonsWrapper { + float: right; + margin-right: 10px; + width: 320px; + margin-top: 160px; +} +.nextButton { + float: right; + margin-left: 0px; +} +.backButton { + float: left; + margin-left: 10px; +} +
--- a/www/includes/db_recipes.php Wed Sep 26 15:28:59 2018 +0200 +++ b/www/includes/db_recipes.php Thu Sep 27 23:13:41 2018 +0200 @@ -30,6 +30,7 @@ $sql .= "st_name='" . mysqli_real_escape_string($connect, $_POST['st_name']); $sql .= "', st_letter='" . mysqli_real_escape_string($connect, $_POST['st_letter']); $sql .= "', st_guide='" . mysqli_real_escape_string($connect, $_POST['st_guide']); + // st_category st_category_number st_type $sql .= "', st_og_min='" . $_POST['st_og_min']; $sql .= "', st_og_max='" . $_POST['st_og_max']; $sql .= "', st_fg_min='" . $_POST['st_fg_min'];
--- a/www/js/rec_edit.js Wed Sep 26 15:28:59 2018 +0200 +++ b/www/js/rec_edit.js Thu Sep 27 23:13:41 2018 +0200 @@ -81,7 +81,7 @@ { name: 'st_abv_max', type: 'float' }, { name: 'name', type: 'string' }, { name: 'notes', type: 'string' }, - { name: 'type', type: 'number' }, + { name: 'type', type: 'string' }, { name: 'batch_size', type: 'float' }, { name: 'boil_time', type: 'float' }, { name: 'efficiency', type: 'float' },
--- a/www/js/rec_main.js Wed Sep 26 15:28:59 2018 +0200 +++ b/www/js/rec_main.js Thu Sep 27 23:13:41 2018 +0200 @@ -56,7 +56,7 @@ addButton.jqxButton({ theme: theme, width: 120, height: 20 }); // add new recipe. addButton.click(function (event) { - var url= "rec_new.php?return='rec_main.php'"; + var url= "rec_new.php?return=rec_main.php"; window.location.href = url; }); },
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/www/js/rec_new.js Thu Sep 27 23:13:41 2018 +0200 @@ -0,0 +1,325 @@ +/***************************************************************************** + * Copyright (C) 2018 + * + * 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); + + // Styles dropdown list + var stylesUrl = "includes/db_profile_styles.php"; + var stylesSource = { + datatype: "json", + datafields: [ + { name: 'record', type: 'number' }, + { name: 'name', type: 'string' }, + { name: 'category', type: 'string' }, + { name: 'category_number', type: 'number' }, + { name: 'style_letter', type: 'string' }, + { name: 'style_guide', type: 'string' }, + { name: 'type', type: 'string' }, + { name: 'og_min', type: 'float' }, + { name: 'og_max', type: 'float' }, + { name: 'fg_min', type: 'float' }, + { name: 'fg_max', type: 'float' }, + { name: 'ibu_min', type: 'float' }, + { name: 'ibu_max', type: 'float' }, + { name: 'color_min', type: 'float' }, + { name: 'color_max', type: 'float' }, + { name: 'carb_min', type: 'float' }, + { name: 'carb_max', type: 'float' }, + { name: 'abv_min', type: 'float' }, + { name: 'abv_max', type: 'float' }, + { name: 'notes', type: 'string' }, + { name: 'profile', type: 'string' }, + { name: 'ingredients', type: 'string' }, + { name: 'examples', type: 'string' } + ], + url: stylesUrl, + async: true + }; + var styleslist = new $.jqx.dataAdapter(stylesSource); + + $("#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: $('#st_category_number').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')), + st_type: $("#st_type").val(), + type: $("#type").val(), + batch_size: 20.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, + color_method: "Morey", + est_ibu: 0, + ibu_method: "Tinseth", + mash_name: "", + mash_ph: 5.4, + mash_sparge_temp: 78.0 + }; + 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.500 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(); +}); +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/www/rec_new.php Thu Sep 27 23:13:41 2018 +0200 @@ -0,0 +1,129 @@ +<?php +require_once($_SERVER['DOCUMENT_ROOT'].'/includes/global.inc.php'); +page_header('Nieuw recept', 'rec_new'); +?> + + <div id='jqxTabs'> + <ul> + <li style="margin-left: 30px;">Recept basis</li> + <li>Bierstijl</li> + <li>Overzicht</li> + </ul> + + <div class="section"> + <div style="overflow: hidden;"> + <table> + <tr> + <td style="vertical-align: top; float: right; padding: 3px;">Recept naam:</td> + <td align="left" colspan="3" style="vertical-align: top; padding: 3px;"><input id="name" /></td> + </tr> + <tr> + <td style="vertical-align: top; float: right; padding: 3px;">Opmerkingen:</td> + <td colspan="3" style="padding: 3px;"><textarea id="notes"></textarea></td> + </tr> + <tr> + <td style="vertical-align: top; float: right; padding: 3px;">Brouw type:</td> + <td align="left" style="padding: 3px;"><div id="type"></div></td> + <td style="vertical-align: top; float: right; padding: 3px;">Start SG:</td> + <td style="padding: 3px;"><div style="float: left;" id="est_og"></div></td> + </tr> + <tr> + <td style="vertical-align: top; float: right; padding: 3px;">Kooktijd minuten:</td> + <td style="padding: 3px;"><div id="boil_time"></div></td> + <td style="vertical-align: top; float: right; padding: 3px;">Brouwzaal rendement:</td> + <td style="padding: 3px;"><div id="efficiency"></div></td> + </tr> + </table> + </div> + <div id="hintBase" class="hint"> + </div> + <div id="baseButtonsWrapper"> + <input type="button" value="Volgende" class="nextButton" id="nextButtonBase" /> + </div> + </div> + + <div class="section"> + <div style="overflow: hidden;"> + <table> + <tr> + <td align="right" style="vertical-align: top;">Kies stijl:</td> + <td align="left" colspan="3"><div id="styleSelect">Stylenlijst</div></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Bier stijl:</td> + <td align="left" style="vertical-align: top;"><input readonly="1" id="st_name" /></td> + <td align="right" style="vertical-align: top;">Bier groep:</td> + <td align="left" style="vertical-align: top;"><input readonly="1" id="st_style_letter" /></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Type:</td> + <td align="left" style="vertical-align: top;"><input readonly="1" id="st_type" /></td> + <td align="right" style="vertical-align: top;">Stijl gids:</td> + <td align="left" style="vertical-align: top;"><input readonly="1" id="st_style_guide" /></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Categorie:</td> + <td align="left" style="vertical-align: top;"><input readonly="1" id="st_category" /></td> + <td align="right" style="vertical-align: top;">Categorie nummer:</td> + <td align="left" style="vertical-align: top;"><input readonly="1" id="st_category_number" /></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Opmerkingen:</td> + <td align="left" colspan="3"><textarea readonly="1" id="st_notes"></textarea></td> + </tr> + <tr> + <td style="vertical-align: top; float: right; padding: 3px;">Begin SG:</td> + <td style="padding: 3px;"><div style="float: left;" id="st_og_min"></div><div style="float: left; margin-left: 5px;" id="st_og_max"></div></td> + <td style="vertical-align: top; float: right; padding: 3px;">Kleur EBC:</td> + <td style="padding: 3px;"><div style="float: left;" id="st_color_min"></div><div style="float: left; margin-left: 5px;" id="st_color_max"></div></td> + </tr> + <tr> + <td style="vertical-align: top; float: right; padding: 3px;">Eind SG:</td> + <td style="padding: 3px;"><div style="float: left;" id="st_fg_min"></div><div style="float: left; margin-left: 5px;" id="st_fg_max"></div></td> + <td style="vertical-align: top; float: right; padding: 3px;">Koolzuur vol:</td> + <td style="padding: 3px;"><div style="float: left;" id="st_carb_min"></div><div style="float: left; margin-left: 5px;" id="st_carb_max"></div></td> + </tr> + <tr> + <td style="vertical-align: top; float: right; padding: 3px;">Bitterheid IBU:</td> + <td style="padding: 3px;"><div style="float: left;" id="st_ibu_min"></div><div style="float: left; margin-left: 5px;" id="st_ibu_max"></div></td> + <td style="vertical-align: top; float: right; padding: 3px;">Alcohol vol%:</td> + <td style="padding: 3px;"><div style="float: left;" id="st_abv_min"></div><div style="float: left; margin-left: 5px;" id="st_abv_max"></div></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Profiel:</td> + <td align="left" colspan="3"><textarea readonly="1" id="st_profile"></textarea></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Ingredienten:</td> + <td align="left" colspan="3"><textarea readonly="1" id="st_ingredients"></textarea></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Voorbeelden:</td> + <td align="left" colspan="3"><textarea readonly="1" id="st_examples"></textarea></td> + </tr> + </table> + </div> + <div class="hint" id="hintStyle"> + </div> + <div id="styleButtonsWrapper"> + <input type="button" value="Terug" class="backButton" id="backButtonStyle" /> + <input type="button" value="Volgende" class="nextButton" id="nextButtonStyle" /> + </div> + </div> + + <div class="section"> + <div style="overflow: hidden; margin: 25px;"><br> + <p>Alle nodige gegevens zijn compleet.</p> + <p> Zodra je de "Volgende" toets gebruikt zal een nieuw recept aangemaakt worden en<br> + wordt de recept editer gestart zodat je het recept verder kunt afmaken.</p> + </div> + <div id="completedButtonsWrapper"> + <input type="button" value="Terug" id="backButtonCompleted" class="backButton" /> + <input type="button" value="Volgende" class="nextButton" id="nextButtonCompleted" /> + </div> + </div> + </div> + +<?php +page_footer(); +?>
