bot/WeatherTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separate Faktiska workflow and refine symbol picker

Browse Source
This commit is contained in:
b0txec
2026-08-18 22:45:14 +03:00
parent ffb89024f1
commit 82199b8a45
7 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/pages/map-graphics/MapGraphics.tsx
+4 -6
View File
@@ -9,14 +9,13 @@ import { isQueryResult, QueryResult } from "../cities/helpers";
import { LoadingSpinner } from "../../components/spinner/LoadingSpinner";
import "./mapGraphics.css";
export function MapGraphics() {
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 [mode, setMode] = createSignal<"temperature" | "faktiska">("faktiska");
const [resolution, setResolution] = createSignal<"1920x1080" | "3840x1440">("1920x1080");
const [wind, setWind] = createSignal(false);
const [trigger, setTrigger] = createSignal(0);
@@ -35,18 +34,17 @@ export function MapGraphics() {
const cityData = (): ResultKeyVal[] => Object.entries((result() as QueryResult).result).map(([city, value]) => [city, typeof value === "number" ? value : -99]);
return <div class="mapGraphicsPage pageWorkspace">
<div class="pageHeading"><div><span class="eyebrow">Newsroom production</span><h1>Map graphics</h1><p>Create a temperature map or Faktiskā weather map and export the finished PNG.</p></div><div class="selectionCount">{cities().size} cities selected</div></div>
<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="panel cityPanel"><h2>1. Choose cities</h2><SelectCity getCities={cities} setCities={setCities}/></aside>
<section class="graphicsMain">
<div class="panel productionOptions"><h2>2. Choose graphic</h2>
<div class="choiceGroup"><span>Graphic type</span><div><button classList={{active: mode() === "temperature"}} onClick={() => setMode("temperature")}>Temperature map<small>Temperatures only</small></button><button classList={{active: mode() === "faktiska"}} onClick={() => setMode("faktiska")}>Faktiskā<small>Temperatures + weather symbols</small></button></div></div>
<div class="panel 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="panel 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></div><button class="primary" disabled={!cities().size} onClick={() => setTrigger(Date.now())}>Load map data</button></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. Finish and export</h2><MapView type={mapType()} data={cityData} mode={mode()}/></section></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>
</div>