120 lines
4 KiB
Twig
120 lines
4 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}Magasins inutilisés - Aix-en-Provence{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="container mt-4">
|
|
<h1><i class="bi bi-shop fs-2"></i> Magasins inutilisés <small class="text-muted">- Aix-en-Provence</small></h1>
|
|
|
|
<div class="alert alert-info">
|
|
Chargement des données en cours...
|
|
</div>
|
|
|
|
<div id="stores-container" class="mt-4" style="display: none;">
|
|
<h2>Liste des magasins inutilisés</h2>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Type</th>
|
|
<th>Adresse</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="stores-list">
|
|
<!-- Les données seront chargées ici par JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="error-container" class="alert alert-danger mt-4" style="display: none;">
|
|
<strong>Erreur:</strong> <span id="error-message">Une erreur est survenue lors du chargement des données.</span>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
{{ parent() }}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const jsonUrl = {{ json_url|json_encode|raw }};
|
|
const storesContainer = document.getElementById('stores-container');
|
|
const storesList = document.getElementById('stores-list');
|
|
const errorContainer = document.getElementById('error-container');
|
|
const loadingAlert = document.querySelector('.alert-info');
|
|
|
|
// Fonction pour charger les données JSON via XHR
|
|
function loadStoresData() {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('GET', jsonUrl, true);
|
|
|
|
xhr.onload = function() {
|
|
loadingAlert.style.display = 'none';
|
|
|
|
if (xhr.status === 200) {
|
|
try {
|
|
const data = JSON.parse(xhr.responseText);
|
|
displayStores(data);
|
|
} catch (e) {
|
|
console.error('Erreur de parsing JSON:', e);
|
|
showError('Le format des données reçues est invalide.');
|
|
}
|
|
} else {
|
|
showError('Impossible de charger les données (Statut: ' + xhr.status + ')');
|
|
}
|
|
};
|
|
|
|
xhr.onerror = function() {
|
|
loadingAlert.style.display = 'none';
|
|
showError('Une erreur réseau est survenue.');
|
|
};
|
|
|
|
xhr.send();
|
|
}
|
|
|
|
// Fonction pour afficher les magasins dans le tableau
|
|
function displayStores(data) {
|
|
if (!data || !data.unused_stores || data.unused_stores.length === 0) {
|
|
showError('Aucun magasin inutilisé trouvé dans les données.');
|
|
return;
|
|
}
|
|
|
|
// Vider le tableau existant
|
|
storesList.innerHTML = '';
|
|
|
|
// Ajouter chaque magasin au tableau
|
|
data.unused_stores.forEach(function(store) {
|
|
const row = document.createElement('tr');
|
|
|
|
const nameCell = document.createElement('td');
|
|
nameCell.textContent = store.name || 'Non spécifié';
|
|
|
|
const typeCell = document.createElement('td');
|
|
typeCell.textContent = store.type || 'Non spécifié';
|
|
|
|
const addressCell = document.createElement('td');
|
|
addressCell.textContent = store.address || 'Non spécifié';
|
|
|
|
row.appendChild(nameCell);
|
|
row.appendChild(typeCell);
|
|
row.appendChild(addressCell);
|
|
|
|
storesList.appendChild(row);
|
|
});
|
|
|
|
// Afficher le conteneur des magasins
|
|
storesContainer.style.display = 'block';
|
|
}
|
|
|
|
// Fonction pour afficher une erreur
|
|
function showError(message) {
|
|
document.getElementById('error-message').textContent = message;
|
|
errorContainer.style.display = 'block';
|
|
}
|
|
|
|
// Charger les données au chargement de la page
|
|
loadStoresData();
|
|
});
|
|
</script>
|
|
{% endblock %}
|