V1.1.0 //
-> Refonte du design de sélection d'afficheurs -> Ajout du Mode PiP -> Patch du bug du logo de l'horaire pas affiché. Corrigé pour les Horaires TER à 6 numéros.
This commit is contained in:
AdminGit committed
1 parent
c30a0e9002
commit
6cc1e1820d
14 files changed
+1143
-849
No files matched your search
@@ -0,0 +1,204 @@
|
||||
const fs = require('fs');
|
||||
|
||||
const filePath = 'c:\\Users\\mathi\\Documents\\Développement WEB\\ferrovia-infogare\\src\\App.js';
|
||||
|
||||
let content = fs.readFileSync(filePath, 'utf-8');
|
||||
|
||||
content = content.replace(
|
||||
"import React, { useEffect, useState } from 'react';",
|
||||
"import React, { useEffect, useState } from 'react';\nimport { WcsCard, WcsCardBody, WcsButton, WcsBadge } from 'wcs-react';"
|
||||
);
|
||||
|
||||
const home_component_old = ` return (
|
||||
<div className="launcher-container">
|
||||
{/* Carte de bienvenue */}
|
||||
<div className="launcher-card">
|
||||
<div className="launcher-header">
|
||||
<div>
|
||||
<h1 className="launcher-title">🚅 Téléaffichage Ferroviaire SNCF</h1>
|
||||
<p className="launcher-subtitle">
|
||||
{source === 'supabase'
|
||||
? "Consultez les afficheurs basés sur les données de votre BDD Supabase."
|
||||
: "Simulateur d'écrans de gare officiels connectés en direct aux flux GTFS & Open Data SNCF."}
|
||||
</p>
|
||||
</div>
|
||||
<span className={\`launcher-badge \${source === 'supabase' ? 'launcher-badge--supabase' : ''}\`}>
|
||||
{source === 'supabase' ? '🗄️ Mode Supabase' : '🌐 Mode SNCF Live'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Cartes principales : Départs / Arrivées */}
|
||||
<div className="launcher-grid launcher-grid--2col">
|
||||
<div
|
||||
className="launcher-select-card"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
|
||||
navigate(\`\${prefix}/departs\`);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
|
||||
navigate(\`\${prefix}/departs\`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<span className="launcher-card-icon">🚆</span>
|
||||
<span className="launcher-card-tag launcher-card-tag--modern">Départs</span>
|
||||
<h2 className="launcher-card-title">Prochains Départs</h2>
|
||||
<p className="launcher-card-desc">
|
||||
Consultez les trains au départ, leurs voies, retards et dessertes complètes.
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<span className="launcher-btn launcher-btn--primary">
|
||||
Consulter les Départs ›
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="launcher-select-card"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {}
|
||||
navigate(\`\${prefix}/arrivees\`);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {}
|
||||
navigate(\`\${prefix}/arrivees\`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<span className="launcher-card-icon">🏁</span>
|
||||
<span className="launcher-card-tag launcher-card-tag--modern">Arrivées</span>
|
||||
<h2 className="launcher-card-title">Prochaines Arrivées</h2>
|
||||
<p className="launcher-card-desc">
|
||||
Suivez en direct les trains attendus en gare, provenances et voies assignées.
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<span className="launcher-btn launcher-btn--secondary">
|
||||
Consulter les Arrivées ›
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Raccourcis rapides vers les gares */}
|
||||
<div className="launcher-chips-container" style={{ marginTop: '8px' }}>
|
||||
<span className="launcher-chips-label">Accès direct par gare :</span>
|
||||
<div className="launcher-chips-list">
|
||||
{POPULAR_HOME_GARES.map((gName) => (
|
||||
<button
|
||||
key={gName}
|
||||
type="button"
|
||||
className="launcher-chip"
|
||||
onClick={() => {
|
||||
try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
|
||||
navigate(\`\${prefix}/afficheurs/\${encodeURIComponent(gName)}?mode=departs\`);
|
||||
}}
|
||||
>
|
||||
📍 {gName.replace(/-/g, ' ')}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Présentation des types d'afficheurs */}
|
||||
<div style={{ borderTop: '1px solid #e2ebf6', paddingTop: '20px', marginTop: '20px' }}>
|
||||
<div style={{ fontSize: '13px', color: '#5f6368', lineHeight: 1.6 }}>
|
||||
✨ <strong>Formats disponibles :</strong> Afficheurs Fluides & Lumineux (AFL), Téléaffichage historique (Classiques), Écrans Vidéo Voyageurs (EVA) et Écrans par Quai / Voie.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);`;
|
||||
|
||||
const home_component_new = ` return (
|
||||
<div className="launcher-container" style={{ padding: '24px', maxWidth: '900px', margin: '0 auto' }}>
|
||||
<WcsCard mode="raised">
|
||||
<WcsCardBody>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '24px' }}>
|
||||
<div>
|
||||
<h1 style={{ margin: '0 0 8px 0', fontSize: '24px', color: 'var(--wcs-primary)' }}>🚅 Téléaffichage Ferroviaire SNCF</h1>
|
||||
<p style={{ margin: 0, color: 'var(--wcs-text-light)' }}>
|
||||
{source === 'supabase'
|
||||
? "Consultez les afficheurs basés sur les données de votre BDD Supabase."
|
||||
: "Simulateur d'écrans de gare officiels connectés en direct aux flux GTFS & Open Data SNCF."}
|
||||
</p>
|
||||
</div>
|
||||
<WcsBadge className={source === 'supabase' ? 'wcs-secondary' : 'wcs-primary'} shape="rounded">
|
||||
{source === 'supabase' ? '🗄️ Mode Supabase' : '🌐 Mode SNCF Live'}
|
||||
</WcsBadge>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '24px', flexDirection: 'row', flexWrap: 'wrap', marginBottom: '24px' }}>
|
||||
<WcsCard style={{ flex: '1 1 300px', cursor: 'pointer' }} mode="flat" onClick={() => {
|
||||
try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
|
||||
navigate(\`\${prefix}/departs\`);
|
||||
}}>
|
||||
<WcsCardBody>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: '32px' }}>🚆</span>
|
||||
<WcsBadge className="wcs-success">Départs</WcsBadge>
|
||||
</div>
|
||||
<h2 style={{ fontSize: '18px', marginTop: '16px' }}>Prochains Départs</h2>
|
||||
<p style={{ color: 'var(--wcs-text-light)', minHeight: '60px' }}>Consultez les trains au départ, leurs voies, retards et dessertes complètes.</p>
|
||||
<WcsButton className="wcs-primary" style={{ width: '100%' }}>Consulter les Départs</WcsButton>
|
||||
</WcsCardBody>
|
||||
</WcsCard>
|
||||
|
||||
<WcsCard style={{ flex: '1 1 300px', cursor: 'pointer' }} mode="flat" onClick={() => {
|
||||
try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {}
|
||||
navigate(\`\${prefix}/arrivees\`);
|
||||
}}>
|
||||
<WcsCardBody>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: '32px' }}>🏁</span>
|
||||
<WcsBadge className="wcs-info">Arrivées</WcsBadge>
|
||||
</div>
|
||||
<h2 style={{ fontSize: '18px', marginTop: '16px' }}>Prochaines Arrivées</h2>
|
||||
<p style={{ color: 'var(--wcs-text-light)', minHeight: '60px' }}>Suivez en direct les trains attendus en gare, provenances et voies assignées.</p>
|
||||
<WcsButton className="wcs-secondary" style={{ width: '100%' }}>Consulter les Arrivées</WcsButton>
|
||||
</WcsCardBody>
|
||||
</WcsCard>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<p style={{ fontWeight: 'bold', marginBottom: '12px' }}>Accès direct par gare :</p>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
|
||||
{POPULAR_HOME_GARES.map((gName) => (
|
||||
<WcsButton
|
||||
key={gName}
|
||||
mode="stroked"
|
||||
shape="round"
|
||||
size="s"
|
||||
onClick={() => {
|
||||
try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
|
||||
navigate(\`\${prefix}/afficheurs/\${encodeURIComponent(gName)}?mode=departs\`);
|
||||
}}
|
||||
>
|
||||
📍 {gName.replace(/-/g, ' ')}
|
||||
</WcsButton>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style={{ border: 'none', borderTop: '1px solid var(--wcs-light)', margin: '24px 0' }} />
|
||||
<div style={{ fontSize: '14px', color: 'var(--wcs-text-light)', lineHeight: 1.6 }}>
|
||||
✨ <strong>Formats disponibles :</strong> Afficheurs Fluides & Lumineux (AFL), Téléaffichage historique (Classiques), Écrans Vidéo Voyageurs (EVA) et Écrans par Quai / Voie.
|
||||
</div>
|
||||
</WcsCardBody>
|
||||
</WcsCard>
|
||||
</div>
|
||||
);`;
|
||||
|
||||
content = content.replace(home_component_old, home_component_new);
|
||||
fs.writeFileSync(filePath, content, 'utf-8');
|
||||
console.log('App.js patched successfully');
|
||||
@@ -0,0 +1,207 @@
|
||||
import os
|
||||
|
||||
file_path = r"c:\Users\mathi\Documents\Développement WEB\ferrovia-infogare\src\App.js"
|
||||
|
||||
with open(file_path, "r", encoding="utf-8") as f:
|
||||
content = f.read()
|
||||
|
||||
# Make the changes in App.js for the Home component
|
||||
new_content = content.replace(
|
||||
"import React, { useEffect, useState } from 'react';",
|
||||
"import React, { useEffect, useState } from 'react';\nimport { WcsCard, WcsCardBody, WcsButton, WcsBadge } from 'wcs-react';"
|
||||
)
|
||||
|
||||
home_component_old = """ return (
|
||||
<div className="launcher-container">
|
||||
{/* Carte de bienvenue */}
|
||||
<div className="launcher-card">
|
||||
<div className="launcher-header">
|
||||
<div>
|
||||
<h1 className="launcher-title">🚅 Téléaffichage Ferroviaire SNCF</h1>
|
||||
<p className="launcher-subtitle">
|
||||
{source === 'supabase'
|
||||
? "Consultez les afficheurs basés sur les données de votre BDD Supabase."
|
||||
: "Simulateur d'écrans de gare officiels connectés en direct aux flux GTFS & Open Data SNCF."}
|
||||
</p>
|
||||
</div>
|
||||
<span className={`launcher-badge ${source === 'supabase' ? 'launcher-badge--supabase' : ''}`}>
|
||||
{source === 'supabase' ? '🗄️ Mode Supabase' : '🌐 Mode SNCF Live'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Cartes principales : Départs / Arrivées */}
|
||||
<div className="launcher-grid launcher-grid--2col">
|
||||
<div
|
||||
className="launcher-select-card"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
|
||||
navigate(`${prefix}/departs`);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
|
||||
navigate(`${prefix}/departs`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<span className="launcher-card-icon">🚆</span>
|
||||
<span className="launcher-card-tag launcher-card-tag--modern">Départs</span>
|
||||
<h2 className="launcher-card-title">Prochains Départs</h2>
|
||||
<p className="launcher-card-desc">
|
||||
Consultez les trains au départ, leurs voies, retards et dessertes complètes.
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<span className="launcher-btn launcher-btn--primary">
|
||||
Consulter les Départs ›
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="launcher-select-card"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {}
|
||||
navigate(`${prefix}/arrivees`);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {}
|
||||
navigate(`${prefix}/arrivees`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<span className="launcher-card-icon">🏁</span>
|
||||
<span className="launcher-card-tag launcher-card-tag--modern">Arrivées</span>
|
||||
<h2 className="launcher-card-title">Prochaines Arrivées</h2>
|
||||
<p className="launcher-card-desc">
|
||||
Suivez en direct les trains attendus en gare, provenances et voies assignées.
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<span className="launcher-btn launcher-btn--secondary">
|
||||
Consulter les Arrivées ›
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Raccourcis rapides vers les gares */}
|
||||
<div className="launcher-chips-container" style={{ marginTop: '8px' }}>
|
||||
<span className="launcher-chips-label">Accès direct par gare :</span>
|
||||
<div className="launcher-chips-list">
|
||||
{POPULAR_HOME_GARES.map((gName) => (
|
||||
<button
|
||||
key={gName}
|
||||
type="button"
|
||||
className="launcher-chip"
|
||||
onClick={() => {
|
||||
try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
|
||||
navigate(`${prefix}/afficheurs/${encodeURIComponent(gName)}?mode=departs`);
|
||||
}}
|
||||
>
|
||||
📍 {gName.replace(/-/g, ' ')}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Présentation des types d'afficheurs */}
|
||||
<div style={{ borderTop: '1px solid #e2ebf6', paddingTop: '20px', marginTop: '20px' }}>
|
||||
<div style={{ fontSize: '13px', color: '#5f6368', lineHeight: 1.6 }}>
|
||||
✨ <strong>Formats disponibles :</strong> Afficheurs Fluides & Lumineux (AFL), Téléaffichage historique (Classiques), Écrans Vidéo Voyageurs (EVA) et Écrans par Quai / Voie.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);"""
|
||||
|
||||
home_component_new = """ return (
|
||||
<div className="launcher-container" style={{ padding: '24px', maxWidth: '900px', margin: '0 auto' }}>
|
||||
<WcsCard mode="raised">
|
||||
<WcsCardBody>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '24px' }}>
|
||||
<div>
|
||||
<h1 style={{ margin: '0 0 8px 0', fontSize: '24px', color: 'var(--wcs-primary)' }}>🚅 Téléaffichage Ferroviaire SNCF</h1>
|
||||
<p style={{ margin: 0, color: 'var(--wcs-text-light)' }}>
|
||||
{source === 'supabase'
|
||||
? "Consultez les afficheurs basés sur les données de votre BDD Supabase."
|
||||
: "Simulateur d'écrans de gare officiels connectés en direct aux flux GTFS & Open Data SNCF."}
|
||||
</p>
|
||||
</div>
|
||||
<WcsBadge className={source === 'supabase' ? 'wcs-secondary' : 'wcs-primary'} shape="rounded">
|
||||
{source === 'supabase' ? '🗄️ Mode Supabase' : '🌐 Mode SNCF Live'}
|
||||
</WcsBadge>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '24px', flexDirection: 'row', flexWrap: 'wrap', marginBottom: '24px' }}>
|
||||
<WcsCard style={{ flex: '1 1 300px', cursor: 'pointer' }} mode="flat" onClick={() => {
|
||||
try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
|
||||
navigate(`${prefix}/departs`);
|
||||
}}>
|
||||
<WcsCardBody>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: '32px' }}>🚆</span>
|
||||
<WcsBadge className="wcs-success">Départs</WcsBadge>
|
||||
</div>
|
||||
<h2 style={{ fontSize: '18px', marginTop: '16px' }}>Prochains Départs</h2>
|
||||
<p style={{ color: 'var(--wcs-text-light)', minHeight: '60px' }}>Consultez les trains au départ, leurs voies, retards et dessertes complètes.</p>
|
||||
<WcsButton className="wcs-primary" style={{ width: '100%' }}>Consulter les Départs</WcsButton>
|
||||
</WcsCardBody>
|
||||
</WcsCard>
|
||||
|
||||
<WcsCard style={{ flex: '1 1 300px', cursor: 'pointer' }} mode="flat" onClick={() => {
|
||||
try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {}
|
||||
navigate(`${prefix}/arrivees`);
|
||||
}}>
|
||||
<WcsCardBody>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: '32px' }}>🏁</span>
|
||||
<WcsBadge className="wcs-info">Arrivées</WcsBadge>
|
||||
</div>
|
||||
<h2 style={{ fontSize: '18px', marginTop: '16px' }}>Prochaines Arrivées</h2>
|
||||
<p style={{ color: 'var(--wcs-text-light)', minHeight: '60px' }}>Suivez en direct les trains attendus en gare, provenances et voies assignées.</p>
|
||||
<WcsButton className="wcs-secondary" style={{ width: '100%' }}>Consulter les Arrivées</WcsButton>
|
||||
</WcsCardBody>
|
||||
</WcsCard>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<p style={{ fontWeight: 'bold', marginBottom: '12px' }}>Accès direct par gare :</p>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
|
||||
{POPULAR_HOME_GARES.map((gName) => (
|
||||
<WcsButton
|
||||
key={gName}
|
||||
mode="stroked"
|
||||
shape="round"
|
||||
size="s"
|
||||
onClick={() => {
|
||||
try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
|
||||
navigate(`${prefix}/afficheurs/${encodeURIComponent(gName)}?mode=departs`);
|
||||
}}
|
||||
>
|
||||
📍 {gName.replace(/-/g, ' ')}
|
||||
</WcsButton>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style={{ border: 'none', borderTop: '1px solid var(--wcs-light)', margin: '24px 0' }} />
|
||||
<div style={{ fontSize: '14px', color: 'var(--wcs-text-light)', lineHeight: 1.6 }}>
|
||||
✨ <strong>Formats disponibles :</strong> Afficheurs Fluides & Lumineux (AFL), Téléaffichage historique (Classiques), Écrans Vidéo Voyageurs (EVA) et Écrans par Quai / Voie.
|
||||
</div>
|
||||
</WcsCardBody>
|
||||
</WcsCard>
|
||||
</div>
|
||||
);"""
|
||||
|
||||
new_content = new_content.replace(home_component_old, home_component_new)
|
||||
|
||||
with open(file_path, "w", encoding="utf-8") as f:
|
||||
f.write(new_content)
|
||||
Reference in new issue
Block a user