Merge pull request #2 from flohoss/dev

New system design

static/js/app.js

@@ -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 + "%";
 }

templates/index.gohtml

@@ -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 }}