Next release

front/appEvents.php

@@ -6,7 +6,7 @@
 
 
 <!-- Page ------------------------------------------------------------------ -->
-<div class="content-wrapper">
+<div id="appEvents" class="content-wrapper">
 
 <?php
    require 'appEventsCore.php';
@@ -15,6 +15,7 @@
 
 </div>
 
+
 <?php
   require 'php/templates/footer.php';
 ?>

front/appEventsCore.php

@@ -1,21 +1,21 @@
+
 <span class="helpIcon">
     <a target="_blank" href="https://docs.netalertx.com/WORKFLOWS_DEBUGGING">
       <i class="fa fa-circle-question"></i>
     </a>
-  </span>
-<section class="content">
+</span>
+<?php require 'php/templates/skel_app_events.php'; ?>
+<section class="content">  
   <div class="nav-tabs-custom app-event-content" style="margin-bottom: 0px;">
     <ul id="tabs-location" class="nav nav-tabs col-sm-2 hidden">
       <li class="left-nav"><a class="col-sm-12" href="#" id="" data-toggle="tab">Events</a></li>
     </ul>
-    <div id="tabs-content-location" class="tab-content col-sm-12">
+    <div id="tabs-content-location" class="tab-content col-sm-12 table-responsive">
       <table class="table table-striped" id="appevents-table" data-my-dbtable="AppEvents"></table>
     </div>
-  </div>
+  </div>  
 </section>
 
-
-
 <script>
 
 // show loading dialog
@@ -116,6 +116,7 @@
           });
 
           hideSpinner();
+          hideAppEventsSkeleton();
         },
         error: function () {
           callback({
@@ -181,8 +182,14 @@
       }
     ]
   });
+});
 
+function hideAppEventsSkeleton() {
+  $('#skel-app-events').fadeOut(50, function () { $(this).remove(); });
+}
 
+window.addEventListener('load', function () {
+  setTimeout(hideAppEventsSkeleton, 15000);
 });
 
 

front/css/app.css

@@ -11,13 +11,15 @@
    Global Variables
 ----------------------------------------------------------------------------- */
 :root {
+    --color-white: #fff;
     --color-aqua: #00c0ef;
     --color-lightblue: #3c8dbc;
     --color-blue: #0060df;
     --color-green: #00a65a;
     --color-yellow: #f39c12;
     --color-red: #dd4b39;
     --color-gray: #8c8c8c;
+    --color-darkgray: #3f3e3e;
     --color-black: #000;
 }
 
@@ -652,15 +654,15 @@ hr
 .btn-outline:hover
 {
   border: 1px solid var(--color-black);
-  background: transparent;
-  color: var(--color-black);
+  background-color: var(--color-black);
+  color: var(--color-white);
 }
 
 .btn-outline
 {
-  border: 1px solid var(--color-gray);
-  background: transparent;
-  color: var(--color-gray);
+  border: 1px solid var(--color-darkgray);
+  background-color: var(--color-white);
+  color: var(--color-darkgray);
 }
 
 /* -----------------------------------------------------------------------------
@@ -1069,6 +1071,8 @@ height: 50px;
 #settingsPage
 {
     display: grid;
+    margin-top: 50px;
+    padding-top: 0px;
 }
 
 
@@ -2527,6 +2531,22 @@ textarea[readonly],
     padding-left: 10px;
 }
 
+/* -----------------------------------------------------------------------------
+   Sys info
+----------------------------------------------------------------------------- */
+#panInitCheck .row
+{
+    width: 100%;
+}
+
+/* -----------------------------------------------------------------------------
+   Sys info
+----------------------------------------------------------------------------- */
+#appEvents
+{
+    display: flow-root;
+}
+
 /* -----------------------------------------------------------------------------
    Floating edit button
 ----------------------------------------------------------------------------- */
@@ -2598,9 +2618,9 @@ table.dataTable tbody > tr.selected
     --skel-base:     #e2e2e2;
     --skel-shine:    #f0f0f0;
     --skel-section:  #d4d4d4;
-    --skel-panel-bg: #f5f5f5;
+    --skel-panel-bg: #fff;
     --skel-border:   #ddd;
-    --skel-bg:       #ecf0f5;
+    --skel-bg:       #fff;
 }
 
 @keyframes settingsShimmer {
@@ -2624,42 +2644,53 @@ table.dataTable tbody > tr.selected
 /* Positioning anchors */
 #settingsPage, #devicesPage, #deviceDetailsPage,
 #eventsPage, #presencePage, #reportPage, #notifications, #wf-content-wrapper, #pluginsPage,
-#panDetails, #panSessions, #panPresence, #panEvents {
+#panDetails, #panSessions, #panPresence, #panEvents, #appEvents {
     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,
+#events-skeleton, #presence-skeleton, #report-skeleton, #skel-app-events,
 #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,
+#events-skeleton, #presence-skeleton, #report-skeleton, #skel-app-events,
 #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 { top: 45px; min-height: 100px; }
-#events-skeleton         { top: 50px; min-height: 500px; }
-#presence-skeleton       { top: 50px; min-height: 500px; }
-#report-skeleton         { min-height: 400px; }
-#notifications-skeleton  { top: 50px; min-height: 400px; }
+.skel-tab-pane           { z-index: 10; min-height: 400px; background-color: var(--skel-panel-bg);}
+#settings-skeleton       { margin: 15px; min-height: 500px; }
+#devices-skeleton        { margin: 15px; top: 50px; min-height: 500px; }
+#skel-app-events         { margin: 15px; top: 50px; min-height: 500px; z-index: inherit;}
+#device-details-skeleton { margin: 15px; top: 42px; }
+#events-skeleton         { margin: 15px; top: 50px; min-height: 500px; }
+#presence-skeleton       { margin: 15px; top: 50px; min-height: 500px; }
+#report-skeleton         { margin: 15px; top: 50px; min-height: 400px; }
+#notifications-skeleton  { margin: 15px; top: 50px; min-height: 400px; }
 #workflows-skeleton      { top: 50px; width: 770px; margin: 0 auto; min-height: 300px; }
 #plugins-skeleton        { top: 50px; padding: 0; min-height: 400px; }
+#skel-tab-sessions, #skel-tab-events, #skel-tab-presence { margin: 0px; }
+
+/* Hide scrollbars */
+#skel-tab-sessions, #skel-tab-events, #skel-tab-presence {
+    overflow: hidden; /* Hides the scrollbar */
+    -ms-overflow-style: none; /* Internet Explorer 10+ */
+    scrollbar-width: none; /* Firefox */
+}
+#skel-tab-sessions::-webkit-scrollbar, #skel-tab-events::-webkit-scrollbar, #skel-tab-presence::-webkit-scrollbar {
+    display: none; /* Safari and Chrome */
+}
 
 /* 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);
+    border: 1px none var(--skel-border);
 }
 
 /* Clipped rounded containers */
@@ -2716,8 +2747,8 @@ table.dataTable tbody > tr.selected
 /* ----- 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-overview-body     { padding: 12px; }
+.skel-overview-card     { min-width: 100%; height: 76px; border-radius: 4px; padding: 5px;}
 .skel-section           { margin-bottom: 8px; }
 .skel-overview-header   { gap: 14px; }
 .skel-section-header    { gap: 14px; }
@@ -2729,7 +2760,8 @@ table.dataTable tbody > tr.selected
 .skel-cell-input        { height: 32px; }
 
 /* ----- Devices ---------------------------------------------------------- */
-.skel-tile              { display: flex; height: 80px; }
+.skel-tile-row          { margin-right: -30px;  margin-left: -30px;}
+.skel-tile              { display: flex; height: 80px; margin-bottom: 15px;}
 #device-details-skeleton .skel-tile { display: flex; height: 45px; }
 .skel-tile-inner        { display: flex; flex-direction: column; padding: 12px 15px; justify-content: center; gap: 10px; }
 .skel-tile-num          { height: 26px; width: 55%; }
@@ -2753,12 +2785,16 @@ table.dataTable tbody > tr.selected
 .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-footer-left  { display: flex; justify-content: flex-start; 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); }
 
+/* ----- AppEvents -------------------------------------------------------- */
+#skel-app-event      { display: flex; gap: 0; min-height: 400px; }
+
 /* ----- Plugins ---------------------------------------------------------- */
 .skel-plugins-wrap      { display: flex; gap: 0; min-height: 400px; }
 .skel-plugins-nav       { flex-shrink: 0; border-right: 1px solid var(--skel-border); padding: 8px 0; }

front/css/dark-patch.css

@@ -14,6 +14,7 @@
   --color-aqua: #00c0ef;
   --color-lightblue: #3c8dbc;
   --color-blue: #0060df;
+  --color-white: #fff;
   --color-green: #00a65a;
   --color-yellow: #f39c12;
   --color-red: #dd4b39;
@@ -389,18 +390,25 @@ pre {
 td.highlight {
   background-color: rgba(255, 204, 0, 0.333);
 }
-.btn-default {
-  box-shadow: none;
-  background-color: #3e464c;
-  color: #bec5cb;
-  border: 1px solid #353c42;
-}
-
-.btn-outline {
-  border: 1px solid var(--color-black);
-  background: transparent;
-  color: var(--color-white);
-}
+  .btn-default {
+    box-shadow: none;
+    background-color: #3e464c;
+    color: #bec5cb;
+    border: 1px solid #353c42;
+  }
+
+  .btn-outline {
+    border: 1px solid var(--color-black);
+    background: transparent;
+    color: var(--color-white);
+  }
+
+  .btn-outline:hover
+  {
+    border: 1px solid var(--color-black);
+    background-color: var(--color-black);;
+    color: var(--color-white);
+  }
 
 /* Used in debug log page */
 .log-red {
@@ -747,7 +755,7 @@ table.dataTable tbody  tr.selected, table.dataTable tbody  tr  .selected
 
 .btn:hover
 {
-  color: var(--color-gray);
+  color: var(--color-white);
 }
 
 .logs, .log-area textarea
@@ -761,10 +769,10 @@ table.dataTable tbody  tr.selected, table.dataTable tbody  tr  .selected
 
 /* Settings skeleton - dark theme */
 :root {
-  --skel-base:     #2e3540;
-  --skel-shine:    #3d4555;
-  --skel-section:  #252c38;
-  --skel-panel-bg: #1e242e;
-  --skel-border:   #2a323e;
-  --skel-bg:       #292e33;
+  --skel-base: #353c42;
+  --skel-shine: #272c30;
+  --skel-section: #272c30;
+  --skel-panel-bg: #272c30;
+  --skel-border: #2a323e;
+  --skel-bg: #353c42;
 }

front/css/system-dark-patch.css

@@ -20,7 +20,14 @@
     --color-yellow: #f39c12;
     --color-red: #dd4b39;
     --color-gray: #8c8c8c;
+    --color-darkgray: #3f3e3e;
     --color-white: #fff;
+    --skel-base: #353c42;
+    --skel-shine: #272c30;
+    --skel-section: #272c30;
+    --skel-panel-bg: #272c30;
+    --skel-border: #2a323e;
+    --skel-bg: #353c42;
   }
 
   :root {
@@ -402,6 +409,13 @@
     color: var(--color-white);
   }
 
+  .btn-outline:hover
+  {
+    border: 1px solid var(--color-black);
+    background-color: var(--color-black);;
+    color: var(--color-white);
+  }
+
   /* Used in debug log page */
   .log-red {
     color: #ff4038;
@@ -721,10 +735,10 @@
   color:#000;
 }
 
-.btn:hover
+/* .btn:hover
 {
   color: var(--color-white);
-}
+} */
 
 
 .logs, .log-area textarea
@@ -736,12 +750,3 @@
   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:       #292e33;
-  }