Version bump to v0.3.1

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) ->
@@ -9,13 +9,13 @@ window.onload = () ->
       document.getElementById('cpuThreads').innerText = data.cores
       document.getElementById('cpuClockBase').innerText = data.speed
       document.getElementById('cpuClockBoost').innerText = data.speedMax
-      console.log(data)
     ).catch((error) ->
       console.error(error)
     )
 
   # Start the CPU temperature loop
   setCpuTemp()
+, false)
 
 setCpuTemp = () ->
   si.cpuTemperature()

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()
@@ -22,7 +23,6 @@ loadGpus = () ->
         optionElem.setAttribute('value', i)
         document.getElementById('gpuSelector').appendChild(optionElem)
         i++
-        console.log(data)
     ).catch((error) ->
       console.error(error)
     )

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

assets/coffee/sentry.coffee

@@ -1,5 +1,16 @@
-@loadPage = (pagePath) ->
-  window.location.href = pagePath + '.html'
+@openTab = (tab) ->
+  # show the component info that's selected
+  tabs = document.querySelectorAll('.tab-button')
+  displays = document.querySelectorAll('.component-display')
+  i = 0
+  while i < displays.length
+    if displays[i].getAttribute('data-component') == tab
+      displays[i].classList.add('active')
+      tabs[i].classList.add('active')
+    else
+      displays[i].classList.remove('active')
+      tabs[i].classList.remove('active')
+    i++
 
 @formatBytes = (bytes, decimals = 2) ->
   if bytes == 0

assets/coffee/storage.coffee

@@ -0,0 +1,61 @@
+si = require('systeminformation')
+
+window.addEventListener('load', () ->
+  # Set the option selector to trigger an info grab on element change
+  document.getElementById('diskSelector').addEventListener('change', () ->
+    updateDiskInfo(@value)
+  )
+
+  # Load GPUs into the selector
+  loadDisks()
+
+  # Run the updateGpuInfo function with the default value of 0
+  updateDiskInfo()
+
+  # Start running our function to update the drive's temperature
+  setDiskTemp()
+, false)
+
+loadDisks = () ->
+  si.diskLayout()
+    .then((data) ->
+      i = 0
+      while i < data.length
+        optionElem = document.createElement('option')
+        diskName = data[i].name + ' (' + data[i].device + ')'
+        optionElem.innerText = diskName
+        optionElem.setAttribute('value', i)
+        document.getElementById('diskSelector').appendChild(optionElem)
+        i++
+    ).catch((error) ->
+      console.error(error)
+    )
+
+updateDiskInfo = (diskId = 0) ->
+  si.diskLayout()
+    .then((data) ->
+      document.getElementById('diskInfo').innerText = data[diskId].name
+      document.getElementById('diskPath').innerText = data[diskId].device
+      document.getElementById('diskType').innerText = data[diskId].type
+      document.getElementById('diskSize').innerText = formatBytes(data[diskId].size)
+      document.getElementById('diskVendor').innerText = data[diskId].vendor
+    ).catch((error) ->
+      console.error(error)
+    )
+
+setDiskTemp = (diskId = -1) ->
+  selector = document.getElementById('diskSelector')
+  if selector.length < 1
+    return
+
+  if (diskId = -1)
+    diskId = selector.value
+
+  si.diskLayout()
+    .then((data) ->
+      if (data[diskId].temperature)
+        document.getElementById('diskTemp').innerText = data[diskId].temperature
+    ).catch((error) ->
+      console.error(error)
+    )
+  setTimeout(setDiskTemp, 2000)

assets/sass/sentry.sass

@@ -1,4 +1,8 @@
+$tab-bar-height: 50px
+
 body
+  margin: 0
+  padding: $tab-bar-height 0 90px
   background: white
   font-size: 18px
 
@@ -33,6 +37,47 @@ button
 
 .container.fluid
   max-width: 100%
+  margin: 0
+
+#wrapper
+  margin-top: 25px
+
+#tab-bar
+  position: fixed
+  top: 0
+  left: 0
+  z-index: 10
+  width: 100%
+  height: $tab-bar-height
+  margin: 0
+  padding: 0
+  background: #eee
+  border-bottom: 1px solid #bbb
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .25)
+
+  .row
+    display: relative
+
+  .tab-button
+    float: left
+    height: 50px
+    margin: 0
+    background-color: #eee
+    border: none
+    border-right: 1px solid #999
+    border-radius: 0
+    color: #212121
+    font-size: 2rem
+    font-weight: bold
+    transition: all 230ms ease-in-out
+
+    &.active
+      background-color: white
+
+.component-display
+  display: none
+  &.active
+    display: block
 
 .pageLink
   text-decoration: none
@@ -87,6 +132,7 @@ table.hardware-info
   bottom: 0
   padding-top: 25px
   padding-bottom: 25px
+  background: white
   border-top: 1px solid #999
   font-size: 16px
 

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>
@@ -15,7 +7,7 @@
 <section class="row">
   <article class="columns eight">
     <h5>CPU Model: <span id="cpuInfo">Random CPU</span></h5>
-    <table class="hardware-info">
+    <table class="hardware-info u-full-width">
       <tbody>
         <tr>
           <td>Physical cores</td>
@@ -44,11 +36,3 @@
     </div>
   </article>
 </section>
-
-<section class="row">
-  <div class="columns twelve">
-    <a href="index.html">Back</a>
-  </div>
-</section>
-
-{% endblock %}

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>
@@ -14,29 +6,23 @@
 </header>
 
 <section class="row">
-  <h5>GPU Model: <span id="gpuInfo">Random GPU</span></h5>
-  <table class="hardware-info">
-    <tbody>
-      <tr>
-        <td>GPU vendor</td>
-        <td><span id="gpuVendor">N/a</span></td>
-      </tr>
-      <tr>
-        <td>GPU memory</td>
-        <td><span id="gpuVram">N/a</span></td>
-      </tr>
-      <tr>
-        <td>Bus</td>
-        <td><span id="gpuBus">N/a</span></td>
-      </tr>
-    </tbody>
-  </table>
+  <article class="columns twelve">
+    <h5>GPU Model: <span id="gpuInfo">Random GPU</span></h5>
+    <table class="hardware-info u-full-width">
+      <tbody>
+        <tr>
+          <td>GPU vendor</td>
+          <td><span id="gpuVendor">N/a</span></td>
+        </tr>
+        <tr>
+          <td>GPU memory</td>
+          <td><span id="gpuVram">N/a</span></td>
+        </tr>
+        <tr>
+          <td>Bus</td>
+          <td><span id="gpuBus">N/a</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </article>
 </section>
-
-<section class="row">
-  <div class="columns twelve">
-    <a href="index.html">Back</a>
-  </div>
-</section>
-
-{% endblock %}

assets/twig/index.twig

@@ -32,6 +32,14 @@
       <p class="u-text-center">Memory</p>
     </a>
   </div>
+
+  <!-- Storage devices page link -->
+  <div class="columns six u-text-center">
+    <a href="storage.html" class="pageLink">
+      <i class="fa-solid fa-hard-drive"></i>
+      <p class="u-text-center">Storage devices</p>
+    </a>
+  </div>
 </section>
 
 {% endblock %}

assets/twig/layout.twig

@@ -8,11 +8,39 @@
     <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 %}
+    <!-- tab buttons -->
+    <div id="tab-bar">
+      <div class="container fluid">
+        <div class="row">
+          <div class="columns twelve">
+            <button class="tab-button active" 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>
+    </div>
+
+    <div id="wrapper" class="container">
+      <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">

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

assets/twig/storage.twig

@@ -0,0 +1,36 @@
+<header class="row">
+  <div class="columns twelve u-text-center">
+    <h1>Storage Device Info</h1>
+    <select id="diskSelector"></select>
+  </div>
+</header>
+
+<section class="row">
+  <article class="columns twelve">
+    <h5>Device Model: <span id="diskInfo">Loading...</span></h5>
+    <table class="hardware-info u-full-width">
+      <tbody>
+        <tr>
+          <td>Disk Path</td>
+          <td><span id="diskPath">N/a</span></td>
+        </tr>
+        <tr>
+          <td>Device Type</td>
+          <td><span id="diskType">N/a</span></td>
+        </tr>
+        <tr>
+          <td>Capacity</td>
+          <td><span id="diskSize">N/a</span></td>
+        </tr>
+        <tr>
+          <td>Vendor</td>
+          <td><span id="diskVendor">N/a</span></td>
+        </tr>
+        <tr>
+          <td>Current Temperature</td>
+          <td><span id="diskTemp">N/a</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </article>
+</section>

main.js

@@ -6,7 +6,7 @@ function createWindow () {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 800,
-    height: 600,
+    height: 700,
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sentry",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "Desktop app to view system information and sensors",
   "main": "main.js",
   "scripts": {
@@ -33,7 +33,7 @@
     "systeminformation": "^5.11.15"
   },
   "build": {
-    "appId": "net.bitgoblin.sentry",
+    "appId": "tech.bitgoblin.sentry",
     "copyright": "Copyright © 2022 ${author}",
     "win": {
       "target": "nsis",