Changed to using a tabbed layout instead of separate pages for everything
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Gregory Ballantine 2022-10-28 01:06:09 -04:00
parent c451237ab9
commit c878447c45
11 changed files with 49 additions and 73 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -34,6 +34,11 @@ button
.container.fluid
max-width: 100%
.component-display
display: none
&.active
display: block
.pageLink
text-decoration: none
i

View File

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

View File

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

View File

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

View File

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

View File

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