Merge pull request #18 from PilatusDevs/feature/settings-rework

reworked settings + require the components as modules + much cleaner core code
PilatusDevs · Jul 5, 2018 · c0ab45d · c0ab45d
2 parents eb17c5e + 8983a44
commit c0ab45d
Show file tree

Hide file tree

Showing 26 changed files with 856 additions and 653 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,14 @@ npm run buildwin
 
 In the root of the project, we store the README and LICENSE, among the other files that you would expect there. We have an app directory containing the core application parts. Another important folder is the components folder, which stores all the different parts of the application.
 
+### App
+
+Inside the app folder the container for all components is stored. It starts with the index.js file, which loads the index.html file. From there, all the stylesheets and scripts are loaded. The core components like the settings are also created and managed there. Inside the index.html the sidebar shows a list of all the components. This list will be used to start the components as described below.
+
+### Components
+
+The first function that is called is the init function. This generates the charts and other things that should be available at all times. Aside from that, each module has a refresh function, which is called once every half a second (can be changed in the settings). This updates the data inside the charts and other places. This is one of the reasons why all components are loaded on startup. All components will be updated on the background using this refresh function, but this functionality can be disabled in the settings. Lastly, each module has an activate function, which is called when the user switches to this component. This is for example used to update the subtitle. There is no hard-coded list of components, instead a list is generated based on the sidebar menu. From there all the init, refresh and activate functions will be called for each component when needed. Each component exports only these three functions, unless there is other interaction required (such as refresh buttons).
+
 ## Style guide
 
 We try to follow these suggestions when writing code:

diff --git a/app/css/sidebar.css b/app/css/sidebar.css
@@ -1,6 +1,6 @@
 /*
 *    StatusPilatus: Monitor your PC like never before!
-*    Copyright (C) 2017 PilatusDevs
+*    Copyright (C) 2018 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
@@ -25,6 +25,7 @@
     overflow-y: auto;
     background: #212529;
     -webkit-user-select: none;
+    color: #999;
 }
 
 /* Sidebar Styles */
@@ -37,48 +38,40 @@
     padding: 0;
     list-style: none;
     font-size: 17px;
+    text-decoration: none;
 }
 
 .sidebar-nav li {
     text-indent: 20px;
     line-height: 40px;
 }
 
-.sidebar-nav li a {
+.sidebar-nav li a:not(.active-tab) {
     display: block;
-    text-decoration: none;
-    color: #999999;
+    color: #999;
 }
 
 .sidebar-subitem li a {
     margin-left: 20px;
 }
 
 .sidebar-nav li a:hover {
-    text-decoration: none;
     color: #fff;
     background: rgba(255, 255, 255, 0.2);
+    text-decoration: none;
 }
 
 .sidebar-nav li a:active, .sidebar-nav li a:focus {
     text-decoration: none;
 }
 
-/*custom colours for sidebar items*/
+/* Custom colours for sidebar items */
 
 #logo {
     width: 150px;
     height: 150px;
 }
 
-#monitoring {
-    color: #999999;
-}
-
-#dashboard.active-tab {
-    color: #fff;
-}
-
 #cpu.active-tab {
     color: #f38b4a;
 }
@@ -103,7 +96,10 @@
     color: #a4cc99;
 }
 
-.active-tab {
+.active-tab, .active-tab:active, .active-tab:focus {
     font-weight: bolder;
     background: #333;
+    color: #fff;
+    text-decoration: none;
+    display: block;
 }
diff --git a/app/index.html b/app/index.html
@@ -20,14 +20,12 @@
 <head>
     <meta charset="utf-8">
     <title>StatusPilatus</title>
-
     <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="./css/sidebar.css" rel="stylesheet">
     <link href="./css/content.css" rel="stylesheet">
 </head>
 <body>
     <div id="wrapper">
-
         <!-- Sidebar -->
         <div id="sidebar-wrapper">
             <ul class="sidebar-nav">
@@ -60,48 +58,44 @@
                         <a href="#tab" id="network" data-layer="monitoring" data-folder="network" data-name="network">Network</a>
                     </li>
                 </div>
-                <!-- <li>
-                <a href="#"></a>
-            </li> -->
-        </ul>
+                <li id="configuration">
+                    Configuration
+                </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>
+                    </li>
+                    <li>
+                        <a href="#tab" id="graph-settings" data-layer="configuration" data-folder="graph-settings" data-name="graph-settings">Graph Settings</a>
+                    </li>
+                </div>
+            </ul>
+        </div>
     </div>
-    <!-- /#sidebar-wrapper -->
 
     <!-- Page Content -->
     <div id="page-content-wrapper">
         <div class="container-fluid">
             <div id="titles">
                 <h1><span id="dash-title">Dashboard</span><span class="space"> </span><span id="subtitle" class="small"></span></h1>
             </div>
-            <div id="frame">
-
-            </div>
+            <div id="frame"></div>
         </div>
     </div>
-    <!-- /#page-content-wrapper -->
-
 </div>
-<!-- wrapper -->
 
-<!-- Insert this line above script imports  -->
 <script>if (typeof module === "object") {window.module = module; module = undefined;}</script>
 
-<!-- Javascripts-->
+<!-- Libraries -->
 <script src="../node_modules/jquery/dist/jquery.min.js"></script>
 <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <script src="../node_modules/chart.js/dist/Chart.bundle.min.js"></script>
-<script src="./js/app.js"></script>
 
-<!-- all the components -->
-<script src="../components/dashboard/dashboard/dashboard.js"></script>
-<script src="../components/monitoring/cpu/cpu.js"></script>
-<script src="../components/monitoring/gpu/gpu.js"></script>
-<script src="../components/monitoring/memory/memory.js"></script>
-<script src="../components/monitoring/storage/storage.js"></script>
-<script src="../components/monitoring/network/network.js"></script>
-<script src="../components/monitoring/os/os.js"></script>
+<!-- Core -->
+<script src="./js/util.js"></script>
+<script src="./js/settings.js"></script>
+<script src="./js/core.js"></script>
 
-<!-- Insert this line after script imports -->
 <script>if (window.module) module = window.module;</script>
 
 </body>

diff --git a/app/index.js b/app/index.js
@@ -31,10 +31,7 @@ function createWindow () {
         minHeight: 600,
         minWidth: 800,
         show: false,
-        icon: path.join(__dirname, "img/logo.png"),
-        webPreferences: {
-            nodeIntegrationInWorker: true
-        }
+        icon: path.join(__dirname, "img/logo.png")
     });
     win.maximize();
     win.show();
@@ -48,7 +45,7 @@ function createWindow () {
 
     // Open the DevTools.
     //TODO remove this by default, but have an option to enable this
-    win.webContents.openDevTools();
+    //win.webContents.openDevTools();
 
     // Emitted when the window is closed.
     win.on("closed", () => {

diff --git a/app/js/app.js b/app/js/app.js