From c878447c45d9a335d33168e6b7528a4972fab9b5 Mon Sep 17 00:00:00 2001
From: Gregory Ballantine <gballantine@metaunix.net>
Date: Fri, 28 Oct 2022 01:06:09 -0400
Subject: [PATCH] Changed to using a tabbed layout instead of separate pages
 for everything

---
 assets/coffee/cpu.coffee     |  3 ++-
 assets/coffee/gpu.coffee     |  3 ++-
 assets/coffee/memory.coffee  |  3 ++-
 assets/coffee/sentry.coffee  | 11 +++++++++--
 assets/coffee/storage.coffee |  3 ++-
 assets/sass/sentry.sass      |  5 +++++
 assets/twig/cpu.twig         | 16 ----------------
 assets/twig/gpu.twig         | 16 ----------------
 assets/twig/layout.twig      | 30 +++++++++++++++++++++++++++---
 assets/twig/memory.twig      | 16 ----------------
 assets/twig/storage.twig     | 16 ----------------
 11 files changed, 49 insertions(+), 73 deletions(-)

diff --git a/assets/coffee/cpu.coffee b/assets/coffee/cpu.coffee
index c6908be..3ddd7d0 100644
--- a/assets/coffee/cpu.coffee
+++ b/assets/coffee/cpu.coffee
@@ -1,6 +1,6 @@
 si = require('systeminformation')
 
-window.onload = () ->
+window.addEventListener('load', () ->
   # Grab the static CPU information
   si.cpu()
     .then((data) ->
@@ -16,6 +16,7 @@ window.onload = () ->
 
   # Start the CPU temperature loop
   setCpuTemp()
+, false)
 
 setCpuTemp = () ->
   si.cpuTemperature()
diff --git a/assets/coffee/gpu.coffee b/assets/coffee/gpu.coffee
index 76e36e6..51e483f 100644
--- a/assets/coffee/gpu.coffee
+++ b/assets/coffee/gpu.coffee
@@ -1,6 +1,6 @@
 si = require('systeminformation')
 
-window.onload = () ->
+window.addEventListener('load', () ->
   # Set the option selector to trigger an info grab on element change
   document.getElementById('gpuSelector').addEventListener('change', () ->
     updateGpuInfo(@value)
@@ -11,6 +11,7 @@ window.onload = () ->
 
   # Run the updateGpuInfo function with the default value of 0
   updateGpuInfo()
+, false)
 
 loadGpus = () ->
   si.graphics()
diff --git a/assets/coffee/memory.coffee b/assets/coffee/memory.coffee
index 34d7c66..22cfc00 100644
--- a/assets/coffee/memory.coffee
+++ b/assets/coffee/memory.coffee
@@ -1,6 +1,6 @@
 si = require('systeminformation')
 
-window.onload = () ->
+window.addEventListener('load', () ->
   # Grab the static CPU information
   si.mem()
     .then((data) ->
@@ -11,6 +11,7 @@ window.onload = () ->
 
   # Start the CPU temperature loop
   getMemoryUsage()
+, false)
 
 getMemoryUsage = () ->
   si.mem()
diff --git a/assets/coffee/sentry.coffee b/assets/coffee/sentry.coffee
index 9f50e7a..0c34a3d 100644
--- a/assets/coffee/sentry.coffee
+++ b/assets/coffee/sentry.coffee
@@ -1,5 +1,12 @@
-@loadPage = (pagePath) ->
-  window.location.href = pagePath + '.html'
+@openTab = (tab) ->
+  displays = document.querySelectorAll('.component-display')
+  i = 0
+  while i < displays.length
+    if displays[i].getAttribute('data-component') == tab
+      displays[i].classList.add('active')
+    else
+      displays[i].classList.remove('active')
+    i++
 
 @formatBytes = (bytes, decimals = 2) ->
   if bytes == 0
diff --git a/assets/coffee/storage.coffee b/assets/coffee/storage.coffee
index 337f2fc..3571565 100644
--- a/assets/coffee/storage.coffee
+++ b/assets/coffee/storage.coffee
@@ -1,6 +1,6 @@
 si = require('systeminformation')
 
-window.onload = () ->
+window.addEventListener('load', () ->
   # Set the option selector to trigger an info grab on element change
   document.getElementById('diskSelector').addEventListener('change', () ->
     updateDiskInfo(@value)
@@ -14,6 +14,7 @@ window.onload = () ->
 
   # Start running our function to update the drive's temperature
   setDiskTemp()
+, false)
 
 loadDisks = () ->
   si.diskLayout()
diff --git a/assets/sass/sentry.sass b/assets/sass/sentry.sass
index 6a8c065..f9f0ed8 100644
--- a/assets/sass/sentry.sass
+++ b/assets/sass/sentry.sass
@@ -34,6 +34,11 @@ button
 .container.fluid
   max-width: 100%
 
+.component-display
+  display: none
+  &.active
+    display: block
+
 .pageLink
   text-decoration: none
   i
diff --git a/assets/twig/cpu.twig b/assets/twig/cpu.twig
index d0c5f0a..0cbd37a 100644
--- a/assets/twig/cpu.twig
+++ b/assets/twig/cpu.twig
@@ -1,11 +1,3 @@
-{% extends 'layout.twig' %}
-
-{% block scripts %}
-<script src="./js/cpu.js" charset="utf-8"></script>
-{% endblock %}
-
-{% block content %}
-
 <header class="row">
   <div class="columns twelve u-text-center">
     <h1>Sentry CPU Info</h1>
@@ -44,11 +36,3 @@
     </div>
   </article>
 </section>
-
-<section class="row">
-  <div class="columns twelve">
-    <a href="index.html">Back</a>
-  </div>
-</section>
-
-{% endblock %}
diff --git a/assets/twig/gpu.twig b/assets/twig/gpu.twig
index 6e0c309..d6db0eb 100644
--- a/assets/twig/gpu.twig
+++ b/assets/twig/gpu.twig
@@ -1,11 +1,3 @@
-{% extends 'layout.twig' %}
-
-{% block scripts %}
-<script src="./js/gpu.js" charset="utf-8"></script>
-{% endblock %}
-
-{% block content %}
-
 <header class="row">
   <div class="columns twelve u-text-center">
     <h1>GPU Info</h1>
@@ -34,11 +26,3 @@
     </table>
   </article>
 </section>
-
-<section class="row">
-  <div class="columns twelve">
-    <a href="index.html">Back</a>
-  </div>
-</section>
-
-{% endblock %}
diff --git a/assets/twig/layout.twig b/assets/twig/layout.twig
index edd8527..8f1e8c3 100644
--- a/assets/twig/layout.twig
+++ b/assets/twig/layout.twig
@@ -8,11 +8,35 @@
     <link rel="stylesheet" href="./styles/sentry.css">
     <title>Sentry System Monitor</title>
     <script src="./js/sentry.js" charset="utf-8"></script>
-    {% block scripts %}{% endblock %}
+    <script src="./js/cpu.js"></script>
+    <script src="./js/memory.js"></script>
+    <script src="./js/storage.js"></script>
+    <script src="./js/gpu.js"></script>
   </head>
   <body>
-    <div class="container">
-      {% block content %}{% endblock %}
+    <div class="container fluid">
+      <!-- tab buttons -->
+      <div class="row">
+        <div class="columns twelve">
+          <button class="tab-button" onclick="openTab('cpu')">CPU</button>
+          <button class="tab-button" onclick="openTab('memory')">Memory</button>
+          <button class="tab-button" onclick="openTab('storage')">Storage</button>
+          <button class="tab-button" onclick="openTab('gpu')">GPU</button>
+        </div>
+      </div>
+
+      <div class="component-display active" data-component="cpu">
+        {% include 'cpu.twig' %}
+      </div>
+      <div class="component-display" data-component="memory">
+        {% include 'memory.twig' %}
+      </div>
+      <div class="component-display" data-component="storage">
+        {% include 'storage.twig' %}
+      </div>
+      <div class="component-display" data-component="gpu">
+        {% include 'gpu.twig' %}
+      </div>
     </div>
 
     <footer id="footer">
diff --git a/assets/twig/memory.twig b/assets/twig/memory.twig
index 4b9dffb..faf95ad 100644
--- a/assets/twig/memory.twig
+++ b/assets/twig/memory.twig
@@ -1,11 +1,3 @@
-{% extends 'layout.twig' %}
-
-{% block scripts %}
-<script src="./js/memory.js" charset="utf-8"></script>
-{% endblock %}
-
-{% block content %}
-
 <header class="row">
   <div class="columns twelve u-text-center">
     <h1>Memory Info</h1>
@@ -16,11 +8,3 @@
   <p><span id="memoryFree">N/a</span> free out of <span id="memoryTotal">N/a</span>.</p>
   <p><span id="memoryActive">N/a</span> is actively used | <span id="memoryBuffCache">N/a</span> is used in buffers/cache.</p>
 </section>
-
-<section class="row">
-  <div class="columns twelve">
-    <a href="index.html">Back</a>
-  </div>
-</section>
-
-{% endblock %}
diff --git a/assets/twig/storage.twig b/assets/twig/storage.twig
index 8c0d610..93eb9bf 100644
--- a/assets/twig/storage.twig
+++ b/assets/twig/storage.twig
@@ -1,11 +1,3 @@
-{% extends 'layout.twig' %}
-
-{% block scripts %}
-<script src="./js/storage.js" charset="utf-8"></script>
-{% endblock %}
-
-{% block content %}
-
 <header class="row">
   <div class="columns twelve u-text-center">
     <h1>Storage Device Info</h1>
@@ -42,11 +34,3 @@
     </table>
   </article>
 </section>
-
-<section class="row">
-  <div class="columns twelve">
-    <a href="index.html">Back</a>
-  </div>
-</section>
-
-{% endblock %}