4rd commitekk

Dockerfile

@@ -0,0 +1,24 @@
+# Utiliser une image Python officielle comme image de base
+FROM python:3.9-slim
+
+# Définir le répertoire de travail dans le conteneur
+WORKDIR /app
+
+# Copier les fichiers de dépendances
+COPY requirements.txt .
+
+# Installer les dépendances
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copier le reste du code de l'application
+COPY . .
+
+# Variables d'environnement
+ENV FLASK_APP=app.py
+ENV FLASK_ENV=production
+
+# Exposer le port sur lequel l'application s'exécute
+EXPOSE 5003
+
+# Commande pour démarrer l'application avec Gunicorn
+CMD ["gunicorn", "--bind", "0.0.0.0:5003", "app:app"]

app.py

@@ -0,0 +1,100 @@
+from flask import Flask, jsonify, render_template
+import os
+from dotenv import load_dotenv
+from get_perturbations import PerturbationScraper
+from get_departures import get_all_departures
+
+# Charger les variables d'environnement
+load_dotenv()
+
+app = Flask(__name__)
+
+TOMTOM_API_KEY = os.getenv("TOMTOM_API_KEY")
+app.config['TOMTOM_API_KEY'] = os.getenv('TOMTOM_API_KEY')
+app.config['NAVITIA_API_KEY'] = os.getenv('NAVITIA_API_KEY', '34aa3a57-969c-40bf-b05a-cc2d8beb17f7')
+
+# Coordonnées du centre de Lille
+LILLE_CENTER = {"lat": 50.6292, "lon": 3.0573}
+
+def get_lille_traffic():
+    """
+    Récupère les informations de trafic de Lille
+    Returns:
+        dict: Informations de trafic organisées par type de transport
+    """
+    scraper = PerturbationScraper()
+    perturbations = scraper.get_perturbations()
+    
+    # Organiser les perturbations par type de transport
+    organized_traffic = {
+        'metro': {'name': 'Métro', 'lines': []},
+        'tram': {'name': 'Tramway', 'lines': []},
+        'bus': {'name': 'Bus', 'lines': []}
+    }
+    
+    type_mapping = {
+        'metro_lines': 'metro',
+        'tram_lines': 'tram',
+        'bus_lines': 'bus'
+    }
+    
+    for p in perturbations:
+        line_type = type_mapping.get(p['line_type'])
+        if line_type in organized_traffic:
+            organized_traffic[line_type]['lines'].append({
+                'name': p['line'],
+                'trace': p['line_trace'],
+                'alerts': p['alerts']
+            })
+    
+    return organized_traffic
+
+@app.route('/')
+def index():
+    """Page d'accueil avec la carte et les perturbations"""
+    traffic_info = get_lille_traffic()
+    return render_template('lille_traffic.html', 
+                         api_key=TOMTOM_API_KEY,
+                         center=LILLE_CENTER,
+                         transport_types=traffic_info)
+
+@app.route('/api/traffic')
+def get_traffic_api():
+    """
+    Endpoint API pour obtenir les informations de trafic
+    """
+    traffic_info = get_lille_traffic()
+    return jsonify(traffic_info)
+
+@app.route('/api/perturbations/<line_name>')
+def get_line_perturbations(line_name):
+    """
+    Endpoint API pour obtenir les perturbations d'une ligne spécifique
+    """
+    scraper = PerturbationScraper()
+    perturbations = scraper.get_perturbations()
+    
+    line_perturbations = next(
+        (p for p in perturbations if p['line'] == line_name),
+        None
+    )
+    
+    if line_perturbations:
+        return jsonify({
+            'line': line_name,
+            'trace': line_perturbations['line_trace'],
+            'alerts': line_perturbations['alerts']
+        })
+    else:
+        return jsonify({'error': 'Ligne non trouvée'}), 404
+
+@app.route('/api/departures')
+def get_station_departures():
+    try:
+        departures = get_all_departures(app.config['NAVITIA_API_KEY'])
+        return jsonify(departures)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5003)

get_departures.py

@@ -0,0 +1,65 @@
+import requests
+from datetime import datetime
+import pytz
+
+def get_station_departures(api_key, station_id):
+    """
+    Récupère les prochains départs d'une gare spécifique
+    """
+    headers = {
+        'Authorization': api_key
+    }
+    
+    # On utilise l'API des départs pour la gare spécifique
+    url = f'https://api.navitia.io/v1/coverage/sncf/stop_points/{station_id}/departures'
+    
+    try:
+        response = requests.get(url, headers=headers)
+        response.raise_for_status()
+        
+        data = response.json()
+        departures = []
+        
+        for departure in data.get('departures', []):
+            # On extrait les informations pertinentes
+            departure_time = departure['stop_date_time']['departure_date_time']
+            direction = departure['display_informations']['direction']
+            line_name = departure['display_informations']['commercial_mode']
+            headsign = departure['display_informations']['headsign']
+            
+            # Conversion du temps de départ
+            dt = datetime.strptime(departure_time, "%Y%m%dT%H%M%S")
+            paris_tz = pytz.timezone('Europe/Paris')
+            dt = paris_tz.localize(dt)
+            formatted_time = dt.strftime("%H:%M")
+            
+            departures.append({
+                'time': formatted_time,
+                'direction': direction,
+                'type': line_name,
+                'train_number': headsign
+            })
+            
+        return departures
+        
+    except requests.exceptions.RequestException as e:
+        print(f"Erreur lors de la récupération des départs: {e}")
+        return []
+
+def get_all_departures(api_key):
+    """
+    Récupère les départs des deux gares principales de Lille
+    """
+    # IDs des gares de Lille
+    stations = {
+        'Lille Europe': 'stop_point:SNCF:87223263:Train',
+        'Lille Flandres': 'stop_point:SNCF:87286005:Train'
+    }
+    
+    all_departures = {}
+    
+    for station_name, station_id in stations.items():
+        departures = get_station_departures(api_key, station_id)
+        all_departures[station_name] = departures
+        
+    return all_departures

get_perturbations.py

@@ -0,0 +1,90 @@
+import requests
+from datetime import datetime
+
+class PerturbationScraper:
+    def __init__(self):
+        self.headers = {
+            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
+        }
+        self.api_url = 'https://mobilille.fr/api/v1/lines'
+
+    def get_perturbations(self):
+        try:
+            response = requests.get(self.api_url, headers=self.headers)
+            response.raise_for_status()
+            lines = response.json()
+            
+            perturbations = []
+            
+            for line in lines:
+                # Filtrer les alertes importantes (perturbations, déviations, travaux)
+                important_alerts = [
+                    alert for alert in line.get('alerts', [])
+                    if any(keyword in alert.get('alert_title', '').lower() 
+                          for keyword in ['perturbation', 'déviation', 'travaux'])
+                    and 'descente à la demande' not in alert.get('alert_title', '').lower()
+                    and 'forte affluence' not in alert.get('alert_title', '').lower()
+                ]
+                
+                if important_alerts:
+                    perturbation = {
+                        'line': line.get('line_name', 'Inconnue'),
+                        'line_trace': line.get('line_trace', ''),
+                        'line_type': line.get('line_type', ''),
+                        'alerts': []
+                    }
+                    
+                    for alert in important_alerts:
+                        date_modif = datetime.strptime(alert.get('date_modif', ''), '%Y-%m-%d %H:%M:%S')
+                        formatted_time = date_modif.strftime('%d/%m/%Y à %H:%M')
+                        
+                        perturbation['alerts'].append({
+                            'title': alert.get('alert_title', ''),
+                            'description': alert.get('message_app', ''),
+                            'update_time': formatted_time
+                        })
+                    
+                    perturbations.append(perturbation)
+            
+            # Trier les perturbations par type de ligne (métro, tram, bus)
+            type_order = {'metro_lines': 0, 'tram_lines': 1, 'bus_lines': 2}
+            perturbations.sort(key=lambda x: type_order.get(x['line_type'], 999))
+            
+            return perturbations
+            
+        except Exception as e:
+            print(f"Erreur lors de la récupération des perturbations : {e}")
+            return []
+
+def main():
+    scraper = PerturbationScraper()
+    perturbations = scraper.get_perturbations()
+    
+    print("\n=== Perturbations en cours ===\n")
+    if not perturbations:
+        print("Aucune perturbation n'est actuellement signalée.")
+    else:
+        current_type = None
+        for p in perturbations:
+            # Afficher un en-tête pour chaque type de transport
+            line_type = p['line_type']
+            if line_type != current_type:
+                if current_type is not None:
+                    print("\n" + "=" * 50 + "\n")
+                current_type = line_type
+                type_name = {
+                    'metro_lines': '🚇 Métro',
+                    'tram_lines': '🚊 Tramway',
+                    'bus_lines': '🚌 Bus'
+                }.get(line_type, 'Autre')
+                print(f"{type_name}:")
+            
+            print(f"\nLigne {p['line']} - {p['line_trace']}")
+            for alert in p['alerts']:
+                print(f"\n🚨 {alert['title']}")
+                print(f"{alert['description']}")
+                print(f"\nℹ️ Mise à jour : {alert['update_time']}")
+            print("-" * 50)
+
+if __name__ == "__main__":
+    main()

requirements.txt

@@ -0,0 +1,5 @@
+Flask==3.0.0
+requests==2.31.0
+python-dotenv==1.0.0
+pytz==2023.3
+gunicorn==21.2.0

static/css/style.css

@@ -0,0 +1,195 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f0f2f5;
+    min-height: 100vh;
+}
+
+/* En-tête de page */
+.page-header {
+    background: #fff;
+    padding: 1rem;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    text-align: center;
+}
+
+.page-header h1 {
+    font-size: 1.75rem;
+    color: #1a1a1a;
+    margin-bottom: 0.25rem;
+}
+
+.last-update {
+    font-size: 0.9rem;
+    color: #666;
+}
+
+/* Container principal */
+.container {
+    display: flex;
+    padding: 1rem;
+    gap: 1rem;
+    min-height: calc(100vh - 100px);
+}
+
+/* Panel de trafic */
+.traffic-panel {
+    flex: 0 0 350px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    padding: 1rem;
+    height: fit-content;
+}
+
+.traffic-info h2 {
+    font-size: 1.25rem;
+    margin-bottom: 1rem;
+    color: #1a1a1a;
+}
+
+/* Sections de transport */
+.transport-section {
+    margin-bottom: 1.5rem;
+}
+
+.transport-section h3 {
+    font-size: 1.1rem;
+    color: #333;
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #eee;
+}
+
+/* Liste des lignes */
+.line-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.line-button {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 4px;
+    background: #f5f5f5;
+    color: #333;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.line-button:hover {
+    background: #e0e0e0;
+}
+
+.line-button.active {
+    background: #007bff;
+    color: #fff;
+}
+
+/* Message pas de perturbation */
+.no-disruption {
+    color: #666;
+    font-style: italic;
+    padding: 0.5rem 0;
+}
+
+/* Détails des perturbations */
+.perturbation-details {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #eee;
+}
+
+.details-header {
+    margin-bottom: 1rem;
+}
+
+.details-header h3 {
+    font-size: 1.1rem;
+    color: #1a1a1a;
+    margin-bottom: 0.25rem;
+}
+
+.line-trace {
+    font-size: 0.9rem;
+    color: #666;
+}
+
+/* Alertes */
+.alert {
+    margin-bottom: 1rem;
+    padding: 1rem;
+    background: #fff3cd;
+    border-left: 4px solid #ffc107;
+    border-radius: 4px;
+}
+
+.alert-title {
+    font-weight: 600;
+    color: #856404;
+    margin-bottom: 0.5rem;
+}
+
+.alert-description {
+    color: #333;
+    font-size: 0.95rem;
+    margin-bottom: 0.5rem;
+}
+
+.alert-time {
+    font-size: 0.85rem;
+    color: #666;
+}
+
+/* Container de la carte */
+.map-container {
+    flex: 1;
+    min-height: calc(100vh - 132px);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+#leaflet-map {
+    width: 100%;
+    height: 100%;
+}
+
+/* Styles spécifiques pour les types de transport */
+.line-button.metro {
+    border-left: 3px solid #e31837;
+}
+
+.line-button.tram {
+    border-left: 3px solid #e17000;
+}
+
+.line-button.bus {
+    border-left: 3px solid #007ac9;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+    .container {
+        flex-direction: column;
+    }
+
+    .traffic-panel {
+        flex: none;
+        width: 100%;
+    }
+
+    .map-container {
+        height: 400px;
+        min-height: 400px;
+    }
+}

static/js/traffic.js

@@ -0,0 +1,85 @@
+let map;
+let markers = [];
+
+function initMap(apiKey) {
+    // Coordonnées inversées pour TomTom (longitude, latitude)
+    const LILLE_CENTER = [50.6292, 3.0573];
+    
+    map = tt.map({
+        key: apiKey,
+        container: 'map',
+        center: LILLE_CENTER,
+        zoom: 12,
+        style: 'tomtom://vector/1/basic-main'
+    });
+
+    // Ajouter les contrôles de zoom
+    map.addControl(new tt.NavigationControl());
+
+    // Ajouter la couche de trafic
+    map.on('load', function() {
+        map.addTier({
+            source: 'vectorTiles',
+            serviceUrl: 'https://api.tomtom.com/traffic/map/4/tile/flow/absolute/{z}/{x}/{y}.pbf',
+            serviceKey: apiKey,
+            minZoom: 8,
+            maxZoom: 22,
+            style: 'tomtom://traffic-flow'
+        });
+
+        updateTrafficIncidents();
+    });
+}
+
+function clearMarkers() {
+    markers.forEach(marker => marker.remove());
+    markers = [];
+}
+
+function updateTrafficIncidents() {
+    fetch('/incidents')
+        .then(response => response.json())
+        .then(data => {
+            clearMarkers();
+            if (data.incidents) {
+                data.incidents.forEach(incident => {
+                    const coordinates = incident.geometry.coordinates;
+                    
+                    // Créer un marqueur pour chaque incident
+                    const marker = new tt.Marker()
+                        .setLngLat([coordinates[1], coordinates[0]])
+                        .addTo(map);
+                    
+                    markers.push(marker);
+
+                    // Créer le contenu du popup
+                    let popupContent = `
+                        <div class="incident-popup">
+                            <h3>Incident</h3>
+                            <p>${incident.properties.events[0].description}</p>
+                    `;
+
+                    if (incident.properties.delay) {
+                        popupContent += `<p>Délai: ${incident.properties.delay}</p>`;
+                    }
+
+                    if (incident.properties.startTime) {
+                        const startTime = new Date(incident.properties.startTime);
+                        popupContent += `<p>Début: ${startTime.toLocaleString()}</p>`;
+                    }
+
+                    popupContent += '</div>';
+
+                    // Ajouter le popup au marqueur
+                    const popup = new tt.Popup({offset: 30})
+                        .setHTML(popupContent);
+
+                    marker.setPopup(popup);
+                });
+            }
+        })
+        .catch(error => console.error('Erreur:', error));
+}
+
+// Mettre à jour les incidents toutes les 5 minutes
+setInterval(updateTrafficIncidents, 5 * 60 * 1000);

templates/lille_traffic.html

@@ -0,0 +1,360 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trafic à Lille</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <style>
+        /* Styles de base */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Open Sans', sans-serif;
+            line-height: 1.6;
+            background: #f5f5f5;
+        }
+
+        .page-header {
+            background-color: #004494;
+            color: white;
+            padding: 1rem;
+            text-align: center;
+        }
+
+        .page-header h1 {
+            margin: 0;
+            font-size: 1.5rem;
+            color: white;
+        }
+
+        .page-header .last-update {
+            color: #e0e0e0;
+            font-size: 0.9rem;
+            margin-top: 0.5rem;
+        }
+
+        .container {
+            display: grid;
+            grid-template-columns: 45% 55%;
+            gap: 1rem;
+            padding: 1rem;
+            height: calc(100vh - 60px);
+            margin: 0 50px;
+        }
+
+        .traffic-panel {
+            background: white;
+            border-radius: 8px;
+            padding: 1.5rem;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            overflow-y: auto;
+            height: 100%;
+        }
+
+        /* Styles pour les départs */
+        #departures-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .station-departures {
+            background: #f8f9fa;
+            border-radius: 8px;
+            padding: 1rem;
+        }
+
+        .station-departures h4 {
+            font-size: 1.2rem;
+            color: #1a1a1a;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 2px solid #007bff;
+        }
+
+        .departure-item {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            gap: 1rem;
+            padding: 0.8rem;
+            background: white;
+            border-radius: 6px;
+            margin-bottom: 0.5rem;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+        }
+
+        .departure-time {
+            font-size: 1.3rem;
+            font-weight: bold;
+            color: #1a1a1a;
+            grid-row: span 2;
+            display: flex;
+            align-items: center;
+        }
+
+        .departure-info {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .departure-direction {
+            font-size: 1.1rem;
+            color: #333;
+            font-weight: 500;
+        }
+
+        .departure-details {
+            display: flex;
+            gap: 1rem;
+            color: #666;
+            font-size: 0.9rem;
+        }
+
+        /* Map container */
+        .map-container {
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            height: 100%;
+        }
+
+        #leaflet-map {
+            width: 100%;
+            height: 100%;
+        }
+
+        /* Autres sections de trafic */
+        .transport-section {
+            margin-top: 2rem;
+        }
+
+        .transport-section h3 {
+            font-size: 1.1rem;
+            color: #333;
+            margin-bottom: 1rem;
+        }
+
+        @media (max-width: 1024px) {
+            .container {
+                grid-template-columns: 1fr;
+            }
+
+            #departures-container {
+                grid-template-columns: 1fr;
+            }
+
+            .map-container {
+                height: 400px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="page-header">
+        <h1>Trafic à Lille</h1>
+        <p class="last-update">Dernière mise à jour : <span id="pageLoadTime"></span></p>
+    </div>
+
+    <div class="container">
+        <div class="traffic-panel">
+            <div class="traffic-info">
+                <h2>Trafic en temps réel</h2>
+                <div class="last-update">
+                    Dernière mise à jour : <span id="update-time"></span>
+                </div>
+                
+                <!-- Section des départs -->
+                <div class="transport-section">
+                    <h3>Prochains départs des trains</h3>
+                    <h5>Source : API SNCF</h5>
+                    <div id="departures-container">
+                        <div class="station-departures" id="lille-europe">
+                            <h4>Lille Europe</h4>
+                            <div class="departures-list"></div>
+                        </div>
+                        <div class="station-departures" id="lille-flandres">
+                            <h4>Lille Flandres</h4>
+                            <div class="departures-list"></div>
+                        </div>
+                        
+                    </div>
+                </div>
+
+                <!-- Sections existantes -->
+                <div class="transport-section">
+
+                    <div id="metro-lines" class="line-list">
+                    </div>
+                </div>
+                
+                <h3>Lignes perturbées :</h3>
+                <h5>Source : MobiLille</h5>
+                {% for type_key, transport in transport_types.items() %}
+                <div class="transport-section">
+                    <h3>{{ transport.name }}</h3>
+                    {% if transport.lines %}
+                        <div class="line-list">
+                            {% for line in transport.lines %}
+                            <button class="line-button {{ type_key }}" 
+                                    data-line="{{ line.name }}"
+                                    title="{{ line.trace }}">
+                                {{ line.name }}
+                            </button>
+                            {% endfor %}
+                        </div>
+                    {% else %}
+                        <p class="no-disruption">Aucune perturbation</p>
+                    {% endif %}
+                </div>
+                {% endfor %}
+                
+            </div>
+
+            <div id="perturbation-details" class="perturbation-details">
+                <!-- Les détails des perturbations seront injectés ici -->
+            </div>
+        </div>
+
+        <div class="map-container">
+            <div id="leaflet-map"></div>
+        </div>
+    </div>
+
+    <script>
+        let map;
+        let trafficLayer;
+
+        function updateLastUpdateTime() {
+            const now = new Date();
+            document.getElementById('pageLoadTime').textContent = now.toLocaleString('fr-FR');
+        }
+
+        function initMap() {
+            if (map) {
+                map.remove();
+            }
+
+            map = L.map('leaflet-map').setView([{{ center.lat }}, {{ center.lon }}], 12);
+            
+            L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+                subdomains: 'abcd',
+                maxZoom: 19
+            }).addTo(map);
+
+            trafficLayer = L.tileLayer('https://api.tomtom.com/traffic/map/4/tile/flow/relative0/{z}/{x}/{y}.png?tileSize=256&key={{ api_key }}', {
+                minZoom: 10,
+                maxZoom: 18,
+                opacity: 0.75
+            }).addTo(map);
+
+            return map;
+        }
+
+        function showPerturbations(line) {
+            const detailsContainer = document.getElementById('perturbation-details');
+            
+            fetch(`/api/perturbations/${line}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.error) {
+                        console.error(data.error);
+                        return;
+                    }
+
+                    let html = `
+                        <div class="details-header">
+                            <h3>Ligne ${data.line}</h3>
+                            <p class="line-trace">${data.trace}</p>
+                        </div>
+                    `;
+                    
+                    if (data.alerts && data.alerts.length > 0) {
+                        data.alerts.forEach(alert => {
+                            html += `
+                                <div class="alert">
+                                    <div class="alert-title">${alert.title}</div>
+                                    <div class="alert-description">${alert.description}</div>
+                                    <div class="alert-time">Mise à jour : ${alert.update_time}</div>
+                                </div>
+                            `;
+                        });
+                    } else {
+                        html += '<p class="no-disruption">Aucune perturbation signalée pour cette ligne.</p>';
+                    }
+
+                    detailsContainer.innerHTML = html;
+                    detailsContainer.style.display = 'block';
+                })
+                .catch(error => {
+                    console.error('Erreur lors de la récupération des perturbations:', error);
+                });
+        }
+
+        // Fonction pour mettre à jour les départs
+        function updateDepartures() {
+            fetch('/api/departures')
+                .then(response => response.json())
+                .then(data => {
+                    // Mise à jour pour chaque gare
+                    for (const [station, departures] of Object.entries(data)) {
+                        const stationId = station.toLowerCase().replace(' ', '-');
+                        const container = document.querySelector(`#${stationId} .departures-list`);
+                        container.innerHTML = '';
+                        
+                        departures.slice(0, 5).forEach(departure => {
+                            const departureElement = document.createElement('div');
+                            departureElement.className = 'departure-item';
+                            departureElement.innerHTML = `
+                                <span class="departure-time">${departure.time}</span>
+                                <div class="departure-info">
+                                    <span class="departure-direction">${departure.direction}</span>
+                                    <div class="departure-details">
+                                        <span class="departure-type">${departure.type}</span>
+                                        <span class="departure-number">${departure.train_number}</span>
+                                    </div>
+                                </div>
+                            `;
+                            container.appendChild(departureElement);
+                        });
+                    }
+                })
+                .catch(error => console.error('Erreur:', error));
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            initMap();
+            updateLastUpdateTime();
+            setInterval(updateLastUpdateTime, 300000); // Mise à jour toutes les 5 minutes
+            
+            // Mettre à jour les départs toutes les 2 minutes
+            updateDepartures();
+            setInterval(updateDepartures, 120000);
+            
+            // Ajouter les écouteurs d'événements pour les boutons
+            document.querySelectorAll('.line-button').forEach(button => {
+                button.addEventListener('click', (e) => {
+                    // Retirer la classe active de tous les boutons
+                    document.querySelectorAll('.line-button').forEach(btn => {
+                        btn.classList.remove('active');
+                    });
+                    // Ajouter la classe active au bouton cliqué
+                    e.target.classList.add('active');
+                    showPerturbations(button.dataset.line);
+                });
+            });
+        });
+    </script>
+</body>
+</html>