-
Station history
Select a station to load the last 7 days
-
-
Click any station on the map or in the list to see its history
+
Click any station on the map or in the list to see its history
-
- Total datapoints
—
measurements stored
- Date range
—
first to last record
- Days spanned
—
between first and last
- Stations
—
distinct in database
- Coverage
—
of RID hourly slots recorded
+
+ Total datapoints
—
measurements stored
+ Date range
—
first to last record
+ Days spanned
—
between first and last
+ Stations
—
distinct in database
+ Coverage
—
of RID hourly slots recorded
@@ -348,6 +398,454 @@
const state = { map: null, layers: [], markers: new Map(), hasFit: false, historyChart: null, selectedStation: null, historyRequestId: 0, p1Stages: null, p1Now: null, rainLayer: null, useDates: false, forecastExpanded: false };
const $ = (id) => document.getElementById(id);
+ // ---- Localisation -----------------------------------------------------
+ // Thai first: this is a flood warning for people living on this river.
+ // Strings with runtime values are functions; everything else is a literal.
+ // Station names already arrive bilingual from the API and are not translated.
+ const STRINGS = {
+ en: {
+ 'app.title': 'Ping River Live Monitor',
+ 'app.subtitle': 'Current water level and discharge across Northern Thailand',
+ 'pill.live': 'LIVE DATA',
+ 'pill.replay': '⏪ 2024 REPLAY',
+ 'pill.sim': '⚠ SIMULATION',
+ 'action.refresh': '↻ Refresh',
+ 'replay.start': '▶ Replay Oct 2024 flood',
+ 'replay.stop': '⏹ Stop replay',
+ 'replay.loading': 'Loading 2024 data…',
+ 'replay.unavailable': (msg) => `Replay unavailable: ${msg}`,
+ 'loading': 'Loading river conditions…',
+ 'error.map': 'Map data could not be loaded.',
+ 'error.leaflet': 'The map library did not load. Check the internet connection.',
+ 'aria.summary': 'River summary',
+ 'aria.map': 'Interactive map of Ping River monitoring stations',
+ 'aria.chart': 'Historical water level and discharge chart',
+ 'aria.dbstats': 'Database statistics',
+ 'stage.chip': (n, lvl) => `S${n} · ${lvl} m`,
+ 'common.and': 'and',
+ 'common.nodata': 'No data',
+ 'common.unknown': 'Unknown',
+ 'stat.stations': 'Reporting stations',
+ 'stat.stations.note': 'RID gauges with current readings',
+ 'stat.stations.note.hii': (n) => `RID gauges · +${n} ThaiWater/HII reporting`,
+ 'stat.flow': 'Chiang Mai river flow',
+ 'stat.flow.note': 'P.1 Nawarat Bridge · m³/s',
+ 'stat.flow.note.replay': 'P.1 Nawarat Bridge · m³/s · 2024 replay',
+ 'stat.flow.tip': 'Discharge: the volume of water flowing past the gauge each second (cubic metres per second)',
+ 'stat.stress': 'Most stressed gauge',
+ 'stat.stress.note': 'Awaiting station data',
+ 'stat.stress.capacity': (code) => `${code} · of channel capacity`,
+ 'stat.stress.nodata': 'No capacity data',
+ 'stat.stress.tip': 'How full the river channel is at the busiest gauge — 100% means water reaches the top of the bank',
+ 'stat.updated': 'Last updated',
+ 'stat.updated.note': 'Loading latest readings',
+ 'stat.updated.ago': (date, mins) => `${date} · ${mins} min ago`,
+ 'stat.updated.none': 'No timestamp available',
+ 'map.title': 'Station flow map',
+ 'map.subtitle': 'River width, colour & dash speed follow live discharge',
+ 'legend.button': '☰ Legend',
+ 'legend.flow': 'Flow status',
+ 'legend.flow.low': 'Low < 25 m³/s',
+ 'legend.flow.moderate': 'Moderate 25–100',
+ 'legend.flow.high': 'High 100–250',
+ 'legend.flow.veryhigh': 'Very high > 250',
+ 'legend.river.nogauge': 'River · no nearby gauge',
+ 'legend.river.gauge': 'River · gauge colour, dashes = flow',
+ 'legend.rain': 'Rainfall · 24 h',
+ 'legend.rain.show': 'show',
+ 'legend.rain.light': 'Light 0.1–10 mm',
+ 'legend.rain.moderate': 'Moderate 10–35',
+ 'legend.rain.heavy': 'Heavy 35–90',
+ 'legend.rain.veryheavy': 'Very heavy 90–150',
+ 'legend.rain.extreme': 'Extreme > 150',
+ 'legend.other': 'Other markers',
+ 'legend.other.nodata': 'Gauge · no recent data',
+ 'legend.other.sensor': 'Water-level sensor · colour = % of bank height',
+ 'side.title': 'Current station flow',
+ 'side.subtitle': 'Select a station to locate it and load its history',
+ 'search.placeholder': 'Search stations · code, name, river…',
+ 'search.aria': 'Search stations',
+ 'sensors.title': 'Additional basin stations',
+ 'sensors.tip': 'Show / hide the ThaiWater/HII station list',
+ 'sensors.loading': 'Loading ThaiWater/HII stations…',
+ 'sensors.count': (n) => `${n} Ping basin stations · ThaiWater/HII water level`,
+ 'verdict.disclaimer': 'Experimental model — not an official warning · official alerts:',
+ 'verdict.flooding': (lvl) => `Chiang Mai city flooding stage reached — river at ${lvl} m (flooding starts at 3.70 m)`,
+ 'verdict.likely': (lvl) => `Flooding likely — the river may reach warning level within 24 h (now ${lvl}, warning at 3.70 m)`,
+ 'unit.m': 'm',
+ 'verdict.watch': (lvl, tail) => `Watch — river elevated at ${lvl}; ${tail}`,
+ 'verdict.watch.chance': (pct) => `${pct}% chance of reaching the 3.70 m warning level within 24 h`,
+ 'verdict.watch.monitor': 'monitor conditions',
+ 'verdict.ok': (lvl) => `No Chiang Mai city flooding expected in the next 24 h — river at ${lvl}, flooding starts at 3.70 m`,
+ 'forecast.title': 'Flood risk outlook',
+ 'forecast.experimental': '· experimental',
+ 'forecast.status': 'Model probability of reaching warning / danger levels within 6, 12 and 24 hours',
+ 'forecast.status.full': (asOf, model) => `Probability of exceeding warning / danger level within 6, 12 and 24 h${asOf}${model}`,
+ 'forecast.status.asof': (when) => ` · based on readings up to ${when}`,
+ 'forecast.status.model': (version, trained) => ` · model ${version}${trained}`,
+ 'forecast.status.trained': (when) => ` (trained ${when})`,
+ 'forecast.disclaimer': 'Not an official warning — for official alerts see',
+ 'forecast.peakrisk': (now) => `${now}peak risk next 24h`,
+ 'forecast.now': (lvl) => `now ${lvl} m · `,
+ 'forecast.chip.tip': (h, warn, danger, peak, heuristic) => `+${h}h · warning ${warn}% · danger ${danger}%${peak}${heuristic}`,
+ 'forecast.chip.peak': (lvl) => ` · peak ~${lvl} m`,
+ 'forecast.chip.heuristic': ' · heuristic fallback',
+ 'forecast.expand': (n) => `Show all ${n} station forecasts ▾`,
+ 'forecast.collapse': 'Hide station forecasts ▴',
+ 'outlook.title': 'Chiang Mai city flood outlook · P.1 Nawarat Bridge',
+ 'outlook.explainer': 'Chance the river reaches each official inundation stage within 24 h — city flooding begins at stage 1 (3.70 m); each stage floods additional districts.',
+ 'outlook.now': (now, h, peak) => `Now ${now} m · predicted peak next ${h} h: ${peak} m`,
+ 'outlook.sim': (demo, real) => `⚠ SIMULATION: P.1 at ${demo} m (real: ${real} m)`,
+ 'outlook.sim.rising': (lvl, real) => `⚠ SIMULATION: rising water · P.1 at ${lvl} m (real: ${real} m)`,
+ 'stage.tip': (stage, lvl, pct, h) => `Stage ${stage}: river at ${lvl} m — ${pct}% within ${h} h`,
+ 'zones.show': 'Show flood zones on map',
+ 'zones.hide': 'Hide flood zones',
+ 'zones.unavailable': 'Flood zones unavailable',
+ 'zone.title': (zone) => `Flood zone ${zone}`,
+ 'zone.floods': (lvl) => `Floods when P.1 ≥ ${lvl} m`,
+ 'zone.p1now': 'P.1 now',
+ 'zone.chance24': 'Chance within 24 h',
+ 'zone.reached': 'River is at or above this zone’s level now',
+ 'zone.marker': 'Marker',
+ 'zone.outside': 'Outside the mapped flood zones',
+ 'zone.field': 'Flood zone',
+ 'history.title': 'Station history',
+ 'history.title.station': (code) => `${code} · station history`,
+ 'history.status': 'Select a station to load the last 7 days',
+ 'history.loading': 'Loading historical measurements…',
+ 'history.placeholder': 'Click any station on the map or in the list to see its history',
+ 'history.count': (n, extra) => `${n} measurements${extra}`,
+ 'history.count.daily': (n) => ` (${n} daily averages)`,
+ 'history.empty': 'No measurements in this period',
+ 'history.unavailable': (msg) => `History unavailable: ${msg}`,
+ 'history.selectfirst': 'Select a station first — click one on the map or in the list',
+ 'chart.discharge': 'Discharge (m³/s)',
+ 'chart.level': 'Water level (m)',
+ 'chart.model': 'Model 24 h peak (as issued)',
+ 'range.24h': 'Last 24 hours',
+ 'range.7d': 'Last 7 days',
+ 'range.30d': 'Last 30 days',
+ 'range.90d': 'Last 90 days',
+ 'range.all': 'All time',
+ 'range.custom': 'Custom range',
+ 'range.from': 'From date',
+ 'range.to': 'To date',
+ 'popup.discharge': 'Discharge',
+ 'popup.level': 'Water level',
+ 'popup.reading': (when) => `Reading: ${when}`,
+ 'popup.noreading': 'No reading available',
+ 'popup.bank': 'Bank status',
+ 'popup.belowbank': (m) => `${m} m below bank`,
+ 'popup.gauge': (m) => ` (${m} m on the gauge)`,
+ 'popup.last24': 'Last 24 h',
+ 'popup.lasthour': 'Last hour',
+ 'popup.raingauge': 'Rain gauge',
+ 'popup.raingauge.of': (agency) => `${agency} rain gauge · ThaiWater`,
+ 'popup.basin': 'Ping basin',
+ 'rain.none': 'No rain',
+ 'rain.light': 'Light rain',
+ 'rain.moderate': 'Moderate rain',
+ 'rain.heavy': 'Heavy rain',
+ 'rain.veryheavy': 'Very heavy rain',
+ 'rain.extreme': 'Extreme rain',
+ 'flow.bank': 'of bank height',
+ 'replay.clock.sub': (lvl, flow) => `P.1 ${lvl} · basin flow ${flow} m³/s`,
+ 'replay.peak': (when, lvl, flow) => `⏪ 2024 flood replay · ${when} · P.1 at ${lvl} · basin flow ${flow} m³/s`,
+ 'replay.flooding': '🌊 FLOODING · river above stage 1 (3.70 m)',
+ 'replay.alert': (peak) => `⚠ MODEL ALERT · flooding within 24 h likely${peak}`,
+ 'replay.alert.peak': (lvl) => ` · predicted peak ${lvl} m`,
+ 'replay.elevated': (pct) => `model: elevated flood risk (${pct}% within 24 h)`,
+ 'replay.noflood': 'model: no flood expected',
+ 'replay.stress': (code) => `${code} · strongest flow · m³/s · 2024 replay`,
+ 'replay.nodischarge': 'No discharge reported',
+ 'db.total': 'Total datapoints',
+ 'db.total.note': 'measurements stored',
+ 'db.total.breakdown': (rid, hii, rain, om) => `${rid} RID · ${hii} HII level · ${rain} rain${om}`,
+ 'db.total.openmeteo': (n) => ` · ${n} forecast rain`,
+ 'db.stations.breakdown': (rid, hii) => `${rid} RID · ${hii} ThaiWater/HII`,
+ 'db.range': 'Date range',
+ 'db.range.note': 'first to last record',
+ 'db.days': 'Days spanned',
+ 'db.days.note': 'between first and last',
+ 'db.stations': 'Stations',
+ 'db.stations.note': 'distinct in database',
+ 'db.coverage': 'Coverage',
+ 'db.coverage.note': 'of RID hourly slots recorded',
+ 'footer.tagline': 'Open-source river monitoring for Northern Thailand · data from RID & ThaiWater/HII',
+ 'footer.source': 'Source code ↗',
+ 'footer.docs': 'API docs ↗',
+ },
+ th: {
+ 'app.title': 'ติดตามระดับน้ำปิงแบบเรียลไทม์',
+ 'app.subtitle': 'ระดับน้ำและอัตราการไหลปัจจุบันทั่วภาคเหนือของประเทศไทย',
+ 'pill.live': 'ข้อมูลสด',
+ 'pill.replay': '⏪ ย้อนเหตุการณ์ 2567',
+ 'pill.sim': '⚠ การจำลอง',
+ 'action.refresh': '↻ รีเฟรช',
+ 'replay.start': '▶ ย้อนดูน้ำท่วม ต.ค. 2567',
+ 'replay.stop': '⏹ หยุดการเล่นย้อนหลัง',
+ 'replay.loading': 'กำลังโหลดข้อมูลปี 2567…',
+ 'replay.unavailable': (msg) => `เล่นย้อนหลังไม่ได้: ${msg}`,
+ 'loading': 'กำลังโหลดสถานการณ์น้ำ…',
+ 'error.map': 'ไม่สามารถโหลดข้อมูลแผนที่ได้',
+ 'error.leaflet': 'โหลดไลบรารีแผนที่ไม่สำเร็จ กรุณาตรวจสอบการเชื่อมต่ออินเทอร์เน็ต',
+ 'aria.summary': 'สรุปสถานการณ์น้ำ',
+ 'aria.map': 'แผนที่แบบโต้ตอบแสดงสถานีตรวจวัดแม่น้ำปิง',
+ 'aria.chart': 'กราฟระดับน้ำและอัตราการไหลย้อนหลัง',
+ 'aria.dbstats': 'สถิติฐานข้อมูล',
+ 'stage.chip': (n, lvl) => `ระดับ ${n} · ${lvl} ม.`,
+ 'common.and': 'และ',
+ 'common.nodata': 'ไม่มีข้อมูล',
+ 'common.unknown': 'ไม่ทราบ',
+ 'stat.stations': 'สถานีที่รายงานผล',
+ 'stat.stations.note': 'สถานีวัดของกรมชลประทานที่มีข้อมูลล่าสุด',
+ 'stat.stations.note.hii': (n) => `สถานีกรมชลประทาน · เพิ่ม ${n} สถานีจาก ThaiWater/HII`,
+ 'stat.flow': 'อัตราการไหลที่เชียงใหม่',
+ 'stat.flow.note': 'P.1 สะพานนวรัฐ · ลบ.ม./วินาที',
+ 'stat.flow.note.replay': 'P.1 สะพานนวรัฐ · ลบ.ม./วินาที · ย้อนหลังปี 2567',
+ 'stat.flow.tip': 'อัตราการไหล: ปริมาณน้ำที่ไหลผ่านสถานีวัดในแต่ละวินาที (ลูกบาศก์เมตรต่อวินาที)',
+ 'stat.stress': 'สถานีที่ลำน้ำเต็มที่สุด',
+ 'stat.stress.note': 'รอข้อมูลจากสถานี',
+ 'stat.stress.capacity': (code) => `${code} · ของความจุลำน้ำ`,
+ 'stat.stress.nodata': 'ไม่มีข้อมูลความจุ',
+ 'stat.stress.tip': 'ระดับความเต็มของลำน้ำที่สถานีที่มีน้ำมากที่สุด — 100% หมายถึงน้ำถึงระดับตลิ่ง',
+ 'stat.updated': 'อัปเดตล่าสุด',
+ 'stat.updated.note': 'กำลังโหลดข้อมูลล่าสุด',
+ 'stat.updated.ago': (date, mins) => `${date} · ${mins} นาทีที่แล้ว`,
+ 'stat.updated.none': 'ไม่มีข้อมูลเวลา',
+ 'map.title': 'แผนที่การไหลของน้ำ',
+ 'map.subtitle': 'ความกว้าง สี และความเร็วเส้นประของแม่น้ำแสดงอัตราการไหลจริง',
+ 'legend.button': '☰ คำอธิบาย',
+ 'legend.flow': 'สถานะการไหล',
+ 'legend.flow.low': 'น้อย < 25 ลบ.ม./วินาที',
+ 'legend.flow.moderate': 'ปานกลาง 25–100',
+ 'legend.flow.high': 'สูง 100–250',
+ 'legend.flow.veryhigh': 'สูงมาก > 250',
+ 'legend.river.nogauge': 'แม่น้ำ · ไม่มีสถานีวัดใกล้เคียง',
+ 'legend.river.gauge': 'แม่น้ำ · สีตามสถานีวัด เส้นประ = การไหล',
+ 'legend.rain': 'ปริมาณฝน · 24 ชม.',
+ 'legend.rain.show': 'แสดง',
+ 'legend.rain.light': 'เล็กน้อย 0.1–10 มม.',
+ 'legend.rain.moderate': 'ปานกลาง 10–35',
+ 'legend.rain.heavy': 'หนัก 35–90',
+ 'legend.rain.veryheavy': 'หนักมาก 90–150',
+ 'legend.rain.extreme': 'รุนแรง > 150',
+ 'legend.other': 'สัญลักษณ์อื่น ๆ',
+ 'legend.other.nodata': 'สถานีวัด · ไม่มีข้อมูลล่าสุด',
+ 'legend.other.sensor': 'เซ็นเซอร์ระดับน้ำ · สี = % ของความสูงตลิ่ง',
+ 'side.title': 'การไหลของน้ำรายสถานี',
+ 'side.subtitle': 'เลือกสถานีเพื่อดูตำแหน่งและข้อมูลย้อนหลัง',
+ 'search.placeholder': 'ค้นหาสถานี · รหัส ชื่อ แม่น้ำ…',
+ 'search.aria': 'ค้นหาสถานี',
+ 'sensors.title': 'สถานีอื่นในลุ่มน้ำ',
+ 'sensors.tip': 'แสดง / ซ่อนรายชื่อสถานี ThaiWater/HII',
+ 'sensors.loading': 'กำลังโหลดสถานี ThaiWater/HII…',
+ 'sensors.count': (n) => `${n} สถานีในลุ่มน้ำปิง · ระดับน้ำจาก ThaiWater/HII`,
+ 'verdict.disclaimer': 'แบบจำลองทดลอง — ไม่ใช่การเตือนภัยอย่างเป็นทางการ · ประกาศทางการ:',
+ 'verdict.flooding': (lvl) => `น้ำถึงระดับท่วมเมืองเชียงใหม่แล้ว — ระดับน้ำ ${lvl} ม. (เริ่มท่วมที่ 3.70 ม.)`,
+ 'verdict.likely': (lvl) => `มีแนวโน้มน้ำท่วม — ระดับน้ำอาจถึงระดับเตือนภัยภายใน 24 ชม. (ขณะนี้ ${lvl} เตือนภัยที่ 3.70 ม.)`,
+ 'unit.m': 'ม.',
+ 'verdict.watch': (lvl, tail) => `เฝ้าระวัง — ระดับน้ำอยู่ในเกณฑ์สูง ขณะนี้ ${lvl} · ${tail}`,
+ 'verdict.watch.chance': (pct) => `โอกาส ${pct}% ที่จะถึงระดับเตือนภัย 3.70 ม. ภายใน 24 ชม.`,
+ 'verdict.watch.monitor': 'ติดตามสถานการณ์',
+ 'verdict.ok': (lvl) => `ไม่คาดว่าจะเกิดน้ำท่วมในเมืองเชียงใหม่ใน 24 ชม. ข้างหน้า — ระดับน้ำ ${lvl} เริ่มท่วมที่ 3.70 ม.`,
+ 'forecast.title': 'แนวโน้มความเสี่ยงน้ำท่วม',
+ 'forecast.experimental': '· ทดลอง',
+ 'forecast.status': 'ความน่าจะเป็นที่ระดับน้ำจะถึงระดับเตือนภัย / อันตราย ภายใน 6, 12 และ 24 ชั่วโมง',
+ 'forecast.status.full': (asOf, model) => `แบบจำลองประเมินความน่าจะเป็นที่จะเกินระดับเตือนภัย / อันตราย ภายใน 6, 12 และ 24 ชม.${asOf}${model}`,
+ 'forecast.status.asof': (when) => ` · จากข้อมูลถึง ${when}`,
+ 'forecast.status.model': (version, trained) => ` · แบบจำลอง ${version}${trained}`,
+ 'forecast.status.trained': (when) => ` (ฝึกเมื่อ ${when})`,
+ 'forecast.disclaimer': 'ไม่ใช่การเตือนภัยอย่างเป็นทางการ — ประกาศทางการดูที่',
+ 'forecast.peakrisk': (now) => `${now}ความเสี่ยงสูงสุดใน 24 ชม.`,
+ 'forecast.now': (lvl) => `ขณะนี้ ${lvl} ม. · `,
+ 'forecast.chip.tip': (h, warn, danger, peak, heuristic) => `+${h} ชม. · เตือนภัย ${warn}% · อันตราย ${danger}%${peak}${heuristic}`,
+ 'forecast.chip.peak': (lvl) => ` · ระดับสูงสุดประมาณ ${lvl} ม.`,
+ 'forecast.chip.heuristic': ' · ใช้การประมาณอย่างง่าย',
+ 'forecast.expand': (n) => `แสดงพยากรณ์ทั้ง ${n} สถานี ▾`,
+ 'forecast.collapse': 'ซ่อนพยากรณ์รายสถานี ▴',
+ 'outlook.title': 'แนวโน้มน้ำท่วมเมืองเชียงใหม่ · P.1 สะพานนวรัฐ',
+ 'outlook.explainer': 'โอกาสที่ระดับน้ำจะถึงแต่ละระดับการท่วมตามประกาศทางการภายใน 24 ชม. — น้ำเริ่มท่วมเมืองที่ระดับ 1 (3.70 ม.) และแต่ละระดับจะท่วมพื้นที่เพิ่มขึ้น',
+ 'outlook.now': (now, h, peak) => `ขณะนี้ ${now} ม. · คาดการณ์ระดับสูงสุดใน ${h} ชม.: ${peak} ม.`,
+ 'outlook.sim': (demo, real) => `⚠ การจำลอง: P.1 ที่ ${demo} ม. (จริง: ${real} ม.)`,
+ 'outlook.sim.rising': (lvl, real) => `⚠ การจำลอง: น้ำกำลังสูงขึ้น · P.1 ที่ ${lvl} ม. (จริง: ${real} ม.)`,
+ 'stage.tip': (stage, lvl, pct, h) => `ระดับ ${stage}: น้ำที่ ${lvl} ม. — ${pct}% ภายใน ${h} ชม.`,
+ 'zones.show': 'แสดงพื้นที่น้ำท่วมบนแผนที่',
+ 'zones.hide': 'ซ่อนพื้นที่น้ำท่วม',
+ 'zones.unavailable': 'ไม่มีข้อมูลพื้นที่น้ำท่วม',
+ 'zone.title': (zone) => `พื้นที่น้ำท่วมระดับ ${zone}`,
+ 'zone.floods': (lvl) => `ท่วมเมื่อ P.1 ≥ ${lvl} ม.`,
+ 'zone.p1now': 'P.1 ขณะนี้',
+ 'zone.chance24': 'โอกาสภายใน 24 ชม.',
+ 'zone.reached': 'ระดับน้ำถึงหรือเกินระดับของพื้นที่นี้แล้ว',
+ 'zone.marker': 'หมุด',
+ 'zone.outside': 'อยู่นอกพื้นที่น้ำท่วมที่ทำแผนที่ไว้',
+ 'zone.field': 'พื้นที่น้ำท่วม',
+ 'history.title': 'ข้อมูลย้อนหลังรายสถานี',
+ 'history.title.station': (code) => `${code} · ข้อมูลย้อนหลัง`,
+ 'history.status': 'เลือกสถานีเพื่อดูข้อมูล 7 วันล่าสุด',
+ 'history.loading': 'กำลังโหลดข้อมูลย้อนหลัง…',
+ 'history.placeholder': 'คลิกสถานีใดก็ได้บนแผนที่หรือในรายการเพื่อดูข้อมูลย้อนหลัง',
+ 'history.count': (n, extra) => `${n} ค่าที่วัดได้${extra}`,
+ 'history.count.daily': (n) => ` (เฉลี่ยรายวัน ${n} ค่า)`,
+ 'history.empty': 'ไม่มีข้อมูลในช่วงเวลานี้',
+ 'history.unavailable': (msg) => `ไม่สามารถโหลดข้อมูลย้อนหลัง: ${msg}`,
+ 'history.selectfirst': 'กรุณาเลือกสถานีก่อน — คลิกบนแผนที่หรือในรายการ',
+ 'chart.discharge': 'อัตราการไหล (ลบ.ม./วินาที)',
+ 'chart.level': 'ระดับน้ำ (ม.)',
+ 'chart.model': 'ค่าพยากรณ์สูงสุด 24 ชม. (ตามที่ออกในขณะนั้น)',
+ 'range.24h': '24 ชั่วโมงล่าสุด',
+ 'range.7d': '7 วันล่าสุด',
+ 'range.30d': '30 วันล่าสุด',
+ 'range.90d': '90 วันล่าสุด',
+ 'range.all': 'ทั้งหมด',
+ 'range.custom': 'กำหนดช่วงเอง',
+ 'range.from': 'วันที่เริ่มต้น',
+ 'range.to': 'วันที่สิ้นสุด',
+ 'popup.discharge': 'อัตราการไหล',
+ 'popup.level': 'ระดับน้ำ',
+ 'popup.reading': (when) => `ข้อมูลเมื่อ: ${when}`,
+ 'popup.noreading': 'ไม่มีข้อมูลการวัด',
+ 'popup.bank': 'สถานะตลิ่ง',
+ 'popup.belowbank': (m) => `ต่ำกว่าตลิ่ง ${m} ม.`,
+ 'popup.gauge': (m) => ` (${m} ม. ตามระดับไม้วัด)`,
+ 'popup.last24': '24 ชม. ล่าสุด',
+ 'popup.lasthour': '1 ชม. ล่าสุด',
+ 'popup.raingauge': 'สถานีวัดน้ำฝน',
+ 'popup.raingauge.of': (agency) => `สถานีวัดน้ำฝน ${agency} · ThaiWater`,
+ 'popup.basin': 'ลุ่มน้ำปิง',
+ 'rain.none': 'ไม่มีฝน',
+ 'rain.light': 'ฝนเล็กน้อย',
+ 'rain.moderate': 'ฝนปานกลาง',
+ 'rain.heavy': 'ฝนหนัก',
+ 'rain.veryheavy': 'ฝนหนักมาก',
+ 'rain.extreme': 'ฝนรุนแรง',
+ 'flow.bank': 'ของความสูงตลิ่ง',
+ 'replay.clock.sub': (lvl, flow) => `P.1 ${lvl} · การไหลรวมในลุ่มน้ำ ${flow} ลบ.ม./วินาที`,
+ 'replay.peak': (when, lvl, flow) => `⏪ ย้อนเหตุการณ์น้ำท่วม 2567 · ${when} · P.1 ที่ ${lvl} · การไหลรวม ${flow} ลบ.ม./วินาที`,
+ 'replay.flooding': '🌊 น้ำท่วม · ระดับน้ำเกินระดับ 1 (3.70 ม.)',
+ 'replay.alert': (peak) => `⚠ แบบจำลองเตือน · มีแนวโน้มน้ำท่วมภายใน 24 ชม.${peak}`,
+ 'replay.alert.peak': (lvl) => ` · คาดระดับสูงสุด ${lvl} ม.`,
+ 'replay.elevated': (pct) => `แบบจำลอง: ความเสี่ยงน้ำท่วมสูงขึ้น (${pct}% ภายใน 24 ชม.)`,
+ 'replay.noflood': 'แบบจำลอง: ไม่คาดว่าจะเกิดน้ำท่วม',
+ 'replay.stress': (code) => `${code} · การไหลแรงที่สุด · ลบ.ม./วินาที · ย้อนหลัง 2567`,
+ 'replay.nodischarge': 'ไม่มีรายงานอัตราการไหล',
+ 'db.total': 'จำนวนข้อมูลทั้งหมด',
+ 'db.total.note': 'ค่าที่จัดเก็บไว้',
+ 'db.total.breakdown': (rid, hii, rain, om) => `${rid} กรมชลประทาน · ${hii} ระดับน้ำ HII · ${rain} น้ำฝน${om}`,
+ 'db.total.openmeteo': (n) => ` · ${n} ฝนพยากรณ์`,
+ 'db.stations.breakdown': (rid, hii) => `${rid} กรมชลประทาน · ${hii} ThaiWater/HII`,
+ 'db.range': 'ช่วงวันที่',
+ 'db.range.note': 'ข้อมูลแรกถึงข้อมูลล่าสุด',
+ 'db.days': 'จำนวนวัน',
+ 'db.days.note': 'ระหว่างข้อมูลแรกกับข้อมูลล่าสุด',
+ 'db.stations': 'สถานี',
+ 'db.stations.note': 'ที่มีอยู่ในฐานข้อมูล',
+ 'db.coverage': 'ความครอบคลุม',
+ 'db.coverage.note': 'ของช่วงเวลารายชั่วโมงที่บันทึกได้',
+ 'footer.tagline': 'ระบบติดตามแม่น้ำแบบโอเพนซอร์สสำหรับภาคเหนือ · ข้อมูลจากกรมชลประทาน และ ThaiWater/HII',
+ 'footer.source': 'ซอร์สโค้ด ↗',
+ 'footer.docs': 'เอกสาร API ↗',
+ },
+ };
+
+ // Thai unless the visitor's browser says otherwise: most people at risk on
+ // this river read Thai. An explicit choice is remembered.
+ const LANG_KEY = 'ping-monitor-lang';
+ function initialLang() {
+ const saved = (() => { try { return localStorage.getItem(LANG_KEY); } catch (e) { return null; } })();
+ if (saved === 'th' || saved === 'en') return saved;
+ // First match wins, in the browser's own preference ORDER. Testing
+ // "is English anywhere in the list" would hand English to the very
+ // readers this exists for: Thai profiles routinely carry en-US behind th.
+ for (const entry of (navigator.languages || [navigator.language || ''])) {
+ const code = String(entry).toLowerCase();
+ if (code.startsWith('th')) return 'th';
+ if (code.startsWith('en')) return 'en';
+ }
+ return 'th';
+ }
+ state.lang = initialLang();
+
+ function t(key, ...args) {
+ const table = STRINGS[state.lang] || STRINGS.en;
+ const value = table[key] !== undefined ? table[key] : STRINGS.en[key];
+ if (value === undefined) return key; // visible, not silently blank
+ return typeof value === 'function' ? value(...args) : value;
+ }
+
+ function applyTranslations() {
+ document.documentElement.lang = state.lang;
+ document.querySelectorAll('[data-i18n]').forEach((el) => {
+ el.textContent = t(el.getAttribute('data-i18n'));
+ });
+ document.querySelectorAll('[data-i18n-placeholder]').forEach((el) => {
+ el.placeholder = t(el.getAttribute('data-i18n-placeholder'));
+ });
+ document.querySelectorAll('[data-i18n-title]').forEach((el) => {
+ el.title = t(el.getAttribute('data-i18n-title'));
+ });
+ document.querySelectorAll('[data-i18n-aria]').forEach((el) => {
+ el.setAttribute('aria-label', t(el.getAttribute('data-i18n-aria')));
+ });
+ const toggle = $('lang-toggle');
+ if (toggle) {
+ // The label names the language you'd switch TO. aria-pressed can't
+ // express that without contradicting the label, so the accessible
+ // name states the action outright and styling keys off the data attr.
+ const toEnglish = state.lang === 'th';
+ toggle.textContent = toEnglish ? 'EN' : 'ไทย';
+ toggle.lang = toEnglish ? 'en' : 'th';
+ toggle.setAttribute('data-active-lang', state.lang);
+ toggle.setAttribute('aria-label', toEnglish ? 'Switch to English' : 'เปลี่ยนเป็นภาษาไทย');
+ }
+ }
+
+ function setLang(lang) {
+ state.lang = lang;
+ try { localStorage.setItem(LANG_KEY, lang); } catch (e) { /* private mode */ }
+ applyTranslations();
+ // Re-render everything that builds strings in JS
+ if (state.lastRender) {
+ const { stations, readings } = state.lastRender;
+ // Rebuild the map layers too: markers bind popup text, and simply
+ // re-running renderThaiWaterSensors would stack a second full set
+ // of sensor markers on top of the existing ones.
+ if (state.map && !state.replayTimer) {
+ renderMap(stations, readings, state.lastRiverNetwork);
+ if (state.lastRainRecords) renderRainLayer(state.lastRainRecords);
+ if (state.lastSensors) renderThaiWaterSensors(state.lastSensors.sensors, state.lastSensors.codes);
+ loadCustomMarkers();
+ } else if (state.lastSensors) {
+ // During replay the map is mid-animation; only the list text
+ // is safe to rebuild (markers are restyled by the replay tick).
+ renderThaiWaterSensors(state.lastSensors.sensors, state.lastSensors.codes);
+ }
+ renderList(stations, readings);
+ if (!state.replayTimer) renderSummary(stations, readings);
+ applyStationSearch();
+ }
+ if (state.lastForecastRows) renderForecasts(state.lastForecastRows);
+ if (state.lastStats) renderDbStats(state.lastStats);
+ if (state.selectedStation) loadHistory(state.selectedStation);
+ const zonesButton = $('zones-toggle');
+ if (zonesButton) zonesButton.textContent = zoneLayer ? t('zones.hide') : t('zones.show');
+ // Keep whatever mode the page is actually in — relabelling a pinned
+ // simulation or a 2024 replay as "LIVE DATA" would present fabricated
+ // flood levels as real.
+ setLiveIndicator(state.liveMode || 'live', state.liveLabelKey);
+ if (state.replayTimer) $('replay-2024').textContent = t('replay.stop');
+ }
+
+ // Thai dates use the Buddhist era, which is what Thai readers expect and
+ // what the replay label ("ต.ค. 2567") already says — pinning Gregorian here
+ // put two different year systems on the same screen.
+ function loc() { return state.lang === 'th' ? 'th-TH' : 'en-GB'; }
+ // Metre abbreviation: "ม." reads as a unit in Thai, "m" mid-sentence does not.
+ function metres(value, digits = 2) {
+ return `${Number(value).toFixed(digits)} ${t('unit.m')}`;
+ }
+
function flowColor(flow) {
if (flow == null || Number.isNaN(flow)) return '#7b8f94';
if (flow < 25) return '#1e8b60';
@@ -360,12 +858,12 @@
// distinct from the flow palette so a map dot is never ambiguous between
// "flow status" and "rainfall amount".
function rainBin(mm) {
- if (mm == null || Number.isNaN(mm) || mm <= 0) return { color: '#90a4a9', radius: 2.5, label: 'No rain', opacity: .45 };
- if (mm <= 10) return { color: '#b7a6e3', radius: 4.5, label: 'Light rain' };
- if (mm <= 35) return { color: '#8f6fd2', radius: 6, label: 'Moderate rain' };
- if (mm <= 90) return { color: '#6844b8', radius: 7.5, label: 'Heavy rain' };
- if (mm <= 150) return { color: '#472a96', radius: 9.5, label: 'Very heavy rain' };
- return { color: '#2a1668', radius: 11.5, label: 'Extreme rain' };
+ if (mm == null || Number.isNaN(mm) || mm <= 0) return { color: '#90a4a9', radius: 2.5, label: t('rain.none'), opacity: .45 };
+ if (mm <= 10) return { color: '#b7a6e3', radius: 4.5, label: t('rain.light') };
+ if (mm <= 35) return { color: '#8f6fd2', radius: 6, label: t('rain.moderate') };
+ if (mm <= 90) return { color: '#6844b8', radius: 7.5, label: t('rain.heavy') };
+ if (mm <= 150) return { color: '#472a96', radius: 9.5, label: t('rain.veryheavy') };
+ return { color: '#2a1668', radius: 11.5, label: t('rain.extreme') };
}
// Chips that carry text need contrast-safe pairings: slightly darkened
@@ -378,6 +876,7 @@
}
function renderRainLayer(records) {
+ state.lastRainRecords = records;
if (state.rainLayer) { state.map.removeLayer(state.rainLayer); state.rainLayer = null; }
if (!records || !records.length) return;
const group = L.layerGroup();
@@ -385,18 +884,18 @@
if (!Number.isFinite(r.latitude) || !Number.isFinite(r.longitude)) return;
const mm = r.rain_24h == null ? null : Number(r.rain_24h);
const bin = rainBin(mm);
- const name = r.name_en || r.name_th || r.oldcode || `Station ${r.station_id}`;
- const time = r.timestamp ? new Date(r.timestamp).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : 'No reading';
+ const name = (state.lang === 'th' ? r.name_th || r.name_en : r.name_en || r.name_th) || r.oldcode || `Station ${r.station_id}`;
+ const time = r.timestamp ? new Date(r.timestamp).toLocaleString(loc(), { dateStyle: 'medium', timeStyle: 'short' }) : t('popup.noreading');
L.circleMarker([r.latitude, r.longitude], {
radius: bin.radius, color: '#ffffff', weight: 1.5,
fillColor: bin.color, fillOpacity: bin.opacity ?? .85
- }).bindPopup(``).addTo(group);
});
state.rainLayer = group;
const toggle = $('rain-toggle');
@@ -419,7 +918,7 @@
}
function formatFlow(value) {
- return value == null || Number.isNaN(Number(value)) ? 'No data' : `${Number(value).toFixed(1)} m³/s`;
+ return value == null || Number.isNaN(Number(value)) ? t('common.nodata') : `${Number(value).toFixed(1)} m³/s`;
}
function markerSize(flow) {
@@ -428,7 +927,7 @@
}
function initMap() {
- if (!window.L) throw new Error('The map library did not load. Check the internet connection.');
+ if (!window.L) throw new Error(t('error.leaflet'));
if (state.map) return;
state.map = L.map('station-map', { zoomControl: true, attributionControl: true }).setView([18.78, 98.98], 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -446,16 +945,19 @@
function buildPopup(station, measurement) {
const flow = measurement ? measurement.discharge : null;
const level = measurement ? measurement.water_level : null;
- const time = measurement ? new Date(measurement.timestamp).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : 'No reading available';
+ const time = measurement ? new Date(measurement.timestamp).toLocaleString(loc(), { dateStyle: 'medium', timeStyle: 'short' }) : t('popup.noreading');
+ // Station names are bilingual in the data: lead with the reader's language
+ const primary = state.lang === 'th' ? station.thai_name : station.english_name;
+ const secondary = state.lang === 'th' ? station.english_name : station.thai_name;
return ``;
}
@@ -558,10 +1060,13 @@
}));
}
- function setLiveIndicator(mode, label) {
+ function setLiveIndicator(mode, labelKey) {
const pill = $('live-pill');
- $('live-pill-text').textContent = label || 'LIVE DATA';
- pill.title = label || 'LIVE DATA'; // mobile shows the dot only
+ state.liveMode = mode;
+ state.liveLabelKey = labelKey || 'pill.live';
+ const label = t(state.liveLabelKey);
+ $('live-pill-text').textContent = label;
+ pill.title = label; // mobile shows the dot only
pill.classList.toggle('demo', mode !== 'live');
}
@@ -581,8 +1086,10 @@
html: `${escapeHtml(station.station_code.replace('P.', ''))}
`,
iconSize: [size, size], iconAnchor: [size / 2, size / 2], popupAnchor: [0, -size / 2]
});
+ // Bind a FUNCTION, not a string: the popup then renders in the
+ // language current at open time instead of the one at map build.
const marker = L.marker([station.latitude, station.longitude], { icon, title: `${station.station_code} ${station.english_name}` })
- .bindPopup(buildPopup(station, measurement))
+ .bindPopup(() => buildPopup(station, measurement))
.on('click', () => loadHistory(station.station_code))
.addTo(state.map);
state.layers.push(marker);
@@ -599,8 +1106,8 @@
state.selectedStation = stationCode;
state.historyRequestId++;
const reqId = state.historyRequestId;
- $('history-title').textContent = `${stationCode} · station history`;
- $('history-status').textContent = 'Loading historical measurements…';
+ $('history-title').textContent = t('history.title.station', stationCode);
+ $('history-status').textContent = t('history.loading');
$('history-placeholder').style.display = 'none';
try {
// Hand-edited dates win; dropdown-driven loads use the precise
@@ -670,11 +1177,11 @@
state.historyChart = new Chart($('history-chart'), {
type: 'line',
data: {
- labels: sampled.map((row) => new Date(row.timestamp).toLocaleString('en-TH', { timeZone: 'Asia/Bangkok', month: 'short', day: 'numeric', year: '2-digit', hour: '2-digit' })),
+ labels: sampled.map((row) => new Date(row.timestamp).toLocaleString(loc(), { timeZone: 'Asia/Bangkok', month: 'short', day: 'numeric', year: '2-digit', hour: '2-digit' })),
datasets: [
- { label: 'Discharge (m³/s)', data: sampled.map((row) => row.discharge), borderColor: '#087da5', backgroundColor: 'rgba(8,125,165,.12)', yAxisID: 'flow', pointRadius: 0, tension: .25 },
- { label: 'Water level (m)', data: sampled.map((row) => row.water_level), borderColor: '#d99018', yAxisID: 'level', pointRadius: 0, tension: .25 },
- ...(predSeries ? [{ label: 'Model 24 h peak (as issued)', data: predSeries, borderColor: '#7c4fd0', borderDash: [6, 4], yAxisID: 'level', pointRadius: 0, tension: .25, spanGaps: true }] : [])
+ { label: t('chart.discharge'), data: sampled.map((row) => row.discharge), borderColor: '#087da5', backgroundColor: 'rgba(8,125,165,.12)', yAxisID: 'flow', pointRadius: 0, tension: .25 },
+ { label: t('chart.level'), data: sampled.map((row) => row.water_level), borderColor: '#d99018', yAxisID: 'level', pointRadius: 0, tension: .25 },
+ ...(predSeries ? [{ label: t('chart.model'), data: predSeries, borderColor: '#7c4fd0', borderDash: [6, 4], yAxisID: 'level', pointRadius: 0, tension: .25, spanGaps: true }] : [])
]
},
options: {
@@ -722,9 +1229,12 @@
}
}]
});
- $('history-status').textContent = rows.length ? `${rows.length} measurements${sampled.length !== rows.length ? ` (${sampled.length} daily averages)` : ''}` : 'No measurements in this period';
+ $('history-status').textContent = rows.length
+ ? t('history.count', rows.length.toLocaleString(loc()),
+ sampled.length !== rows.length ? t('history.count.daily', sampled.length.toLocaleString(loc())) : '')
+ : t('history.empty');
} catch (error) {
- $('history-status').textContent = `History unavailable: ${error.message}`;
+ $('history-status').textContent = t('history.unavailable', error.message);
}
}
@@ -749,6 +1259,7 @@
function renderList(stations, readings) {
const container = $('river-flow');
+ state.lastRender = { stations, readings };
container.replaceChildren();
const ordered = [...stations].sort((a, b) => {
const af = readings.get(a.station_code)?.discharge;
@@ -760,8 +1271,10 @@
const flow = measurement?.discharge == null ? null : Number(measurement.discharge);
const row = document.createElement('button');
row.type = 'button'; row.className = 'station-row';
+ const primary = state.lang === 'th' ? station.thai_name : station.english_name;
+ const secondary = state.lang === 'th' ? station.english_name : station.thai_name;
row.innerHTML = `${escapeHtml(station.station_code)}
- ${escapeHtml(station.english_name)}${escapeHtml(station.thai_name)}
+ ${escapeHtml(primary || station.english_name)}${escapeHtml(secondary || '')}
${flow == null ? '—' : flow.toFixed(1)}m³/s`;
row.addEventListener('click', () => {
const marker = state.markers.get(station.station_code);
@@ -774,12 +1287,13 @@
function renderThaiWaterSensors(sensors, existingCodes) {
const container = $('thaiwater-sensors');
+ state.lastSensors = { sensors, codes: existingCodes };
container.replaceChildren();
const additional = sensors
.filter((sensor) => !existingCodes.has(sensor.station_code))
.sort((a, b) => (Number(b.bank_percent) || -1) - (Number(a.bank_percent) || -1));
state.hiiReportingCount = additional.length;
- $('thaiwater-count').textContent = `${additional.length} Ping basin stations · ThaiWater/HII water level`;
+ $('thaiwater-count').textContent = t('sensors.count', additional.length);
additional.forEach((sensor) => {
const percent = sensor.bank_percent == null ? null : Number(sensor.bank_percent);
// ThaiWater situation bands by % of bank capacity: over-bank red,
@@ -796,11 +1310,11 @@
iconSize: [22, 22], iconAnchor: [11, 11], popupAnchor: [0, -11]
});
const gauge = sensor.offset_msl != null && sensor.water_level_msl != null
- ? ` (${(Number(sensor.water_level_msl) - Number(sensor.offset_msl)).toFixed(2)} m gauge)` : '';
- const level = sensor.water_level_msl == null ? 'No data' : `${Number(sensor.water_level_msl).toFixed(2)} m MSL${gauge}`;
- const bank = sensor.distance_to_bank == null ? 'Unknown' : `${Number(sensor.distance_to_bank).toFixed(2)} m below bank`;
+ ? t('popup.gauge', (Number(sensor.water_level_msl) - Number(sensor.offset_msl)).toFixed(2)) : '';
+ const level = sensor.water_level_msl == null ? t('common.nodata') : `${metres(sensor.water_level_msl)} MSL${gauge}`;
+ const bank = sensor.distance_to_bank == null ? t('common.unknown') : t('popup.belowbank', Number(sensor.distance_to_bank).toFixed(2));
const marker = L.marker([sensor.latitude, sensor.longitude], { icon, title: `${sensor.station_code} ${sensor.station_name}` })
- .bindPopup(``)
+ .bindPopup(() => ``)
.addTo(state.map);
state.layers.push(marker);
state.markers.set(`thaiwater:${sensor.station_code}`, marker);
@@ -808,7 +1322,7 @@
const row = document.createElement('button');
row.type = 'button'; row.className = 'station-row';
const codeClass = sensor.station_code.length > 5 ? 'station-code long' : 'station-code';
- row.innerHTML = `${escapeHtml(sensor.station_code)}${escapeHtml(sensor.station_name)}${escapeHtml(sensor.river_name || 'Ping basin')} · ThaiWater${percent == null ? '—' : percent.toFixed(0) + '%'}of bank height`;
+ row.innerHTML = `${escapeHtml(sensor.station_code)}${escapeHtml(sensor.station_name)}${escapeHtml(sensor.river_name || t('popup.basin'))} · ThaiWater${percent == null ? '—' : percent.toFixed(0) + '%'}${escapeHtml(t('flow.bank'))}`;
row.addEventListener('click', () => { state.map.flyTo(marker.getLatLng(), Math.max(state.map.getZoom(), 11), { duration: .8 }); marker.openPopup(); });
container.appendChild(row);
});
@@ -821,19 +1335,21 @@
const level = state.p1Now;
const fc = state.p1Forecast24; // {p_warning, p_danger, predicted_max_level} or null
if (level == null && !fc) { banner.style.display = 'none'; return; }
+ const levelText = level == null ? '—' : metres(level);
let cls, icon, text;
if (level != null && level >= 3.7) {
cls = 'danger'; icon = '🛑';
- text = `Chiang Mai city flooding stage reached — river at ${level.toFixed(2)} m (flooding starts at 3.70 m)`;
+ text = t('verdict.flooding', level.toFixed(2));
} else if (fc && (fc.p_danger >= .5 || fc.p_warning >= .7)) {
cls = 'danger'; icon = '🛑';
- text = `Flooding likely — the river may reach warning level within 24 h (now ${level == null ? '—' : level.toFixed(2) + ' m'}, warning at 3.70 m)`;
+ text = t('verdict.likely', levelText);
} else if ((fc && fc.p_warning >= .2) || (level != null && level >= 3.2)) {
cls = 'watch'; icon = '⚠️';
- text = `Watch — river elevated at ${level == null ? '—' : level.toFixed(2) + ' m'}; ${fc ? Math.round(fc.p_warning * 100) + '% chance of reaching the 3.70 m warning level within 24 h' : 'monitor conditions'}`;
+ text = t('verdict.watch', levelText,
+ fc ? t('verdict.watch.chance', Math.round(fc.p_warning * 100)) : t('verdict.watch.monitor'));
} else {
cls = 'ok'; icon = '✓';
- text = `No Chiang Mai city flooding expected in the next 24 h — river at ${level == null ? '—' : level.toFixed(2) + ' m'}, flooding starts at 3.70 m`;
+ text = t('verdict.ok', levelText);
}
banner.className = cls;
$('verdict-icon').textContent = icon;
@@ -847,7 +1363,7 @@
const latest = timestamps.length ? new Date(Math.max(...timestamps.map((date) => date.getTime()))) : null;
$('station-count').textContent = `${current.length} / ${stations.length}`;
if (state.hiiReportingCount != null) {
- $('station-count-note').textContent = `RID gauges · +${state.hiiReportingCount} ThaiWater/HII reporting`;
+ $('station-count-note').textContent = t('stat.stations.note.hii', state.hiiReportingCount);
}
// Flow at the basin anchor (summing sequential mainstem gauges would
// double-count the same water, so no basin-wide total is shown).
@@ -855,19 +1371,20 @@
if (p1?.water_level != null) state.p1Now = Number(p1.water_level);
updateFloodVerdict();
const p1Flow = p1?.discharge == null ? null : Number(p1.discharge);
- $('total-flow').textContent = p1Flow == null ? '—' : p1Flow.toLocaleString(undefined, { maximumFractionDigits: 1 });
- $('cm-flow-note').textContent = 'P.1 Nawarat Bridge · m³/s'; // capacity % lives in the next tile
+ $('total-flow').textContent = p1Flow == null ? '—' : p1Flow.toLocaleString(loc(), { maximumFractionDigits: 1 });
+ $('cm-flow-note').textContent = t('stat.flow.note'); // capacity % lives in the next tile
const stressed = current
.filter((m) => m.discharge_percent != null)
.map((m) => ({ code: m.station_code, percent: Number(m.discharge_percent) }));
const worst = stressed.length ? stressed.reduce((max, item) => item.percent > max.percent ? item : max) : null;
$('peak-flow').textContent = worst ? `${worst.percent.toFixed(0)}%` : '—';
- $('peak-station').textContent = worst ? `${worst.code} · of channel capacity` : 'No capacity data';
- $('last-updated').textContent = latest ? latest.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '—';
+ $('peak-station').textContent = worst ? t('stat.stress.capacity', worst.code) : t('stat.stress.nodata');
+ $('last-updated').textContent = latest ? latest.toLocaleTimeString(loc(), { hour: '2-digit', minute: '2-digit' }) : '—';
if (latest) {
const minutes = Math.max(0, Math.round((Date.now() - latest.getTime()) / 60000));
- $('data-age').textContent = `${latest.toLocaleDateString([], { day: 'numeric', month: 'short' })} · ${minutes} min ago`;
- } else $('data-age').textContent = 'No timestamp available';
+ $('data-age').textContent = t('stat.updated.ago',
+ latest.toLocaleDateString(loc(), { day: 'numeric', month: 'short' }), minutes);
+ } else $('data-age').textContent = t('stat.updated.none');
}
async function loadDashboard() {
@@ -910,6 +1427,7 @@
sensors = thaiWaterResponse && thaiWaterResponse.ok ? await thaiWaterResponse.json() : [];
}
const readings = latestByStation(measurements);
+ state.lastRiverNetwork = riverNetwork; // reused when the language changes
renderMap(stations, readings, riverNetwork);
renderRainLayer(rainRecords);
renderList(stations, readings);
@@ -973,13 +1491,13 @@
const level = Number(feature.properties.level);
const st = zoneStage(zone);
const flooded = state.p1Now != null && state.p1Now >= level;
- return ``;
}
async function showFloodZones(fly) {
@@ -994,13 +1512,13 @@
zoneLayer = L.geoJSON(zoneData, { style: zoneStyle })
.bindPopup((layer) => zonePopupHtml(layer.feature))
.addTo(state.map);
- if (button) button.textContent = 'Hide flood zones';
+ if (button) button.textContent = t('zones.hide');
if (fly) {
state.map.flyToBounds(zoneLayer.getBounds(), { maxZoom: 13, duration: .8 });
document.getElementById('station-map').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
} catch (error) {
- if (button) button.textContent = 'Flood zones unavailable';
+ if (button) button.textContent = t('zones.unavailable');
}
}
@@ -1010,7 +1528,7 @@
zoneLayer = null;
state.zonesUserHidden = true; // don't auto-show again this session
const button = $('zones-toggle');
- if (button) button.textContent = 'Show flood zones on map';
+ if (button) button.textContent = t('zones.show');
} else {
state.zonesUserHidden = false;
showFloodZones(true);
@@ -1049,21 +1567,21 @@
function poiPopupHtml(poi) {
const zone = zoneOfPoint(poi.lat, poi.lon);
- let riskHtml = '';
+ let riskHtml = ``;
if (zone) {
const st = zoneStage(zone.properties.zone);
riskHtml = ``;
}
- return ``;
+ return ``;
}
function endReplay() {
if (state.replayTimer) window.clearInterval(state.replayTimer);
state.replayTimer = null;
- $('replay-2024').textContent = '▶ Replay Oct 2024 flood';
+ $('replay-2024').textContent = t('replay.start');
$('replay-clock').style.display = 'none';
setLiveIndicator('live');
loadDashboard(); // restore live markers, river, zones
@@ -1072,7 +1590,7 @@
async function replayFlood2024() {
const button = $('replay-2024');
if (state.replayTimer) { endReplay(); return; }
- button.textContent = 'Loading 2024 data…';
+ button.textContent = t('replay.loading');
try {
const response = await fetch('/static/flood-2024-all.json');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
@@ -1081,8 +1599,8 @@
if (n < 10) throw new Error('snapshot empty');
state.zonesUserHidden = false;
await showFloodZones(false);
- button.textContent = '⏹ Stop replay';
- setLiveIndicator('replay', '⏪ 2024 REPLAY');
+ button.textContent = t('replay.stop');
+ setLiveIndicator('replay', 'pill.replay');
$('replay-clock').style.display = 'block';
let i = 0;
state.replayTimer = window.setInterval(() => {
@@ -1102,20 +1620,22 @@
});
// stat tiles follow the replay (restored by loadDashboard on finish)
const p1ReplayQ = data.stations['P.1'] ? data.stations['P.1'].discharge[frame] : null;
- $('total-flow').textContent = p1ReplayQ == null ? '—' : Number(p1ReplayQ).toLocaleString(undefined, { maximumFractionDigits: 1 });
- $('cm-flow-note').textContent = 'P.1 Nawarat Bridge · m³/s · 2024 replay';
+ $('total-flow').textContent = p1ReplayQ == null ? '—' : Number(p1ReplayQ).toLocaleString(loc(), { maximumFractionDigits: 1 });
+ $('cm-flow-note').textContent = t('stat.flow.note.replay');
$('peak-flow').textContent = peakFlow ? peakFlow.value.toFixed(0) : '—';
- $('peak-station').textContent = peakFlow ? `${peakFlow.code} · strongest flow · m³/s · 2024 replay` : 'No discharge reported';
+ $('peak-station').textContent = peakFlow ? t('replay.stress', peakFlow.code) : t('replay.nodischarge');
restyleRiver(readings);
const p1Level = data.stations['P.1'] ? data.stations['P.1'].level[frame] : null;
if (p1Level != null) state.p1Now = Number(p1Level);
restyleFloodZones();
const ts = new Date(data.timestamps[frame]);
- const when = ts.toLocaleString([], { day: 'numeric', month: 'short', hour: '2-digit' });
- const p1Text = state.p1Now == null ? '—' : state.p1Now.toFixed(2) + ' m';
- $('p1-peak').textContent = `⏪ 2024 flood replay · ${when} · P.1 at ${p1Text} · basin flow ${Math.round(totalFlow).toLocaleString()} m³/s`;
- $('replay-clock-time').textContent = ts.toLocaleString([], { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
- $('replay-clock-sub').textContent = `P.1 ${p1Text} · basin flow ${Math.round(totalFlow).toLocaleString()} m³/s`;
+ // minute included: a lone "17" reads as a year in Thai output
+ const when = ts.toLocaleString(loc(), { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
+ const p1Text = state.p1Now == null ? '—' : metres(state.p1Now);
+ const basinFlow = Math.round(totalFlow).toLocaleString(loc());
+ $('p1-peak').textContent = t('replay.peak', when, p1Text, basinFlow);
+ $('replay-clock-time').textContent = ts.toLocaleString(loc(), { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+ $('replay-clock-sub').textContent = t('replay.clock.sub', p1Text, basinFlow);
// model track: what the forecast system (trained pre-flood) said at this moment
const model = data.model || {};
const pWarn = model.p_warn24 ? model.p_warn24[frame] : null;
@@ -1137,16 +1657,17 @@
}
const alertEl = $('replay-alert');
if (state.p1Now != null && state.p1Now >= 3.70) {
- alertEl.textContent = '🌊 FLOODING · river above stage 1 (3.70 m)';
+ alertEl.textContent = t('replay.flooding');
alertEl.className = 'replay-alert flood';
} else if (pWarn != null && pWarn >= 0.5) {
- alertEl.textContent = `⚠ MODEL ALERT · flooding within 24 h likely${predMax != null ? ` · predicted peak ${predMax.toFixed(2)} m` : ''}`;
+ alertEl.textContent = t('replay.alert',
+ predMax != null ? t('replay.alert.peak', predMax.toFixed(2)) : '');
alertEl.className = 'replay-alert warn';
} else if (pWarn != null && pWarn >= 0.2) {
- alertEl.textContent = `model: elevated flood risk (${Math.round(pWarn * 100)}% within 24 h)`;
+ alertEl.textContent = t('replay.elevated', Math.round(pWarn * 100));
alertEl.className = 'replay-alert note';
} else {
- alertEl.textContent = pWarn == null ? '' : 'model: no flood expected';
+ alertEl.textContent = pWarn == null ? '' : t('replay.noflood');
alertEl.className = 'replay-alert note';
}
// Variable speed: race through quiet days, slow to hour-by-hour while
@@ -1158,7 +1679,7 @@
if (i >= n + 40) endReplay(); // hold the last frame briefly
}, 120);
} catch (error) {
- button.textContent = `Replay unavailable: ${error.message}`;
+ button.textContent = t('replay.unavailable', error.message);
}
}
@@ -1203,8 +1724,8 @@
const chip = document.createElement('div');
chip.className = 'stage-chip';
chip.setAttribute('style', chipStyle(stageColor(s.p_exceed)));
- chip.title = `Stage ${s.stage}: river at ${s.level.toFixed(2)} m — ${Math.round(s.p_exceed * 100)}% within ${horizonHours} h`;
- chip.innerHTML = `${Math.round(s.p_exceed * 100)}%S${s.stage} · ${s.level.toFixed(2)} m`;
+ chip.title = t('stage.tip', s.stage, s.level.toFixed(2), Math.round(s.p_exceed * 100), horizonHours);
+ chip.innerHTML = `${Math.round(s.p_exceed * 100)}%${escapeHtml(t('stage.chip', s.stage, s.level.toFixed(2)))}`;
strip.appendChild(chip);
});
}
@@ -1222,20 +1743,22 @@
const demoLevel = Number(params.get('demo_level'));
const simulated = Number.isFinite(demoLevel) && demoLevel > 0;
if (simulated) state.p1Now = demoLevel;
- if ((simulated || params.has('demo_rise')) && !state.replayTimer) setLiveIndicator('sim', '⚠ SIMULATION');
+ if ((simulated || params.has('demo_rise')) && !state.replayTimer) setLiveIndicator('sim', 'pill.sim');
if (params.has('demo_rise') && !state.demoRiseTimer) {
let level = state.p1Now ?? 2.2;
state.demoRiseTimer = window.setInterval(() => {
level = Math.min(level + 0.05, 5.30);
state.p1Now = level;
- $('p1-peak').textContent = `⚠ SIMULATION: rising water · P.1 at ${level.toFixed(2)} m (real: ${Number(row.current_level).toFixed(2)} m)`;
+ $('p1-peak').textContent = t('outlook.sim.rising', level.toFixed(2), Number(row.current_level).toFixed(2));
restyleFloodZones();
if (level >= 5.30) window.clearInterval(state.demoRiseTimer);
}, 700);
}
restyleFloodZones();
- $('p1-peak').textContent = (simulated ? `⚠ SIMULATION: P.1 at ${demoLevel.toFixed(2)} m (real: ${Number(row.current_level).toFixed(2)} m)` :
- `Now ${Number(row.current_level).toFixed(2)} m`) + ` · predicted peak next ${row.horizon_hours} h: ${Number(row.predicted_max_level).toFixed(2)} m`;
+ $('p1-peak').textContent = simulated
+ ? t('outlook.sim', demoLevel.toFixed(2), Number(row.current_level).toFixed(2))
+ : t('outlook.now', Number(row.current_level).toFixed(2), row.horizon_hours,
+ Number(row.predicted_max_level).toFixed(2));
renderStageChips(row.stages, row.horizon_hours);
card.style.display = 'block';
}
@@ -1247,6 +1770,16 @@
if (!response.ok) { card.style.display = 'none'; return; }
const rows = await response.json();
if (!Array.isArray(rows) || !rows.length) { card.style.display = 'none'; return; }
+ renderForecasts(rows);
+ } catch (error) {
+ card.style.display = 'none';
+ }
+ }
+
+ function renderForecasts(rows) {
+ const card = $('forecast-card');
+ try {
+ state.lastForecastRows = rows;
const byStation = new Map();
state.stationThresholds = {};
rows.forEach((row) => {
@@ -1272,24 +1805,25 @@
const chips = list.map((r) => {
const pw = r.p_warning ?? 0, pd = r.p_danger ?? 0;
const pct = Math.round(Math.max(pw, pd) * 100);
- const title = `+${r.horizon_hours}h · warning ${Math.round(pw * 100)}% · danger ${Math.round(pd * 100)}%` +
- (r.predicted_max_level == null ? '' : ` · peak ~${Number(r.predicted_max_level).toFixed(2)} m`) +
- (r.source === 'heuristic' ? ' · heuristic fallback' : '');
+ const title = t('forecast.chip.tip', r.horizon_hours,
+ Math.round(pw * 100), Math.round(pd * 100),
+ r.predicted_max_level == null ? '' : t('forecast.chip.peak', Number(r.predicted_max_level).toFixed(2)),
+ r.source === 'heuristic' ? t('forecast.chip.heuristic') : '');
return `${pct}%${r.horizon_hours}h
`;
}).join('');
cardEl.innerHTML = `${escapeHtml(code)}` +
- `${first.current_level == null ? '' : `now ${Number(first.current_level).toFixed(2)} m · `}peak risk next 24h
` +
+ `${escapeHtml(t('forecast.peakrisk', first.current_level == null ? '' : t('forecast.now', Number(first.current_level).toFixed(2))))}
` +
`${chips}
`;
grid.appendChild(cardEl);
});
- const asOf = rows[0].as_of ? new Date(rows[0].as_of).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : null;
+ const asOf = rows[0].as_of ? new Date(rows[0].as_of).toLocaleString(loc(), { dateStyle: 'medium', timeStyle: 'short' }) : null;
const modelRow = rows.find((r) => r.source === 'model');
- const trainedAt = modelRow?.trained_at ? new Date(modelRow.trained_at).toLocaleDateString([], { day: 'numeric', month: 'short' }) : null;
+ const trainedAt = modelRow?.trained_at ? new Date(modelRow.trained_at).toLocaleDateString(loc(), { day: 'numeric', month: 'short' }) : null;
const modelInfo = modelRow?.model_version
- ? ` · model ${modelRow.model_version}${trainedAt ? ` (trained ${trainedAt})` : ''}`
+ ? t('forecast.status.model', modelRow.model_version, trainedAt ? t('forecast.status.trained', trainedAt) : '')
: '';
- $('forecast-status').textContent = `Probability of exceeding warning / danger level within 6, 12 and 24 h` +
- (asOf ? ` · based on readings up to ${asOf}` : '') + modelInfo;
+ $('forecast-status').textContent = t('forecast.status.full',
+ asOf ? t('forecast.status.asof', asOf) : '', modelInfo);
// Only the P.1 city outlook is shown by default; the per-station
// grid stays collapsed behind the expander.
const expand = $('forecast-expand');
@@ -1297,8 +1831,8 @@
expand.style.display = others ? 'inline-flex' : 'none';
grid.style.display = state.forecastExpanded ? 'grid' : 'none';
expand.textContent = state.forecastExpanded
- ? 'Hide station forecasts ▴'
- : `Show all ${stations.length} station forecasts ▾`;
+ ? t('forecast.collapse')
+ : t('forecast.expand', stations.length);
card.style.display = 'block';
} catch (error) {
card.style.display = 'none';
@@ -1310,20 +1844,32 @@
try {
const response = await fetch('/api/stats');
if (!response.ok) { strip.style.display = 'none'; return; }
- const stats = await response.json();
- const fmtDate = (value) => new Date(value).toLocaleDateString([], { day: 'numeric', month: 'short', year: 'numeric' });
+ renderDbStats(await response.json());
+ } catch (error) {
+ strip.style.display = 'none';
+ }
+ }
+
+ function renderDbStats(stats) {
+ const strip = $('db-stats');
+ try {
+ state.lastStats = stats;
+ const fmtDate = (value) => new Date(value).toLocaleDateString(loc(), { day: 'numeric', month: 'short', year: 'numeric' });
state.dbFirstDate = String(stats.first_timestamp).slice(0, 10); // feeds the All-time date range
- $('db-total').textContent = Number(stats.total_measurements).toLocaleString();
+ $('db-total').textContent = Number(stats.total_measurements).toLocaleString(loc());
if (stats.rid_measurements != null) {
- const fmtNum = (value) => Number(value || 0).toLocaleString();
+ const fmtNum = (value) => Number(value || 0).toLocaleString(loc());
const openmeteo = stats.openmeteo_rain_measurements
- ? ` · ${fmtNum(stats.openmeteo_rain_measurements)} forecast rain`
+ ? t('db.total.openmeteo', fmtNum(stats.openmeteo_rain_measurements))
: '';
- $('db-total-note').textContent = `${fmtNum(stats.rid_measurements)} RID · ${fmtNum(stats.hii_waterlevel_measurements)} HII level · ${fmtNum(stats.hii_rainfall_measurements)} rain${openmeteo}`;
- $('db-stations-note').textContent = `${stats.rid_station_count} RID · ${stats.hii_station_count} ThaiWater/HII`;
+ $('db-total-note').textContent = t('db.total.breakdown',
+ fmtNum(stats.rid_measurements), fmtNum(stats.hii_waterlevel_measurements),
+ fmtNum(stats.hii_rainfall_measurements), openmeteo);
+ $('db-stations-note').textContent = t('db.stations.breakdown',
+ stats.rid_station_count, stats.hii_station_count);
}
$('db-range').textContent = `${fmtDate(stats.first_timestamp)} – ${fmtDate(stats.last_timestamp)}`;
- $('db-days').textContent = Number(stats.days_spanned).toLocaleString();
+ $('db-days').textContent = Number(stats.days_spanned).toLocaleString(loc());
$('db-stations').textContent = String(stats.station_count);
$('db-coverage').textContent = stats.coverage_percent == null ? '—' : `${Number(stats.coverage_percent).toFixed(1)}%`;
strip.style.display = 'grid';
@@ -1340,9 +1886,10 @@
$('forecast-expand').setAttribute('aria-expanded', String(state.forecastExpanded));
const count = $('forecast-grid').children.length;
$('forecast-expand').textContent = state.forecastExpanded
- ? 'Hide station forecasts ▴'
- : `Show all ${count} station forecasts ▾`;
+ ? t('forecast.collapse')
+ : t('forecast.expand', count);
});
+ $('lang-toggle').addEventListener('click', () => setLang(state.lang === 'th' ? 'en' : 'th'));
$('station-search').addEventListener('input', applyStationSearch);
$('sensors-head').addEventListener('click', () => setSensorsOpen(!state.sensorsOpen));
$('sensors-head').addEventListener('keydown', (event) => {
@@ -1366,18 +1913,19 @@
? (state.dbFirstDate || '2018-08-01') // All time: DB's first record
: isoLocal(new Date(now.getTime() - hours * 3600 * 1000));
if (state.selectedStation) loadHistory(state.selectedStation);
- else $('history-status').textContent = 'Select a station first — click one on the map or in the list';
+ else $('history-status').textContent = t('history.selectfirst');
});
['history-start', 'history-end'].forEach((id) => $(id).addEventListener('change', () => {
state.useDates = true;
$('history-range').value = 'custom'; // dropdown no longer describes the window
if (state.selectedStation) loadHistory(state.selectedStation);
- else $('history-status').textContent = 'Select a station first — click one on the map or in the list';
+ else $('history-status').textContent = t('history.selectfirst');
}));
$('legend-toggle').addEventListener('click', () => {
const open = $('map-legend').classList.toggle('open');
$('legend-toggle').setAttribute('aria-expanded', String(open));
});
+ applyTranslations(); // before the first paint of any dynamic content
loadDashboard();
// Skip auto-refresh while the 2024 replay is running (it would clobber replay state)
window.setInterval(() => { if (!state.replayTimer) loadDashboard(); }, 5 * 60 * 1000);
diff --git a/tests/test_dashboard.py b/tests/test_dashboard.py
index e0ad3ee..fe1723f 100644
--- a/tests/test_dashboard.py
+++ b/tests/test_dashboard.py
@@ -14,12 +14,18 @@ def test_dashboard_contains_live_map_and_flow_visualization():
assert "leaflet" in html.lower()
-def test_dashboard_explains_flow_legend_and_refresh():
- html = DASHBOARD_PATH.read_text(encoding="utf-8")
+def _body(html: str) -> str:
+ """Markup only. The STRINGS table repeats every English phrase, so a
+ whole-file search would pass even if an element were deleted."""
+ return html[html.index(""):html.index("