UI/UX Update

hkbus · Mar 31, 2024 · c42cd94 · c42cd94
1 parent 80a4ae0
commit c42cd94
Showing 1 changed file with 90 additions and 3 deletions.
diff --git a/src/components/route-eta/TimetableDrawer.tsx b/src/components/route-eta/TimetableDrawer.tsx
@@ -12,6 +12,7 @@ import { useContext, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import AppContext from "../../AppContext";
 import RouteOffiicalUrlBtn from "./timetableDrawer/RouteOfficialUrlBtn";
+import { isHoliday } from "../../timetable";
 
 interface TimetableDrawerProps {
   routeId: string;
@@ -22,10 +23,15 @@ interface TimetableDrawerProps {
 const TimetableDrawer = ({ routeId, open, onClose }: TimetableDrawerProps) => {
   const { t } = useTranslation();
   const {
-    db: { routeList },
+    db: { routeList, holidays },
   } = useContext(AppContext);
   const { freq, jt } = routeList[routeId];
 
+  const isTodayHoliday = useMemo(
+    () => isHoliday(holidays, new Date()),
+    [holidays]
+  );
+
   const modalProps = useMemo(() => {
     return {
       onClose: () => {
@@ -58,7 +64,7 @@ const TimetableDrawer = ({ routeId, open, onClose }: TimetableDrawerProps) => {
           <Divider sx={{ width: "80%" }} />
         </>
       )}
-      <List>
+      <List sx={{ flex: 1, overflow: "auto" }}>
         {freq &&
           Object.entries(freq).map(([serviceId, dayFreq]) => (
             <ListItem key={serviceId} sx={entriesSx}>
@@ -68,7 +74,19 @@ const TimetableDrawer = ({ routeId, open, onClose }: TimetableDrawerProps) => {
               {Object.entries(dayFreq)
                 .sort((a, b) => (a[0] < b[0] ? -1 : 1))
                 .map(([start, details]) => (
-                  <Box key={`${serviceId}-${start}`} sx={freqContainerSx}>
+                  <Box
+                    key={`${serviceId}-${start}`}
+                    sx={
+                      isCurrentTimeslot(
+                        start,
+                        details,
+                        serviceId,
+                        isTodayHoliday
+                      )
+                        ? highlightContainerSx
+                        : freqContainerSx
+                    }
+                  >
                     <Typography variant="body1">
                       {start} {details ? `- ${details[0]}` : ""}
                     </Typography>
@@ -124,6 +142,40 @@ const ServiceIds: Record<string, string> = {
   999: "未知日子",
 };
 
+const ServiceMaps: Record<
+  string,
+  [boolean, boolean, boolean, boolean, boolean, boolean, boolean]
+> = {
+  31: [false, true, true, true, true, true, false], // "星期一至五"
+  287: [false, true, true, true, true, true, false], // "星期一至五"
+  415: [false, true, true, true, true, true, false], // "星期一至五"
+  63: [false, true, true, true, true, true, true], // "星期一至六"
+  319: [false, true, true, true, true, true, true], // "星期一至六"
+  447: [false, true, true, true, true, true, true], // "星期一至六"
+  416: [true, false, false, false, false, false, true], // "星期六至日"
+  480: [true, false, false, false, false, false, true], // "星期六至日"
+  266: [false, false, true, true, true, false, false], // "星期二至四",
+  271: [false, true, true, true, true, false, false], // "星期一至四",
+  272: [false, false, false, false, false, true, false], // "星期五"
+  288: [false, false, false, false, false, false, true], // "星期六",
+  320: [true, false, false, false, false, false, false], // "星期日及公眾假期",
+  448: [true, false, false, false, false, false, false], // "星期日及公眾假期",
+  511: [true, true, true, true, true, true, true], // "所有日子",
+  111: [true, true, true, false, true, true, true], // "除星期三外",
+  1: [false, true, false, false, false, false, false], // "星期一",
+  2: [false, false, true, false, false, false, false], // "星期二",
+  4: [false, false, false, true, false, false, false], // "星期三",
+  8: [false, false, false, false, true, false, false], // "星期四",
+  16: [false, false, false, false, false, true, false], // "星期五",
+  32: [false, false, false, false, false, false, true], // "星期六",
+  64: [true, false, false, false, false, false, false], // "星期日",
+  257: [false, true, false, false, false, false, false], // "星期一",
+  258: [false, false, true, false, false, false, false], // "星期二",
+  260: [false, false, false, true, false, false, false], // "星期三",
+  264: [false, false, false, false, true, false, false], // "星期四",
+  999: [false, false, false, false, false, false, false], // "未知日子",
+};
+
 const drawerSx: SxProps<Theme> = {
   height: "100vh",
   width: "80%",
@@ -132,6 +184,7 @@ const drawerSx: SxProps<Theme> = {
   paddingLeft: "20px",
   backgroundColor: (theme) => theme.palette.background.default,
   backgroundImage: "none",
+  overflow: "hidden",
 };
 
 const entriesSx: SxProps<Theme> = {
@@ -150,3 +203,37 @@ const freqContainerSx: SxProps<Theme> = {
   justifyContent: "space-between",
   width: "80%",
 };
+
+const highlightContainerSx: SxProps<Theme> = {
+  display: "flex",
+  justifyContent: "space-between",
+  width: "80%",
+  color: (t) => t.palette.primary.main,
+  borderBottom: "1px solid",
+};
+
+const isMatchServiceId = (serviceId: string, isHoliday: boolean): boolean => {
+  const day = new Date().getDay();
+  if (
+    ServiceMaps[serviceId] &&
+    (ServiceMaps[serviceId][day] || (ServiceMaps[serviceId][0] && isHoliday))
+  ) {
+    return true;
+  }
+  return false;
+};
+
+const isCurrentTimeslot = (
+  start: string,
+  details: [string, string] | null,
+  serviceId: string,
+  isHoliday: boolean
+): boolean => {
+  if (!isMatchServiceId(serviceId, isHoliday)) return false;
+  const date = new Date();
+  const ts = `${date.getHours()}${date.getMinutes()}`;
+  if (details) {
+    return start <= ts && ts <= details[0];
+  }
+  return false;
+};