godash/components/system.templ

package components

import (
	"fmt"
	"gitlab.unjx.de/flohoss/godash/services"
	"html/template"
)

var BarTemplate = template.Must(template.New("bar").Parse("<div id=\"{{ .Id }}\" class=\"progress-bar\" style=\"width: {{ .Percentage }}%\"></div>"))

type Bar struct {
	Id         string
	Percentage float64
}

templ System(icon string, infoPre string, infoPost string, extraInfo string, percentageId string, valueId string, percentage float64) {
	<div class="flex items-center">
		<span class={ "system-icon", icon }></span>
		<div class="w-full truncate">
			<div class="extra-info">{ extraInfo }</div>
			<div class="truncate"><span id={ valueId }>{ infoPre }</span>{ infoPost }</div>
			<div class="progress-bar-wrapper">
				@templ.FromGoHTML(BarTemplate, Bar{Id: percentageId, Percentage: percentage})
			</div>
		</div>
	</div>
}

var countDownTemplate = template.Must(template.New("countdown").Parse("<span id=\"{{ .Id }}\" style=\"--value: {{ .Value }};\"></span>"))

type Countdown struct {
	Id    string
	Value uint16
}

templ Uptime(extraInfo string, id string, uptime services.Uptime) {
	<div class="flex items-center">
		<span class="system-icon icon-[bi--motherboard]"></span>
		<div class="w-full truncate">
			<div class="extra-info">{ extraInfo }</div>
			<div class="flex items-center gap-2 truncate">
				<div class="truncate">
					<span><span id="uptimeDays">{ fmt.Sprintf("%d",uptime.Days) }</span> days</span>
					<span class="countdown">
						@templ.FromGoHTML(countDownTemplate, Countdown{Id: "uptimeHours", Value: uptime.Hours})
					</span> hours
					<span class="countdown">
						@templ.FromGoHTML(countDownTemplate, Countdown{Id: "uptimeMinutes", Value: uptime.Minutes})
					</span> min
					<span class="countdown">
						@templ.FromGoHTML(countDownTemplate, Countdown{Id: "uptimeSeconds", Value: uptime.Seconds})
					</span> sec
				</div>
			</div>
			<div class="progress-bar-wrapper">
				@templ.FromGoHTML(BarTemplate, Bar{Id: id, Percentage: float64(uptime.Percentage)})
			</div>
		</div>
	</div>
	<script>
		let systemSSESource = null;
		addEventListener('beforeunload', () => {
			systemSSESource && systemSSESource.close();
		});
		systemSSESource = new EventSource('/sse?stream=system');
		systemSSESource.onmessage = (e) => {
			const parsed = JSON.parse(e.data);
			replaceSystem(parsed);
		};

		// system elements
		const systemCpuPercentage = document.getElementById('systemCpuPercentage');
		const systemRamPercentage = document.getElementById('systemRamPercentage');
		const systemRamValue = document.getElementById('systemRamValue');
		const systemDiskPercentage = document.getElementById('systemDiskPercentage');
		const systemDiskValue = document.getElementById('systemDiskValue');
		const systemUptimePercentage = document.getElementById('systemUptimePercentage');
		const uptimeDays = document.getElementById('uptimeDays');
		const uptimeHours = document.getElementById('uptimeHours');
		const uptimeMinutes = document.getElementById('uptimeMinutes');
		const uptimeSeconds = document.getElementById('uptimeSeconds');

		function replaceSystem(parsed) {
			systemCpuPercentage.style = 'width:' + parsed.cpu + '%';
			systemRamPercentage.style = 'width:' + parsed.ram.percentage + '%';
			systemRamValue.innerText = parsed.ram.value;
			systemDiskPercentage.style = 'width:' + parsed.disk.percentage + '%';
			systemDiskValue.innerText = parsed.disk.value;
			systemUptimePercentage.style = 'width:' + parsed.uptime.percentage + '%';
			uptimeDays.style = '--value:' + parsed.uptime.days;
			uptimeHours.style = '--value:' + parsed.uptime.hours;
			uptimeMinutes.style = '--value:' + parsed.uptime.minutes;
			uptimeSeconds.style = '--value:' + parsed.uptime.seconds;
		}
  	</script>
}