HKO 氣象模擬網站

這個網站旨在提供能夠模擬過去氣象案例的平台，讓 HKO 的 SO / EO 可以再次回顧整個過程，從監控狀態、進行分析，到如何透過 MINDS / Bulletin 發送通知。此外，這對新員工來說，也是學習和了解真實世界流程的好機會。

這個網站是使用 next.js 建立的，並且包含一個管理員面板，讓用戶可以管理氣象案例，無需透過編寫程式碼來處理創建或修改。當我重建網站時，採用了更好的資料庫結構，並增加了會話管理，現在支援多個學生登入並進行不同的氣象案例模擬。

此外，還有一些外部網站，如監控工具，這些網站會顯示當前時間的數據。我修改了一個 Google 擴展 Time Traveller，使其支持在網站渲染前修改日期和時間，這樣我可以在網站呼叫 js 的新日期之前設置「假日期時間」。為了讓過程更順暢，我還在該擴展中創建了一個 API 橋接，這樣當學生按下任何氣象案例的開始按鈕時，就會有 API 呼叫該擴展，並自動修改日期和時間。

在用戶 / 學生輸入方面，我通過 BlockNote 庫創建了編輯器，該編輯器支持類似文字處理的功能，並且用戶可以輕鬆地修改內容，無需編碼，還支持不同格式的文件上傳。

除了外部網站，這個網站還支持根據模擬時間顯示圖片和任務。例如，讓我們以蘇拉 (Saola) TCID 2318 為例。該氣象案例的開始時間為 2023-09-01 17:30；假設模擬的開始時間為 2025-08-01 12:00；此氣象案例還有任務，這些任務的顯示時間為 2023-09-01 17:30、2023-09-01 17:40、2023-09-01 17:50 等等；我的資料庫設計會在用戶點擊開始時間後保存實際時間，並計算當前實際時間與開始時間之間的時間差；然後將這個結果加到模擬日期時間上，因此如果當前時間是 2025-08-01 12:30：

(當前時間) - (開始時間) = (2025-08-01 12:30) - (2025-08-01 12:00) = 已過 30 分鐘

(氣象模擬開始時間) + (已過時間) = (2023-09-01 17:30) + (30 分鐘) = 2023-09-01 18:00，則模擬時間將為 2023-09-01 18:00

所有顯示時間在 2023-09-01 18:00 之前的任務將顯示，其他的將隱藏。這個結構支持無需更改 PC 系統時間，且不會影響打開其他外部服務。