From f17d8b44a30feda1009888f5663cd4fccea41566 Mon Sep 17 00:00:00 2001
From: Daniel Legt <contact@danlegt.com>
Date: Mon, 22 Jan 2024 23:01:05 +0200
Subject: [PATCH] Implemented View Button * Updated Style + Added 2 icons for
 the view button + New `drive.html` page ( WIP ) * Updated `index.html` to
 apply updates

---
 static/style.css                | 40 +++++++++++++++++++++
 static/view-alt-svgrepo-com.svg |  5 +++
 static/view-svgrepo-com.svg     |  4 +++
 templates/drive.html            | 62 +++++++++++++++++++++++++++++++++
 templates/index.html            |  4 +++
 5 files changed, 115 insertions(+)
 create mode 100644 static/view-alt-svgrepo-com.svg
 create mode 100644 static/view-svgrepo-com.svg
 create mode 100644 templates/drive.html

diff --git a/static/style.css b/static/style.css
index afae1d9..83ddbc4 100644
--- a/static/style.css
+++ b/static/style.css
@@ -11,14 +11,17 @@
     --fg1: #434c56;
 
     --acc1: #2aa3f4;
+    --acc1H: #0089e5;
     --acc1BG0: #2aa3f450;
     --acc1BG1: #2aa3f430;
 
     --acc2: #2af488;
+    --acc2H: #2af488;
     --acc2BG0: #2af48850;
     --acc2BG1: #2af48830;
 
     --acc3: #f4e02a;
+    --acc3H: #f4e02a;
     --acc3BG0: #f4e02a50;
     --acc3BG1: #f4e02a30;
 }
@@ -28,6 +31,17 @@
     font-family: "Noto Sans Mono", "Roboto", sans-serif;
 }
 
+
+a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: inherit;
+    text-decoration: inherit;
+}
+
 html, body {
     margin:  0;
     padding: 0;
@@ -155,6 +169,32 @@ input {
     background-color: var(--bg3);
 }
 
+.btn-link {
+    color: var(--acc1);
+}
+
+.btn-link:hover {
+    color: var(--acc1H);
+}
+
+.info-button {
+    display: flex;
+
+    mask-image: url("/static/view-svgrepo-com.svg");
+    background: var(--fg0);
+
+    height: 26px;
+    width: 26px;
+    mask-size: contain;
+    mask-position: center;
+    mask-repeat: no-repeat;
+}
+
+.info-button:hover {
+    mask-image: url("/static/view-alt-svgrepo-com.svg");
+    background-color: var(--acc1);
+}
+
 .input-grp {
     display: flex;
     flex-flow: column;
diff --git a/static/view-alt-svgrepo-com.svg b/static/view-alt-svgrepo-com.svg
new file mode 100644
index 0000000..8267f4f
--- /dev/null
+++ b/static/view-alt-svgrepo-com.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 4H17.2C18.9913 4 19.887 4 20.4435 4.5565C21 5.11299 21 6.00866 21 7.8V8M17 20H17.2C18.9913 20 19.887 20 20.4435 19.4435C21 18.887 21 17.9913 21 16.2V16M7 4H6.8C5.00866 4 4.11299 4 3.5565 4.5565C3 5.11299 3 6.00866 3 7.8V8M7 20H6.8C5.00866 20 4.11299 20 3.5565 19.4435C3 18.887 3 17.9913 3 16.2V16" stroke="#33363F" stroke-width="2" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8149 12C18.8149 11.4637 18.6892 11.2462 18.4379 10.8112C17.5834 9.33247 15.6561 7 12 7C8.34395 7 6.41664 9.33247 5.56212 10.8112C5.31077 11.2462 5.18509 11.4637 5.18509 12C5.18509 12.5363 5.31077 12.7538 5.56212 13.1888C6.41664 14.6675 8.34395 17 12 17C15.6561 17 17.5834 14.6675 18.4379 13.1888C18.6892 12.7538 18.8149 12.5363 18.8149 12ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3432 9 9.00001 10.3431 9.00001 12C9.00001 13.6569 10.3432 15 12 15Z" fill="#33363F"/>
+</svg>
\ No newline at end of file
diff --git a/static/view-svgrepo-com.svg b/static/view-svgrepo-com.svg
new file mode 100644
index 0000000..a56b666
--- /dev/null
+++ b/static/view-svgrepo-com.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7703 12C20.7703 11.6412 20.5762 11.4056 20.188 10.9343C18.768 9.21014 15.6357 6 12 6C8.36428 6 5.23207 9.21014 3.81198 10.9343C3.42382 11.4056 3.22974 11.6412 3.22974 12C3.22974 12.3588 3.42382 12.5944 3.81198 13.0657C5.23207 14.7899 8.36428 18 12 18C15.6357 18 18.768 14.7899 20.188 13.0657C20.5762 12.5944 20.7703 12.3588 20.7703 12ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3432 9 9.00002 10.3431 9.00002 12C9.00002 13.6569 10.3432 15 12 15Z" fill="#33363F"/>
+</svg>
\ No newline at end of file
diff --git a/templates/drive.html b/templates/drive.html
new file mode 100644
index 0000000..5eb6b28
--- /dev/null
+++ b/templates/drive.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/static/style.css">
+    <title>Drive Health Dashboard</title>
+</head>
+
+<body>
+    <div class="container bordered">
+
+        <div class="container-titlebar">
+            <div class="pad">
+                <h4>Available Disks</h4>
+            </div>
+        </div>
+
+        <div class="container-body">
+            <div class="pad">
+                {{ if len .drives }}
+                    <table id="disks-table">
+                        <thead>
+                            <tr>
+                                <td>ID</td>
+                                <td>Name</td>
+                                <td>Model</td>
+                                <td>Serial</td>
+                                <td>Temperature</td>
+                            </tr>
+                        </thead>
+                        <tbody id="disk-table-body">
+                            {{ range .drives }}
+                                {{ $temp := .GetTemperature }}
+
+                                <tr>
+                                    <td>#{{ .ID }}</td>
+                                    <td> {{ .Name }}</td>
+                                    <td> {{ .Model }}</td>
+                                    <td> {{ .Serial }}</td>
+
+                                    {{ if gt $temp 50 }} <!-- Temperature greater than 50°C -->
+                                        <td style="color: red;">{{ $temp }}&deg;C</td>
+                                    {{ else if gt $temp 30 }} <!-- Temperature between 31°C and 50°C -->
+                                        <td style="color: orange;">{{ $temp }}&deg;C</td>
+                                    {{ else }} <!-- Temperature 30°C or below -->
+                                        <td style="color: lime;">{{ $temp }}&deg;C</td>
+                                    {{ end }}
+                                </tr>
+                            {{ end }}
+                        </tbody>
+                    </table>
+                {{ else }}
+                    <p>No hard drives found.</p>
+                {{ end }}
+            </div>
+        </div>
+
+    </div>
+
+</body>
+</html>
diff --git a/templates/index.html b/templates/index.html
index bd9707a..c4622d7 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -30,6 +30,7 @@
                                 <td>Model</td>
                                 <td>Serial</td>
                                 <td>Temperature</td>
+                                <td>Actions</td>
                             </tr>
                         </thead>
                         <tbody id="disk-table-body">
@@ -49,6 +50,9 @@
                                     {{ else }} <!-- Temperature 30°C or below -->
                                         <td style="color: lime;">{{ $temp }}&deg;C</td>
                                     {{ end }}
+                                    <td>
+                                        <a title="View Disk" class="info-button" href="/disk/{{ .ID }}"></a>
+                                    </td>
                                 </tr>
                             {{ end }}
                         </tbody>