--- 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 <mbroek at mbse dot eu>
*
@@ -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 = $("<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: 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();
});