# HG changeset patch # User Michiel Broek # Date 1548527076 -3600 # Node ID 63d0e40c58b90754924df7b2b04440b0b234a70d # Parent 3ced4934e230bacd4806f41d17c50d580bf45f78 Water profile uses POST instead of GET. Added tooltips to the editor screen. Updated the editor screen. Total alkalinity and Bicarbonate update each other. More and smaller columns in the listing screen. Rearranged the editor screen. diff -r 3ced4934e230 -r 63d0e40c58b9 www/includes/db_profile_water.php --- a/www/includes/db_profile_water.php Sat Jan 26 15:05:27 2019 +0100 +++ b/www/includes/db_profile_water.php Sat Jan 26 19:24:36 2019 +0100 @@ -10,63 +10,59 @@ } mysqli_set_charset($connect, "utf8" ); -// get data and store in a json array -$query = "SELECT * FROM profile_water ORDER BY name"; -if (isset($_GET['insert'])) { - // INSERT COMMAND - $sql = "INSERT INTO `profile_water` SET name='" . mysqli_real_escape_string($connect, $_GET['name']); - $sql .= "', calcium='" . $_GET['calcium']; - $sql .= "', bicarbonate='" . $_GET['bicarbonate']; - $sql .= "', sulfate='" . $_GET['sulfate']; - $sql .= "', chloride='" . $_GET['chloride']; - $sql .= "', sodium='" . $_GET['sodium']; - $sql .= "', magnesium='" . $_GET['magnesium']; - $sql .= "', ph='" . $_GET['ph']; - $sql .= "', notes='" . mysqli_real_escape_string($connect, $_GET['notes']); - $sql .= "', total_alkalinity='" . $_GET['total_alkalinity']; - $sql .= "';"; +if (isset($_POST['insert']) || isset($_POST['update'])) { + if (isset($_POST['insert'])) { + $sql = "INSERT INTO `profile_water` SET "; + } + if (isset($_POST['update'])) { + $sql = "UPDATE `profile_water` SET "; + } + + $sql .= "name='" . mysqli_real_escape_string($connect, $_POST['name']); + $sql .= "', calcium='" . $_POST['calcium']; + $sql .= "', bicarbonate='" . $_POST['bicarbonate']; + $sql .= "', sulfate='" . $_POST['sulfate']; + $sql .= "', chloride='" . $_POST['chloride']; + $sql .= "', sodium='" . $_POST['sodium']; + $sql .= "', magnesium='" . $_POST['magnesium']; + $sql .= "', ph='" . $_POST['ph']; + $sql .= "', notes='" . mysqli_real_escape_string($connect, $_POST['notes']); + $sql .= "', total_alkalinity='" . $_POST['total_alkalinity']; + if (isset($_POST['insert'])) { + $sql .= "';"; + } + if (isset($_POST['update'])) { + $sql .= "' WHERE record='" . $_POST['record'] . "';"; + } + syslog(LOG_NOTICE, $sql); + $result = mysqli_query($connect, $sql); if (! $result) { syslog(LOG_NOTICE, "db_profile_water: ".$sql." result: ".mysqli_error($connect)); } else { - syslog(LOG_NOTICE, "db_profile_water: inserted ".$_GET['name']); + if (isset($_POST['update'])) { + syslog(LOG_NOTICE, "db_profile_water: updated record ".$_POST['record']); + } else { + $lastid = mysqli_insert_id($connect); + syslog(LOG_NOTICE, "db_profile_water: inserted record ".$lastid); + } } echo $result; -} else if (isset($_GET['update'])) { - // UPDATE COMMAND - $sql = "UPDATE `profile_water` SET name='" . mysqli_real_escape_string($connect, $_GET['name']); - $sql .= "', calcium='" . $_GET['calcium']; - $sql .= "', bicarbonate='" . $_GET['bicarbonate']; - $sql .= "', sulfate='" . $_GET['sulfate']; - $sql .= "', chloride='" . $_GET['chloride']; - $sql .= "', sodium='" . $_GET['sodium']; - $sql .= "', magnesium='" . $_GET['magnesium']; - $sql .= "', ph='" . $_GET['ph']; - $sql .= "', notes='" . mysqli_real_escape_string($connect, $_GET['notes']); - $sql .= "', total_alkalinity='" . $_GET['total_alkalinity']; - $sql .= "' WHERE record='" . $_GET['record'] . "';"; +} else if (isset($_POST['delete'])) { + // DELETE COMMAND + $sql = "DELETE FROM `profile_water` WHERE record='".$_POST['record']."';"; $result = mysqli_query($connect, $sql); if (! $result) { syslog(LOG_NOTICE, "db_profile_water: ".$sql." result: ".mysqli_error($connect)); } else { - syslog(LOG_NOTICE, "db_profile_water: updated record ".$_GET['record']); - } - echo $result; - -} else if (isset($_GET['delete'])) { - // DELETE COMMAND - $sql = "DELETE FROM `profile_water` WHERE record='".$_GET['record']."';"; - $result = mysqli_query($connect, $sql); - if (! $result) { - syslog(LOG_NOTICE, "db_profile_water: ".$sql." result: ".mysqli_error($connect)); - } else { - syslog(LOG_NOTICE, "db_profile_water: deleted record ".$_GET['record']); + syslog(LOG_NOTICE, "db_profile_water: deleted record ".$_POST['record']); } echo $result; } else { // SELECT COMMAND + $query = "SELECT * FROM profile_water ORDER BY name"; $result = mysqli_query($connect, $query) or die("SQL Error 1: " . mysqli_error($connect)); while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { $waters[] = array( diff -r 3ced4934e230 -r 63d0e40c58b9 www/js/profile_water.js --- a/www/js/profile_water.js Sat Jan 26 15:05:27 2019 +0100 +++ b/www/js/profile_water.js Sat Jan 26 19:24:36 2019 +0100 @@ -1,5 +1,5 @@ /***************************************************************************** - * Copyright (C) 2014-2018 + * Copyright (C) 2014-2019 * * Michiel Broek * @@ -33,8 +33,8 @@ okButton: $('#delOk'), cancelButton: $('#delCancel'), initContent: function () { - $('#delOk').jqxButton({ width: '65px', theme: theme }); - $('#delCancel').jqxButton({ width: '65px', theme: theme }); + $('#delOk').jqxButton({ template: "danger", width: '65px', theme: theme }); + $('#delCancel').jqxButton({ template: "success", width: '65px', theme: theme }); $('#delCancel').focus(); } }); @@ -43,7 +43,22 @@ $(document).ready(function () { + + var dataRecord = {}; + var url = "includes/db_profile_water.php"; + // 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.' }); + // prepare the data var source = { datatype: "json", @@ -71,6 +86,7 @@ url: url, cache: false, data: data, + type: "POST", success: function (data, status, xhr) { // delete command is executed. commit(true); @@ -87,6 +103,7 @@ url: url, cache: false, data: data, + type: "POST", success: function (data, status, xhr) { commit(true); }, @@ -102,6 +119,7 @@ url: url, cache: false, data: data, + type: "POST", success: function (data, status, xhr) { // update command is executed. commit(true); @@ -113,17 +131,17 @@ } }; // initialize the input fields. - $("#name").jqxInput({ theme: theme, width: 250, height: 23 }); - $("#calcium").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#bicarbonate").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#sulfate").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#chloride").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#sodium").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#magnesium").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#ph").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); + $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); + $("#notes").jqxInput({ theme: theme, width: 800, height: 100 }); + $("#calcium").jqxNumberInput( Spin1dec1 ); + $("#bicarbonate").jqxNumberInput( Spin1dec1 ); + $("#sulfate").jqxNumberInput( Spin1dec1 ); + $("#chloride").jqxNumberInput( Spin1dec1 ); + $("#sodium").jqxNumberInput( Spin1dec1 ); + $("#magnesium").jqxNumberInput( Spin1dec1 ); + $("#ph").jqxNumberInput( Spin2pH ); + $("#total_alkalinity").jqxNumberInput( Spin1dec1 ); - $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); - $("#total_alkalinity").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; // initialize jqxGrid @@ -139,40 +157,42 @@ var addButton = $("
Nieuw
"); container.append(addButton); statusbar.append(container); - addButton.jqxButton({ theme: theme, width: 120, height: 20 }); + addButton.jqxButton({ theme: theme, width: 90, height: 20 }); // add new row. addButton.click(function (event) { editrow = -1; - $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); + $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); $("#name").val(''); - $("#calcium").val(''); - $("#bicarbonate").val(''); - $("#sulfate").val(''); - $("#chloride").val(''); - $("#sodium").val(''); - $("#magnesium").val(''); - $("#ph").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(''); + $("#total_alkalinity").val(0); $("#popupWindow").jqxWindow('open'); }); }, - filterable: true, + filterable: false, filtermode: 'excel', columns: [ - { text: 'Water Profiel', datafield: 'name', width: 250 }, - { text: 'Opmerkingen', datafield: 'notes', width: 475 }, - { text: 'Natrium', datafield: 'sodium', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Chloride', datafield: 'chloride', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Sulfaat', datafield: 'sulfate', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Zuurgraad', datafield: 'ph', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Alkaliteit', datafield: 'total_alkalinity', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Wijzig', datafield: 'Edit', columntype: 'button', cellsrenderer: function () { + { 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: 'Wijzig', 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: 230, y: 30 } }); + $("#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); @@ -191,14 +211,31 @@ } ] }); + + $("#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: 860, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.40 + 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({ theme: theme }); + $("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme }); $("#Delete").click(function () { if (editrow >= 0) { // Open a popup to confirm this action. @@ -210,45 +247,34 @@ } $("#popupWindow").jqxWindow('hide'); }); - $("#Cancel").jqxButton({ theme: theme }); - $("#Save").jqxButton({ theme: theme }); + $("#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(), - 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')) - }; + rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); + } + var 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); - $("#popupWindow").jqxWindow('hide'); } else { - // Insert a record - var newrow = { - record: -1, - 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')) - }; - $('#jqxgrid').jqxGrid('addrow', null, newrow); - $("#popupWindow").jqxWindow('hide'); + $('#jqxgrid').jqxGrid('addrow', null, row); } + $("#popupWindow").jqxWindow('hide'); + location.reload( true ); // reload ourself. }); createDelElements(); }); diff -r 3ced4934e230 -r 63d0e40c58b9 www/profile_water.php --- a/www/profile_water.php Sat Jan 26 15:05:27 2019 +0100 +++ b/www/profile_water.php Sat Jan 26 19:24:36 2019 +0100 @@ -13,46 +13,49 @@