diff -r 372b2442a30f -r f5d05b420732 www/js/devices.js
--- a/www/js/devices.js	Thu Apr 18 17:17:22 2024 +0200
+++ b/www/js/devices.js	Fri Apr 19 11:31:46 2024 +0200
@@ -56,17 +56,22 @@
    { 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;
+ editrow = -1,
+ tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
 
  // initialize the input fields.
- $('#dev_uuid').jqxInput({ theme: theme, width: 640, height: 23 });
- $('#dev_description').jqxInput({ theme: theme, width: 640, height: 23 });
+ $('#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,
@@ -85,7 +90,23 @@
   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({
@@ -121,8 +142,7 @@
    { text: 'Description', datafield: 'description' },
    { text: 'Last change', datafield: 'timestamp', width: 200,
      cellsrenderer: function(index, datafield, value, defaultvalue, column, rowdata) {
-      var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
-      var date = new Date((value * 1000) - tzoffset).toISOString().slice(0, 19).replace("T", " ");;
+      var date = new Date((value * 1000) - tzoffset).toISOString().slice(0, 19).replace("T", " ");
       return '<span style="margin: 3px; margin-top: 6px; float: left;">' +  date + '</span>';
     }
    },
@@ -135,18 +155,18 @@
      dataRecord = $('#jqxgrid').jqxGrid('getrowdata', editrow);
      $('#dev_uuid').val(dataRecord.uuid);
      $('#dev_description').val(dataRecord.description);
-     // dev_type
-     // dev_direction
-     // dev_value
-     // dev_offset
-     // dev_address
-     // dev_subdevice
-     // dev_present
-     // dev_gpiopin
-     // dev_inuse
-     // dev_timestamp
-     // dev_comment
-
+     $('#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');
     }
@@ -169,6 +189,36 @@
   $('#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;