drive-health/templates/index.html

<!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>

{{ $older := .older }}
{{ $newer := .newer }}

<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>
                                <td>Actions</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 }}
                                    <td>
                                        <a title="View Disk" class="info-button" href="/disk/{{ .ID }}"></a>
                                    </td>
                                </tr>
                            {{ end }}
                        </tbody>
                    </table>
                {{ else }}
                    <p>No hard drives found.</p>
                {{ end }}
            </div>
        </div>

    </div>

    <div class="container bordered">

        <div class="container-titlebar">
            <div class="pad">
                <h4>Temperature Graph</h4>
            </div>
        </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" style="margin-right: 1rem;">
                            <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 }}" style="position: relative;">
                            <div class="badge" type="{{.Type}}" style="position: absolute; top: 1rem; right: 1rem;">/dev/{{.Name}}</div>
                            <h4>{{.Model}}:{{.HWID}} <span class="grooved">{{.Size}}</span></h4>
                            <a href="/api/v1/disks/{{.ID}}/chart" target="_blank">
                                <img class="graph-image" src="/api/v1/disks/{{.ID}}/chart?older={{ $older }}&newer={{ $newer }}" alt="{{ .Model }} Image">
                            </a>
                        </div>
                        <br>
                    {{ end }}
                {{ else }}
                    <p>No hard drives found.</p>
                {{ end }}
            </div>
        </div>

    </div>

    <script src="/static/main.js"></script>
</body>
</html>
Implemented the hardware service + Started working on web interface 2024-01-20 01:27:10 +02:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
Api and Frontend + Snapshot get API + Frontend Starting 2024-01-20 01:40:55 +02:00			`<link rel="stylesheet" href="/static/style.css">`
			`<title>Drive Health Dashboard</title>`
Implemented the hardware service + Started working on web interface 2024-01-20 01:27:10 +02:00			`</head>`
Date filtering + Date filtering + Input styling * Visual changes + Updated api calls 2024-01-21 22:40:32 +02:00
			`{{ $older := .older }}`
			`{{ $newer := .newer }}`

Implemented the hardware service + Started working on web interface 2024-01-20 01:27:10 +02:00			`<body>`
Styling and fixes 2024-01-21 19:12:40 +02:00			`<div class="container bordered">`
Implemented frontend + Graph Generation as images for frontend performance + A new decent style 2024-01-21 18:25:23 +02:00
			`<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>`
Implemented View Button * Updated Style + Added 2 icons for the view button + New `drive.html` page ( WIP ) * Updated `index.html` to apply updates 2024-01-22 23:01:05 +02:00			`<td>Actions</td>`
Implemented frontend + Graph Generation as images for frontend performance + A new decent style 2024-01-21 18:25:23 +02:00			`</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 }}°C</td>`
			`{{ else if gt $temp 30 }} <!-- Temperature between 31°C and 50°C -->`
			`<td style="color: orange;">{{ $temp }}°C</td>`
			`{{ else }} <!-- Temperature 30°C or below -->`
			`<td style="color: lime;">{{ $temp }}°C</td>`
			`{{ end }}`
Implemented View Button * Updated Style + Added 2 icons for the view button + New `drive.html` page ( WIP ) * Updated `index.html` to apply updates 2024-01-22 23:01:05 +02:00			`<td>`
			`<a title="View Disk" class="info-button" href="/disk/{{ .ID }}"></a>`
			`</td>`
Implemented frontend + Graph Generation as images for frontend performance + A new decent style 2024-01-21 18:25:23 +02:00			`</tr>`
			`{{ end }}`
			`</tbody>`
			`</table>`
			`{{ else }}`
			`<p>No hard drives found.</p>`
			`{{ end }}`
			`</div>`
			`</div>`

			`</div>`

Styling and fixes 2024-01-21 19:12:40 +02:00			`<div class="container bordered">`
Implemented frontend + Graph Generation as images for frontend performance + A new decent style 2024-01-21 18:25:23 +02:00
			`<div class="container-titlebar">`
			`<div class="pad">`
			`<h4>Temperature Graph</h4>`
			`</div>`
			`</div>`
			`<div class="container-body">`
			`<div class="pad">`
Date filtering + Date filtering + Input styling * Visual changes + Updated api calls 2024-01-21 22:40:32 +02:00
			`<!-- 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>`

* Fixed Styling 2024-01-21 22:44:50 +02:00			`<div class="input-grp" style="margin-right: 1rem;">`
Date filtering + Date filtering + Input styling * Visual changes + Updated api calls 2024-01-21 22:40:32 +02:00			`<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 -->`
Implemented frontend + Graph Generation as images for frontend performance + A new decent style 2024-01-21 18:25:23 +02:00			`{{ if len .drives }}`
			`{{ range .drives }}`
Rootless Run + Debug Tools * ReadME * Optimized config, now it's cached * ReWrote and optimized logic.go * rewrote and optimized + Styling improvements 2024-01-22 00:28:07 +02:00			`<div class="disk-graph-entry bordered" id="disk-temp-{{ .ID }}" style="position: relative;">`
			`<div class="badge" type="{{.Type}}" style="position: absolute; top: 1rem; right: 1rem;">/dev/{{.Name}}</div>`
			`<h4>{{.Model}}:{{.HWID}} <span class="grooved">{{.Size}}</span></h4>`
Implemented frontend + Graph Generation as images for frontend performance + A new decent style 2024-01-21 18:25:23 +02:00			`<a href="/api/v1/disks/{{.ID}}/chart" target="_blank">`
Date filtering + Date filtering + Input styling * Visual changes + Updated api calls 2024-01-21 22:40:32 +02:00			`<img class="graph-image" src="/api/v1/disks/{{.ID}}/chart?older={{ $older }}&newer={{ $newer }}" alt="{{ .Model }} Image">`
Implemented frontend + Graph Generation as images for frontend performance + A new decent style 2024-01-21 18:25:23 +02:00			`</a>`
			`</div>`
Styling and fixes 2024-01-21 19:12:40 +02:00			`<br>`
Implemented frontend + Graph Generation as images for frontend performance + A new decent style 2024-01-21 18:25:23 +02:00			`{{ end }}`
			`{{ else }}`
			`<p>No hard drives found.</p>`
			`{{ end }}`
			`</div>`
			`</div>`
Messy JS + config from .env 2024-01-20 02:06:27 +02:00
Api and Frontend + Snapshot get API + Frontend Starting 2024-01-20 01:40:55 +02:00			`</div>`
Messy JS + config from .env 2024-01-20 02:06:27 +02:00
			`<script src="/static/main.js"></script>`
Implemented the hardware service + Started working on web interface 2024-01-20 01:27:10 +02:00			`</body>`
Api and Frontend + Snapshot get API + Frontend Starting 2024-01-20 01:40:55 +02:00			`</html>`