Date filtering

+ Date filtering
+ Input styling
* Visual changes
+ Updated api calls
This commit is contained in:
Daniel Legt 2024-01-21 22:40:32 +02:00
parent 2776ad8e52
commit c8fa24f11c
6 changed files with 210 additions and 10 deletions

View File

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

View File

@ -1,6 +1,7 @@
package web package web
import ( import (
"fmt"
"net/http" "net/http"
"strconv" "strconv"
"time" "time"
@ -26,7 +27,28 @@ func setupApi(r *gin.Engine) {
return 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 { if err != nil {
ctx.AbortWithStatusJSON(500, gin.H{ ctx.AbortWithStatusJSON(500, gin.H{
"error": err.Error(), "error": err.Error(),

View File

@ -1,7 +1,9 @@
package web package web
import ( import (
"fmt"
"net/http" "net/http"
"strconv"
"time" "time"
"github.com/gin-gonic/gin" "github.com/gin-gonic/gin"
@ -14,22 +16,51 @@ func setupFrontend(r *gin.Engine) {
r.Static("/static", "./static") r.Static("/static", "./static")
// Set up a route for the root URL // Set up a route for the root URL
r.GET("/", func(c *gin.Context) { r.GET("/", func(ctx *gin.Context) {
olderThan := time.Now().Add(time.Minute * time.Duration(10) * -1) hardDrives, err := hardware.GetSystemHardDrives(svc.GetDatabaseRef(), nil, nil)
newerThan := time.Now()
hardDrives, err := hardware.GetSystemHardDrives(svc.GetDatabaseRef(), &olderThan, &newerThan)
if err != nil { if err != nil {
c.AbortWithStatus(500) ctx.AbortWithStatus(500)
} }
for _, hdd := range hardDrives { for _, hdd := range hardDrives {
hdd.GetTemperature() 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 // Render the HTML template
c.HTML(http.StatusOK, "index.html", gin.H{ ctx.HTML(http.StatusOK, "index.html", gin.H{
"drives": hardDrives, "drives": hardDrives,
"older": olderThan.UnixMilli(),
"newer": newerThan.UnixMilli(),
}) })
}) })
} }

View File

@ -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);
}

View File

@ -76,4 +76,65 @@ table thead tr {
border-radius: 8px; border-radius: 8px;
padding: .3rem .5rem; 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;
} }

View File

@ -6,6 +6,10 @@
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
<title>Drive Health Dashboard</title> <title>Drive Health Dashboard</title>
</head> </head>
{{ $older := .older }}
{{ $newer := .newer }}
<body> <body>
<div class="container bordered"> <div class="container bordered">
@ -66,12 +70,39 @@
</div> </div>
<div class="container-body"> <div class="container-body">
<div class="pad"> <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 }} {{ if len .drives }}
{{ range .drives }} {{ range .drives }}
<div class="disk-graph-entry bordered" id="disk-temp-{{ .ID }}"> <div class="disk-graph-entry bordered" id="disk-temp-{{ .ID }}">
<h4>{{.Name}}:{{.Serial}} [{{.Size}}]</h4> <h4>{{.Name}}:{{.Serial}} [{{.Size}}]</h4>
<a href="/api/v1/disks/{{.ID}}/chart" target="_blank"> <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> </a>
</div> </div>
<br> <br>