maj 2
This commit is contained in:
sehl
+16
-41
@@ -3,43 +3,21 @@
|
||||
<p>Recherche de formations Parcoursup avec Riot</p>
|
||||
|
||||
<div if={ !state.selected }>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ex : BUT informatique"
|
||||
oninput={ updateQuery }
|
||||
value={ state.query }
|
||||
/>
|
||||
<button onclick={ search }>Rechercher</button>
|
||||
<search-bar onsearch={ launchSearch }></search-bar>
|
||||
|
||||
<p if={ state.loading }>Chargement...</p>
|
||||
<p if={ !state.loading && state.results.length === 0 && state.hasSearched }>
|
||||
Aucun résultat trouvé
|
||||
</p>
|
||||
|
||||
<div each={ f, i in state.results } key={ f.id }
|
||||
style="border:1px solid #ccc; padding:10px; margin:10px;">
|
||||
<h3>{ f.nom }</h3>
|
||||
<p><b>Établissement :</b> { f.etablissement }</p>
|
||||
<p><b>Ville :</b> { f.ville } ({ f.departement })</p>
|
||||
<p><b>Filière :</b> { f.filiere }</p>
|
||||
<p><b>Taux d'accès :</b> { f.tauxAcces }%</p>
|
||||
<button onclick={ () => showDetail(i) }>Voir détail</button>
|
||||
</div>
|
||||
<result-list
|
||||
results={ state.results }
|
||||
hasSearched={ state.hasSearched }
|
||||
loading={ state.loading }
|
||||
ondetail={ showDetail }>
|
||||
</result-list>
|
||||
</div>
|
||||
|
||||
<div if={ state.selected }>
|
||||
<h2>{ state.selected.nom }</h2>
|
||||
<p><b>Établissement :</b> { state.selected.etablissement }</p>
|
||||
<p><b>Ville :</b> { state.selected.ville }</p>
|
||||
<p><b>Département :</b> { state.selected.departement }</p>
|
||||
<p><b>Filière :</b> { state.selected.filiere }</p>
|
||||
<p><b>Sélectivité :</b> { state.selected.selectivite }</p>
|
||||
<p><b>Capacité :</b> { state.selected.capacite }</p>
|
||||
<p><b>Candidats :</b> { state.selected.candidats }</p>
|
||||
<p><b>Admis :</b> { state.selected.admis }</p>
|
||||
<p><b>Taux d'accès :</b> { state.selected.tauxAcces }%</p>
|
||||
|
||||
<button onclick={ backToList }>Retour</button>
|
||||
<detail-view
|
||||
formation={ state.selected }
|
||||
onback={ backToList }>
|
||||
</detail-view>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -48,18 +26,13 @@
|
||||
|
||||
export default {
|
||||
state: {
|
||||
query: '',
|
||||
loading: false,
|
||||
hasSearched: false,
|
||||
results: [],
|
||||
selected: null
|
||||
},
|
||||
|
||||
updateQuery(e) {
|
||||
this.update({ query: e.target.value })
|
||||
},
|
||||
|
||||
async search() {
|
||||
async launchSearch(query) {
|
||||
this.update({
|
||||
loading: true,
|
||||
hasSearched: true,
|
||||
@@ -67,12 +40,14 @@
|
||||
})
|
||||
|
||||
try {
|
||||
const data = await fetchFormations(this.state.query)
|
||||
const data = await fetchFormations(query)
|
||||
const formations = []
|
||||
|
||||
if (data.results) {
|
||||
for (let i = 0; i < data.results.length; i++) {
|
||||
formations.push(createFormation(data.results[i]))
|
||||
const raw = data.results[i]
|
||||
const formation = createFormation(raw)
|
||||
formations.push(formation)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,428 +1,17 @@
|
||||
<detail-view>
|
||||
<div if={ props.formation } class="detail-page">
|
||||
<h2>Formation</h2>
|
||||
<h1 class="formation-title">{ props.formation.etablissement } - { props.formation.nom }</h1>
|
||||
<div class="formation-meta">
|
||||
<div if={ props.formation }
|
||||
style="border:1px solid #ccc; padding:10px; margin:10px;">
|
||||
<h2>{ props.formation.nom }</h2>
|
||||
<p><b>Établissement :</b> { props.formation.etablissement }</p>
|
||||
<p><b>Ville :</b> { props.formation.ville }</p>
|
||||
<p><b>Département :</b> { props.formation.departement } { props.formation.departementLib }</p>
|
||||
<p><b>Académie :</b> { props.formation.academie }</p>
|
||||
<p>{ props.formation.contrat }</p>
|
||||
<p><b>Département :</b> { props.formation.departement }</p>
|
||||
<p><b>Filière :</b> { props.formation.filiere }</p>
|
||||
<p><b>Sélectivité :</b> { props.formation.selectivite }</p>
|
||||
<p><b>Capacité :</b> { props.formation.capacite }</p>
|
||||
<p><b>Candidats :</b> { props.formation.candidats }</p>
|
||||
<p><b>Admis :</b> { props.formation.admis }</p>
|
||||
<p><b>Taux d'accès :</b> { props.formation.tauxAcces }%</p>
|
||||
|
||||
<button onclick={ () => props.onback() }>Retour</button>
|
||||
</div>
|
||||
|
||||
<div class="detail-grid">
|
||||
<div>
|
||||
<h2>Phase principale d'admission</h2>
|
||||
<table class="detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bac</th>
|
||||
<th>Voeux</th>
|
||||
<th>Classés</th>
|
||||
<th>Propositions</th>
|
||||
<th>Acceptés</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Gén</td>
|
||||
<td>{ props.formation.voePPGeneral }</td>
|
||||
<td>{ props.formation.classesPPGeneral }</td>
|
||||
<td>{ props.formation.propositionsPPGeneral }</td>
|
||||
<td>{ props.formation.acceptesPPGeneral }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Techno</td>
|
||||
<td>{ props.formation.voePPTechno }</td>
|
||||
<td>{ props.formation.classesPPTechno }</td>
|
||||
<td>{ props.formation.propositionsPPTechno }</td>
|
||||
<td>{ props.formation.acceptesPPTechno }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pro</td>
|
||||
<td>{ props.formation.voePPPro }</td>
|
||||
<td>{ props.formation.classesPPPro }</td>
|
||||
<td>{ props.formation.propositionsPPPro }</td>
|
||||
<td>{ props.formation.acceptesPPPro }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Autres</td>
|
||||
<td>{ props.formation.voePPAutres }</td>
|
||||
<td>{ props.formation.classesPPAutres }</td>
|
||||
<td>{ props.formation.propositionsPPAutres }</td>
|
||||
<td>{ props.formation.acceptesPPAutres }</td>
|
||||
</tr>
|
||||
<tr class="total-row">
|
||||
<td>Total</td>
|
||||
<td>{ props.formation.voePPTotal }</td>
|
||||
<td>{ props.formation.classesPPTotal }</td>
|
||||
<td>{ props.formation.propositionsPPTotal }</td>
|
||||
<td>{ props.formation.acceptesPPTotal }</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="timeline-box">
|
||||
<h3>Vitesse de remplissage</h3>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div>
|
||||
<b>Ouverture 30 mai</b><br />
|
||||
{ props.formation.pctDebutPhase }%
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div>
|
||||
<b>16 juin</b><br />
|
||||
{ props.formation.pctDateBac }%
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div>
|
||||
<b>11 juillet</b><br />
|
||||
{ props.formation.pctFinPhase }%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Phase complémentaire d'admission</h2>
|
||||
<table class="detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bac</th>
|
||||
<th>Voeux</th>
|
||||
<th>Classés</th>
|
||||
<th>Propositions</th>
|
||||
<th>Acceptés</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Gén</td>
|
||||
<td>{ props.formation.voePCGeneral }</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Techno</td>
|
||||
<td>{ props.formation.voePCTechno }</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pro</td>
|
||||
<td>{ props.formation.voePCPro }</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Autres</td>
|
||||
<td>{ props.formation.voePCAutres }</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="total-row">
|
||||
<td>Total</td>
|
||||
<td>{ props.formation.voePCTotal }</td>
|
||||
<td>{ props.formation.classesPCTotal }</td>
|
||||
<td>{ props.formation.acceptesPCTotal }</td>
|
||||
<td>{ props.formation.acceptesPCTotal }</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- ==================== GRAPHIQUES CHARTS.CSS ==================== -->
|
||||
|
||||
<h2 class="charts-heading">Profil des admis</h2>
|
||||
|
||||
<div class="charts-section">
|
||||
<div class="chart-wrapper">
|
||||
<h3>Répartition par type de bac</h3>
|
||||
<div id="chart-bac" ref="graphBac"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrapper">
|
||||
<h3>Mentions au bac des admis</h3>
|
||||
<div id="chart-mentions" ref="graphMentions"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrapper chart-full">
|
||||
<h3>Profil sociologique</h3>
|
||||
<div id="chart-profil" ref="graphProfil"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== ÉVOLUTION HISTORIQUE ==================== -->
|
||||
|
||||
<h2 class="charts-heading">Évolution depuis 2020</h2>
|
||||
|
||||
<div if={ state.chargementHistorique } class="message">
|
||||
Chargement de l'historique...
|
||||
</div>
|
||||
|
||||
<div if={ !state.chargementHistorique && state.historique.length === 0 } class="message">
|
||||
Aucune donnée historique disponible pour cette formation.
|
||||
</div>
|
||||
|
||||
<div class="charts-section" if={ state.historique.length > 0 }>
|
||||
<div class="chart-wrapper">
|
||||
<h3>Taux d'accès par année</h3>
|
||||
<div id="chart-evolution-taux" ref="graphTaux"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrapper">
|
||||
<h3>Nombre de candidats et admis</h3>
|
||||
<div id="chart-evolution-candidats" ref="graphCandidats"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrapper chart-full">
|
||||
<h3>Évolution des mentions au bac</h3>
|
||||
<div ref="graphMentionsHist"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick={ retourListe } class="btn-retour">Retour à la liste</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
state: {
|
||||
historique: [],
|
||||
chargementHistorique: false
|
||||
},
|
||||
|
||||
onMounted() {
|
||||
this.afficherGraphiques();
|
||||
this.chargerHistorique();
|
||||
},
|
||||
|
||||
onUpdated() {
|
||||
this.afficherGraphiques();
|
||||
|
||||
if (this.state.historique.length > 0) {
|
||||
this.afficherGraphiquesHistoriques();
|
||||
}
|
||||
},
|
||||
|
||||
// Retour à la liste des résultats
|
||||
retourListe() {
|
||||
this.props.onback();
|
||||
},
|
||||
|
||||
// Limiter une valeur entre 0 et 1 pour Charts.css
|
||||
limiterValeur(val) {
|
||||
if (val === null || val === undefined || isNaN(val)) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
var v = val / 100;
|
||||
|
||||
if (v > 1) {
|
||||
return 1;
|
||||
}
|
||||
if (v < 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return Math.round(v * 100) / 100;
|
||||
},
|
||||
|
||||
afficherGraphiques() {
|
||||
var f = this.props.formation;
|
||||
if (!f) {
|
||||
return;
|
||||
}
|
||||
|
||||
var graphBac = this.$('[ref="graphBac"]');
|
||||
var graphMentions = this.$('[ref="graphMentions"]');
|
||||
var graphProfil = this.$('[ref="graphProfil"]');
|
||||
|
||||
if (graphBac) {
|
||||
graphBac.innerHTML = this.construireGraphiqueColonnes([
|
||||
{ label: 'Général', valeur: f.pctGeneral, couleur: '#3d7fff' },
|
||||
{ label: 'Techno', valeur: f.pctTechno, couleur: '#f59e0b' },
|
||||
{ label: 'Pro', valeur: f.pctPro, couleur: '#10b981' }
|
||||
]);
|
||||
}
|
||||
|
||||
if (graphMentions) {
|
||||
graphMentions.innerHTML = this.construireGraphiqueColonnes([
|
||||
{ label: 'Sans', valeur: f.pctSansMention, couleur: '#94a3b8' },
|
||||
{ label: 'AB', valeur: f.pctAB, couleur: '#60a5fa' },
|
||||
{ label: 'Bien', valeur: f.pctB, couleur: '#34d399' },
|
||||
{ label: 'TB', valeur: f.pctTB, couleur: '#fbbf24' },
|
||||
{ label: 'TB Féli.', valeur: f.pctTBF, couleur: '#f472b6' }
|
||||
]);
|
||||
}
|
||||
|
||||
if (graphProfil) {
|
||||
graphProfil.innerHTML = this.construireGraphiqueBarres([
|
||||
{ label: 'Femmes', valeur: f.pctFemmes, couleur: '#a78bfa' },
|
||||
{ label: 'Boursiers', valeur: f.pctBoursiers, couleur: '#fb923c' },
|
||||
{ label: 'Néo-bac', valeur: f.pctNeoBac, couleur: '#2dd4bf' }
|
||||
]);
|
||||
}
|
||||
},
|
||||
|
||||
async chargerHistorique() {
|
||||
var f = this.props.formation;
|
||||
if (!f) {
|
||||
return;
|
||||
}
|
||||
|
||||
var codUai = f.id.split('-')[0];
|
||||
|
||||
if (!codUai || !window.chargerHistoriqueFormation) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.update({ chargementHistorique: true });
|
||||
|
||||
try {
|
||||
var historique = await window.chargerHistoriqueFormation(codUai, f.nom);
|
||||
this.update({ historique: historique, chargementHistorique: false });
|
||||
} catch (e) {
|
||||
console.error('Erreur chargement historique :', e);
|
||||
this.update({ historique: [], chargementHistorique: false });
|
||||
}
|
||||
},
|
||||
|
||||
afficherGraphiquesHistoriques() {
|
||||
var historique = this.state.historique;
|
||||
if (!historique || historique.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var graphTaux = this.$('[ref="graphTaux"]');
|
||||
var graphCandidats = this.$('[ref="graphCandidats"]');
|
||||
var graphMentionsHist = this.$('[ref="graphMentionsHist"]');
|
||||
|
||||
// Graphique : taux d'accès par année
|
||||
if (graphTaux) {
|
||||
var elementsAnnee = [];
|
||||
|
||||
for (var i = 0; i < historique.length; i++) {
|
||||
elementsAnnee.push({
|
||||
label: '' + historique[i].annee,
|
||||
valeur: historique[i].tauxAcces,
|
||||
couleur: '#1a936f'
|
||||
});
|
||||
}
|
||||
|
||||
graphTaux.innerHTML = this.construireGraphiqueColonnes(elementsAnnee);
|
||||
}
|
||||
|
||||
// Graphique : candidats vs admis
|
||||
if (graphCandidats) {
|
||||
var maxCandidats = 0;
|
||||
|
||||
for (var i = 0; i < historique.length; i++) {
|
||||
if (historique[i].candidats > maxCandidats) {
|
||||
maxCandidats = historique[i].candidats;
|
||||
}
|
||||
}
|
||||
|
||||
var lignes = '';
|
||||
|
||||
for (var i = 0; i < historique.length; i++) {
|
||||
var h = historique[i];
|
||||
var tailleCand = 0;
|
||||
var tailleAdmis = 0;
|
||||
|
||||
if (maxCandidats > 0) {
|
||||
tailleCand = Math.round((h.candidats / maxCandidats) * 100) / 100;
|
||||
tailleAdmis = Math.round((h.admis / maxCandidats) * 100) / 100;
|
||||
}
|
||||
|
||||
lignes += '<tr>';
|
||||
lignes += '<th scope="row">' + h.annee + '</th>';
|
||||
lignes += '<td style="--size: ' + tailleCand + '; --color: #2a5298;">';
|
||||
lignes += '<span class="data">' + h.candidats + '</span></td>';
|
||||
lignes += '<td style="--size: ' + tailleAdmis + '; --color: #1a936f;">';
|
||||
lignes += '<span class="data">' + h.admis + '</span></td>';
|
||||
lignes += '</tr>';
|
||||
}
|
||||
|
||||
graphCandidats.innerHTML = '<table class="charts-css column multiple show-labels show-primary-axis show-4-secondary-axes data-spacing-10">'
|
||||
+ '<thead><tr><th scope="col">Année</th><th scope="col">Candidats</th><th scope="col">Admis</th></tr></thead>'
|
||||
+ '<tbody>' + lignes + '</tbody></table>';
|
||||
}
|
||||
|
||||
// Tableau : évolution des mentions
|
||||
if (graphMentionsHist) {
|
||||
var tableau = '<table class="detail-table">';
|
||||
tableau += '<thead><tr><th>Année</th><th>Sans mention</th><th>AB</th><th>Bien</th><th>TB</th><th>TB Féli.</th></tr></thead>';
|
||||
tableau += '<tbody>';
|
||||
|
||||
for (var i = 0; i < historique.length; i++) {
|
||||
var h = historique[i];
|
||||
tableau += '<tr>';
|
||||
tableau += '<td><b>' + h.annee + '</b></td>';
|
||||
tableau += '<td>' + h.pctSansMention + '%</td>';
|
||||
tableau += '<td>' + h.pctAB + '%</td>';
|
||||
tableau += '<td>' + h.pctB + '%</td>';
|
||||
tableau += '<td>' + h.pctTB + '%</td>';
|
||||
tableau += '<td>' + h.pctTBF + '%</td>';
|
||||
tableau += '</tr>';
|
||||
}
|
||||
|
||||
tableau += '</tbody></table>';
|
||||
graphMentionsHist.innerHTML = tableau;
|
||||
}
|
||||
},
|
||||
|
||||
construireGraphiqueColonnes(elements) {
|
||||
var lignes = '';
|
||||
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var el = elements[i];
|
||||
var taille = this.limiterValeur(el.valeur);
|
||||
var affiche = el.valeur || 0;
|
||||
|
||||
lignes += '<tr>';
|
||||
lignes += '<th scope="row">' + el.label + '</th>';
|
||||
lignes += '<td style="--size: ' + taille + '; --color: ' + el.couleur + ';">';
|
||||
lignes += '<span class="data">' + affiche + '%</span>';
|
||||
lignes += '</td></tr>';
|
||||
}
|
||||
|
||||
return '<table class="charts-css column show-labels show-primary-axis show-4-secondary-axes data-spacing-10">'
|
||||
+ '<thead><tr><th scope="col">Type</th><th scope="col">%</th></tr></thead>'
|
||||
+ '<tbody>' + lignes + '</tbody></table>';
|
||||
},
|
||||
|
||||
construireGraphiqueBarres(elements) {
|
||||
var lignes = '';
|
||||
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var el = elements[i];
|
||||
var taille = this.limiterValeur(el.valeur);
|
||||
var affiche = el.valeur || 0;
|
||||
|
||||
lignes += '<tr>';
|
||||
lignes += '<th scope="row">' + el.label + '</th>';
|
||||
lignes += '<td style="--size: ' + taille + '; --color: ' + el.couleur + ';">';
|
||||
lignes += '<span class="data">' + affiche + '%</span>';
|
||||
lignes += '</td></tr>';
|
||||
}
|
||||
|
||||
return '<table class="charts-css bar show-labels show-primary-axis show-4-secondary-axes data-spacing-14">'
|
||||
+ '<thead><tr><th scope="col">Catégorie</th><th scope="col">%</th></tr></thead>'
|
||||
+ '<tbody>' + lignes + '</tbody></table>';
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
</detail-view>
|
||||
@@ -1,49 +1,22 @@
|
||||
<result-list>
|
||||
<div class="results">
|
||||
|
||||
<div class="message" if={ props.results.length === 0 && props.hasSearched && !props.loading }>
|
||||
<div>
|
||||
<div if={ props.results.length === 0 && props.hasSearched && !props.loading }>
|
||||
Aucun résultat trouvé
|
||||
</div>
|
||||
|
||||
<div class="message" if={ props.loading }>
|
||||
<div if={ props.loading }>
|
||||
Chargement...
|
||||
</div>
|
||||
|
||||
<div each={ (formation, index) in props.results } key={ formation.id } class="card">
|
||||
<h3>{ formation.nom }</h3>
|
||||
<p><b>Établissement :</b> { formation.etablissement }</p>
|
||||
<p><b>Ville :</b> { formation.ville } ({ formation.departement })</p>
|
||||
<p><b>Filière :</b> { formation.filiere }</p>
|
||||
<p><b>Taux d'accès :</b> { formation.tauxAcces }%</p>
|
||||
|
||||
<button onclick={ afficherDetail.bind(this, index) }>Voir détail</button>
|
||||
<button onclick={ ajouterALaSelection.bind(this, index) }>Ajouter à la sélection</button>
|
||||
<button onclick={ localiserSurCarte.bind(this, formation) } if={ formation.latitude != null }>Localiser</button>
|
||||
<div each={ f, i in props.results }
|
||||
key={ f.id }
|
||||
style="border:1px solid #ccc; padding:10px; margin:10px;">
|
||||
<h3>{ f.nom }</h3>
|
||||
<p><b>Établissement :</b> { f.etablissement }</p>
|
||||
<p><b>Ville :</b> { f.ville } ({ f.departement })</p>
|
||||
<p><b>Filière :</b> { f.filiere }</p>
|
||||
<p><b>Taux d'accès :</b> { f.tauxAcces }%</p>
|
||||
<button onclick={ () => props.ondetail(i) }>Voir détail</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
// Déclencher l'affichage du détail d'une formation
|
||||
afficherDetail(index) {
|
||||
this.props.ondetail(index);
|
||||
},
|
||||
|
||||
// Ajouter une formation à la sélection
|
||||
ajouterALaSelection(index) {
|
||||
this.props.onselect(index);
|
||||
},
|
||||
|
||||
// Centrer la carte sur la formation
|
||||
localiserSurCarte(formation) {
|
||||
if (window.mapFocus) {
|
||||
window.mapFocus(formation.id);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
</result-list>
|
||||
@@ -1,147 +1,27 @@
|
||||
<search-bar>
|
||||
<div class="search-bar">
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ex : BUT informatique, Licence droit..."
|
||||
placeholder="Ex : BUT informatique"
|
||||
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.labelFiltres }
|
||||
</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="Ecole de Commerce">École de Commerce</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: '',
|
||||
showFilters: false,
|
||||
labelFiltres: 'Filtres avancés',
|
||||
filiere: '',
|
||||
selectivite: '',
|
||||
region: '',
|
||||
tauxMin: 0,
|
||||
tauxMax: 100
|
||||
query: ''
|
||||
},
|
||||
|
||||
updateQuery(e) {
|
||||
this.update({ query: e.target.value });
|
||||
},
|
||||
|
||||
handleKey(e) {
|
||||
if (e.key === 'Enter') {
|
||||
this.submitSearch();
|
||||
}
|
||||
},
|
||||
|
||||
toggleFilters() {
|
||||
var visible = !this.state.showFilters;
|
||||
var label = visible ? 'Masquer les filtres' : 'Filtres avancés';
|
||||
this.update({ showFilters: visible, labelFiltres: label });
|
||||
},
|
||||
|
||||
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) });
|
||||
this.update({ query: e.target.value })
|
||||
},
|
||||
|
||||
submitSearch() {
|
||||
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);
|
||||
this.props.onsearch(this.state.query)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</search-bar>
|
||||
Reference in New Issue
Block a user