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