yolou/public-html2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

maj

Browse Source
This commit is contained in:
sehl
2026-03-31 17:58:49 +02:00
parent 18aaa9c066
commit 4b4a47abfc
7 changed files with 166 additions and 1025 deletions
Download Patch File Download Diff File Expand all files Collapse all files
parcoursup/app.riot
+22 -16
View File
@@ -1,23 +1,29 @@
<app>
<h1>Mini projet Parcoursup</h1>
<p>Recherche de formations Parcoursup avec Riot</p>
<div class="page">
<h1>Mini projet Parcoursup</h1>
<p class="subtitle">Recherche de formations Parcoursup avec Riot</p>
<div if={ !state.selected }>
<search-bar onsearch={ launchSearch }></search-bar>
<div if={ !state.selected }>
<search-bar onsearch={ launchSearch }></search-bar>
<result-list
results={ state.results }
hasSearched={ state.hasSearched }
loading={ state.loading }
ondetail={ showDetail }>
</result-list>
</div>
<div class="layout">
<result-list
results={ state.results }
hasSearched={ state.hasSearched }
loading={ state.loading }
ondetail={ showDetail }>
</result-list>
<div if={ state.selected }>
<detail-view
formation={ state.selected }
onback={ backToList }>
</detail-view>
<map-view results={ state.results }></map-view>
</div>
</div>
<div if={ state.selected }>
<detail-view
formation={ state.selected }
onback={ backToList }>
</detail-view>
</div>
</div>
<script>
parcoursup/components/detail-view.riot
+1 -3
View File
@@ -1,6 +1,5 @@
<detail-view>
<div if={ props.formation }
style="border:1px solid #ccc; padding:10px; margin:10px;">
<div if={ props.formation } class="detail-card">
<h2>{ props.formation.nom }</h2>
<p><b>Établissement :</b> { props.formation.etablissement }</p>
<p><b>Ville :</b> { props.formation.ville }</p>
@@ -11,7 +10,6 @@
<p><b>Candidats :</b> { props.formation.candidats }</p>
<p><b>Admis :</b> { props.formation.admis }</p>
<p><b>Taux d'accès :</b> { props.formation.tauxAcces }%</p>
<button onclick={ () => props.onback() }>Retour</button>
</div>
</detail-view>
parcoursup/components/map-view.riot
+22 -89
View File
@@ -1,120 +1,53 @@
<map-view>
<div class="map-box">
<h3>Carte des formations</h3>
<div class="map" ref="carte"></div>
<div id="map"></div>
</div>
<script>
export default {
onMounted() {
var divCarte = this.$('div[ref="carte"]');
this.carte = L.map(divCarte).setView([46.8, 2.5], 6);
this.groupeMarqueurs = L.layerGroup().addTo(this.carte);
this.marqueursIndex = {};
this.map = L.map(this.root.querySelector('#map')).setView([46.8, 2.5], 6)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors'
}).addTo(this.carte);
}).addTo(this.map)
this.afficherMarqueurs();
var composant = this;
setTimeout(function() {
if (composant.carte) {
composant.carte.invalidateSize();
}
}, 200);
setTimeout(function() {
if (composant.carte) {
composant.carte.invalidateSize();
}
}, 500);
window.mapFocus = function(id) {
composant.centrerSurFormation(id);
};
this.markersLayer = L.layerGroup().addTo(this.map)
this.refreshMarkers()
},
onUpdated() {
this.afficherMarqueurs();
var composant = this;
if (this.carte) {
setTimeout(function() {
composant.carte.invalidateSize();
}, 100);
setTimeout(function() {
composant.carte.invalidateSize();
}, 300);
}
this.refreshMarkers()
},
onBeforeUnmount() {
if (this.carte) {
this.carte.remove();
this.carte = null;
}
window.mapFocus = null;
},
afficherMarqueurs() {
if (!this.carte || !this.groupeMarqueurs) {
return;
refreshMarkers() {
if (!this.map || !this.markersLayer) {
return
}
this.groupeMarqueurs.clearLayers();
this.marqueursIndex = {};
this.markersLayer.clearLayers()
var coordonnees = [];
var formations = this.props.results || [];
const points = []
for (var i = 0; i < formations.length; i++) {
var f = formations[i];
for (let i = 0; i < this.props.results.length; i++) {
const f = this.props.results[i]
if (f.latitude != null && f.longitude != null) {
var marqueur = L.marker([f.latitude, f.longitude]);
marqueur.bindPopup('<b>' + f.nom + '</b><br>' + f.ville);
marqueur.addTo(this.groupeMarqueurs);
if (f.latitude && f.longitude) {
const marker = L.marker([f.latitude, f.longitude])
marker.bindPopup(`<b>${f.nom}</b><br>${f.ville}`)
marker.addTo(this.markersLayer)
this.marqueursIndex[f.id] = marqueur;
coordonnees.push([f.latitude, f.longitude]);
points.push([f.latitude, f.longitude])
}
}
if (coordonnees.length > 0) {
this.carte.fitBounds(coordonnees, { padding: [20, 20] });
if (points.length > 0) {
this.map.fitBounds(points, { padding: [20, 20] })
} else {
this.carte.setView([46.8, 2.5], 6);
}
},
centrerSurFormation(id) {
var marqueur = this.marqueursIndex[id];
if (marqueur && this.carte) {
var divCarte = this.$('div[ref="carte"]');
if (divCarte) {
divCarte.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
var composant = this;
setTimeout(function() {
composant.carte.invalidateSize();
composant.carte.setView(marqueur.getLatLng(), 13, { animate: true });
marqueur.openPopup();
}, 400);
this.map.setView([46.8, 2.5], 6)
}
}
};
}
</script>
</map-view>
parcoursup/components/result-list.riot
+4 -4
View File
@@ -1,14 +1,14 @@
<result-list>
<div>
<div if={ props.results.length === 0 && props.hasSearched && !props.loading }>
<div class="results">
<div class="message" if={ props.results.length === 0 && props.hasSearched && !props.loading }>
Aucun résultat trouvé
</div>
<div if={ props.loading }>
<div class="message" if={ props.loading }>
Chargement...
</div>
<div each={ (f, i) in props.results } key={ f.id } style="border:1px solid #ccc; padding:10px; margin:10px;">
<div each={ (f, i) in props.results } key={ f.id } class="card">
<h3>{ f.nom }</h3>
<p><b>Établissement :</b> { f.etablissement }</p>
<p><b>Ville :</b> { f.ville } ({ f.departement })</p>
parcoursup/components/search-bar.riot
+1 -1
View File
@@ -1,5 +1,5 @@
<search-bar>
<div>
<div class="search-bar">
<input
type="text"
placeholder="Ex : BUT informatique"
parcoursup/index.html
+17 -9
View File
@@ -1,19 +1,27 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parcoursup Riot</title>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parcoursup Riot</title>
<script src="https://cdn.jsdelivr.net/npm/riot@9/riot+compiler.min.js"></script>
</head>
<link rel="stylesheet" href="./style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
/>
<script src="https://cdn.jsdelivr.net/npm/riot@9/riot+compiler.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>
<app></app>
<script src="./components/search-bar.riot" type="riot"></script>
<script src="./components/result-list.riot" type="riot"></script>
<script src="./components/detail-view.riot" type="riot"></script>
<script src="./app.riot" type="riot"></script>
<script src="./components/result-list.riot" type="riot"></script>
<script src="./components/detail-view.riot" type="riot"></script>
<script src="./components/map-view.riot" type="riot"></script>
<script src="./app.riot" type="riot"></script>
<script type="module">
import { fetchFormations } from './api.js'
parcoursup/style.css
+61 -865
View File
File diff suppressed because it is too large Load Diff