maj 2
This commit is contained in:
sehl
+16
-41
@@ -3,43 +3,21 @@
|
|||||||
<p>Recherche de formations Parcoursup avec Riot</p>
|
<p>Recherche de formations Parcoursup avec Riot</p>
|
||||||
|
|
||||||
<div if={ !state.selected }>
|
<div if={ !state.selected }>
|
||||||
<input
|
<search-bar onsearch={ launchSearch }></search-bar>
|
||||||
type="text"
|
|
||||||
placeholder="Ex : BUT informatique"
|
|
||||||
oninput={ updateQuery }
|
|
||||||
value={ state.query }
|
|
||||||
/>
|
|
||||||
<button onclick={ search }>Rechercher</button>
|
|
||||||
|
|
||||||
<p if={ state.loading }>Chargement...</p>
|
<result-list
|
||||||
<p if={ !state.loading && state.results.length === 0 && state.hasSearched }>
|
results={ state.results }
|
||||||
Aucun résultat trouvé
|
hasSearched={ state.hasSearched }
|
||||||
</p>
|
loading={ state.loading }
|
||||||
|
ondetail={ showDetail }>
|
||||||
<div each={ f, i in state.results } key={ f.id }
|
</result-list>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div if={ state.selected }>
|
<div if={ state.selected }>
|
||||||
<h2>{ state.selected.nom }</h2>
|
<detail-view
|
||||||
<p><b>Établissement :</b> { state.selected.etablissement }</p>
|
formation={ state.selected }
|
||||||
<p><b>Ville :</b> { state.selected.ville }</p>
|
onback={ backToList }>
|
||||||
<p><b>Département :</b> { state.selected.departement }</p>
|
</detail-view>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -48,18 +26,13 @@
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
state: {
|
state: {
|
||||||
query: '',
|
|
||||||
loading: false,
|
loading: false,
|
||||||
hasSearched: false,
|
hasSearched: false,
|
||||||
results: [],
|
results: [],
|
||||||
selected: null
|
selected: null
|
||||||
},
|
},
|
||||||
|
|
||||||
updateQuery(e) {
|
async launchSearch(query) {
|
||||||
this.update({ query: e.target.value })
|
|
||||||
},
|
|
||||||
|
|
||||||
async search() {
|
|
||||||
this.update({
|
this.update({
|
||||||
loading: true,
|
loading: true,
|
||||||
hasSearched: true,
|
hasSearched: true,
|
||||||
@@ -67,12 +40,14 @@
|
|||||||
})
|
})
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const data = await fetchFormations(this.state.query)
|
const data = await fetchFormations(query)
|
||||||
const formations = []
|
const formations = []
|
||||||
|
|
||||||
if (data.results) {
|
if (data.results) {
|
||||||
for (let i = 0; i < data.results.length; i++) {
|
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>
|
<detail-view>
|
||||||
<div if={ props.formation } class="detail-page">
|
<div if={ props.formation }
|
||||||
<h2>Formation</h2>
|
style="border:1px solid #ccc; padding:10px; margin:10px;">
|
||||||
<h1 class="formation-title">{ props.formation.etablissement } - { props.formation.nom }</h1>
|
<h2>{ props.formation.nom }</h2>
|
||||||
<div class="formation-meta">
|
<p><b>Établissement :</b> { props.formation.etablissement }</p>
|
||||||
<p><b>Ville :</b> { props.formation.ville }</p>
|
<p><b>Ville :</b> { props.formation.ville }</p>
|
||||||
<p><b>Département :</b> { props.formation.departement } { props.formation.departementLib }</p>
|
<p><b>Département :</b> { props.formation.departement }</p>
|
||||||
<p><b>Académie :</b> { props.formation.academie }</p>
|
<p><b>Filière :</b> { props.formation.filiere }</p>
|
||||||
<p>{ props.formation.contrat }</p>
|
<p><b>Sélectivité :</b> { props.formation.selectivite }</p>
|
||||||
<p><b>Capacité :</b> { props.formation.capacite }</p>
|
<p><b>Capacité :</b> { props.formation.capacite }</p>
|
||||||
</div>
|
<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>
|
||||||
|
|
||||||
<div class="detail-grid">
|
<button onclick={ () => props.onback() }>Retour</button>
|
||||||
<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>
|
</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>
|
</detail-view>
|
||||||
@@ -1,49 +1,22 @@
|
|||||||
<result-list>
|
<result-list>
|
||||||
<div class="results">
|
<div>
|
||||||
|
<div if={ props.results.length === 0 && props.hasSearched && !props.loading }>
|
||||||
<div class="message" if={ props.results.length === 0 && props.hasSearched && !props.loading }>
|
|
||||||
Aucun résultat trouvé
|
Aucun résultat trouvé
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="message" if={ props.loading }>
|
<div if={ props.loading }>
|
||||||
Chargement...
|
Chargement...
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div each={ (formation, index) in props.results } key={ formation.id } class="card">
|
<div each={ f, i in props.results }
|
||||||
<h3>{ formation.nom }</h3>
|
key={ f.id }
|
||||||
<p><b>Établissement :</b> { formation.etablissement }</p>
|
style="border:1px solid #ccc; padding:10px; margin:10px;">
|
||||||
<p><b>Ville :</b> { formation.ville } ({ formation.departement })</p>
|
<h3>{ f.nom }</h3>
|
||||||
<p><b>Filière :</b> { formation.filiere }</p>
|
<p><b>Établissement :</b> { f.etablissement }</p>
|
||||||
<p><b>Taux d'accès :</b> { formation.tauxAcces }%</p>
|
<p><b>Ville :</b> { f.ville } ({ f.departement })</p>
|
||||||
|
<p><b>Filière :</b> { f.filiere }</p>
|
||||||
<button onclick={ afficherDetail.bind(this, index) }>Voir détail</button>
|
<p><b>Taux d'accès :</b> { f.tauxAcces }%</p>
|
||||||
<button onclick={ ajouterALaSelection.bind(this, index) }>Ajouter à la sélection</button>
|
<button onclick={ () => props.ondetail(i) }>Voir détail</button>
|
||||||
<button onclick={ localiserSurCarte.bind(this, formation) } if={ formation.latitude != null }>Localiser</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</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>
|
</result-list>
|
||||||
@@ -1,147 +1,27 @@
|
|||||||
<search-bar>
|
<search-bar>
|
||||||
<div class="search-bar">
|
<div>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Ex : BUT informatique, Licence droit..."
|
placeholder="Ex : BUT informatique"
|
||||||
oninput={ updateQuery }
|
oninput={ updateQuery }
|
||||||
value={ state.query }
|
value={ state.query }
|
||||||
onkeydown={ handleKey }
|
|
||||||
/>
|
/>
|
||||||
<button onclick={ submitSearch }>Rechercher</button>
|
<button onclick={ submitSearch }>Rechercher</button>
|
||||||
</div>
|
</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>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
state: {
|
state: {
|
||||||
query: '',
|
query: ''
|
||||||
showFilters: false,
|
|
||||||
labelFiltres: 'Filtres avancés',
|
|
||||||
filiere: '',
|
|
||||||
selectivite: '',
|
|
||||||
region: '',
|
|
||||||
tauxMin: 0,
|
|
||||||
tauxMax: 100
|
|
||||||
},
|
},
|
||||||
|
|
||||||
updateQuery(e) {
|
updateQuery(e) {
|
||||||
this.update({ query: e.target.value });
|
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) });
|
|
||||||
},
|
},
|
||||||
|
|
||||||
submitSearch() {
|
submitSearch() {
|
||||||
var filters = {
|
this.props.onsearch(this.state.query)
|
||||||
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>
|
</script>
|
||||||
</search-bar>
|
</search-bar>
|
||||||
Reference in New Issue
Block a user