Merge pull request #564 from onkelandy/http

Http Module: Updates to datatables and pageresize

dev/sample_mqttplugin/webif/__init__.py

@@ -68,7 +68,7 @@ def index(self, reload=None):
 
         Render the template and return the html file to be delivered to the browser
 
-        :return: contents of the template after beeing rendered
+        :return: contents of the template after being rendered
         """
         self.plugin.get_broker_info()
         # try to get the webif pagelength from the module.yaml configuration

dev/sample_mqttplugin/webif/templates/index.html

@@ -18,15 +18,6 @@
 		Of course you can also overwrite defaults by putting the option declarations in {} below.
 		*/
 		$(window).trigger('datatables_defaults');
-		{% if webif_pagelength is defined %}webif_pagelength = {{ webif_pagelength|int }};{% endif %}
-		if (isNaN(parseFloat(webif_pagelength)) || webif_pagelength == 0) {
-			resize = true;
-			webif_pagelength = -1;
-			console.log('Activating automatic table resize ' + webif_pagelength);
-		}
-		else {
-			resize = false;
-		}
 		try {
 			/*
 			Copy this part for every datatable on your page. Adjust options if necessary.
@@ -36,8 +27,7 @@
 			  /* If you want to define your own columnDefs options (e.g. for hiding a column by default), use the concat function shown here.
 			  */
 			  columnDefs: [{ "targets": [2], "className": "value"}].concat($.fn.dataTable.defaults.columnDefs),
-			  pageLength: webif_pagelength,
-			  pageResize: resize});
+			  });
 		}
 		catch (e) {
 			console.warn("Datatable JS not loaded, showing standard table without reorder option " + e);

dev/sample_plugin/webif/__init__.py

@@ -68,7 +68,7 @@ def index(self, reload=None):
 
         Render the template and return the html file to be delivered to the browser
 
-        :return: contents of the template after beeing rendered
+        :return: contents of the template after being rendered
         """
         pagelength = self.plugin.get_parameter_value('webif_pagelength')
         tmpl = self.tplenv.get_template('index.html')

dev/sample_plugin/webif/templates/index.html

@@ -90,26 +90,15 @@
 		Of course you can also overwrite defaults by putting the option declarations in {} below.
 		*/
 		$(window).trigger('datatables_defaults');
-		{% if webif_pagelength is defined %}webif_pagelength = {{ webif_pagelength|int }};{% endif %}
-		if (isNaN(parseFloat(webif_pagelength)) || webif_pagelength == 0) {
-			resize = true;
-			webif_pagelength = -1;
-			console.log('Activating automatic table resize ' + webif_pagelength);
-		}
-		else {
-			resize = false;
-		}
 		try {
 			/*
 			Copy this part for every datatable on your page. Adjust options if necessary.
-			pageLength and pageResize should be included as they are to adjust it based on the plugin settings
 			*/
 			maintable = $('#maintable').DataTable( {
 			  /* If you want to define your own columnDefs options (e.g. for hiding a column by default), use the concat function shown here.
 			  */
 			  columnDefs: [{ "targets": [2], "className": "value"}].concat($.fn.dataTable.defaults.columnDefs),
-			  pageLength: webif_pagelength,
-			  pageResize: resize});
+			  });
 		}
 		catch (e) {
 			console.warn("Datatable JS not loaded, showing standard table without reorder option " + e);

doc/user/source/entwicklung/plugins/kurzanleitung/webinterface.rst

@@ -64,7 +64,9 @@ Cookies
 Um Einstellungen im Webinterface dauerhaft zu speichern, sollten die entsprechenden
 Werte als Browser-Cookie gespeichert werden. Eine einfache Möglichkeit dazu wird
 seit *SmarthomeNG 1.10* angeboten. Zum Speichern von Cookies steht die Funktion
-``setCookie(<Cookiename>, <Cookiewert>, <Dauer der Speicherung>, <Pluginname>)`` bereit, für das Laden ``getCookie(<Cookiename>)``. Im Folgenden Beispiel wird beim Laden der Seite das Cookie
+``setCookie(<Cookiename>, <Cookiewert>, <Dauer der Speicherung>, <Pluginname>)`` bereit, für das Laden ``getCookie(<Cookiename>)``. Cookies können gelöscht werden, indem 0 als Dauer angegebene wird.
+
+Im Folgenden Beispiel wird beim Laden der Seite das Cookie
 ausgelesen. Ist dieses (noch) nicht gesetzt, wird ein leerer Wert zurückgegeben,
 der im Code entsprechend abgefangen werden muss. Beim Klick auf einen Button wird
 beispielhaft ein Cookie namens "sort_order" mit dem Wert "alpha-asc" für ein Jahr (365 Tage) gespeichert.

doc/user/source/entwicklung/plugins/kurzanleitung/webinterface_automatic_update.rst

@@ -287,8 +287,6 @@ anzugeben ist (0 wäre die erste Tabellenspalte, 1 die zweite, etc.).
 .. code-block:: html+jinja
 
     table = $('#maintable').DataTable( {
-      "pageLength": webif_pagelength,
-      "pageResize": resize,
       "columnDefs": [{ "targets": 1, "className": "none"}].concat($.fn.dataTable.defaults.columnDefs)
     } );
 

doc/user/source/entwicklung/plugins/kurzanleitung/webinterface_filling_webinterface.rst

@@ -39,7 +39,7 @@ Die folgenden Schritte dienen dazu, das Webinterface mit Leben zu füllen:
 
             Render the template and return the html file to be delivered to the browser
 
-            :return: contents of the template after beeing rendered
+            :return: contents of the template after being rendered
             """
             pagelength = self.plugin.get_parameter_value('webif_pagelength')
             tmpl = self.tplenv.get_template('index.html')
@@ -136,17 +136,9 @@ Die folgenden Schritte dienen dazu, das Webinterface mit Leben zu füllen:
         <script>
           $(document).ready( function () {
             $(window).trigger('datatables_defaults'); // loading default behaviour
-            {% if webif_pagelength is defined %}webif_pagelength = {{ webif_pagelength|int }};{% endif %}
-            if (isNaN(parseFloat(webif_pagelength)) || webif_pagelength == 0) {
-              resize = true;
-              webif_pagelength = -1;
-            }
-            else {
-              resize = false;
-            }
-            console.log("Using page length from http module/plugin " + webif_pagelength + ", pageResize: " + resize);
+
             try {
-              maintable = $('#maintable').DataTable( {pageLength: webif_pagelength, pageResize: resize} ); // put more options into {} if needed
+              maintable = $('#maintable').DataTable( {} ); // put more options into {} if needed
               <table_xx> = $('#<table_id>').DataTable( {} ); // delete or change name of table and id
             }
             catch (e) {

doc/user/source/entwicklung/plugins/kurzanleitung/webinterface_plugin_interaction.rst

@@ -132,7 +132,7 @@ Tabellen in einem ``bodytab?`` können mit einer Schleife befüllt werden, das i
 
     {% block **bodytab1** %}
 
-            <table id="maintable" class="dataTableAdditional">
+            <table id="maintable">
                 <thead>
                     <tr>
                         <th></th>
@@ -181,7 +181,7 @@ Damit die IDs in den Wertetabellen eindeutig sind, verwenden wir die Variable au
     ...
 
     {% block **bodytab1** %}
-            <table id="maintable" class="dataTableAdditional">
+            <table id="maintable">
                 <thead>
                     <tr>
                         <th></th>
@@ -235,7 +235,7 @@ sollte das ``form`` Element NACH der Tabelle deklariert werden.
 .. code-block:: html+jinja
 
     {% block bodytab1 %}
-          <table id="maintable" class="dataTableAdditional">
+          <table id="maintable">
               <thead>
                   <tr>
                       <th></th>

modules/http/webif/gstatic/datatables/datatables.defaults.js

@@ -27,9 +27,10 @@ $(window).bind('datatables_defaults', function() {
 			// Set datatable useful defaults
 			$.extend( $.fn.dataTable.ext.classes, { "sTable": "table table-striped table-hover pluginList display dataTable dataTableAdditional" });
 			$.extend( $.fn.dataTable.defaults, {
-				lengthMenu: [ [100000, 25, 50, 100, -1], ["Auto", 25, 50, 100, "All"] ], // pagination menu
+				lengthMenu: [ [1, 25, 50, 100, -1], ["Auto", 25, 50, 100, "All"] ], // pagination menu
 				lengthChange: true,
 				paging: true,
+				pageResize: true,
 				stateSave: true,
 				pageLength: 100, // default to "100"
 				pagingType: "full_numbers", // include first and last in pagination menu
@@ -52,6 +53,7 @@ $(window).bind('datatables_defaults', function() {
 						if ($(this).hasClass( "datatable-responsive" )){
 							window.toggle = window.toggle * -1 + 0.1;
 							console.log("click responsive, recalc");
+							// Don't resize as it might mess up pagination when responsive icon is clicked...
 							//$(window).resize();
 							$(this).parent().parent().parent().DataTable().responsive.recalc();
 						}
@@ -72,37 +74,39 @@ $(window).bind('datatables_defaults', function() {
 					this.api().responsive.recalc();
 					initialized = true;
 					$(this).show();
+					// update pagelength and save cookie
+					let tab = $(this).closest('.tab-pane').attr('id');
+					window.pageLength[tab]['tableid'] = this.attr('id');
+					setCookie("pagelength", window.pageLength, 30, window.pluginname);
+
 					if (typeof window.row_count !== 'undefined' && window.row_count !== 'false') {
 						setTimeout(function() { window.row_count = $.fn.dataTable.tables({ visible: true, api: true }).rows( {page:'current'} ).count(); console.log("Row count after init is " + window.row_count);}, 200);
 					}
 					console.log("Instant value update is " + window.initial_update);
 					if (window.initial_update == 'true') {
 						setTimeout(function() { shngGetUpdatedData(); }, 200);
 					}
-					if (oSettings.oInit.pageResize == true);
-					{
-						setTimeout(function() { $(window).resize();  }, 2000);
-					}
+					//setTimeout(function() { $(window).resize();  }, 2000);
 
 				},
         responsive: {details: {type: 'column', renderer: $.fn.dataTable.Responsive.renderer.listHidden()}}, //makes it possible to update columns even if they are not shown as columns (but as collapsable items)
 				preDrawCallback: function (oSettings) {
 
+					// scroll
         	pageScrollPos = $(oSettings.nTableWrapper).find('.dataTables_scrollBody').scrollTop();
 					bodyScrollPos = $('html, body').scrollTop();
 
     		},
-				drawCallback: function(oSettings) { // hide pagination if not needed
-					if (this.api().page.len() == 0 || this.api().page.len() == 100000)
-					{
-						console.log("resize datatable");
+				drawCallback: function(oSettings) {
+					let tab = $(this).closest('.tab-pane').attr('id');
+					// Following lines would help to recalculate page raws after changing pages.
+					// However it also might mess up pagination! Leave it alone for now...
+					//$(window).resize();
+					//window.toggle = window.toggle * -1;
+					//setTimeout(function() { $(window).resize();  }, 500);
 
-						$(window).resize();
-						window.toggle = window.toggle * -1;
-						setTimeout(function() { $(window).resize();  }, 500);
-					}
 
-					console.log("draw datatable " + this.attr('id') + " with pagelength " + this.api().page.len());
+					console.log("draw datatable " + oSettings.sTableId + " in tab " + tab + " with pagelength " + this.api().page.len());
 					if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay() || oSettings._iDisplayLength == -1) {
 						 $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
 					} else {

modules/http/webif/gstatic/js/smarthomeng_pageupdate.js

@@ -10,7 +10,7 @@ function getCookie(cname) {
     if (c.indexOf(name) == 0) {
       let result = c.substring(name.length, c.length);
       console.log("Reading cookie " + cname + " with value " + result);
-      return result;
+      return JSON.parse(result);
     }
   }
   return "";
@@ -27,6 +27,7 @@ function setCookie(cname, cvalue, exdays, path) {
   else
   {
     const d = new Date();
+    cvalue = JSON.stringify(cvalue);
     d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
     let expires = "expires="+d.toUTCString();
     document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/plugin/" + path;