carte commencée mais quelle galere npm install leaflet!

2026-03-27 15:03:17 +01:00
parent 8c8e6a613a
commit 4cb0b46b40
4 changed files with 79 additions and 31 deletions
@@ -6,11 +6,7 @@
  <title>Parcoursup but coded by an idiot</title>
 </head>
 <body>
-  <h1>Explorateur de formations</h1>
-  <input type="text" id="requete" placeholder="Ex: informatique, médecine...">
-  <button id="entrerRequete">Lancer la recherche</button>
-  <div id="affichageResultats"></div>
-
+  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
 </body>
 </html>
@@ -0,0 +1,41 @@
+<app>
+  <h1>Explorateur de formations</h1>
+
+  <input 
+    type="text" 
+    placeholder="Ex: informatique, médecine..."
+    onkeyup={ saisie }>
+
+  <button onclick={ rechercher }>Lancer la recherche</button>
+
+  <div if={ chargement }>Chargement...</div>
+
+  <div each={ formation in formations }>
+    <ligne-resultat formation={ formation }></ligne-resultat>
+  </div>
+
+  <script>
+    import { recupereFormations } from '../api/parcoursup.js'
+    import LigneResultat from './ligne-resultat.riot'
+
+    export default {
+      components: { LigneResultat },
+
+      state: {
+        formations: [],
+        chargement: false,
+        motCle: ''
+      },
+
+      saisie(keyWd) {
+        this.motCle = keyWd.target.value
+      },
+
+      async rechercher() {
+        this.update({ chargement: true })
+        const formations = await recupereFormations(this.motCle)
+        this.update({ formations, chargement: false })
+      }
+    }
+  </script>
+</app>
@@ -0,0 +1,34 @@
+<carte-formations>
+  <div id="carte" style="height: 500px; width: 100%;"></div>
+
+  <script>
+    import L from 'leaflet'
+
+    export default {
+      onMounted() {
+        this.carte = L.map('carte').setView([46.603354, 1.888334], 6)
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          attribution: '© OpenStreetMap'
+        }).addTo(this.carte)
+      },
+
+      ajouterMarqueurs(formations) {
+        formations.forEach(f => {
+          const lat = f.g_olocalisation_des_formations?.lat
+          const lon = f.g_olocalisation_des_formations?.lon
+
+          if (lat && lon) {
+            L.marker([lat, lon])
+              .addTo(this.carte)
+              .bindPopup(`
+                <b>${f.fil_lib_voe_acc}</b><br>
+                ${f.g_ea_lib_vx}<br>
+                ${f.ville_etab}
+              `)
+          }
+        })
+      }
+    }
+  </script>
+</carte-formations>
@@ -1,27 +1,4 @@
-import * as riot from 'riot'
-import LigneResultat from './components/ligne-resultat.riot'
-import { recupereFormations } from './api/parcoursup.js'
+import { component } from 'riot'
+import App from './components/app.riot'

-
-riot.register('ligne-resultat', LigneResultat)
-
-const bouton = document.getElementById("entrerRequete")
-const champRecherche = document.getElementById("requete")
-const divResultats = document.getElementById("affichageResultats")
-
-bouton.addEventListener("click", async () => {
-  const motCle = champRecherche.value
-  divResultats.innerHTML = "Chargement..."
-
-  const formations = await recupereFormations(motCle)
-
-  divResultats.innerHTML = ""
-
-  formations.forEach(f => {
-    const listeFormations = riot.mount(
-      document.createElement('ligne-resultat'),
-      { formation: f }
-    )
-    divResultats.appendChild(listeFormations[0].root)
-  })
-})
+component(App)(document.getElementById('app'))