mirror/NetAlertX
1
0 Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2026-10-08 14:05:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

FE: skeleton uplift

Browse Source
This commit is contained in:
jokob-sk committed 2026-06-28 11:07:10 +10:00
1 parent 86cc8a3683
commit 214959f5a1
12 files changed
+193 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

front/deviceDetailsEdit.php
+1 -1
View File
@@ -3,7 +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'; ?>
<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_device_details_tab_details.php'; ?>
<div class="row" id="deviceDetailsEdit">
<div class="box-body form-horizontal">
front/deviceDetailsEvents.php
+1 -1
View File
@@ -5,7 +5,7 @@
?>
<!-- ----------------------------------------------------------------------- -->
<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_events.php'; ?>
<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_device_details_tab_events.php'; ?>
<!-- Hide Connections -->
<div class="col-sm-12 col-xs-12">
front/deviceDetailsPresence.php
+1 -1
View File
@@ -5,7 +5,7 @@
?>
<!-- fullCalendar -->
<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_presence.php'; ?>
<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_device_details_tab_presence.php'; ?>
<link rel="stylesheet" href="lib/fullcalendar/fullcalendar.min.css">
front/deviceDetailsSessions.php
+1 -1
View File
@@ -6,7 +6,7 @@
<!-- ----------------------------------------------------------------------- -->
<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_sessions.php'; ?>
<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_device_details_tab_sessions.php'; ?>
<!-- Datatable Session -->
<table id="tableSessions" class="table table-bordered table-hover table-striped ">
front/deviceDetailsTools.php
+1 -1
View File
@@ -2,7 +2,7 @@
//------------------------------------------------------------------------------
// check if authenticated
require_once $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_tools.php';
require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_device_details_tab_tools.php';
?>
<!-- INTERNET INFO -->
<?php if (strtolower($_REQUEST["mac"]) == "internet") { ?>
front/js/common.js
+17 -7
View File
@@ -971,22 +971,28 @@ $(document).on('click', 'a', function (e) {
function resolveSpinnerTarget(explicitTarget = null) {
if (explicitTarget) {
return $(explicitTarget);
const explicit = $(explicitTarget);
if (explicit.length) {
return explicit;
}
}
// Active tab pane
const activeTab = $(".tab-pane.active .spinnerTarget").first();
if (activeTab.length) {
return activeTab;
// Prefer the active tab pane itself
const activePane = $(".tab-pane.active:visible");
if (activePane.length) {
// Use a direct child spinnerTarget if one exists and is visible
const childTarget = activePane.children(".spinnerTarget:visible").first();
return childTarget.length ? childTarget : activePane;
}
// Visible container fallback
// Fall back to any visible spinnerTarget
const visibleTarget = $(".spinnerTarget:visible").first();
if (visibleTarget.length) {
return visibleTarget;
}
return $();
// Finally, cover the page
return $("body");
}
function showSpinner(stringKey = "Loading", target = null) {
@@ -1001,6 +1007,10 @@ function showSpinner(stringKey = "Loading", target = null) {
const spinner = $("#loadingSpinner");
const resolvedTarget = resolveSpinnerTarget(target);
console.log(resolvedTarget);
console.log(`spinnerTarget=${resolvedTarget.attr("id")} class=${resolvedTarget.attr("class")} size=${resolvedTarget.outerWidth()}x${resolvedTarget.outerHeight()} parent=${resolvedTarget.parent().outerWidth()}x${resolvedTarget.parent().outerHeight()}`)
$("#loadingSpinnerText").text(text);
if (resolvedTarget.length) {
front/php/templates/skel_device_details.php
+171 -1
View File
@@ -1,5 +1,5 @@
<!-- Device Details Loading Skeleton ======================================= -->
<div id="device-details-skeleton">
<div id="device-details-skeleton" class="spinnerTarget">
<!-- Content header area -------------------------------------------------- -->
<div class="skel-detail-header">
@@ -48,7 +48,177 @@
</div>
</div>
</div>
<!-- Tabs -->
<div class="skel-form-row">
<div class="skel-form-label skel-shimmer" style="max-width:50px;height:30px;"></div>
<div class="skel-form-label skel-shimmer" style="max-width:50px;height:30px;"></div>
<div class="skel-form-label skel-shimmer" style="max-width:50px;height:30px;"></div>
<div class="skel-form-label skel-shimmer" style="max-width:50px;height:30px;"></div>
<div class="skel-form-label skel-shimmer" style="max-width:50px;height:30px;"></div>
<div class="skel-form-label skel-shimmer" style="max-width:50px;height:30px;"></div>
</div>
<!-- FORM -->
<div class="skel-detail-form col-lg-12 col-sm-12 col-xs-12">
<div class="col-lg-4 col-sm-6 col-xs-12">
<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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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:340px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></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-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;height:50px"></span>
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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:40px"></span>
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></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-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:260px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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>
<div class="col-lg-4 col-sm-6 col-xs-12">
<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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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-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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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-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: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>
<div class="col-lg-6 col-sm-12 col-xs-12">
<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><span class="skel-form-input skel-shimmer" style="max-width:40px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-xs-12">
<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>
<div class="skel-form-footer">
<span class="skel-form-btn skel-shimmer"></span>
<span class="skel-form-btn skel-shimmer"></span>
</div>
</div>
</div>
<!-- /Device Details Loading Skeleton ====================================== -->
front/php/templates/skel_tab_details.php → front/php/templates/skel_device_details_tab_details.php
View File
File renamed without changes.
front/php/templates/skel_tab_events.php → front/php/templates/skel_device_details_tab_events.php
View File
File renamed without changes.
front/php/templates/skel_tab_presence.php → front/php/templates/skel_device_details_tab_presence.php
View File
File renamed without changes.
front/php/templates/skel_tab_sessions.php → front/php/templates/skel_device_details_tab_sessions.php
View File
File renamed without changes.
front/php/templates/skel_tab_tools.php → front/php/templates/skel_device_details_tab_tools.php
View File
File renamed without changes.