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>;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
export const faktiskaStations = [
|
||||
"Liepāja", "Ventspils", "Stende", "Saldus", "Rīga", "Jelgava", "Ainaži",
|
||||
"Valmiera", "Madona", "Alūksne", "Zīlāni", "Daugavpils", "Rēzekne",
|
||||
] as const;
|
||||
|
||||
export type FaktiskaStation = typeof faktiskaStations[number];
|
||||
|
||||
export const faktiskaExport = {
|
||||
width: 3840,
|
||||
height: 1440,
|
||||
mapType: "map_3840x1440_wind" as const,
|
||||
};
|
||||
@@ -32,3 +32,26 @@
|
||||
.dataOptionsGrid{grid-template-columns:1fr}
|
||||
.loadMapButton{justify-self:start}
|
||||
}
|
||||
|
||||
/* Fixed Faktiskā newsroom workflow. The preview is responsive; export geometry is not. */
|
||||
.faktiskaWorkspace{max-width:1900px}
|
||||
.productionSize{padding:10px 14px;border:1px solid rgba(77,130,190,.28);border-radius:10px;background:rgba(255,255,255,.66);font-weight:700}
|
||||
.faktiskaDataBand{padding:2px 0 22px;border-bottom:1px solid rgba(90,126,166,.22)}
|
||||
.faktiskaStatus{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}
|
||||
.faktiskaStatus>div,.faktiskaStatus strong,.faktiskaStatus small{display:block}
|
||||
.faktiskaStatus strong{margin-top:5px;font-size:18px}
|
||||
.faktiskaStatus small{margin-top:3px;color:var(--text-muted)}
|
||||
.stepLabel{font-family:Rubik,sans-serif;font-size:20px;font-weight:700}
|
||||
.temperatureEditor{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:10px}
|
||||
.temperatureField{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"heading reset" "input input";gap:8px;padding:11px 12px;border:1px solid rgba(117,151,190,.28);border-radius:12px;background:rgba(255,255,255,.52);transition:border-color 180ms,background 180ms}
|
||||
.temperatureField.manual{border-color:rgba(36,119,197,.58);background:rgba(229,241,255,.76)}
|
||||
.temperatureField.stale{border-color:rgba(203,138,40,.5)}
|
||||
.temperatureField.missing{border-style:dashed}
|
||||
.temperatureFieldHeading{grid-area:heading;min-width:0}.temperatureFieldHeading strong,.temperatureFieldHeading small{display:block}.temperatureFieldHeading small{margin-top:2px;color:var(--text-muted);font-size:10px}
|
||||
.temperatureInput{grid-area:input;display:flex;align-items:center;gap:7px}.temperatureInput input{width:100%;min-width:0;font-size:19px;font-weight:700}.temperatureInput>span{color:var(--text-muted);font-weight:700}
|
||||
.resetTemperature{grid-area:reset;align-self:start;min-height:0;padding:3px 5px;background:transparent;color:var(--accent-strong);font-family:Inter,sans-serif;font-size:10px}
|
||||
.inlineNotice{margin:10px 0;padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.62)}.inlineNotice.error{color:var(--danger)}
|
||||
.faktiskaProduction{margin-top:20px}.faktiskaProduction>h2{font-size:22px}
|
||||
@media(max-width:1450px){.temperatureEditor{grid-template-columns:repeat(5,minmax(150px,1fr))}}
|
||||
@media(max-width:1050px){.temperatureEditor{grid-template-columns:repeat(3,minmax(150px,1fr))}}
|
||||
@media(max-width:650px){.faktiskaStatus{align-items:flex-start;flex-direction:column}.temperatureEditor{grid-template-columns:1fr 1fr}}
|
||||
|
||||
Reference in New Issue
Block a user