Merge pull request #3 from Belchenkov/dev

Dev

AppTray.js

@@ -0,0 +1,38 @@
+const { app, Menu, Tray } = require('electron');
+
+class AppTray extends Tray {
+    constructor(icon, mainWindow) {
+        super(icon);
+
+        this.setToolTip('SysTop');
+
+        this.mainWindow = mainWindow;
+
+        this.on('click', this.onClick.bind(this));
+        this.on('right-click', this.onRightClick.bind(this));
+    }
+
+    onClick() {
+        if (this.mainWindow.isVisible() === true) {
+            this.mainWindow.hide();
+        } else {
+            this.mainWindow.show();
+        }
+    }
+
+    onRightClick() {
+        const contextMenu = Menu.buildFromTemplate([
+            {
+                label: 'Quit',
+                click: () => {
+                    app.isQuitting = true
+                    app.quit()
+                }
+            }
+        ]);
+
+        this.popUpContextMenu(contextMenu);
+    }
+}
+
+module.exports = AppTray;

MainWindow.js

@@ -0,0 +1,27 @@
+const { BrowserWindow } = require('electron');
+
+class MainWindow extends BrowserWindow {
+    constructor(file, isDev) {
+        super({
+            title: 'SysTop',
+            width: isDev ? 800 : 355,
+            height: 500,
+            icon: './assets/icons/icon.png',
+            resizable: isDev,
+            show: true,
+            opacity: 0.9,
+            backgroundColor: 'white',
+            webPreferences: {
+                nodeIntegration: true,
+            },
+        });
+
+        this.loadFile(file);
+
+        if (isDev) {
+            this.webContents.openDevTools();
+        }
+    }
+}
+
+module.exports = MainWindow;

Store.js

@@ -0,0 +1,31 @@
+const electron = require('electron');
+const path = require('path');
+const fs = require('fs');
+
+class Store {
+    constructor(options) {
+        const userDataPath = (electron.app || electron.remote.app).getPath('userData');
+
+        this.path = path.join(userDataPath, options.configName + '.json');
+        this.data = parseDataFile(this.path, options.defaults);
+    }
+
+    get(key) {
+        return this.data[key];
+    }
+
+    set(key, val) {
+        this.data[key] = val;
+        fs.writeFileSync(this.path, JSON.stringify(this.data));
+    }
+}
+
+function parseDataFile(filePath, defaults) {
+    try {
+        return JSON.parse(fs.readFileSync(filePath));
+    } catch (err) {
+        return defaults;
+    } 
+}
+
+module.exports = Store;

app/index.html

@@ -68,5 +68,46 @@ <h1><i class="fas fa-cog"></i> Settings</h1>
 
 	<script src="js/tabs.js"></script>
 	<script src="js/monitor.js"></script>
+	<script>
+		const settingsForm = document.getElementById('settings-form');
+		const nav = document.getElementById('nav');
+
+		// Get settings
+		ipcRenderer.on('settings:get', (e, settings) => {
+			document.getElementById('cpu-overload').value = settings.cpuOverload;
+			document.getElementById('alert-frequency').value = settings.alertFrequency;
+		});
+
+		// Submit settings
+		settingsForm.addEventListener('submit', e => {
+			e.preventDefault();
+
+			const cpuOverload = document.getElementById('cpu-overload').value;
+			const alertFrequency = document.getElementById('alert-frequency').value;
+
+			// Send new setting to main process
+			ipcRenderer.send('settings:set', {
+				cpuOverload,
+				alertFrequency
+			});
+
+			showAlert('Settings Saved!')
+		});
+
+		function showAlert(msg) {
+			const alert = document.getElementById('alert');
+
+			alert.classList.remove('hide');
+			alert.classList.add('alert');
+			alert.innerText = msg;
+
+			setTimeout(() => alert.classList.add('hide'), 3000);
+		}
+
+		// Toggle nav
+		ipcRenderer.on('nav:toggle', () => {
+			nav.classList.toggle('hide');
+		});
+	</script>
 	</body>
 </html>

app/js/monitor.js

@@ -1,16 +1,18 @@
 const path = require('path');
+const { ipcRenderer } = require('electron');
 const osu = require('node-os-utils');
 const os = osu.os;
 const cpu = osu.cpu;
 const mem = osu.mem;
 
-let cpuOverload = 80;
+let cpuOverload;
+let alertFrequency;
 
-notifyUser({
-    title: 'CPU Overload',
-    body: `CPU is over ${cpuOverload}%`,
-    icon: path.join(__dirname, 'img', 'icon.png')
-})
+// Get settings & values
+ipcRenderer.on('settings:get', (e, settings) => {
+    cpuOverload = +settings.cpuOverload;
+    alertFrequency = +settings.alertFrequency;
+});
 
 // Run every 2 seconds
 setInterval(() => {
@@ -25,6 +27,17 @@ setInterval(() => {
         } else {
             document.getElementById('cpu-progress').style.background = '#30c88b';
         }
+
+        // Check overload
+        if (info >= cpuOverload && runNotify(alertFrequency)) {
+            notifyUser({
+                title: 'CPU Overload',
+                body: `CPU is over ${cpuOverload}%`,
+                icon: path.join(__dirname, 'img', 'icon.png')
+            });
+
+            localStorage.setItem('lastNotify', +new Date());
+        }
     });
     // CPU Free
     cpu.free().then(info => {
@@ -59,4 +72,19 @@ function secondsToDhms(seconds) {
 // Send Notification
 function notifyUser(options) {
     new Notification(options.title, options);
+}
+
+// Check how much time has passed since notification
+function runNotify(frequency) {
+    if (localStorage.getItem('lastNotify') === null) {
+        localStorage.setItem('lastNotify', +new Date());
+        return true;
+    }
+
+    const notifyTime = new Date(parseInt(localStorage.getItem('lastNotify')));
+    const now = new Date();
+    const diffTime = Math.abs(now - notifyTime);
+    const minutesPassed = Math.ceil(diffTime / (1000 * 60));
+
+    return minutesPassed > frequency;
 }

main.js

@@ -1,46 +1,74 @@
-const { app, BrowserWindow, Menu } = require('electron')
-const log = require('electron-log')
+const { app, BrowserWindow, Menu, ipcMain } = require('electron');
+const path = require('path');
+
+const Store = require('./Store');
+const MainWindow = require('./MainWindow');
+const AppTray = require('./AppTray');
 
 // Set env
 process.env.NODE_ENV = 'development'
 
 const isDev = process.env.NODE_ENV !== 'production' ? true : false
 const isMac = process.platform === 'darwin' ? true : false
 
-let mainWindow
-
-function createMainWindow() {
-  mainWindow = new BrowserWindow({
-    title: 'SysTop',
-    width: isDev ? 800 : 355,
-    height: 500,
-    icon: './assets/icons/icon.png',
-    resizable: isDev ? true : false,
-    backgroundColor: 'white',
-    webPreferences: {
-      nodeIntegration: true,
-    },
-  })
+let mainWindow;
+let tray;
 
-  if (isDev) {
-    mainWindow.webContents.openDevTools()
+// Init store & defaults
+const store = new Store({
+  configName: 'user-settings',
+  defaults: {
+    settings: {
+      cpuOverload: 80,
+      alertFrequency: 5
+    }
   }
+});
 
-  mainWindow.loadFile('./app/index.html')
+function createMainWindow() {
+  mainWindow = new MainWindow('./app/index.html', isDev);
 }
 
 app.on('ready', () => {
-  createMainWindow()
+  createMainWindow();
+
+  mainWindow.webContents.on('dom-ready', () => {
+    mainWindow.webContents.send('settings:get', store.get('settings'));
+  })
+
+  const mainMenu = Menu.buildFromTemplate(menu);
+  Menu.setApplicationMenu(mainMenu);
 
-  const mainMenu = Menu.buildFromTemplate(menu)
-  Menu.setApplicationMenu(mainMenu)
+  mainWindow.on('close', e => {
+    if (!app.isQuitting) {
+      e.preventDefault();
+      mainWindow.hide();
+    }
+
+    return true;
+  });
+
+  const icon = path.join(__dirname, 'assets', 'icons', 'tray_icon.png');
+
+  tray = new AppTray(icon, mainWindow);
+
+  mainWindow.on('ready', () => (mainWindow = null));
 })
 
 const menu = [
   ...(isMac ? [{ role: 'appMenu' }] : []),
   {
     role: 'fileMenu',
   },
+  {
+    label: 'View',
+    submenu: [
+      {
+        label: 'Toggle Navigation',
+        click: () => mainWindow.webContents.send('nav:toggle')
+      }
+    ]
+  },
   ...(isDev
     ? [
         {
@@ -56,15 +84,21 @@ const menu = [
     : []),
 ]
 
+// Set settings
+ipcMain.on('settings:set', (e, value) => {
+  store.set('settings', value);
+  mainWindow.webContents.send('settings:get', store.get('settings'));
+})
+
 app.on('window-all-closed', () => {
   if (!isMac) {
-    app.quit()
+    app.quit();
   }
 })
 
 app.on('activate', () => {
   if (BrowserWindow.getAllWindows().length === 0) {
-    createMainWindow()
+    createMainWindow();
   }
 })