$
This commit is contained in:
pro.boooooo
parent
e857bb23ea
commit
1db392b2ab
@ -1,12 +1,14 @@
|
||||
<selector>
|
||||
<style>
|
||||
#selector {
|
||||
width: 300px;
|
||||
width: 500px;
|
||||
height: auto;
|
||||
max-height: 700px;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 9px 1px black;
|
||||
background: #7A90A4;
|
||||
border-radius: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#selector
|
||||
@ -50,7 +52,7 @@
|
||||
|
||||
#selector
|
||||
#selector-list-container
|
||||
#selector-list
|
||||
.selector-list
|
||||
.selector-list-inner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -61,7 +63,7 @@
|
||||
|
||||
#selector
|
||||
#selector-list-container
|
||||
#selector-list
|
||||
.selector-list
|
||||
.selector-list-names {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
@ -71,7 +73,7 @@
|
||||
|
||||
#selector
|
||||
#selector-list-container
|
||||
#selector-list
|
||||
.selector-list
|
||||
.selector-list-names:hover {
|
||||
background: #344D59;
|
||||
cursor: pointer;
|
||||
@ -81,7 +83,7 @@
|
||||
|
||||
#selector
|
||||
#selector-list-container
|
||||
#selector-list
|
||||
.selector-list
|
||||
.selector-list-counts {
|
||||
color: white;
|
||||
background: green;
|
||||
@ -105,12 +107,8 @@
|
||||
* */
|
||||
state: {
|
||||
page: {
|
||||
curIndex: 0,
|
||||
cat: {
|
||||
option1: null, /* BTS, Licence etc... */
|
||||
option2: null, /* Service, Production etc... */
|
||||
option3: null /* Une ecole qui fait un BTS Prod par exemple */
|
||||
},
|
||||
curIndex: 0, // section n.0 -> n.2
|
||||
cat: null,
|
||||
name: [
|
||||
"formation",
|
||||
"filière de formation",
|
||||
@ -123,12 +121,21 @@
|
||||
/**
|
||||
* Retourner a la section n-1
|
||||
* */
|
||||
previousPage(){
|
||||
previousPage(event){
|
||||
try {
|
||||
console.log(this.state.page.cat.option1)
|
||||
if(this.state.page.curIndex-1 >= 0) {
|
||||
if(this.state.page.curIndex === 0) {
|
||||
this.debug("finish")
|
||||
} else if(this.state.page.curIndex === 1) {
|
||||
this.getDataSection0(this.state.page.cat)
|
||||
} else if(this.state.page.curIndex === 2) {
|
||||
this.getDataSection1(this.state.page.cat)
|
||||
}
|
||||
|
||||
if(this.state.page.curIndex !== 0) { // Sinon ca va aller trop loin a la section 2
|
||||
this.update({ curIndex: this.state.page.curIndex-- });
|
||||
}
|
||||
}
|
||||
} catch(e) {
|
||||
console.error(e)
|
||||
}
|
||||
@ -136,31 +143,38 @@
|
||||
|
||||
/**
|
||||
* Aller a la section n+1
|
||||
* @param choice Choix fait par l'utilisateur a la section n
|
||||
* @param event Choix fait par l'utilisateur a la section n
|
||||
* todo: Faire en sorte de refaire des calls api en fonction de la section choisit (this.getSpecFor(nom_formation:String) et this.getSpecPlusFor(nom_formation:String)
|
||||
* */
|
||||
nextPage(choice) {
|
||||
nextPage(event) {
|
||||
try {
|
||||
if(this.state.page.curIndex+1 <= 2 ) {
|
||||
if(this.state.page.curIndex+1 <= 3 ) {
|
||||
if(this.state.page.curIndex === 0) {
|
||||
this.update({ option1: "fsef", option2: "fefs", option3: "fe" })
|
||||
console.log(this.state.page.cat)
|
||||
} else if(this.state.page.curIndex+1 === 1) {
|
||||
this.update({ option2: choice })
|
||||
} else if(this.state.page.curIndex+1 === 2) {
|
||||
this.update({option3: choice})
|
||||
this.state.page.cat = `${ event.target.textContent }`
|
||||
this.getDataSection1(event.target.textContent)
|
||||
} else if(this.state.page.curIndex === 1) {
|
||||
this.getDataSection2(this.state.page.cat)
|
||||
} else if(this.state.page.curIndex === 2) {
|
||||
this.debug("finish")
|
||||
}
|
||||
|
||||
if(this.state.page.curIndex !== 2) { // Sinon ca va aller trop loin a la section 2
|
||||
this.update({ curIndex: this.state.page.curIndex++ });
|
||||
}
|
||||
}
|
||||
|
||||
this.debug(this.state.page.cat)
|
||||
} catch(e) {
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
|
||||
debug(mess) { console.log(mess) },
|
||||
|
||||
/**
|
||||
* Pour recuperer les données directement depuis l'API avec la facet: "fili"
|
||||
* */
|
||||
async getData() {
|
||||
async getDataSection0() {
|
||||
try {
|
||||
const api = "https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin";
|
||||
const response = await fetch(api);
|
||||
@ -171,8 +185,22 @@
|
||||
}
|
||||
},
|
||||
|
||||
async getDataSection1(fili) {
|
||||
const api = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&rows=0&sort=tri&facet=fili&facet=form_lib_voe_acc&facet=fil_lib_voe_acc&refine.fili=${ fili }&timezone=Europe%2FBerlin`
|
||||
const response = await fetch(api);
|
||||
const data = await response.json();
|
||||
this.update({ data: data.facet_groups[1].facets });
|
||||
},
|
||||
|
||||
async getDataSection2(spec) {
|
||||
const api = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&rows=0&sort=tri&facet=fili&facet=form_lib_voe_acc&facet=fil_lib_voe_acc&refine.fili=${ spec }&timezone=Europe%2FBerlin`
|
||||
const response = await fetch(api);
|
||||
const data = await response.json();
|
||||
this.update({ data: data.facet_groups[2].facets });
|
||||
},
|
||||
|
||||
onBeforeMount() {
|
||||
this.getData();
|
||||
this.getDataSection0();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -190,23 +218,30 @@
|
||||
|
||||
<button
|
||||
if={ this.state.page.curIndex > 0 }
|
||||
onclick={ previousPage }
|
||||
onclick={ this.previousPage }
|
||||
id="selector-top-btn">
|
||||
<
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="selector-list-container">
|
||||
<ul if={ this.state.page.curIndex === 0 } id="selector-list">
|
||||
<ul if={ this.state.page.curIndex === 0 } class="selector-list">
|
||||
<li each={ item in this.state.data } class="selector-list-inner">
|
||||
<a onclick={ () => { nextPage(item.name) } } class="selector-list-names">{ item.name }</a>
|
||||
<a onclick={ nextPage } class="selector-list-names">{ item.name }</a>
|
||||
<span class="selector-list-counts">{ item.count }</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul if={ this.state.page.curIndex === 1 }>
|
||||
<ul if={ this.state.page.curIndex === 1 } class="selector-list">
|
||||
<li each={ item in this.state.data } class="selector-list-inner">
|
||||
<a onclick={ () => { nextPage(item.name) } } class="selector-list-names">{ item.name }</a>
|
||||
<a onclick={ nextPage } class="selector-list-names">{ item.name }</a>
|
||||
<span class="selector-list-counts">{ item.count }</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul if={ this.state.page.curIndex === 2 } class="selector-list">
|
||||
<li each={ item in this.state.data } class="selector-list-inner">
|
||||
<a onclick={ nextPage } class="selector-list-names">{ item.name }</a>
|
||||
<span class="selector-list-counts">{ item.count }</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user