mirror/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2026-06-20 22:30:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1679 from netalertx/next_release

Browse Source 
Next release
This commit is contained in:
Jokob @NetAlertX
2026-06-20 22:14:20 +10:00
committed by GitHub
parent 7b8781498c 6194134cd0
commit bfbe04e98e
48 changed files with 1360 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
front/appEvents.php
View File

@@ -1,10 +1,9 @@
<?php
require 'php/templates/header.php';
require 'php/templates/modals.php';
require 'php/templates/header.php';
?>
<!-- ----------------------------------------------------------------------- -->
<!-- Page ------------------------------------------------------------------ -->
<div class="content-wrapper">
@@ -13,7 +12,7 @@
require 'appEventsCore.php';
?>
</div>
<?php

192
front/css/app.css
View File

@@ -1083,6 +1083,7 @@ height: 50px;
.settingswrap
{
margin-bottom: 100px;
padding-top: 0px;
}
.settingswrap .metadata
@@ -1178,8 +1179,10 @@ height: 50px;
/* Settings */
#settingsPage .overview-setting-value{
display:unset;
display: block;
overflow: hidden;
text-overflow: ellipsis;
font-size: smaller;
}
.overview-setting-value-wrap
@@ -1228,7 +1231,7 @@ height: 50px;
}
#settingsPage .panel-heading:hover{
background-color: #272c30;
background-color: #e8e8e8;
}
.settings-expand-icon {
@@ -2256,7 +2259,7 @@ textarea[readonly],
----------------------------------------------------------------------------- */
#loadingSpinner {
position: fixed;
z-index: 1000;
z-index: 9999;
/* top: 0; */
/* left: 0; */
/* width: 100%; */
@@ -2265,7 +2268,6 @@ textarea[readonly],
transition: opacity 0.3s ease-in-out;
pointer-events: none;
display: block;
z-index: 800;
}
.fa-spinner
@@ -2587,4 +2589,182 @@ table.dataTable tbody > tr.selected
.input-group-addon.text-muted {
color: #8c8c8c;
background-color: rgba(140, 140, 140, 0.05);
}
}
/* ===== Loading Skeleton ===== */
/* Custom properties (overridden in dark-patch.css for Dark/System themes) */
:root {
--skel-base: #e2e2e2;
--skel-shine: #f0f0f0;
--skel-section: #d4d4d4;
--skel-panel-bg: #f5f5f5;
--skel-border: #ddd;
--skel-bg: #ecf0f5;
}
@keyframes settingsShimmer {
0% { background-position: -600px 0; }
100% { background-position: 600px 0; }
}
.skel-shimmer {
background: linear-gradient(
90deg,
var(--skel-base) 25%,
var(--skel-shine) 50%,
var(--skel-base) 75%
);
background-size: 600px 100%;
animation: settingsShimmer 1.5s infinite linear;
border-radius: 3px;
display: inline-block;
}
/* Positioning anchors */
#settingsPage, #devicesPage, #deviceDetailsPage,
#eventsPage, #presencePage, #reportPage, #notifications, #wf-content-wrapper, #pluginsPage,
#panDetails, #panSessions, #panPresence, #panEvents {
position: relative;
}
#panDetails, #panSessions, #panPresence, #panEvents { min-height: 420px; }
#tab_DBTools, #tab_BackupRestore, #tab_Logging, #tab_multiEdit { position: relative; min-height: 320px; }
/* Page-level overlay base */
#settings-skeleton, #devices-skeleton, #device-details-skeleton,
#events-skeleton, #presence-skeleton, #report-skeleton,
#notifications-skeleton, #workflows-skeleton, #plugins-skeleton, .skel-tab-pane {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: var(--skel-bg);
padding: 15px;
}
#settings-skeleton, #devices-skeleton, #device-details-skeleton,
#events-skeleton, #presence-skeleton, #report-skeleton,
#notifications-skeleton, #workflows-skeleton, #plugins-skeleton { z-index: 50; }
.skel-tab-pane { z-index: 10; min-height: 400px; }
#settings-skeleton { padding-top: 50px; padding-left: 20px; padding-right: 20px; min-height: 500px; }
#devices-skeleton { top: 50px; min-height: 500px; }
#device-details-skeleton { min-height: 600px; }
#events-skeleton { top: 50px; min-height: 500px; }
#presence-skeleton { top: 50px; min-height: 500px; }
#report-skeleton { min-height: 400px; }
#notifications-skeleton { min-height: 400px; }
#workflows-skeleton { top: 50px; width: 770px; margin: 0 auto; min-height: 300px; }
#plugins-skeleton { padding: 0; min-height: 400px; }
/* Bordered containers */
.skel-overview-panel, .skel-section, .skel-plugin-block,
.skel-chart-box, .skel-table-box,
.skel-detail-info-panel, .skel-detail-form, .skel-tabs-bar {
border: 1px solid var(--skel-border);
}
/* Clipped rounded containers */
.skel-overview-panel, .skel-section, .skel-plugin-block,
.skel-chart-box, .skel-table-box, .skel-tile {
border-radius: 4px;
overflow: hidden;
}
/* Section-toned backgrounds */
.skel-overview-heading, .skel-section-header, .skel-plugin-header,
.skel-box-header, .skel-table-header-row, .skel-tile, .skel-tabs-bar {
background: var(--skel-section);
}
/* Panel-toned backgrounds */
.skel-overview-body, .skel-overview-header, .skel-plugin-body,
.skel-detail-info-panel, .skel-detail-form {
background: var(--skel-panel-bg);
}
/* Flex rows with vertical centering */
.skel-overview-heading, .skel-overview-header, .skel-section-header, .skel-plugin-header,
.skel-box-header, .skel-table-header-row, .skel-setting-row, .skel-tr, .skel-form-row,
.skel-tile-icon-area {
display: flex;
align-items: center;
}
/* Standard header bar height + padding */
.skel-overview-heading, .skel-overview-header, .skel-section-header, .skel-box-header {
height: 44px;
padding: 0 15px;
}
/* Row separator borders */
.skel-setting-row, .skel-tr, .skel-form-row { border-bottom: 1px solid var(--skel-border); }
.skel-setting-row:last-child, .skel-tr:last-child, .skel-form-row:last-of-type { border-bottom: none; }
/* Standard data row spacing */
.skel-setting-row, .skel-tr { gap: 10px; padding: 11px 15px; }
/* Thin-line height (14px) */
.skel-line, .skel-cell-name, .skel-cell-desc, .skel-th, .skel-form-label { height: 14px; }
/* Non-growing primitives */
.skel-line, .skel-icon-block, .skel-cell-name, .skel-cell-desc, .skel-form-label { flex-shrink: 0; }
/* Filling cells (flex: 1) */
.skel-tile-inner, .skel-th, .skel-td, .skel-cell-input, .skel-form-input { flex: 1; }
/* ----- Settings --------------------------------------------------------- */
.skel-overview-panel { margin-bottom: 10px; }
.skel-overview-heading { gap: 12px; }
.skel-overview-body { padding: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.skel-overview-card { min-width: 100px; height: 76px; border-radius: 4px; }
.skel-section { margin-bottom: 8px; }
.skel-overview-header { gap: 14px; }
.skel-section-header { gap: 14px; }
.skel-plugin-block { margin: 8px; }
.skel-plugin-header { height: 48px; padding: 0 15px; gap: 14px; }
.skel-icon-block { width: 22px; height: 16px; }
.skel-cell-name { width: 20%; }
.skel-cell-desc { width: 36%; }
.skel-cell-input { height: 32px; }
/* ----- Devices ---------------------------------------------------------- */
.skel-tile { display: flex; height: 80px; }
.skel-tile-inner { display: flex; flex-direction: column; padding: 12px 15px; justify-content: center; gap: 10px; }
.skel-tile-num { height: 26px; width: 55%; }
.skel-tile-label { height: 13px; width: 75%; }
.skel-tile-icon-area { width: 70px; justify-content: center; background: var(--skel-base); opacity: 0.6; }
.skel-tile-icon-shape { width: 38px; height: 38px; border-radius: 50%; }
.skel-chart-box { margin-bottom: 12px; }
.skel-box-header { gap: 12px; border-bottom: 1px solid var(--skel-border); }
.skel-chart-body { height: 220px; border-radius: 0; display: block; width: 100%; }
.skel-table-header-row { gap: 10px; padding: 10px 15px; border-bottom: 2px solid var(--skel-border); }
.skel-td { height: 13px; }
/* ----- Device Details --------------------------------------------------- */
.skel-detail-header { margin-bottom: 15px; }
.skel-detail-title { height: 26px; width: 42%; margin-bottom: 14px; }
.skel-detail-info-panel { display: flex; gap: 0; padding: 14px; border-radius: 4px; margin-bottom: 15px; max-width: 400px; }
.skel-tabs-bar { display: flex; gap: 4px; padding: 8px 10px 0; border-radius: 4px 4px 0 0; border-bottom: none; }
.skel-tab { height: 34px; width: 100px; border-radius: 4px 4px 0 0; flex-shrink: 0; }
.skel-detail-form { border-top: none; border-radius: 0 0 4px 4px; padding: 20px 15px; }
.skel-form-row { gap: 15px; padding: 9px 0; }
.skel-form-label { width: 18%; min-width: 100px; }
.skel-form-input { height: 32px; }
.skel-form-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 15px; }
.skel-form-btn { height: 34px; width: 100px; }
/* ----- Workflows -------------------------------------------------------- */
.skel-workflow-card { border: 1px solid var(--skel-border); border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
.skel-workflow-header { display: flex; align-items: center; height: 48px; padding: 0 15px; background: var(--skel-section); }
/* ----- Plugins ---------------------------------------------------------- */
.skel-plugins-wrap { display: flex; gap: 0; min-height: 400px; }
.skel-plugins-nav { width: 165px; flex-shrink: 0; border-right: 1px solid var(--skel-border); padding: 8px 0; }
.skel-plugins-nav-item { display: flex; align-items: center; padding: 9px 15px; border-bottom: 1px solid var(--skel-border); }
.skel-plugins-nav-item:last-child { border-bottom: none; }
.skel-plugins-body { flex: 1; padding: 0; }
/* ----- Systeminfo tabs -------------------------------------------------- */
.skel-info-tab { padding: 15px; min-height: 360px; }
/* ===== /Loading Skeleton ===== */

13
front/css/dark-patch.css
View File

@@ -516,6 +516,9 @@ textarea[readonly],
border: 1px solid #353c42;
color: #bec5cb;
}
#settingsPage .panel-heading:hover {
background-color: #272c30;
}
.box.box-solid.box-info,
.box.box-solid.box-info > .box-header {
color: #bec5cb;
@@ -754,4 +757,14 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
font-family: 'Courier New', monospace;
font-size: .85em;
cursor: pointer;
}
/* Settings skeleton - dark theme */
:root {
--skel-base: #2e3540;
--skel-shine: #3d4555;
--skel-section: #252c38;
--skel-panel-bg: #1e242e;
--skel-border: #2a323e;
--skel-bg: #353c42;
}

15
front/css/system-dark-patch.css
View File

@@ -512,6 +512,9 @@
border: 1px solid #353c42;
color: #bec5cb;
}
#settingsPage .panel-heading:hover {
background-color: #272c30;
}
.box.box-solid.box-info,
.box.box-solid.box-info > .box-header {
color: #bec5cb;
@@ -731,4 +734,14 @@
font-family: 'Courier New', monospace;
font-size: .85em;
cursor: pointer;
}
}
/* Settings skeleton - dark theme */
:root {
--skel-base: #2e3540;
--skel-shine: #3d4555;
--skel-section: #252c38;
--skel-panel-bg: #1e242e;
--skel-border: #2a323e;
--skel-bg: #353c42;
}

20
front/deviceDetails.php
View File

@@ -21,11 +21,12 @@
</script>
<!-- Page ------------------------------------------------------------------ -->
<div class="content-wrapper">
<div class="content-wrapper" id="deviceDetailsPage">
<?php require 'php/templates/skel_device_details.php'; ?>
<!-- Content header--------------------------------------------------------- -->
<section class="content-header">
<?php require 'php/templates/modals.php'; ?>
<h1 id="pageTitle">
&nbsp<small>Quering device info...</small>
@@ -597,7 +598,22 @@ window.onload = function() {
updateChevrons(mac);
await renderSmallBoxes();
main();
hideDeviceDetailsSkeleton();
});
// -----------------------------------------------------------------------------
function hideDeviceDetailsSkeleton() {
$('#device-details-skeleton').fadeOut(250, function() { $(this).remove(); });
}
// Fallback: remove main skeleton and all tab pane skeletons if init stalls
setTimeout(function() {
hideDeviceDetailsSkeleton();
if (typeof hideDetailsTabSkeleton === 'function') hideDetailsTabSkeleton();
if (typeof hideSessionsTabSkeleton === 'function') hideSessionsTabSkeleton();
if (typeof hidePresenceTabSkeleton === 'function') hidePresenceTabSkeleton();
if (typeof hideEventsTabSkeleton === 'function') hideEventsTabSkeleton();
}, 15000);
}
</script>

7
front/deviceDetailsEdit.php
View File

@@ -3,6 +3,7 @@
// check if authenticated
require_once $_SERVER["DOCUMENT_ROOT"] . "/php/templates/security.php"; ?>
<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_details.php'; ?>
<div class="row" id="deviceDetailsEdit">
<div class="box-body form-horizontal">
@@ -375,6 +376,7 @@ function getDeviceData() {
initHoverNodeInfo();
hideSpinner();
hideDetailsTabSkeleton();
}}); // $.get callback
}, 100); // setTimeout
@@ -665,4 +667,9 @@ function toggleFieldLock(mac, fieldName) {
});
}
// -----------------------------------------------------------------------------
function hideDetailsTabSkeleton() {
$('#skel-tab-details').fadeOut(250, function() { $(this).remove(); });
}
</script>

7
front/deviceDetailsEvents.php
View File

@@ -5,6 +5,7 @@
?>
<!-- ----------------------------------------------------------------------- -->
<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_events.php'; ?>
<!-- Hide Connections -->
<div class="col-sm-12 col-xs-12">
@@ -103,10 +104,12 @@ function loadEventsData() {
table.draw();
hideSpinner();
hideEventsTabSkeleton();
},
error: function (xhr) {
console.error("Failed to load events", xhr.responseText);
hideSpinner();
hideEventsTabSkeleton();
}
});
}
@@ -198,5 +201,9 @@ function deviceEventsPageUpdater() {
deviceEventsPageUpdater();
// -----------------------------------------------------------------------------
function hideEventsTabSkeleton() {
$('#skel-tab-events').fadeOut(250, function() { $(this).remove(); });
}
</script>

9
front/deviceDetailsPresence.php
View File

@@ -5,8 +5,11 @@
?>
<!-- fullCalendar -->
<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_presence.php'; ?>
<link rel="stylesheet" href="lib/fullcalendar/fullcalendar.min.css">
<!-- fullCalendar -->
<link rel="stylesheet" href="lib/fullcalendar/fullcalendar.print.min.css" media="print">
<script src="lib/moment/moment.js"></script>
<script src="lib/fullcalendar/fullcalendar.min.js"></script>
@@ -63,6 +66,7 @@
console.warn("Presence calendar API error:", response);
callback([]);
}
hidePresenceTabSkeleton();
},
error: function(xhr) {
console.error(
@@ -71,6 +75,7 @@
xhr.responseText
);
callback([]);
hidePresenceTabSkeleton();
}
});
});
@@ -205,6 +210,10 @@ function devicePresencePageUpdater() {
devicePresencePageUpdater();
// -----------------------------------------------------------------------------
function hidePresenceTabSkeleton() {
$('#skel-tab-presence').fadeOut(250, function() { $(this).remove(); });
}
</script>

8
front/deviceDetailsSessions.php
View File

@@ -6,6 +6,7 @@
<!-- ----------------------------------------------------------------------- -->
<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_sessions.php'; ?>
<!-- Datatable Session -->
<table id="tableSessions" class="table table-bordered table-hover table-striped ">
@@ -130,10 +131,12 @@ function loadSessionsData() {
table.draw();
hideSpinner();
hideSessionsTabSkeleton();
},
error: function (xhr, status, err) {
console.error("Failed to load sessions:", err, xhr.responseText);
hideSpinner();
hideSessionsTabSkeleton();
}
});
}
@@ -174,4 +177,9 @@ function deviceSessionsPageUpdater() {
// start updater
deviceSessionsPageUpdater();
// -----------------------------------------------------------------------------
function hideSessionsTabSkeleton() {
$('#skel-tab-sessions').fadeOut(250, function() { $(this).remove(); });
}
</script>

13
front/devices.php
View File

@@ -37,7 +37,9 @@
<!-- Page ------------------------------------------------------------------ -->
<div class="content-wrapper">
<div class="content-wrapper" id="devicesPage">
<?php require 'php/templates/skel_devices.php'; ?>
<!-- Main content ---------------------------------------------------------- -->
<section class="content">
@@ -181,6 +183,14 @@
callAfterAppInitialized(main)
showSpinner();
// -----------------------------------------------------------------------------
function hideDevicesSkeleton() {
$('#devices-skeleton').fadeOut(250, function() { $(this).remove(); });
}
// Fallback: ensure skeleton is removed even if DataTable fails to initialize
setTimeout(hideDevicesSkeleton, 15000);
// -----------------------------------------------------------------------------
function main () {
@@ -1123,6 +1133,7 @@ function initializeDatatable (status) {
initHoverNodeInfo();
hideSpinner();
hideDevicesSkeleton();
},
createdRow: function(row, data, dataIndex) {

13
front/events.php
View File

@@ -6,7 +6,8 @@ require 'php/templates/header.php';
showSpinner(); // Show initial page loading spinner
</script>
<div class="content-wrapper eventsPage">
<div class="content-wrapper eventsPage" id="eventsPage">
<?php require 'php/templates/skel_events.php'; ?>
<section class="content">
<!-- ---------------- Top small boxes (Event shortcuts) ---------------- -->
@@ -154,11 +155,13 @@ function initializeDatatable() {
recordsFiltered: response.recordsFiltered || 0
});
hideSpinner();
hideEventsSkeleton();
},
error: function (xhr, status, error) {
console.error("Error fetching session events:", status, error, xhr.responseText);
callback({ data: [], recordsTotal: 0, recordsFiltered: 0 });
hideSpinner();
hideEventsSkeleton();
}
});
},
@@ -253,4 +256,12 @@ function getEvents(type) {
showSpinner();
table.ajax.reload(null, true); // reset to page 1
}
function hideEventsSkeleton() {
$('#events-skeleton').fadeOut(250, function () { $(this).remove(); });
}
window.addEventListener('load', function () {
setTimeout(hideEventsSkeleton, 15000);
});
</script>

12
front/js/common.js
View File

@@ -957,8 +957,8 @@ let animationTime = 300
function showSpinner(stringKey = 'Loading') {
let text = isEmpty(stringKey) ? "Loading..." : getString(stringKey || "Loading");
if (text == ""){
text = "Loading"
if (!text || !text.trim()) {
text = "Loading..."
}
const spinner = $("#loadingSpinner");
@@ -978,7 +978,7 @@ function showSpinner(stringKey = 'Loading') {
left: offset.left,
width: width,
height: height,
zIndex: 800
zIndex: 9999
});
} else {
// Fullscreen fallback
@@ -988,7 +988,7 @@ function showSpinner(stringKey = 'Loading') {
left: 0,
width: "100%",
height: "100%",
zIndex: 800
zIndex: 9999
});
}
@@ -1018,7 +1018,7 @@ function hideSpinner() {
left: offset.left,
width: width,
height: height,
zIndex: 800
zIndex: 9999
});
} else {
// Fullscreen fallback
@@ -1028,7 +1028,7 @@ function hideSpinner() {
left: 0,
width: "100%",
height: "100%",
zIndex: 800
zIndex: 9999
});
}

2
front/js/settings_utils.js
View File

@@ -99,7 +99,7 @@ function pluginCards(prefixesOfEnabledPlugins, includeSettings) {
});
html += `
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xxl-1 padding-5px">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px">
<div class="small-box bg-green col-sm-12 " >
<div class="inner col-sm-12">
<a href="#${prefix}_header" onclick="toggleAllSettings('open')">

28
front/maintenance.php
View File

@@ -1,6 +1,5 @@
<?php
require 'php/templates/header.php';
require 'php/templates/modals.php';
?>
<!-- Page ------------------------------------------------------------------ -->
@@ -146,6 +145,7 @@ $db->close();
</ul>
<div class="tab-content spinnerTarget">
<div class="tab-pane active" id="tab_DBTools">
<?php require 'php/templates/skel_tab_maint_dbtools.php'; ?>
<div class="db_info_table">
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" >
@@ -200,6 +200,7 @@ $db->close();
<!-- ---------------------------Backup restore -------------------------------------------- -->
<div class="tab-pane" id="tab_BackupRestore">
<?php require 'php/templates/skel_tab_maint_backup.php'; ?>
<div class="db_info_table">
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" >
@@ -241,6 +242,7 @@ $db->close();
</div>
<!-- ---------------------------Logging-------------------------------------------- -->
<div class="tab-pane" id="tab_Logging">
<?php require 'php/templates/skel_tab_maint_logging.php'; ?>
<div class="container">
<div class="row actions">
<div class="col-sm-2">
@@ -273,6 +275,7 @@ $db->close();
<!-- ---------------------------Bulk edit -------------------------------------------- -->
<div class="tab-pane" id="tab_multiEdit">
<?php require 'php/templates/skel_tab_maint_multiedit.php'; ?>
<div class="db_info_table">
<div class="box box-solid">
<?php
@@ -785,7 +788,9 @@ function initializeTabs() {
idSuffix: '_id',
delay: 50
});
setTimeout(() => hideSpinner(), 50);
setTimeout(() => {
hideSpinner();
}, 50);
}
//------------------------------------------------------------------------------
@@ -836,6 +841,7 @@ function renderLogs(customData) {
// data: { items: JSON.stringify(customData) }, // Send customData as JSON
success: function(response) {
$('#logsPlc').html(response); // Replace container content with fetched HTML
hideMaintLoggingSkeleton();
applyFilter();
@@ -847,6 +853,7 @@ function renderLogs(customData) {
},
error: function(xhr, status, error) {
console.error('Error fetching infoboxes:', error);
hideMaintLoggingSkeleton();
}
});
}
@@ -870,6 +877,23 @@ window.onload = function asyncFooter() {
</script>
<script>
function hideMaintDBToolsSkeleton() { $('#skel-tab-maint-dbtools').fadeOut(250, function() { $(this).remove(); }); }
function hideMaintBackupSkeleton() { $('#skel-tab-maint-backup').fadeOut(250, function() { $(this).remove(); }); }
function hideMaintLoggingSkeleton() { $('#skel-tab-maint-logging').fadeOut(250, function() { $(this).remove(); }); }
function hideMaintMultiEditSkeleton() { $('#skel-tab-maint-multiedit').fadeOut(250, function() { $(this).remove(); }); }
// Static tabs: content is PHP-rendered — dismiss immediately, no waiting for onload
hideMaintDBToolsSkeleton();
hideMaintBackupSkeleton();
hideMaintMultiEditSkeleton();
// Logging tab: AJAX-driven — fallback timeout only
window.addEventListener('load', function() {
setTimeout(hideMaintLoggingSkeleton, 15000);
});
</script>
<script>
hideSpinner();
</script>

1
front/network.php
View File

@@ -1,6 +1,5 @@
<?php
require 'php/templates/header.php';
require 'php/templates/modals.php';
?>
<!-- Page ------------------------------------------------------------------ -->

3
front/php/templates/footer.php
View File

@@ -43,6 +43,9 @@
</div>
<!-- ./wrapper -->
<!-- Modals — placed outside .wrapper so position:fixed modals are in the root stacking context -->
<?php require 'php/templates/modals.php'; ?>
<!-- jQuery UI -->
<script src="lib/jquery-ui/jquery-ui.min.js"></script>

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

@@ -151,7 +151,7 @@
<div class="nax_semitransparent-panel"></div>
<div class="panel panel-default nax_spinner">
<table>
<td id="loadingSpinnerText" width="130px" ></td>
<td id="loadingSpinnerText" width="130px">Loading...</td>
<td><i class="fa-solid fa-spinner fa-spin-pulse"></i></td>
</table>
</div>

6
front/php/templates/migrationCheck.php
View File

@@ -1,6 +1,4 @@
<?php
require 'php/templates/modals.php';
<?php
//------------------------------------------------------------------------------
// check if authenticated
require_once $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
@@ -14,7 +12,7 @@ $configFile = '/home/pi/pialert/conf/pialert.conf';
$databaseFile = '/home/pi/pialert/db/pialert.db';
if (file_exists($configFile) || file_exists($databaseFile)) {
echo 'true';
} else {echo 'false'; }

67
front/php/templates/skel_device_details.php Normal file
View File

@@ -0,0 +1,67 @@
<!-- Device Details Loading Skeleton ======================================= -->
<div id="device-details-skeleton">
<!-- Content header area -------------------------------------------------- -->
<div class="skel-detail-header">
<div class="skel-detail-title skel-shimmer"></div>
<div class="skel-detail-info-panel">
<div class="skel-shimmer" style="width:76px; height:76px; border-radius:4px; flex-shrink:0;"></div>
<div style="flex:1; display:flex; flex-direction:column; gap:9px; padding:10px 0 10px 10px;">
<span class="skel-line skel-shimmer" style="width:55%"></span>
<span class="skel-line skel-shimmer" style="width:38%"></span>
<span class="skel-line skel-shimmer" style="width:45%"></span>
</div>
</div>
</div>
<!-- Top stat tiles -------------------------------------------------------- -->
<div class="row">
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
</div>
</div>
<!-- /Device Details Loading Skeleton ====================================== -->

301
front/php/templates/skel_devices.php Normal file
View File

@@ -0,0 +1,301 @@
<!-- Devices Loading Skeleton ============================================== -->
<div id="devices-skeleton">
<!-- Tile cards row -------------------------------------------------------- -->
<div class="row">
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
</div>
<!-- /Tile cards row ------------------------------------------------------- -->
<!-- Chart section --------------------------------------------------------- -->
<div class="row">
<div class="col-xs-12">
<div class="skel-chart-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:220px"></span>
<span class="skel-line skel-shimmer" style="width:80px; margin-left:auto"></span>
</div>
<div class="skel-chart-body skel-shimmer"></div>
</div>
</div>
</div>
<!-- /Chart section -------------------------------------------------------- -->
<!-- Table section --------------------------------------------------------- -->
<div class="row">
<div class="col-xs-12">
<div class="skel-table-box">
<!-- Box header -->
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:180px"></span>
<span class="skel-line skel-shimmer" style="width:110px; margin-left:auto"></span>
</div>
<!-- Column headers -->
<div class="skel-table-header-row">
<span class="skel-th skel-shimmer" style="flex:0.5"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:2"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:1"></span>
</div>
<!-- Data rows -->
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
</div>
</div>
</div>
<!-- /Table section -------------------------------------------------------- -->
</div>
<!-- /Devices Loading Skeleton ============================================= -->

44
front/php/templates/skel_events.php Normal file
View File

@@ -0,0 +1,44 @@
<div id="events-skeleton">
<!-- 6 stat tiles -->
<div class="row">
<?php for ($i = 0; $i < 6; $i++): ?>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="skel-tile">
<div class="skel-tile-inner">
<span class="skel-tile-num skel-shimmer"></span>
<span class="skel-tile-label skel-shimmer"></span>
</div>
<div class="skel-tile-icon-area">
<span class="skel-tile-icon-shape skel-shimmer"></span>
</div>
</div>
</div>
<?php endfor; ?>
</div>
<!-- events table -->
<div class="row" style="margin-top:12px">
<div class="col-xs-12">
<div class="skel-table-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:120px"></span>
<span class="skel-line skel-shimmer" style="width:90px; margin-left:auto;"></span>
</div>
<div class="skel-table-header-row">
<?php for ($i = 0; $i < 6; $i++): ?>
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 8; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 6; $j++): ?>
<span class="skel-td skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php endfor; ?>
</div>
</div>
</div>
</div>

19
front/php/templates/skel_notifications.php Normal file
View File

@@ -0,0 +1,19 @@
<div id="notifications-skeleton">
<div class="skel-table-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:200px"></span>
</div>
<div class="skel-table-header-row">
<?php for ($i = 0; $i < 4; $i++): ?>
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 8; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 4; $j++): ?>
<span class="skel-td skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php endfor; ?>
</div>
</div>

42
front/php/templates/skel_plugins.php Normal file
View File

@@ -0,0 +1,42 @@
<div id="plugins-skeleton">
<div class="skel-plugins-wrap">
<!-- Left nav sidebar -->
<div class="skel-plugins-nav">
<?php
$widths = [72, 60, 80, 55, 68, 75];
for ($i = 0; $i < 6; $i++):
?>
<div class="skel-plugins-nav-item">
<span class="skel-line skel-shimmer" style="width:<?= $widths[$i] ?>%"></span>
</div>
<?php endfor; ?>
</div>
<!-- Right content area -->
<div class="skel-plugins-body">
<!-- Sub-tab bar -->
<div class="skel-tabs-bar" style="border-radius: 0 4px 0 0; margin-bottom: 0;">
<span class="skel-tab skel-shimmer"></span>
<span class="skel-tab skel-shimmer"></span>
<span class="skel-tab skel-shimmer"></span>
</div>
<!-- Data table -->
<div class="skel-table-box" style="border-top: none; border-radius: 0 0 4px 4px;">
<div class="skel-table-header-row">
<?php for ($j = 0; $j < 5; $j++): ?>
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 8; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 5; $j++): ?>
<span class="skel-td skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php endfor; ?>
</div>
</div>
</div>
</div>

45
front/php/templates/skel_presence.php Normal file
View File

@@ -0,0 +1,45 @@
<div id="presence-skeleton">
<!-- 6 stat tiles -->
<div class="row">
<?php for ($i = 0; $i < 6; $i++): ?>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="skel-tile">
<div class="skel-tile-inner">
<span class="skel-tile-num skel-shimmer"></span>
<span class="skel-tile-label skel-shimmer"></span>
</div>
<div class="skel-tile-icon-area">
<span class="skel-tile-icon-shape skel-shimmer"></span>
</div>
</div>
</div>
<?php endfor; ?>
</div>
<!-- activity chart -->
<div class="row" style="margin-top:12px">
<div class="col-md-12">
<div class="skel-chart-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:160px"></span>
</div>
<div class="skel-chart-body skel-shimmer" style="height:160px"></div>
</div>
</div>
</div>
<!-- presence calendar -->
<div class="row">
<div class="col-md-12">
<div class="skel-chart-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:100px"></span>
<span class="skel-line skel-shimmer" style="width:180px; margin-left:auto;"></span>
</div>
<div class="skel-chart-body skel-shimmer" style="height:380px"></div>
</div>
</div>
</div>
</div>

23
front/php/templates/skel_report.php Normal file
View File

@@ -0,0 +1,23 @@
<div id="report-skeleton">
<div class="skel-table-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:160px"></span>
</div>
<!-- nav controls + format select -->
<div style="display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 15px; border-bottom:1px solid var(--skel-border);">
<span class="skel-shimmer" style="height:32px; width:34px; border-radius:4px;"></span>
<span class="skel-shimmer" style="height:14px; width:40px;"></span>
<span class="skel-shimmer" style="height:32px; width:34px; border-radius:4px;"></span>
<span class="skel-shimmer" style="height:32px; width:80px; border-radius:4px;"></span>
<span class="skel-shimmer" style="height:14px; width:160px;"></span>
</div>
<!-- report body shimmer lines -->
<div style="padding:20px 15px; display:flex; flex-direction:column; gap:10px;">
<?php foreach ([90, 75, 85, 60, 80, 70, 65, 88] as $w): ?>
<span class="skel-shimmer" style="height:16px; width:<?= $w ?>%;"></span>
<?php endforeach; ?>
</div>
</div>
</div>

106
front/php/templates/skel_settings.php Normal file
View File

@@ -0,0 +1,106 @@
<!-- Settings Loading Skeleton --------------------------------------------- -->
<div id="settings-skeleton">
<!-- Overview panel skeleton -->
<div class="skel-overview-panel">
<div class="skel-overview-heading">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:180px"></span>
</div>
<div class="skel-overview-body">
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
</div>
<div class="skel-overview-heading">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:180px"></span>
</div>
<div class="skel-overview-body">
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
</div>
</div>
<!-- Core section (open, with a plugin block) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:60px"></span>
</div>
<div class="skel-plugin-block">
<div class="skel-plugin-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:75px"></span>
<span class="skel-line skel-shimmer" style="width:210px"></span>
</div>
<div class="skel-plugin-body">
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer" style="height:75px"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="max-width:35px"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="max-width:35px"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="height:75px"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer"></span></div>
</div>
</div>
</div>
<!-- System section (open) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:80px"></span>
</div>
<div class="skel-plugin-block">
<div class="skel-plugin-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:90px"></span>
<span class="skel-line skel-shimmer" style="width:185px"></span>
</div>
<div class="skel-plugin-body">
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
</div>
</div>
</div>
<!-- Device Scanners section (closed) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:140px"></span>
</div>
</div>
<!-- Other Scanners section (open) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:120px"></span>
</div>
<div class="skel-plugin-block">
<div class="skel-plugin-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:65px"></span>
<span class="skel-line skel-shimmer" style="width:200px"></span>
</div>
<div class="skel-plugin-body">
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" style="width:16%"></span><span class="skel-cell-desc skel-shimmer" style="width:40%"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer" style="width:33%"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" style="width:19%"></span><span class="skel-cell-desc skel-shimmer" style="width:42%"></span><span class="skel-cell-input skel-shimmer"></span></div>
</div>
</div>
</div>
<!-- Publishers section (closed) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:100px"></span>
</div>
</div>
</div>
<!-- /Settings Loading Skeleton -------------------------------------------- -->

42
front/php/templates/skel_tab_details.php Normal file
View File

@@ -0,0 +1,42 @@
<!-- Details Tab Skeleton ================================================== -->
<div id="skel-tab-details" class="skel-tab-pane">
<div class="skel-detail-form">
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:260px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:400px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:300px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:220px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
</div>
<div class="skel-form-footer">
<span class="skel-form-btn skel-shimmer"></span>
<span class="skel-form-btn skel-shimmer"></span>
</div>
</div>
</div>
<!-- /Details Tab Skeleton ================================================= -->

75
front/php/templates/skel_tab_events.php Normal file
View File

@@ -0,0 +1,75 @@
<!-- Events Tab Skeleton =================================================== -->
<div id="skel-tab-events" class="skel-tab-pane">
<!-- Checkbox row -->
<div style="display:flex; align-items:center; gap:10px; margin-bottom:12px; padding:0 2px;">
<span class="skel-shimmer" style="width:16px; height:16px; border-radius:3px; flex-shrink:0;"></span>
<span class="skel-line skel-shimmer" style="width:220px"></span>
</div>
<!-- Table -->
<div class="skel-table-box">
<div class="skel-table-header-row">
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:2"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:2"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:20%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:22%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:11%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:16%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:19%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:20%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:22%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:17%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:10%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:24%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:21%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:19%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:21%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:23%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:11%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:17%"></span>
</div>
</div>
</div>
<!-- /Events Tab Skeleton ================================================== -->

11
front/php/templates/skel_tab_maint_backup.php Normal file
View File

@@ -0,0 +1,11 @@
<div class="skel-tab-pane" id="skel-tab-maint-backup">
<?php
$widths = [55, 60, 65, 50, 55, 70];
for ($i = 0; $i < 6; $i++):
?>
<div class="skel-tr">
<span class="skel-shimmer" style="height:32px; width:185px; flex-shrink:0; border-radius:4px;"></span>
<span class="skel-line skel-shimmer" style="width:<?= $widths[$i] ?>%"></span>
</div>
<?php endfor; ?>
</div>

11
front/php/templates/skel_tab_maint_dbtools.php Normal file
View File

@@ -0,0 +1,11 @@
<div class="skel-tab-pane" id="skel-tab-maint-dbtools">
<?php
$widths = [55, 70, 45, 62, 58, 50, 55, 48];
for ($i = 0; $i < 8; $i++):
?>
<div class="skel-tr">
<span class="skel-shimmer" style="height:32px; width:185px; flex-shrink:0; border-radius:4px;"></span>
<span class="skel-line skel-shimmer" style="width:<?= $widths[$i] ?>%"></span>
</div>
<?php endfor; ?>
</div>

10
front/php/templates/skel_tab_maint_logging.php Normal file
View File

@@ -0,0 +1,10 @@
<div class="skel-tab-pane" id="skel-tab-maint-logging">
<!-- Controls bar -->
<div style="display:flex; gap:20px; padding:10px 0 15px; align-items:center;">
<span class="skel-line skel-shimmer" style="width:120px"></span>
<span class="skel-line skel-shimmer" style="width:100px"></span>
<span class="skel-shimmer" style="height:32px; flex:1; border-radius:4px;"></span>
</div>
<!-- Log content area -->
<span class="skel-shimmer" style="display:block; width:100%; height:280px; border-radius:4px;"></span>
</div>

8
front/php/templates/skel_tab_maint_multiedit.php Normal file
View File

@@ -0,0 +1,8 @@
<div class="skel-tab-pane" id="skel-tab-maint-multiedit">
<?php for ($i = 0; $i < 8; $i++): ?>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer"></span>
</div>
<?php endfor; ?>
</div>

12
front/php/templates/skel_tab_presence.php Normal file
View File

@@ -0,0 +1,12 @@
<!-- Presence Tab Skeleton ================================================= -->
<div id="skel-tab-presence" class="skel-tab-pane">
<div class="skel-chart-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:80px"></span>
<span class="skel-line skel-shimmer" style="width:180px; margin:0 auto"></span>
<span class="skel-line skel-shimmer" style="width:80px; margin-left:auto"></span>
</div>
<div class="skel-chart-body skel-shimmer" style="height:380px"></div>
</div>
</div>
<!-- /Presence Tab Skeleton ================================================ -->

78
front/php/templates/skel_tab_sessions.php Normal file
View File

@@ -0,0 +1,78 @@
<!-- Sessions Tab Skeleton ================================================= -->
<div id="skel-tab-sessions" class="skel-tab-pane">
<div class="skel-table-box">
<div class="skel-table-header-row">
<span class="skel-th skel-shimmer" style="flex:0.5"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:1"></span>
<span class="skel-th skel-shimmer" style="flex:1"></span>
<span class="skel-th skel-shimmer" style="flex:2"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:22%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:18%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:8%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:11%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:20%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:9%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:16%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:11%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:24%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:19%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:9%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:12%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:19%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:18%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:15%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:21%"></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:8%"></span>
<span class="skel-td skel-shimmer" style="flex:1; max-width:11%"></span>
<span class="skel-td skel-shimmer" style="flex:2; max-width:17%"></span>
</div>
</div>
</div>
<!-- /Sessions Tab Skeleton ================================================ -->

12
front/php/templates/skel_tab_sysinfo_initcheck.php Normal file
View File

@@ -0,0 +1,12 @@
<div class="skel-info-tab">
<!-- status banner -->
<div style="margin-bottom:16px">
<span class="skel-shimmer" style="height:44px; border-radius:4px; display:block;"></span>
</div>
<!-- card grid -->
<div style="display:flex; flex-wrap:wrap; gap:10px;">
<?php for ($i = 0; $i < 9; $i++): ?>
<span class="skel-shimmer" style="height:76px; width:190px; border-radius:4px;"></span>
<?php endfor; ?>
</div>
</div>

8
front/php/templates/skel_tab_sysinfo_network.php Normal file
View File

@@ -0,0 +1,8 @@
<div class="skel-info-tab">
<?php for ($i = 0; $i < 10; $i++): ?>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer"></span>
</div>
<?php endfor; ?>
</div>

8
front/php/templates/skel_tab_sysinfo_server.php Normal file
View File

@@ -0,0 +1,8 @@
<div class="skel-info-tab">
<?php for ($i = 0; $i < 14; $i++): ?>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer"></span>
</div>
<?php endfor; ?>
</div>

14
front/php/templates/skel_tab_sysinfo_storage.php Normal file
View File

@@ -0,0 +1,14 @@
<div class="skel-info-tab">
<div class="skel-table-header-row">
<?php for ($i = 0; $i < 5; $i++): ?>
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 6; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 5; $j++): ?>
<span class="skel-td skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php endfor; ?>
</div>

12
front/php/templates/skel_workflows.php Normal file
View File

@@ -0,0 +1,12 @@
<div id="workflows-skeleton">
<?php for ($i = 0; $i < 3; $i++): ?>
<div class="skel-workflow-card">
<div class="skel-workflow-header">
<span class="skel-line skel-shimmer" style="width:<?= [220, 180, 200][$i] ?>px"></span>
<span class="skel-line skel-shimmer" style="width:55px; margin-left:auto;"></span>
<span class="skel-line skel-shimmer" style="width:55px; margin-left:auto;"></span>
<span class="skel-line skel-shimmer" style="width:55px; margin-left:auto;"></span>
</div>
</div>
<?php endfor; ?>
</div>

8
front/plugins.php
View File

@@ -1,16 +1,16 @@
<?php
require 'php/templates/header.php';
require 'php/templates/modals.php';
require 'php/templates/header.php';
?>
<!-- Page ------------------------------------------------------------------ -->
<div class="content-wrapper integrations-plugins">
<div class="content-wrapper integrations-plugins" id="pluginsPage">
<?php require 'php/templates/skel_plugins.php'; ?>
<?php
require 'pluginsCore.php';
?>
</div>
<?php

12
front/pluginsCore.php
View File

@@ -294,6 +294,8 @@ async function getData() {
generateTabs();
} catch (err) {
console.error("Failed to load data", err);
hideSpinner();
hidePluginsSkeleton();
}
}
@@ -516,6 +518,7 @@ function generateTabs() {
if (visiblePlugins.length === 0) {
$('#tabs-content-location').html(`<p class="text-muted" style="padding: 15px;">${getString('Gen_No_Data')}</p>`);
hideSpinner();
hidePluginsSkeleton();
return;
}
@@ -534,6 +537,7 @@ function generateTabs() {
}
hideSpinner()
hidePluginsSkeleton()
}
function resetTabs() {
@@ -858,4 +862,12 @@ else
initFields();
}
function hidePluginsSkeleton() {
$('#plugins-skeleton').fadeOut(250, function() { $(this).remove(); });
}
window.addEventListener('load', function() {
setTimeout(function() { hidePluginsSkeleton(); hideSpinner(); }, 15000);
});
</script>

11
front/presence.php
View File

@@ -21,7 +21,8 @@
</script>
<!-- Page ------------------------------------------------------------------ -->
<div class="content-wrapper">
<div class="content-wrapper" id="presencePage">
<?php require 'php/templates/skel_presence.php'; ?>
<!-- Main content ---------------------------------------------------------- -->
<section class="content">
@@ -344,6 +345,7 @@ function initializeCalendar () {
showSpinner();
} else {
hideSpinner();
hidePresenceSkeleton();
}
}
@@ -507,6 +509,13 @@ function getDevicesPresence (status) {
});
};
function hidePresenceSkeleton() {
hideSpinner();
$('#presence-skeleton').fadeOut(250, function() { $(this).remove(); });
}
window.addEventListener('load', function() {
setTimeout(hidePresenceSkeleton, 15000);
});
</script>

13
front/report.php
View File

@@ -1,7 +1,6 @@
<?php
require 'php/templates/header.php';
require 'php/templates/modals.php';
?>
@@ -10,7 +9,8 @@
</script>
<!-- Page ------------------------------------------------------------------ -->
<div class="content-wrapper">
<div class="content-wrapper" id="reportPage">
<?php require 'php/templates/skel_report.php'; ?>
<!-- Content header--------------------------------------------------------- -->
<!-- Main content ---------------------------------------------------------- -->
@@ -126,6 +126,7 @@
})
.finally(() => {
hideSpinner(); // always called, even if error occurred
hideReportSkeleton();
});
}
@@ -183,6 +184,14 @@
</script>
<!-- /.content -->
<script>
function hideReportSkeleton() {
$('#report-skeleton').fadeOut(250, function() { $(this).remove(); });
}
window.addEventListener('load', function() {
setTimeout(hideReportSkeleton, 15000);
});
</script>
<?php
require 'php/templates/footer.php';
?>

34
front/settings.php
View File

@@ -69,20 +69,17 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
<div id="settingsPage" class="content-wrapper">
<a style="cursor:pointer">
<span>
<i id='toggleSettings' onclick="toggleAllSettings()" class="settings-expand-icon fa fa-angle-double-down"></i>
</span>
</a>
<?php require 'php/templates/skel_settings.php'; ?>
<!-- Content header--------------------------------------------------------- -->
<section class="content-header">
<div class ="bg-white color-palette box box-solid box-primary col-sm-12 panel panel-default panel-title" >
<div class ="bg-white color-palette box box-solid col-sm-12 panel panel-default panel-title" >
<a data-toggle="collapse" href="#settingsOverview">
<div class ="settings-group col-sm-12 panel-heading panel-title">
<div class ="settings-group col-sm-12 ">
<i class="<?= lang("settings_enabled_icon");?>"></i> <?= lang("settings_enabled");?>
</div>
</a>
@@ -284,7 +281,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
},
error: function (xhr, status, error) {
console.error("Error:", error);
// Handle any errors
hideSettingsSkeleton();
}
});
}
@@ -328,7 +325,10 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
overviewSections.forEach((section) => {
overviewSections_html += `<div class="overview-section col-sm-12" id="${section}">
const sectionHtml = overviewSectionsHtml[index];
if (sectionHtml.trim()) {
overviewSections_html += `<div class="overview-section col-sm-12" id="${section}">
<div class="col-sm-12 " title="${getString("settings_"+section)}">
<a href="#${section}_content_header">
<div class="overview-group col-sm-12 col-xs-12">
@@ -338,9 +338,10 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
</a>
</div>
<div class="col-sm-12">
${overviewSectionsHtml[index]}
${sectionHtml}
</div>
</div>`
}
index++;
});
@@ -535,9 +536,18 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
initSelect2();
initHoverNodeInfo();
hideSpinner();
hideSettingsSkeleton();
}
// ----------------------------------------------------------------
function hideSettingsSkeleton() {
var $skel = $('#settings-skeleton');
if (!$skel.length) return;
$('#settingsPage').removeClass('settings-loading');
$skel.fadeOut(250, function() { $(this).remove(); });
}
// display the name of the first person
// echo $settingsJson[0]->name;
var settingsNumberDB = <?php echo count($settings)?>;
@@ -652,6 +662,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
{
showMessage (getString("settings_readonly"), 10000, "modal_red");
console.log(`app.conf seems to be read only (canRWConfig: ${canReadAndWriteConfig})`);
hideSettingsSkeleton();
} else
{
// check if config file has been updated
@@ -706,9 +717,10 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
}
}
showSpinner()
handleLoadingDialog()
// Fallback: hide skeleton after 15s in case of unexpected error
setTimeout(hideSettingsSkeleton, 15000)

9
front/systeminfo.php
View File

@@ -13,7 +13,6 @@
require 'php/templates/header.php';
?>
<?php require 'php/templates/modals.php'; ?>
<!-- ----------------------------------------------------------------------- -->
@@ -70,16 +69,16 @@
<div class="tab-content spinnerTarget" style="min-height: 430px;">
<div class="tab-pane fade" data-php-file="systeminfoServer.php" id="panServer">
<!-- PLACEHOLDER -->
<?php require 'php/templates/skel_tab_sysinfo_server.php'; ?>
</div>
<div class="tab-pane fade" data-php-file="systeminfoNetwork.php" id="panNetwork">
<!-- PLACEHOLDER -->
<?php require 'php/templates/skel_tab_sysinfo_network.php'; ?>
</div>
<div class="tab-pane fade table-responsive" data-php-file="systeminfoStorage.php" id="panStorage">
<!-- PLACEHOLDER -->
<?php require 'php/templates/skel_tab_sysinfo_storage.php'; ?>
</div>
<div class="tab-pane fade table-responsive" data-php-file="systeminfoInitCheck.php" id="panInitCheck">
<!-- PLACEHOLDER -->
<?php require 'php/templates/skel_tab_sysinfo_initcheck.php'; ?>
</div>
</div>
<!-- /.tab-content -->

10
front/userNotifications.php
View File

@@ -14,6 +14,7 @@ require 'php/templates/header.php';
</script>
<div id="notifications" class="content-wrapper">
<?php require 'php/templates/skel_notifications.php'; ?>
<section class="content">
<div class="notification-box box box-gray col-xs-12" >
<div class="box-header">
@@ -168,6 +169,7 @@ require 'php/templates/header.php';
,
initComplete: function(settings, json) {
hideSpinner(); // Called after the DataTable is fully initialized
hideNotificationsSkeleton();
}});
fetchData(function(data) {
@@ -215,6 +217,14 @@ require 'php/templates/header.php';
});
function hideNotificationsSkeleton() {
$('#notifications-skeleton').fadeOut(250, function () { $(this).remove(); });
}
window.addEventListener('load', function () {
setTimeout(hideNotificationsSkeleton, 15000);
});
</script>
<?php

2
front/workflows.php
View File

@@ -1,13 +1,13 @@
<?php
require 'php/templates/header.php';
require 'php/templates/modals.php';
?>
<!-- ----------------------------------------------------------------------- -->
<!-- Page ------------------------------------------------------------------ -->
<div class="content-wrapper" id="wf-content-wrapper">
<?php require 'php/templates/skel_workflows.php'; ?>
<span class="helpIcon"> <a target="_blank" href="https://docs.netalertx.com/WORKFLOWS"><i class="fa fa-circle-question"></i></a></span>
<?php
require 'workflowsCore.php';

9
front/workflowsCore.php
View File

@@ -107,6 +107,7 @@ function getData() {
})
.always(function () {
hideSpinner(); // Ensure the spinner is hidden in all cases
hideWorkflowsSkeleton();
});
}
@@ -1376,5 +1377,13 @@ $(document).ready(function () {
getData();
});
function hideWorkflowsSkeleton() {
hideSpinner();
$('#workflows-skeleton').fadeOut(250, function() { $(this).remove(); });
}
window.addEventListener('load', function() {
setTimeout(hideWorkflowsSkeleton, 15000);
});
</script>