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,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">×</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue