Build fixed Faktiska production workflow
This commit is contained in:
b0txec
@@ -1,54 +1,93 @@
|
||||
import moment from "moment";
|
||||
import { createResource, createSignal, Show } from "solid-js";
|
||||
import { SelectCity } from "../../components/SelectCity";
|
||||
import { SelectTimeRange } from "../../components/SelectTimeRange";
|
||||
import { createEffect, createResource, createSignal, For, Show } from "solid-js";
|
||||
import { MapView } from "../../components/map/MapView";
|
||||
import { MapResolution } from "../../components/map/mapConsts";
|
||||
import { FETCH_DELAY_MS, apiHost, ResultKeyVal } from "../../consts";
|
||||
import { isQueryResult, QueryResult } from "../cities/helpers";
|
||||
import { apiHost, ResultKeyVal } from "../../consts";
|
||||
import { LoadingSpinner } from "../../components/spinner/LoadingSpinner";
|
||||
import { faktiskaExport, faktiskaStations, FaktiskaStation } from "./faktiskaConfig";
|
||||
import "./mapGraphics.css";
|
||||
|
||||
export function Faktiska() {
|
||||
const now = new Date(new Date().setMinutes(30));
|
||||
const [cities, setCities] = createSignal<Set<string>>(new Set());
|
||||
const [start, setStart] = createSignal(moment(now).subtract(1, "day").toDate());
|
||||
const [end, setEnd] = createSignal(now);
|
||||
const [field, setField] = createSignal("tempMax");
|
||||
const [key, setKey] = createSignal("max");
|
||||
const [resolution, setResolution] = createSignal<"1920x1080" | "3840x1440">("1920x1080");
|
||||
const [wind, setWind] = createSignal(false);
|
||||
const [trigger, setTrigger] = createSignal(0);
|
||||
type LatestTemperature = { city: FaktiskaStation; observedAt: string; value: number | null };
|
||||
|
||||
const fetchData = async () => {
|
||||
if (!cities().size) return undefined;
|
||||
await new Promise(resolve => setTimeout(resolve, FETCH_DELAY_MS));
|
||||
const cityPath = [...cities()].join(",");
|
||||
const range = `${moment(start()).format("YYYYMMDD_HHmm")}-${moment(end()).format("YYYYMMDD_HHmm")}`;
|
||||
const response = await fetch(`${apiHost}/api/query/city/${cityPath}/${range}/hour/${field()}/${key()}`);
|
||||
if (!response.ok) throw new Error(`Query failed (${response.status})`);
|
||||
const emptyValues = (): Record<FaktiskaStation, string> =>
|
||||
Object.fromEntries(faktiskaStations.map(city => [city, ""])) as Record<FaktiskaStation, string>;
|
||||
|
||||
export function Faktiska() {
|
||||
const [values, setValues] = createSignal(emptyValues());
|
||||
const [overrides, setOverrides] = createSignal<Set<FaktiskaStation>>(new Set());
|
||||
|
||||
const fetchLatest = async (): Promise<LatestTemperature[]> => {
|
||||
const response = await fetch(`${apiHost}/api/query/latest-temperatures/${faktiskaStations.join(",")}`);
|
||||
if (!response.ok) throw new Error(`Latest observations failed (${response.status})`);
|
||||
return response.json();
|
||||
};
|
||||
const [result] = createResource(trigger, fetchData);
|
||||
const mapType = (): MapResolution => `map_${resolution()}${wind() ? "_wind" : ""}` as MapResolution;
|
||||
const cityData = (): ResultKeyVal[] => Object.entries((result() as QueryResult).result).map(([city, value]) => [city, typeof value === "number" ? value : -99]);
|
||||
const [latest, { refetch }] = createResource(fetchLatest);
|
||||
|
||||
return <div class="mapGraphicsPage pageWorkspace">
|
||||
<div class="pageHeading"><div><span class="eyebrow">Daily newsroom production</span><h1>Faktiskā</h1><p>Create the actual-weather map with temperatures and weather symbols.</p></div><div class="selectionCount">{cities().size} cities selected</div></div>
|
||||
<div class="graphicsSetup">
|
||||
<aside class="cityPanel workspaceRail"><h2>1. Choose cities</h2><SelectCity getCities={cities} setCities={setCities}/></aside>
|
||||
<section class="graphicsMain">
|
||||
<div class="productionToolbar">
|
||||
<div class="productionOptions"><h2>2. Choose output</h2>
|
||||
<div class="choiceGroup"><span>Output</span><div><button classList={{active: resolution() === "1920x1080"}} onClick={() => setResolution("1920x1080")}>1920 × 1080</button><button classList={{active: resolution() === "3840x1440"}} onClick={() => setResolution("3840x1440")}>3840 × 1440</button><label class="windChoice"><input type="checkbox" checked={wind()} onChange={e => setWind(e.target.checked)}/> Wind layout</label></div></div>
|
||||
</div>
|
||||
<div class="dataOptions"><h2>3. Retrieve temperatures</h2><div class="dataOptionsGrid"><SelectTimeRange getStart={start} setStart={setStart} getEnd={end} setEnd={setEnd}/><label><span>Temperature field</span><select value={field()} onChange={e => setField(e.target.value)}><option value="tempMax">Maximum temperature</option><option value="tempMin">Minimum temperature</option><option value="tempAvg">Average temperature</option></select></label><label><span>Calculation</span><select value={key()} onChange={e => setKey(e.target.value)}><option value="max">Maximum</option><option value="min">Minimum</option><option value="avg">Average</option></select></label><button class="primary loadMapButton" disabled={!cities().size} onClick={() => setTrigger(Date.now())}>Load map data</button></div></div>
|
||||
</div>
|
||||
<Show when={result.loading}><LoadingSpinner text="Loading map data"/></Show>
|
||||
<Show when={result.error}><div class="emptyState"><strong>Could not load map data</strong><span>{result.error.message}</span></div></Show>
|
||||
<Show when={result() && isQueryResult(result())}><section class="mapProduction"><h2>4. Add conditions and export</h2><MapView type={mapType()} data={cityData} mode="faktiska"/></section></Show>
|
||||
<Show when={!result() && !result.loading && !result.error}><div class="emptyState"><strong>Choose cities and load data</strong><span>The production controls and map preview will appear here.</span></div></Show>
|
||||
</section>
|
||||
createEffect(() => {
|
||||
const observations = latest();
|
||||
if (!observations) return;
|
||||
const next = emptyValues();
|
||||
observations.forEach(observation => {
|
||||
next[observation.city] = observation.value == null ? "" : observation.value.toString();
|
||||
});
|
||||
setValues(next);
|
||||
setOverrides(new Set());
|
||||
});
|
||||
|
||||
const observationsByCity = () => new Map((latest() ?? []).map(item => [item.city, item]));
|
||||
const newestTimestamp = () => {
|
||||
const timestamps = (latest() ?? []).map(item => Date.parse(item.observedAt)).filter(Number.isFinite);
|
||||
return timestamps.length ? new Date(Math.max(...timestamps)) : undefined;
|
||||
};
|
||||
const isStale = (city: FaktiskaStation) => {
|
||||
const newest = newestTimestamp();
|
||||
const observed = observationsByCity().get(city)?.observedAt;
|
||||
return Boolean(newest && observed && newest.getTime() - Date.parse(observed) > 90 * 60 * 1000);
|
||||
};
|
||||
const cityData = (): ResultKeyVal[] => faktiskaStations.flatMap(city => {
|
||||
const value = Number(values()[city].replace(",", "."));
|
||||
return values()[city].trim() && Number.isFinite(value) ? [[city, value] as ResultKeyVal] : [];
|
||||
});
|
||||
const updateValue = (city: FaktiskaStation, value: string) => {
|
||||
setValues(current => ({ ...current, [city]: value }));
|
||||
setOverrides(current => new Set(current).add(city));
|
||||
};
|
||||
const resetValue = (city: FaktiskaStation) => {
|
||||
const observation = observationsByCity().get(city);
|
||||
setValues(current => ({ ...current, [city]: observation?.value == null ? "" : observation.value.toString() }));
|
||||
setOverrides(current => {
|
||||
const next = new Set(current);
|
||||
next.delete(city);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
return <div class="mapGraphicsPage pageWorkspace faktiskaWorkspace">
|
||||
<div class="pageHeading">
|
||||
<div><span class="eyebrow">Daily newsroom production</span><h1>Faktiskā</h1><p>Current temperatures with manually prepared weather symbols and wind.</p></div>
|
||||
<div class="productionSize">{faktiskaExport.width} × {faktiskaExport.height} PNG</div>
|
||||
</div>
|
||||
|
||||
<section class="faktiskaDataBand">
|
||||
<div class="faktiskaStatus">
|
||||
<div><span class="stepLabel">1. Latest temperatures</span><strong>{newestTimestamp() ? newestTimestamp()!.toLocaleString("lv-LV") : "Waiting for observations"}</strong><small>Newest available reading in the configured station set</small></div>
|
||||
<button class="secondary" disabled={latest.loading} onClick={() => refetch()}>Refresh data</button>
|
||||
</div>
|
||||
<Show when={latest.loading}><LoadingSpinner text="Loading latest temperatures"/></Show>
|
||||
<Show when={latest.error}><div class="inlineNotice error"><strong>Could not load observations.</strong> Existing manual fields remain available.</div></Show>
|
||||
<div class="temperatureEditor">
|
||||
<For each={faktiskaStations}>{city => {
|
||||
const observation = () => observationsByCity().get(city);
|
||||
return <label class="temperatureField" classList={{manual: overrides().has(city), stale: isStale(city), missing: observation()?.value == null}}>
|
||||
<span class="temperatureFieldHeading"><strong>{city}</strong><small>{overrides().has(city) ? "Manual" : isStale(city) ? "Older reading" : observation()?.observedAt ? new Date(observation()!.observedAt).toLocaleTimeString("lv-LV", {hour:"2-digit", minute:"2-digit"}) : "No data"}</small></span>
|
||||
<span class="temperatureInput"><input type="text" inputmode="decimal" value={values()[city]} onInput={event => updateValue(city, event.currentTarget.value)} aria-label={`${city} temperature`}/><span>°C</span></span>
|
||||
<button type="button" class="resetTemperature" disabled={!overrides().has(city)} onClick={() => resetValue(city)}>Reset</button>
|
||||
</label>;
|
||||
}}</For>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mapProduction faktiskaProduction">
|
||||
<h2>2. Add weather symbols and wind, then export</h2>
|
||||
<MapView type={faktiskaExport.mapType} data={cityData} mode="faktiska" productionTemplate/>
|
||||
</section>
|
||||
</div>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user