HKO Weather Simulation Website

To provide a website that can simulate pass weather cases, is to for HKo's SO / EO to remember again the whole process, from monitoring the status, do analysis, and how to send notice though MINDS / Bulletin. Also, this will be a great opportunity for new staff to learn and understand the real-world process.

This website is build with next.js, include an admin panel for user to manage the weather case, no need to handle the creation / modify by writing code. While I recreate the webiste with better database structure, with session manage, now support multiple student login with doing different weather cases.

Also, as there are external website, like monitoring tools, those website will display the data on current time. I have modify an google extension Time Traveller, to support modify the datetime before the website been rendering, so I can set a fake datetime before the website call the js new Date. For smoother process, I also created an API bridge on that extension, so now when student like on the start button of any of the weather case, there will be API call to the extension to auto modify the datetime.

On user / student input, I created Editor via library BlockNote, which support words like editor, and user can modify the content easily without coding and also support different file upload.

Besides the external website, this website support images and tasks to show based on the simulation time. For example, let use Saola (蘇拉) TCID 2318 as an example. The weather case start time is on 2023-09-01 17:30; And let say start time of this simluation is 2025-08-01 12:00; And there are tasks for this weather case and the tasks are like show at 2023-09-01 17:30, 2023-09-01 17:40, 2023-09-01 17:50 ...; My database design will be save the real-time after user click on the start time, and calculate the passed time on current real-time - start time; Then add this result to the simluation datetime, so IF current time is 2025-08-01 12:30:

(Current Time) - (Start Time) = (2025-08-01 12:30) - (2025-08-01 12:00) = Passed 30 mins

(Weather Simluation Start Time ) + (Passed Time) = (2023-09-01 17:30) + (30 mins) = 2023-09-01 18:00, So the simluation time will be 2023-09-01 18:00

All tasks that show time is before 2023-09-01 18:00 will be shown, while other will be hidden. This structure support no changes on the PC system time and do not effect on opening other external services. image image