diff -r 8bf6389e59a2 -r f94b525f7563 www/js/set_devices.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/www/js/set_devices.js Fri Apr 19 20:56:55 2024 +0200 @@ -0,0 +1,250 @@ +/***************************************************************************** + * Copyright (C) 2024 + * + * Michiel Broek + * + * This file is part of mbsePi-apps + * + * 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 = {}, + source = { + datatype: 'json', + cache: false, + datafields: [ + { name: 'uuid', type: 'string' }, + { name: 'type', type: 'string' }, + { name: 'address', type: 'string' }, + { name: 'subdevice', type: 'int' }, + { name: 'inuse', type: 'int' }, + { name: 'description', type: 'string' }, + { name: 'direction', type: 'string' }, + { name: 'value', type: 'int' }, + { name: 'offset', type: 'int' }, + { name: 'present', type: 'string' }, + { name: 'gpiopin', type: 'int' }, + { name: 'comment', type: 'string' }, + { name: 'timestamp', type: 'int' } + ], + id: 'uuid', + url: 'getdevices.php' + }, + dataAdapter = new $.jqx.dataAdapter(source), + editrow = -1, + tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds + + // initialize the input fields. + $('#dev_uuid').jqxInput({ theme: theme, width: 480, height: 23 }); + $('#dev_description').jqxInput({ theme: theme, width: 800, height: 23 }); + $('#dev_type').jqxDropDownList({ + theme: theme, + source: DeviceTypeAdapter, + valueMember: 'mno', + displayMember: 'en', + width: 180, + height: 23, + autoDropDownHeight: true + }); + $('#dev_direction').jqxDropDownList({ + theme: theme, + source: DeviceDirectionAdapter, + valueMember: 'mno', + displayMember: 'en', + width: 180, + height: 23, + autoDropDownHeight: true + }); + $('#dev_value').jqxNumberInput(Spin0dec); + $('#dev_offset').jqxNumberInput(Spin0dec); + $('#dev_address').jqxInput({ theme: theme, width: 200, height: 23 }); + $('#dev_subdevice').jqxNumberInput(SubInt); + $('#dev_present').jqxDropDownList({ + theme: theme, + source: DevicePresentAdapter, + valueMember: 'mno', + displayMember: 'en', + width: 180, + height: 23, + autoDropDownHeight: true + }); + $('#dev_gpiopin').jqxNumberInput(GPIOInt); + $('#dev_inuse').jqxNumberInput(Show0dec); + $('#dev_timestamp').jqxInput({ theme: theme, width: 200, height: 23 }); + $('#dev_comment').jqxInput({ theme: theme, width: 800, height: 23 }); + + // initialize jqxGrid + $('#jqxgrid').jqxGrid({ + width: 1280, + height: 630, + source: dataAdapter, + theme: theme, + showstatusbar: true, + renderstatusbar: function(statusbar) { + var rowCount = $("#jqxgrid").jqxGrid('getrows').length; + statusbar.append('
Total items: ' + rowCount + '
'); + var container, addButton, impButton; + container = $('
'); + addButton = $('
Nieuw
'); + container.append(addButton); + statusbar.append(container); + addButton.jqxButton({ theme: theme, width: 90, height: 17 }); + // add new row. + addButton.click(function(event) { + editrow = -1; + $('#popupWindow').jqxWindow({ position: { x: 110, y: 30 } }); + $('#dev_uuid').val(''); + $('#dev_description').val(''); + $('#dev_type').val('NA'); + $('#dev_direction').val('UNDEF'); + $('#dev_value').val(0); + $('#dev_offset').val(0); + $('#dev_address').val(''); + $('#dev_subdevice').val(0); + $('#dev_present').val('UNDEF'); + $('#dev_gpiopin').val(-1); + $('#dev_inuse').val(0); + var now = new Date(); + var date = new Date(now - tzoffset).toISOString().slice(0, 19).replace("T", " "); + $('#dev_timestamp').val(date); + $('#dev_comment').val(''); + + $('#popupWindow').jqxWindow('open'); + }); + }, + columns: [ + { text: 'Address', datafield: 'address', width: 200 }, + { text: 'Subdevice', datafield: 'subdevice', width: 100 }, + { text: 'Direction', datafield: 'direction', width: 120 }, + { text: 'Value', datafield: 'value', width: 80 }, + { text: 'Description', datafield: 'description' }, + { text: 'Last change', datafield: 'timestamp', width: 200, + cellsrenderer: function(index, datafield, value, defaultvalue, column, rowdata) { + var date = new Date((value * 1000) - tzoffset).toISOString().slice(0, 19).replace("T", " "); + return '' + date + ''; + } + }, + { text: '', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function() { + return 'Edit'; + }, buttonclick: function(row) { + // open the popup window when the user clicks a button. + editrow = row; + $('#popupWindow').jqxWindow({ position: { x: 110, y: 15 } }); + dataRecord = $('#jqxgrid').jqxGrid('getrowdata', editrow); + $('#dev_uuid').val(dataRecord.uuid); + $('#dev_description').val(dataRecord.description); + $('#dev_type').val(dataRecord.type); + $('#dev_direction').val(dataRecord.direction); + $('#dev_value').val(dataRecord.value); + $('#dev_offset').val(dataRecord.offset); + $('#dev_address').val(dataRecord.address); + $('#dev_subdevice').val(dataRecord.subdevice); + $('#dev_present').val(dataRecord.present); + $('#dev_gpiopin').val(dataRecord.gpiopin); + $('#dev_inuse').val(dataRecord.inuse); + var date = new Date((dataRecord.timestamp * 1000) - tzoffset).toISOString().slice(0, 19).replace("T", " "); + $('#dev_timestamp').val(date); + $('#dev_comment').val(dataRecord.comment); + // show the popup window. + $('#popupWindow').jqxWindow('open'); + } + } + ], + }); + + // initialize the popup window and buttons. + $('#popupWindow').jqxWindow({ + width: 1050, + height: 625, + resizable: false, + theme: theme, + isModal: true, + autoOpen: false, + cancelButton: $('#Cancel'), + modalOpacity: 0.40 + }); + $('#popupWindow').on('open', function() { + $('#dev_description').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 }); + $('#Save').click(function() { + var row, rowID = -1; + if (editrow >= 0) { + rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); + } + row = { + uuid: dataRecord.uuid, + type: $('#type').val() + }; + if (editrow >= 0) { + $('#jqxgrid').jqxGrid('updaterow', rowID, row); + } else { + $('#jqxgrid').jqxGrid('addrow', null, row); + } + $('#popupWindow').jqxWindow('hide'); + }); + createDelElements(); + + websocket.onmessage = function(evt) { + var msg = evt.data; + var obj = JSON.parse(msg); + + if (obj.ping) { + websocket.send('{"pong":' + obj.ping + '}'); + } + + if (obj.type == 'device') { + // Use the message to trigger update. + $('#jqxgrid').jqxGrid('updatebounddata'); + } + } +});