ajout des elements
This commit is contained in:
@@ -1,9 +1,7 @@
|
||||
<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">
|
||||
<p><b>Ville :</b> { props.formation.ville }</p>
|
||||
<p><b>Département :</b> { props.formation.departement } { props.formation.departementLib }</p>
|
||||
@@ -15,7 +13,6 @@
|
||||
<div class="detail-grid">
|
||||
<div>
|
||||
<h2>Phase principale d'admission</h2>
|
||||
|
||||
<table class="detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -68,7 +65,6 @@
|
||||
|
||||
<div class="timeline-box">
|
||||
<h3>Vitesse de remplissage</h3>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
@@ -77,7 +73,6 @@
|
||||
{ props.formation.pctDebutPhase }%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div>
|
||||
@@ -85,7 +80,6 @@
|
||||
{ props.formation.pctDateBac }%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div>
|
||||
@@ -98,7 +92,6 @@
|
||||
</div>
|
||||
|
||||
<h2>Phase complémentaire d'admission</h2>
|
||||
|
||||
<table class="detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -153,127 +146,49 @@
|
||||
<h2 class="charts-heading">Profil des admis</h2>
|
||||
|
||||
<div class="charts-section">
|
||||
|
||||
<!-- Graphique 1 : Répartition par type de bac -->
|
||||
<div class="chart-wrapper">
|
||||
<h3>Répartition par type de bac</h3>
|
||||
|
||||
<div id="chart-bac">
|
||||
<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">Pourcentage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Général</th>
|
||||
<td style="--size: { safe(props.formation.pctGeneral) }; --color: #3d7fff;">
|
||||
<span class="data">{ props.formation.pctGeneral || 0 }%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Techno</th>
|
||||
<td style="--size: { safe(props.formation.pctTechno) }; --color: #f59e0b;">
|
||||
<span class="data">{ props.formation.pctTechno || 0 }%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Pro</th>
|
||||
<td style="--size: { safe(props.formation.pctPro) }; --color: #10b981;">
|
||||
<span class="data">{ props.formation.pctPro || 0 }%</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="chart-bac" ref="chartBac"></div>
|
||||
</div>
|
||||
|
||||
<!-- Graphique 2 : Mentions au bac -->
|
||||
<div class="chart-wrapper">
|
||||
<h3>Mentions au bac des admis</h3>
|
||||
|
||||
<div id="chart-mentions">
|
||||
<table class="charts-css column show-labels show-primary-axis show-4-secondary-axes data-spacing-10">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Mention</th>
|
||||
<th scope="col">Pourcentage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Sans</th>
|
||||
<td style="--size: { safe(props.formation.pctSansMention) }; --color: #94a3b8;">
|
||||
<span class="data">{ props.formation.pctSansMention || 0 }%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">AB</th>
|
||||
<td style="--size: { safe(props.formation.pctAB) }; --color: #60a5fa;">
|
||||
<span class="data">{ props.formation.pctAB || 0 }%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Bien</th>
|
||||
<td style="--size: { safe(props.formation.pctB) }; --color: #34d399;">
|
||||
<span class="data">{ props.formation.pctB || 0 }%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">TB</th>
|
||||
<td style="--size: { safe(props.formation.pctTB) }; --color: #fbbf24;">
|
||||
<span class="data">{ props.formation.pctTB || 0 }%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">TB Féli.</th>
|
||||
<td style="--size: { safe(props.formation.pctTBF) }; --color: #f472b6;">
|
||||
<span class="data">{ props.formation.pctTBF || 0 }%</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="chart-mentions" ref="chartMentions"></div>
|
||||
</div>
|
||||
|
||||
<!-- Graphique 3 : Profil sociologique (barres horizontales, pleine largeur) -->
|
||||
<div class="chart-wrapper chart-full">
|
||||
<h3>Profil sociologique</h3>
|
||||
<div id="chart-profil" ref="chartProfil"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="chart-profil">
|
||||
<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">Pourcentage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Femmes</th>
|
||||
<td style="--size: { safe(props.formation.pctFemmes) }; --color: #a78bfa;">
|
||||
<span class="data">{ props.formation.pctFemmes || 0 }%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Boursiers</th>
|
||||
<td style="--size: { safe(props.formation.pctBoursiers) }; --color: #fb923c;">
|
||||
<span class="data">{ props.formation.pctBoursiers || 0 }%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Néo-bac</th>
|
||||
<td style="--size: { safe(props.formation.pctNeoBac) }; --color: #2dd4bf;">
|
||||
<span class="data">{ props.formation.pctNeoBac || 0 }%</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- ===================== ÉVOLUTION HISTORIQUE ===================== -->
|
||||
|
||||
<h2 class="charts-heading">Évolution depuis 2020</h2>
|
||||
|
||||
<div if={ state.loadingHistory } class="message">
|
||||
Chargement de l'historique...
|
||||
</div>
|
||||
|
||||
<div if={ !state.loadingHistory && state.history.length === 0 } class="message">
|
||||
Aucune donnée historique disponible pour cette formation.
|
||||
</div>
|
||||
|
||||
<div class="charts-section" if={ state.history.length > 0 }>
|
||||
<div class="chart-wrapper">
|
||||
<h3>Taux d'accès par année</h3>
|
||||
<div id="chart-evolution-taux" ref="chartTaux"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrapper">
|
||||
<h3>Nombre de candidats et admis</h3>
|
||||
<div id="chart-evolution-candidats" ref="chartCandidats"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrapper chart-full">
|
||||
<h3>Évolution des mentions au bac</h3>
|
||||
<div ref="chartMentionsHist"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick={ () => props.onback() } class="btn-retour">Retour à la liste</button>
|
||||
@@ -281,12 +196,191 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
state: {
|
||||
history: [],
|
||||
loadingHistory: false
|
||||
},
|
||||
|
||||
safe(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
|
||||
},
|
||||
|
||||
onMounted() {
|
||||
this.renderCharts()
|
||||
this.loadHistory()
|
||||
},
|
||||
|
||||
onUpdated() {
|
||||
this.renderCharts()
|
||||
if (this.state.history.length > 0) {
|
||||
this.renderHistoryCharts()
|
||||
}
|
||||
},
|
||||
|
||||
renderCharts() {
|
||||
var f = this.props.formation
|
||||
if (!f) return
|
||||
|
||||
var chartBac = this.$('[ref="chartBac"]')
|
||||
var chartMentions = this.$('[ref="chartMentions"]')
|
||||
var chartProfil = this.$('[ref="chartProfil"]')
|
||||
|
||||
if (chartBac) {
|
||||
chartBac.innerHTML = this.buildColumnChart([
|
||||
{ label: 'Général', value: f.pctGeneral, color: '#3d7fff' },
|
||||
{ label: 'Techno', value: f.pctTechno, color: '#f59e0b' },
|
||||
{ label: 'Pro', value: f.pctPro, color: '#10b981' }
|
||||
])
|
||||
}
|
||||
|
||||
if (chartMentions) {
|
||||
chartMentions.innerHTML = this.buildColumnChart([
|
||||
{ label: 'Sans', value: f.pctSansMention, color: '#94a3b8' },
|
||||
{ label: 'AB', value: f.pctAB, color: '#60a5fa' },
|
||||
{ label: 'Bien', value: f.pctB, color: '#34d399' },
|
||||
{ label: 'TB', value: f.pctTB, color: '#fbbf24' },
|
||||
{ label: 'TB Féli.', value: f.pctTBF, color: '#f472b6' }
|
||||
])
|
||||
}
|
||||
|
||||
if (chartProfil) {
|
||||
chartProfil.innerHTML = this.buildBarChart([
|
||||
{ label: 'Femmes', value: f.pctFemmes, color: '#a78bfa' },
|
||||
{ label: 'Boursiers', value: f.pctBoursiers, color: '#fb923c' },
|
||||
{ label: 'Néo-bac', value: f.pctNeoBac, color: '#2dd4bf' }
|
||||
])
|
||||
}
|
||||
},
|
||||
|
||||
async loadHistory() {
|
||||
var f = this.props.formation
|
||||
if (!f) return
|
||||
|
||||
// Extraire le cod_uai de l'id (format: codUai-nomFormation)
|
||||
var codUai = f.id.split('-')[0]
|
||||
|
||||
if (!codUai || !window.fetchFormationHistory) return
|
||||
|
||||
this.update({ loadingHistory: true })
|
||||
|
||||
try {
|
||||
var history = await window.fetchFormationHistory(codUai, f.nom)
|
||||
this.update({ history: history, loadingHistory: false })
|
||||
} catch (e) {
|
||||
console.error('Erreur historique:', e)
|
||||
this.update({ history: [], loadingHistory: false })
|
||||
}
|
||||
},
|
||||
|
||||
renderHistoryCharts() {
|
||||
var hist = this.state.history
|
||||
if (!hist || hist.length === 0) return
|
||||
|
||||
var chartTaux = this.$('[ref="chartTaux"]')
|
||||
var chartCandidats = this.$('[ref="chartCandidats"]')
|
||||
var chartMentionsHist = this.$('[ref="chartMentionsHist"]')
|
||||
|
||||
// Graphique : taux d'accès par année
|
||||
if (chartTaux) {
|
||||
var items = []
|
||||
for (var i = 0; i < hist.length; i++) {
|
||||
items.push({
|
||||
label: '' + hist[i].annee,
|
||||
value: hist[i].tauxAcces,
|
||||
color: '#1a936f'
|
||||
})
|
||||
}
|
||||
chartTaux.innerHTML = this.buildColumnChart(items)
|
||||
}
|
||||
|
||||
// Graphique : candidats vs admis (normalisé sur le max)
|
||||
if (chartCandidats) {
|
||||
var maxCandidats = 0
|
||||
for (var i = 0; i < hist.length; i++) {
|
||||
if (hist[i].candidats > maxCandidats) maxCandidats = hist[i].candidats
|
||||
}
|
||||
|
||||
var rows = ''
|
||||
for (var i = 0; i < hist.length; i++) {
|
||||
var h = hist[i]
|
||||
var sizeCand = maxCandidats > 0 ? Math.round((h.candidats / maxCandidats) * 100) / 100 : 0
|
||||
var sizeAdmis = maxCandidats > 0 ? Math.round((h.admis / maxCandidats) * 100) / 100 : 0
|
||||
|
||||
rows += '<tr>'
|
||||
rows += '<th scope="row">' + h.annee + '</th>'
|
||||
rows += '<td style="--size: ' + sizeCand + '; --color: #2a5298;">'
|
||||
rows += '<span class="data">' + h.candidats + '</span></td>'
|
||||
rows += '<td style="--size: ' + sizeAdmis + '; --color: #1a936f;">'
|
||||
rows += '<span class="data">' + h.admis + '</span></td>'
|
||||
rows += '</tr>'
|
||||
}
|
||||
|
||||
chartCandidats.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>' + rows + '</tbody></table>'
|
||||
}
|
||||
|
||||
// Tableau : évolution des mentions
|
||||
if (chartMentionsHist) {
|
||||
var table = '<table class="detail-table">'
|
||||
table += '<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>'
|
||||
table += '<tbody>'
|
||||
|
||||
for (var i = 0; i < hist.length; i++) {
|
||||
var h = hist[i]
|
||||
table += '<tr>'
|
||||
table += '<td><b>' + h.annee + '</b></td>'
|
||||
table += '<td>' + h.pctSansMention + '%</td>'
|
||||
table += '<td>' + h.pctAB + '%</td>'
|
||||
table += '<td>' + h.pctB + '%</td>'
|
||||
table += '<td>' + h.pctTB + '%</td>'
|
||||
table += '<td>' + h.pctTBF + '%</td>'
|
||||
table += '</tr>'
|
||||
}
|
||||
|
||||
table += '</tbody></table>'
|
||||
chartMentionsHist.innerHTML = table
|
||||
}
|
||||
},
|
||||
|
||||
buildColumnChart(items) {
|
||||
var rows = ''
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var item = items[i]
|
||||
var val = this.safe(item.value)
|
||||
var display = item.value || 0
|
||||
rows += '<tr>'
|
||||
rows += '<th scope="row">' + item.label + '</th>'
|
||||
rows += '<td style="--size: ' + val + '; --color: ' + item.color + ';">'
|
||||
rows += '<span class="data">' + display + '%</span>'
|
||||
rows += '</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>' + rows + '</tbody></table>'
|
||||
},
|
||||
|
||||
buildBarChart(items) {
|
||||
var rows = ''
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var item = items[i]
|
||||
var val = this.safe(item.value)
|
||||
var display = item.value || 0
|
||||
rows += '<tr>'
|
||||
rows += '<th scope="row">' + item.label + '</th>'
|
||||
rows += '<td style="--size: ' + val + '; --color: ' + item.color + ';">'
|
||||
rows += '<span class="data">' + display + '%</span>'
|
||||
rows += '</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>' + rows + '</tbody></table>'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<script>
|
||||
export default {
|
||||
onMounted() {
|
||||
const mapElement = this.$('div[ref="map"]')
|
||||
var mapElement = this.$('div[ref="map"]')
|
||||
|
||||
this.map = L.map(mapElement).setView([46.8, 2.5], 6)
|
||||
|
||||
@@ -16,21 +16,37 @@
|
||||
}).addTo(this.map)
|
||||
|
||||
this.markersLayer = L.layerGroup().addTo(this.map)
|
||||
this.markersById = {}
|
||||
this.refreshMarkers()
|
||||
|
||||
// important : Leaflet calcule parfois mal la taille au montage
|
||||
setTimeout(() => {
|
||||
this.map.invalidateSize()
|
||||
}, 100)
|
||||
var self = this
|
||||
|
||||
setTimeout(function() {
|
||||
if (self.map) self.map.invalidateSize()
|
||||
}, 200)
|
||||
|
||||
setTimeout(function() {
|
||||
if (self.map) self.map.invalidateSize()
|
||||
}, 500)
|
||||
|
||||
window.mapFocus = function(id) {
|
||||
self.focusFormation(id)
|
||||
}
|
||||
},
|
||||
|
||||
onUpdated() {
|
||||
this.refreshMarkers()
|
||||
|
||||
var self = this
|
||||
|
||||
if (this.map) {
|
||||
setTimeout(() => {
|
||||
this.map.invalidateSize()
|
||||
}, 50)
|
||||
setTimeout(function() {
|
||||
self.map.invalidateSize()
|
||||
}, 100)
|
||||
|
||||
setTimeout(function() {
|
||||
self.map.invalidateSize()
|
||||
}, 300)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -39,6 +55,7 @@
|
||||
this.map.remove()
|
||||
this.map = null
|
||||
}
|
||||
window.mapFocus = null
|
||||
},
|
||||
|
||||
refreshMarkers() {
|
||||
@@ -47,18 +64,20 @@
|
||||
}
|
||||
|
||||
this.markersLayer.clearLayers()
|
||||
this.markersById = {}
|
||||
|
||||
const points = []
|
||||
const results = this.props.results || []
|
||||
var points = []
|
||||
var results = this.props.results || []
|
||||
|
||||
for (let i = 0; i < results.length; i++) {
|
||||
const f = results[i]
|
||||
for (var i = 0; i < results.length; i++) {
|
||||
var f = results[i]
|
||||
|
||||
if (f.latitude != null && f.longitude != null) {
|
||||
const marker = L.marker([f.latitude, f.longitude])
|
||||
marker.bindPopup(`<b>${f.nom}</b><br>${f.ville}`)
|
||||
var marker = L.marker([f.latitude, f.longitude])
|
||||
marker.bindPopup('<b>' + f.nom + '</b><br>' + f.ville)
|
||||
marker.addTo(this.markersLayer)
|
||||
|
||||
this.markersById[f.id] = marker
|
||||
points.push([f.latitude, f.longitude])
|
||||
}
|
||||
}
|
||||
@@ -68,7 +87,26 @@
|
||||
} else {
|
||||
this.map.setView([46.8, 2.5], 6)
|
||||
}
|
||||
},
|
||||
|
||||
focusFormation(id) {
|
||||
var marker = this.markersById[id]
|
||||
|
||||
if (marker && this.map) {
|
||||
var mapEl = this.$('div[ref="map"]')
|
||||
if (mapEl) {
|
||||
mapEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
}
|
||||
|
||||
var self = this
|
||||
|
||||
setTimeout(function() {
|
||||
self.map.invalidateSize()
|
||||
self.map.setView(marker.getLatLng(), 13, { animate: true })
|
||||
marker.openPopup()
|
||||
}, 400)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</map-view>
|
||||
</map-view>
|
||||
|
||||
@@ -17,6 +17,17 @@
|
||||
|
||||
<button onclick={ () => props.ondetail(i) }>Voir détail</button>
|
||||
<button onclick={ () => props.onselect(i) }>Ajouter à la sélection</button>
|
||||
<button onclick={ () => locateOnMap(f) } if={ f.latitude != null }>Localiser</button>
|
||||
</div>
|
||||
</div>
|
||||
</result-list>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
locateOnMap(f) {
|
||||
if (window.mapFocus) {
|
||||
window.mapFocus(f.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</result-list>
|
||||
|
||||
@@ -2,26 +2,133 @@
|
||||
<div class="search-bar">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ex : BUT informatique"
|
||||
placeholder="Ex : BUT informatique, Licence droit..."
|
||||
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.showFilters ? 'Masquer les filtres' : 'Filtres avancés' }
|
||||
</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="BTS Agricole">BTS Agricole</option>
|
||||
<option value="DN MADE">DN MADE</option>
|
||||
<option value="DCG">DCG</option>
|
||||
<option value="Ecole de Commerce">École de Commerce</option>
|
||||
<option value="Ecole d'Ingénieurs">École d'Ingénieurs</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: ''
|
||||
query: '',
|
||||
showFilters: false,
|
||||
filiere: '',
|
||||
selectivite: '',
|
||||
region: '',
|
||||
tauxMin: 0,
|
||||
tauxMax: 100
|
||||
},
|
||||
|
||||
updateQuery(e) {
|
||||
this.update({ query: e.target.value })
|
||||
},
|
||||
|
||||
handleKey(e) {
|
||||
if (e.key === 'Enter') {
|
||||
this.submitSearch()
|
||||
}
|
||||
},
|
||||
|
||||
toggleFilters() {
|
||||
this.update({ showFilters: !this.state.showFilters })
|
||||
},
|
||||
|
||||
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() {
|
||||
this.props.onsearch(this.state.query)
|
||||
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)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</search-bar>
|
||||
</search-bar>
|
||||
|
||||
Reference in New Issue
Block a user