Replace Bootstrap with Material UI

sncf-station/src/TrainsTable.js

@@ -1,24 +1,51 @@
 import {useEffect, useState} from "react";
+import {
+  Box,
+  Paper,
+  styled,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from "@mui/material";
+
+const StyledTableRow = styled(TableRow)(({ theme, tableType }) => ({
+  'tbody &:nth-of-type(odd)': {
+    backgroundColor: theme.palette.sncf[tableType].light,
+  },
+  'th, &:nth-of-type(even)': {
+    backgroundColor: theme.palette.sncf[tableType].dark,
+  },
+  // hide last border
+  '&:last-child td, &:last-child th': {
+    border: 0,
+  },
+}));
 
 function TrainsTable({stop, date, time, tableType}) {
-  let tableClass = tableType === "departures" ? "table-departures" : "table-arrivals"
-  tableClass = `table table-striped ${tableClass}`
   return <>
-    <table className={tableClass}>
-      <TrainsTableHeader />
-      <TrainsTableBody stop={stop} date={date} time={time} tableType={tableType} />
-    </table>
+    <TableContainer>
+      <Table>
+        <TrainsTableHeader tableType={tableType} />
+        <TrainsTableBody stop={stop} date={date} time={time} tableType={tableType} />
+      </Table>
+    </TableContainer>
   </>
 }
 
-function TrainsTableHeader() {
-  return <thead>
-    <tr>
-      <th className="px-3 py-1" scope="col" colSpan="2">Train</th>
-      <th className="px-3 py-1" scope="col">Heure</th>
-      <th className="px-3 py-1" scope="col">Destination</th>
-    </tr>
-  </thead>
+function TrainsTableHeader({tableType}) {
+  return <>
+    <TableHead>
+      <StyledTableRow tableType={tableType}>
+        <TableCell colSpan="2" fontSize={16} fontWeight="bold">Train</TableCell>
+        <TableCell fontSize={16} fontWeight="bold">Heure</TableCell>
+        <TableCell fontSize={16} fontWeight="bold">Destination</TableCell>
+      </StyledTableRow>
+    </TableHead>
+  </>
 }
 
 function TrainsTableBody({stop, date, time, tableType}) {
@@ -37,9 +64,9 @@ function TrainsTableBody({stop, date, time, tableType}) {
 
   let table_rows = trains.map((train) => <TrainRow train={train} tableType={tableType} />)
 
-  return <tbody>
+  return <TableBody>
     {table_rows}
-  </tbody>
+  </TableBody>
 }
 
 function TrainRow({train, tableType}) {
@@ -94,47 +121,50 @@ function TrainRow({train, tableType}) {
   }, [trip.route])
 
   let headline = stopTimes[tableType === "departures" ? stopTimes.length - 1 : 0]?.stop ?? {name: "Chargement…"}
-  let stops_names = stopTimes.filter(stop_time => tableType === "departures" ? stop_time.stop_sequence > train.stop_sequence : stop_time.stop_sequence < train.stop_sequence)
-    .map(stop_time => stop_time?.stop.name ?? "").join(", ")
 
-  let style = {
-    width: "4em",
-    height: "4em",
-    borderRadius: "15%",
-    backgroundColor: `#${getBackgroundColor(train, route)}`,
-    color: `#${getTextColor(train, route)}`,
-    fontWeight: "bold",
-  }
+  let stops_filter
+  if (tableType === "departures")
+    stops_filter = (stop_time) => stop_time.stop_sequence > train.stop_sequence && stop_time.drop_off_type === 0
+  else
+    stops_filter = (stop_time) => stop_time.stop_sequence < train.stop_sequence && stop_time.pickup_type === 0
+  let stops_names = stopTimes.filter(stops_filter).map(stop_time => stop_time?.stop.name ?? "").join(", ")
 
   return <>
-    <tr className="h-100">
-      <td className="h-100">
-        <div className="train-type d-flex h-100 align-items-center justify-content-center">
-          <div
-            className="transilien-route d-flex align-items-center justify-content-center font-weight-bold small p-1 m-2 text-center text-wrap"
-            style={style}>
-            {trainType}
-        </div>
-      </div>
-    </td>
-    <td className="h-100">
-      <div className="train-number d-flex align-items-center justify-content-center h-100">
+    <StyledTableRow tableType={tableType}>
+      <TableCell>
         <div>
-          <div>{trip.short_name}</div>
-          <div>{trip.headsign}</div>
+          <Box display="flex"
+               justifyContent="center"
+               alignItems="center"
+               textAlign="center"
+               width="4em"
+               height="4em"
+               borderRadius="15%"
+               fontWeight="bold"
+               backgroundColor={`#${getBackgroundColor(train, route)}`}
+               color={`#${getTextColor(train, route)}`}>
+            {trainType}
+          </Box>
         </div>
-      </div>
-    </td>
-    <td>
-      <div className="table-hour d-flex align-items-center justify-content-center text-time fw-bold h-100">
-        {getDisplayTime(train, tableType)}
-      </div>
-    </td>
-    <td>
-      <h3 className="headline">{headline.name}</h3>
-      <span className="stops">{stops_names}</span>
-    </td>
-    </tr>
+      </TableCell>
+      <TableCell>
+        <Box display="flex" alignItems="center" justifyContent="center" textAlign="center">
+          <div>
+            <div>{trip.short_name}</div>
+            <div>{trip.headsign}</div>
+          </div>
+        </Box>
+      </TableCell>
+      <TableCell>
+        <Box display="flex" alignItems="center" justifyContent="center" fontWeight="bold" color="#FFED02" fontSize={24}>
+          {getDisplayTime(train, tableType)}
+        </Box>
+      </TableCell>
+      <TableCell>
+        <Typography fontSize={24} fontWeight="bold">{headline.name}</Typography>
+        <span className="stops">{stops_names}</span>
+      </TableCell>
+    </StyledTableRow>
   </>
 }