Started working on the app menu

.woodpecker.yml

@@ -6,7 +6,6 @@ pipeline:
   build:
     image: node:16
     commands:
-      - apt update && apt install -y ruby ruby-dev && gem install sass
       - npm install
       - npm run grunt
 

Gruntfile.js

@@ -4,7 +4,7 @@ module.exports = function(grunt) {
 
   // Project configuration.
   grunt.initConfig({
-    sass: {
+    'dart-sass': {
       dist: {
         options: {
           style: 'compressed'
@@ -69,7 +69,7 @@ module.exports = function(grunt) {
       },
       css: {
         files: ['assets/sass/*.sass'],
-        tasks: ['sass'],
+        tasks: ['dart-sass'],
         options: {
           atBegin: true,
           spawn: false
@@ -96,12 +96,12 @@ module.exports = function(grunt) {
 
   // Load task plugins
   grunt.loadNpmTasks('grunt-twig-render');
-  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-dart-sass');
   grunt.loadNpmTasks('grunt-contrib-coffee');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-watch');
 
   // Default task(s).
-  grunt.registerTask('default', ['twigRender', 'sass', 'coffee', 'copy']);
+  grunt.registerTask('default', ['twigRender', 'dart-sass', 'coffee', 'copy']);
 
 };

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,29 @@
-@loadPage = (pagePath) ->
-  window.location.href = pagePath + '.html'
+shell = require('electron').shell
+
+document.addEventListener('DOMContentLoaded', () ->
+  links = document.querySelectorAll('a[href^="http"]')
+  i = 0
+  while i < links.length
+    links[i].addEventListener('click', (event) ->
+      event.preventDefault()
+      shell.openExternal(this.href)
+    )
+    i++
+)
+
+@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

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

assets/sass/sentry.sass

@@ -1,22 +1,32 @@
+$tab-bar-height: 50px
+
+$primary-color: #009688
+$primary-color-light: lighten($primary-color, 10%)
+$primary-color-dark: darken($primary-color, 10%)
+
+$default-transition: all 230ms ease-in-out
+
 body
+  margin: 0
+  padding: $tab-bar-height 0 90px
   background: white
   font-size: 18px
 
 a
-  color: cornflowerblue
-  transition: all 200ms ease-in-out
+  color: $primary-color
+  transition: $default-transition
 
   &:hover
-    color: darken(cornflowerblue, 10%)
+    color: $primary-color-light
 
 input
-  transition: all 200ms ease-in-out
+  transition: $default-transition
 
 input[type=submit],
 button
   background-color: cornflowerblue
   color: #f0f0f0
-  transition: all 200ms ease-in-out
+  transition: $default-transition
 
   &:hover
     background-color: darken(cornflowerblue, 10%)
@@ -32,7 +42,54 @@ button
   max-width: 1024px
 
 .container.fluid
+  width: 100%
   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)
+
+  .container.fluid
+    width: 100%
+    margin-right: 0
+
+  .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: $default-transition
+
+    &.active,
+    &:hover
+      background-color: white
+
+.component-display
+  display: none
+  &.active
+    display: block
 
 .pageLink
   text-decoration: none
@@ -87,6 +144,7 @@ table.hardware-info
   bottom: 0
   padding-top: 25px
   padding-bottom: 25px
+  background: white
   border-top: 1px solid #999
   font-size: 16px
 
@@ -96,6 +154,9 @@ table.hardware-info
   p.no-margin
     margin-bottom: 0
 
+  p#version-info
+    text-decoration: underline
+
 #systemPages
   > div:nth-child(2n + 3)
     margin-left: 0

assets/twig/about.twig

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>About Sentry</title>
+</head>
+<body>
+  <p>This is a test.</p>
+</body>
+</html>

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

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

assets/twig/layout.twig

@@ -8,18 +8,50 @@
     <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('overview')">Overview</button>
+            <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>
+    </div>
+
+    <div id="wrapper" class="container">
+      <div class="component-display active" data-component="overview">
+        {% include 'overview.twig' %}
+      </div>
+      <div class="component-display" 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">
       <div class="container fluid">
         <div class="row">
           <div class="columns three">
-            <p class="faded-text no-margin u-text-center">Sentry v<span id="app-version"></span></p>
+            <p id="version-info" class="no-margin u-text-center">Sentry v<span id="app-version"></span></p>
           </div>
           <div class="columns six">
             <p class="no-margin u-text-center">Developed by Bit Goblin free of charge.</p>

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/overview.twig

@@ -0,0 +1,5 @@
+<header class="row">
+  <div class="columns twelve u-text-center">
+    <h1>Sentry Overview</h1>
+  </div>
+</header>

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

main.js

@@ -1,12 +1,14 @@
 // Modules to control application life and create native browser window
-const {app, BrowserWindow} = require('electron');
+const { app, BrowserWindow, Menu } = require('electron');
 const path = require('path');
 
 function createWindow () {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 800,
-    height: 600,
+    height: 700,
+    minWidth: 735,
+    minHeight: 600,
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,
@@ -21,6 +23,10 @@ function createWindow () {
   // mainWindow.webContents.openDevTools()
 }
 
+// Set the application menu
+const menu = require('./src/menu').createMenu(app);
+Menu.setApplicationMenu(menu);
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sentry",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "Desktop app to view system information and sensors",
   "main": "main.js",
   "scripts": {
@@ -25,12 +25,12 @@
     "grunt": "^1.5.3",
     "grunt-contrib-coffee": "^2.1.0",
     "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-sass": "^2.0.0",
     "grunt-contrib-watch": "^1.1.0",
+    "grunt-dart-sass": "^2.0.1",
     "grunt-twig-render": "^1.8.3"
   },
   "dependencies": {
-    "systeminformation": "^5.11.15"
+    "systeminformation": "^5.17.12"
   },
   "build": {
     "appId": "tech.bitgoblin.sentry",

src/menu/help.js

@@ -0,0 +1,15 @@
+const { BrowserWindow } = require('electron');
+
+exports.about = function() {
+  const aboutWindow = new BrowserWindow({
+    width: 600,
+    height: 400,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false
+    }
+  });
+
+  // and load the about.html of the app.
+  aboutWindow.loadFile('public/about.html');
+};

src/menu/index.js

@@ -0,0 +1,30 @@
+const electron = require('electron');
+
+// load event handlers
+const helpHandlers = require('./help');
+
+exports.createMenu = function(app) {
+  return electron.Menu.buildFromTemplate([
+    {
+      label: 'File',
+      submenu: [
+        {
+          label: 'Close',
+          click: function() {
+            app.quit();
+          }
+        }
+      ]
+    },
+
+    {
+      label: 'Help',
+      submenu: [
+        {
+          label: 'About',
+          click: helpHandlers.about
+        }
+      ]
+    }
+  ]);
+};