/* Variation A — "Briefing": weather-app DNA, soft & generous. window.CardBriefing */
(function () {
const { useState, useEffect } = React;
const AV = window.AV;
/* ---- Reorderable "islands" (the aerodrome cards) ----
A single global order, persisted in localStorage, applied to every airport.
Unknown/new island ids are appended so nothing ever disappears after an update.
The order + edit-mode live in a tiny shared store so a reorder on the centre
carousel page shows up on its neighbours too (all three are mounted at once). */
const ISLAND_IDS = ['metar', 'ipma_ema', 'taf', 'synthetic', 'nearest', 'wind', 'runways', 'notams'];
const ISLAND_LABEL = {
metar: 'METAR',
ipma_ema: 'IPMA EMA',
taf: 'TAF',
synthetic: 'Airfield Outlook (SAO)',
nearest: 'Nearest Station',
wind: 'Wind outlook',
runways: 'Runways',
notams: 'NOTAMs',
};
function loadIslandOrder() {
try {
const saved = JSON.parse(localStorage.getItem('av_island_order') || 'null');
if (Array.isArray(saved) && saved.length) {
const known = saved.filter(id => ISLAND_IDS.includes(id));
const missing = ISLAND_IDS.filter(id => !known.includes(id));
if (known.length) return [...known, ...missing];
}
} catch (e) {}
return ISLAND_IDS.slice();
}
const layoutStore = { order: loadIslandOrder(), editing: false, subs: new Set() };
const emitLayout = () => layoutStore.subs.forEach(fn => fn());
function setIslandOrder(next) {
layoutStore.order = next;
try { localStorage.setItem('av_island_order', JSON.stringify(next)); } catch (e) {}
emitLayout();
}
function setLayoutEditing(v) { layoutStore.editing = v; emitLayout(); }
function useLayoutStore() {
const [, force] = useState(0);
useEffect(() => {
const fn = () => force(x => x + 1);
layoutStore.subs.add(fn);
return () => { layoutStore.subs.delete(fn); };
}, []);
return layoutStore;
}
// Swap an island with its neighbour among the currently-visible islands, but write
// the swap into the FULL order array so hidden islands keep their relative place.
function moveIsland(order, visibleIds, id, dir) {
const vi = visibleIds.indexOf(id);
const tj = vi + dir;
if (vi < 0 || tj < 0 || tj >= visibleIds.length) return order;
const otherId = visibleIds[tj];
const a = order.slice();
const i1 = a.indexOf(id), i2 = a.indexOf(otherId);
if (i1 < 0 || i2 < 0) return order;
const tmp = a[i1]; a[i1] = a[i2]; a[i2] = tmp;
return a;
}
function RawToggle({ raw, setRaw, t }) {
const opt = (active, label, on) => (
{label}
);
return (
{opt(!raw, 'Decoded', () => setRaw(false))}
{opt(raw, 'Raw', () => setRaw(true))}
);
}
function Card({ t, children, style }) {
return {children}
;
}
function SectionTitle({ t, badge, title, meta }) {
return (
{badge}
{title}
{meta && {meta} }
);
}
function Metric({ t, icon, label, value, sub }) {
return (
{window.Icon[icon]({ size: 15, color: t.textDim, stroke: 1.9 })}
{label}
{value}{sub && {sub} }
);
}
function NotamRow({ t, n, last }) {
const [open, setOpen] = useState(false);
const sevColor = n.sev === 'caution' ? '#f5a623' : t.textDim;
return (
setOpen(o => !o)} style={{ all: 'unset', cursor: 'pointer', display: 'flex',
gap: 11, width: '100%', alignItems: 'flex-start' }}>
{n.id}
{n.from} → {n.to}
{n.summary}
{open && {n.raw}
}
);
}
function NotamCard({ ap, t }) {
const notams = ap.notams || [];
const [expanded, setExpanded] = useState(false);
if (!notams.length) {
return (
No active NOTAMs reported for this aerodrome.
);
}
// Prioritize caution/warning NOTAMs first
const sorted = [...notams].sort((a, b) => {
if (a.sev === 'caution' && b.sev !== 'caution') return -1;
if (b.sev === 'caution' && a.sev !== 'caution') return 1;
return 0;
});
const PREVIEW_LIMIT = 3;
const hasMore = sorted.length > PREVIEW_LIMIT;
const displayed = expanded ? sorted : sorted.slice(0, PREVIEW_LIMIT);
const cautionCount = sorted.filter(n => n.sev === 'caution').length;
const metaText = cautionCount > 0
? `${cautionCount} caution · ${sorted.length} active`
: `${sorted.length} active`;
return (
{displayed.map((n, i) => (
{hasMore && (
setExpanded(v => !v)}
style={{
all: 'unset',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: 6,
width: '100%',
boxSizing: 'border-box',
marginTop: 10,
padding: '10px 14px',
borderRadius: 12,
background: t.inset,
font: `600 13px ${t.body}`,
color: t.accent,
transition: 'background .15s',
}}
>
{expanded ? 'Show top 3 only' : `Show all ${sorted.length} NOTAMs (${sorted.length - PREVIEW_LIMIT} more)`}
{window.Icon.chevDown({ size: 14, color: t.accent, stroke: 2.5 })}
)}
);
}
// 24-hour hourly wind outlook data (Open-Meteo via backend), cached on device.
// Hoisted out of the card so the parent can tell whether the wind island exists
// (needed to gate the reorder controls) before the card decides to render.
function useWindHours(icao) {
const [hours, setHours] = useState(() => {
try { const c = JSON.parse(localStorage.getItem('av_forecast_cache') || '{}')[icao]; return (c && c.hours) || null; } catch (e) { return null; }
});
useEffect(() => {
let alive = true;
// Show this airport's cached hours right away — don't bleed the previous one.
try { const c = JSON.parse(localStorage.getItem('av_forecast_cache') || '{}')[icao]; setHours((c && c.hours) || null); } catch (e) { setHours(null); }
fetch(`${AV.apiBase()}/api/forecast/${icao}`)
.then(r => r.json())
.then(d => {
if (!alive || !d || d.error || !Array.isArray(d.hours)) return;
setHours(d.hours);
try {
const all = JSON.parse(localStorage.getItem('av_forecast_cache') || '{}');
all[icao] = { ts: Date.now(), hours: d.hours };
localStorage.setItem('av_forecast_cache', JSON.stringify(all));
} catch (e) {}
})
.catch(() => {});
return () => { alive = false; };
}, [icao]);
return hours;
}
function WindForecast({ hours, t }) {
if (!hours || !hours.length) return null;
const hh = (ts) => String(new Date(ts * 1000).getUTCHours()).padStart(2, '0') + 'Z';
const touchRef = React.useRef({ x: 0, y: 0, locked: null });
const onTouchStart = (e) => {
const p = e.touches ? e.touches[0] : e;
touchRef.current = { x: p.clientX, y: p.clientY, locked: null };
};
const onTouchMove = (e) => {
const tr = touchRef.current;
if (!tr) return;
const p = e.touches ? e.touches[0] : e;
const dx = Math.abs(p.clientX - tr.x);
const dy = Math.abs(p.clientY - tr.y);
if (tr.locked === null && (dx > 6 || dy > 6)) {
tr.locked = dx > dy ? 'h' : 'v';
}
if (tr.locked === 'h') {
// Horizontal scroll inside wind forecast: stop propagation so carousel doesn't switch airports
e.stopPropagation();
}
// If locked === 'v', do NOT stop propagation! Native vertical page scrolling works smoothly!
};
return (
{hours.map((h, i) => (
{hh(h.t)}
{String(h.dir).padStart(3, '0')}°
{AV.convWindVal(h.spd)}
{h.gust ? `G${AV.convWindVal(h.gust)}` : '–'}
))}
);
}
// Head/cross-wind components for a runway heading (true) vs wind (true).
// angle +ve = wind from the right; head +ve = headwind, -ve = tailwind.
function windComponents(rwyHdg, windDir, windSpd) {
const a = ((((windDir - rwyHdg) % 360) + 540) % 360) - 180;
const rad = a * Math.PI / 180;
return { head: windSpd * Math.cos(rad), cross: windSpd * Math.sin(rad), angle: a };
}
// Small dial: runway as a vertical bar (favoured end up) + wind arrow drawn at
// its bearing relative to the runway.
function RunwayGlyph({ angle, calm, t }) {
const size = 46;
const arrow = t.accent || '#0a84ff';
return (
)}
);
}
// Runways card: per-runway head/cross-wind, favoured runway highlighted.
function RunwayCard({ ap, t }) {
const activeWind = ap.metar?.wind || ap.ipmaEma?.wind || ap.nearestStation?.metar?.wind;
if (!activeWind || !ap.runways || !ap.runways.length) return null;
const w = activeWind || { dir: 0, spd: 0 };
const calm = !w.spd;
const rows = ap.runways.map(r => {
const rObj = typeof r === 'string' ? {
name: r,
ends: r.split('/').map(id => ({ id, hdg: parseInt(id.replace(/\D/g, ''), 10) * 10 }))
} : (r && r.ends ? r : {
...r,
ends: ((r && r.name) || '').split('/').map(id => ({ id, hdg: parseInt(id.replace(/\D/g, ''), 10) * 10 }))
});
let best = null;
(rObj.ends || []).forEach(e => {
const c = windComponents(e.hdg, w.dir, w.spd || 0);
if (!best || c.head > best.head) best = { ...c, end: e };
});
return { r: rObj, best };
}).filter(row => row.best);
if (!rows.length) return null;
let favIdx = 0;
rows.forEach((row, i) => { if (row.best.head > rows[favIdx].best.head) favIdx = i; });
return (
{rows.map((row, i) => {
const head = Math.round(row.best.head);
const cross = Math.round(row.best.cross);
const xmag = Math.abs(cross);
const side = cross >= 0 ? 'R' : 'L';
const fav = i === favIdx && !calm;
const xColor = xmag >= 25 ? '#ff453a' : xmag >= 15 ? '#e5901a' : t.text;
return (
{row.best.end.id}
{row.r.name}{row.r.len ? ` · ${row.r.len.toLocaleString()}ft` : ''}
{fav && FAVOURED }
{calm ? (
Calm — any runway
) : (
{head < 0 ? 'Tail' : 'Head'} {AV.convWindVal(Math.abs(head))} {AV.windUnit()}
⊗ {AV.convWindVal(xmag)} {AV.windUnit()}{xmag > 0 ? ' ' + side : ''}
)}
);
})}
);
}
function getEmaData(ap) {
if (!ap || !ap.icao) return null;
const isOfficial = window.AV?.isOfficialStation ? window.AV.isOfficialStation(ap.icao) : false;
if (isOfficial) return null; // Certified stations NEVER show IPMA EMA
if (ap.ipmaEma) return ap.ipmaEma;
const o = ap.syntheticTaf && ap.syntheticTaf.obs;
if (o && o.temp_c != null) {
return {
raw: (ap.metar && ap.metarSource === 'IPMA') ? ap.metar.raw : `${ap.icao} IPMA EMA`,
time: o.obs_time_utc ? o.obs_time_utc.slice(-5) + 'Z' : (ap.metar ? ap.metar.time : '—'),
stationName: o.station_name || null,
distKm: o.distance_km != null ? Math.round(o.distance_km) : null,
wind: { dir: o.wind_dir_deg != null ? o.wind_dir_deg : 0, spd: Math.round(o.wind_kt || 0), gust: null },
temp: Math.round(o.temp_c),
dew: o.dewp_c != null ? Math.round(o.dewp_c) : '—',
qnh: o.pressure_hpa != null ? Math.round(o.pressure_hpa) : '—',
};
}
if (ap.metarSource === 'IPMA' && ap.metar) {
return {
raw: ap.metar.raw,
time: ap.metar.time,
stationName: null,
distKm: null,
wind: ap.metar.wind || { dir: 0, spd: 0, gust: null },
temp: ap.metar.temp,
dew: ap.metar.dew,
qnh: ap.metar.qnh,
};
}
return null;
}
// IPMA EMA observation card (Portuguese aerodromes with automatic surface station).
function IpmaEmaCard({ ap, t, raw }) {
if (!ap || !ap.icao) return null;
const isOfficial = window.AV?.isOfficialStation ? window.AV.isOfficialStation(ap.icao) : false;
if (isOfficial) return null;
const ema = getEmaData(ap);
if (!ema) return null;
const [showNote, setShowNote] = useState(false);
const titleMeta = ema.time && ema.time !== '—' ? `OBS ${ema.time}` : 'AUTOMATIC';
return (
Surface observation from IPMA automatic weather station{ema.stationName ? <> · {ema.stationName} : ''}{ema.distKm != null ? ` · ${ema.distKm} km away` : ''}
{raw ? (
{ema.raw}
) : (
Automatic station (no cloud ceiling or visibility sensors).
)}
setShowNote(v => !v)} role="button"
style={{ display: 'flex', gap: 8, marginTop: 14, padding: '9px 12px', borderRadius: 12, cursor: 'pointer',
background: t.dark ? 'rgba(52,199,89,0.12)' : 'rgba(52,199,89,0.08)', border: '1px solid rgba(52,199,89,0.22)' }}>
{window.Icon.bell({ size: 15, stroke: 2.2 })}
Automatic station (EMA).
{showNote && <> Not an official aviation METAR. Surface observation provided by IPMA for general meteorological monitoring.}
{showNote ? 'Less' : 'More'}
);
}
// Nearest official reporting station (METAR + TAF).
function NearestStationCard({ ap, t, raw }) {
const ns = ap.nearestStation;
if (!ns || (!ns.metar && !ns.taf)) return null;
const nm = ns.metar;
const ntf = ns.taf;
const cat = AV.cat(ns.category);
const cloudText = nm && nm.clouds ? nm.clouds.map(c => c.base ? `${c.cover} ${c.base.toLocaleString()}ft` : c.cover).join(' · ') : '';
return (
📍
Nearest Station · {ns.icao}
{cat.label}
Closest official reporting airport: {ns.name} {ns.city ? ` (${ns.city})` : ''} · {ns.distKm} km away
{/* Nearest METAR */}
{nm && (
METAR ({ns.icao})
OBS {nm.time}
{raw ? (
{nm.raw}
) : (
)}
)}
{/* Nearest TAF */}
{ntf && (
TAF ({ns.icao})
ISS {ntf.issued}
{raw ? (
{ntf.raw}
) : (
Valid {ntf.valid}
{ntf.periods && ntf.periods.map((p, i) => (
{p.label}
{p.text}
{p.wind}
))}
)}
)}
);
}
// Advisory model-generated Synthetic Airfield Outlook for aerodromes with no official station.
function SyntheticTafCard({ ap, t }) {
if (!ap || !ap.icao) return null;
const isOfficial = window.AV?.isOfficialStation ? window.AV.isOfficialStation(ap.icao) : false;
if (isOfficial) return null;
const s = ap.syntheticTaf;
const [showNote, setShowNote] = useState(false);
if (!s) return null;
const rawSao = (s.raw || s.taf || '').replace(/\bTAF\b/gi, 'SAO').trim();
if (!rawSao) return null;
const o = s.obs || {};
const amber = '#e5901a';
return (
Model forecast for {ap.icao}{o.station_name ? ` · neighbour obs: ${o.station_name}` : (s.station ? ` · neighbour obs: ${s.station}` : '')}.
{rawSao}
setShowNote(v => !v)} role="button"
style={{ display: 'flex', gap: 8, marginTop: 12, padding: '10px 12px', borderRadius: 12, cursor: 'pointer',
background: t.dark ? 'rgba(245,166,35,0.16)' : 'rgba(245,166,35,0.12)', border: '1px solid rgba(245,166,35,0.28)' }}>
{window.Icon.bell({ size: 16, stroke: 2.2 })}
Synthetic Airfield Outlook (SAO) — advisory only, not an official ICAO forecast. Not for flight decisions.
{showNote && <> {(s.advisory || 'Computer-generated model forecast for unmonitored sites.').replace(/\bTAF\b/g, 'SAO')} Always verify against official sources before flight.}
{showNote ? 'Less' : 'More'}
);
}
// In "edit layout" mode, prepend each island with a control strip (name + up/down),
// and make the card itself non-interactive so taps don't fire its own buttons.
function IslandWrap({ t, editing, label, canUp, canDown, onUp, onDown, children }) {
if (!editing) return children;
const arrow = (up, enabled, onClick) => (
{window.Icon.chevDown({ size: 18, color: t.text, stroke: 2.6 })}
);
return (
{window.Icon.grip({ size: 17, color: t.textDim })}
{label}
{arrow(true, canUp, onUp)}{arrow(false, canDown, onDown)}
{children}
);
}
function CardBriefing({ ap, t, raw, setRaw }) {
const layout = useLayoutStore();
const windHours = useWindHours(ap.icao);
if (ap.error) {
return (
{window.Icon.x({ size: 32, color: '#ff453a', stroke: 2 })}
Data Unavailable
{ap.networkError
? `Could not connect to the server to fetch data for ${ap.icao}. Please check your internet connection.`
: `No weather data could be found for ${ap.icao}.`}
);
}
if (ap.isLoading) {
return (
Loading {ap.icao}...
);
}
const cat = AV.cat(ap.category);
const emaData = getEmaData(ap);
const activeObs = (ap.metarSource === 'OFFICIAL' && ap.metar) || emaData || ap.metar || (ap.nearestStation && ap.nearestStation.metar);
const hasWx = !!activeObs;
const m = activeObs || { clouds: [], wind: { dir: 0, spd: 0, gust: null }, temp: '—', dew: '—', qnh: '—', vis: '—', summary: 'No reporting station' };
const tint = window.headerTint(ap.category, t.dark);
const cloudText = (m.clouds || []).map(c => c.base ? `${c.cover} ${c.base.toLocaleString()}ft` : c.cover).join(' · ');
const editing = layout.editing;
const order = layout.order;
const isOfficial = window.AV?.isOfficialStation ? window.AV.isOfficialStation(ap.icao) : false;
const hasOfficialMetar = !!(ap.metar && (ap.metarSource === 'OFFICIAL' || isOfficial));
const hasIpma = !isOfficial && !!emaData;
const hasTaf = !!ap.taf;
const hasSynth = !isOfficial && !!(ap.syntheticTaf && (ap.syntheticTaf.raw || ap.syntheticTaf.taf));
const hasNearest = !!(ap.nearestStation && (ap.nearestStation.metar || ap.nearestStation.taf));
// Which islands actually have something to show for this airport.
const visible = {
metar: hasOfficialMetar || (!hasIpma && !hasNearest),
ipma_ema: hasIpma,
taf: hasTaf,
synthetic: hasSynth,
nearest: hasNearest,
wind: !!(windHours && windHours.length),
runways: !!(hasWx && ap.runways && ap.runways.length),
notams: true,
};
const visibleIds = order.filter(id => visible[id]);
const islandNode = (id) => {
switch (id) {
case 'metar': return (
{isOfficial ? 'No current METAR observation reported.' : 'No official METAR station at this aerodrome.'}
) : raw ? (
{ap.metar.raw}
) : (
)}
);
case 'ipma_ema': return
{ap.taf.raw}
) : (
Valid {ap.taf.valid}
{ap.taf.periods && ap.taf.periods.map((p, i) => (
{i < ap.taf.periods.length - 1 &&
}
{p.label}
{p.text}
{p.wind}
))}
)}
);
case 'synthetic': return
{/* Hero */}
{cat.label} · {cat.name}
{ap.name}
{ap.icao}
· {ap.city}
{emaData && !hasOfficialMetar && !isOfficial && (
⚡ IPMA EMA · {emaData.stationName || 'Automatic station'}{emaData.distKm != null ? ` (${emaData.distKm} km)` : ''}
)}
{typeof m.temp === 'number' ? AV.convTempVal(m.temp) : m.temp}°
{m.summary}
{hasWx
?
:
— }
{ap.windAlert && (
{window.Icon.wind({ size: 14, color: '#e5901a', stroke: 2 })}
WIND ALERT · ≥ 15 kt
)}
{ap.isFallback && ap.nearestStation && (
{window.Icon.bell({ size: 16, stroke: 2.2 })}
Nearest station active. Showing {ap.nearestStation.icao} ({ap.nearestStation.name}){ap.nearestStation.distKm != null ? ` · ${ap.nearestStation.distKm} km away` : ''}.
)}
{/* updated + toggle */}
{window.Icon.refresh({ size: 13, color: t.textDim, stroke: 2 })} Updated {hasWx ? AV.ago(ap.updatedMin) : '—'}
setLayoutEditing(!editing)} title="Edit layout"
style={{ all: 'unset', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 5,
height: 30, padding: editing ? '0 12px' : '0 8px', borderRadius: 999,
background: editing ? t.accent : t.inset, border: editing ? 'none' : `1px solid ${t.line}` }}>
{editing ? (
{window.Icon.check({ size: 15, color: '#fff', stroke: 2.8 })}
Done
) : window.Icon.grip({ size: 18, color: t.textDim })}
{editing && (
{window.Icon.grip({ size: 15, color: t.textDim })}
Reorder your cards with the arrows. The order is saved and applies to every airport.
)}
{/* Islands, in the user's saved order. Hidden ones (no data for this
airport) are skipped; reorder controls appear in edit-layout mode. */}
{order.map(id => {
if (!visible[id]) return null;
const node = islandNode(id);
if (!node) return null;
const vi = visibleIds.indexOf(id);
return (
0} canDown={vi < visibleIds.length - 1}
onUp={() => setIslandOrder(moveIsland(order, visibleIds, id, -1))}
onDown={() => setIslandOrder(moveIsland(order, visibleIds, id, 1))}>
{node}
);
})}