vh/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2025-12-07 09:36:05 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Loading spinner

Browse Source
This commit is contained in:
Jokob-sk
2023-09-16 09:57:38 +10:00
parent 6cb4439d59
commit 40c6c65ee5
10 changed files with 82 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
front/css/pialert.css
View File

@@ -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;
}

14
front/deviceDetails.php
View File

@@ -540,15 +540,7 @@
</div>
<!-- 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>
<div class="tab-pane fade table-responsive" id="panPresence">
<!-- Calendar -->
<div id="calendar">
@@ -1136,9 +1128,9 @@ function initializeCalendar () {
loading: function( isLoading, view ) {
if (isLoading) {
$('#loading').show();
showSpinner()
} else {
$('#loading').hide();
hideSpinner()
}
}

34
front/js/pialert_common.js
View File

@@ -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()

4
front/php/templates/header.php
View File

@@ -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('"', '');

1
front/php/templates/language/de_de.json
View File

@@ -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",

1
front/php/templates/language/en_us.json
View File

@@ -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",

1
front/php/templates/language/es_es.json
View File

@@ -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)",

17
front/presence.php
View File

@@ -148,18 +148,7 @@
</div>
<!-- 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>
<div class="box-body table-responsive">
<!-- Calendar -->
<div id="calendar"></div>
@@ -344,9 +333,9 @@ function initializeCalendar () {
loading: function( isLoading, view ) {
if (isLoading) {
$("#loading").show();
showSpinner();
} else {
$("#loading").hide();
hideSpinner();
}
}