MrPatator230 committed
commit
3fcdf7e5ef
172 files changed
+52525
No files matched your search
+182
@@ -0,0 +1,182 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './App.css';
|
||||
|
||||
import { applyPolyfills, defineCustomElements } from 'wcs-core/loader';
|
||||
import Departs from './pages/Departs';
|
||||
import Arrivees from './pages/Arrivees';
|
||||
import Displays from './pages/Displays';
|
||||
import ClassiquesDeparts from './pages/afficheurs/classiques/ClassiquesDeparts';
|
||||
import ClassiquesArrivees from './pages/afficheurs/classiques/ClassiquesArrivees';
|
||||
import ClassiquesDepartsQuais from './pages/afficheurs/classiques/quais/ClassiquesDepartsQuais';
|
||||
import sessionMemory from './lib/sessionMemory';
|
||||
import ClassiquesArriveesQuais from "./pages/afficheurs/classiques/quais/ClassiquesArriveesQuais";
|
||||
applyPolyfills().then(() => defineCustomElements(window));
|
||||
|
||||
// Petit routeur client sans dépendances externes
|
||||
function useSimpleRouter() {
|
||||
function normalizePath(p) {
|
||||
if (!p) return '/';
|
||||
// retirer query string et hash pour normaliser le chemin utilisé en internal route
|
||||
p = String(p).split(/[?#]/)[0];
|
||||
// traiter les cas comme /index.html
|
||||
if (p.indexOf('index.html') !== -1) return '/';
|
||||
// supprimer espaces en début/fin
|
||||
p = p.trim();
|
||||
// supprimer slashs finaux sauf pour la racine
|
||||
if (p !== '/') p = p.replace(/\/+$/, '');
|
||||
return p || '/';
|
||||
}
|
||||
|
||||
const [route, setRoute] = useState(() => normalizePath(window.location.pathname || '/'));
|
||||
|
||||
useEffect(() => {
|
||||
const onPop = () => {
|
||||
const p = normalizePath(window.location.pathname || '/');
|
||||
console.debug('[router] popstate ->', p);
|
||||
setRoute(p);
|
||||
};
|
||||
window.addEventListener('popstate', onPop);
|
||||
return () => window.removeEventListener('popstate', onPop);
|
||||
}, []);
|
||||
|
||||
function navigate(path) {
|
||||
const target = normalizePath(path);
|
||||
// toujours pousser l'URL complète (path peut contenir query/hash),
|
||||
// mais stocker en internal state la version normalisée (sans query/hash)
|
||||
// comparer l'URL complète (pathname + search + hash) afin de permettre
|
||||
// des navigations qui ne changent que la querystring (ex. ?gare=...)
|
||||
const currentFull = window.location.pathname + (window.location.search || '') + (window.location.hash || '');
|
||||
if (currentFull !== path) {
|
||||
console.debug('[router] navigate ->', path, '(normalized ->', target, ')');
|
||||
try {
|
||||
window.history.pushState({}, '', path);
|
||||
} catch (e) {
|
||||
// fallback si path est invalide
|
||||
try { window.history.pushState({}, '', target); } catch (err) { /* ignore */ }
|
||||
}
|
||||
// mettre à jour la route interne (sans query/hash)
|
||||
setRoute(target);
|
||||
} else {
|
||||
// si l'URL complète est identique, forcer un update de state pour
|
||||
// déclencher un rendu si besoin (rare)
|
||||
setRoute(target);
|
||||
}
|
||||
}
|
||||
|
||||
return { route, navigate };
|
||||
}
|
||||
|
||||
function App() {
|
||||
const { route, navigate } = useSimpleRouter();
|
||||
|
||||
// Composant Home explicite (panels cliquables)
|
||||
function Home({ navigate }) {
|
||||
useEffect(() => {
|
||||
console.debug('[Home] monté, pathname =', window.location.pathname);
|
||||
}, []);
|
||||
const panelStyle = {
|
||||
width: '40%',
|
||||
cursor: 'pointer',
|
||||
padding: 24,
|
||||
borderRadius: 8,
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
|
||||
background: '#fff',
|
||||
textAlign: 'center'
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '40px', alignItems: 'center', background: '#e9f0ff', paddingTop: 32, paddingBottom: 32 }}>
|
||||
<div style={{ width: '100%', textAlign: 'center', marginBottom: 16 }}>
|
||||
<h1 style={{ margin: 0, fontSize: 28 }}>Accueil</h1>
|
||||
<p style={{ margin: '8px 0 20px', color: '#333' }}>Choisissez une section ci-dessous</p>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-around', width: '100%' }}>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => { try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {} navigate('/departs'); }}
|
||||
onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ' ? (function(){ try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {} navigate('/departs'); })() : null)}
|
||||
style={panelStyle}
|
||||
aria-label="Accéder aux départs"
|
||||
>
|
||||
<h2>Départs</h2>
|
||||
<p>Consultez les prochains départs d'une gare. Cliquez pour choisir une gare et voir les horaires.</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => { try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {} navigate('/arrivees'); }}
|
||||
onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ' ? (function(){ try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {} navigate('/arrivees'); })() : null)}
|
||||
style={panelStyle}
|
||||
aria-label="Accéder aux arrivées"
|
||||
>
|
||||
<h2>Arrivées</h2>
|
||||
<p>Consultez les prochaines arrivées d'une gare. Cliquez pour choisir une gare et voir les informations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Routes pour afficheurs : format /afficheurs/{mode}/{type}?gare=...
|
||||
// route plus spécifique pour l'afficheur "quais"
|
||||
if (route.startsWith('/afficheurs/departs/classiques/quais')) {
|
||||
return <ClassiquesDepartsQuais />;
|
||||
}
|
||||
if (route.startsWith('/afficheurs/arrivees/classiques/quais')) {
|
||||
return <ClassiquesArriveesQuais />;
|
||||
}
|
||||
if (route.startsWith('/afficheurs/departs/classiques')) {
|
||||
return <ClassiquesDeparts />;
|
||||
}
|
||||
if (route.startsWith('/afficheurs/arrivees/classiques')) {
|
||||
return <ClassiquesArrivees />;
|
||||
}
|
||||
|
||||
let content;
|
||||
if (route === '/departs') {
|
||||
content = <Departs onBack={() => navigate('/')} navigate={navigate} />;
|
||||
} else if (route === '/arrivees') {
|
||||
content = <Arrivees onBack={() => navigate('/')} navigate={navigate} />;
|
||||
} else if (route.startsWith('/afficheurs')) {
|
||||
content = <Displays onBack={() => navigate('/')} navigate={navigate} />;
|
||||
} else {
|
||||
content = <Home navigate={navigate} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="sncf-voyageurs" style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
|
||||
<wcs-galactic app-name="Affichage Ferroviaire" version="1.0.0">
|
||||
<wcs-galactic-menu-item>
|
||||
<a href="/departs" onClick={(e) => { e.preventDefault(); navigate('/departs'); }}>Départs</a>
|
||||
</wcs-galactic-menu-item>
|
||||
<wcs-galactic-menu-item>
|
||||
<a href="/arrivees" onClick={(e) => { e.preventDefault(); navigate('/arrivees'); }}>Arrivées</a>
|
||||
</wcs-galactic-menu-item>
|
||||
</wcs-galactic>
|
||||
|
||||
<header style={{ padding: 12, background: '#00439e', color: '#fff' }}>
|
||||
<div style={{ maxWidth: 1000, margin: '0 auto' }}>
|
||||
<h1 style={{ margin: 0, fontSize: 20 }}>Affichage Ferroviaire — Accueil</h1>
|
||||
<div style={{ fontSize: 12, opacity: 0.9 }}>Route actuelle: {route}</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main style={{ flex: 1, background: '#f3f6fb' }}>
|
||||
<div style={{ maxWidth: 1000, margin: '24px auto' }}>{content}</div>
|
||||
</main>
|
||||
|
||||
<wcs-footer>
|
||||
<wcs-footer-item>
|
||||
<a href="/contact">Contact</a>
|
||||
</wcs-footer-item>
|
||||
<wcs-footer-item>
|
||||
<a href="/mentions-legales">Mentions Légales</a>
|
||||
</wcs-footer-item>
|
||||
</wcs-footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
Reference in new issue
Block a user