Initial commit

Created from https://vercel.com/new

src/pages/Displays.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import WcsButton from '../components/WcsButton';
+import sessionMemory from '../lib/sessionMemory';
+
+export default function Displays({ onBack, navigate }) {
+  const types = [
+    { id: 'classiques', label: 'Classiques' },
+    { id: 'eva', label: 'EVA' },
+    { id: 'afl', label: 'AFL' },
+    { id: 'transilien', label: 'TRANSILIEN' }
+  ];
+
+  // Récupérer la gare : soit dans le pathname (/afficheurs/<gare>),
+  // soit via la querystring ?gare=... si la route est déjà /afficheurs/<type>/<mode>
+  const parts = typeof window !== 'undefined' ? window.location.pathname.split('/').filter(Boolean) : [];
+  const typeIds = types.map(t => t.id);
+  let gare = null;
+  if (parts[0] === 'afficheurs' && parts[1] && !typeIds.includes(parts[1])) {
+    // cas /afficheurs/<gare>
+    try {
+      gare = decodeURIComponent(parts.slice(1).join('/'));
+    } catch (e) {
+      gare = parts.slice(1).join('/');
+    }
+  } else {
+    // si l'URL est /afficheurs/<type>/<mode>, regarder dans la querystring ?gare=...
+    const paramsForGare = new URLSearchParams(window.location.search || '');
+    const g = paramsForGare.get('gare');
+    if (g) {
+      try {
+        // décoder puis remplacer les tirets par des espaces pour l'affichage
+        gare = decodeURIComponent(String(g).replace(/\+/g, ' ')).replace(/-/g, ' ');
+      } catch (e) {
+        gare = String(g).replace(/-/g, ' ');
+      }
+    }
+  }
+
+  // déterminer le mode (departs/arrivees) : querystring > localStorage > default('departs')
+  const params = new URLSearchParams(window.location.search || '');
+  let mode = params.get('mode');
+  if (!mode) {
+    try {
+      const stored = sessionMemory.get('afficheurMode');
+      if (stored) mode = stored;
+    } catch (e) {
+      // ignore
+    }
+  }
+  if (!mode) mode = 'departs';
+
+  return (
+    <div style={{ padding: 20 }}>
+      <h1>Choisissez un type d'afficheur</h1>
+      {gare && <p>Gare sélectionnée : <strong>{gare}</strong></p>}
+      <p>Mode sélectionné : <strong>{mode === 'arrivees' ? 'Arrivées' : 'Départs'}</strong></p>
+
+      {/* Boutons directs pour afficher les afficheurs classiques supprimés */}
+
+      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 16 }}>
+        {types.map((t) => (
+            <div key={t.id} role="button" tabIndex={0} style={{ width: 220, padding: 16, borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.08)', background: '#fff', cursor: 'pointer' }} onClick={() => {
+            // Si un navigate est fourni par le routeur simple, on l'utilise
+            if (typeof navigate === 'function') {
+              // construire l'URL finale au format strict demandé :
+              // /afficheurs/{mode}/{type}?gare=<Nom-de-la-gare>
+              const kebab = gare ? String(gare).trim().replace(/\s+/g, '-').replace(/\//g, '/') : '';
+              const gareQuery = kebab ? `?gare=${encodeURIComponent(kebab)}` : '';
+              // Construire l'URL au format demandé : /afficheurs/{mode}/{type}?gare=...
+              navigate(`/afficheurs/${mode}/${t.id}${gareQuery}`);
+              return;
+            }
+            alert(`${t.label} pour ${gare || '—'}`);
+          }}>
+            <h3 style={{ margin: '0 0 8px' }}>{t.label}</h3>
+            <p style={{ margin: 0, color: '#555' }}>Afficher le style {t.label} pour la gare {gare || ''}.</p>
+          </div>
+        ))}
+      </div>
+
+      <div style={{ marginTop: 24 }}>
+        {/* Bouton de retour au style WCS SNCF */}
+        <WcsButton
+          // Styliser le bouton comme un bouton d'action WCS. On peut ajuster `mode` ou
+          // ajouter `className` (ex: "wcs-primary") si vous avez des classes globales.
+          mode="plain"
+          className="wcs-primary"
+          onClick={() => {
+            // Appelle le callback fourni par le routeur simple si disponible
+            try {
+              if (typeof onBack === 'function') {
+                onBack();
+                return;
+              }
+            } catch (e) {
+              // ignore
+            }
+
+            // Fallback : si l'historique du navigateur permet un back, on l'utilise
+            if (typeof window !== 'undefined' && window.history && window.history.length > 1) {
+              window.history.back();
+            } else {
+              // Redirection sûre vers la racine
+              window.location.href = '/';
+            }
+          }}
+          label="Retour"
+        />
+      </div>
+    </div>
+  );
+}
+