public-html2/parcoursup/app.riot

<app>
  <header class="site-header">
    <div class="header-inner">
      <div class="logo">
        <span class="logo-icon">🎓</span>
        <span class="logo-text">Parcoursup <span class="logo-light">Explorer</span></span>
      </div>
      <div class="header-badge badge-clickable" if={ state.selectedFormations.length > 0 } onclick={ scrollToComparateur }>
        { state.selectedFormations.length } sélection(s)
      </div>
    </div>
  </header>

  <div class="page">

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

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

        <p>Choisis ton profil pour estimer tes chances d'intégration.</p>

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

          <div>
            <label><b>Série :</b></label><br />
            <select 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>
            <label><b>Trier par :</b></label><br />
            <select onchange={ updateSort }>
              <option value="nom" selected={ state.sortBy === 'nom' }>Nom</option>
              <option value="ville" selected={ state.sortBy === 'ville' }>Ville</option>
              <option value="taux" selected={ state.sortBy === 'taux' }>Taux d'accès</option>
              <option value="estimation" selected={ state.sortBy === 'estimation' }>Estimation</option>
            </select>
          </div>
        </div>

        <button class="btn btn-danger" onclick={ clearSelection }>Vider la sélection</button>

        <hr />

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

        <div each={ f in getSortedSelection() } key={ f.id } class={ getCardClass(f) }>
          <h4>{ f.nom }</h4>

          <p><b>Établissement :</b> { f.etablissement }</p>
          <p><b>Ville :</b> { f.ville }</p>
          <p><b>Filière :</b> { f.filiere }</p>
          <p><b>Capacité :</b> { f.capacite }</p>
          <p><b>Taux d'accès :</b> { f.tauxAcces }%</p>

          <p>
            <b>Intégrés :</b>
            Général { f.pctGeneral }% /
            Techno { f.pctTechno }% /
            Pro { f.pctPro }%
          </p>

          <p class="estimation-result">
            <span class={ getEstimateClass(f) }>
              { estimateFormation(f) }
            </span>
            <span class="estimation-detail">{ getEstimateDetail(f) }</span>
          </p>

          <button class="btn btn-small btn-outline" onclick={ () => removeFromSelection(f.id) }>
            Retirer
          </button>
        </div>
      </div>

      <p class="result-count" if={ state.hasSearched && !state.loading }>
        <b>{ state.query }</b> — { state.total } résultat(s)
      </p>

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

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

          <div class="pagination" if={ state.total > state.limit }>
            <button class="btn btn-outline" onclick={ previousPage } disabled={ state.page === 1 }>
              ← Précédent
            </button>

            <span class="page-info">Page { state.page } / { getTotalPages() }</span>

            <button class="btn btn-outline" onclick={ nextPage } disabled={ state.page === getTotalPages() }>
              Suivant →
            </button>
          </div>
        </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',
        sortBy: 'nom',
        query: '',
        filters: {},
        page: 1,
        limit: 20,
        total: 0
      },

      onMounted() {
        const saved = localStorage.getItem('selectionFormations')

        if (saved) {
          try {
            this.update({
              selectedFormations: JSON.parse(saved)
            })
          } catch (e) {
            console.error(e)
          }
        }

        window.addEventListener('hashchange', () => {
          this.handleRoute()
        })

        this.handleRoute()
      },

      // ===== ROUTER =====
      handleRoute() {
        const hash = window.location.hash || '#/'
        const path = hash.slice(1) || '/'

        if (path.startsWith('/formation/')) {
          const id = decodeURIComponent(path.replace('/formation/', ''))
          this.loadFormationById(id)
        } else {
          if (this.state.selected) {
            this.update({ selected: null })
          }
        }
      },

      async loadFormationById(id) {
        for (let i = 0; i < this.state.results.length; i++) {
          if (this.state.results[i].id === id) {
            this.update({ selected: this.state.results[i] })
            return
          }
        }

        for (let i = 0; i < this.state.selectedFormations.length; i++) {
          if (this.state.selectedFormations[i].id === id) {
            this.update({ selected: this.state.selectedFormations[i] })
            return
          }
        }

        try {
          const parts = id.split('-')
          const searchTerm = parts.slice(1).join(' ').substring(0, 30)

          if (searchTerm) {
            const data = await window.fetchFormations(searchTerm, 10, 0)

            if (data.results && data.results.length > 0) {
              for (let i = 0; i < data.results.length; i++) {
                const f = window.createFormation(data.results[i])
                if (f.id === id) {
                  this.update({ selected: f })
                  return
                }
              }
              this.update({ selected: window.createFormation(data.results[0]) })
            }
          }
        } catch (error) {
          console.error('Erreur chargement formation:', error)
        }
      },

      // ===== NAVIGATION =====
      showDetail(index) {
        const formation = this.state.results[index]
        this.update({ selected: formation })
        window.location.hash = '#/formation/' + encodeURIComponent(formation.id)
      },

      backToList() {
        this.update({ selected: null })
        window.location.hash = '#/'
      },

      scrollToComparateur() {
        var el = this.$('[ref="comparateur"]')
        if (el) {
          el.scrollIntoView({ behavior: 'smooth', block: 'start' })
        }
      },

      // ===== RECHERCHE AVEC FILTRES =====
      async launchSearch(query, filters) {
        this.update({
          loading: true,
          hasSearched: true,
          selected: null,
          query: query,
          filters: filters || {},
          page: 1
        })

        window.location.hash = '#/'
        await this.loadPage(1)
      },

      async loadPage(page) {
        this.update({ loading: true })

        try {
          const offset = (page - 1) * this.state.limit

          const data = await window.fetchFormations(
            this.state.query,
            this.state.limit,
            offset,
            this.state.filters
          )

          const formations = []

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

          this.update({
            results: formations,
            total: data.total_count ? data.total_count : 0,
            page: page,
            loading: false
          })
        } catch (error) {
          console.error(error)
          this.update({
            results: [],
            total: 0,
            loading: false
          })
        }
      },

      getTotalPages() {
        return Math.ceil(this.state.total / this.state.limit)
      },

      async nextPage() {
        if (this.state.page < this.getTotalPages()) {
          await this.loadPage(this.state.page + 1)
        }
      },

      async previousPage() {
        if (this.state.page > 1) {
          await this.loadPage(this.state.page - 1)
        }
      },

      // ===== SÉLECTION =====
      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 })
          localStorage.setItem('selectionFormations', JSON.stringify(selection))
        }
      },

      removeFromSelection(id) {
        const newSelection = []

        for (let i = 0; i < this.state.selectedFormations.length; i++) {
          const f = this.state.selectedFormations[i]

          if (f.id !== id) {
            newSelection.push(f)
          }
        }

        this.update({ selectedFormations: newSelection })
        localStorage.setItem('selectionFormations', JSON.stringify(newSelection))
      },

      clearSelection() {
        this.update({ selectedFormations: [] })
        localStorage.setItem('selectionFormations', JSON.stringify([]))
      },

      // ===== COMPARATEUR =====
      updateNote(e) { this.update({ note: Number(e.target.value) }) },
      updateSerie(e) { this.update({ serie: e.target.value }) },
      updateSort(e) { this.update({ sortBy: e.target.value }) },

      getSortedSelection() {
        const selection = [...this.state.selectedFormations]

        if (this.state.sortBy === 'taux') {
          selection.sort((a, b) => b.tauxAcces - a.tauxAcces)
        } else if (this.state.sortBy === 'ville') {
          selection.sort((a, b) => a.ville.localeCompare(b.ville))
        } else if (this.state.sortBy === 'estimation') {
          selection.sort((a, b) => this.getScore(b) - this.getScore(a))
        } else {
          selection.sort((a, b) => a.nom.localeCompare(b.nom))
        }

        return selection
      },

      // ===== ESTIMATION =====
      getSeriePercent(f) {
        if (this.state.serie === 'general') return f.pctGeneral || 0
        if (this.state.serie === 'techno') return f.pctTechno || 0
        if (this.state.serie === 'pro') return f.pctPro || 0
        return 0
      },

      getScore(f) {
        let score = 0
        const note = this.state.note
        const tauxAcces = f.tauxAcces || 0
        const seriePct = this.getSeriePercent(f)

        if (tauxAcces >= 80) score += 30
        else if (tauxAcces >= 50) score += 24
        else if (tauxAcces >= 30) score += 16
        else if (tauxAcces >= 15) score += 8
        else score += 2

        if (note >= 17) score += 40
        else if (note >= 15) score += 32
        else if (note >= 13) score += 22
        else if (note >= 11) score += 14
        else if (note >= 9) score += 6
        else score += 0

        if (seriePct >= 60) score += 30
        else if (seriePct >= 40) score += 24
        else if (seriePct >= 20) score += 16
        else if (seriePct >= 5) score += 8
        else score += 0

        return score
      },

      estimateFormation(f) {
        const score = this.getScore(f)

        if (score >= 85) return 'Très favorable'
        if (score >= 65) return 'Favorable'
        if (score >= 45) return 'Possible'
        if (score >= 25) return 'Difficile'
        return 'Très difficile'
      },

      getEstimateClass(f) {
        const result = this.estimateFormation(f)

        if (result === 'Très favorable') return 'estimate tres-favorable'
        if (result === 'Favorable') return 'estimate favorable'
        if (result === 'Possible') return 'estimate possible'
        if (result === 'Difficile') return 'estimate difficile'
        return 'estimate tres-difficile'
      },

      getCardClass(f) {
        const result = this.estimateFormation(f)

        if (result === 'Très favorable') return 'card card-tres-favorable'
        if (result === 'Favorable') return 'card card-favorable'
        if (result === 'Possible') return 'card card-possible'
        if (result === 'Difficile') return 'card card-difficile'
        return 'card card-tres-difficile'
      },

      getEstimateDetail(f) {
        const tauxAcces = f.tauxAcces || 0
        const seriePct = this.getSeriePercent(f)
        const serieName = this.state.serie === 'general' ? 'Gén' : (this.state.serie === 'techno' ? 'Techno' : 'Pro')

        return 'Taux ' + tauxAcces + '% · ' + serieName + ' ' + seriePct + '% · Note ' + this.state.note + '/20'
      }
    }
  </script>
</app>