boudjeml/parcoursup
boudjeml/parcoursup
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

$

Browse Source
This commit is contained in:
pro.boooooo 2023-03-07 04:47:15 +01:00
parent e857bb23ea
commit 1db392b2ab
1 changed files with 66 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/global/selector/selector.riot
View File

@ -1,12 +1,14 @@
<selector> <selector>
<style> <style>
#selector { #selector {
width: 300px; width: 500px;
height: auto; height: auto;
max-height: 700px;
padding: 20px; padding: 20px;
box-shadow: 0px 0px 9px 1px black; box-shadow: 0px 0px 9px 1px black;
background: #7A90A4; background: #7A90A4;
border-radius: 10px; border-radius: 10px;
overflow: auto;
} }
#selector #selector
@ -50,7 +52,7 @@
#selector #selector
#selector-list-container #selector-list-container
#selector-list .selector-list
.selector-list-inner { .selector-list-inner {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -61,7 +63,7 @@
#selector #selector
#selector-list-container #selector-list-container
#selector-list .selector-list
.selector-list-names { .selector-list-names {
text-decoration: none; text-decoration: none;
color: white; color: white;
@ -71,7 +73,7 @@
#selector #selector
#selector-list-container #selector-list-container
#selector-list .selector-list
.selector-list-names:hover { .selector-list-names:hover {
background: #344D59; background: #344D59;
cursor: pointer; cursor: pointer;
@ -81,7 +83,7 @@
#selector #selector
#selector-list-container #selector-list-container
#selector-list .selector-list
.selector-list-counts { .selector-list-counts {
color: white; color: white;
background: green; background: green;
@ -105,12 +107,8 @@
* */ * */
state: { state: {
page: { page: {
curIndex: 0, curIndex: 0, // section n.0 -> n.2
cat: { cat: null,
option1: null, /* BTS, Licence etc... */
option2: null, /* Service, Production etc... */
option3: null /* Une ecole qui fait un BTS Prod par exemple */
},
name: [ name: [
"formation", "formation",
"filière de formation", "filière de formation",
@ -123,11 +121,20 @@
/** /**
* Retourner a la section n-1 * Retourner a la section n-1
* */ * */
previousPage(){ previousPage(event){
try { try {
console.log(this.state.page.cat.option1)
if(this.state.page.curIndex-1 >= 0) { if(this.state.page.curIndex-1 >= 0) {
this.update({ curIndex: this.state.page.curIndex-- }); 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) { } catch(e) {
console.error(e) console.error(e)
@ -136,31 +143,38 @@
/** /**
* Aller a la section n+1 * 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) * 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 { try {
if(this.state.page.curIndex+1 <= 2 ) { if(this.state.page.curIndex+1 <= 3 ) {
if(this.state.page.curIndex === 0) { if(this.state.page.curIndex === 0) {
this.update({ option1: "fsef", option2: "fefs", option3: "fe" }) this.state.page.cat = `${ event.target.textContent }`
console.log(this.state.page.cat) this.getDataSection1(event.target.textContent)
} else if(this.state.page.curIndex+1 === 1) { } else if(this.state.page.curIndex === 1) {
this.update({ option2: choice }) this.getDataSection2(this.state.page.cat)
} else if(this.state.page.curIndex+1 === 2) { } else if(this.state.page.curIndex === 2) {
this.update({option3: choice}) 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.update({ curIndex: this.state.page.curIndex++ });
} }
this.debug(this.state.page.cat)
} catch(e) { } catch(e) {
console.error(e) console.error(e)
} }
}, },
debug(mess) { console.log(mess) },
/** /**
* Pour recuperer les données directement depuis l'API avec la facet: "fili" * Pour recuperer les données directement depuis l'API avec la facet: "fili"
* */ * */
async getData() { async getDataSection0() {
try { 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 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); 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() { onBeforeMount() {
this.getData(); this.getDataSection0();
}, },
}; };
</script> </script>
@ -190,23 +218,30 @@
<button <button
if={ this.state.page.curIndex > 0 } if={ this.state.page.curIndex > 0 }
onclick={ previousPage } onclick={ this.previousPage }
id="selector-top-btn"> id="selector-top-btn">
&lt; &lt;
</button> </button>
</div> </div>
<div id="selector-list-container"> <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"> <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> <span class="selector-list-counts">{ item.count }</span>
</li> </li>
</ul> </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"> <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> <span class="selector-list-counts">{ item.count }</span>
</li> </li>
</ul> </ul>