mAj
This commit is contained in:
+166
-56
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user