mAj

parcoursup/api.js

@@ -1,19 +1,45 @@
-export function buildURL(query, limit = 20, offset = 0) {
+export function buildURL(query, limit = 20, offset = 0, filters = {}) {
   let url =
     "https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records?"
 
   url += "limit=" + limit
   url += "&offset=" + offset
 
+  var conditions = []
+
   if (query && query.trim() !== "") {
-    url += "&where=search(lib_for_voe_ins, '" + query + "')"
+    conditions.push("search(lib_for_voe_ins, '" + query + "')")
+  }
+
+  if (filters.filiere && filters.filiere !== "") {
+    conditions.push("fili='" + filters.filiere + "'")
+  }
+
+  if (filters.selectivite && filters.selectivite !== "") {
+    conditions.push("select_form='" + filters.selectivite + "'")
+  }
+
+  if (filters.region && filters.region !== "") {
+    conditions.push("region_etab_aff='" + filters.region + "'")
+  }
+
+  if (filters.tauxMin && filters.tauxMin > 0) {
+    conditions.push("taux_acces_ens>=" + filters.tauxMin)
+  }
+
+  if (filters.tauxMax && filters.tauxMax < 100) {
+    conditions.push("taux_acces_ens<=" + filters.tauxMax)
+  }
+
+  if (conditions.length > 0) {
+    url += "&where=" + conditions.join(" AND ")
   }
 
   return url
 }
 
-export async function fetchFormations(query, limit = 20, offset = 0) {
-  const url = buildURL(query, limit, offset)
+export async function fetchFormations(query, limit = 20, offset = 0, filters = {}) {
+  const url = buildURL(query, limit, offset, filters)
   const response = await fetch(url)
 
   if (!response.ok) {
@@ -22,3 +48,65 @@ export async function fetchFormations(query, limit = 20, offset = 0) {
 
   return await response.json()
 }
+
+export async function fetchFormationHistory(codUai, nomFormation) {
+  var datasets = {
+    2020: "fr-esr-parcoursup_2020",
+    2021: "fr-esr-parcoursup_2021",
+    2022: "fr-esr-parcoursup_2022",
+    2023: "fr-esr-parcoursup_2023",
+    2024: "fr-esr-parcoursup_2024",
+    2025: "fr-esr-parcoursup"
+  }
+
+  var history = []
+  var searchName = nomFormation.substring(0, 40).replace(/'/g, "\\'")
+  var years = [2020, 2021, 2022, 2023, 2024, 2025]
+
+  for (var i = 0; i < years.length; i++) {
+    var year = years[i]
+    var dataset = datasets[year]
+
+    try {
+      var url = "https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/"
+        + dataset + "/records?"
+        + "limit=5"
+        + "&where=cod_uai%3D'" + codUai + "' AND search(lib_for_voe_ins, '" + searchName + "')"
+        + "&select=cod_uai,lib_for_voe_ins,voe_tot,acc_tot,pct_sansmention,pct_ab,pct_b,pct_tb,pct_tbf,pct_bg,pct_bt,pct_bp"
+
+      var response = await fetch(url)
+
+      if (response.ok) {
+        var data = await response.json()
+
+        if (data.results && data.results.length > 0) {
+          var r = data.results[0]
+          var taux = 0
+
+          if (r.voe_tot && r.voe_tot > 0) {
+            taux = Math.round((r.acc_tot / r.voe_tot) * 100)
+          }
+
+          history.push({
+            annee: year,
+            tauxAcces: taux,
+            candidats: r.voe_tot || 0,
+            admis: r.acc_tot || 0,
+            pctSansMention: r.pct_sansmention || 0,
+            pctAB: r.pct_ab || 0,
+            pctB: r.pct_b || 0,
+            pctTB: r.pct_tb || 0,
+            pctTBF: r.pct_tbf || 0,
+            pctGeneral: r.pct_bg || 0,
+            pctTechno: r.pct_bt || 0,
+            pctPro: r.pct_bp || 0
+          })
+        }
+      }
+    } catch (e) {
+      console.warn("Erreur pour " + year + ":", e)
+    }
+  }
+
+  return history
+}

parcoursup/app.riot

@@ -2,10 +2,10 @@
   <header class="site-header">
     <div class="header-inner">
       <div class="logo">
-        <span class="logo-icon"></span>
+        <span class="logo-icon">🎓</span>
         <span class="logo-text">Parcoursup <span class="logo-light">Explorer</span></span>
       </div>
-      <div class="header-badge" if={ state.selectedFormations.length > 0 }>
+      <div class="header-badge badge-clickable" if={ state.selectedFormations.length > 0 } onclick={ scrollToComparateur }>
         { state.selectedFormations.length } sélection(s)
       </div>
     </div>
@@ -16,10 +16,10 @@
     <div if={ !state.selected }>
       <search-bar onsearch={ launchSearch }></search-bar>
 
-      <div class="detail-card comparateur-card" if={ state.selectedFormations.length > 0 }>
+      <div class="detail-card comparateur-card" ref="comparateur" if={ state.selectedFormations.length > 0 }>
         <h3>Comparateur</h3>
 
-        <p>Choisis ton profil pour comparer les formations sélectionnées.</p>
+        <p>Choisis ton profil pour estimer tes chances d'intégration.</p>
 
         <div class="compare-controls">
           <div>
@@ -49,6 +49,7 @@
               <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>
@@ -59,25 +60,27 @@
 
         <h3>Formations sélectionnées</h3>
 
-        <div each={ f in getSortedSelection() } key={ f.id } class="card">
+        <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>Profil admis :</b>
+            <b>Intégrés :</b>
             Général { f.pctGeneral }% /
             Techno { f.pctTechno }% /
             Pro { f.pctPro }%
           </p>
 
-          <p>
-            <b>Estimation :</b>
+          <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) }>
@@ -137,6 +140,7 @@
         serie: 'general',
         sortBy: 'nom',
         query: '',
+        filters: {},
         page: 1,
         limit: 20,
         total: 0
@@ -154,24 +158,103 @@
             console.error(e)
           }
         }
+
+        window.addEventListener('hashchange', () => {
+          this.handleRoute()
+        })
+
+        this.handleRoute()
       },
 
-      async launchSearch(query) {
+      // ===== 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
-        })
+        this.update({ loading: true })
 
         try {
           const offset = (page - 1) * this.state.limit
@@ -179,7 +262,8 @@
           const data = await window.fetchFormations(
             this.state.query,
             this.state.limit,
-            offset
+            offset,
+            this.state.filters
           )
 
           const formations = []
@@ -223,18 +307,7 @@
         }
       },
 
-      showDetail(index) {
-        this.update({
-          selected: this.state.results[index]
-        })
-      },
-
-      backToList() {
-        this.update({
-          selected: null
-        })
-      },
-
+      // ===== SÉLECTION =====
       addToSelection(index) {
         const formation = this.state.results[index]
         const selection = [...this.state.selectedFormations]
@@ -265,32 +338,19 @@
           }
         }
 
-        this.update({
-          selectedFormations: newSelection
-        })
-
+        this.update({ selectedFormations: newSelection })
         localStorage.setItem('selectionFormations', JSON.stringify(newSelection))
       },
 
       clearSelection() {
-        this.update({
-          selectedFormations: []
-        })
-
+        this.update({ selectedFormations: [] })
         localStorage.setItem('selectionFormations', JSON.stringify([]))
       },
 
-      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 })
-      },
+      // ===== 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]
@@ -299,6 +359,8 @@
           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))
         }
@@ -306,30 +368,78 @@
         return selection
       },
 
-      estimateFormation(f) {
+      // ===== 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 (f.tauxAcces >= 50) score += 2
-        else if (f.tauxAcces >= 20) score += 1
+        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 (this.state.note >= 15) score += 2
-        else if (this.state.note >= 12) score += 1
+        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 (this.state.serie === 'general' && f.pctGeneral >= 50) score += 2
-        if (this.state.serie === 'techno' && f.pctTechno >= 20) score += 2
-        if (this.state.serie === 'pro' && f.pctPro >= 15) score += 2
+        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
 
-        if (score >= 5) return 'Favorable'
-        if (score >= 3) return 'Possible'
-        return 'Difficile'
+        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'
-        return 'estimate difficile'
+        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>

parcoursup/components/map-view.riot

@@ -16,12 +16,17 @@
         }).addTo(this.map)
 
         this.markersLayer = L.layerGroup().addTo(this.map)
+        this.markersById = {}
         this.refreshMarkers()
 
-        // important : Leaflet calcule parfois mal la taille au montage
         setTimeout(() => {
           this.map.invalidateSize()
         }, 100)
+
+        // Exposer globalement pour que result-list puisse appeler
+        window.mapFocus = (id) => {
+          this.focusFormation(id)
+        }
       },
 
       onUpdated() {
@@ -39,6 +44,7 @@
           this.map.remove()
           this.map = null
         }
+        window.mapFocus = null
       },
 
       refreshMarkers() {
@@ -47,6 +53,7 @@
         }
 
         this.markersLayer.clearLayers()
+        this.markersById = {}
 
         const points = []
         const results = this.props.results || []
@@ -56,9 +63,10 @@
 
           if (f.latitude != null && f.longitude != null) {
             const marker = L.marker([f.latitude, f.longitude])
-            marker.bindPopup(`<b>${f.nom}</b><br>${f.ville}`)
+            marker.bindPopup('<b>' + f.nom + '</b><br>' + f.ville)
             marker.addTo(this.markersLayer)
 
+            this.markersById[f.id] = marker
             points.push([f.latitude, f.longitude])
           }
         }
@@ -68,6 +76,24 @@
         } else {
           this.map.setView([46.8, 2.5], 6)
         }
+      },
+
+      focusFormation(id) {
+        var marker = this.markersById[id]
+
+        if (marker && this.map) {
+          // Scroll vers la carte
+          var mapEl = this.$('div[ref="map"]')
+          if (mapEl) {
+            mapEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
+          }
+
+          // Zoom sur le marqueur et ouvrir le popup
+          setTimeout(() => {
+            this.map.setView(marker.getLatLng(), 13, { animate: true })
+            marker.openPopup()
+          }, 400)
+        }
       }
     }
   </script>

parcoursup/components/result-list.riot

@@ -17,6 +17,17 @@
 
       <button onclick={ () => props.ondetail(i) }>Voir détail</button>
       <button onclick={ () => props.onselect(i) }>Ajouter à la sélection</button>
+      <button onclick={ () => locateOnMap(f) } if={ f.latitude != null }>Localiser</button>
     </div>
   </div>
+
+  <script>
+    export default {
+      locateOnMap(f) {
+        if (window.mapFocus) {
+          window.mapFocus(f.id)
+        }
+      }
+    }
+  </script>
 </result-list>

parcoursup/components/search-bar.riot

@@ -2,25 +2,132 @@
   <div class="search-bar">
     <input
       type="text"
-      placeholder="Ex : BUT informatique"
+      placeholder="Ex : BUT informatique, Licence droit..."
       oninput={ updateQuery }
       value={ state.query }
+      onkeydown={ handleKey }
     />
     <button onclick={ submitSearch }>Rechercher</button>
   </div>
 
+  <div class="filters-toggle">
+    <button class="btn btn-small btn-outline" onclick={ toggleFilters }>
+      { state.showFilters ? 'Masquer les filtres' : 'Filtres avancés' }
+    </button>
+  </div>
+
+  <div class="filters-panel" if={ state.showFilters }>
+    <div class="filter-row">
+      <div class="filter-item">
+        <label>Type de formation</label>
+        <select onchange={ updateFiliere }>
+          <option value="">Tous</option>
+          <option value="BTS">BTS</option>
+          <option value="BUT">BUT</option>
+          <option value="Licence">Licence</option>
+          <option value="Licence_Las">Licence - L.AS</option>
+          <option value="CPGE">CPGE</option>
+          <option value="BTS Agricole">BTS Agricole</option>
+          <option value="DN MADE">DN MADE</option>
+          <option value="DCG">DCG</option>
+          <option value="Ecole de Commerce">École de Commerce</option>
+          <option value="Ecole d'Ingénieurs">École d'Ingénieurs</option>
+          <option value="IFSI">IFSI</option>
+          <option value="PASS">PASS</option>
+          <option value="EFTS">EFTS</option>
+        </select>
+      </div>
+
+      <div class="filter-item">
+        <label>Sélectivité</label>
+        <select onchange={ updateSelectivite }>
+          <option value="">Toutes</option>
+          <option value="formation sélective">Sélective</option>
+          <option value="formation non sélective">Non sélective</option>
+        </select>
+      </div>
+
+      <div class="filter-item">
+        <label>Région</label>
+        <select onchange={ updateRegion }>
+          <option value="">Toutes</option>
+          <option value="Auvergne-Rhône-Alpes">Auvergne-Rhône-Alpes</option>
+          <option value="Bourgogne-Franche-Comté">Bourgogne-Franche-Comté</option>
+          <option value="Bretagne">Bretagne</option>
+          <option value="Centre-Val de Loire">Centre-Val de Loire</option>
+          <option value="Corse">Corse</option>
+          <option value="Grand Est">Grand Est</option>
+          <option value="Guadeloupe">Guadeloupe</option>
+          <option value="Guyane">Guyane</option>
+          <option value="Hauts-de-France">Hauts-de-France</option>
+          <option value="Ile-de-France">Île-de-France</option>
+          <option value="La Réunion">La Réunion</option>
+          <option value="Martinique">Martinique</option>
+          <option value="Mayotte">Mayotte</option>
+          <option value="Normandie">Normandie</option>
+          <option value="Nouvelle-Aquitaine">Nouvelle-Aquitaine</option>
+          <option value="Occitanie">Occitanie</option>
+          <option value="Pays de la Loire">Pays de la Loire</option>
+          <option value="Provence-Alpes-Côte d'Azur">PACA</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="filter-row">
+      <div class="filter-item">
+        <label>Taux d'accès min (%)</label>
+        <input type="number" min="0" max="100" value={ state.tauxMin } oninput={ updateTauxMin } placeholder="0" />
+      </div>
+
+      <div class="filter-item">
+        <label>Taux d'accès max (%)</label>
+        <input type="number" min="0" max="100" value={ state.tauxMax } oninput={ updateTauxMax } placeholder="100" />
+      </div>
+    </div>
+  </div>
+
   <script>
     export default {
       state: {
-        query: ''
+        query: '',
+        showFilters: false,
+        filiere: '',
+        selectivite: '',
+        region: '',
+        tauxMin: 0,
+        tauxMax: 100
       },
 
       updateQuery(e) {
         this.update({ query: e.target.value })
       },
 
+      handleKey(e) {
+        if (e.key === 'Enter') {
+          this.submitSearch()
+        }
+      },
+
+      toggleFilters() {
+        this.update({ showFilters: !this.state.showFilters })
+      },
+
+      updateFiliere(e) { this.update({ filiere: e.target.value }) },
+      updateSelectivite(e) { this.update({ selectivite: e.target.value }) },
+      updateRegion(e) { this.update({ region: e.target.value }) },
+      updateTauxMin(e) { this.update({ tauxMin: Number(e.target.value) }) },
+      updateTauxMax(e) { this.update({ tauxMax: Number(e.target.value) }) },
+
       submitSearch() {
-        this.props.onsearch(this.state.query)
+        var filters = {
+          filiere: this.state.filiere,
+          selectivite: this.state.selectivite,
+          region: this.state.region,
+          tauxMin: this.state.tauxMin,
+          tauxMax: this.state.tauxMax
+        }
+
+        this.props.onsearch(this.state.query, filters)
       }
     }
   </script>