Devices edit popup layout ready.

Fri, 19 Apr 2024 11:31:46 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Fri, 19 Apr 2024 11:31:46 +0200
changeset 687
f5d05b420732
parent 686
372b2442a30f
child 688
8bf6389e59a2

Devices edit popup layout ready.

thermferm/devices.c file | annotate | diff | comparison | revisions
thermferm/devices.h file | annotate | diff | comparison | revisions
thermferm/server.c file | annotate | diff | comparison | revisions
www/devices.php file | annotate | diff | comparison | revisions
www/images/add.png file | annotate | diff | comparison | revisions
www/includes/global.inc.php file | annotate | diff | comparison | revisions
www/js/devices.js file | annotate | diff | comparison | revisions
www/js/global.js file | annotate | diff | comparison | revisions
--- a/thermferm/devices.c	Thu Apr 18 17:17:22 2024 +0200
+++ b/thermferm/devices.c	Fri Apr 19 11:31:46 2024 +0200
@@ -377,7 +377,7 @@
 /*
  * Return json data for one device.
  */
-char *device_json(devices_list *device, bool full)
+char *device_json(devices_list *device)
 {
     char	*payload;
     char	vbuf[64];
@@ -396,28 +396,22 @@
     payload = xstrcat(payload, (char *)",\"value\":");
     snprintf(vbuf, 63, "%d", device->value);
     payload = xstrcat(payload, vbuf);
-    if (full) {
-    	payload = xstrcat(payload, (char *)",\"offset\":");
-    	snprintf(vbuf, 63, "%d", device->offset);
-    	payload = xstrcat(payload, vbuf);
-    }
+    payload = xstrcat(payload, (char *)",\"offset\":");
+    snprintf(vbuf, 63, "%d", device->offset);
+    payload = xstrcat(payload, vbuf);
     payload = xstrcat(payload, (char *)",\"present\":\"");
     payload = xstrcat(payload, (char *)DEVPRESENT[device->present]);
     payload = xstrcat(payload, (char *)"\"");
-    if (full) {
-    	payload = xstrcat(payload, (char *)",\"gpiopin\":");
-    	snprintf(vbuf, 63, "%d", device->gpiopin);
-    	payload = xstrcat(payload, vbuf);
-    }
+    payload = xstrcat(payload, (char *)",\"gpiopin\":");
+    snprintf(vbuf, 63, "%d", device->gpiopin);
+    payload = xstrcat(payload, vbuf);
     payload = xstrcat(payload, (char *)",\"inuse\":");
     snprintf(vbuf, 63, "%d", device->inuse);
     payload = xstrcat(payload, vbuf);
     payload = xstrcat(payload, (char *)",\"description\":\"");
     payload = xstrcat(payload, device->description);
-    if (full) {
-    	payload = xstrcat(payload, (char *)"\",\"comment\":\"");
-    	payload = xstrcat(payload, device->comment);
-    }
+    payload = xstrcat(payload, (char *)"\",\"comment\":\"");
+    payload = xstrcat(payload, device->comment);
     payload = xstrcat(payload, (char *)"\",\"timestamp\":");
     snprintf(vbuf, 63, "%ld", (long)device->timestamp);
     payload = xstrcat(payload, vbuf);
@@ -438,7 +432,7 @@
     for (device = Config.devices; device; device = device->next) {
 	if (comma)
 	    payload = xstrcat(payload, (char *)",");
-	payloadu = device_json(device, false);
+	payloadu = device_json(device);
 	payload = xstrcat(payload, payloadu);
 	comma = true;
 	free(payloadu);
--- a/thermferm/devices.h	Thu Apr 18 17:17:22 2024 +0200
+++ b/thermferm/devices.h	Fri Apr 19 11:31:46 2024 +0200
@@ -7,7 +7,7 @@
 int device_out(char *uuid, int value);
 int device_in(char *uuid, int *value);
 
-char *device_json(devices_list *device, bool full);
+char *device_json(devices_list *device);
 
 int devices_detect(void);
 
--- a/thermferm/server.c	Thu Apr 18 17:17:22 2024 +0200
+++ b/thermferm/server.c	Fri Apr 19 11:31:46 2024 +0200
@@ -352,7 +352,7 @@
 	    for (device = Config.devices; device; device = device->next) {
 		if (comma)
 		    payload = xstrcat(payload, (char *)",");
-		payloadu = device_json(device, false);
+		payloadu = device_json(device);
 		payload = xstrcat(payload, payloadu);
 		comma = true;
 		free(payloadu);
@@ -373,7 +373,7 @@
 		    payload = xstrcat(payload, (char *)"-");
 		    payload = xstrcat(payload, vbuf);
 		    payload = xstrcat(payload, (char *)"\",\"metric\":");
-		    payloadu = device_json(device, true);
+		    payloadu = device_json(device);
 		    payload = xstrcat(payload, payloadu);
 		    free(payloadu);
 		    payloadu = NULL;
--- a/www/devices.php	Thu Apr 18 17:17:22 2024 +0200
+++ b/www/devices.php	Fri Apr 19 11:31:46 2024 +0200
@@ -16,7 +16,7 @@
      <table style="width: 100%;">
       <tr>
        <td style="vertical-align: top; float: right; padding: 3px;">Uuid:</td>
-       <td align="left" colspan="5" style="vertical-align: top; padding: 3px;"><input id="dev_uuid" /></td>
+       <td align="left" colspan="5" style="vertical-align: top; padding: 3px;"><input id="dev_uuid" readonly /></td>
       </tr>
       <tr>
        <td style="vertical-align: top; float: right; padding: 3px;">Description:</td>
@@ -39,7 +39,7 @@
       </tr>
       <tr>
        <td style="vertical-align: top; float: right; padding: 3px;">Address:</td>
-       <td colspan="2" style="padding: 3px;"><div style="float: left;" id="dev_address"></div></td>
+       <td align="left" colspan="2" style="vertical-align: top; padding: 3px;"><input id="dev_address" /></td>
        <td style="vertical-align: top; float: right; padding: 3px;">Subdevice:</td>
        <td colspan="2" style="padding: 3px;"><div style="float: left;" id="dev_subdevice"></div></td>
       </tr>
@@ -53,18 +53,19 @@
        <td style="vertical-align: top; float: right; padding: 3px;">In use:</td>
        <td colspan="2" style="padding: 3px;"><div style="float: left;" id="dev_inuse"></div></td>
        <td style="vertical-align: top; float: right; padding: 3px;">Last change:</td>
-       <td colspan="2" style="padding: 3px;"><div style="float: left;" id="dev_timestamp"></div></td>
+       <td align="left" colspan="2" style="vertical-align: top; padding: 3px;"><input id="dev_timestamp" readonly /></td>
       </tr>
       <tr>
        <td style="vertical-align: top; float: right; padding: 3px;">Comment:</td>
        <td align="left" colspan="5" style="vertical-align: top; padding: 3px;"><input id="dev_comment" /></td>
       </tr>
+      <tr><td colspan="6"></td></tr>
       <tr>
        <td style="padding-top: 20px;" align="right"><input type="button" id="Delete" value="Delete" /></td>
        <td></td>
        <td></td><td></td>
-       <td align="right"></td>
-       <td style="padding-top: 20px;" align="left"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
+       <td style="padding-top: 20px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /></td>
+       <td style="padding-top: 20px;" align="left"><input id="Cancel" type="button" value="Cancel" /></td>
       </tr>
      </table>
      <div style="float: right; margin-top: 290px; margin-bottom: 10px;">
Binary file www/images/add.png has changed
--- a/www/includes/global.inc.php	Thu Apr 18 17:17:22 2024 +0200
+++ b/www/includes/global.inc.php	Fri Apr 19 11:31:46 2024 +0200
@@ -127,11 +127,8 @@
   <script src="jqwidgets/jqxswitchbutton.js"></script>
   <script src="jqwidgets/jqxradiobutton.js"></script>
   <script src="jqwidgets/jqxcheckbox.js"></script>
-
   <script src="jqwidgets/jqxgauge.js"></script>
-
   <script src="jqwidgets/jqxdraw.js"></script>
-
   <script src="jqwidgets/globalization/globalize.js"></script>
   <script src="js/global.js"></script>
 <?php
@@ -191,12 +188,12 @@
 ?>
    <div id="eventWindow">
     <div>
-     Bevestig verwijderen
+     Confirm delete
     </div>
     <div>
      <div>
-      Klik "OK" om dit record definitief te verwijderen.<br>
-      Druk "Cancel" om te sluiten zonder dit record te verwijderen.
+      Press "OK" to confirm to delete this record.<br>
+      Press "Cancel" to close without deleting this record.
      </div>
      <div>
       <div style="float: right; margin-top: 15px; margin-bottom: 10px;">
--- 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;
--- a/www/js/global.js	Thu Apr 18 17:17:22 2024 +0200
+++ b/www/js/global.js	Fri Apr 19 11:31:46 2024 +0200
@@ -43,7 +43,14 @@
  datatype: 'array',
  datafields: [{ name: 'id' }, { name: 'mno' }, { name: 'en' }]
 },
-DeviceDirectionAdapter = new $.jqx.dataAdapter(DeviceDirectionSource);
+DeviceDirectionAdapter = new $.jqx.dataAdapter(DeviceDirectionSource),
+
+// options for editors
+
+Show0dec = { inputMode: 'simple', theme: theme, width: 90, height: 23, readOnly: true, decimalDigits: 0 },
+Spin0dec = { inputMode: 'simple', theme: theme, width: 110, height: 23, min: 0, decimalDigits: 0, spinButtons: true },
+  SubInt = { inputMode: 'simple', theme: theme, width: 110, height: 23, min: 0, max: 63, decimalDigits: 0, spinButtons: true },
+ GPIOInt = { inputMode: 'simple', theme: theme, width: 110, height: 23, min: -1, max:31, decimalDigits: 0, spinButtons: true };
 
 
 /* Websocket interface. Place "websocket.onmessage = function(evt) {}" in the user script. */

mercurial