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>
+  <app></app>
 <p>Recherche de formations Parcoursup</p>
-<input id="search" type="text" placeholder="Ex : BUT informatique" />
+  <script src="./app.riot" type="riot"></script>
 <button id="btn-test">Rechercher</button>
-<div id="output">En attente...</div>
+  <script>
-
+    riot.compile().then(() => {
-
+      riot.mount('app')
-<script type="module" src="./main.js"></script>
+    })
  </script>
 </body>
 </html>