Loading spinner

docs/API.md

@@ -28,6 +28,7 @@ You can access the following files:
   | `language_strings.json` | The content of the language_strings table, which in turn is loaded from the plugins `config.json` definitions. |  
   | `table_custom_endpoint.json` | A custom endpoint generated by the SQL query specified by the `API_CUSTOM_SQL` setting. |
   | `table_settings.json` | The content of the settings table. |
+  | `app_state.json` | Contains the current application state. |
   
   Current/latest state of the aforementioned files depends on your settings.
 

front/css/pialert.css

@@ -459,35 +459,7 @@
     border-right: 5px solid #606060;
 }
 
-/* -----------------------------------------------------------------------------
-   Spin
------------------------------------------------------------------------------ */
-.pa_semitransparent-panel {
-    position: absolute;
-    width: 100%; /*calc (100% -40px);*/
-    height: 100%;
-    left: 0;
-    top: 0;
-    display: block;
 
-    opacity: 0.8;
-    background-color: #fff;
-    z-index: 99;
-}
-
-.pa_spinner {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 20px;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 15px;
-    width: 200px;
-
-    background-color: #fff;
-    z-index: 100;
-}
 
 /* -----------------------------------------------------------------------------
    Notification float banner
@@ -934,3 +906,37 @@ input[readonly] {
     display: none;
   }
 }
+
+/* -----------------------------------------------------------------------------
+   Spin
+----------------------------------------------------------------------------- */
+.pa_semitransparent-panel {
+    position: absolute;
+    width: 100%; /*calc (100% -40px);*/
+    height: 100%;
+    left: 0;
+    top: 0;
+    display: block;
+
+    opacity: 0.8;
+    background-color: #fff;
+    z-index: 99;
+}
+
+.pa_spinner {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 100px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 15px;
+    width: 200px;
+    background-color: #fff;
+    z-index: 100;
+}
+
+#loadingSpinner
+{
+    z-index: 100;
+}

front/deviceDetails.php

@@ -542,14 +542,6 @@
 <!-- tab page 3 ------------------------------------------------------------ -->
               <div class="tab-pane fade table-responsive" id="panPresence">                 
 
-                  <!-- spinner -->
-                  <div id="loading" style="display: none">
-                    <div class="pa_semitransparent-panel"></div>
-                    <div class="panel panel-default pa_spinner">
-                      <table><td width="130px" align="middle"><?= lang("DevDetail_Loading");?></td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td></table>
-                    </div>
-                  </div>
-
                   <!-- Calendar -->
                   <div id="calendar">
                   </div>
@@ -1136,9 +1128,9 @@ function initializeCalendar () {
       
     loading: function( isLoading, view ) {
         if (isLoading) {
-          $('#loading').show();
+          showSpinner()
         } else {
-          $('#loading').hide();
+          hideSpinner()
         }
     }
 

front/js/pialert_common.js

@@ -534,7 +534,41 @@ function isEmpty(value)
   return emptyArr.includes(value)
 }
 
+// -----------------------------------------------------------------------------
+//  Loading Spinner overlay
+// -----------------------------------------------------------------------------
+function showSpinner(stringKey='Loading')
+{
+  if($("#loadingSpinner"))
+  {
+    $("#loadingSpinner").show();
+  }
+  else{
+    html =  `
+    <!-- spinner -->
+    <div id="loadingSpinner" style="display: block">
+      <div class="pa_semitransparent-panel"></div>
+      <div class="panel panel-default pa_spinner">
+        <table>
+          <td width="130px" align="middle">${getString(stringKey)}</td>
+          <td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td>
+        </table>
+      </div>
+    </div>
+    `
+
+    $(".wrapper").append(html)
+  }
+}
+// -----------------------------------------------------------------------------
+function hideSpinner()
+{
+  $("#loadingSpinner").hide()
+}
+
+// -----------------------------------------------------------------------------
 // initialize
+// -----------------------------------------------------------------------------
 cacheSettings()
 cacheStrings()
 initDeviceListAll_JSON()

front/php/templates/header.php

@@ -83,9 +83,9 @@ if ($ENABLED_DARKMODE === True) {
 <script>
 
   function updateState(){
-    $.get('api/pialert_app_state.json?nocache=' + Date.now(), function(appState) {    
+    $.get('api/app_state.json?nocache=' + Date.now(), function(appState) {    
 
-      console.log(appState)
+      // console.log(appState)
 
       document.getElementById('state').innerHTML = appState["currentState"].replaceAll('"', '');
 

front/php/templates/language/de_de.json

@@ -61,6 +61,7 @@
         "Device_Table_nav_prev":"Zurück",
         "Presence_Title":"Anwesenheit pro Gerät",
         "Presence_Loading":"Laden...",
+        "Loading":"Laden...",
         "Presence_Shortcut_AllDevices":"Alle Geräte",
         "Presence_Shortcut_Connected":"Verbunden",
         "Presence_Shortcut_Favorites":"Favoriten",

front/php/templates/language/en_us.json

@@ -84,6 +84,7 @@
         "Device_Table_nav_prev" : "Previous",
         "Presence_Title" : "Presence by Device",
 	"Presence_Loading" : "Loading...",	    
+	"Loading" : "Loading...",	    
         "Presence_Shortcut_AllDevices" : "All Devices",
         "Presence_Shortcut_Connected" : "Connected",
         "Presence_Shortcut_Favorites" : "Favorites",

front/php/templates/language/es_es.json

@@ -83,6 +83,7 @@
         "Device_Table_nav_prev" : "Anterior",
         "Presence_Title" : "Historial por dispositivo",
         "Presence_Loading" : "Cargando...",        
+        "Loading" : "Cargando...",        
         "Presence_Shortcut_AllDevices" : "Todos",
         "Presence_Shortcut_Connected" : "Conectado(s)",
         "Presence_Shortcut_Favorites" : "Favorito(s)",

front/presence.php

@@ -150,17 +150,6 @@
             <!-- box-body -->
             <div class="box-body table-responsive">              
 
-              <!-- spinner -->
-              <div id="loading" style="display: none">
-                <div class="pa_semitransparent-panel"></div>
-                <div class="panel panel-default pa_spinner">
-                  <table>
-                    <td width="130px" align="middle"><?= lang("Presence_Loading");?></td>
-                    <td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td>
-                  </table>
-                </div>
-              </div>
-
               <!-- Calendar -->
               <div id="calendar"></div>
             </div>
@@ -344,9 +333,9 @@ function initializeCalendar () {
 
     loading: function( isLoading, view ) {
         if (isLoading) {
-          $("#loading").show();
+          showSpinner();
         } else {
-          $("#loading").hide();
+          hideSpinner();
         }
     }
 

pialert/helper.py

@@ -40,7 +40,7 @@ class app_state_class:
     def __init__(self, currentState):
         
         # json file containing the state to communicate with teh frontend
-        stateFile = apiPath + '/pialert_app_state.json'
+        stateFile = apiPath + '/app_state.json'
 
         #  update self
         self.currentState = currentState