useweb/drizzli
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

get rid of url hash store for now

Browse Source
This commit is contained in:
terraputix
2026-02-15 15:51:51 +01:00
parent 386e814001
commit 61d5bdf92a
6 changed files with 61 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/stores/url-hash-store.ts
-59
View File
@@ -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<UrlHashParams> {
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<UrlHashParams>(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 }))
};
}
src/routes/weather/14-day/+page.svelte
+10 -10
View File
@@ -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 <span class="font-bold">${$params.hourly?.join(', ') || ''}</span> in models: <span class="font-bold">` +
($params.models?.join(', ') || '') +
? `Compare <span class="font-bold">${params.hourly?.join(', ') || ''}</span> in models: <span class="font-bold">` +
(params.models?.join(', ') || '') +
'</span>'
: '',
align: 'left'
@@ -276,7 +276,7 @@
<!-- min-h-[302px] min-h-[602px] min-h-[902px] min-h-[1202px] -->
<div
class="container-wrapper relative -mx-6 md:mx-0 min-h-[{300 * ($params.hourly?.length || 0) +
class="container-wrapper relative -mx-6 md:mx-0 min-h-[{300 * (params.hourly?.length || 0) +
2}px]"
>
<div in:fade={{ duration: 300 }} out:fade={{ duration: 300 }} bind:this={node}></div>
@@ -311,7 +311,7 @@
name="Show legend"
bind:checked={showLegend}
onCheckedChange={() => {
$params.hourly = $params.hourly;
params.hourly = params.hourly;
}}
/>
<Label for="show_legend" class="mb-[2px] cursor-pointer text-lg">Show legend</Label>
@@ -322,7 +322,7 @@
name="Average only"
bind:checked={averageOnly}
onCheckedChange={() => {
$params.hourly = $params.hourly;
params.hourly = params.hourly;
}}
/>
<Label for="average_only" class="mb-[2px] cursor-pointer text-lg">Average only</Label>
src/routes/weather/14-day/options.ts
+1 -27
View File
@@ -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',
src/routes/weather/compare/+page.svelte
+25 -26
View File
@@ -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 <span class="font-bold">${$params.hourly?.join(', ') || ''}</span> in models: <span class="font-bold">` +
($params.models?.join(', ') || '') +
? `Compare <span class="font-bold">${params.hourly?.join(', ') || ''}</span> in models: <span class="font-bold">` +
(params.models?.join(', ') || '') +
'</span>'
: '',
align: 'left'
@@ -277,7 +276,7 @@
<!-- min-h-[302px] min-h-[602px] min-h-[902px] min-h-[1202px] -->
<div
class="container-wrapper relative -mx-6 md:mx-0 min-h-[{300 * ($params.hourly?.length || 0) +
class="container-wrapper relative -mx-6 md:mx-0 min-h-[{300 * (params.hourly?.length || 0) +
2}px]"
>
<div in:fade={{ duration: 300 }} out:fade={{ duration: 300 }} bind:this={node}></div>
@@ -312,7 +311,7 @@
name="Show legend"
bind:checked={showLegend}
onCheckedChange={() => {
$params.hourly = $params.hourly;
params.hourly = params.hourly;
}}
/>
<Label for="show_legend" class="mb-[2px] cursor-pointer text-lg">Show legend</Label>
@@ -323,7 +322,7 @@
name="Average only"
bind:checked={averageOnly}
onCheckedChange={() => {
$params.hourly = $params.hourly;
params.hourly = params.hourly;
}}
/>
<Label for="average_only" class="mb-[2px] cursor-pointer text-lg">Average only</Label>
@@ -334,12 +333,12 @@
<div class="mt-4 md:mt-8">
<div class="flex">
<a href="#models"><h2 id="models" class="text-2xl md:text-3xl">Models</h2></a>
{#if $params.models && $params.models.length > 0}
{#if params.models && params.models.length > 0}
<div transition:fade={{ duration: 200 }} class="relative mt-[5px]">
<div
class="absolute -top-1 ml-2 rounded-full border-2 border-foreground/25 bg-secondary px-3 py-1 text-sm no-underline"
>
{$params.models?.length || 0}&nbsp;/&nbsp;{models.flat().length}
{params.models?.length || 0}&nbsp;/&nbsp;{models.flat().length}
</div>
</div>
{/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
</h2></a
>
{#if $params.hourly && $params.hourly.length > 0}
{#if params.hourly && params.hourly.length > 0}
<div transition:fade={{ duration: 200 }} class="relative mt-[5px]">
<div
class="absolute -top-1 ml-2 rounded-full border-2 border-foreground/25 bg-secondary px-3 py-1 text-sm no-underline"
>
{$params.hourly?.length || 0}&nbsp;/&nbsp;{hourly.flat().length}
{params.hourly?.length || 0}&nbsp;/&nbsp;{hourly.flat().length}
</div>
</div>
{/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;
}
}}
/>
src/routes/weather/compare/options.ts
+1 -27
View File
@@ -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',
src/routes/weather/week/[location]/+page.svelte
+24 -25
View File
@@ -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]);
//
</script>
@@ -349,17 +348,17 @@
</div>
<div
class="weather-temp-max flex min-w-[65px] justify-center rounded-t p-1 text-sm"
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'}`}
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'}
</div>
<div
class="weather-temp-min flex min-w-[65px] justify-center rounded-b p-1 text-sm"
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'}`}
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'}
</div>
<div class="mt-2 flex items-center justify-center gap-1">
<div class="relative flex h-6 w-6 items-center justify-center">
@@ -388,7 +387,7 @@
</div>
{Number(wd.daily.precipitation_sum.values(index)).toFixed(
1
)}{$params.precipitation_unit === 'mm' ? 'mm' : "'"}
)}{params.precipitation_unit === 'mm' ? 'mm' : "'"}
</div>
</div>
</button>
@@ -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 @@
<div>
<div class="mt-6 flex gap-6 md:mt-12">
<div class="relative w-1/2">
{#if $params.models && $params.models.length > 0}
{@const modelValue = $params.models[0]}
{#if params.models && params.models.length > 0}
{@const modelValue = params.models[0]}
<Select.Root
name="model_selection"
type="single"
value={modelValue}
onValueChange={(val) => {
if ($params.models && val) {
$params.models = [val];
if (params.models && val) {
params.models = [val];
}
}}
>