From 0391b24d282a53fb250133c0e97be3842a386fef Mon Sep 17 00:00:00 2001
From: Onkel Andy <onkelandy@hotmail.com>
Date: Sun, 17 Sep 2023 23:17:08 +0200
Subject: [PATCH] jsonread plugin: clean up and improve web interface (using
 internal datatables, etc.)

---
 jsonread/webif/__init__.py          |  23 +++----
 jsonread/webif/templates/index.html | 102 +++++++++++-----------------
 2 files changed, 48 insertions(+), 77 deletions(-)

diff --git a/jsonread/webif/__init__.py b/jsonread/webif/__init__.py
index f7bf64677..f71cb20dd 100755
--- a/jsonread/webif/__init__.py
+++ b/jsonread/webif/__init__.py
@@ -26,15 +26,12 @@
 import datetime
 import time
 import os
+import json
 
 from lib.item import Items
 from lib.model.smartplugin import SmartPluginWebIf
 
 
-# ------------------------------------------
-#    Webinterface of the plugin
-# ------------------------------------------
-
 import cherrypy
 import csv
 from jinja2 import Environment, FileSystemLoader
@@ -69,8 +66,10 @@ def index(self, reload=None):
         :return: contents of the template after beeing rendered
         """
         tmpl = self.tplenv.get_template('index.html')
+        pagelength = self.plugin.get_parameter_value('webif_pagelength')
         # add values to be passed to the Jinja2 template eg: tmpl.render(p=self.plugin, interface=interface, ...)
         return tmpl.render(p=self.plugin,
+                           webif_pagelength=pagelength,
                            items=self.plugin._items,
                            item_count=0)
 
@@ -89,14 +88,10 @@ def get_data_html(self, dataSet=None):
             # get the new data
             data = {}
 
-            # data['item'] = {}
-            # for i in self.plugin.items:
-            #     data['item'][i]['value'] = self.plugin.getitemvalue(i)
-            #
-            # return it as json the the web page
-            # try:
-            #     return json.dumps(data)
-            # except Exception as e:
-            #     self.logger.error("get_data_html exception: {}".format(e))
+            for item in self.plugin._items.keys():
+                data[item.property.path] = item.property.value
+            try:
+                return json.dumps(data)
+            except Exception as e:
+                self.logger.error("get_data_html exception: {}".format(e))
         return {}
-
diff --git a/jsonread/webif/templates/index.html b/jsonread/webif/templates/index.html
index d8c1918f3..5e977be97 100755
--- a/jsonread/webif/templates/index.html
+++ b/jsonread/webif/templates/index.html
@@ -3,7 +3,7 @@
 {% set logo_frame = false %}
 
 <!-- set update_interval to a value > 0 (in milliseconds) to enable periodic data updates -->
-{% set update_interval = 0 %}
+{% set update_interval = 30000 %}
 
 <!--
 	Additional script tag for plugin specific javascript code go into this block
@@ -14,37 +14,42 @@
 		if (dataSet === 'devices_info' || dataSet === null) {
 			var objResponse = JSON.parse(response);
 			myProto = document.getElementById(dataSet);
-			for (var device in objResponse) {
-				/*
-				shngInsertText (device+'_source', objResponse[device]['source']);
-				shngInsertText (device+'_powerState', objResponse[device]['powerState']);
-				*/
+			for (item in objResponse) {
+				shngInsertText (item+'_value', objResponse[item], "itemtable", 10);
 			}
 		}
 	}
 </script>
-
-/*
- * The combined file was created by the DataTables downloader builder:
- *   https://datatables.net/download
- *
- * To rebuild or modify this file with the latest versions of the included
- * software please visit:
- *   https://datatables.net/download/#dt/dt-1.10.21/fh-3.1.7/r-2.2.5
- *
- * Included libraries:
- *   DataTables 1.10.21, FixedHeader 3.1.7, Responsive 2.2.5
- */
-<link rel="stylesheet" type="text/css" href="static/datatables.css">
-<script type="text/javascript" charset="utf8" src="static/datatables.js"></script>
-
 <script>
-$(document).ready( function () {
-    $('#itemtable').DataTable( {
-        "paging": false,
-        fixedHeader: true
-        } );
-} );
+	  $(document).ready( function () {
+			$(window).trigger('datatables_defaults');
+			try {
+				table = $('#itemtable').DataTable( {
+					columnDefs: [
+					{
+						title: '',
+						targets: 0, "className": ""
+					},
+					{
+						title: '{{ _("Item") }}',
+						targets: 1, "className": "item"
+					},
+					{
+						title: '{{ _("jsonread_filter") }}',
+						targets: 2, "className": "send"
+					},
+					{
+						title: '{{ _("Wert") }}',
+						targets: 3, "className": "remote"
+					}
+					].concat($.fn.dataTable.defaults.columnDefs)
+				});
+			}
+			catch (e) {
+				console.log("Datatable JS not loaded, showing standard table without reorder option " +e);
+			}
+
+		});
 </script>
 {% endblock pluginscripts %}
 
@@ -66,27 +71,8 @@
 </table>
 {% endblock headtable %}
 
-
-<!--
-	Additional buttons for the web interface (if any are needed) - displayed below the headtable-section
--->
-{% block buttons %}
-{% if 1==2 %}
-	<div>
-		<button id="btn1" class="btn btn-shng btn-sm" name="scan" onclick="shngPost('', {learn: 'on'})"><i class="fas fa-question"></i>&nbsp;&nbsp;&nbsp;{{ _('nach Devices suchen') }}&nbsp;</button>
-	</div>
-{% endif %}
-{% endblock %}
-
-<!--
-	Define the number of tabs for the body of the web interface (1 - 3)
--->
 {% set tabcount = 3 %}
 
-
-<!--
-	Set the tab that will be visible on start, if another tab that 1 is wanted (1 - 3)
--->
 {% set item_count = p._items|length %}
 {% if item_count==0 %}
 	{% set start_tab = 1 %}
@@ -111,28 +97,19 @@
 -->
 {% set tab2title = "<strong>" ~ item_count ~ " " ~ _("Items definiert") ~ "</strong>" %}
 {% block bodytab2 %}
-<div class="table-responsive" style="margin-left: 3px; margin-right: 3px;" class="row">
-	<div class="col-sm-12">
-		<table id="itemtable" class="table table-striped table-hover">
-			<thead>
-				<tr>
-					<th style="border-bottom: 1px solid var(--shng-border);">{{ _('Item') }}</th>
-					<th style="border-bottom: 1px solid var(--shng-border);">{{ _('jsonread_filter') }}</th>
-					<th style="border-bottom: 1px solid var(--shng-border); width: 100;">{{ _('Wert') }}</th>
-					</tr>
-			</thead>
+
+		<table id="itemtable">
 			<tbody>
 			{% for item in p._items %}
-				<tr>
-					<td class="py-1">{{ item._path }}</td>
-					<td class="py-1">{{ p.get_iattr_value(item.conf, 'jsonread_filter') }}</td>
-					<td class="py-1">{{ item() }}</td>
+				<tr><td></td>
+					<td class="py-1" id="{{ item }}_path">{{ item._path }}</td>
+					<td class="py-1" id="{{ item }}_filter">{{ p.get_iattr_value(item.conf, 'jsonread_filter') }}</td>
+					<td class="py-1" id="{{ item }}_value">{{ item() }}</td>
 				</tr>
 			{% endfor %}
 			</tbody>
 		</table>
-	</div>
-</div>
+
 {% endblock bodytab2 %}
 
 <!--
@@ -144,4 +121,3 @@
 	<pre>{{ p._lastresultjq }}</pre>
 </div>
 {% endblock bodytab3 %}
-