passage du prototype en composant riot simple

2026-03-18 12:45:44 +01:00
parent 45fc1ff5c0
commit f9b19326f8
4 changed files with 160 additions and 50 deletions
@@ -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>
@@ -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>