From 61d5bdf92a71267826b26cafe27556a4c2773fa0 Mon Sep 17 00:00:00 2001 From: terraputix Date: Sun, 15 Feb 2026 15:51:51 +0100 Subject: [PATCH] get rid of url hash store for now --- src/lib/stores/url-hash-store.ts | 59 ------------------- src/routes/weather/14-day/+page.svelte | 20 +++---- src/routes/weather/14-day/options.ts | 28 +-------- src/routes/weather/compare/+page.svelte | 51 ++++++++-------- src/routes/weather/compare/options.ts | 28 +-------- .../weather/week/[location]/+page.svelte | 49 ++++++++------- 6 files changed, 61 insertions(+), 174 deletions(-) delete mode 100644 src/lib/stores/url-hash-store.ts diff --git a/src/lib/stores/url-hash-store.ts b/src/lib/stores/url-hash-store.ts deleted file mode 100644 index e890a4c..0000000 --- a/src/lib/stores/url-hash-store.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { type Writable, writable } from 'svelte/store'; - -export interface UrlHashParams { - latitude?: number[]; - longitude?: number[]; - daily?: string[]; - hourly?: string[]; - models?: string[]; - current?: string[]; - minutely_15?: string[]; - timezone?: string; - location_mode?: string; - csv_coordinates?: string; - time_mode?: string; - past_days?: string; - forecast_days?: string; - end_date?: string; - start_date?: string; - past_hours?: string; - cell_selection?: string; - forecast_hours?: string; - past_minutely_15?: string; - temporal_resolution?: string; - forecast_minutely_15?: string; - tilt?: string; - azimuth?: string; - timeformat?: string; - wind_speed_unit?: string; - temperature_unit?: string; - precipitation_unit?: string; - [key: string]: unknown; -} - -export interface UrlHashStore extends Writable { - updateParam: (key: string, value: unknown) => void; -} - -// Placeholder function for urlHashStore -// In a real application, this would handle URL hash parameters -// and return a Svelte store that reflects those parameters. -export function urlHashStore(initialValue: UrlHashParams): UrlHashStore { - const { subscribe, set, update } = writable(initialValue); - - // In a full implementation, you would add logic here to: - // 1. Read the URL hash on initialization - // 2. Parse the hash into an object - // 3. Update the store with these values - // 4. Listen for changes to the store and update the URL hash accordingly - // 5. Listen for URL hash changes (e.g., back/forward buttons) and update the store - - return { - subscribe, - set, - update, - // You might want to add methods to easily update specific hash parameters - updateParam: (key: string, value: unknown) => - update((current) => ({ ...current, [key]: value })) - }; -} diff --git a/src/routes/weather/14-day/+page.svelte b/src/routes/weather/14-day/+page.svelte index e248a53..85227ab 100644 --- a/src/routes/weather/14-day/+page.svelte +++ b/src/routes/weather/14-day/+page.svelte @@ -6,7 +6,6 @@ import { dev } from '$app/environment'; import { storedLocation } from '$lib/stores/settings'; - import { urlHashStore } from '$lib/stores/url-hash-store'; import { Label } from '$lib/components/ui/label'; import { Switch } from '$lib/components/ui/switch'; @@ -23,7 +22,8 @@ const location = get(storedLocation); - const params = urlHashStore({ + // Local component state for chart configuration + let params = $state({ latitude: [52.52], longitude: [13.41], ...defaultParameters, @@ -66,7 +66,7 @@ const wd = await dataDaily.json(); const dataReq = await fetch( - `https://ensemble-api.open-meteo.com/v1/ensemble?latitude=${location.latitude}&longitude=${location.longitude}&hourly=${$params.hourly?.join(',') || ''}&models=${$params.models?.join(',') || ''}&timeformat=unixtime&forecast_days=14` + `https://ensemble-api.open-meteo.com/v1/ensemble?latitude=${location.latitude}&longitude=${location.longitude}&hourly=${params.hourly?.join(',') || ''}&models=${params.models?.join(',') || ''}&timeformat=unixtime&forecast_days=14` ); const data = await dataReq.json(); @@ -86,7 +86,7 @@ let minValues = new Array(data.hourly.time.length).fill(undefined); let maxValues = new Array(data.hourly.time.length).fill(undefined); - for (let variable of $params.hourly || []) { + for (let variable of params.hourly || []) { const chartDiv = document.createElement('div'); let unit; @@ -176,7 +176,7 @@ }, credits: { - text: count === ($params.hourly?.length || 0) - 1 ? 'Open-Meteo.com' : '', + text: count === (params.hourly?.length || 0) - 1 ? 'Open-Meteo.com' : '', href: 'http://open-meteo.com' }, @@ -192,8 +192,8 @@ subtitle: { text: count === 0 - ? `Compare ${$params.hourly?.join(', ') || ''} in models: ` + - ($params.models?.join(', ') || '') + + ? `Compare ${params.hourly?.join(', ') || ''} in models: ` + + (params.models?.join(', ') || '') + '' : '', align: 'left' @@ -276,7 +276,7 @@
@@ -311,7 +311,7 @@ name="Show legend" bind:checked={showLegend} onCheckedChange={() => { - $params.hourly = $params.hourly; + params.hourly = params.hourly; }} /> @@ -322,7 +322,7 @@ name="Average only" bind:checked={averageOnly} onCheckedChange={() => { - $params.hourly = $params.hourly; + params.hourly = params.hourly; }} /> diff --git a/src/routes/weather/14-day/options.ts b/src/routes/weather/14-day/options.ts index 8727075..970b98d 100644 --- a/src/routes/weather/14-day/options.ts +++ b/src/routes/weather/14-day/options.ts @@ -1,31 +1,5 @@ +// Default configuration for 14-day ensemble forecast charts export const defaultParameters = { - daily: [], - hourly: [], - models: [], - current: [], - minutely_15: [], - - timezone: 'UTC', - location_mode: 'location_search', - csv_coordinates: undefined, - - time_mode: 'forecast_days', - past_days: '0', - forecast_days: '14', - - end_date: undefined, - start_date: undefined, - - past_hours: undefined, - cell_selection: undefined, - forecast_hours: undefined, - past_minutely_15: undefined, - temporal_resolution: undefined, - forecast_minutely_15: undefined, - - tilt: '0', - azimuth: '0', - timeformat: 'iso8601', wind_speed_unit: 'kmh', temperature_unit: 'celsius', diff --git a/src/routes/weather/compare/+page.svelte b/src/routes/weather/compare/+page.svelte index 45cf42a..25406ca 100644 --- a/src/routes/weather/compare/+page.svelte +++ b/src/routes/weather/compare/+page.svelte @@ -6,7 +6,6 @@ import { dev } from '$app/environment'; import { storedLocation } from '$lib/stores/settings'; - import { urlHashStore } from '$lib/stores/url-hash-store'; import { Checkbox } from '$lib/components/ui/checkbox'; import { Label } from '$lib/components/ui/label'; @@ -28,7 +27,7 @@ const location = get(storedLocation); - const params = urlHashStore({ + let params = $state({ latitude: [52.52], longitude: [13.41], ...defaultParameters, @@ -70,7 +69,7 @@ node.replaceChildren(); const dataReq = await fetch( - `https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}&hourly=${$params.hourly?.join(',') || ''}&models=${$params.models?.join(',') || ''}&timeformat=unixtime&daily=sunset,sunrise` + `https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}&hourly=${params.hourly?.join(',') || ''}&models=${params.models?.join(',') || ''}&timeformat=unixtime&daily=sunset,sunrise` ); const data = await dataReq.json(); @@ -95,7 +94,7 @@ }); } - for (let variable of $params.hourly || []) { + for (let variable of params.hourly || []) { const chartDiv = document.createElement('div'); let unit; @@ -177,7 +176,7 @@ }, credits: { - text: count === ($params.hourly?.length || 0) - 1 ? 'Open-Meteo.com' : '', + text: count === (params.hourly?.length || 0) - 1 ? 'Open-Meteo.com' : '', href: 'http://open-meteo.com' }, @@ -193,8 +192,8 @@ subtitle: { text: count === 0 - ? `Compare ${$params.hourly?.join(', ') || ''} in models: ` + - ($params.models?.join(', ') || '') + + ? `Compare ${params.hourly?.join(', ') || ''} in models: ` + + (params.models?.join(', ') || '') + '' : '', align: 'left' @@ -277,7 +276,7 @@
@@ -312,7 +311,7 @@ name="Show legend" bind:checked={showLegend} onCheckedChange={() => { - $params.hourly = $params.hourly; + params.hourly = params.hourly; }} /> @@ -323,7 +322,7 @@ name="Average only" bind:checked={averageOnly} onCheckedChange={() => { - $params.hourly = $params.hourly; + params.hourly = params.hourly; }} /> @@ -334,12 +333,12 @@

Models

 - {#if $params.models && $params.models.length > 0} + {#if params.models && params.models.length > 0}
- {$params.models?.length || 0} / {models.flat().length} + {params.models?.length || 0} / {models.flat().length}
{/if} @@ -355,16 +354,16 @@ id="{value}_model" class="border-border-dark cursor-pointer bg-muted/50 duration-100 group-hover:border-[currentColor]" {value} - checked={$params.models?.includes(value)} + checked={params.models?.includes(value)} aria-labelledby="{value}_label" onCheckedChange={() => { - if ($params.models?.includes(value)) { - $params.models = $params.models.filter((item) => { + if (params.models?.includes(value)) { + params.models = params.models.filter((item) => { return item !== value; }); - } else if ($params.models) { - $params.models.push(value); - $params.models = $params.models; + } else if (params.models) { + params.models.push(value); + params.models = params.models; } }} /> @@ -387,12 +386,12 @@ Hourly Weather Variables - {#if $params.hourly && $params.hourly.length > 0} + {#if params.hourly && params.hourly.length > 0}
- {$params.hourly?.length || 0} / {hourly.flat().length} + {params.hourly?.length || 0} / {hourly.flat().length}
{/if} @@ -409,16 +408,16 @@ id="{value}_hourly" class="border-border-dark cursor-pointer bg-muted/50 duration-100 group-hover:border-[currentColor]" {value} - checked={$params.hourly?.includes(value)} + checked={params.hourly?.includes(value)} aria-labelledby="{value}_label" onCheckedChange={() => { - if ($params.hourly?.includes(value)) { - $params.hourly = $params.hourly.filter((item) => { + if (params.hourly?.includes(value)) { + params.hourly = params.hourly.filter((item) => { return item !== value; }); - } else if ($params.hourly) { - $params.hourly.push(value); - $params.hourly = $params.hourly; + } else if (params.hourly) { + params.hourly.push(value); + params.hourly = params.hourly; } }} /> diff --git a/src/routes/weather/compare/options.ts b/src/routes/weather/compare/options.ts index a0a4378..463bab5 100644 --- a/src/routes/weather/compare/options.ts +++ b/src/routes/weather/compare/options.ts @@ -1,31 +1,5 @@ +// Default configuration for weather comparison charts export const defaultParameters = { - daily: [], - hourly: [], - models: [], - current: [], - minutely_15: [], - - timezone: 'UTC', - location_mode: 'location_search', - csv_coordinates: undefined, - - time_mode: 'forecast_days', - past_days: '0', - forecast_days: '7', - - end_date: undefined, - start_date: undefined, - - past_hours: undefined, - cell_selection: undefined, - forecast_hours: undefined, - past_minutely_15: undefined, - temporal_resolution: undefined, - forecast_minutely_15: undefined, - - tilt: '0', - azimuth: '0', - timeformat: 'iso8601', wind_speed_unit: 'kmh', temperature_unit: 'celsius', diff --git a/src/routes/weather/week/[location]/+page.svelte b/src/routes/weather/week/[location]/+page.svelte index f323b78..79799b0 100644 --- a/src/routes/weather/week/[location]/+page.svelte +++ b/src/routes/weather/week/[location]/+page.svelte @@ -6,7 +6,6 @@ import { fetchWeatherApi } from 'openmeteo'; import { type GeoLocation, storedLocation } from '$lib/stores/settings'; - import { urlHashStore } from '$lib/stores/url-hash-store'; import { pad } from '$lib/utils/index'; @@ -22,7 +21,7 @@ import { getColor } from '../../utils/colors'; import weatherCodes from '../../utils/weather-codes'; - const params = urlHashStore({ + let params = $state({ latitude: [$storedLocation.latitude], longitude: [$storedLocation.longitude], models: ['best_match'], @@ -53,7 +52,7 @@ longitude: location.longitude, elevation: location.elevation, // timezone: location.timezone, ??? - models: [$params.models], + models: [params.models], hourly: [ 'precipitation', 'precipitation_probability', @@ -66,9 +65,9 @@ ].join(','), forecast_days: 6, past_days: 1, - temperature_unit: $params.temperature_unit, - wind_speed_unit: $params.wind_speed_unit, - precipitation_unit: $params.precipitation_unit + temperature_unit: params.temperature_unit, + wind_speed_unit: params.wind_speed_unit, + precipitation_unit: params.precipitation_unit }; const url = 'https://api.open-meteo.com/v1/forecast'; const responses = await fetchWeatherApi(url, reqParams); @@ -120,7 +119,7 @@ // create canvas daylight(ctx, config, hourlyTime); raster(ctx, config, hourlyTime, today, canvasElement!); - tempGradient(ctx, config, hourlyTemps, $params.temperature_unit); + tempGradient(ctx, config, hourlyTemps, params.temperature_unit); cloudCover(ctx, config, hourlyCloudCover, canvasElement!); precip(ctx, config, hourlyPrecip, canvasElement!); } @@ -188,7 +187,7 @@ longitude: location.longitude, elevation: location.elevation, // timezone: location.timezone, ??? - models: [$params.models], + models: [params.models], daily: [ 'weather_code', 'temperature_2m_max', @@ -203,9 +202,9 @@ ].join(','), forecast_days: 6, past_days: 1, - temperature_unit: $params.temperature_unit, - wind_speed_unit: $params.wind_speed_unit, - precipitation_unit: $params.precipitation_unit + temperature_unit: params.temperature_unit, + wind_speed_unit: params.wind_speed_unit, + precipitation_unit: params.precipitation_unit }; const url = 'https://api.open-meteo.com/v1/forecast'; const responses = await fetchWeatherApi(url, reqParams); @@ -288,8 +287,8 @@ }; }); - let modelSelected = $derived(models.find((mo) => String(mo.value) === $params.models?.[0])); - // let modelSelectedValue = $derived($params.models[0]); + let modelSelected = $derived(models.find((mo) => String(mo.value) === params.models?.[0])); + // let modelSelectedValue = $derived(params.models[0]); // @@ -349,17 +348,17 @@
= ($params.temperature_unit === 'celsius' ? 30 : 104) ? 'white' : 'black'}`} + style={`background-color: ${getColor((wd.daily.temperature_2m_max.values(index) ?? 0).toFixed(0), params.temperature_unit)}; color: ${(wd.daily.temperature_2m_min.values(index) ?? 0) < (params.temperature_unit === 'celsius' ? 4 : 7) || (wd.daily.temperature_2m_min.values(index) ?? 0) >= (params.temperature_unit === 'celsius' ? 30 : 104) ? 'white' : 'black'}`} > {wd.daily.temperature_2m_max.values(index)?.toFixed(1)} - {$params.temperature_unit === 'celsius' ? '°C' : '°F'} + {params.temperature_unit === 'celsius' ? '°C' : '°F'}
= ($params.temperature_unit === 'celsius' ? 30 : 104) ? 'white' : 'black'}`} + style={`background: ${getColor((wd.daily.temperature_2m_min.values(index) ?? 0).toFixed(0), params.temperature_unit)}; color: ${(wd.daily.temperature_2m_min.values(index) ?? 0) < (params.temperature_unit === 'celsius' ? 4 : 7) || (wd.daily.temperature_2m_min.values(index) ?? 0) >= (params.temperature_unit === 'celsius' ? 30 : 104) ? 'white' : 'black'}`} > {wd.daily.temperature_2m_min.values(index)?.toFixed(1)} - {$params.temperature_unit === 'celsius' ? '°C' : '°F'} + {params.temperature_unit === 'celsius' ? '°C' : '°F'}
@@ -388,7 +387,7 @@
{Number(wd.daily.precipitation_sum.values(index)).toFixed( 1 - )}{$params.precipitation_unit === 'mm' ? 'mm' : "'"} + )}{params.precipitation_unit === 'mm' ? 'mm' : "'"}
@@ -538,15 +537,15 @@ ? 'background: ' + getColor( weather.entries[0].values![index].toFixed(0), - $params.temperature_unit + params.temperature_unit ) : ''}; {entry.name === 'temperature_2m' ? 'color: ' + (weather.entries[0].values![index] < - ($params.temperature_unit === 'celsius' ? -13 : 7) || + (params.temperature_unit === 'celsius' ? -13 : 7) || weather.entries[0].values![index] >= - ($params.temperature_unit === 'celsius' ? 40 : 104) + (params.temperature_unit === 'celsius' ? 40 : 104) ? 'white' : 'black') : ''}; @@ -627,15 +626,15 @@
- {#if $params.models && $params.models.length > 0} - {@const modelValue = $params.models[0]} + {#if params.models && params.models.length > 0} + {@const modelValue = params.models[0]} { - if ($params.models && val) { - $params.models = [val]; + if (params.models && val) { + params.models = [val]; } }} >