www/js/rec_new.js

Mon, 18 May 2020 11:00:59 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Mon, 18 May 2020 11:00:59 +0200
changeset 679
48f8f3fce7c0
parent 524
55a246085522
child 710
9646123ea063
permissions
-rw-r--r--

Added reconnecting-websocket.js to automatic reconnect the websocket if the connection is lost. Usefull for mobile devices that go to sleep after a while. Changed mon_fermenters to use websockets instead of polling. Fixed wrong temperature color ranges on the fermenter monior. Increased the websocket receive buffer to 2048. In cannot overflow, but larger messages are chunked and the application does not handle these split messages. Needs termferm 0.9.9 or newer.

/*****************************************************************************
 * 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() {

 var recipe_type = 2,
 style_type = 0,

 //Creating wizard module
 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,
     locked: 0,
     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: style_type,
     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: recipe_type,
     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: 0, // Morey
     est_ibu: 0,
     ibu_method: 0,  // Tinseth
     mash_name: '',
     mash_ph: 5.4,
     sparge_temp: 85.0,
     sparge_volume: 12.0,
     sparge_ph: 5.8,
     sparge_source: 0, // Source 1
     sparge_acid_type: 0, // Lactic acid
     sparge_acid_perc: 80,
     sparge_acid_amount: 0,
     calc_acid: true,
     w1_name: 'Tap water',
     w1_amount: 15,
     w1_calcium: 0,
     w1_sulfate: 0,
     w1_chloride: 0,
     w1_sodium: 0,
     w1_magnesium: 0,
     w1_total_alkalinity: 0,
     w1_ph: 7.0,
     w1_cost: 0.0,
     wa_acid_name: 0, // Lactic acid
     wa_acid_perc: 80,
     wa_base_name: 0
    },
    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, template: 'success', width: 150});
    $('#nextButtonCompleted').jqxButton({ theme: theme, template: 'success', width: 150});
    $('#backButtonCompleted').jqxButton({ theme: theme, template: 'success', width: 150});
    _addHandlers();
    this.validate();
    this.showHint('Vul de nodige gegevens in.');
   },

   //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');
    $('#nextButtonBase').jqxButton({ template: 'success' });
    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');
    $('#nextButtonStyle').jqxButton({ template: 'success' });
    return true;
   }
  };
 } ());

 // Tab 1, Base
 $('#name').jqxTooltip({ content: 'De naam voor dit recept.' });
 $('#name').jqxInput({ theme: theme, width: 640, height: 23 });
 $('#notes').jqxTooltip({ content: 'De uitgebreide opmerkingen over dit recept.' });
 $('#notes').jqxInput({ theme: theme, width: 960, height: 200 });
 $('#type').jqxDropDownList({
  theme: theme,
  source: RecipeTypeAdapter,
  valueMember: 'id',
  displayMember: 'nl',
  width: 180,
  height: 23,
  autoDropDownHeight: true
 });
 $('#type').jqxDropDownList('selectItem', 2);
 $('#type').on('select', function(event) {
  if (event.args) {
   recipe_type = event.args.index;
  }
 });
 $('#boil_time').jqxNumberInput(PosInt);
 $('#boil_time').jqxNumberInput({ min: 4, max: 360 });
 $('#efficiency').jqxNumberInput(Perc0);
 $('#est_og').jqxNumberInput(SGopts);
 // Default values.
 $('#boil_time').val(90);
 $('#efficiency').val(75);
 $('#est_og').val(1.052);

 // Tab 2, Style
 $('#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: 250, 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 });
 $('#styleSelect').jqxDropDownList({
  placeHolder: 'Kies bierstijl:',
  theme: theme,
  source: styleslist,
  displayMember: 'name',
  width: 250,
  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 datarecord, index = event.args.index;
   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);
   style_type = datarecord.type;
   $('#st_type').val(StyleTypeData[datarecord.type].nl);
   $('#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);
  }
 });

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

mercurial