[WIP] mod_sysinfo

GitSquared · GitSquared · commit ad53058eae95 · 2017-12-10T19:36:10.000+01:00
diff --git a/src/_renderer.js b/src/_renderer.js
@@ -122,6 +122,7 @@ initMods = () => {
     });
 
     let clock = new Clock("mod_column_left");
+    let sysinfo = new Sysinfo("mod_column_left");
 };
 
 // Prevent showing menu, exiting fullscreen or app with keyboard shortcuts
diff --git a/src/assets/css/mod_column.css b/src/assets/css/mod_column.css
@@ -10,7 +10,6 @@ section.mod_column {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    overflow: hidden;
 
     opacity: 0;
     transition: opacity .5s cubic-bezier(0.4, 0, 1, 1);
diff --git a/src/assets/css/mod_sysinfo.css b/src/assets/css/mod_sysinfo.css
@@ -0,0 +1,48 @@
+div#mod_sysinfo {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   justify-content: space-between;
+   height: 60px;
+   border-bottom: 1px solid rgba(190, 230, 193, 0.3);
+   font-size: 12px;
+   font-family: var(--font_main_light);
+   letter-spacing: 1px;
+}
+
+div#mod_sysinfo::before {
+    content: "";
+    border-left: 1px solid rgba(190, 230, 193, 0.3);
+    position: relative;
+    left: -1px;
+    bottom: -30px;
+    height: 9px;
+}
+
+div#mod_sysinfo::after {
+    content: "";
+    border-right: 1px solid rgba(190, 230, 193, 0.3);
+    position: relative;
+    right: -1px;
+    bottom: -30px;
+    height: 9px;
+}
+
+div#mod_sysinfo div {
+   height: 100%;
+   box-sizing: border-box;
+   padding: 10px 5px;
+   display: flex;
+   flex-direction: column;
+   align-items: flex-start;
+   justify-content: space-around;
+}
+
+div#mod_sysinfo h1 {
+   margin: 0px;
+   opacity: 0.5;
+}
+
+div#mod_sysinfo h2 {
+   margin: 0px;
+}
diff --git a/src/classes/sysinfo.class.js b/src/classes/sysinfo.class.js
@@ -0,0 +1,40 @@
+class Sysinfo {
+    constructor(parentId) {
+        if (!parentId) throw "Missing parameters";
+
+        // Create DOM
+        this.parent = document.getElementById(parentId);
+        this.parent.innerHTML += `<div id="mod_sysinfo">
+            <div>
+                <h1>2017</h1>
+                <h2>DEC 12</h2>
+            </div>
+            <div>
+                <h1>UPTIME</h1>
+                <h2>0:0:47</h2>
+            </div>
+            <div>
+                <h1>SYSTEM</h1>
+                <h2>ONLINE</h2>
+            </div>
+            <div>
+                <h1>V</h1>
+                <h2>0.1db</h2>
+            </div>
+        </div>`;
+
+        this.updateDate();
+    }
+    updateDate() {
+        let time = new Date();
+
+        let timeToNewDay = ((24 - time.getHours()) * 3600000) + ((60 - time.getMinutes()) * 60000);
+        setTimeout(() => {
+            this.updateDate();
+        }, timeToNewDay);
+    }
+}
+
+module.exports = {
+    Sysinfo
+};
diff --git a/src/ui.html b/src/ui.html
@@ -4,18 +4,24 @@
         <meta charset="utf-8" />
         <title>eDEX-UI</title>
 
+        <!-- Load main css -->
         <link rel="stylesheet" href="assets/css/main.css" />
         <link rel="stylesheet" href="assets/css/boot_screen.css" />
         <link rel="stylesheet" href="assets/css/fonts.css" />
+        <!-- Load main modules css -->
         <link rel="stylesheet" href="assets/css/main_shell.css" />
         <link rel="stylesheet" href="assets/css/keyboard.css" />
-
+        <!-- Load secondary modules css -->
         <link rel="stylesheet" href="assets/css/mod_column.css" />
         <link rel="stylesheet" href="assets/css/mod_clock.css" />
+        <link rel="stylesheet" href="assets/css/mod_sysinfo.css" />
 
+        <!-- Load main modules classes -->
         <script src="classes/terminal.class.js"></script>
         <script src="classes/keyboard.class.js"></script>
+        <!-- Load secondary modules classes -->
         <script src="classes/clock.class.js"></script>
+        <script src="classes/sysinfo.class.js"></script>
     </head>
     <body style="background: #090b0a;">
         <section id="boot_screen">
