public-html2/parcoursup/app.riot

<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>