debut : ajout choix de la formation avec cache
This commit is contained in:
martins
commit
a47647e376
27
index.html
Normal file
27
index.html
Normal file
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<script src="./riot/suiviformation.riot" type="riot"></script>
|
||||
<script src="./riot/choixformation.riot" type="riot"></script>
|
||||
<script src="./riot/app.riot" type="riot"></script>
|
||||
<script src="./js/model.js" type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/7.1.0/riot+compiler.min.js" integrity="sha512-sSGKGR9MvL0bUx3CScaBb56crXwspwDkL/JnB0IrLFQfw3uvSUlITQtsTtDZctshhv5wdwIt+qZeN8zThRF4Dw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<title>S4WEB</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<app></app>
|
||||
<script>
|
||||
|
||||
riot.compile().then(() => {
|
||||
riot.mount('app', {})
|
||||
})
|
||||
|
||||
localStorage.clear()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
21
js/model.js
Normal file
21
js/model.js
Normal file
@ -0,0 +1,21 @@
|
||||
|
||||
|
||||
async function getFiliere(search){
|
||||
try {
|
||||
let xhr=new XMLHttpRequest();
|
||||
xhr.open("get", `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&sort=tri&facet=fili&timezone=Europe%2FBerlin&q=${search}`);
|
||||
xhr.responseType = "json";
|
||||
|
||||
xhr.onload=() =>{
|
||||
if(xhr.status == 200){
|
||||
resolbe(xhr.response)
|
||||
}else{
|
||||
PromiseRejectionEvent(xhr.statusText)
|
||||
}
|
||||
}
|
||||
|
||||
xhr.onerror= () => PromiseRejectionEvent("Erreur Reseau");
|
||||
return xhr.send();
|
||||
} catch (error){}
|
||||
return null;
|
||||
}
|
||||
18
riot/app.riot
Normal file
18
riot/app.riot
Normal file
@ -0,0 +1,18 @@
|
||||
<app>
|
||||
<choixformation isSelected={isSelected}></choixformation>
|
||||
<script>
|
||||
export default function todos() {
|
||||
return {
|
||||
onBeforeMount(props, state) {
|
||||
// initial state
|
||||
this.state = {
|
||||
};
|
||||
},
|
||||
isSelected(formation){
|
||||
console.log(formation +"is selected")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</app>
|
||||
211
riot/choixformation.riot
Normal file
211
riot/choixformation.riot
Normal file
@ -0,0 +1,211 @@
|
||||
<choixformation>
|
||||
<suiviformation formation={state.filiere} type={state.type} detail={state.detail} resetToDetail={resetToDetail} resetToFili={resetToFili} resetToType={resetToType}></suiviformation>
|
||||
|
||||
<div class="column is-4 m-5">
|
||||
<search-list start="start" label="Formation">
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="search" placeholder="Formation" id="input" oninput={search} if={!state.filiere}>
|
||||
<input class="input" type="search" placeholder="Formation" id="input" oninput={search} if={state.filiere && !state.type}>
|
||||
<input class="input" type="search" placeholder="Formation" id="input" oninput={search} if={state.filiere && state.type}>
|
||||
<span class="icon is-small is-left"><i class="fas fa-search"></i></span>
|
||||
</div>
|
||||
<my-list start="start" label="Formation">
|
||||
<div class="box m-3 scrollable">
|
||||
<div class="columns is-mobile is-vcentered">
|
||||
<div class="column p-1">
|
||||
<p class="menu-label is-unselectable" if={!state.filiere}>Filière</p>
|
||||
<p class="menu-label is-unselectable" if={state.filiere && !state.type}>Type de filière</p>
|
||||
<p class="menu-label is-unselectable" if={state.filiere && state.type}>choix de la formation</p>
|
||||
</div>
|
||||
<div class="column p-1"></div>
|
||||
</div>
|
||||
<ul class="menu-list">
|
||||
|
||||
<!--
|
||||
liste des filières:
|
||||
-->
|
||||
<div if={!state.filiere}>
|
||||
<li class="columns is-vcentered" each={item in state.find}>
|
||||
|
||||
<a if={item.name.includes(state.recherche)} class="column is-unselectable " style="transform: translateX(0px); opacity: 1;" onclick={changeFiliere} id={item.name}>
|
||||
{item.name}
|
||||
<span class="tag has-background-primary is-pulled-right has-text-white">
|
||||
{item.count}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
liste des type filières:
|
||||
-->
|
||||
<div if={state.filiere && !state.type}>
|
||||
<li class="columns is-vcentered" each={tipe in state.find}>
|
||||
<a if={tipe.name.includes(state.recherche)} class="column is-unselectable " style="transform: translateX(0px); opacity: 1;" onclick={changeType} id={tipe.name}>
|
||||
{tipe.name}
|
||||
<span class="tag has-background-primary is-pulled-right has-text-white">
|
||||
{tipe.count}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
liste du choix de la filière:
|
||||
-->
|
||||
<div if={state.filiere && state.type}>
|
||||
<li class="columns is-vcentered" each={item in state.find}>
|
||||
<a if={item.name.includes(state.recherche)} class="column is-unselectable " style="transform: translateX(0px); opacity: 1;" onclick={changeDetail} id={item.name}>
|
||||
{item.name}
|
||||
<span class="tag has-background-primary is-pulled-right has-text-white">
|
||||
{item.count}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</my-list>
|
||||
</search-list>
|
||||
</div>
|
||||
<script>
|
||||
export default function todos() {
|
||||
return {
|
||||
onBeforeMount(props, state) {
|
||||
// initial state
|
||||
this.state = {
|
||||
filiere: '',
|
||||
type: '',
|
||||
detail: '',
|
||||
find: '',
|
||||
recherche: ''
|
||||
};
|
||||
this.getFili();
|
||||
},
|
||||
|
||||
|
||||
async getFili() {
|
||||
if(!localStorage.getItem(`filiere`)){
|
||||
try {
|
||||
let rep = await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin`);
|
||||
rep = await rep.json();
|
||||
localStorage.setItem(`filiere`, JSON.stringify(rep["facet_groups"][0]["facets"]))
|
||||
this.update({
|
||||
find: rep["facet_groups"][0]["facets"]
|
||||
});
|
||||
} catch (error) {
|
||||
}
|
||||
}else{
|
||||
this.update({
|
||||
find: JSON.parse(localStorage.getItem(`filiere`))
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
async getType() {
|
||||
if(!localStorage.getItem(`${this.state.filiere}`)){
|
||||
try {
|
||||
|
||||
let rep = await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=form_lib_voe_acc&refine.fili=${this.state.filiere}&timezone=Europe%2FBerlin`);
|
||||
rep = await rep.json();
|
||||
localStorage.setItem(`${this.state.filiere}`, JSON.stringify(rep["facet_groups"][0]["facets"]))
|
||||
this.update({
|
||||
find: rep["facet_groups"][0]["facets"]
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
}
|
||||
}else{
|
||||
this.update({
|
||||
find: JSON.parse(localStorage.getItem(`${this.state.filiere}`))
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async getDetails() {
|
||||
if(!localStorage.getItem(`${this.state.type}`)){
|
||||
try {
|
||||
|
||||
let rep = await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${this.state.type}&timezone=Europe%2FBerlin`);
|
||||
rep = await rep.json();
|
||||
localStorage.setItem(`${this.state.type}`, JSON.stringify(rep["facet_groups"][0]["facets"]))
|
||||
this.update({
|
||||
find: rep["facet_groups"][0]["facets"]
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
}
|
||||
}else{
|
||||
this.update({
|
||||
find: JSON.parse(localStorage.getItem(`${this.state.type}`))
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
changeFiliere(e) {
|
||||
this.update({
|
||||
filiere: e.target.id,
|
||||
recherche: '',
|
||||
find: ''
|
||||
})
|
||||
this.getType();
|
||||
},
|
||||
|
||||
|
||||
changeType(e) {
|
||||
this.update({
|
||||
type: e.target.id,
|
||||
recherche: '',
|
||||
find: ''
|
||||
})
|
||||
this.getDetails()
|
||||
},
|
||||
|
||||
changeDetail(e){
|
||||
this.update({
|
||||
detail: e.target.id
|
||||
})
|
||||
this.props.isSelected(e.target.id)
|
||||
},
|
||||
|
||||
search(e){
|
||||
this.update({
|
||||
recherche: e.target.value
|
||||
})
|
||||
},
|
||||
|
||||
resetToFili(){
|
||||
this.update({
|
||||
recherche: '',
|
||||
filiere: '',
|
||||
type: '',
|
||||
detail: ''
|
||||
})
|
||||
this.getFili();
|
||||
},
|
||||
|
||||
resetToType(){
|
||||
this.update({
|
||||
recherche: '',
|
||||
detail: '',
|
||||
type: ''
|
||||
})
|
||||
this.getType()
|
||||
},
|
||||
|
||||
resetToDetail(){
|
||||
this.update({
|
||||
recherche: '',
|
||||
detail: ''
|
||||
})
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</choixformation>
|
||||
25
riot/suiviformation.riot
Normal file
25
riot/suiviformation.riot
Normal file
@ -0,0 +1,25 @@
|
||||
<suiviformation>
|
||||
<div class="content is-large" style="text-align: center;">
|
||||
|
||||
<h4 if={props.formation && !props.type}><a onclick={props.resetToFili}>{props.formation}</a></h4>
|
||||
<h4 if={props.formation && props.type && !props.detail}><a onclick={props.resetToFili}>{props.formation}</a> / <a onclick={props.resetToType}>{props.type}</a></h4>
|
||||
<h4 if={props.formation && props.type && props.detail}><a onclick={props.resetToFili}>{props.formation}</a> / <a onclick={props.resetToType}>{props.type}</a> / <a onclick={props.resetToDetail}>{props.detail}</a></h4>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default function todos(){
|
||||
return {
|
||||
onBeforeMount(props, state) {
|
||||
// initial state
|
||||
this.state = {
|
||||
formation: '',
|
||||
type: '',
|
||||
detail: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</suiviformation>
|
||||
Loading…
Reference in New Issue
Block a user