mathis
9c6ac798f1
-> REFONTE TOTALE DE TOUS LES AFFICHEURS CLASSIQUES + QUAIS FONCTIONNALITÉS EN COURS DE DÉVELOPPEMENT : -> ADAPTABILITÉ EN FONCTION DES SITUATIONS
527 lines
22 KiB
JavaScript
527 lines
22 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import WcsButton from '../components/WcsButton';
|
||
import { getSourceFromPath, getPlatformsForStation } from '../services/railwayService';
|
||
|
||
export default function SelectAfficheur({ onBack, navigate }) {
|
||
const source = getSourceFromPath(window.location.pathname);
|
||
const prefix = source === 'supabase' ? '/ferrovia' : '';
|
||
|
||
const params = new URLSearchParams(window.location.search || '');
|
||
const gareParam = params.get('gare') || '';
|
||
const modeParam = params.get('mode') || 'departs';
|
||
const typeParam = params.get('type') || 'afl';
|
||
|
||
const [platforms, setPlatforms] = useState([]);
|
||
const [selectedPlatform, setSelectedPlatform] = useState('');
|
||
const [manualPlatform, setManualPlatform] = useState('');
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
// État des pages sélectionnées pour les afficheurs AFL
|
||
const [aflPages, setAflPages] = useState({
|
||
horaires: true,
|
||
infos: false,
|
||
securite1: false,
|
||
securite2: false,
|
||
corresp: false
|
||
});
|
||
|
||
// Options spécifiques pour les afficheurs Classiques
|
||
const [extendedLines, setExtendedLines] = useState(0); // 0, 1, 2, 3
|
||
const [showTime, setShowTime] = useState(false);
|
||
|
||
const toggleAflPage = (key) => {
|
||
setAflPages(prev => ({ ...prev, [key]: !prev[key] }));
|
||
};
|
||
|
||
const selectAllAflPages = (all) => {
|
||
setAflPages({
|
||
horaires: true,
|
||
infos: all,
|
||
securite1: all,
|
||
securite2: all,
|
||
corresp: all
|
||
});
|
||
};
|
||
|
||
// Decode and format station name for display
|
||
const decodedGare = gareParam
|
||
? decodeURIComponent(String(gareParam).replace(/\+/g, ' ')).replace(/-/g, ' ')
|
||
: '';
|
||
|
||
useEffect(() => {
|
||
let mounted = true;
|
||
async function loadPlatforms() {
|
||
try {
|
||
setLoading(true);
|
||
const sortedPlatforms = await getPlatformsForStation(decodedGare || gareParam, source);
|
||
if (!mounted) return;
|
||
|
||
setPlatforms(sortedPlatforms || []);
|
||
if (sortedPlatforms && sortedPlatforms.length > 0) {
|
||
setSelectedPlatform(sortedPlatforms[0]);
|
||
}
|
||
} catch (err) {
|
||
console.error('Error fetching platforms:', err);
|
||
} finally {
|
||
if (mounted) setLoading(false);
|
||
}
|
||
}
|
||
|
||
loadPlatforms();
|
||
return () => {
|
||
mounted = false;
|
||
};
|
||
}, [gareParam, decodedGare, source]);
|
||
|
||
const handleGeneral = () => {
|
||
if (typeof navigate === 'function') {
|
||
const kebab = gareParam ? String(gareParam).trim() : '';
|
||
let url = `${prefix}/afficheurs/${modeParam}/${typeParam}?gare=${encodeURIComponent(kebab)}`;
|
||
|
||
if (typeParam === 'afl') {
|
||
const activeKeys = Object.entries(aflPages)
|
||
.filter(([_, active]) => active)
|
||
.map(([key]) => key);
|
||
|
||
if (activeKeys.length > 0) {
|
||
url += `&pages=${activeKeys.join(',')}`;
|
||
}
|
||
} else if (typeParam === 'classiques') {
|
||
if (extendedLines > 0) {
|
||
url += `&extended=${extendedLines}`;
|
||
}
|
||
if (showTime) {
|
||
url += `&time=true`;
|
||
}
|
||
}
|
||
|
||
navigate(url);
|
||
}
|
||
};
|
||
|
||
const handlePlatform = () => {
|
||
const quai = manualPlatform.trim() || selectedPlatform;
|
||
if (!quai) {
|
||
alert("Veuillez sélectionner ou saisir une voie.");
|
||
return;
|
||
}
|
||
if (typeof navigate === 'function') {
|
||
const kebab = gareParam ? String(gareParam).trim() : '';
|
||
let url = `${prefix}/afficheurs/${modeParam}/${typeParam}/quais?gare=${encodeURIComponent(kebab)}&quai=${encodeURIComponent(quai)}`;
|
||
|
||
if (typeParam === 'classiques') {
|
||
if (extendedLines > 0) {
|
||
url += `&extended=${extendedLines}`;
|
||
}
|
||
if (showTime) {
|
||
url += `&time=true`;
|
||
}
|
||
}
|
||
|
||
navigate(url);
|
||
}
|
||
};
|
||
|
||
const handleSinglePage = (pageKey) => {
|
||
if (typeof navigate === 'function') {
|
||
const kebab = gareParam ? String(gareParam).trim() : '';
|
||
navigate(`${prefix}/afficheurs/${modeParam}/${typeParam}?gare=${encodeURIComponent(kebab)}&page=${pageKey}`);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="launcher-container">
|
||
{/* Stepper */}
|
||
<div className="launcher-stepper">
|
||
<div className="launcher-step launcher-step--completed">
|
||
<span className="launcher-step-num">✓</span>
|
||
<span>{decodedGare || 'Gare'}</span>
|
||
</div>
|
||
<span className="launcher-step-separator">›</span>
|
||
<div className="launcher-step launcher-step--completed">
|
||
<span className="launcher-step-num">✓</span>
|
||
<span>{typeParam.toUpperCase()}</span>
|
||
</div>
|
||
<span className="launcher-step-separator">›</span>
|
||
<div className="launcher-step launcher-step--active">
|
||
<span className="launcher-step-num">3</span>
|
||
<span>Options & Affichage</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="launcher-card">
|
||
{/* Header */}
|
||
<div className="launcher-header">
|
||
<div>
|
||
<h1 className="launcher-title">Configuration de l'afficheur</h1>
|
||
<p className="launcher-subtitle">
|
||
Gare : <strong style={{ color: '#002257' }}>{decodedGare}</strong> • Mode : <strong style={{ color: '#00439e' }}>{modeParam === 'arrivees' ? '🏁 Arrivées' : '🚆 Départs'}</strong> • Style : <strong style={{ color: '#008b47' }}>{typeParam.toUpperCase()}</strong>
|
||
</p>
|
||
</div>
|
||
<span className={`launcher-badge ${source === 'supabase' ? 'launcher-badge--supabase' : ''}`}>
|
||
{source === 'supabase' ? '🗄️ BDD Ferrovia' : '🌐 SNCF GTFS'}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Grille responsive 2 colonnes (1 col sur mobile) */}
|
||
<div className="launcher-grid launcher-grid--2col">
|
||
{/* Option 1 : Afficheur Général */}
|
||
<div className="launcher-select-card" style={{ cursor: 'default' }}>
|
||
<div>
|
||
<span className="launcher-card-icon">🖥️</span>
|
||
<span className="launcher-card-tag launcher-card-tag--modern">Écran Général</span>
|
||
<h2 className="launcher-card-title">Afficheur Général (Hall)</h2>
|
||
<p className="launcher-card-desc">
|
||
Affiche la liste complète des circulations avec basculement automatique des pages.
|
||
</p>
|
||
|
||
{typeParam === 'afl' && (
|
||
<div className="launcher-checklist-box">
|
||
<div className="launcher-checklist-header">
|
||
<span className="launcher-checklist-title">
|
||
Pages incluses dans la boucle :
|
||
</span>
|
||
<div className="launcher-checklist-actions">
|
||
<button
|
||
type="button"
|
||
onClick={() => selectAllAflPages(true)}
|
||
className="launcher-link-btn"
|
||
>
|
||
Tout cocher
|
||
</button>
|
||
<span style={{ color: '#ccc' }}>|</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => selectAllAflPages(false)}
|
||
className="launcher-link-btn"
|
||
style={{ color: '#666' }}
|
||
>
|
||
Horaires seuls
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||
<label className="launcher-checkbox-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={aflPages.horaires}
|
||
onChange={() => toggleAflPage('horaires')}
|
||
className="launcher-checkbox"
|
||
/>
|
||
<span><strong>Page 1 & 2</strong> (Horaires des trains)</span>
|
||
</label>
|
||
|
||
<label className="launcher-checkbox-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={aflPages.infos}
|
||
onChange={() => toggleAflPage('infos')}
|
||
className="launcher-checkbox"
|
||
/>
|
||
<span><strong>Informations</strong> (Trafic & Travaux)</span>
|
||
</label>
|
||
|
||
<label className="launcher-checkbox-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={aflPages.securite1}
|
||
onChange={() => toggleAflPage('securite1')}
|
||
className="launcher-checkbox"
|
||
/>
|
||
<span><strong>Sécurité 1</strong> (Bagages délaissés)</span>
|
||
</label>
|
||
|
||
<label className="launcher-checkbox-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={aflPages.securite2}
|
||
onChange={() => toggleAflPage('securite2')}
|
||
className="launcher-checkbox"
|
||
/>
|
||
<span><strong>Sécurité 2</strong> (Vigipirate / 3117)</span>
|
||
</label>
|
||
|
||
<label className="launcher-checkbox-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={aflPages.corresp}
|
||
onChange={() => toggleAflPage('corresp')}
|
||
className="launcher-checkbox"
|
||
/>
|
||
<span><strong>Correspondances</strong> (Bus & Tram)</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{typeParam === 'classiques' && (
|
||
<div className="launcher-checklist-box">
|
||
<div className="launcher-checklist-header">
|
||
<span className="launcher-checklist-title">
|
||
Options d'affichage Classiques :
|
||
</span>
|
||
</div>
|
||
|
||
{/* Choix du nombre de lignes étendues */}
|
||
<div style={{ marginBottom: '14px' }}>
|
||
<label style={{ display: 'block', fontSize: '13px', fontWeight: 700, color: '#002257', marginBottom: '8px' }}>
|
||
Lignes étendues (Dessertes défilantes) :
|
||
</label>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '6px' }}>
|
||
{[0, 1, 2, 3].map((num) => (
|
||
<button
|
||
key={num}
|
||
type="button"
|
||
onClick={() => setExtendedLines(num)}
|
||
style={{
|
||
padding: '8px 4px',
|
||
borderRadius: '8px',
|
||
border: extendedLines === num ? '2px solid #00439e' : '1px solid #c2dbfe',
|
||
background: extendedLines === num ? '#00439e' : '#ffffff',
|
||
color: extendedLines === num ? '#ffffff' : '#002257',
|
||
fontWeight: 700,
|
||
fontSize: '13px',
|
||
cursor: 'pointer',
|
||
transition: 'all 0.15s ease'
|
||
}}
|
||
>
|
||
{num === 0 ? '0 (Standard)' : `${num} étendue${num > 1 ? 's' : ''}`}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div style={{ fontSize: '12px', color: '#555', marginTop: '6px' }}>
|
||
{extendedLines > 0
|
||
? `Les ${extendedLines} premier${extendedLines > 1 ? 's' : ''} train${extendedLines > 1 ? 's' : ''} s'afficheront sur 2 lignes réduites avec le défilement de toutes les gares.`
|
||
: 'Affichage classique compact sans défilement de gares.'}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Option Afficher l'heure */}
|
||
<div style={{ borderTop: '1px solid #e2ebf6', paddingTop: '10px' }}>
|
||
<label className="launcher-checkbox-label" style={{ cursor: 'pointer' }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={showTime}
|
||
onChange={(e) => setShowTime(e.target.checked)}
|
||
className="launcher-checkbox"
|
||
/>
|
||
<span>
|
||
<strong>Afficher l'heure & informations</strong>
|
||
</span>
|
||
</label>
|
||
<div style={{ fontSize: '12px', color: '#555', marginLeft: '28px', marginTop: '2px' }}>
|
||
Réserve la 10e ligne pour l'horloge numérique [ HH MM SS ] et un bandeau d'information défilant (horaires sur 9 lignes max).
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={handleGeneral}
|
||
className="launcher-btn launcher-btn--primary"
|
||
>
|
||
🖥️ Lancer l'Afficheur Général
|
||
</button>
|
||
</div>
|
||
|
||
{/* Option 2 : Afficheur par Quai */}
|
||
<div className="launcher-select-card" style={{ cursor: 'default' }}>
|
||
<div>
|
||
<span className="launcher-card-icon">🚉</span>
|
||
<span className="launcher-card-tag launcher-card-tag--retro">Écran de Voie</span>
|
||
<h2 className="launcher-card-title">Afficheur par Quai</h2>
|
||
<p className="launcher-card-desc">
|
||
Affiche le prochain train au départ/arrivée avec la liste déroulante des gares desservies sur la voie.
|
||
</p>
|
||
|
||
<div style={{ background: '#f8fafc', border: '1px solid #e2ebf6', borderRadius: '10px', padding: '16px', marginBottom: '20px' }}>
|
||
{loading ? (
|
||
<div style={{ fontSize: '14px', color: '#00439e', fontWeight: 600 }}>⏳ Détection des voies réelles...</div>
|
||
) : (
|
||
<div>
|
||
{platforms.length > 0 ? (
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<label style={{ display: 'block', fontSize: '13px', fontWeight: 700, color: '#002257', marginBottom: '6px' }}>
|
||
Voies actives détectées :
|
||
</label>
|
||
<select
|
||
value={selectedPlatform}
|
||
onChange={(e) => {
|
||
setSelectedPlatform(e.target.value);
|
||
setManualPlatform('');
|
||
}}
|
||
style={{
|
||
width: '100%',
|
||
padding: '12px',
|
||
borderRadius: '8px',
|
||
border: '2px solid #c2dbfe',
|
||
fontSize: '15px',
|
||
fontWeight: 600,
|
||
background: '#ffffff',
|
||
color: '#002257'
|
||
}}
|
||
>
|
||
{platforms.map(p => (
|
||
<option key={p} value={p}>Voie {p}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
) : (
|
||
<div style={{ fontSize: '13px', color: '#666', marginBottom: '16px', background: '#fff', padding: '8px 12px', borderRadius: '6px' }}>
|
||
ℹ️ Saisie manuelle de la voie ci-dessous.
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: '13px', fontWeight: 700, color: '#002257', marginBottom: '6px' }}>
|
||
Ou saisie libre d'une voie :
|
||
</label>
|
||
<input
|
||
type="text"
|
||
placeholder="Ex: A, B, 1, 2 bis..."
|
||
value={manualPlatform}
|
||
onChange={(e) => setManualPlatform(e.target.value)}
|
||
style={{
|
||
width: '100%',
|
||
padding: '12px',
|
||
borderRadius: '8px',
|
||
border: '2px solid #e2ebf6',
|
||
fontSize: '15px',
|
||
boxSizing: 'border-box',
|
||
background: '#ffffff'
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={handlePlatform}
|
||
className="launcher-btn launcher-btn--success"
|
||
>
|
||
🚉 Lancer l'Afficheur de Quai
|
||
</button>
|
||
</div>
|
||
|
||
{/* Options 3 & 4 pour le mode Classiques : Flash Info & Informations */}
|
||
{typeParam === 'classiques' && (
|
||
<>
|
||
{/* Option 3 : Flash Information */}
|
||
<div className="launcher-select-card" style={{ cursor: 'default' }}>
|
||
<div>
|
||
<span className="launcher-card-icon">⚡</span>
|
||
<span className="launcher-card-tag launcher-card-tag--retro" style={{ background: '#fab23e', color: '#00337f' }}>
|
||
Flash Info Trafic
|
||
</span>
|
||
<h2 className="launcher-card-title">Flash Information</h2>
|
||
<p className="launcher-card-desc">
|
||
Écran dédié aux perturbations de circulation en temps réel et travaux de maintenance sur le réseau.
|
||
</p>
|
||
<div style={{ background: '#f8fafc', border: '1px solid #e2ebf6', borderRadius: '10px', padding: '16px', marginBottom: '20px' }}>
|
||
<div style={{ fontSize: '13px', color: '#00337f', fontWeight: 600 }}>
|
||
⚡ Conforme au design historique <em>Flash Circulation</em> avec fond ambre et bandeau bleu nuit.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const kebab = gareParam ? String(gareParam).trim() : '';
|
||
navigate(`${prefix}/afficheurs/classiques/flash-info?gare=${encodeURIComponent(kebab)}`);
|
||
}}
|
||
className="launcher-btn"
|
||
style={{ background: '#00337f', color: '#fab23e', border: 'none', fontWeight: 700 }}
|
||
>
|
||
⚡ Lancer le Flash Information
|
||
</button>
|
||
</div>
|
||
|
||
{/* Option 4 : Informations (Messages Dynamiques) */}
|
||
<div className="launcher-select-card" style={{ cursor: 'default' }}>
|
||
<div>
|
||
<span className="launcher-card-icon">ℹ️</span>
|
||
<span className="launcher-card-tag launcher-card-tag--retro" style={{ background: '#00337f', color: '#ffffff' }}>
|
||
Messages Gare
|
||
</span>
|
||
<h2 className="launcher-card-title">Informations Voyageurs</h2>
|
||
<p className="launcher-card-desc">
|
||
Écran d'annonces et consignes dynamiques de la gare (Vigipirate, étiquetage des bagages, sécurité en gare).
|
||
</p>
|
||
<div style={{ background: '#f8fafc', border: '1px solid #e2ebf6', borderRadius: '10px', padding: '16px', marginBottom: '20px' }}>
|
||
<div style={{ fontSize: '13px', color: '#00337f', fontWeight: 600 }}>
|
||
ℹ️ Conforme au design historique <em>Information</em> avec messages voyageurs de la gare de {decodedGare}.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const kebab = gareParam ? String(gareParam).trim() : '';
|
||
navigate(`${prefix}/afficheurs/classiques/informations?gare=${encodeURIComponent(kebab)}`);
|
||
}}
|
||
className="launcher-btn"
|
||
style={{ background: '#00337f', color: '#ffffff', border: 'none', fontWeight: 700 }}
|
||
>
|
||
ℹ️ Lancer l'Afficheur Informations
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Accès direct aux pages fixes AFL */}
|
||
{typeParam === 'afl' && (
|
||
<div style={{ borderTop: '1px solid #e2ebf6', paddingTop: '20px', marginBottom: '20px' }}>
|
||
<span className="launcher-chips-label">Accès direct à une page fixe AFL :</span>
|
||
<div className="launcher-chips-list">
|
||
<button type="button" onClick={() => handleSinglePage('1')} className="launcher-chip">
|
||
Page 1 (Horaires)
|
||
</button>
|
||
<button type="button" onClick={() => handleSinglePage('2')} className="launcher-chip">
|
||
Page 2 (Horaires)
|
||
</button>
|
||
<button type="button" onClick={() => handleSinglePage('infos')} className="launcher-chip">
|
||
Informations Trafic
|
||
</button>
|
||
<button type="button" onClick={() => handleSinglePage('securite1')} className="launcher-chip">
|
||
Sécurité (Bagages)
|
||
</button>
|
||
<button type="button" onClick={() => handleSinglePage('securite2')} className="launcher-chip">
|
||
Sécurité (Vigipirate / 3117)
|
||
</button>
|
||
<button type="button" onClick={() => handleSinglePage('corresp')} className="launcher-chip">
|
||
Correspondances
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Navigation retour */}
|
||
<div className="launcher-footer-nav">
|
||
<WcsButton
|
||
mode="plain"
|
||
onClick={() => {
|
||
if (typeof onBack === 'function') {
|
||
onBack();
|
||
} else if (typeof navigate === 'function') {
|
||
navigate(`${prefix}/afficheurs?gare=${encodeURIComponent(gareParam)}&mode=${modeParam}`);
|
||
}
|
||
}}
|
||
label="← Retour au choix du style"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
|