maj

parcoursup/app.riot

@@ -1,16 +1,21 @@
 <app>
+  <div class="page">
     <h1>Mini projet Parcoursup</h1>
-  <p>Recherche de formations Parcoursup avec Riot</p>
+    <p class="subtitle">Recherche de formations Parcoursup avec Riot</p>
 
     <div if={ !state.selected }>
       <search-bar onsearch={ launchSearch }></search-bar>
 
+      <div class="layout">
         <result-list
           results={ state.results }
           hasSearched={ state.hasSearched }
           loading={ state.loading }
           ondetail={ showDetail }>
         </result-list>
+
+        <map-view results={ state.results }></map-view>
+      </div>
     </div>
 
     <div if={ state.selected }>
@@ -19,6 +24,7 @@
         onback={ backToList }>
       </detail-view>
     </div>
+  </div>
 
   <script>
     export default {

parcoursup/components/detail-view.riot

@@ -1,6 +1,5 @@
 <detail-view>
-  <div if={ props.formation }
+  <div if={ props.formation } class="detail-card">
-       style="border:1px solid #ccc; padding:10px; margin:10px;">
     <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

@@ -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.map = L.map(this.root.querySelector('#map')).setView([46.8, 2.5], 6)
-
-        this.carte           = L.map(divCarte).setView([46.8, 2.5], 6);
-        this.groupeMarqueurs = L.layerGroup().addTo(this.carte);
-        this.marqueursIndex  = {};
 
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
           attribution: '&copy; OpenStreetMap contributors'
-        }).addTo(this.carte);
+        }).addTo(this.map)
 
-        this.afficherMarqueurs();
+        this.markersLayer = L.layerGroup().addTo(this.map)
-
+        this.refreshMarkers()
-        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);
-        };
       },
 
       onUpdated() {
-        this.afficherMarqueurs();
+        this.refreshMarkers()
-
-        var composant = this;
-
-        if (this.carte) {
-          setTimeout(function() {
-            composant.carte.invalidateSize();
-          }, 100);
-
-          setTimeout(function() {
-            composant.carte.invalidateSize();
-          }, 300);
-        }
       },
 
-      onBeforeUnmount() {
+      refreshMarkers() {
-        if (this.carte) {
+        if (!this.map || !this.markersLayer) {
-          this.carte.remove();
+          return
-          this.carte = null;
-        }
-        window.mapFocus = null;
-      },
-
-      afficherMarqueurs() {
-        if (!this.carte || !this.groupeMarqueurs) {
-          return;
         }
 
-        this.groupeMarqueurs.clearLayers();
+        this.markersLayer.clearLayers()
-        this.marqueursIndex = {};
 
-        var coordonnees = [];
+        const points = []
-        var formations  = this.props.results || [];
 
-        for (var i = 0; i < formations.length; i++) {
+        for (let i = 0; i < this.props.results.length; i++) {
-          var f = formations[i];
+          const f = this.props.results[i]
 
-          if (f.latitude != null && f.longitude != null) {
+          if (f.latitude && f.longitude) {
-            var marqueur = L.marker([f.latitude, f.longitude]);
+            const marker = L.marker([f.latitude, f.longitude])
-            marqueur.bindPopup('<b>' + f.nom + '</b><br>' + f.ville);
+            marker.bindPopup(`<b>${f.nom}</b><br>${f.ville}`)
-            marqueur.addTo(this.groupeMarqueurs);
+            marker.addTo(this.markersLayer)
 
-            this.marqueursIndex[f.id] = marqueur;
+            points.push([f.latitude, f.longitude])
-            coordonnees.push([f.latitude, f.longitude]);
           }
         }
 
-        if (coordonnees.length > 0) {
+        if (points.length > 0) {
-          this.carte.fitBounds(coordonnees, { padding: [20, 20] });
+          this.map.fitBounds(points, { padding: [20, 20] })
         } else {
-          this.carte.setView([46.8, 2.5], 6);
+          this.map.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);
       }
     }
-
-    };
   </script>
-
 </map-view>

parcoursup/components/result-list.riot

@@ -1,14 +1,14 @@
 <result-list>
-  <div>
+  <div class="results">
-    <div if={ props.results.length === 0 && props.hasSearched && !props.loading }>
+    <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,5 +1,5 @@
 <search-bar>
-  <div>
+  <div class="search-bar">
     <input
       type="text"
       placeholder="Ex : BUT informatique"

parcoursup/index.html

@@ -1,19 +1,27 @@
 <!DOCTYPE html>
 <html lang="fr">
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Parcoursup Riot</title>
   
+    <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>
-</head>
+    <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/result-list.riot" type="riot"></script>
-  <script src="./components/detail-view.riot" type="riot"></script>
+<script src="./components/detail-view.riot" type="riot"></script>
-  <script src="./app.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'