The project can be reached from
http://www.marco-tsang.com/build/spaceapps2020.html
A clear sleep & rest timetable is essential for spaceman to follow. It is also more preferable to have different view modes to choose. The Timeline Day View can provide an idea for viewer how the spaceman taking rest, nutrition and exercise in a day in space. Moreover, the Week View can give spaceman to plan who will be on duty the next few days.
The timetable puts Chris, Anatoly and Ivan together in rows and columns, according to your choice of viewing mode, and then compares. Drag and drop is available in adjusting the schedule's data in real time, but if you want to store the change that you made, it can only be modified in React local data.
I was finding a project that can help me be familiar with Front-end Tools like JavaScript and React, and I discovered that this sleep schedule is within my capability after doing some searches on tools available online. The product of Syncfusion can help me do the job perfectly. It needs more time for me to do the Back-end jobs like storing changes for every editing, and it is out of my abilities at this stage.
I use the sleep schedule from NASA:
https://www.nasa.gov/sites/default/files/thumbnails/image/sleep_schedule.jpg
I found out spaceman sleeps for 6 hours, and there is 1 hour break before sleep. There is also another break after 7 hours of workings, which includes 2 hours nap. As a result, I assign nutrition and exercise to the two empty breaks.