public-html2/parcoursup/app.riot

<app>
  <header class="site-header">
    <div class="header-inner">
      <a class="logo" href="#/">
        <span class="logo-icon"></span>
        <span class="logo-text">Parcoursup <span class="logo-light">Explorer</span></span>
      </a>
      <div class="header-right">
        <a href="#/comparateur" class="header-badge badge-clickable" if={ state.selectedFormations.length > 0 }>
          { state.selectedFormations.length } sélection(s)
        </a>
        <auth-panel user={ state.user } onauth={ surConnexion } onlogout={ surDeconnexion }></auth-panel>
      </div>
    </div>
  </header>

  <div class="page">

    <!-- ============== VUE RECHERCHE ============== -->
    <div if={ state.view === 'search' }>
      <search-bar onsearch={ lancerRecherche }></search-bar>

      <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={ afficherDetail }
            onselect={ ajouterSelection }>
          </result-list>

          <div class="pagination" if={ state.total > state.limit }>
            <button class="btn btn-outline" onclick={ pagePrecedente } disabled={ state.page === 1 }>
              ← Précédent
            </button>
            <span class="page-info">Page { state.page } / { nombreTotalPages() }</span>
            <button class="btn btn-outline" onclick={ pageSuivante } disabled={ state.page === nombreTotalPages() }>
              Suivant →
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- ============== VUE DÉTAIL ============== -->
    <div if={ state.view === 'detail' && state.selected }>
      <detail-view
        formation={ state.selected }
        onback={ retourRecherche }>
      </detail-view>
    </div>

    <div if={ state.view === 'detail' && !state.selected } class="message">
      Chargement de la formation...
    </div>

    <!-- ============== VUE COMPARATEUR ============== -->
    <div if={ state.view === 'comparateur' }>

      <button class="btn btn-outline" onclick={ retourRecherche } style="margin-bottom: 16px;">← Retour à la recherche</button>

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

        <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={ mettreAJourNote }
            />
          </div>

          <div>
            <label><b>Série :</b></label><br />
            <select onchange={ mettreAJourSerie }>
              <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={ mettreAJourTri }>
              <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={ viderSelection }>Vider la sélection</button>

        <hr />

        <div each={ f in obtenirSelectionTriee() } key={ f.id } class={ classeCarte(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={ classeEstimation(f) }>
              { estimerFormation(f) }
            </span>
            <span class="estimation-detail">{ detailEstimation(f) }</span>
          </p>

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

      <div class="message" if={ state.selectedFormations.length === 0 }>
        <h3>Aucune formation sélectionnée</h3>
        <p>Retourne à la <a href="#/">recherche</a> et clique sur "Ajouter à la sélection" pour comparer des formations.</p>
      </div>
    </div>

  </div>

  <script>
    export default {
      state: {
        view: 'search',
        loading: false,
        hasSearched: false,
        results: [],
        selected: null,
        selectedFormations: [],
        note: 12,
        serie: 'general',
        sortBy: 'nom',
        query: '',
        filters: {},
        page: 1,
        limit: 20,
        total: 0,
        user: null
      },

      onMounted() {
        var saved = localStorage.getItem('selectionFormations')
        var soi = this

        // Charger la sélection locale si elle existe
        if (saved) {
          try {
            this.state.selectedFormations = JSON.parse(saved)
          } catch (e) {
            console.error('Erreur lecture localStorage :', e)
          }
        }

        // Écouter les changements de connexion Firebase
        window.firebaseServices.onUserChanged(function(user) {

          soi.update({ user: user })

          // Si un utilisateur vient de se connecter, charger sa sélection depuis Firestore
          if (user) {
            window.firebaseServices.loadUserData(user.uid)
              .then(function(donnees) {
                if (donnees && donnees.selection) {
                  soi.update({ selectedFormations: donnees.selection })
                  localStorage.setItem('selectionFormations', JSON.stringify(donnees.selection))
                }
              })
              .catch(function(err) {
                console.error('Erreur chargement Firestore :', err)
              })
          }

        })

        window.addEventListener('hashchange', function() {
          soi.gererRoute()
        })

        this.gererRoute()
      },

      // Appelée après une connexion ou inscription réussie
      surConnexion() {
        // L'écouteur onUserChanged dans onMounted gère automatiquement le reste
      },

      // Appelée après une déconnexion
      surDeconnexion() {
        // On vide la sélection : l'utilisateur doit se reconnecter pour retrouver ses formations
        this.update({ selectedFormations: [] })
        localStorage.removeItem('selectionFormations')
      },

      // Sauvegarder la sélection en local ET dans Firestore si connecté
      async sauvegarderSelection(selection) {

        localStorage.setItem('selectionFormations', JSON.stringify(selection))

        if (this.state.user) {
          try {
            await window.firebaseServices.saveUserData(this.state.user.uid, { selection: selection })
          } catch (err) {
            console.error('Erreur sauvegarde Firestore :', err)
          }
        }

      },

      gererRoute() {
        var ancre = window.location.hash || '#/'
        var chemin = ancre.slice(1) || '/'

        if (chemin.startsWith('/formation/')) {
          var id = decodeURIComponent(chemin.replace('/formation/', ''))
          this.update({ view: 'detail' })
          this.chargerFormationParId(id)
        } else if (chemin === '/comparateur') {
          this.update({ view: 'comparateur', selected: null })
        } else {
          this.update({ view: 'search', selected: null })
        }
      },

      async chargerFormationParId(id) {
        var i

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

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

        try {
          var parties = id.split('-')
          var motCle  = parties.slice(1).join(' ').substring(0, 30)

          if (motCle) {
            var donnees = await window.chargerFormations(motCle, 10, 0)

            if (donnees.results && donnees.results.length > 0) {
              for (i = 0; i < donnees.results.length; i++) {
                var formation = window.creerFormation(donnees.results[i])
                if (formation.id === id) {
                  this.update({ selected: formation })
                  return
                }
              }
              this.update({ selected: window.creerFormation(donnees.results[0]) })
            }
          }
        } catch (erreur) {
          console.error('Erreur chargement formation :', erreur)
        }
      },

      afficherDetail(index) {
        var formation = this.state.results[index]
        this.update({ selected: formation, view: 'detail' })
        window.location.hash = '#/formation/' + encodeURIComponent(formation.id)
      },

      retourRecherche() {
        window.location.hash = '#/'
      },

      async lancerRecherche(requete, filtres) {
        this.update({
          loading: true,
          hasSearched: true,
          selected: null,
          view: 'search',
          query: requete,
          filters: filtres || {},
          page: 1
        })

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

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

        try {
          var decalage = (page - 1) * this.state.limit

          var donnees = await window.chargerFormations(
            this.state.query,
            this.state.limit,
            decalage,
            this.state.filters
          )

          var formations = []

          if (donnees.results) {
            for (var i = 0; i < donnees.results.length; i++) {
              var brut = donnees.results[i]
              formations.push(window.creerFormation(brut))
            }
          }

          var total = 0

          if (donnees.total_count) {
            total = donnees.total_count
          }

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

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

      async pageSuivante() {
        if (this.state.page < this.nombreTotalPages()) {
          await this.chargerPage(this.state.page + 1)
        }
      },

      async pagePrecedente() {
        if (this.state.page > 1) {
          await this.chargerPage(this.state.page - 1)
        }
      },

      ajouterSelection(index) {
        var formation  = this.state.results[index]
        var selection  = this.state.selectedFormations.slice()
        var dejaAjout  = false

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

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

      retirerSelection(id) {
        var nouvelleSelection = []

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

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

        this.update({ selectedFormations: nouvelleSelection })
        this.sauvegarderSelection(nouvelleSelection)
      },

      viderSelection() {
        this.update({ selectedFormations: [] })
        this.sauvegarderSelection([])
      },

      mettreAJourNote(e) {
        this.update({ note: Number(e.target.value) })
      },

      mettreAJourSerie(e) {
        this.update({ serie: e.target.value })
      },

      mettreAJourTri(e) {
        this.update({ sortBy: e.target.value })
      },

      obtenirSelectionTriee() {
        var selection = this.state.selectedFormations.slice()
        var soi       = this

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

        return selection
      },

      pourcentageSerie(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
      },

      calculerScore(f) {
        var score     = 0
        var note      = this.state.note
        var tauxAcces = f.tauxAcces || 0
        var pctSerie  = this.pourcentageSerie(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 (pctSerie >= 60) {
          score += 30
        } else if (pctSerie >= 40) {
          score += 24
        } else if (pctSerie >= 20) {
          score += 16
        } else if (pctSerie >= 5) {
          score += 8
        } else {
          score += 0
        }

        return score
      },

      estimerFormation(f) {
        var score = this.calculerScore(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'
      },

      classeEstimation(f) {
        var resultat = this.estimerFormation(f)

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

      classeCarte(f) {
        var resultat = this.estimerFormation(f)

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

      detailEstimation(f) {
        var tauxAcces  = f.tauxAcces || 0
        var pctSerie   = this.pourcentageSerie(f)
        var nomSerie   = ''

        if (this.state.serie === 'general') {
          nomSerie = 'Gén'
        } else if (this.state.serie === 'techno') {
          nomSerie = 'Techno'
        } else {
          nomSerie = 'Pro'
        }

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