add toast for fetch fail
This commit is contained in:
Tykayn
tykayn
parent
2e3c2cd25d
commit
c3dc3bdbb5
1 changed files with 114 additions and 6 deletions
|
|
@ -124,13 +124,85 @@ class DemoMainResource:
|
||||||
h2 { margin-top: 0; }
|
h2 { margin-top: 0; }
|
||||||
ul { padding-left: 20px; }
|
ul { padding-left: 20px; }
|
||||||
a { color: #0078ff; text-decoration: none; }
|
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; }
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
|
||||||
|
<!-- Toast d'erreur pour les échecs de fetch -->
|
||||||
|
<div id="error-toast" class="error-toast">
|
||||||
|
<span class="error-toast-close">×</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 -->
|
<!-- Hidden OAuth2 configuration for the JavaScript module -->
|
||||||
<input type="hidden" id="osmClientId" value="{client_id}">
|
<input type="hidden" id="osmClientId" value="{client_id}">
|
||||||
<input type="hidden" id="osmClientSecret" value="{client_secret}">
|
<input type="hidden" id="osmClientSecret" value="{client_secret}">
|
||||||
|
|
@ -140,6 +212,7 @@ class DemoMainResource:
|
||||||
<h2>
|
<h2>
|
||||||
<img src="/static/oedb.png" class="logo" />
|
<img src="/static/oedb.png" class="logo" />
|
||||||
OpenEventDatabase Demo</h2>
|
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/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>
|
<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=music" >Search Music Events</a></li>
|
||||||
<li><a href="/event?what=sport" >Search Sport Events</a></li>
|
<li><a href="/event?what=sport" >Search Sport Events</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<p style="text-align: center; margin-top: 10px;">
|
<p class="sources" 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;">
|
<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
|
<i class="fas fa-code-branch"></i> sources
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Fonction pour gérer les listes dépliantes
|
// Fonction pour gérer les listes dépliantes
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
|
||||||
|
fetchEvents();
|
||||||
|
|
||||||
const endpointsHeader = document.getElementById('endpoints_list_header');
|
const endpointsHeader = document.getElementById('endpoints_list_header');
|
||||||
const endpointsList = document.getElementById('endpoints_list');
|
const endpointsList = document.getElementById('endpoints_list');
|
||||||
const demoPagesHeader = document.getElementById('demo_pages_list_header');
|
const demoPagesHeader = document.getElementById('demo_pages_list_header');
|
||||||
|
|
@ -342,8 +417,8 @@ class DemoMainResource:
|
||||||
|
|
||||||
// Function to fetch events from the API
|
// Function to fetch events from the API
|
||||||
function fetchEvents() {
|
function fetchEvents() {
|
||||||
// Fetch events from the API - using the external API endpoint
|
// Fetch events from the API - using the local API endpoint
|
||||||
fetch('https://api.openeventdatabase.org/event?')
|
fetch('/event?')
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
if (data.features && data.features.length > 0) {
|
if (data.features && data.features.length > 0) {
|
||||||
|
|
@ -358,6 +433,8 @@ class DemoMainResource:
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.error('Error fetching events:', 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
|
// Update user info when the page loads
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
updateUserInfoDisplay();
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue