105 lines
2.8 KiB
Plaintext
105 lines
2.8 KiB
Plaintext
|
<app>
|
||
|
|
<h1>Mini projet Parcoursup</h1>
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { fetchFormations } from './api.js'
|
||
|
|
import { createFormation } from './formation.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
state: {
|
||
|
|
query: '',
|
||
|
|
loading: false,
|
||
|
|
hasSearched: false,
|
||
|
|
results: [],
|
||
|
|
selected: null
|
||
|
|
},
|
||
|
|
|
||
|
|
updateQuery(e) {
|
||
|
|
this.update({ query: e.target.value })
|
||
|
|
},
|
||
|
|
|
||
|
|
async search() {
|
||
|
|
this.update({
|
||
|
|
loading: true,
|
||
|
|
hasSearched: true,
|
||
|
|
selected: null
|
||
|
|
})
|
||
|
|
|
||
|
|
try {
|
||
|
|
const data = await fetchFormations(this.state.query)
|
||
|
|
const formations = []
|
||
|
|
|
||
|
|
if (data.results) {
|
||
|
|
for (let i = 0; i < data.results.length; i++) {
|
||
|
|
formations.push(createFormation(data.results[i]))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
this.update({
|
||
|
|
results: formations,
|
||
|
|
loading: false
|
||
|
|
})
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error)
|
||
|
|
this.update({
|
||
|
|
results: [],
|
||
|
|
loading: false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
showDetail(index) {
|
||
|
|
this.update({
|
||
|
|
selected: this.state.results[index]
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
backToList() {
|
||
|
|
this.update({
|
||
|
|
selected: null
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</app>
|