Api and Frontend

+ Snapshot get API
+ Frontend Starting
This commit is contained in:
Daniel Legt 2024-01-20 01:40:55 +02:00
parent 4352c398c1
commit 71d4eb6cc3
4 changed files with 109 additions and 4 deletions

View File

@ -6,6 +6,7 @@ import (
"github.com/gin-gonic/gin"
"tea.chunkbyte.com/kato/drive-health/lib/hardware"
"tea.chunkbyte.com/kato/drive-health/lib/svc"
)
func setupApi(r *gin.Engine) {
@ -31,4 +32,10 @@ func setupApi(r *gin.Engine) {
})
})
api.GET("/snapshots", func(ctx *gin.Context) {
snapshots := svc.GetHardwareSnapshot()
ctx.JSON(http.StatusOK, snapshots)
})
}

View File

@ -1,7 +1,31 @@
package web
import "github.com/gin-gonic/gin"
import (
"net/http"
"github.com/gin-gonic/gin"
"tea.chunkbyte.com/kato/drive-health/lib/hardware"
)
func setupFrontend(r *gin.Engine) {
r.LoadHTMLGlob("templates/*")
r.Static("/static", "./static")
// Set up a route for the root URL
r.GET("/", func(c *gin.Context) {
hardDrives, err := hardware.GetSystemHardDrives()
if err != nil {
c.AbortWithStatus(500)
}
for _, hdd := range hardDrives {
hdd.GetTemperature(true)
}
// Render the HTML template
c.HTML(http.StatusOK, "index.html", gin.H{
"drives": hardDrives,
})
})
}

45
static/style.css Normal file
View File

@ -0,0 +1,45 @@
body {
font-family: Arial, sans-serif;
background-color: #333;
color: #fff;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
h1 {
text-align: center;
padding: 20px 0;
}
table {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #555;
}
tr:nth-child(even) {
background-color: #666;
}
tr:hover {
background-color: #555;
}

View File

@ -3,9 +3,38 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drive Health</title>
<link rel="stylesheet" href="/static/style.css">
<title>Drive Health Dashboard</title>
</head>
<body>
<div class="container">
<h1>Drive Health Dashboard</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Transport</th>
<th>Size</th>
<th>Model</th>
<th>Serial</th>
<th>Type</th>
<th>Temperature</th>
</tr>
</thead>
<tbody>
{{range .drives}}
<tr>
<td>{{.Name}}</td>
<td>{{.Transport}}</td>
<td>{{.Size}}</td>
<td>{{.Model}}</td>
<td>{{.Serial}}</td>
<td>{{.Type}}</td>
<td>{{.Temperature}}</td>
</tr>
{{end}}
</tbody>
</table>
</div>
</body>
</html>
</html>