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

Merge pull request #2 from flohoss/dev

Browse source 
New system design
This commit is contained in:
Florian Hoss 2022-10-23 18:47:10 +02:00 • committed by GitHub
commit 326204be6c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
static/js/app.js
View file

@ -1,11 +1,22 @@
import { select } from "https://cdn.skypack.dev/d3-selection@3";
import { timeDay } from "https://cdn.skypack.dev/d3-time@3";
// webSocket
const WsType = { Weather: 0, System: 1 };
const apiBase = window.location.origin + "/api";
let timeOut = 1;
connect();
// weather elements
const weatherIcon = document.getElementById("weatherIcon");
const weatherTemp = document.getElementById("weatherTemp");
const weatherDescription = document.getElementById("weatherDescription");
const weatherHumidity = document.getElementById("weatherHumidity");
const weatherSunrise = document.getElementById("weatherSunrise");
const weatherSunset = document.getElementById("weatherSunset");
// system elements
const systemCpuPercentage = document.getElementById("systemCpuPercentage");
const systemRamPercentage = document.getElementById("systemRamPercentage");
const systemDiskPercentage = document.getElementById("systemDiskPercentage");
function connect() {
let ws = new WebSocket(apiBase.replace("http", "ws") + "/system/ws");
ws.onopen = () => {
@ -27,17 +38,16 @@ function handleMessage(parsed) {
}
function replaceWeather(parsed) {
select("#weatherIcon").attr("xlink:href", "#" + parsed.weather[0].icon);
select("#weatherTemp").text(parsed.main.temp);
select("#weatherDescription").text(parsed.weather[0].description);
select("#weatherHumidity").text(parsed.main.humidity);
select("#weatherSunrise").text(parsed.sys.str_sunrise);
select("#weatherSunset").text(parsed.sys.str_sunset);
weatherIcon.setAttribute("xlink:href", "#" + parsed.weather[0].icon);
weatherTemp.innerText = parsed.main.temp;
weatherDescription.innerText = parsed.weather[0].description;
weatherHumidity.innerText = parsed.main.humidity;
weatherSunrise.innerText = parsed.sys.str_sunrise;
weatherSunset.innerText = parsed.sys.str_sunset;
}
function replaceSystem(parsed) {
select("#systemCpu").text(parsed.cpu.percentage);
select("#systemRamPercentage").text(parsed.ram.percentage);
select("#systemDiskPercentage").text(parsed.disk.percentage);
select("#systemUptime").text(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 }}