Initial support for jquery-pjax

server/resources/package-lock.json

@@ -2941,6 +2941,11 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
       "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
     },
+    "jquery-pjax": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jquery-pjax/-/jquery-pjax-2.0.1.tgz",
+      "integrity": "sha1-azoboW5kTmJL3P5y62s9lqhG9fI="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

server/resources/package.json

@@ -26,6 +26,7 @@
     "font-awesome": "^4.7.0",
     "howler": "^2.2.0",
     "jquery": "^3.5.1",
+    "jquery-pjax": "^2.0.1",
     "leaflet": "^1.7.1",
     "leaflet.locatecontrol": "^0.72.0",
     "popper.js": "^1.16.1",

server/resources/src/main.js

@@ -9,6 +9,15 @@ import '../node_modules/bootstrap-toggle/css/bootstrap-toggle.css';
 import '../node_modules/bootstrap-toggle/js/bootstrap-toggle.js';
 import '../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';
 import 'time-input-polyfill/auto';
+import 'jquery-pjax';
+
+$(document).pjax('a', '#content');
+$(document).on('pjax:start', function() {
+  if(window.loadTable_interval !== undefined){
+    clearInterval(window.loadTable_interval);
+    window.loadTable_interval = undefined;
+  }
+})
 
 // Cookie functions from w3schools
 function setCookie(cname, cvalue, exdays) {
@@ -65,7 +74,7 @@ $( document ).ready(function() {
 if (getCookie("authenticated")) {
   if ('serviceWorker' in navigator) {
     window.addEventListener('load', () => {
-      navigator.serviceWorker.register('/sw.js').then(registration => {
+      navigator.serviceWorker.register('sw.js').then(registration => {
         console.log('SW registered: ', registration);
       }).catch(registrationError => {
         console.log('SW registration failed: ', registrationError);
@@ -90,7 +99,8 @@ function fillTable(data){
 }
 
 var offline = false;
-function loadTable(table_page){
+var loadTable_interval = undefined;
+function loadTable(table_page, set_interval=true, interval=10000){
     $.getJSON( "resources/ajax/ajax_"+table_page+".php", function( data, status, xhr ) {
       fillTable(data);
       var headers = new Headers();
@@ -117,6 +127,12 @@ function loadTable(table_page){
         window.offline = true;
       }
     });
+    if(set_interval){
+      window.loadTable_interval = setInterval(function() {
+        window.loadTable(table_page, false);
+      }, interval);
+    }
 }
+window.loadTable_interval = loadTable_interval;
 window.fillTable = fillTable;
 window.loadTable = loadTable;

server/templates/base.html

@@ -5,7 +5,7 @@
           <title>{{ title }} - ALLERTA sistema gestionale {{ owner }}</title>
           <link href="{{ urlsoftware }}/resources/images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
           <meta name="viewport" content="user-scalable=no, initial-scale=1">
-          <link rel="manifest" href="/manifest.webmanifest">
+          <link rel="manifest" href="manifest.webmanifest">
           <style>
           body:not(table){
             max-width: 100%;
@@ -329,9 +329,9 @@
       }
 
       check();
-      setInterval(function() {
+      /* setInterval(function() {
       check();
-      }, 30000);
+      }, 30000); */
       </script>
       {% endif %}
       {% block menu %}

server/templates/grafici.html

@@ -7,29 +7,7 @@
     <div id="list" hidden></div>
     <b>TODO</b>
     <script>
-      $.get( "resources/ajax/ajax_log.php", function( data ) {
-         $( "#list" ).html( data );
-         console.log( "Loaded list." );
-      });
-      $(document).ready(function() {
-
-        setInterval(function() {
-          $.get( "resources/ajax/ajax_log.php", function( data ) {
-             $( "#list" ).html( data );
-          });
-        }, 10000);
-
-      });
-/*
-      check();
-      $(document).ready(function() {
-
-        setInterval(function() {
-          check();
-        }, 10000);
-
-      });
-      */
+      alert("TODO");
     </script>
     <br>
     <br>

server/templates/list.html

@@ -70,12 +70,7 @@
     </tbody>
   </table>
   <script>
-  $( document ).ready(function() {
-    window.loadTable("list");
-    setInterval(function() {
-      window.loadTable("list");
-    }, 10000);
-  });
+  window.loadTable("list");
   </script>
 </div>
 

server/templates/log.html

@@ -42,12 +42,7 @@
       </tbody>
     </table>
     <script>
-      $( document ).ready(function() {
-        window.loadTable("log");
-        setInterval(function() {
-          window.loadTable("log");
-        }, 10000);
-      });
+    window.loadTable("log");
     </script>
     <br>
     <br>

server/templates/offline.html

@@ -39,15 +39,7 @@
     </tbody>
   </table>
   <script>
-  $( document ).ready(function() {
-    window.loadTable("list");
-    setInterval(function() {
-      window.loadTable("list");
-      if(!window.offline){
-        location.reload();
-      }
-    }, 10000);
-  });
+  window.loadTable("list");
   </script>
 </div>
 <br>

server/templates/services.html

@@ -87,12 +87,7 @@
         </tbody>
       </table>
       <script>
-      $( document ).ready(function() {
-        window.loadTable("services");
-        setInterval(function() {
-          window.loadTable("services");
-        }, 10000);
-      });
+      window.loadTable("services");
       </script>
     </div>
     <br>

server/templates/trainings.html

@@ -85,12 +85,7 @@
         </tbody>
       </table>
       <script>
-      $( document ).ready(function() {
-        window.loadTable("trainings");
-        setInterval(function() {
-          window.loadTable("trainings");
-        }, 10000);
-      });
+      window.loadTable("trainings");
       </script>
     </div>
     <br>

server/templates/user_details.html

@@ -7,9 +7,9 @@
 <script>
 $(document).ready(function() {
   $( "#list" ).load("resources/ajax/ajax_user_details.php?user={{ view_user }}&"+Math.random());
-  setInterval(function() {
+  /* setInterval(function() {
     $( "#list" ).load("resources/ajax/ajax_user_details.php?user={{ view_user }}&"+Math.random());
-  }, 10000);
+  }, 10000); */
 });
 </script>
 {% endblock %}

server/ui.php

@@ -52,6 +52,10 @@ function loadtemplate($templatename, $data, $requirelogin=true){
     $data['error_image'] = "error.gif";
   }
   $template = $twig->load($templatename);
-  echo $template->render($data);
+  if(isset($_SERVER["HTTP_X_PJAX"]) || isset($_GET["X_PJAX"]) || isset($_GET["_PJAX"])){
+    echo $template->renderBlock("content", $data);
+  } else {
+    echo $template->render($data);
+  }
   p_stop();
 }