Replace all weather data with ws data

Dockerfile

@@ -22,7 +22,7 @@ FROM alpine AS logo
 RUN apk add figlet
 WORKDIR /logo
 
-RUN figlet godash > logo.txt
+RUN figlet GoDash > logo.txt
 
 FROM alpine AS final
 RUN apk add tzdata

static/js/app.js

@@ -1,7 +1,12 @@
 const WsType = { Weather: 0, System: 1 };
-let socket = new WebSocket(window.location.origin.replace("http", "ws") + "/api/system/ws");
+const apiBase = window.location.origin + "/api";
+let socket = new WebSocket(apiBase.replace("http", "ws") + "/system/ws");
 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");
 
 socket.onmessage = (event) => {
   const parsed = JSON.parse(event.data);
@@ -9,5 +14,9 @@ socket.onmessage = (event) => {
     const weather = parsed.message;
     weatherIcon.setAttribute("xlink:href", "#" + weather.weather[0].icon);
     weatherTemp.innerHTML = parsed.message.main.temp + " " + parsed.message.units;
+    weatherDescription.innerHTML = parsed.message.weather[0].description;
+    weatherHumidity.innerHTML = parsed.message.main.humidity + "%";
+    weatherSunrise.innerHTML = parsed.message.sys.str_sunrise;
+    weatherSunset.innerHTML = parsed.message.sys.str_sunset;
   }
 };

templates/index.gohtml

@@ -20,15 +20,17 @@
             <svg width="14" height="14" class="mr-2">
               <use xlink:href="#quote"></use>
             </svg>
-            {{ range .Weather.Weather }}
-              {{ .Description }}
-            {{ end }}
+            <div id="weatherDescription">
+              {{ range .Weather.Weather }}
+                {{ .Description }}
+              {{ end }}
+            </div>
           </div>
           <div class="flex items-center md:mr-5">
             <svg width="14" height="14" class="mr-2">
               <use xlink:href="#humidity"></use>
             </svg>
-            {{ .Weather.Main.Humidity }}%
+            <div id="weatherHumidity">{{ .Weather.Main.Humidity }}%</div>
           </div>
           <div class="hidden lg:flex items-center">
             <div class="flex items-center md:mr-5">
@@ -41,13 +43,13 @@
               <svg width="18" height="18" class="mr-2 mt-1">
                 <use xlink:href="#sunrise"></use>
               </svg>
-              {{ .Weather.Sys.StrSunrise }}
+              <div id="weatherSunrise">{{ .Weather.Sys.StrSunrise }}</div>
             </div>
             <div class="flex items-center md:mr-5">
               <svg width="18" height="18" class="mr-2 mt-1">
                 <use xlink:href="#sunset"></use>
               </svg>
-              {{ .Weather.Sys.StrSunset }}
+              <div id="weatherSunset">{{ .Weather.Sys.StrSunset }}</div>
             </div>
           </div>
         </div>

weather/types.go

@@ -36,8 +36,8 @@ type OpenWeatherApiMain struct {
 }
 
 type OpenWeatherApiSys struct {
-	Sunrise    int64 `json:"sunrise"`
-	Sunset     int64 `json:"sunset"`
-	StrSunrise string
-	StrSunset  string
+	Sunrise    int64  `json:"sunrise"`
+	Sunset     int64  `json:"sunset"`
+	StrSunrise string `json:"str_sunrise"`
+	StrSunset  string `json:"str_sunset"`
 }