Date filtering

+ Date filtering
+ Input styling
* Visual changes
+ Updated api calls

lib/svc/service.go

@@ -79,7 +79,7 @@ func GetDiskGraphImage(hddID int, newerThan *time.Time, olderThan *time.Time) (*
 	// Fetch by a combination of fields
 	q := db.Where("id = ?", hddID)
 
-	if newerThan == nil && olderThan == nil {
+	if newerThan == nil || olderThan == nil {
 		q = q.Preload("Temperatures")
 	} else {
 		q = q.Preload("Temperatures", "time_stamp < ? AND time_stamp > ?", newerThan, olderThan)

lib/web/api.go

@@ -1,6 +1,7 @@
 package web
 
 import (
+	"fmt"
 	"net/http"
 	"strconv"
 	"time"
@@ -26,7 +27,28 @@ func setupApi(r *gin.Engine) {
 			return
 		}
 
-		graphData, err := svc.GetDiskGraphImage(diskId, nil, nil)
+		var olderThan, newerThan *time.Time
+
+		if ot := ctx.Query("older"); ot != "" {
+			fmt.Printf("ot = %s\n", ot)
+			if otInt, err := strconv.ParseInt(ot, 10, 64); err == nil {
+				otTime := time.UnixMilli(otInt)
+				olderThan = &otTime
+			}
+		}
+
+		if nt := ctx.Query("newer"); nt != "" {
+			fmt.Printf("nt = %s\n", nt)
+			if ntInt, err := strconv.ParseInt(nt, 10, 64); err == nil {
+				ntTime := time.UnixMilli(ntInt)
+				newerThan = &ntTime
+			}
+		}
+
+		fmt.Printf("olderThan = %s\n", olderThan)
+		fmt.Printf("newerThan = %s\n", newerThan)
+
+		graphData, err := svc.GetDiskGraphImage(diskId, newerThan, olderThan)
 		if err != nil {
 			ctx.AbortWithStatusJSON(500, gin.H{
 				"error":   err.Error(),

lib/web/frontend.go

@@ -1,7 +1,9 @@
 package web
 
 import (
+	"fmt"
 	"net/http"
+	"strconv"
 	"time"
 
 	"github.com/gin-gonic/gin"
@@ -14,22 +16,51 @@ func setupFrontend(r *gin.Engine) {
 	r.Static("/static", "./static")
 
 	// Set up a route for the root URL
-	r.GET("/", func(c *gin.Context) {
-		olderThan := time.Now().Add(time.Minute * time.Duration(10) * -1)
-		newerThan := time.Now()
-
-		hardDrives, err := hardware.GetSystemHardDrives(svc.GetDatabaseRef(), &olderThan, &newerThan)
+	r.GET("/", func(ctx *gin.Context) {
+		hardDrives, err := hardware.GetSystemHardDrives(svc.GetDatabaseRef(), nil, nil)
 		if err != nil {
-			c.AbortWithStatus(500)
+			ctx.AbortWithStatus(500)
 		}
 
 		for _, hdd := range hardDrives {
 			hdd.GetTemperature()
 		}
 
+		var olderThan, newerThan *time.Time
+
+		if ot := ctx.Query("older"); ot != "" {
+			fmt.Printf("ot = %s\n", ot)
+			if otInt, err := strconv.ParseInt(ot, 10, 64); err == nil {
+				otTime := time.UnixMilli(otInt)
+				olderThan = &otTime
+			}
+		}
+
+		if nt := ctx.Query("newer"); nt != "" {
+			fmt.Printf("nt = %s\n", nt)
+			if ntInt, err := strconv.ParseInt(nt, 10, 64); err == nil {
+				ntTime := time.UnixMilli(ntInt)
+				newerThan = &ntTime
+			}
+		}
+
+		if olderThan == nil {
+			genTime := time.Now().Add(time.Hour * -1)
+
+			olderThan = &genTime
+		}
+
+		if newerThan == nil {
+			genTime := time.Now()
+
+			newerThan = &genTime
+		}
+
 		// Render the HTML template
-		c.HTML(http.StatusOK, "index.html", gin.H{
+		ctx.HTML(http.StatusOK, "index.html", gin.H{
 			"drives": hardDrives,
+			"older":  olderThan.UnixMilli(),
+			"newer":  newerThan.UnixMilli(),
 		})
 	})
 }

static/main.js

@@ -0,0 +1,55 @@
+/**
+ * @typedef {number}
+ */
+var initialInputOlder = 0; // miliseconds Unix TimeStamp
+/**
+ * @typedef {number}
+ */
+var initialInputNewer = 0; // miliseconds Unix TimeStamp
+
+
+/**
+ * @typedef {HTMLInputElement}
+ */
+var olderThanInputElement;
+/**
+ * @typedef {HTMLInputElement}
+ */
+var newerThanInputElement;
+
+document.addEventListener(`DOMContentLoaded`, initializePage)
+
+function initializePage() {
+
+    // Update the page's time filter
+    initialInputOlder = Number(document.getElementById(`inp-older`).textContent.trim())
+    initialInputNewer = Number(document.getElementById(`inp-newer`).textContent.trim())
+
+    // Bind the date elements
+    olderThanInputElement = document.getElementById(`olderThan`);
+    newerThanInputElement = document.getElementById(`newerThan`);
+
+    olderThanInputElement.value = convertTimestampToDateTimeLocal(initialInputOlder);
+    newerThanInputElement.value = convertTimestampToDateTimeLocal(initialInputNewer);
+
+}
+
+// Handle one of the date elements having their value changed.
+function applyDateInterval() {
+    const olderTimeStamp = new Date(olderThanInputElement.value).getTime()
+    const newerTimeStamp = new Date(newerThanInputElement.value).getTime()
+
+    window.location.href = `/?older=${olderTimeStamp}&newer=${newerTimeStamp}`;
+}
+
+/**
+ * Converts a Unix timestamp to a standard datetime string
+ * @param {number} timestamp - The Unix timestamp in milliseconds.
+ * @returns {string} - A normal string with Y-m-d H:i:s format
+ */
+function convertTimestampToDateTimeLocal(timestamp) {
+    const date = new Date(timestamp);
+    const offset = date.getTimezoneOffset() * 60000; // offset in milliseconds
+    const localDate = new Date(date.getTime() - offset);
+    return localDate.toISOString().slice(0, 19);
+}

static/style.css

@@ -76,4 +76,65 @@ table thead tr {
     border-radius: 8px;
 
     padding: .3rem .5rem;
+}
+
+
+/* Controls */
+
+input {
+    padding: .25rem .5rem;
+    font-size: 16px;
+    background-color: var(--bg3);
+    color: var(--fg0);
+
+    border: 1px solid var(--fg1);
+}
+
+.btn {
+    font-size: 16px;
+
+    padding: .5rem 1rem;
+
+    border: 1px solid var(--fg1);
+    border-radius: 6px;
+
+    background-color: var(--bg3);
+    color: var(--fg0);
+
+    cursor: pointer;
+}
+
+.btn:hover {
+    background-color: var(--bg2);
+}
+
+.input-grp {
+    display: flex;
+    flex-flow: column;
+}
+
+.input-grp label {
+    margin-bottom: .25rem;
+    font-weight: bold;
+}
+
+.graph-controls {
+    display: flex;
+    flex-flow: wrap;
+
+    align-items: center;
+    justify-content: space-evenly;
+
+    width: 100%;
+}
+
+.controls-panel {
+    display: flex;
+    flex-flow: column;
+
+    padding: 1rem 0;
+
+    border-bottom: 1px solid var(--fg1);
+    margin-bottom: 1rem;
+
 }

templates/index.html

@@ -6,6 +6,10 @@
     <link rel="stylesheet" href="/static/style.css">
     <title>Drive Health Dashboard</title>
 </head>
+
+{{ $older := .older }}
+{{ $newer := .newer }}
+
 <body>
     <div class="container bordered">
 
@@ -66,12 +70,39 @@
         </div>
         <div class="container-body">
             <div class="pad">
+
+                <!-- Controls -->
+                <div class="controls-panel">
+                    <div class="graph-controls">
+                        <span id="inp-older" style="display: none !important" hidden="true">{{ .older }}</span>
+                        <span id="inp-newer" style="display: none !important" hidden="true">{{ .newer }}</span>
+    
+                        <div class="input-grp">
+                            <label for="olderThan">From Date</label>
+                            <input id="olderThan" type="datetime-local" class="date-change-inp">
+                        </div>
+    
+                        <div class="input-grp">
+                            <label for="newerThan">To Date</label>
+                            <input id="newerThan" type="datetime-local" class="date-change-inp">
+                        </div>
+    
+                    </div>
+
+                    <div class="btn-group">
+                        <button type="button" class="btn" onclick="applyDateInterval()" style="margin-top: 1rem;">
+                            Filter
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Drives -->
                 {{ if len .drives }}
                     {{ range .drives }}
                         <div class="disk-graph-entry bordered" id="disk-temp-{{ .ID }}">
                             <h4>{{.Name}}:{{.Serial}} [{{.Size}}]</h4>
                             <a href="/api/v1/disks/{{.ID}}/chart" target="_blank">
-                                <img class="graph-image" src="/api/v1/disks/{{.ID}}/chart" alt="{{ .Model }} Image">
+                                <img class="graph-image" src="/api/v1/disks/{{.ID}}/chart?older={{ $older }}&newer={{ $newer }}" alt="{{ .Model }} Image">
                             </a>
                         </div>
                         <br>