RELEASE V4.1.0 : Voici les modifications apportées :
-> Refonte complète des afficheurs AFL départ et arrivée (+ Quais) -> EVA DÉPARTS + ARRIVÉES EN COURS DE DÉVELOPPEMENT : -> REFONTE AFFICHEURS CLASSIQUES -> IMPLÉMENTATION DONNÉES GTFS / GTFS-RT / SIRI LTE
This commit is contained in:
mathis committed
1 parent
6dfd798dd2
commit
b1f180508e
23 files changed
+811
-686
No files matched your search
@@ -5,15 +5,15 @@
|
||||
/* Container Principal */
|
||||
.eva-arr-container {
|
||||
font-family: 'Avenir', 'Achemine', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
background-color: #000824 !important; /* Bleu nuit très profond EVA */
|
||||
overflow: hidden !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 !important;
|
||||
padding: 1.2vh 1.8vw !important;
|
||||
padding: 13px 35px !important;
|
||||
box-sizing: border-box !important;
|
||||
user-select: none !important;
|
||||
position: absolute !important;
|
||||
@@ -25,26 +25,26 @@
|
||||
HEADER (En-tête EVA)
|
||||
========================================================================== */
|
||||
.eva-arr-header {
|
||||
height: 9.5vh !important;
|
||||
min-height: 9.5vh !important;
|
||||
max-height: 9.5vh !important;
|
||||
height: 103px !important;
|
||||
min-height: 103px !important;
|
||||
max-height: 103px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
padding: 0 0.5vw !important;
|
||||
margin-bottom: 1.0vh !important;
|
||||
padding: 0 10px !important;
|
||||
margin-bottom: 11px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.eva-arr-header-left {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 1.0vw !important;
|
||||
gap: 19px !important;
|
||||
}
|
||||
|
||||
.eva-arr-header-icon {
|
||||
width: 5.5vh !important;
|
||||
height: 5.5vh !important;
|
||||
width: 59px !important;
|
||||
height: 59px !important;
|
||||
flex-shrink: 0 !important;
|
||||
color: #00d68f !important;
|
||||
}
|
||||
@@ -52,31 +52,31 @@
|
||||
.eva-arr-header-titles {
|
||||
display: flex !important;
|
||||
align-items: baseline !important;
|
||||
gap: 0.6vw !important;
|
||||
gap: 12px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.eva-arr-header-title-main {
|
||||
font-size: 5.2vh !important;
|
||||
font-size: 56px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: 0.04vw !important;
|
||||
letter-spacing: 0.77px !important;
|
||||
line-height: 1 !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.eva-arr-header-slash {
|
||||
font-size: 3.8vh !important;
|
||||
font-size: 41px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #00d68f !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.eva-arr-header-title-sub {
|
||||
font-size: 3.2vh !important;
|
||||
font-size: 35px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #00d68f !important;
|
||||
letter-spacing: 0.02vw !important;
|
||||
letter-spacing: 0.38px !important;
|
||||
line-height: 1 !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
@@ -91,23 +91,23 @@
|
||||
border: 2.2px solid #00d68f !important;
|
||||
background-color: #000824 !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0.5vh 1.0vw !important;
|
||||
padding: 5px 19px !important;
|
||||
display: flex !important;
|
||||
align-items: baseline !important;
|
||||
gap: 0.5vw !important;
|
||||
gap: 10px !important;
|
||||
box-shadow: 0 0 10px rgba(0, 214, 143, 0.15) !important;
|
||||
}
|
||||
|
||||
.eva-arr-clock-main {
|
||||
font-size: 4.8vh !important;
|
||||
font-size: 52px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: 0.02vw !important;
|
||||
letter-spacing: 0.38px !important;
|
||||
}
|
||||
|
||||
.eva-arr-clock-seconds {
|
||||
font-size: 3.8vh !important;
|
||||
font-size: 41px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #00d68f !important;
|
||||
line-height: 1 !important;
|
||||
@@ -121,7 +121,7 @@
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
gap: 1.2vh !important;
|
||||
gap: 13px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
list-style: none !important;
|
||||
@@ -133,8 +133,8 @@
|
||||
border-radius: 10px !important;
|
||||
display: flex !important;
|
||||
align-items: stretch !important;
|
||||
height: calc((100% - 3.6vh) / 4) !important;
|
||||
min-height: 12vh !important;
|
||||
height: calc((100% - 39px) / 4) !important;
|
||||
min-height: 130px !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
|
||||
@@ -144,27 +144,27 @@
|
||||
COLONNE GAUCHE : HEURE & STATUT
|
||||
-------------------------------------------------------------------------- */
|
||||
.eva-arr-col-time {
|
||||
width: 14.5vw !important;
|
||||
min-width: 14.5vw !important;
|
||||
max-width: 14.5vw !important;
|
||||
width: 278px !important;
|
||||
min-width: 278px !important;
|
||||
max-width: 278px !important;
|
||||
background-color: #d7e1f0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
padding: 0.8vh 0.6vw !important;
|
||||
padding: 9px 12px !important;
|
||||
box-sizing: border-box !important;
|
||||
border-top-left-radius: 10px !important;
|
||||
border-bottom-left-radius: 10px !important;
|
||||
}
|
||||
|
||||
.eva-arr-time-value {
|
||||
font-size: 5.6vh !important;
|
||||
font-size: 60px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1 !important;
|
||||
margin-bottom: 0.6vh !important;
|
||||
letter-spacing: -0.02vw !important;
|
||||
margin-bottom: 6px !important;
|
||||
letter-spacing: -0.38px !important;
|
||||
}
|
||||
|
||||
/* Pastilles de statut */
|
||||
@@ -172,11 +172,11 @@
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 0.4vw !important;
|
||||
padding: 0.3vh 0.9vw !important;
|
||||
gap: 8px !important;
|
||||
padding: 3px 17px !important;
|
||||
border-radius: 20px !important;
|
||||
box-sizing: border-box !important;
|
||||
height: 3.8vh !important;
|
||||
height: 41px !important;
|
||||
}
|
||||
|
||||
.eva-arr-status-pill--ontime {
|
||||
@@ -196,13 +196,13 @@
|
||||
}
|
||||
|
||||
.eva-arr-status-icon {
|
||||
width: 2.5vh !important;
|
||||
height: 2.5vh !important;
|
||||
width: 27px !important;
|
||||
height: 27px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.eva-arr-status-text {
|
||||
font-size: 2.2vh !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1 !important;
|
||||
white-space: nowrap !important;
|
||||
@@ -216,7 +216,7 @@
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
padding: 0.6vh 1.8vw !important;
|
||||
padding: 6px 35px !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
min-width: 0 !important;
|
||||
@@ -225,18 +225,18 @@
|
||||
.eva-arr-origin-row {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.8vw !important;
|
||||
gap: 15px !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
margin-bottom: 0.4vh !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.eva-arr-origin-name {
|
||||
font-size: 5.6vh !important;
|
||||
font-size: 60px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1.1 !important;
|
||||
letter-spacing: -0.02vw !important;
|
||||
letter-spacing: -0.38px !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
@@ -246,24 +246,24 @@
|
||||
.eva-arr-perturb-badge {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.4vw !important;
|
||||
gap: 8px !important;
|
||||
background-color: #ffa74f !important;
|
||||
color: #000c2f !important;
|
||||
padding: 0.4vh 0.8vw !important;
|
||||
padding: 4px 15px !important;
|
||||
border-radius: 6px !important;
|
||||
height: 3.4vh !important;
|
||||
height: 37px !important;
|
||||
box-sizing: border-box !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.eva-arr-perturb-badge-icon {
|
||||
width: 2.4vh !important;
|
||||
height: 2.4vh !important;
|
||||
width: 26px !important;
|
||||
height: 26px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.eva-arr-perturb-badge-text {
|
||||
font-size: 2.2vh !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1 !important;
|
||||
white-space: nowrap !important;
|
||||
@@ -279,10 +279,10 @@
|
||||
}
|
||||
|
||||
.eva-arr-vias-label {
|
||||
font-size: 3.5vh !important;
|
||||
font-size: 38px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #00c284 !important; /* Vert menthe SNCF */
|
||||
margin-right: 0.5vw !important;
|
||||
color: #00c284 !important;
|
||||
margin-right: 10px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
@@ -318,7 +318,7 @@
|
||||
}
|
||||
|
||||
.eva-arr-vias-stop {
|
||||
font-size: 3.5vh !important;
|
||||
font-size: 38px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #2c3b57 !important;
|
||||
line-height: 1 !important;
|
||||
@@ -327,8 +327,8 @@
|
||||
.eva-arr-vias-bullet {
|
||||
color: #00c284 !important;
|
||||
font-weight: 800 !important;
|
||||
margin: 0 0.5vw !important;
|
||||
font-size: 2.8vh !important;
|
||||
margin: 0 10px !important;
|
||||
font-size: 30px !important;
|
||||
display: inline-block !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
@@ -347,18 +347,18 @@
|
||||
.eva-arr-bus-box {
|
||||
background-color: #000c2f !important;
|
||||
border-radius: 8px !important;
|
||||
width: 7.0vw !important;
|
||||
width: 134px !important;
|
||||
height: 80% !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin-right: 0.8vw !important;
|
||||
margin-right: 15px !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.eva-arr-bus-icon {
|
||||
width: 6.0vh !important;
|
||||
height: 6.0vh !important;
|
||||
width: 65px !important;
|
||||
height: 65px !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
@@ -366,25 +366,25 @@
|
||||
.eva-arr-voie-box {
|
||||
background-color: #000c2f !important;
|
||||
border-radius: 8px !important;
|
||||
width: 7.0vw !important;
|
||||
width: 134px !important;
|
||||
height: 80% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin-right: 0.8vw !important;
|
||||
margin-right: 15px !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.eva-arr-voie-label {
|
||||
font-size: 1.8vh !important;
|
||||
font-size: 19px !important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: uppercase !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
.eva-arr-voie-val {
|
||||
font-size: 4.5vh !important;
|
||||
font-size: 49px !important;
|
||||
font-weight: 900 !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
@@ -392,8 +392,8 @@
|
||||
/* Bloc Opérateur & Numéro Vert Émeraude */
|
||||
.eva-arr-train-block {
|
||||
background-color: #00d68f !important;
|
||||
width: 10.0vw !important;
|
||||
min-width: 10.0vw !important;
|
||||
width: 192px !important;
|
||||
min-width: 192px !important;
|
||||
height: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
@@ -401,25 +401,25 @@
|
||||
justify-content: center !important;
|
||||
border-top-right-radius: 10px !important;
|
||||
border-bottom-right-radius: 10px !important;
|
||||
padding: 0 0.5vw !important;
|
||||
padding: 0 10px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.eva-arr-train-op {
|
||||
font-size: 2.8vh !important;
|
||||
font-size: 30px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1 !important;
|
||||
margin-bottom: 0.3vh !important;
|
||||
margin-bottom: 3px !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.eva-arr-train-num {
|
||||
font-size: 4.2vh !important;
|
||||
font-size: 45px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: 0.02vw !important;
|
||||
letter-spacing: 0.38px !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
@@ -430,15 +430,15 @@
|
||||
border-radius: 10px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 0.8vh 1.8vw !important;
|
||||
margin-top: 1.0vh !important;
|
||||
gap: 1.4vw !important;
|
||||
padding: 9px 35px !important;
|
||||
margin-top: 11px !important;
|
||||
gap: 27px !important;
|
||||
box-sizing: border-box !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
|
||||
flex-shrink: 0 !important;
|
||||
height: 10.8vh !important;
|
||||
min-height: 10.8vh !important;
|
||||
max-height: 10.8vh !important;
|
||||
height: 117px !important;
|
||||
min-height: 117px !important;
|
||||
max-height: 117px !important;
|
||||
}
|
||||
|
||||
.eva-arr-bottom-alert-icon-wrapper {
|
||||
@@ -449,8 +449,8 @@
|
||||
}
|
||||
|
||||
.eva-arr-bottom-alert-icon {
|
||||
width: 5.8vh !important;
|
||||
height: 5.8vh !important;
|
||||
width: 63px !important;
|
||||
height: 63px !important;
|
||||
color: #000c2f !important;
|
||||
}
|
||||
|
||||
@@ -458,8 +458,8 @@
|
||||
flex: 1 !important;
|
||||
overflow: hidden !important;
|
||||
position: relative !important;
|
||||
height: 9.0vh !important;
|
||||
max-height: 9.0vh !important;
|
||||
height: 97px !important;
|
||||
max-height: 97px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
@@ -467,7 +467,7 @@
|
||||
|
||||
.eva-arr-bottom-alert-content {
|
||||
color: #000c2f !important;
|
||||
font-size: 2.4vh !important;
|
||||
font-size: 26px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.25 !important;
|
||||
white-space: normal !important;
|
||||
|
||||
@@ -26,7 +26,7 @@ const formatTimeWithColon = (v) => {
|
||||
};
|
||||
|
||||
// Icône Passager avec valise à roulettes + Face avant de train (Logo En-tête EVA Arrivées)
|
||||
const EVAArrivalsHeaderIcon = ({ size = '5.5vh', color = '#00d68f', style = {} }) => (
|
||||
const EVAArrivalsHeaderIcon = ({ size = '59px', color = '#00d68f', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 64 64"
|
||||
width={size}
|
||||
@@ -72,7 +72,7 @@ const EVAArrivalsHeaderIcon = ({ size = '5.5vh', color = '#00d68f', style = {} }
|
||||
);
|
||||
|
||||
// Icône de Bus / Autocar SNCF
|
||||
const EVABusIcon = ({ size = '6.0vh', color = '#ffffff', style = {} }) => (
|
||||
const EVABusIcon = ({ size = '65px', color = '#ffffff', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -85,7 +85,7 @@ const EVABusIcon = ({ size = '6.0vh', color = '#ffffff', style = {} }) => (
|
||||
);
|
||||
|
||||
// Icône Information (Badge motif perturbation)
|
||||
const EVAInfoIcon = ({ size = '2.4vh', color = '#000c2f', style = {} }) => (
|
||||
const EVAInfoIcon = ({ size = '26px', color = '#000c2f', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -104,7 +104,7 @@ const EVAInfoIcon = ({ size = '2.4vh', color = '#000c2f', style = {} }) => (
|
||||
);
|
||||
|
||||
// Icône Information Grande (Bandeau Travaux inférieur)
|
||||
const EVABigAlertIcon = ({ size = '5.8vh', color = '#000c2f', style = {} }) => (
|
||||
const EVABigAlertIcon = ({ size = '63px', color = '#000c2f', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 48 48"
|
||||
width={size}
|
||||
@@ -129,7 +129,7 @@ const EVABigAlertIcon = ({ size = '5.8vh', color = '#000c2f', style = {} }) => (
|
||||
);
|
||||
|
||||
// Icône Horloge pour les pastilles de statut
|
||||
const EVAClockIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) => (
|
||||
const EVAClockIcon = ({ size = '27px', color = 'currentColor', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -147,7 +147,7 @@ const EVAClockIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) =>
|
||||
);
|
||||
|
||||
// Icône Suppression (Croix)
|
||||
const EVACrossIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) => (
|
||||
const EVACrossIcon = ({ size = '27px', color = 'currentColor', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -441,7 +441,6 @@ export default function EVAArrivees() {
|
||||
|
||||
const [resolvedGareId, setResolvedGareId] = useState(gareIdParam || null);
|
||||
useAnnonceSonoreRealtime(resolvedGareId, 'EVAArrivees');
|
||||
useAutoAnnonce(horaires, currentTime, true);
|
||||
|
||||
// Récupération type de gare
|
||||
useEffect(() => {
|
||||
@@ -1068,7 +1067,7 @@ export default function EVAArrivees() {
|
||||
if (h._date && h._date !== todayStr) return false;
|
||||
if (!circulatesOn(h, today)) return false;
|
||||
if (typeof h._depHM !== 'number') return false;
|
||||
if (h._depHM < todayHM - 1) return false;
|
||||
if (h._depHM < todayHM) return false;
|
||||
if (h._travauxAppliesToday) return false;
|
||||
return true;
|
||||
});
|
||||
@@ -1112,8 +1111,9 @@ export default function EVAArrivees() {
|
||||
});
|
||||
|
||||
const annotated = applyPerturbationsToHoraires(finalList, filteredPerturb || [], null, null, serviceDateStr);
|
||||
const withServiceDate = (annotated || []).map(a => ({ ...a, _serviceDate: serviceDateStr }));
|
||||
|
||||
setHoraires(annotated || []);
|
||||
setHoraires(withServiceDate || []);
|
||||
setPerturbations(filteredPerturb || []);
|
||||
setTravaux(travauxData || []);
|
||||
setTravauxSubstitutions(travauxSubstData || []);
|
||||
@@ -1140,9 +1140,30 @@ export default function EVAArrivees() {
|
||||
return () => clearInterval(delayTimer);
|
||||
}, []);
|
||||
|
||||
// Filtrage en temps réel : ne plus afficher les horaires dont l'heure est dépassée
|
||||
const currentHM = currentTime.getHours() * 60 + currentTime.getMinutes();
|
||||
const pad = (n) => String(n).padStart(2, '0');
|
||||
const todayDateStr = `${currentTime.getFullYear()}-${pad(currentTime.getMonth() + 1)}-${pad(currentTime.getDate())}`;
|
||||
|
||||
const activeHoraires = (horaires || []).filter(h => {
|
||||
const sDate = h._serviceDate || h._date;
|
||||
if (!sDate || sDate === todayDateStr) {
|
||||
if (typeof h._depHM === 'number') {
|
||||
const delay = (h._status && typeof h._status.delayMinutes === 'number') ? h._status.delayMinutes : 0;
|
||||
const effectiveHM = h._depHM + delay;
|
||||
if (effectiveHM < currentHM) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
useAutoAnnonce(activeHoraires, currentTime, true);
|
||||
|
||||
// Pagination : 4 trains par page sur les écrans EVA
|
||||
const ITEMS_PER_PAGE = 4;
|
||||
const totalPages = Math.max(1, Math.ceil(horaires.length / ITEMS_PER_PAGE));
|
||||
const totalPages = Math.max(1, Math.ceil(activeHoraires.length / ITEMS_PER_PAGE));
|
||||
const [pageIndex, setPageIndex] = useState(lockedPageIndex !== null ? lockedPageIndex : 0);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -1159,7 +1180,8 @@ export default function EVAArrivees() {
|
||||
return () => clearInterval(pageInterval);
|
||||
}, [lockedPageIndex, totalPages]);
|
||||
|
||||
const displayedHoraires = horaires.slice(pageIndex * ITEMS_PER_PAGE, (pageIndex + 1) * ITEMS_PER_PAGE);
|
||||
const safePageIndex = Math.min(pageIndex, Math.max(0, totalPages - 1));
|
||||
const displayedHoraires = activeHoraires.slice(safePageIndex * ITEMS_PER_PAGE, (safePageIndex + 1) * ITEMS_PER_PAGE);
|
||||
|
||||
// Recherche d'un message de travaux ou d'alerte pour le bandeau bas
|
||||
const activeTravauxMessage = (() => {
|
||||
@@ -1208,7 +1230,7 @@ export default function EVAArrivees() {
|
||||
<ul className={`eva-arr-list ${activeTravauxMessage ? 'eva-arr-list--with-alert' : ''}`}>
|
||||
{displayedHoraires.length === 0 ? (
|
||||
<li className="eva-arr-row" key="empty">
|
||||
<div style={{ color: '#000c2f', padding: '24px', fontSize: '2.8vh', fontWeight: 'bold' }}>
|
||||
<div style={{ color: '#000c2f', padding: '24px', fontSize: '30px', fontWeight: 'bold' }}>
|
||||
Aucune arrivée prévue pour le moment.
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -5,15 +5,15 @@
|
||||
/* Container Principal */
|
||||
.eva-dep-container {
|
||||
font-family: 'Avenir', 'Achemine', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
background-color: #000824 !important; /* Bleu nuit très profond EVA */
|
||||
overflow: hidden !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 !important;
|
||||
padding: 1.2vh 1.8vw !important;
|
||||
padding: 13px 35px !important;
|
||||
box-sizing: border-box !important;
|
||||
user-select: none !important;
|
||||
position: absolute !important;
|
||||
@@ -25,26 +25,26 @@
|
||||
HEADER (En-tête EVA Départs)
|
||||
========================================================================== */
|
||||
.eva-dep-header {
|
||||
height: 9.5vh !important;
|
||||
min-height: 9.5vh !important;
|
||||
max-height: 9.5vh !important;
|
||||
height: 103px !important;
|
||||
min-height: 103px !important;
|
||||
max-height: 103px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
padding: 0 0.5vw !important;
|
||||
margin-bottom: 1.0vh !important;
|
||||
padding: 0 10px !important;
|
||||
margin-bottom: 11px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.eva-dep-header-left {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 1.0vw !important;
|
||||
gap: 19px !important;
|
||||
}
|
||||
|
||||
.eva-dep-header-icon {
|
||||
width: 5.5vh !important;
|
||||
height: 5.5vh !important;
|
||||
width: 59px !important;
|
||||
height: 59px !important;
|
||||
flex-shrink: 0 !important;
|
||||
color: #03c5ff !important; /* Bleu cyan/azur vif EVA Départs (#03c5ff) */
|
||||
}
|
||||
@@ -52,31 +52,31 @@
|
||||
.eva-dep-header-titles {
|
||||
display: flex !important;
|
||||
align-items: baseline !important;
|
||||
gap: 0.6vw !important;
|
||||
gap: 12px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.eva-dep-header-title-main {
|
||||
font-size: 5.2vh !important;
|
||||
font-size: 56px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: 0.04vw !important;
|
||||
letter-spacing: 0.77px !important;
|
||||
line-height: 1 !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.eva-dep-header-slash {
|
||||
font-size: 3.8vh !important;
|
||||
font-size: 41px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #03c5ff !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.eva-dep-header-title-sub {
|
||||
font-size: 3.2vh !important;
|
||||
font-size: 35px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #03c5ff !important;
|
||||
letter-spacing: 0.02vw !important;
|
||||
letter-spacing: 0.38px !important;
|
||||
line-height: 1 !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
@@ -91,23 +91,23 @@
|
||||
border: 2.2px solid #03c5ff !important;
|
||||
background-color: #000824 !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0.5vh 1.0vw !important;
|
||||
padding: 5px 19px !important;
|
||||
display: flex !important;
|
||||
align-items: baseline !important;
|
||||
gap: 0.5vw !important;
|
||||
gap: 10px !important;
|
||||
box-shadow: 0 0 12px rgba(3, 197, 255, 0.25) !important;
|
||||
}
|
||||
|
||||
.eva-dep-clock-main {
|
||||
font-size: 4.8vh !important;
|
||||
font-size: 52px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: 0.02vw !important;
|
||||
letter-spacing: 0.38px !important;
|
||||
}
|
||||
|
||||
.eva-dep-clock-seconds {
|
||||
font-size: 3.8vh !important;
|
||||
font-size: 41px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #03c5ff !important;
|
||||
line-height: 1 !important;
|
||||
@@ -121,7 +121,7 @@
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
gap: 1.2vh !important;
|
||||
gap: 13px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
list-style: none !important;
|
||||
@@ -133,8 +133,8 @@
|
||||
border-radius: 10px !important;
|
||||
display: flex !important;
|
||||
align-items: stretch !important;
|
||||
height: calc((100% - 3.6vh) / 4) !important;
|
||||
min-height: 12vh !important;
|
||||
height: calc((100% - 39px) / 4) !important;
|
||||
min-height: 130px !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
|
||||
@@ -144,27 +144,27 @@
|
||||
COLONNE GAUCHE : HEURE & STATUT
|
||||
-------------------------------------------------------------------------- */
|
||||
.eva-dep-col-time {
|
||||
width: 14.5vw !important;
|
||||
min-width: 14.5vw !important;
|
||||
max-width: 14.5vw !important;
|
||||
width: 278px !important;
|
||||
min-width: 278px !important;
|
||||
max-width: 278px !important;
|
||||
background-color: #d7e1f0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
padding: 0.8vh 0.6vw !important;
|
||||
padding: 9px 12px !important;
|
||||
box-sizing: border-box !important;
|
||||
border-top-left-radius: 10px !important;
|
||||
border-bottom-left-radius: 10px !important;
|
||||
}
|
||||
|
||||
.eva-dep-time-value {
|
||||
font-size: 5.6vh !important;
|
||||
font-size: 60px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1 !important;
|
||||
margin-bottom: 0.6vh !important;
|
||||
letter-spacing: -0.02vw !important;
|
||||
margin-bottom: 6px !important;
|
||||
letter-spacing: -0.38px !important;
|
||||
}
|
||||
|
||||
/* Pastilles de statut */
|
||||
@@ -172,11 +172,11 @@
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 0.4vw !important;
|
||||
padding: 0.3vh 0.9vw !important;
|
||||
gap: 8px !important;
|
||||
padding: 3px 17px !important;
|
||||
border-radius: 20px !important;
|
||||
box-sizing: border-box !important;
|
||||
height: 3.8vh !important;
|
||||
height: 41px !important;
|
||||
}
|
||||
|
||||
.eva-dep-status-pill--ontime {
|
||||
@@ -196,13 +196,13 @@
|
||||
}
|
||||
|
||||
.eva-dep-status-icon {
|
||||
width: 2.5vh !important;
|
||||
height: 2.5vh !important;
|
||||
width: 27px !important;
|
||||
height: 27px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.eva-dep-status-text {
|
||||
font-size: 2.2vh !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1 !important;
|
||||
white-space: nowrap !important;
|
||||
@@ -216,7 +216,7 @@
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
padding: 0.6vh 1.8vw !important;
|
||||
padding: 6px 35px !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
min-width: 0 !important;
|
||||
@@ -225,18 +225,18 @@
|
||||
.eva-dep-origin-row {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.8vw !important;
|
||||
gap: 15px !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
margin-bottom: 0.4vh !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.eva-dep-origin-name {
|
||||
font-size: 5.6vh !important;
|
||||
font-size: 60px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1.1 !important;
|
||||
letter-spacing: -0.02vw !important;
|
||||
letter-spacing: -0.38px !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
@@ -246,24 +246,24 @@
|
||||
.eva-dep-perturb-badge {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.4vw !important;
|
||||
gap: 8px !important;
|
||||
background-color: #ffa74f !important;
|
||||
color: #000c2f !important;
|
||||
padding: 0.4vh 0.8vw !important;
|
||||
padding: 4px 15px !important;
|
||||
border-radius: 6px !important;
|
||||
height: 3.4vh !important;
|
||||
height: 37px !important;
|
||||
box-sizing: border-box !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.eva-dep-perturb-badge-icon {
|
||||
width: 2.4vh !important;
|
||||
height: 2.4vh !important;
|
||||
width: 26px !important;
|
||||
height: 26px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.eva-dep-perturb-badge-text {
|
||||
font-size: 2.2vh !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1 !important;
|
||||
white-space: nowrap !important;
|
||||
@@ -279,10 +279,10 @@
|
||||
}
|
||||
|
||||
.eva-dep-vias-label {
|
||||
font-size: 3.5vh !important;
|
||||
font-size: 38px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #03c5ff !important; /* Bleu azur EVA Départs (#03c5ff) */
|
||||
margin-right: 0.5vw !important;
|
||||
margin-right: 10px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
@@ -318,7 +318,7 @@
|
||||
}
|
||||
|
||||
.eva-dep-vias-stop {
|
||||
font-size: 3.5vh !important;
|
||||
font-size: 38px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #2c3b57 !important;
|
||||
line-height: 1 !important;
|
||||
@@ -327,8 +327,8 @@
|
||||
.eva-dep-vias-bullet {
|
||||
color: #03c5ff !important;
|
||||
font-weight: 800 !important;
|
||||
margin: 0 0.5vw !important;
|
||||
font-size: 2.8vh !important;
|
||||
margin: 0 10px !important;
|
||||
font-size: 30px !important;
|
||||
display: inline-block !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
@@ -347,18 +347,18 @@
|
||||
.eva-dep-bus-box {
|
||||
background-color: #000c2f !important;
|
||||
border-radius: 8px !important;
|
||||
width: 7.0vw !important;
|
||||
width: 134px !important;
|
||||
height: 80% !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin-right: 0.8vw !important;
|
||||
margin-right: 15px !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.eva-dep-bus-icon {
|
||||
width: 6.0vh !important;
|
||||
height: 6.0vh !important;
|
||||
width: 65px !important;
|
||||
height: 65px !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
@@ -366,25 +366,25 @@
|
||||
.eva-dep-voie-box {
|
||||
background-color: #000c2f !important;
|
||||
border-radius: 8px !important;
|
||||
width: 7.0vw !important;
|
||||
width: 134px !important;
|
||||
height: 80% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin-right: 0.8vw !important;
|
||||
margin-right: 15px !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.eva-dep-voie-label {
|
||||
font-size: 1.8vh !important;
|
||||
font-size: 19px !important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: uppercase !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
.eva-dep-voie-val {
|
||||
font-size: 4.5vh !important;
|
||||
font-size: 49px !important;
|
||||
font-weight: 900 !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
@@ -392,8 +392,8 @@
|
||||
/* Bloc Opérateur & Numéro Bleu Azur Départs */
|
||||
.eva-dep-train-block {
|
||||
background-color: #03c5ff !important; /* Bleu cyan/azur #03c5ff */
|
||||
width: 10.0vw !important;
|
||||
min-width: 10.0vw !important;
|
||||
width: 192px !important;
|
||||
min-width: 192px !important;
|
||||
height: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
@@ -401,25 +401,25 @@
|
||||
justify-content: center !important;
|
||||
border-top-right-radius: 10px !important;
|
||||
border-bottom-right-radius: 10px !important;
|
||||
padding: 0 0.5vw !important;
|
||||
padding: 0 10px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.eva-dep-train-op {
|
||||
font-size: 2.8vh !important;
|
||||
font-size: 30px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1 !important;
|
||||
margin-bottom: 0.3vh !important;
|
||||
margin-bottom: 3px !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.eva-dep-train-num {
|
||||
font-size: 4.2vh !important;
|
||||
font-size: 45px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: 0.02vw !important;
|
||||
letter-spacing: 0.38px !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
@@ -430,15 +430,15 @@
|
||||
border-radius: 10px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 0.8vh 1.8vw !important;
|
||||
margin-top: 1.0vh !important;
|
||||
gap: 1.4vw !important;
|
||||
padding: 9px 35px !important;
|
||||
margin-top: 11px !important;
|
||||
gap: 27px !important;
|
||||
box-sizing: border-box !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
|
||||
flex-shrink: 0 !important;
|
||||
height: 10.8vh !important;
|
||||
min-height: 10.8vh !important;
|
||||
max-height: 10.8vh !important;
|
||||
height: 117px !important;
|
||||
min-height: 117px !important;
|
||||
max-height: 117px !important;
|
||||
}
|
||||
|
||||
.eva-dep-bottom-alert-icon-wrapper {
|
||||
@@ -449,8 +449,8 @@
|
||||
}
|
||||
|
||||
.eva-dep-bottom-alert-icon {
|
||||
width: 5.8vh !important;
|
||||
height: 5.8vh !important;
|
||||
width: 63px !important;
|
||||
height: 63px !important;
|
||||
color: #000c2f !important;
|
||||
}
|
||||
|
||||
@@ -458,8 +458,8 @@
|
||||
flex: 1 !important;
|
||||
overflow: hidden !important;
|
||||
position: relative !important;
|
||||
height: 9.0vh !important;
|
||||
max-height: 9.0vh !important;
|
||||
height: 97px !important;
|
||||
max-height: 97px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
@@ -467,7 +467,7 @@
|
||||
|
||||
.eva-dep-bottom-alert-content {
|
||||
color: #000c2f !important;
|
||||
font-size: 2.4vh !important;
|
||||
font-size: 26px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.25 !important;
|
||||
white-space: normal !important;
|
||||
|
||||
@@ -26,7 +26,7 @@ const formatTimeWithColon = (v) => {
|
||||
};
|
||||
|
||||
// Icône Passager + Face avant de train (Logo En-tête EVA Départs)
|
||||
const EVADeparturesHeaderIcon = ({ size = '5.5vh', color = '#03c5ff', style = {} }) => (
|
||||
const EVADeparturesHeaderIcon = ({ size = '59px', color = '#03c5ff', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 64 64"
|
||||
width={size}
|
||||
@@ -72,7 +72,7 @@ const EVADeparturesHeaderIcon = ({ size = '5.5vh', color = '#03c5ff', style = {}
|
||||
);
|
||||
|
||||
// Icône de Bus / Autocar SNCF
|
||||
const EVABusIcon = ({ size = '6.0vh', color = '#ffffff', style = {} }) => (
|
||||
const EVABusIcon = ({ size = '65px', color = '#ffffff', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -85,7 +85,7 @@ const EVABusIcon = ({ size = '6.0vh', color = '#ffffff', style = {} }) => (
|
||||
);
|
||||
|
||||
// Icône Information (Badge motif perturbation)
|
||||
const EVAInfoIcon = ({ size = '2.4vh', color = '#000c2f', style = {} }) => (
|
||||
const EVAInfoIcon = ({ size = '26px', color = '#000c2f', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -104,7 +104,7 @@ const EVAInfoIcon = ({ size = '2.4vh', color = '#000c2f', style = {} }) => (
|
||||
);
|
||||
|
||||
// Icône Information Grande (Bandeau Travaux inférieur)
|
||||
const EVABigAlertIcon = ({ size = '5.8vh', color = '#000c2f', style = {} }) => (
|
||||
const EVABigAlertIcon = ({ size = '63px', color = '#000c2f', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 48 48"
|
||||
width={size}
|
||||
@@ -125,7 +125,7 @@ const EVABigAlertIcon = ({ size = '5.8vh', color = '#000c2f', style = {} }) => (
|
||||
);
|
||||
|
||||
// Icône Horloge pour les pastilles de statut
|
||||
const EVAClockIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) => (
|
||||
const EVAClockIcon = ({ size = '27px', color = 'currentColor', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -143,7 +143,7 @@ const EVAClockIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) =>
|
||||
);
|
||||
|
||||
// Icône Suppression (Croix)
|
||||
const EVACrossIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) => (
|
||||
const EVACrossIcon = ({ size = '27px', color = 'currentColor', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -437,7 +437,6 @@ export default function EVADeparts() {
|
||||
|
||||
const [resolvedGareId, setResolvedGareId] = useState(gareIdParam || null);
|
||||
useAnnonceSonoreRealtime(resolvedGareId, 'EVADeparts');
|
||||
useAutoAnnonce(horaires, currentTime, false);
|
||||
|
||||
// Récupération type de gare
|
||||
useEffect(() => {
|
||||
@@ -1084,7 +1083,7 @@ export default function EVADeparts() {
|
||||
if (h._date && h._date !== todayStr) return false;
|
||||
if (!circulatesOn(h, today)) return false;
|
||||
if (typeof h._depHM !== 'number') return false;
|
||||
if (h._depHM < todayHM - 1) return false;
|
||||
if (h._depHM < todayHM) return false;
|
||||
if (h._travauxAppliesToday) return false;
|
||||
return true;
|
||||
});
|
||||
@@ -1128,8 +1127,9 @@ export default function EVADeparts() {
|
||||
});
|
||||
|
||||
const annotated = applyPerturbationsToHoraires(finalList, filteredPerturb || [], null, null, serviceDateStr);
|
||||
const withServiceDate = (annotated || []).map(a => ({ ...a, _serviceDate: serviceDateStr }));
|
||||
|
||||
setHoraires(annotated || []);
|
||||
setHoraires(withServiceDate || []);
|
||||
setPerturbations(filteredPerturb || []);
|
||||
setTravaux(travauxData || []);
|
||||
setTravauxSubstitutions(travauxSubstData || []);
|
||||
@@ -1156,9 +1156,30 @@ export default function EVADeparts() {
|
||||
return () => clearInterval(delayTimer);
|
||||
}, []);
|
||||
|
||||
// Filtrage en temps réel : ne plus afficher les horaires dont l'heure est dépassée
|
||||
const currentHM = currentTime.getHours() * 60 + currentTime.getMinutes();
|
||||
const pad = (n) => String(n).padStart(2, '0');
|
||||
const todayDateStr = `${currentTime.getFullYear()}-${pad(currentTime.getMonth() + 1)}-${pad(currentTime.getDate())}`;
|
||||
|
||||
const activeHoraires = (horaires || []).filter(h => {
|
||||
const sDate = h._serviceDate || h._date;
|
||||
if (!sDate || sDate === todayDateStr) {
|
||||
if (typeof h._depHM === 'number') {
|
||||
const delay = (h._status && typeof h._status.delayMinutes === 'number') ? h._status.delayMinutes : 0;
|
||||
const effectiveHM = h._depHM + delay;
|
||||
if (effectiveHM < currentHM) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
useAutoAnnonce(activeHoraires, currentTime, false);
|
||||
|
||||
// Pagination : 4 trains par page sur les écrans EVA
|
||||
const ITEMS_PER_PAGE = 4;
|
||||
const totalPages = Math.max(1, Math.ceil(horaires.length / ITEMS_PER_PAGE));
|
||||
const totalPages = Math.max(1, Math.ceil(activeHoraires.length / ITEMS_PER_PAGE));
|
||||
const [pageIndex, setPageIndex] = useState(lockedPageIndex !== null ? lockedPageIndex : 0);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -1175,7 +1196,8 @@ export default function EVADeparts() {
|
||||
return () => clearInterval(pageInterval);
|
||||
}, [lockedPageIndex, totalPages]);
|
||||
|
||||
const displayedHoraires = horaires.slice(pageIndex * ITEMS_PER_PAGE, (pageIndex + 1) * ITEMS_PER_PAGE);
|
||||
const safePageIndex = Math.min(pageIndex, Math.max(0, totalPages - 1));
|
||||
const displayedHoraires = activeHoraires.slice(safePageIndex * ITEMS_PER_PAGE, (safePageIndex + 1) * ITEMS_PER_PAGE);
|
||||
|
||||
// Recherche d'un message de travaux ou d'alerte pour le bandeau bas
|
||||
const activeTravauxMessage = (() => {
|
||||
@@ -1222,7 +1244,7 @@ export default function EVADeparts() {
|
||||
<ul className={`eva-dep-list ${activeTravauxMessage ? 'eva-dep-list--with-alert' : ''}`}>
|
||||
{displayedHoraires.length === 0 ? (
|
||||
<li className="eva-dep-row" key="empty">
|
||||
<div style={{ color: '#000c2f', padding: '24px', fontSize: '2.8vh', fontWeight: 'bold' }}>
|
||||
<div style={{ color: '#000c2f', padding: '24px', fontSize: '30px', fontWeight: 'bold' }}>
|
||||
Aucun départ prévu pour le moment.
|
||||
</div>
|
||||
</li>
|
||||
|
||||
Reference in new issue
Block a user