Initial deployment

Dockerfile

@@ -0,0 +1,20 @@
+# Utiliser une image Python officielle
+FROM python:3.9-slim
+
+# Définir le répertoire de travail
+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
+COPY . .
+
+# Exposer le port
+EXPOSE 7860
+
+# Commande pour démarrer l'application
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,124 @@
+# -*- coding: utf-8 -*-
+
+from flask import Flask, render_template, jsonify
+import requests
+import json
+import re 
+
+app = Flask(__name__)
+
+TOMTOM_API_KEY = "PVt4NaZSKKtziZi9DaqNAUzN4flNJnSo"
+API_KEY = "3WsgOWybmrTiEwa3q8ZsvovvwPkrctnX"
+BASE_URL_API = "https://prim.iledefrance-mobilites.fr/marketplace/v2/navitia/line_reports/physical_modes/physical_mode%3A"
+CATEGORIES = {
+    "Métro": "Metro",
+    "RER": "RapidTransit",
+    "Bus": "Bus",
+    "Transilien": "LocalTrain",
+    "Tram": "Tramway"
+}
+
+# Fonction pour récupérer les perturbations
+def fetch_disruptions(category, api_value):
+    url = f"{BASE_URL_API}{api_value}/line_reports?"
+    headers = {"accept": "application/json", "apiKey": API_KEY}
+
+    try:
+        response = requests.get(url, headers=headers, timeout=5)
+        response.raise_for_status()
+        data = response.json()
+        return data.get("disruptions", [])
+    except requests.exceptions.RequestException as e:
+        print(f"Erreur API pour {category}: {e}")
+        return []
+
+# Normaliser le nom des lignes
+def normalize_line_name(line_name):
+    line_name = line_name.lower()
+    line_name = re.sub(r"\b(ratp|sncf)\b", "", line_name)
+    line_name = re.sub(r"\s+", " ", line_name).strip()
+    return line_name.capitalize()
+
+# Générer le HTML des perturbations
+def generate_traffic_html():
+    all_disruptions = {}
+    for category, api_value in CATEGORIES.items():
+        disruptions = fetch_disruptions(category, api_value)
+        active_disruptions = [
+            {
+                "id": disruption.get("id"),
+                "cause": disruption.get("cause", "Inconnue"),
+                "severity": disruption.get("severity", {}).get("name", "N/A"),
+                "message": disruption["messages"][0]["text"] if disruption.get("messages") else "No message",
+                "impacted_lines": [
+                    obj.get("pt_object", {}).get("name", "Unknown Line")
+                    for obj in disruption.get("impacted_objects", [])
+                    if obj.get("pt_object", {}).get("embedded_type") == "line"
+                ]
+            }
+            for disruption in disruptions if disruption.get("status") == "active"
+        ]
+        all_disruptions[category] = active_disruptions
+
+    # Récapitulatif des lignes impactées
+    summary_data = []
+    seen_lines = set()
+
+    for category, disruptions in all_disruptions.items():
+        for d in disruptions:
+            for line in d["impacted_lines"]:
+                norm_line = normalize_line_name(line)
+                if norm_line not in seen_lines:
+                    summary_data.append({
+                        "category": category,
+                        "line": norm_line,
+                        "cause": d["cause"],
+                        "severity": d["severity"],
+                        "message": d["message"]
+                    })
+                    seen_lines.add(norm_line)
+
+    return summary_data
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+@app.route('/api/incidents', methods=['GET'])
+def get_incidents():
+    """
+    Récupère les incidents depuis l'API TomTom Traffic.
+    """
+    try:
+        # Zone géographique pour Paris
+        bounding_box = "1.79804455,48.52917947,2.88843762,49.24075760"
+        url = f"https://api.tomtom.com/traffic/services/5/incidentDetails?bbox={bounding_box}&fields=%7Bincidents%7Btype%2Cgeometry%7Btype%2Ccoordinates%7D%2Cproperties%7BiconCategory%7D%7D%7D&language=en-GB&categoryFilter=0%2C1%2C2%2C3%2C4%2C5%2C6%2C7%2C8%2C9%2C10%2C11%2C14&timeValidityFilter=present&key={TOMTOM_API_KEY}"
+        
+        response = requests.get(url)
+        response.raise_for_status()
+
+        data = response.json()
+        incidents = data.get("incidents", [])
+        return jsonify({"status": "success", "data": incidents}), 200
+
+    except requests.exceptions.RequestException as e:
+        return jsonify({"status": "error", "message": str(e)}), 500
+
+@app.route('/api/ratp_disruptions', methods=['GET'])
+def ratp_disruptions():
+    data = generate_traffic_html()
+    return jsonify({"status": "success", "data": data})
+
+@app.route('/api/traffic-disruptions', methods=['GET'])
+def get_traffic_disruptions():
+    """
+    Récupère les perturbations de trafic pour tous les modes de transport.
+    """
+    try:
+        summary_data = generate_traffic_html()
+        return jsonify({"status": "success", "data": summary_data}), 200
+    except Exception as e:
+        return jsonify({"status": "error", "message": str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,3 @@
+Flask==2.3.3
+requests==2.31.0
+gunicorn==21.2.0

static/js/traffic.js

@@ -0,0 +1,143 @@
+// Variables globales
+let disruptionsData = {};
+let currentFilter = 'all';
+
+// Fonction pour mettre à jour les lignes impactées
+function updateImpactedLines() {
+    fetch('/api/ratp_disruptions')
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === "success") {
+                disruptionsData = data.data;
+                
+                // Réinitialiser tous les conteneurs de lignes impactées
+                document.querySelectorAll('.impacted-lines').forEach(container => {
+                    container.innerHTML = '';
+                });
+
+                // Mettre à jour le tableau
+                updateDisruptionsTable(disruptionsData);
+
+                // Afficher les lignes impactées pour chaque catégorie
+                disruptionsData.forEach(item => {
+                    const container = document.querySelector(`.impacted-lines[data-category="${item.category}"]`);
+                    if (container) {
+                        const lineElement = document.createElement('span');
+                        lineElement.className = 'impacted-line';
+                        lineElement.textContent = item.line;
+                        
+                        // Ajouter l'événement de clic
+                        lineElement.addEventListener('click', () => {
+                            console.log('Clicked line:', item.line);
+                            highlightTableRow(item);
+                        });
+                        
+                        container.appendChild(lineElement);
+                    }
+                });
+
+                // Appliquer le filtre actuel
+                applyFilter(currentFilter);
+            }
+        })
+        .catch(error => console.error('Erreur lors de la récupération des perturbations:', error));
+}
+
+// Fonction pour mettre à jour le tableau des perturbations
+function updateDisruptionsTable(disruptions) {
+    const tableBody = document.querySelector(".incident-table tbody");
+    if (!tableBody) {
+        console.error('Table body not found');
+        return;
+    }
+    
+    tableBody.innerHTML = "";
+
+    disruptions.forEach(disruption => {
+        const row = document.createElement("tr");
+        row.setAttribute('data-line', disruption.line);
+        row.setAttribute('data-category', disruption.category);
+        
+        row.innerHTML = `
+            <td>${disruption.line}</td>
+            <td>${disruption.cause}</td>
+            <td>${disruption.severity}</td>
+            <td>${disruption.message}</td>
+        `;
+        
+        tableBody.appendChild(row);
+    });
+
+    // Réappliquer le filtre actuel
+    applyFilter(currentFilter);
+}
+
+// Fonction pour surligner une ligne dans le tableau
+function highlightTableRow(disruption) {
+    console.log('Highlighting row for:', disruption);
+    
+    // Retirer le surlignage précédent
+    document.querySelectorAll('tr.highlighted').forEach(row => {
+        row.classList.remove('highlighted');
+    });
+
+    // Appliquer le filtre correspondant à la catégorie
+    applyFilter(disruption.category);
+
+    // Trouver et surligner la nouvelle ligne
+    const row = document.querySelector(`tr[data-line="${disruption.line}"][data-category="${disruption.category}"]`);
+    if (row) {
+        console.log('Found row:', row);
+        row.classList.add('highlighted');
+        // Faire défiler jusqu'au tableau
+        row.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    } else {
+        console.error('Row not found for:', disruption);
+    }
+}
+
+// Fonction pour appliquer un filtre
+function applyFilter(category) {
+    currentFilter = category;
+    console.log('Applying filter:', category);
+
+    const rows = document.querySelectorAll('.incident-table tbody tr');
+    rows.forEach(row => {
+        const rowCategory = row.getAttribute('data-category');
+        if (category === 'all' || category === rowCategory) {
+            row.style.display = '';
+        } else {
+            row.style.display = 'none';
+            // Si la ligne est surlignée mais cachée, retirer le surlignage
+            if (row.classList.contains('highlighted')) {
+                row.classList.remove('highlighted');
+            }
+        }
+    });
+
+    // Mettre à jour l'état visuel des filtres
+    document.querySelectorAll('.filter li').forEach(li => {
+        if (li.getAttribute('data-category') === category) {
+            li.classList.add('active');
+        } else {
+            li.classList.remove('active');
+        }
+    });
+}
+
+// Initialisation au chargement de la page
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Page loaded, initializing...');
+    
+    // Initialiser les filtres
+    document.querySelectorAll('.filter li').forEach(li => {
+        li.addEventListener('click', function() {
+            const category = this.getAttribute('data-category');
+            applyFilter(category);
+        });
+    });
+
+    updateImpactedLines();
+    // Mettre à jour toutes les 60 secondes
+    setInterval(updateImpactedLines, 60000);
+});

static/styles.css

@@ -0,0 +1,315 @@
+/* Styles globaux */
+body {
+    background-color: #1e1e1e; /* Fond noir */
+    color: #333; /* Texte principal */
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+
+/* Conteneur principal */
+.container {
+    background-color: #dcdcdc;
+    margin: 20px auto; /* Réduit l'espace en haut et en bas */
+    padding: 20px;
+    max-width: 90%; /* Utiliser toute la largeur de l'écran */
+    border-radius: 8px;
+}
+
+/* Titre */
+header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+header h1 {
+    font-size: 28px;
+    color: black;
+}
+
+header .generated-time {
+    font-size: 14px;
+    color: gray;
+}
+
+/* Section principale */
+main {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin: 20px auto;
+}
+
+/* Conteneur pour Trafic + MAP */
+.traffic-map-container {
+    display: flex; /* Aligne Trafic + MAP horizontalement */
+    gap: 20px; /* Espacement entre les deux sections */
+    margin-bottom: 20px;
+}
+
+/* Section Gauche : Trafic */
+.traffic-info {
+    flex: 1; /* Prend 1 portion de l'espace */
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.traffic-info h2 {
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
+.traffic-items {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-top: 20px;
+}
+
+.icon-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+    padding: 10px;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+}
+
+.icon-img {
+    width: 32px; /* Ajuste la taille de l'icône */
+    height: 32px;
+}
+
+.transport-icon {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 120px;
+}
+
+/* Styles pour la carte */
+#map {
+    width: 100%;
+    height: 400px; /* Taille de la carte */
+    border-radius: 8px;
+}
+
+.map-section {
+    flex: 1;
+    padding: 0;
+}
+
+/* Section Filtres et Tableau */
+.filter-table {
+    display: flex;
+    gap: 20px;
+    background-color: #f0f0f0;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+/* Filtres */
+.filter {
+    flex: 1;
+    background-color: #dcdcdc;
+    padding: 10px 20px;
+    border-radius: 8px;
+}
+
+.filter h3 {
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
+.filter ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.filter li {
+    cursor: pointer;
+    padding: 5px 10px;
+    margin: 2px 0;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+.filter li:hover {
+    background-color: #f0f0f0;
+}
+
+.filter li.active {
+    background-color: #007bff;
+    color: white;
+}
+
+/* Tableau des incidents */
+.incident-table {
+    flex: 3;
+    background-color: white;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th, td {
+    border: 1px solid #ccc;
+    padding: 10px;
+    text-align: left;
+}
+
+th {
+    background-color: #e0e0e0;
+    font-weight: bold;
+}
+
+/* Style pour la ligne sélectionnée dans le tableau */
+tr.highlighted {
+    background-color: #fff3cd !important;
+    transition: background-color 0.3s ease;
+}
+
+tr.highlighted td {
+    animation: highlight-pulse 2s infinite;
+}
+
+@keyframes highlight-pulse {
+    0% { background-color: #fff3cd; }
+    50% { background-color: #ffe69c; }
+    100% { background-color: #fff3cd; }
+}
+
+/* Styles for impacted lines display */
+.impacted-lines {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    align-items: center;
+    margin-top: 5px;
+    font-size: 0.9em;
+    min-height: 20px;
+}
+
+.impacted-line {
+    display: inline-block;
+    padding: 2px 6px;
+    border-radius: 4px;
+    background-color: #ff4444;
+    color: white;
+    font-weight: bold;
+    font-size: 0.9em;
+    cursor: help;
+    position: relative;
+}
+
+.impacted-line[data-tooltip] {
+    position: relative;
+}
+
+.impacted-line[data-tooltip]::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 8px 12px;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    border-radius: 4px;
+    font-size: 14px;
+    white-space: nowrap;
+    z-index: 1000;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+    margin-bottom: 5px;
+    max-width: 300px;
+    white-space: normal;
+    text-align: center;
+}
+
+.impacted-line[data-tooltip]:hover::after {
+    visibility: visible;
+    opacity: 1;
+}
+
+.impacted-line[data-tooltip]::before {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: rgba(0, 0, 0, 0.8);
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+    margin-bottom: -6px;
+}
+
+.impacted-line[data-tooltip]:hover::before {
+    visibility: visible;
+    opacity: 1;
+}
+
+.impacted-line:hover {
+    background-color: #ff6666;
+}
+
+/* Styles pour la modale */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 8px;
+    position: relative;
+}
+
+.close-modal {
+    position: absolute;
+    right: 20px;
+    top: 10px;
+    color: #aaa;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close-modal:hover {
+    color: #555;
+}
+
+.modal h3 {
+    margin-top: 0;
+    color: #333;
+    margin-bottom: 20px;
+}
+
+.modal-line-info,
+.modal-cause,
+.modal-message,
+.modal-severity {
+    margin-bottom: 15px;
+    line-height: 1.4;
+}

templates/index.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Carte des Incidents à Paris</title>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+</head>
+<body>
+    <div class="container">
+        <!-- Titre -->
+        <header>
+            <h1>Carte des Incidents à Paris</h1>
+            <p class="generated-time">Cette page a été générée à : <span id="pageLoadTime"></span></p>
+        </header>
+
+        <!-- Contenu principal -->
+        <main>
+            <!-- Section avec Trafic + MAP alignés horizontalement -->
+            <section class="traffic-map-container">
+                <!-- Section Gauche : Trafic -->
+                <section class="traffic-info">
+                    <h2>Un oeil sur le trafic</h2>
+                    <div class="traffic-items">
+                        <div class="icon-item">
+                            <div class="transport-icon">
+                                <img src="{{ url_for('static', filename='icons/RER.svg') }}" alt="RER" class="icon-img"> RER
+                            </div>
+                            <div class="impacted-lines" data-category="RER"></div>
+                        </div>
+                        <div class="icon-item">
+                            <div class="transport-icon">
+                                <img src="{{ url_for('static', filename='icons/Metro.png') }}" alt="Métro" class="icon-img"> Métro
+                            </div>
+                            <div class="impacted-lines" data-category="Métro"></div>
+                        </div>
+                        <div class="icon-item">
+                            <div class="transport-icon">
+                                <img src="{{ url_for('static', filename='icons/Bus.svg') }}" alt="Bus" class="icon-img"> Bus
+                            </div>
+                            <div class="impacted-lines" data-category="Bus"></div>
+                        </div>
+                        <div class="icon-item">
+                            <div class="transport-icon">
+                                <img src="{{ url_for('static', filename='icons/Transilien.png') }}" alt="Transilien" class="icon-img"> Transilien
+                            </div>
+                            <div class="impacted-lines" data-category="Transilien"></div>
+                        </div>
+                        <div class="icon-item">
+                            <div class="transport-icon">
+                                <img src="{{ url_for('static', filename='icons/Tram.png') }}" alt="Tramway" class="icon-img"> Tramway
+                            </div>
+                            <div class="impacted-lines" data-category="Tram"></div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Section Droite : Carte -->
+                <section class="map-section">
+                    <div id="map"></div>
+                </section>
+            </section>
+
+            <!-- Section Filtres et Tableau -->
+            <section class="filter-table">
+                <div class="filter">
+                    <h3>Filtre</h3>
+                    <ul>
+                        <li data-category="all">Tous</li>
+                        <li data-category="RER">RER</li>
+                        <li data-category="Métro">Métro</li>
+                        <li data-category="Bus">Bus</li>
+                        <li data-category="Transilien">Transilien</li>
+                        <li data-category="Tram">Tramway</li>
+                    </ul>
+                </div>
+
+                <div class="incident-table">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Ligne</th>
+                                <th>Cause</th>
+                                <th>Gravité</th>
+                                <th>Message</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <!-- Les perturbations sont insérées ici dynamiquement -->
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- JavaScript -->
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script src="{{ url_for('static', filename='js/traffic.js') }}"></script>
+    <script>
+        // Initialiser la carte
+        const map = L.map('map').setView([48.8566, 2.3522], 12);
+
+        // Ajouter une couche de tuiles
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© Contributeurs OpenStreetMap'
+        }).addTo(map);
+
+        // Récupérer les incidents depuis l'API TomTom
+        fetch('/api/incidents')
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === "success") {
+                    const incidents = data.data;
+
+                    incidents.forEach(incident => {
+                        const coordinates = incident.geometry.coordinates;
+                        const type = incident.geometry.type;
+
+                        if (type === "Point") {
+                            const [lon, lat] = coordinates;
+                            const iconCategory = incident.properties.iconCategory;
+
+                            const customIcon = L.icon({
+                                iconUrl: `/static/icons/${iconCategory}.svg`,
+                                iconSize: [72, 72]
+                            });
+
+                            const categoryDescriptions = {
+                                1: "Accident",
+                                6: "Embouteillage",
+                                9: "Travaux routiers",
+                                14: "Véhicule en panne"
+                            };
+
+                            const description = categoryDescriptions[iconCategory] || "Incident inconnu";
+
+                            L.marker([lat, lon], { icon: customIcon })
+                                .addTo(map)
+                                .bindPopup(`<b>Incident</b><br>${description}`);
+                        }
+                    });
+                }
+            });
+
+        // Mettre à jour l'heure de génération
+        document.getElementById('pageLoadTime').textContent = new Date().toLocaleString();
+    </script>
+</body>
+</html>

templates/index_new.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Carte des Incidents à Paris</title>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+</head>
+<body>
+    <div class="container">
+        <!-- Titre -->
+        <header>
+            <h1>Carte des Incidents à Paris</h1>
+            <p class="generated-time">Cette page a été générée à : <span id="pageLoadTime"></span></p>
+        </header>
+
+        <!-- Contenu principal -->
+        <main>
+            <!-- Section avec Trafic + MAP alignés horizontalement -->
+            <section class="traffic-map-container">
+                <!-- Section Gauche : Trafic -->
+                <section class="traffic-info">
+                    <h2>Un oeil sur le trafic</h2>
+                    <div class="traffic-items">
+                        <div class="icon-item">
+                            <div class="transport-icon">
+                                <img src="{{ url_for('static', filename='icons/RER.svg') }}" alt="RER" class="icon-img"> RER
+                            </div>
+                            <div class="impacted-lines" data-category="RER"></div>
+                        </div>
+                        <div class="icon-item">
+                            <div class="transport-icon">
+                                <img src="{{ url_for('static', filename='icons/Metro.png') }}" alt="Métro" class="icon-img"> Métro
+                            </div>
+                            <div class="impacted-lines" data-category="Métro"></div>
+                        </div>
+                        <div class="icon-item">
+                            <div class="transport-icon">
+                                <img src="{{ url_for('static', filename='icons/Bus.svg') }}" alt="Bus" class="icon-img"> Bus
+                            </div>
+                            <div class="impacted-lines" data-category="Bus"></div>
+                        </div>
+                        <div class="icon-item">
+                            <div class="transport-icon">
+                                <img src="{{ url_for('static', filename='icons/Transilien.png') }}" alt="Transilien" class="icon-img"> Transilien
+                            </div>
+                            <div class="impacted-lines" data-category="Transilien"></div>
+                        </div>
+                        <div class="icon-item">
+                            <div class="transport-icon">
+                                <img src="{{ url_for('static', filename='icons/Tram.png') }}" alt="Tramway" class="icon-img"> Tramway
+                            </div>
+                            <div class="impacted-lines" data-category="Tram"></div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Section Droite : Carte -->
+                <section class="map-section">
+                    <div id="map"></div>
+                </section>
+            </section>
+
+            <!-- Section Filtres et Tableau -->
+            <section class="filter-table">
+                <div class="filter">
+                    <h3>Filtre</h3>
+                    <ul>
+                        <li data-category="all">Tous</li>
+                        <li data-category="RER">RER</li>
+                        <li data-category="Métro">Métro</li>
+                        <li data-category="Bus">Bus</li>
+                        <li data-category="Transilien">Transilien</li>
+                        <li data-category="Tramway">Tramway</li>
+                    </ul>
+                </div>
+
+                <div class="incident-table">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Ligne</th>
+                                <th>Cause</th>
+                                <th>Gravité</th>
+                                <th>Message</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <!-- Les perturbations sont insérées ici dynamiquement -->
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Modal pour les détails des perturbations -->
+    <div id="disruptionModal" class="modal">
+        <div class="modal-content">
+            <span class="close-modal">&times;</span>
+            <h3>Détails de la perturbation</h3>
+            <div class="modal-line-info">
+                <strong>Ligne: </strong><span id="modalLine"></span>
+            </div>
+            <div class="modal-cause">
+                <strong>Cause: </strong><span id="modalCause"></span>
+            </div>
+            <div class="modal-message">
+                <strong>Message: </strong><span id="modalMessage"></span>
+            </div>
+            <div class="modal-severity">
+                <strong>Gravité: </strong><span id="modalSeverity"></span>
+            </div>
+        </div>
+    </div>
+
+    <!-- JavaScript -->
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script src="{{ url_for('static', filename='js/traffic.js') }}"></script>
+    <script>
+        // Initialiser la carte
+        const map = L.map('map').setView([48.8566, 2.3522], 12);
+
+        // Ajouter une couche de tuiles
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© Contributeurs OpenStreetMap'
+        }).addTo(map);
+
+        // Récupérer les incidents depuis l'API TomTom
+        fetch('/api/incidents')
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === "success") {
+                    const incidents = data.data;
+
+                    incidents.forEach(incident => {
+                        const coordinates = incident.geometry.coordinates;
+                        const type = incident.geometry.type;
+
+                        if (type === "Point") {
+                            const [lon, lat] = coordinates;
+                            const iconCategory = incident.properties.iconCategory;
+
+                            const customIcon = L.icon({
+                                iconUrl: `/static/icons/${iconCategory}.svg`,
+                                iconSize: [72, 72]
+                            });
+
+                            const categoryDescriptions = {
+                                1: "Accident",
+                                6: "Embouteillage",
+                                9: "Travaux routiers",
+                                14: "Véhicule en panne"
+                            };
+
+                            const description = categoryDescriptions[iconCategory] || "Incident inconnu";
+
+                            L.marker([lat, lon], { icon: customIcon })
+                                .addTo(map)
+                                .bindPopup(`<b>Incident</b><br>${description}`);
+                        }
+                    });
+                }
+            });
+
+        // Mettre à jour l'heure de génération
+        document.getElementById('pageLoadTime').textContent = new Date().toLocaleString();
+    </script>
+</body>
+</html>