theoandClaude Sonnet 5
8e90eb1129
Tik op een dag in de verwachtingsstrook voor een uuroverzicht van
temperatuur, regen en wind (richting + snelheid), om de 2 uur, 12
punten per dag. Sluit na 20 seconden vanzelf of bij een tik op de
overlay zelf.
Backend: Open-Meteo levert hourly-data in dezelfde call als daily
(geen extra verzoek, dezelfde 60min-cache). Nieuwe HourlyForecastMapper
groepeert per kalenderdatum en bemonstert om het andere uur, robuust
voor de zomertijddag (23/25 uur). OpenMeteoClient::dailyForecast()
hernoemd naar forecast(), geeft nu {daily, hourly} terug. Elke dag in
de forecast-array krijgt een hourly-lijst.
Frontend: temperatuurlijn hergebruikt sparklinePath (nu ook als
sparklinePoints voor exacte uitlijning met de 12-koloms grid), regen
als kleine staafjes, windpijl (nieuw icoon) wijst waarheen de wind
waait. 20s-balk via CSS transition met reflow-restart. Servicewerker
naar v5.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
38 lines
2.2 KiB
JavaScript
38 lines
2.2 KiB
JavaScript
/**
|
|
* Weericonen als inline SVG-strings. viewBox 0 0 48 48, stroke 2.4, ronde uiteinden.
|
|
* Zon-delen krijgen de klasse i-sun, wolk-vullingen i-cloud, druppels/vlokken/mist i-drop.
|
|
*/
|
|
|
|
const SUN = '<g class="i-sun"><circle cx="24" cy="24" r="8"/><path d="M24 6v5M24 37v5M6 24h5M37 24h5M11.3 11.3l3.5 3.5M33.2 33.2l3.5 3.5M11.3 36.7l3.5-3.5M33.2 14.8l3.5-3.5"/></g>';
|
|
const SMALL_SUN = '<g class="i-sun"><circle cx="18" cy="17" r="6"/><path d="M18 5v3M6 17h3M9.5 8.5l2 2M26.5 8.5l-2 2"/></g>';
|
|
const CLOUD_LOW = '<path class="i-cloud" d="M17 40h18a7 7 0 0 0 .8-13.96A10 10 0 0 0 17.3 28 6 6 0 0 0 17 40z"/>';
|
|
const CLOUD_HIGH = '<path class="i-cloud" d="M15 30h19a7 7 0 0 0 .8-13.96A10 10 0 0 0 15.3 18 6 6 0 0 0 15 30z"/>';
|
|
const CLOUD_MID = '<path class="i-cloud" d="M15 34h19a7 7 0 0 0 .8-13.96A10 10 0 0 0 15.3 22 6 6 0 0 0 15 34z"/>';
|
|
|
|
const ICONS = {
|
|
sun: SUN,
|
|
partly: SMALL_SUN + CLOUD_LOW,
|
|
cloud: CLOUD_MID,
|
|
fog: CLOUD_HIGH + '<path class="i-drop" d="M14 36h20M18 42h14"/>',
|
|
drizzle: CLOUD_HIGH + '<path class="i-drop" d="M18 35l-1 2.5M26 35l-1 2.5M34 35l-1 2.5"/>',
|
|
rain: CLOUD_HIGH + '<path class="i-drop" d="M18 35l-2 5M26 35l-2 5M34 35l-2 5"/>',
|
|
showers: '<g class="i-sun"><circle cx="16" cy="14" r="5"/><path d="M16 4v2.5M6 14h2.5M9 7l1.8 1.8M23 7l-1.8 1.8"/></g>'
|
|
+ '<path class="i-cloud" d="M17 32h17a6.5 6.5 0 0 0 .7-12.96A9.5 9.5 0 0 0 17.3 21 5.5 5.5 0 0 0 17 32z"/>'
|
|
+ '<path class="i-drop" d="M22 37l-2 5M30 37l-2 5"/>',
|
|
snow: CLOUD_HIGH + '<path class="i-drop" d="M17 35v6M14.4 36.5l5.2 3M14.4 39.5l5.2-3M25 35v6M22.4 36.5l5.2 3M22.4 39.5l5.2-3M33 35v6M30.4 36.5l5.2 3M30.4 39.5l5.2-3"/>',
|
|
thunder: CLOUD_HIGH + '<path class="i-sun" d="M26 31l-5 8h6l-3 6"/>',
|
|
};
|
|
|
|
export const ICON_NAMES = Object.keys(ICONS);
|
|
|
|
/** SVG-markup voor een icoonnaam; onbekend -> cloud. */
|
|
export function icon(name) {
|
|
const inner = ICONS[name] || ICONS.cloud;
|
|
return `<svg class="ic" viewBox="0 0 48 48" aria-hidden="true">${inner}</svg>`;
|
|
}
|
|
|
|
/** Compacte windpijl, wijst standaard naar boven. Draai 'm met een inline transform naar de juiste hoek. */
|
|
export function windArrow() {
|
|
return '<svg class="wind-ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M6.5 10.5 12 5l5.5 5.5"/></svg>';
|
|
}
|