Adjust weather in html

This commit is contained in:
Florian Hoss 2022-10-20 22:32:55 +02:00
parent 1a25ad12ef
commit 322f547085
2 changed files with 7 additions and 9 deletions

View file

@ -12,7 +12,7 @@ func main() {
w := weather.NewWeather()
if w.OpenWeather.Key != "" {
w.SetWeatherUnits()
go w.UpdateWeather(time.Second * 150)
go w.UpdateWeather(time.Second * 90)
}
s := server.NewServer()
s.Listen()

View file

@ -10,11 +10,11 @@
<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">
{{ range .Weather.Weather }}
<use xlink:href="#{{ .Icon }}"></use>
<use id="weatherIcon" xlink:href="#{{ .Icon }}"></use>
{{ end }}
</svg>
<div class="flex flex-col md:flex-row">
<div class="text-4xl font-bold mr-8">{{ .Weather.Main.Temp }} {{ .Weather.Units }}</div>
<div class="text-4xl font-bold mr-8" id="weatherTemp">{{ .Weather.Main.Temp }} {{ .Weather.Units }}</div>
<div class="flex flex-col md:flex-row mt-1 text-sm text-slate-700 dark:text-slate-300">
<div class="flex items-center md:mr-5">
<svg width="14" height="14" class="mr-2">
@ -56,9 +56,6 @@
{{ end }}
<div id="system"></div>
<div id="weather"></div>
<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
@ -78,13 +75,14 @@
<script lang="ts">
const WsType = { Weather: 0, System: 1 };
let socket = new WebSocket(window.location.origin.replace("http", "ws") + "/system/ws");
const weatherIcon = document.getElementById("weatherIcon");
const weatherTemp = document.getElementById("weatherTemp");
socket.onmessage = (event) => {
const parsed = JSON.parse(event.data);
if (parsed.ws_type === WsType.Weather) {
document.getElementById("weather").innerHTML = event.data;
} else if (parsed.ws_type === WsType.System) {
document.getElementById("system").innerHTML = event.data;
weatherIcon.setAttribute("xlink:href", "#" + parsed.message.weather[0].icon);
weatherTemp.innerHTML = parsed.message.main.temp + " " + parsed.message.units;
}
};
</script>