diff --git a/lib/svc/service.go b/lib/svc/service.go index 7e0557b..09e23a1 100644 --- a/lib/svc/service.go +++ b/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) diff --git a/lib/web/api.go b/lib/web/api.go index b9e4028..36a4887 100644 --- a/lib/web/api.go +++ b/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(), diff --git a/lib/web/frontend.go b/lib/web/frontend.go index 102d1b3..4454001 100644 --- a/lib/web/frontend.go +++ b/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(), }) }) } diff --git a/static/main.js b/static/main.js index e69de29..56d815a 100644 --- a/static/main.js +++ b/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); +} diff --git a/static/style.css b/static/style.css index 1df6617..2e08e95 100644 --- a/static/style.css +++ b/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; + } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index a4a9f34..58d6818 100644 --- a/templates/index.html +++ b/templates/index.html @@ -6,6 +6,10 @@ Drive Health Dashboard + +{{ $older := .older }} +{{ $newer := .newer }} +
@@ -66,12 +70,39 @@
+ + +
+
+ + + +
+ + +
+ +
+ + +
+ +
+ +
+ +
+
+ + {{ if len .drives }} {{ range .drives }}

{{.Name}}:{{.Serial}} [{{.Size}}]

- {{ .Model }} Image + {{ .Model }} Image