✨ Replace clipboardButtons with hardwareInspector

Those buttons are useless now that touchscreen keyboard shortcuts work

src/_renderer.js

@@ -378,10 +378,10 @@ async function initUI() {
     // Left column
     window.mods.clock = new Clock("mod_column_left");
     window.mods.sysinfo = new Sysinfo("mod_column_left");
+    window.mods.hardwareInspector = new HardwareInspector("mod_column_left");
     window.mods.cpuinfo = new Cpuinfo("mod_column_left");
     window.mods.ramwatcher = new RAMwatcher("mod_column_left");
     window.mods.toplist = new Toplist("mod_column_left");
-    window.mods.clipboardButtons = new ClipboardButtons("mod_column_left");
 
     // Right column
     window.mods.netstat = new Netstat("mod_column_right");

src/assets/css/mod_clipboardButtons.css → src/assets/css/mod_hardwareInspector.css

-div#mod_clipboardButtons {
+div#mod_hardwareInspector {
     border-top: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
     font-family: var(--font_main_light);
     letter-spacing: 0.092vh;
@@ -6,7 +6,7 @@ div#mod_clipboardButtons {
     display: flex;
 }
 
-div#mod_clipboardButtons::before {
+div#mod_hardwareInspector::before {
     content: "";
     border-left: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
     align-self: flex-start;
@@ -16,7 +16,7 @@ div#mod_clipboardButtons::before {
     height: 0.833vh;
 }
 
-div#mod_clipboardButtons::after {
+div#mod_hardwareInspector::after {
     content: "";
     border-right: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
     position: relative;
@@ -25,7 +25,7 @@ div#mod_clipboardButtons::after {
     height: 0.833vh;
 }
 
-div#mod_clipboardButtons_inner {
+div#mod_hardwareInspector_inner {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -34,30 +34,16 @@ div#mod_clipboardButtons_inner {
     width: 100%;
 }
 
-div#mod_clipboardButtons h1 {
-    font-size: 1.48vh;
-    margin: 0vh;
-    margin-bottom: -1vh;
-    width: 98%;
+div#mod_hardwareInspector_inner > div {
+    text-align: left;
 }
 
-div#mod_clipboardButtons_inner div {
-    margin-top: 1.5vh;
-    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.1);
-    height: 3.2vh;
-    width: 42%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    border: 2px solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
-    border-radius: 2px;
-    font-family: var(--font_main);
-    font-weight: bold;
-    font-size: 1.5vh;
-    cursor: pointer;
+div#mod_hardwareInspector_inner > div > * {
+    font-size: 1.3vh;
+    line-height: 1.5vh;
+    margin: 0vh;
 }
 
-div#mod_clipboardButtons_inner div:active {
-    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.8);
+div#mod_hardwareInspector_inner > div > h2 {
+    opacity: 0.5;
 }

src/classes/clipboardButtons.class.js

-class ClipboardButtons {
-    constructor(parentId) {
-        if (!parentId) throw "Missing parameters";
-
-        // Create DOM
-        this.parent = document.getElementById(parentId);
-        this._element = document.createElement("div");
-        this._element.setAttribute("id", "mod_clipboardButtons");
-        this._element.innerHTML = `<div id="mod_clipboardButtons_inner">
-            <h1>CLIPBOARD ACCESS</h1>
-            <div>COPY</div>
-            <div>PASTE</div>
-        </div>`;
-
-        this.parent.append(this._element);
-
-        document.querySelector("div#mod_clipboardButtons_inner > div:nth-child(2)").addEventListener("click", e => {
-            window.term[window.currentTerm].clipboard.copy();
-        });
-        document.querySelector("div#mod_clipboardButtons_inner > div:last-child").addEventListener("click", e => {
-            window.term[window.currentTerm].clipboard.paste();
-        });
-    }
-}
-
-module.exports = {
-    ClipboardButtons
-};

src/classes/hardwareInspector.class.js

+class HardwareInspector {
+    constructor(parentId) {
+        if (!parentId) throw "Missing parameters";
+
+        // Create DOM
+        this.parent = document.getElementById(parentId);
+        this._element = document.createElement("div");
+        this._element.setAttribute("id", "mod_hardwareInspector");
+        this._element.innerHTML = `<div id="mod_hardwareInspector_inner">
+            <div>
+                <h1>MANUFACTURER</h1>
+                <h2 id="mod_hardwareInspector_manufacturer" >NONE</h2>
+            </div>
+            <div>
+                <h1>MODEL</h1>
+                <h2 id="mod_hardwareInspector_model" >NONE</h2>
+            </div>
+            <div>
+                <h1>CHASSIS</h1>
+                <h2 id="mod_hardwareInspector_chassis" >NONE</h2>
+            </div>
+        </div>`;
+
+        this.parent.append(this._element);
+
+        this.updateInfo();
+        this.infoUpdater = setInterval(() => {
+            this.updateInfo();
+        }, 20000);
+    }
+    updateInfo() {
+        window.si.system().then(d => {
+            document.getElementById("mod_hardwareInspector_manufacturer").innerText = d.manufacturer;
+            document.getElementById("mod_hardwareInspector_model").innerText = d.model;
+        });
+        window.si.chassis().then(d => {
+            document.getElementById("mod_hardwareInspector_chassis").innerText = d.type;
+        });
+    }
+}
+
+module.exports = {
+    HardwareInspector
+};

src/ui.html

@@ -18,13 +18,13 @@
         <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" />
+        <link rel="stylesheet" href="assets/css/mod_hardwareInspector.css" />
         <link rel="stylesheet" href="assets/css/mod_cpuinfo.css" />
         <link rel="stylesheet" href="assets/css/mod_netstat.css" />
         <link rel="stylesheet" href="assets/css/mod_conninfo.css" />
         <link rel="stylesheet" href="assets/css/mod_globe.css" />
         <link rel="stylesheet" href="assets/css/mod_ramwatcher.css" />
         <link rel="stylesheet" href="assets/css/mod_toplist.css" />
-        <link rel="stylesheet" href="assets/css/mod_clipboardButtons.css" />
         <!-- Load extra CSS -->
         <link rel="stylesheet" href="assets/css/extra_ratios.css" />
 
@@ -37,13 +37,13 @@
         <!-- Load secondary modules classes -->
         <script src="classes/clock.class.js"></script>
         <script src="classes/sysinfo.class.js"></script>
+        <script src="classes/hardwareInspector.class.js"></script>
         <script src="classes/cpuinfo.class.js"></script>
         <script src="classes/netstat.class.js"></script>
         <script src="classes/conninfo.class.js"></script>
         <script src="classes/locationGlobe.class.js"></script>
         <script src="classes/ramwatcher.class.js"></script>
         <script src="classes/toplist.class.js"></script>
-        <script src="classes/clipboardButtons.class.js"></script>
         <!-- Load extra classes -->
         <script src="classes/audiofx.class.js"></script>
     </head>