diff --git a/sncf-station/package-lock.json b/sncf-station/package-lock.json
index baf68ab..fa311ce 100644
--- a/sncf-station/package-lock.json
+++ b/sncf-station/package-lock.json
@@ -20,6 +20,7 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.3",
"react-scripts": "5.0.1",
+ "react-transition-group": "^4.4.5",
"sass": "^1.70.0",
"web-vitals": "^2.1.4"
}
diff --git a/sncf-station/package.json b/sncf-station/package.json
index 0e81e2c..4161155 100644
--- a/sncf-station/package.json
+++ b/sncf-station/package.json
@@ -15,6 +15,7 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.3",
"react-scripts": "5.0.1",
+ "react-transition-group": "^4.4.5",
"sass": "^1.70.0",
"web-vitals": "^2.1.4"
},
diff --git a/sncf-station/src/App.css b/sncf-station/src/App.css
new file mode 100644
index 0000000..6957a81
--- /dev/null
+++ b/sncf-station/src/App.css
@@ -0,0 +1,19 @@
+.shrink-enter {
+ transform: translateY(100%);
+ opacity: 0;
+}
+.shrink-enter-active {
+ transform: translateY(0);
+ opacity: 1;
+ transition: transform 500ms ease-out, opacity 500ms ease-out;
+}
+.shrink-exit {
+ transform: translateY(0);
+ height: 100%;
+ opacity: 1;
+}
+.shrink-exit-active {
+ transform: translateY(-100%);
+ opacity: 0;
+ transition: transform 500ms ease-in, opacity 500ms ease-in;
+}
\ No newline at end of file
diff --git a/sncf-station/src/App.js b/sncf-station/src/App.js
index dbdd5d8..f50e521 100644
--- a/sncf-station/src/App.js
+++ b/sncf-station/src/App.js
@@ -5,6 +5,7 @@ import React, {useMemo} from "react"
import {frFR, LocalizationProvider} from "@mui/x-date-pickers"
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"
import 'dayjs/locale/fr'
+import './App.css'
function App() {
const router = createBrowserRouter([
diff --git a/sncf-station/src/Station.js b/sncf-station/src/Station.js
index c53f492..fed9001 100644
--- a/sncf-station/src/Station.js
+++ b/sncf-station/src/Station.js
@@ -23,8 +23,8 @@ function Station() {
let [stop, setStop] = useState({'name': "Chargement…"})
let [searchParams, _setSearchParams] = useSearchParams()
const now = new Date()
- let dateNow = now.toISOString().split('T')[0]
- let timeNow = now.toTimeString().split(' ')[0].substring(0, 5)
+ let dateNow = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
+ let timeNow = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
let [date, setDate] = useState(searchParams.get('date') || dateNow)
let [time, setTime] = useState(searchParams.get('time') || timeNow)
@@ -39,8 +39,8 @@ function Station() {
if (time === timeNow) {
setInterval(() => {
const now = new Date()
- let dateNow = now.toISOString().split('T')[0]
- let timeNow = now.toTimeString().split(' ')[0].substring(0, 5)
+ let dateNow = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
+ let timeNow = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
setDate(dateNow)
setTime(timeNow)
}, 60000)
diff --git a/sncf-station/src/TrainsTable.js b/sncf-station/src/TrainsTable.js
index f852b16..104b16b 100644
--- a/sncf-station/src/TrainsTable.js
+++ b/sncf-station/src/TrainsTable.js
@@ -1,7 +1,6 @@
-import {useEffect, useState} from "react";
+import {useEffect, useState} from "react"
import {
Box,
- Paper,
styled,
Table,
TableBody,
@@ -10,7 +9,8 @@ import {
TableHead,
TableRow,
Typography
-} from "@mui/material";
+} from "@mui/material"
+import {CSSTransition, TransitionGroup} from 'react-transition-group'
const StyledTableRow = styled(TableRow)(({ theme, tableType }) => ({
'tbody &:nth-of-type(odd)': {
@@ -62,11 +62,17 @@ function TrainsTableBody({stop, date, time, tableType}) {
}
}, [stop, tableType, date, time])
- let table_rows = trains.map((train) => )
+ let table_rows = trains.map((train) =>
+
+ )
- return
- {table_rows}
-
+ return <>
+
+
+ {table_rows}
+
+
+ >
}
function TrainRow({train, tableType}) {