rognant/R4.01
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

thomas

Browse Source
This commit is contained in:
Thomas ROGNANT
2025-08-28 14:34:18 +02:00
commit 5ff4c53a10
29 changed files with 1705 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
TP3/EX3/communes.html Normal file
View File

@@ -0,0 +1,177 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Communes de France</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
.container { max-width: 800px; }
.is-loading::after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
border: 2px solid #ccc;
border-top-color: #333;
border-radius: 50%;
animation: spin 1s infinite linear;
margin-left: 10px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container mt-4">
<h1 class="title has-text-centered">Rechercher des communes</h1>
<div class="field">
<label class="label">Région</label>
<div class="control">
<div class="select is-fullwidth">
<select id="regionSelect"></select>
</div>
</div>
</div>
<div class="field">
<label class="label">Département</label>
<div class="control">
<div class="select is-fullwidth">
<select id="departementSelect" disabled></select>
</div>
</div>
</div>
<div class="field">
<label class="label">Rechercher une commune</label>
<div class="control">
<input class="input" type="text" id="searchInput" placeholder="Nom de la commune..." disabled>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button id="sortBtn" class="button is-info" disabled>Trier</button>
</div>
</div>
<div id="communesList" class="box mt-4"></div>
</div>
<script>
const regionSelect = document.getElementById('regionSelect');
const departementSelect = document.getElementById('departementSelect');
const searchInput = document.getElementById('searchInput');
const sortBtn = document.getElementById('sortBtn');
const communesList = document.getElementById('communesList');
let allCommunes = [];
let sortOrder = 'asc';
const fetchRegions = async () => {
const url = 'https://geo.api.gouv.fr/regions';
try {
const response = await fetch(url);
const regions = await response.json();
regionSelect.innerHTML = '<option value="">-- Sélectionnez une région --</option>';
regions.forEach(region => {
regionSelect.innerHTML += `<option value="${region.code}">${region.nom}</option>`;
});
} catch (error) {
console.error('Erreur de chargement des régions:', error);
}
};
const fetchDepartements = async (regionCode) => {
departementSelect.disabled = true;
departementSelect.classList.add('is-loading');
const url = `https://geo.api.gouv.fr/regions/${regionCode}/departements`;
try {
const response = await fetch(url);
const departements = await response.json();
departementSelect.innerHTML = '<option value="">-- Sélectionnez un département --</option>';
departements.forEach(dep => {
departementSelect.innerHTML += `<option value="${dep.code}">${dep.nom} (${dep.code})</option>`;
});
} catch (error) {
console.error('Erreur de chargement des départements:', error);
} finally {
departementSelect.disabled = false;
departementSelect.classList.remove('is-loading');
}
};
const fetchCommunes = async (departementCode) => {
searchInput.disabled = true;
sortBtn.disabled = true;
communesList.innerHTML = '<p class="has-text-centered is-loading">Chargement des communes...</p>';
const url = `https://geo.api.gouv.fr/departements/${departementCode}/communes`;
try {
const response = await fetch(url);
allCommunes = await response.json();
renderCommunes(allCommunes);
} catch (error) {
console.error('Erreur de chargement des communes:', error);
communesList.innerHTML = '<p class="has-text-danger has-text-centered">Erreur de chargement des communes.</p>';
} finally {
searchInput.disabled = false;
sortBtn.disabled = false;
}
};
const renderCommunes = (communes) => {
communesList.innerHTML = '';
if (communes.length === 0) {
communesList.innerHTML = '<p class="has-text-centered">Aucune commune trouvée.</p>';
return;
}
const ul = document.createElement('ul');
communes.forEach(commune => {
const li = document.createElement('li');
li.textContent = `${commune.nom} (Code postal: ${commune.codesPostaux[0]})`;
ul.appendChild(li);
});
communesList.appendChild(ul);
};
regionSelect.addEventListener('change', (e) => {
if (e.target.value) {
fetchDepartements(e.target.value);
} else {
departementSelect.innerHTML = '<option value="">-- Sélectionnez un département --</option>';
departementSelect.disabled = true;
searchInput.disabled = true;
sortBtn.disabled = true;
communesList.innerHTML = '';
}
});
departementSelect.addEventListener('change', (e) => {
if (e.target.value) {
fetchCommunes(e.target.value);
} else {
searchInput.disabled = true;
sortBtn.disabled = true;
communesList.innerHTML = '';
}
});
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
const filteredCommunes = allCommunes.filter(c => c.nom.toLowerCase().includes(searchTerm));
renderCommunes(filteredCommunes);
});
sortBtn.addEventListener('click', () => {
sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
allCommunes.sort((a, b) => {
const nameA = a.nom.toLowerCase();
const nameB = b.nom.toLowerCase();
if (nameA < nameB) return sortOrder === 'asc' ? -1 : 1;
if (nameA > nameB) return sortOrder === 'asc' ? 1 : -1;
return 0;
});
renderCommunes(allCommunes);
});
fetchRegions();
</script>
</body>
</html>