From c3dc3bdbb5864850c7e6d806f5b1835026a54d28 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 23 Sep 2025 12:01:30 +0200
Subject: [PATCH] add toast for fetch fail

---
 oedb/resources/demo/demo_main.py | 120 +++++++++++++++++++++++++++++--
 1 file changed, 114 insertions(+), 6 deletions(-)
diff --git a/oedb/resources/demo/demo_main.py b/oedb/resources/demo/demo_main.py
index 49182af..1a971dc 100644
--- a/oedb/resources/demo/demo_main.py
+++ b/oedb/resources/demo/demo_main.py
@@ -124,12 +124,84 @@ class DemoMainResource:
                     h2 { margin-top: 0; }
                     ul { padding-left: 20px; }
                     a { color: #0078ff; text-decoration: none; }
-                    a:hover { text-decoration: underline; }
+                    a svg{
+                    margin-right: 1ch ;
+                    }
+                    a:hover { text-decoration: underline; color: white; }
                     .event-popup { max-width: 300px; }
+
+                    /* Style pour le toast d'erreur */
+                    .error-toast {
+                        position: fixed;
+                        top: 20px;
+                        right: 20px;
+                        background-color: #f44336;
+                        color: white;
+                        padding: 15px;
+                        border-radius: 5px;
+                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+                        z-index: 1000;
+                        max-width: 350px;
+                        opacity: 0;
+                        visibility: hidden;
+                        transition: opacity 0.3s, visibility 0.3s;
+                    }
+                    .error-toast.show {
+                        opacity: 1;
+                        visibility: visible;
+                    }
+                    .error-toast a {
+                        color: #fff;
+                        text-decoration: underline;
+                        font-weight: bold;
+                    }
+                    .error-toast-close {
+                        position: absolute;
+                        right: 10px;
+                        top: 10px;
+                        cursor: pointer;
+                        font-weight: bold;
+                    }
+
+                    /* Style pour le bouton de feedback */
+                    .feedback-button {
+                        position: fixed;
+                          left: 10px;
+                        bottom: 20px;
+                        background-color: #0078ff;
+                        color: white;
+                        padding: 10px 15px;
+                        border-radius: 5px;
+                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+                        z-index: 900;
+                        text-decoration: none;
+                        font-weight: bold;
+                        display: flex;
+                        align-items: center;
+                    }
+                    .feedback-button i {
+                        margin-right: 8px;
+                    }
+                    .feedback-button:hover {
+                        background-color: #0056b3;
+                        text-decoration: none;
+                    }
                 </style>
             </head>
             <body>
                 <div id="map"></div>
+
+                <!-- Toast d'erreur pour les échecs de fetch -->
+                <div id="error-toast" class="error-toast">
+                    <span class="error-toast-close">&times;</span>
+                    <p id="error-message">Une erreur s'est produite lors du chargement des événements.</p>
+                    <p>Consultez le <a href="https://forum.openstreetmap.fr/t/openeventdatabase-reboot/37649" target="_blank">forum OSM</a> pour plus d'informations.</p>
+                </div>
+
+                <!-- Bouton de feedback fixe -->
+                <a href="https://forum.openstreetmap.fr/t/openeventdatabase-reboot/37649" class="feedback-button" target="_blank">
+                    <i class="fas fa-comments"></i> Feedback sur le forum OSM
+                </a>
                 
                 <!-- Hidden OAuth2 configuration for the JavaScript module -->
                 <input type="hidden" id="osmClientId" value="{client_id}">
@@ -140,6 +212,7 @@ class DemoMainResource:
                     <h2>
                     <img src="/static/oedb.png" class="logo" />
                     OpenEventDatabase Demo</h2>
+                    <p>This map shows current events from the OpenEventDatabase.</p>
                     <p><a href="/demo/traffic" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Traffic event</a></p>
                                         <p><a href="/demo/add" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Any Event</a></p>
 
@@ -192,17 +265,19 @@ class DemoMainResource:
                         <li><a href="/event?what=music" >Search Music Events</a></li>
                         <li><a href="/event?what=sport" >Search Sport Events</a></li>
                     </ul>
-                    <p style="text-align: center; margin-top: 10px;">
-                        <a class="sources" href="https://source.cipherbliss.com/tykayn/oedb-backend"  title="View Source Code on Cipherbliss" style="font-size: 24px;">
+                    <p class="sources" style="text-align: center; margin-top: 10px;">
+                        <a  href="https://source.cipherbliss.com/tykayn/oedb-backend"  title="View Source Code on Cipherbliss" style="font-size: 24px;">
                             <i class="fas fa-code-branch"></i> sources
                         </a>
                     </p>
                 </div>
-
                 
                 <script>
                     // Fonction pour gérer les listes dépliantes
                     document.addEventListener('DOMContentLoaded', function() {
+                    
+                    fetchEvents();
+                    
                         const endpointsHeader = document.getElementById('endpoints_list_header');
                         const endpointsList = document.getElementById('endpoints_list');
                         const demoPagesHeader = document.getElementById('demo_pages_list_header');
@@ -342,8 +417,8 @@ class DemoMainResource:
                     
                     // Function to fetch events from the API
                     function fetchEvents() {
-                        // Fetch events from the API - using the external API endpoint
-                        fetch('https://api.openeventdatabase.org/event?')
+                        // Fetch events from the API - using the local API endpoint
+                        fetch('/event?')
                             .then(response => response.json())
                             .then(data => {
                                 if (data.features && data.features.length > 0) {
@@ -358,6 +433,8 @@ class DemoMainResource:
                             })
                             .catch(error => {
                                 console.error('Error fetching events:', error);
+                                // Afficher le toast d'erreur
+                                showErrorToast(`Erreur de chargement des événements: ${error.message}`);
                             });
                     }
                     
@@ -761,7 +838,38 @@ class DemoMainResource:
                     // Update user info when the page loads
                     document.addEventListener('DOMContentLoaded', function() {
                         updateUserInfoDisplay();
+
+                        // Initialisation des gestionnaires d'événements pour le toast d'erreur
+                        initErrorToast();
                     });
+
+                    // Fonction pour initialiser le toast d'erreur
+                    function initErrorToast() {
+                        const errorToast = document.getElementById('error-toast');
+                        const closeButton = errorToast.querySelector('.error-toast-close');
+
+                        // Fermer le toast au clic sur le bouton de fermeture
+                        closeButton.addEventListener('click', function() {
+                            errorToast.classList.remove('show');
+                        });
+                    }
+
+                    // Fonction pour afficher le toast d'erreur
+                    function showErrorToast(message) {
+                        const errorToast = document.getElementById('error-toast');
+                        const messageElement = document.getElementById('error-message');
+
+                        // Définir le message d'erreur
+                        messageElement.textContent = message;
+
+                        // Afficher le toast
+                        errorToast.classList.add('show');
+
+                        // Faire disparaître le toast après 6 secondes
+                        setTimeout(function() {
+                            errorToast.classList.remove('show');
+                        }, 6000);
+                    }
                 </script>
             </body>
             </html>
