Initial DataTables support

server/resources/package.json

@@ -27,6 +27,10 @@
     "colors": "^1.4.0",
     "copy-webpack-plugin": "^6.4.1",
     "css-loader": "^4.3.0",
+    "datatables.net-bs4": "^1.10.23",
+    "datatables.net-buttons-bs4": "^1.6.5",
+    "datatables.net-plugins": "^1.10.22",
+    "datatables.net-responsive-bs4": "^2.2.7",
     "expose-loader": "^1.0.3",
     "file-loader": "^6.2.0",
     "font-awesome": "^4.7.0",
@@ -34,8 +38,10 @@
     "howler": "^2.2.1",
     "jquery": "^3.5.1",
     "jquery-pjax": "^2.0.1",
+    "jszip": "^3.6.0",
     "leaflet": "^1.7.1",
     "leaflet.locatecontrol": "^0.72.2",
+    "pdfmake": "^0.1.70",
     "popper.js": "^1.16.1",
     "sass": "^1.32.7",
     "sass-loader": "^10.1.1",

server/resources/src/main.css

@@ -194,6 +194,12 @@ table {
     overflow-x:auto;
 }
 
+#table_wrapper{
+    margin-left:auto;
+    margin-right:auto;
+    width: 95%;
+}
+
 th, td {
     text-align: center;
     vertical-align: middle !important;

server/resources/src/main.js

@@ -95,40 +95,20 @@ if(installServiceWorker){
   });
 }
 
-function fillTable(data, replaceLatLngWithMap=false){
-  $("#table_body").empty();
-  $.each(data, function(row_num, item) {
-    let row = document.createElement("tr");
-    row.id = "row-"+row_num;
-    $.each(item, function(cell_num, i) {
-      if(i !== null){
-        if(replaceLatLngWithMap && i.match(/[+-]?\d+([.]\d+)?[;][+-]?\d+([.]\d+)?/gm)){ /* credits to @visoom https://github.com/visoom */
-          let lat = i.split(";")[0];
-          let lng = i.split(";")[1];
-          let mapDiv = document.createElement("div");
-          mapDiv.className = "map";
-          mapDiv.id = "map-"+row_num;
-          var mapScript = document.createElement("script");
-          mapScript.appendChild(document.createTextNode("load_map("+lat+", "+lng+", \"map-"+row_num+"\", false)"));
-          mapDiv.appendChild(mapScript);
-          let cell = document.createElement("td");
-          cell.appendChild(mapDiv);
-          row.appendChild(cell);
-        } else {
-          let cell = document.createElement("td");
-          cell.innerHTML = i;
-          row.appendChild(cell);
-        }
-      }
-    });
-    document.getElementById("table_body").appendChild(row);
-  });
-}
-
 var offline = false;
 var loadTable_interval = undefined;
 var old_data = "null";
-function loadTable(table_page, set_interval=true, interval=10000, onlineReload=false){
+//const table_engine = "default";
+const table_engine = "datatables";
+var fillTable = undefined;
+
+async function loadTable(table_page, set_interval=true, interval=10000, onlineReload=false){
+  if (typeof fillTable === "undefined"){
+    fillTable = await import(/* webpackChunkName: "[request]" */ `./table_engine_${table_engine}.js`)
+    .then(({default: _}) => {
+      return _;
+    });
+  }
   if ('getBattery' in navigator) {
     navigator.getBattery().then((level, charging) => {
       if (!charging && level < 0.2) {
@@ -209,7 +189,6 @@ function menu() {
 }
 
 window.loadTable_interval = loadTable_interval;
-window.fillTable = fillTable;
 window.loadTable = loadTable;
 window.setCookie = setCookie;
 window.getCookie = getCookie;

server/resources/src/table_engine_datatables.js

@@ -0,0 +1,66 @@
+import jsZip from 'jszip';
+window.JSZip = jsZip;
+import pdfMake from "pdfmake/build/pdfmake";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+pdfMake.vfs = pdfFonts.pdfMake.vfs;
+import 'datatables.net-bs4/js/dataTables.bootstrap4.min.js';
+import 'datatables.net-bs4/css/dataTables.bootstrap4.min.css';
+import 'datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js';
+import 'datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css';
+import 'datatables.net-buttons';
+import 'datatables.net-buttons-bs4/js/buttons.bootstrap4.js';
+import 'datatables.net-buttons-bs4/css/buttons.bootstrap4.css';
+import 'datatables.net-buttons/js/buttons.colVis.js';
+import 'datatables.net-buttons/js/buttons.html5.js';
+import 'datatables.net-buttons/js/buttons.print.js';
+
+export default async function fillTable(data, replaceLatLngWithMap=false){
+  $("#table_body").empty();
+  $.each(data, function(row_num, item) {
+    let row = document.createElement("tr");
+    row.id = "row-"+row_num;
+    $.each(item, function(cell_num, i) {
+      if(i !== null){
+        if(replaceLatLngWithMap && i.match(/[+-]?\d+([.]\d+)?[;][+-]?\d+([.]\d+)?/gm)){ /* credits to @visoom https://github.com/visoom */
+          let lat = i.split(";")[0];
+          let lng = i.split(";")[1];
+          let mapDiv = document.createElement("div");
+          mapDiv.className = "map";
+          mapDiv.id = "map-"+row_num;
+          let mapScript = document.createElement("script");
+          mapScript.appendChild(document.createTextNode("load_map("+lat+", "+lng+", \"map-"+row_num+"\", false)"));
+          mapDiv.appendChild(mapScript);
+          let cell = document.createElement("td");
+          cell.appendChild(mapDiv);
+          row.appendChild(cell);
+        } else {
+          let cell = document.createElement("td");
+          cell.innerHTML = i;
+          row.appendChild(cell);
+        }
+      }
+    });
+    document.getElementById("table_body").appendChild(row);
+  });
+  let loadedLanguage = {};
+  try {
+    let language = navigator.language || navigator.userLanguage;
+    language = language.toLowerCase().replace("_","-");
+    language = "it_it";
+    loadedLanguage = await import(/* webpackChunkName: "DataTables_language_[request]" */ `datatables.net-plugins/i18n/${language}.json`)
+    .then(({default: _}) => {
+      return _;
+    });
+  } catch (error) {
+    console.error("Error loading DataTables translation:");
+    console.log(error);
+    loadedLanguage = {};
+  }
+  let table = $('#table').DataTable({
+    responsive: true,
+    language: loadedLanguage,
+    buttons: [ 'excel', 'pdf', 'csv', 'colvis' ]
+  });
+  table.buttons().container()
+    .appendTo( '#table_wrapper :nth-child(1):eq(0)' );
+}

server/resources/src/table_engine_default.js

@@ -0,0 +1,29 @@
+export default function fillTable(data, replaceLatLngWithMap=false){
+  $("#table_body").empty();
+  $.each(data, function(row_num, item) {
+    let row = document.createElement("tr");
+    row.id = "row-"+row_num;
+    $.each(item, function(cell_num, i) {
+      if(i !== null){
+        if(replaceLatLngWithMap && i.match(/[+-]?\d+([.]\d+)?[;][+-]?\d+([.]\d+)?/gm)){ /* credits to @visoom https://github.com/visoom */
+          let lat = i.split(";")[0];
+          let lng = i.split(";")[1];
+          let mapDiv = document.createElement("div");
+          mapDiv.className = "map";
+          mapDiv.id = "map-"+row_num;
+          let mapScript = document.createElement("script");
+          mapScript.appendChild(document.createTextNode("load_map("+lat+", "+lng+", \"map-"+row_num+"\", false)"));
+          mapDiv.appendChild(mapScript);
+          let cell = document.createElement("td");
+          cell.appendChild(mapDiv);
+          row.appendChild(cell);
+        } else {
+          let cell = document.createElement("td");
+          cell.innerHTML = i;
+          row.appendChild(cell);
+        }
+      }
+    });
+    document.getElementById("table_body").appendChild(row);
+  });
+}

server/resources/webpack.common.js

@@ -15,7 +15,7 @@ module.exports = {
       return pathData.chunk.name === 'sw' ? '../../sw.js': '[name].[contenthash].js';
     },
     path: path.resolve(__dirname, 'dist'),
-    publicPath: '/resources/dist/',
+    publicPath: 'resources/dist/',
   },
   resolve: {
     alias: {

server/templates/index.html

@@ -1,5 +1,10 @@
 {% extends "base.html" %}
 
+{% block head %}
+{{ parent() }}
+<link rel="prefetch" href="{{ urlsoftware }}/resources/dist/{{ resource('table_engine_default.js') }}">
+{% endblock %}
+
 {% block menu %}
 {% endblock %}
 

server/templates/list.html

@@ -59,7 +59,7 @@
 <br>
 <br>
 <div id="list" class="table-responsive">
-  <table class="table table-striped table-bordered">
+  <table id="table" class="table table-striped table-bordered dt-responsive nowrap">
     <thead>
       <tr>
         <th>{{ 'Name'|t }}</th>

server/templates/log.html

@@ -6,7 +6,7 @@
   style="display: block; margin-left: auto; margin-right: auto;">
 <br>
 <div id="list" class="table-responsive">
-  <table class="table table-striped table-bordered">
+  <table id="table" class="table table-striped table-bordered dt-responsive nowrap">
     <thead>
       <tr>
         <th>{{ 'Action'|t }}</th>

server/templates/offline.html

@@ -7,7 +7,7 @@
     <br>
     <br>
 <div id="list" class="table-responsive">
-  <table class="table table-striped table-bordered">
+  <table id="table" class="table table-striped table-bordered dt-responsive nowrap">
     <thead>
       <tr>
         <th>{{ 'Name'|t }}</th>

server/templates/services.html

@@ -11,7 +11,7 @@
 </p>
 <br>
 <div id="list" class="table-responsive">
-  <table class="table table-striped table-bordered">
+  <table id="table" class="table table-striped table-bordered dt-responsive nowrap">
     <thead>
       <tr>
         <th>{{ 'Date'|t }}</th>

server/templates/trainings.html

@@ -11,7 +11,7 @@
 </p>
 <br>
 <div id="list" class="table-responsive">
-  <table class="table table-striped table-bordered">
+  <table id="table" class="table table-striped table-bordered dt-responsive nowrap">
     <thead>
       <tr>
         <th>{{ 'Date'|t }}</th>