diff -r c6021dd94afb -r 35675eadc655 www/js/profile_water.js --- a/www/js/profile_water.js Fri Oct 18 13:09:37 2019 +0200 +++ b/www/js/profile_water.js Fri Oct 18 16:21:54 2019 +0200 @@ -22,258 +22,260 @@ 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'); + $('#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 () { - - // 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.' }); +$(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; + 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; - // 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 ); + // 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.' }); + + // 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); - // initialize jqxGrid - $("#jqxgrid").jqxGrid({ - width: 1280, - height: 630, - source: dataAdapter, - theme: theme, - showstatusbar: true, - renderstatusbar: function (statusbar) { - var container = $("
"), - addButton = $("
Nieuw
"); - 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); - // show the popup window. - $("#popupWindow").jqxWindow('open'); - } - } - ] - }); + // initialize jqxGrid + $('#jqxgrid').jqxGrid({ + width: 1280, + height: 630, + source: dataAdapter, + theme: theme, + showstatusbar: true, + renderstatusbar: function(statusbar) { + var container = $('
'), + addButton = $('
Nieuw
'); + 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); + // show the popup window. + $('#popupWindow').jqxWindow('open'); + } + } + ] + }); - $("#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); - }); + $('#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: 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(); + // 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(); });