575 lines
17 KiB
Plaintext
575 lines
17 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={ 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>
|