496 lines
15 KiB
Plaintext
496 lines
15 KiB
Plaintext
<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={ onUserAuth } onlogout={ onUserLogout }></auth-panel>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="page">
|
|
|
|
<!-- ============== VUE RECHERCHE ============== -->
|
|
<div if={ state.view === 'search' }>
|
|
<search-bar onsearch={ launchSearch }></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={ 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>
|
|
|
|
<!-- ============== VUE DÉTAIL ============== -->
|
|
<div if={ state.view === 'detail' && state.selected }>
|
|
<detail-view
|
|
formation={ state.selected }
|
|
onback={ goToSearch }>
|
|
</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={ goToSearch } 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={ 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 />
|
|
|
|
<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>
|
|
|
|
<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')
|
|
|
|
if (saved) {
|
|
try {
|
|
this.state.selectedFormations = JSON.parse(saved)
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
}
|
|
|
|
var self = this
|
|
|
|
// Écouter les changements d'authentification Firebase
|
|
window.firebaseServices.onUserChanged(function(user) {
|
|
self.update({ user: user })
|
|
|
|
if (user) {
|
|
// Charger la sélection depuis Firestore
|
|
window.firebaseServices.loadUserData(user.uid).then(function(data) {
|
|
if (data && data.selection) {
|
|
self.update({ selectedFormations: data.selection })
|
|
localStorage.setItem('selectionFormations', JSON.stringify(data.selection))
|
|
}
|
|
}).catch(function(err) {
|
|
console.error('Erreur chargement Firestore:', err)
|
|
})
|
|
}
|
|
})
|
|
|
|
window.addEventListener('hashchange', function() {
|
|
self.handleRoute()
|
|
})
|
|
|
|
this.handleRoute()
|
|
},
|
|
|
|
onUserAuth() {
|
|
// Appelé après connexion/inscription réussie — l'écouteur onUserChanged gère le reste
|
|
},
|
|
|
|
onUserLogout() {
|
|
// Vider la sélection locale à la déconnexion → obligé de se reconnecter pour retrouver ses formations
|
|
this.update({ selectedFormations: [] })
|
|
localStorage.removeItem('selectionFormations')
|
|
},
|
|
|
|
async saveSelection(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)
|
|
}
|
|
}
|
|
},
|
|
|
|
handleRoute() {
|
|
var hash = window.location.hash || '#/'
|
|
var path = hash.slice(1) || '/'
|
|
|
|
if (path.startsWith('/formation/')) {
|
|
var id = decodeURIComponent(path.replace('/formation/', ''))
|
|
this.update({ view: 'detail' })
|
|
this.loadFormationById(id)
|
|
} else if (path === '/comparateur') {
|
|
this.update({ view: 'comparateur', selected: null })
|
|
} else {
|
|
this.update({ view: 'search', selected: null })
|
|
}
|
|
},
|
|
|
|
async loadFormationById(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 parts = id.split('-')
|
|
var searchTerm = parts.slice(1).join(' ').substring(0, 30)
|
|
|
|
if (searchTerm) {
|
|
var data = await window.fetchFormations(searchTerm, 10, 0)
|
|
|
|
if (data.results && data.results.length > 0) {
|
|
for (i = 0; i < data.results.length; i++) {
|
|
var 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)
|
|
}
|
|
},
|
|
|
|
showDetail(index) {
|
|
var formation = this.state.results[index]
|
|
this.update({ selected: formation, view: 'detail' })
|
|
window.location.hash = '#/formation/' + encodeURIComponent(formation.id)
|
|
},
|
|
|
|
goToSearch() {
|
|
window.location.hash = '#/'
|
|
},
|
|
|
|
async launchSearch(query, filters) {
|
|
this.update({
|
|
loading: true,
|
|
hasSearched: true,
|
|
selected: null,
|
|
view: 'search',
|
|
query: query,
|
|
filters: filters || {},
|
|
page: 1
|
|
})
|
|
|
|
window.location.hash = '#/'
|
|
await this.loadPage(1)
|
|
},
|
|
|
|
async loadPage(page) {
|
|
this.update({ loading: true })
|
|
|
|
try {
|
|
var offset = (page - 1) * this.state.limit
|
|
|
|
var data = await window.fetchFormations(
|
|
this.state.query,
|
|
this.state.limit,
|
|
offset,
|
|
this.state.filters
|
|
)
|
|
|
|
var formations = []
|
|
|
|
if (data.results) {
|
|
for (var i = 0; i < data.results.length; i++) {
|
|
var 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)
|
|
}
|
|
},
|
|
|
|
addToSelection(index) {
|
|
var formation = this.state.results[index]
|
|
var selection = this.state.selectedFormations.slice()
|
|
|
|
var exists = false
|
|
|
|
for (var i = 0; i < selection.length; i++) {
|
|
if (selection[i].id === formation.id) {
|
|
exists = true
|
|
}
|
|
}
|
|
|
|
if (!exists) {
|
|
selection.push(formation)
|
|
this.update({ selectedFormations: selection })
|
|
this.saveSelection(selection)
|
|
}
|
|
},
|
|
|
|
removeFromSelection(id) {
|
|
var newSelection = []
|
|
|
|
for (var i = 0; i < this.state.selectedFormations.length; i++) {
|
|
var f = this.state.selectedFormations[i]
|
|
|
|
if (f.id !== id) {
|
|
newSelection.push(f)
|
|
}
|
|
}
|
|
|
|
this.update({ selectedFormations: newSelection })
|
|
this.saveSelection(newSelection)
|
|
},
|
|
|
|
clearSelection() {
|
|
this.update({ selectedFormations: [] })
|
|
this.saveSelection([])
|
|
},
|
|
|
|
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() {
|
|
var selection = this.state.selectedFormations.slice()
|
|
|
|
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') {
|
|
var self = this
|
|
selection.sort(function(a, b) { return self.getScore(b) - self.getScore(a) })
|
|
} else {
|
|
selection.sort(function(a, b) { return a.nom.localeCompare(b.nom) })
|
|
}
|
|
|
|
return selection
|
|
},
|
|
|
|
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) {
|
|
var score = 0
|
|
var note = this.state.note
|
|
var tauxAcces = f.tauxAcces || 0
|
|
var 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) {
|
|
var 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) {
|
|
var 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) {
|
|
var 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) {
|
|
var tauxAcces = f.tauxAcces || 0
|
|
var seriePct = this.getSeriePercent(f)
|
|
var 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>
|