Display system with bars

static/js/app.js

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

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