public-html2/parcoursup/app.riot

<app>
  <div class="page">
    <h1>Mini projet Parcoursup</h1>
    <p class="subtitle">Recherche de formations Parcoursup avec Riot</p>

    <p><b>{ state.selectedFormations.length }</b> formation(s) sélectionnée(s)</p>

    <div if={ !state.selected }>
      <search-bar onsearch={ launchSearch }></search-bar>

      <div class="layout">
        <result-list
          results={ state.results }
          hasSearched={ state.hasSearched }
          loading={ state.loading }
          ondetail={ showDetail }
          onselect={ addToSelection }>
        </result-list>

        <map-view results={ state.results }></map-view>
      </div>

      <div class="detail-card" if={ state.selectedFormations.length > 0 }>
        <h3>Comparateur</h3>

        <p>Choisis ton profil pour comparer les formations sélectionnées.</p>

        <div class="compare-controls">
          <div>
            <label for="note"><b>Note moyenne :</b></label><br />
            <input
              id="note"
              type="number"
              min="0"
              max="20"
              step="0.1"
              value={ state.note }
              oninput={ updateNote }
            />
          </div>

          <div>
            <label for="serie"><b>Série :</b></label><br />
            <select id="serie" onchange={ updateSerie }>
              <option value="general" selected={ state.serie === 'general' }>Général</option>
              <option value="techno" selected={ state.serie === 'techno' }>Technologique</option>
              <option value="pro" selected={ state.serie === 'pro' }>Professionnel</option>
            </select>
          </div>
        </div>

        <hr />

        <h3>Formations sélectionnées</h3>

        <div each={ f in state.selectedFormations } key={ f.id } class="card">
          <h4>{ f.nom }</h4>
          <p><b>Ville :</b> { f.ville }</p>
          <p><b>Filière :</b> { f.filiere }</p>
          <p><b>Taux d'accès :</b> { f.tauxAcces }%</p>
          <p>
            <b>Profil admis :</b>
            Général { f.pctGeneral }% / Techno { f.pctTechno }% / Pro { f.pctPro }%
          </p>
          <p><b>Estimation :</b> { estimateFormation(f) }</p>
        </div>
      </div>
    </div>

    <div if={ state.selected }>
      <detail-view
        formation={ state.selected }
        onback={ backToList }>
      </detail-view>
    </div>
  </div>

  <script>
    export default {
      state: {
        loading: false,
        hasSearched: false,
        results: [],
        selected: null,
        selectedFormations: [],
        note: 12,
        serie: 'general'
      },

      async launchSearch(query) {
        this.update({
          loading: true,
          hasSearched: true,
          selected: null
        })

        try {
          const data = await window.fetchFormations(query)
          const formations = []

          if (data.results) {
            for (let i = 0; i < data.results.length; i++) {
              const raw = data.results[i]
              const formation = window.createFormation(raw)
              formations.push(formation)
            }
          }

          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]
        })
      },

      addToSelection(index) {
        const formation = this.state.results[index]
        const selection = [...this.state.selectedFormations]

        let exists = false

        for (let i = 0; i < selection.length; i++) {
          if (selection[i].id === formation.id) {
            exists = true
          }
        }

        if (!exists) {
          selection.push(formation)
          this.update({ selectedFormations: selection })
        }
      },

      backToList() {
        this.update({
          selected: null
        })
      },

      updateNote(event) {
        this.update({
          note: Number(event.target.value)
        })
      },

      updateSerie(event) {
        this.update({
          serie: event.target.value
        })
      },

      estimateFormation(formation) {
        let score = 0

        if (formation.tauxAcces >= 50) {
          score += 2
        } else if (formation.tauxAcces >= 20) {
          score += 1
        }

        if (this.state.note >= 15) {
          score += 2
        } else if (this.state.note >= 12) {
          score += 1
        }

        if (this.state.serie === 'general' && formation.pctGeneral >= 50) {
          score += 2
        }

        if (this.state.serie === 'techno' && formation.pctTechno >= 20) {
          score += 2
        }

        if (this.state.serie === 'pro' && formation.pctPro >= 15) {
          score += 2
        }

        if (score >= 5) {
          return 'Favorable'
        }

        if (score >= 3) {
          return 'Possible'
        }

        return 'Difficile'
      }
    }
  </script>
</app>