Merge pull request #57 from PilatusDevs/feature/about

The about page is here

app/index.html

@@ -65,15 +65,18 @@
                 <li>
                     <a href="#tab" id="processes" data-layer="processes" data-folder="processes" data-name="processes">Processes</a>
                 </li>
-                <li id="configuration">
-                    Configuration
+                <li id="options">
+                    Options
                 </li>
                 <div class="sidebar-subitem">
                     <li>
-                        <a href="#tab" id="general-settings" data-layer="configuration" data-folder="general-settings" data-name="general-settings">General Settings</a>
+                        <a href="#tab" id="general-settings" data-layer="options" data-folder="general-settings" data-name="general-settings">General Settings</a>
                     </li>
                     <li>
-                        <a href="#tab" id="graph-settings" data-layer="configuration" data-folder="graph-settings" data-name="graph-settings">Graph Settings</a>
+                        <a href="#tab" id="graph-settings" data-layer="options" data-folder="graph-settings" data-name="graph-settings">Graph Settings</a>
+                    </li>
+                    <li>
+                        <a href="#tab" id="about" data-layer="options" data-folder="about" data-name="about">About</a>
                     </li>
                 </div>
             </ul>

components/options/about/about.html

@@ -0,0 +1,38 @@
+<!--
+-    StatusPilatus: Monitor your PC like never before!
+-    Copyright (C) 2019 PilatusDevs
+-
+-    This program is free software: you can redistribute it and/or modify
+-    it under the terms of the GNU General Public License as published by
+-    the Free Software Foundation, either version 3 of the License, or
+-    (at your option) any later version.
+-
+-    This program is distributed in the hope that it will be useful,
+-    but WITHOUT ANY WARRANTY; without even the implied warranty of
+-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-    GNU General Public License for more details.
+-
+-    You should have received a copy of the GNU General Public License
+-    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+<div class="center-align">
+
+    <div class="row">
+        <div class="col m12">
+            <img src="img/logo.png" alt="The Logo" height="200px;">
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col m12">
+            <h5>StatusPilatus</h5>
+
+            <div id="version"></div>
+            <p>
+                StatusPilatus is designed and made by <a href="#" id="pilatusdevs-button">PilatusDevs</a> <br>
+                This program is open source and licensed under <a href="#" id="license-button">GPL-3.0</a>
+            </p>
+        </div>
+    </div>
+
+</div>

components/options/about/about.js

@@ -0,0 +1,53 @@
+/*
+*    StatusPilatus: Monitor your PC like never before!
+*    Copyright (C) 2019 PilatusDevs
+*
+*    This program is free software: you can redistribute it and/or modify
+*    it under the terms of the GNU General Public License as published by
+*    the Free Software Foundation, either version 3 of the License, or
+*    (at your option) any later version.
+*
+*    This program is distributed in the hope that it will be useful,
+*    but WITHOUT ANY WARRANTY; without even the implied warranty of
+*    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+*    GNU General Public License for more details.
+*
+*    You should have received a copy of the GNU General Public License
+*    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+/* global $ */
+"use strict";
+
+const { shell, remote } = require("electron");
+
+module.exports = {
+    init: initAbout,
+    refresh: refreshAbout,
+    activate: activateAbout
+};
+
+function initAbout() {
+    // The following is done because electron fucks you over in development.
+    // Now we see the correct version in development and also when released.
+    const version = process.env.npm_package_version || remote.app.getVersion();
+    $("#version").append("Version " + version);
+
+    const pilatusdevsButton = document.querySelector("#pilatusdevs-button");
+    pilatusdevsButton.onclick = () => {
+        shell.openExternal("https://github.com/PilatusDevs");
+    };
+
+    const licenseButton = document.querySelector("#license-button");
+    licenseButton.onclick = () => {
+        shell.openExternal(
+            "https://github.com/PilatusDevs/StatusPilatus/blob/master/LICENSE");
+    };
+}
+
+function refreshAbout() {
+
+}
+
+function activateAbout() {
+
+}