www/js/profile_water.js

Wed, 20 May 2020 21:49:09 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Wed, 20 May 2020 21:49:09 +0200
changeset 684
ccb9f24d0fe9
parent 662
4bb005694ce7
child 701
3ce3df681be0
permissions
-rw-r--r--

Report any online status change via websocket broadcast. When starting, load all in memory tables sorted. The websocket status on the web pages has it's own panel. Prepared the menu system for dynamic updates.

/*****************************************************************************
 * Copyright (C) 2014-2020
 *
 * 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 = {},
 url = 'includes/db_profile_water.php',
 source = {
  datatype: 'json',
  cache: false,
  datafields: [
   { name: 'record', type: 'number' },
   { name: 'name', type: 'string' },
   { 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' }
  ],
  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) {
     commit(true);
     location.reload(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);
     location.reload(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) {
     commit(true);
     location.reload(true);
    },
    error: function(jqXHR, textStatus, errorThrown) {
     commit(false);
    }
   });
  }
 },
 dataAdapter = new $.jqx.dataAdapter(source),
 editrow = -1;

 // tooltips
 $('#name').jqxTooltip({ content: 'De unieke naam van dit water profiel.' });
 $('#notes').jqxTooltip({ content: 'Extra opmerkingen over dit water.' });
 $('#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.' });
 $('#balance').jqxTooltip({ content: 'De ionen balans van het water. Ideaal minder dan 0.1 verschil tussen kationen en anionen. Meer dan 0.5 is een fout in het waterraport.' });

 // initialize the input fields.
 $('#name').jqxInput({ theme: theme, width: 640, height: 23 });
 $('#notes').jqxInput({ theme: theme, width: 800, height: 100 });
 $('#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);
 $('#balance').jqxNumberInput(Show2dec);

 // 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>'),
   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('');
    $('#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);
    $('#popupWindow').jqxWindow('open');
   });
  },
  filterable: false,
  filtermode: 'excel',
  columns: [
   { text: 'Water Profiel', datafield: 'name', width: 225 },
   { text: 'Opmerkingen', datafield: 'notes' },
   { text: 'Ca', datafield: 'calcium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
   { text: 'Mg', datafield: 'magnesium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
   { text: 'Na', datafield: 'sodium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
   { text: 'CaCO3', datafield: 'total_alkalinity', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
   { text: 'Cl', datafield: 'chloride', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
   { text: 'SO4', datafield: 'sulfate', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
   { text: 'pH', datafield: 'ph', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
   { text: '', datafield: 'Edit', width: 100, 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.
     dataRecord = $('#jqxgrid').jqxGrid('getrowdata', editrow);
     $('#name').val(dataRecord.name);
     $('#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);
     calcBalance();
     // show the popup window.
     $('#popupWindow').jqxWindow('open');
    }
   }
  ]
 });

 function calcBalance() {
  var cations = (dataRecord.calcium / 20.039) + (dataRecord.magnesium / 12.1525) + (dataRecord.sodium / 22.989);
  var anions = (dataRecord.bicarbonate / 61.016) + (dataRecord.sulfate / 48.031) + (dataRecord.chloride / 35.4527);
  var balance = Round(cations - anions, 2);
  $('#balance').val(balance);
  if (balance <= 0.1 && balance >= -0.1)
   $('#wr_balance').html("<img src='images/dialog-ok-apply.png'>");
  else if (balance <= 0.5 && balance >= -0.5)
   $('#wr_balance').html("<img src='images/dialog-ok.png'>");
  else
   $('#wr_balance').html("<img src='images/dialog-error.png'>");
 }

 $('#calcium').on('change', function(event) {
  dataRecord.calcium = parseFloat(event.args.value);
  calcBalance();
 });
 $('#magnesium').on('change', function(event) {
  dataRecord.magnesium = parseFloat(event.args.value);
  calcBalance();
 });
 $('#sodium').on('change', function(event) {
  dataRecord.sodium = parseFloat(event.args.value);
  calcBalance();
 });
 $('#total_alkalinity').on('change', function(event) {
  dataRecord.total_alkalinity = parseFloat(event.args.value);
  dataRecord.bicarbonate = parseFloat(event.args.value) * 1.22;
  $('#bicarbonate').val(dataRecord.bicarbonate);
  calcBalance();
 });
 $('#bicarbonate').on('change', function(event) {
  dataRecord.bicarbonate = parseFloat(event.args.value);
  dataRecord.total_alkalinity = parseFloat(event.args.value) * 50 / 61;
  $('#total_alkalinity').val(dataRecord.total_alkalinity);
  calcBalance();
 });
 $('#sulfate').on('change', function(event) {
  dataRecord.sulfate = parseFloat(event.args.value);
  calcBalance();
 });
 $('#chloride').on('change', function(event) {
  dataRecord.chloride = parseFloat(event.args.value);
  calcBalance();
 });

 // 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 row, rowID = -1;
  if (editrow >= 0) {
   rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
  }
  row = {
   record: rowID,
   name: $('#name').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'))
  };
  if (editrow >= 0) {
   $('#jqxgrid').jqxGrid('updaterow', rowID, row);
  } else {
   $('#jqxgrid').jqxGrid('addrow', null, row);
  }
  $('#popupWindow').jqxWindow('hide');
 });
 createDelElements();
});

mercurial