Focus Brīdinājumi on one selected warning with templated titles

web/src/pages/warnings/Warnings.tsx

@@ -32,6 +32,8 @@ export function Warnings() {
         const phenomenonMatches = phenomenon() === 'all' || warning.phenomenon === phenomenon();
         return dateMatches && phenomenonMatches;
     }));
+    const [selectedId, setSelectedId] = createSignal<string>();
+    const selectedWarning = createMemo(() => filteredWarnings().find(item => item.id === selectedId()));
 
     const loadArtwork = () => {
         const current = template();
@@ -50,16 +52,24 @@ export function Warnings() {
     };
 
     createEffect(() => { output(); loadArtwork(); });
+    createEffect(() => {
+        const list = filteredWarnings();
+        if (!list.some(item => item.id === selectedId())) setSelectedId(list[0]?.id);
+    });
+    createEffect(() => {
+        const warning = selectedWarning();
+        setTitle(warning ? defaultTitle(warning.phenomenon) : '');
+    });
     createEffect(() => {
         const images = artwork();
         const current = template();
-        const warnings = filteredWarnings();
+        const warning = selectedWarning();
         const currentTitle = title();
         if (!canvas || !images) return;
         if (canvas.width !== current.width) canvas.width = current.width;
         if (canvas.height !== current.height) canvas.height = current.height;
         void document.fonts.load(`700 ${current.title.fontSize}px Monda`).then(() =>
-            drawWarningMap(canvas.getContext('2d')!, images.background, images.border, current, warnings, currentTitle),
+            drawWarningMap(canvas.getContext('2d')!, images.background, images.border, current, warning, currentTitle),
         );
     });
 
@@ -67,7 +77,7 @@ export function Warnings() {
 
     return <section class="pageWorkspace warningsPage">
         <div class="pageHeading warningsHeading">
-            <div><span class="eyebrow">ĒTERA GRAFIKA</span><h1>Brīdinājumi</h1><p>Aktuālie LVĢMC brīdinājumu poligoni un manuāli ievadāms virsraksts.</p></div>
+            <div><span class="eyebrow">ĒTERA GRAFIKA</span><h1>Brīdinājumi</h1><p>Izvēlies vienu LVĢMC brīdinājumu, kas jārāda kartē; virsraksts aizpildās automātiski.</p></div>
             <span class="selectionCount">{filteredWarnings().length} {filteredWarnings().length === 1 ? 'brīdinājums' : 'brīdinājumi'}</span>
         </div>
 
@@ -79,7 +89,7 @@ export function Warnings() {
             <div class="warningFilters"><h2>2. Izvēlies brīdinājumu</h2><div class="warningFilterGrid">
                 <label><span>Diena</span><select value={selectedDate()} onChange={event => setSelectedDate(event.currentTarget.value)}><option value="all">Viss periods</option><For each={availableDates()}>{date => <option value={date}>{formatDate(date)}</option>}</For></select></label>
                 <label><span>Parādība</span><select value={phenomenon()} onChange={event => setPhenomenon(event.currentTarget.value)}><option value="all">Visas parādības</option><For each={phenomena()}>{item => <option value={item}>{item}</option>}</For></select></label>
-                <label class="warningTitle"><span>Virsraksts</span><input type="text" value={title()} placeholder="BRĪDINĀJUMS PAR STIPRU VĒJU" onInput={event => setTitle(event.currentTarget.value)} /></label>
+                <label class="warningTitle"><span>Virsraksts</span><input type="text" value={title()} placeholder="Brīdinājums: vējš" onInput={event => setTitle(event.currentTarget.value)} /></label>
             </div></div>
         </section>
 
@@ -87,12 +97,27 @@ export function Warnings() {
         <Show when={data.error}><div class="inlineNotice error"><strong>Brīdinājumu datus neizdevās ielādēt.</strong><button class="secondary" onClick={() => refetch()}>Mēģināt vēlreiz</button></div></Show>
         <Show when={!data.loading && !data.error && filteredWarnings().length === 0}><div class="inlineNotice">Izvēlētajam periodam nav aktīvu brīdinājumu. Karti joprojām var priekšskatīt, bet tajā nebūs iekrāsotu teritoriju.</div></Show>
 
-        <Show when={filteredWarnings().length > 0}><div class="warningSummary"><For each={filteredWarnings()}>{warning => <article class={`warningCard ${warningSeverity(warning.intensity)}`}><strong>{warning.phenomenon || 'Brīdinājums'}</strong><span>{warning.intensity} · {warning.regions}</span><small>{formatPeriod(warning.validFrom, warning.validUntil)}</small></article>}</For></div></Show>
+        <Show when={filteredWarnings().length > 0}><div class="warningSummary"><For each={filteredWarnings()}>{warning => {
+            const active = () => warning.id === selectedId();
+            return <button type="button" class={`warningCard ${warningSeverity(warning.intensity)}`} classList={{ active: active() }} aria-pressed={active()} onClick={() => setSelectedId(warning.id)}>
+                <strong>{warning.phenomenon || 'Brīdinājums'}</strong>
+                <Show when={active()}><div class="warningCardDetails">
+                    <span>{warning.intensity} · {warning.regions}</span>
+                    <small>{formatPeriod(warning.validFrom, warning.validUntil)}</small>
+                    <Show when={warning.description}><p>{warning.description}</p></Show>
+                    <Show when={warning.risks}><p class="warningRisks">{warning.risks}</p></Show>
+                </div></Show>
+            </button>;
+        }}</For></div></Show>
 
         <section class="warningsPreview"><div class="mapToolbar"><div><strong>3. Kartes priekšskatījums</strong><span>{template().width} × {template().height} px eksports</span></div><button class="primary" disabled={data.loading || Boolean(data.error)} onClick={downloadPng}>Lejupielādēt PNG</button></div><div class="canvasFrame"><canvas ref={canvas} width={template().width} height={template().height}/></div></section>
     </section>;
 }
 
+function defaultTitle(phenomenon: string) {
+    return phenomenon ? `Brīdinājums: ${phenomenon}` : '';
+}
+
 function datePart(value: string) {
     const match = value.trim().match(/^(\d{4}-\d{2}-\d{2})/);
     return match?.[1];