passage du prototype en composant riot simple

parcoursup/api.js

@@ -1,21 +1,21 @@
 export function buildURL(query) {
-    let url =
-      "https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records?limit=10"
+  let url =
+    "https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records?limit=10"
 
-    if (query && query.trim() !== "") {
-      url += "&where=search(lib_for_voe_ins, '" + query + "')"
-    }
-  
-    return url
+  if (query && query.trim() !== "") {
+    url += "&where=search(lib_for_voe_ins, '" + query + "')"
   }
 
-  export async function fetchFormations(query) {
-    const url = buildURL(query)
-    const response = await fetch(url)
+  return url
+}
 
-    if (!response.ok) {
-      throw new Error("Erreur HTTP")
-    }
+export async function fetchFormations(query) {
+  const url = buildURL(query)
+  const response = await fetch(url)
 
-    return await response.json()
+  if (!response.ok) {
+    throw new Error("Erreur HTTP")
   }
+
+  return await response.json()
+}

parcoursup/app.riot

@@ -0,0 +1,105 @@
+<app>
+  <h1>Mini projet Parcoursup</h1>
+  <p>Recherche de formations Parcoursup avec Riot</p>
+
+  <div if={ !state.selected }>
+    <input
+      type="text"
+      placeholder="Ex : BUT informatique"
+      oninput={ updateQuery }
+      value={ state.query }
+    />
+    <button onclick={ search }>Rechercher</button>
+
+    <p if={ state.loading }>Chargement...</p>
+    <p if={ !state.loading && state.results.length === 0 && state.hasSearched }>
+      Aucun résultat trouvé
+    </p>
+
+    <div each={ f, i in state.results } key={ f.id }
+         style="border:1px solid #ccc; padding:10px; margin:10px;">
+      <h3>{ f.nom }</h3>
+      <p><b>Établissement :</b> { f.etablissement }</p>
+      <p><b>Ville :</b> { f.ville } ({ f.departement })</p>
+      <p><b>Filière :</b> { f.filiere }</p>
+      <p><b>Taux d'accès :</b> { f.tauxAcces }%</p>
+      <button onclick={ () => showDetail(i) }>Voir détail</button>
+    </div>
+  </div>
+
+  <div if={ state.selected }>
+    <h2>{ state.selected.nom }</h2>
+    <p><b>Établissement :</b> { state.selected.etablissement }</p>
+    <p><b>Ville :</b> { state.selected.ville }</p>
+    <p><b>Département :</b> { state.selected.departement }</p>
+    <p><b>Filière :</b> { state.selected.filiere }</p>
+    <p><b>Sélectivité :</b> { state.selected.selectivite }</p>
+    <p><b>Capacité :</b> { state.selected.capacite }</p>
+    <p><b>Candidats :</b> { state.selected.candidats }</p>
+    <p><b>Admis :</b> { state.selected.admis }</p>
+    <p><b>Taux d'accès :</b> { state.selected.tauxAcces }%</p>
+
+    <button onclick={ backToList }>Retour</button>
+  </div>
+
+  <script>
+    import { fetchFormations } from './api.js'
+    import { createFormation } from './formation.js'
+
+    export default {
+      state: {
+        query: '',
+        loading: false,
+        hasSearched: false,
+        results: [],
+        selected: null
+      },
+
+      updateQuery(e) {
+        this.update({ query: e.target.value })
+      },
+
+      async search() {
+        this.update({
+          loading: true,
+          hasSearched: true,
+          selected: null
+        })
+
+        try {
+          const data = await fetchFormations(this.state.query)
+          const formations = []
+
+          if (data.results) {
+            for (let i = 0; i < data.results.length; i++) {
+              formations.push(createFormation(data.results[i]))
+            }
+          }
+
+          this.update({
+            results: formations,
+            loading: false
+          })
+        } catch (error) {
+          console.error(error)
+          this.update({
+            results: [],
+            loading: false
+          })
+        }
+      },
+
+      showDetail(index) {
+        this.update({
+          selected: this.state.results[index]
+        })
+      },
+
+      backToList() {
+        this.update({
+          selected: null
+        })
+      }
+    }
+  </script>
+</app>

parcoursup/formation.js

@@ -1,23 +1,23 @@
 export function createFormation(raw) {
-    let taux = 0
+  let taux = 0
 
-    if (raw.voe_tot && raw.voe_tot > 0) {
-      taux = Math.round((raw.acc_tot / raw.voe_tot) * 100)
-    }
-  
-    return {
-      id: raw.cod_uai + "-" + raw.lib_for_voe_ins,
-      nom: raw.lib_for_voe_ins,
-      etablissement: raw.g_ea_lib_vx,
-      ville: raw.ville_etab,
-      departement: raw.dep,
-      filiere: raw.fili,
-      selectivite: raw.select_form,
-      capacite: raw.capa_fin,
-      candidats: raw.voe_tot,
-      admis: raw.acc_tot,
-      tauxAcces: taux,
-      latitude: raw.g_olocalisation_des_formations ? raw.g_olocalisation_des_formations.lat : null,
-      longitude: raw.g_olocalisation_des_formations ? raw.g_olocalisation_des_formations.lon : null
-    }
+  if (raw.voe_tot && raw.voe_tot > 0) {
+    taux = Math.round((raw.acc_tot / raw.voe_tot) * 100)
   }
+
+  return {
+    id: raw.cod_uai + "-" + raw.lib_for_voe_ins,
+    nom: raw.lib_for_voe_ins,
+    etablissement: raw.g_ea_lib_vx,
+    ville: raw.ville_etab,
+    departement: raw.dep,
+    filiere: raw.fili,
+    selectivite: raw.select_form,
+    capacite: raw.capa_fin,
+    candidats: raw.voe_tot,
+    admis: raw.acc_tot,
+    tauxAcces: taux,
+    latitude: raw.g_olocalisation_des_formations ? raw.g_olocalisation_des_formations.lat : null,
+    longitude: raw.g_olocalisation_des_formations ? raw.g_olocalisation_des_formations.lon : null
+  }
+}

parcoursup/index.html

@@ -3,18 +3,23 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Parcoursup - test API</title>
+  <title>Parcoursup Riot</title>
+
+  <script src="https://cdn.jsdelivr.net/npm/riot@9/riot+compiler.min.js"></script>
+  <script type="module">
+    import "./api.js"
+    import "./formation.js"
+  </script>
 </head>
 <body>
-<h1>Mini projet Parcoursup</h1>
-<p>Recherche de formations Parcoursup</p>
+  <app></app>
 
-<input id="search" type="text" placeholder="Ex : BUT informatique" />
-<button id="btn-test">Rechercher</button>
+  <script src="./app.riot" type="riot"></script>
 
-<div id="output">En attente...</div>
-
-
-<script type="module" src="./main.js"></script>
+  <script>
+    riot.compile().then(() => {
+      riot.mount('app')
+    })
+  </script>
 </body>
 </html>