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

Use d3 to manipulate weather

Browse source
This commit is contained in:
Florian Hoss 2022-10-23 10:45:44 +02:00
parent b8af81d0d1
commit 2d96640657
2 changed files with 13 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
static/js/app.js
View file

@ -1,21 +1,17 @@
import { select } from "https://cdn.skypack.dev/d3-selection@3";
const WsType = { Weather: 0, System: 1 };
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);
if (parsed.ws_type === WsType.Weather) {
weatherIcon.setAttribute("xlink:href", "#" + parsed.message.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;
select("#weatherIcon").attr("xlink:href", "#" + parsed.message.weather[0].icon);
select("#weatherTemp").text(parsed.message.main.temp);
select("#weatherDescription").text(parsed.message.weather[0].description);
select("#weatherHumidity").text(parsed.message.main.humidity);
select("#weatherSunrise").text(parsed.message.sys.str_sunrise);
select("#weatherSunset").text(parsed.message.sys.str_sunset);
}
};

9
templates/index.gohtml
View file

@ -6,6 +6,7 @@
{{ define "content" }}
{{ template "weatherIcons" . }}
{{ 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">
@ -14,15 +15,15 @@
{{ end }}
</svg>
<div class="flex flex-col md:flex-row">
<div class="text-4xl font-bold mr-8" id="weatherTemp">{{ .Weather.Main.Temp }} {{ .Weather.Units }}</div>
<div class="text-4xl font-bold mr-8"><span id="weatherTemp">{{ .Weather.Main.Temp }}</span> {{ .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">
<use xlink:href="#quote"></use>
</svg>
<div id="weatherDescription">
<div>
{{ range .Weather.Weather }}
{{ .Description }}
<div id="weatherDescription">{{ .Description }}</div>
{{ end }}
</div>
</div>
@ -30,7 +31,7 @@
<svg width="14" height="14" class="mr-2">
<use xlink:href="#humidity"></use>
</svg>
<div id="weatherHumidity">{{ .Weather.Main.Humidity }}%</div>
<span id="weatherHumidity">{{ .Weather.Main.Humidity }}</span>%
</div>
<div class="hidden lg:flex items-center">
<div class="flex items-center md:mr-5">