0ct0pu5/godash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display system with bars

Browse source
This commit is contained in:
Florian Hoss 2022-10-23 18:46:38 +02:00
parent edf1153359
commit f0cc2c7b77
2 changed files with 44 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
static/js/app.js
View file

@ -13,10 +13,9 @@ const weatherSunrise = document.getElementById("weatherSunrise");
const weatherSunset = document.getElementById("weatherSunset");
// system elements
const systemCpu = document.getElementById("systemCpu");
const systemCpuPercentage = document.getElementById("systemCpuPercentage");
const systemRamPercentage = document.getElementById("systemRamPercentage");
const systemDiskPercentage = document.getElementById("systemDiskPercentage");
const systemUptime = document.getElementById("systemUptime");
function connect() {
let ws = new WebSocket(apiBase.replace("http", "ws") + "/system/ws");
@ -48,8 +47,7 @@ function replaceWeather(parsed) {
}
function replaceSystem(parsed) {
systemCpu.innerText = parsed.cpu.percentage;
systemRamPercentage.innerText = parsed.ram.percentage;
systemDiskPercentage.innerText = parsed.disk.percentage;
systemUptime.innerText = parsed.server_uptime;
systemCpuPercentage.style = "width:" + parsed.cpu.percentage + "%";
systemRamPercentage.style = "width:" + parsed.ram.percentage + "%";
systemDiskPercentage.style = "width:" + parsed.disk.percentage + "%";
}

86
templates/index.gohtml
View file

@ -10,7 +10,7 @@
{{ if .Weather.Name }}
<div class="flex items-center mb-6 md:mb-10 select-none">
<svg class="w-20 h-20 md:w-14 md:h-14 mr-5">
<svg class="shrink-0 w-20 h-20 md:w-14 md:h-14 mr-5">
{{ range .Weather.Weather }}
<use id="weatherIcon" xlink:href="#{{ .Icon }}"></use>
{{ end }}
@ -59,12 +59,50 @@
</div>
{{ end }}
{{ if .System.Static.CPU.Name }}
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-6 md:mb-10 select-none text-sm">
<div class="flex items-center">
<svg class="h-6 w-6 shrink-0 mr-2 text-slate-300">
<use xlink:href="#cpu"></use>
</svg>
<div class="w-full truncate">
<div class="truncate">{{ .System.Static.CPU.Name }}</div>
<div class="bg-slate-700 h-px mt-1">
<div id="systemCpuPercentage" class="transition-[width] duration-700 bg-slate-200 h-px" style="width: {{ .System.Live.CPU.Percentage }}%"></div>
</div>
</div>
</div>
<div class="flex items-center">
<svg class="h-6 w-6 shrink-0 mr-2 text-slate-300">
<use xlink:href="#ram"></use>
</svg>
<div class="w-full truncate">
<div class="truncate">{{ .System.Live.Ram.Value }} / {{ .System.Static.Ram }}</div>
<div class="bg-slate-700 h-px mt-1">
<div id="systemRamPercentage" class="transition-[width] duration-700 bg-slate-200 h-px" style="width: {{ .System.Live.Ram.Percentage }}%"></div>
</div>
</div>
</div>
<div class="flex items-center">
<svg class="h-6 w-6 shrink-0 mr-2 text-slate-300">
<use xlink:href="#disk"></use>
</svg>
<div class="w-full truncate">
<div class="truncate">{{ .System.Live.Disk.Value }} / {{ .System.Static.Disk }}</div>
<div class="bg-slate-700 h-px mt-1">
<div id="systemDiskPercentage" class="transition-[width] duration-700 bg-slate-200 h-px" style="width: {{ .System.Live.Disk.Percentage }}%"></div>
</div>
</div>
</div>
</div>
{{ end }}
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-5">
{{ range .Bookmarks }}
<a
href="{{ .Url }}"
class="link flex items-center rounded-md hover:underline underline-offset-2 decoration-gray-500 text-sm text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-50 ease-in duration-200"
class="link flex items-center rounded-md hover:underline underline-offset-2 decoration-gray-500 text-sm text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-50 ease-in duration-200"
>
<div class="img rounded-md w-8 h-8 bg-cover bg-center opacity-90" style="background-image: url({{ .Icon }})"></div>
<div class="uppercase truncate ml-2">
@ -73,48 +111,4 @@
</a>
{{ end }}
</div>
{{ if .System.Static.CPU.Name }}
<div class="grid grid-cols-4 gap-5 mt-6 md:mt-10 select-none">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg width="20" height="20" class="mr-3">
<use xlink:href="#cpu"></use>
</svg>
<div class="mr-2">CPU</div>
<div class="text-sm text-slate-700 dark:text-slate-300 bg-slate-300 dark:bg-slate-700 rounded px-1">{{ .System.Static.CPU.Name }}</div>
</div>
<div class="text-xl font-bold"><span id="systemCpu">{{ .System.Live.CPU.Percentage }}</span>%</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg width="20" height="20" class="mr-3">
<use xlink:href="#ram"></use>
</svg>
<div class="mr-2">RAM</div>
<div class="text-sm text-slate-700 dark:text-slate-300 bg-slate-300 dark:bg-slate-700 rounded px-1">{{ .System.Static.Ram }}</div>
</div>
<div class="text-xl font-bold"><span id="systemRamPercentage">{{ .System.Live.Ram.Percentage }}</span>%</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg width="20" height="20" class="mr-3">
<use xlink:href="#disk"></use>
</svg>
<div class="mr-2">Disk</div>
<div class="text-sm text-slate-700 dark:text-slate-300 bg-slate-300 dark:bg-slate-700 rounded px-1">{{ .System.Static.Disk }}</div>
</div>
<div class="text-xl font-bold"><span id="systemDiskPercentage">{{ .System.Live.Disk.Percentage }}</span>%</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg width="20" height="20" class="mr-3">
<use xlink:href="#power"></use>
</svg>
<div class="mr-2">Uptime</div>
</div>
<div class="text-xl font-bold"><span id="systemUptime">{{ .System.Live.ServerUptime }}</span></div>
</div>
</div>
{{ end }}
{{ end }}