diff --git a/src/components/global/api/Controller.js b/src/components/global/api/Controller.js index 98ff0f4..39f79d5 100644 --- a/src/components/global/api/Controller.js +++ b/src/components/global/api/Controller.js @@ -88,6 +88,8 @@ export default class Controller { this.view.renderStat(await data) this.view.renderEtab(await data, `${ this.model.getPath()[1] } - ${ this.model.getPath()[2] }`) this.view.renderPath(this.model.getPath()) + + this.model.getMapLink().then((res) => this.view.renderMap(res)) } else { log("Selector->Controller", "Numero de page inconnue") } diff --git a/src/components/global/api/Model.js b/src/components/global/api/Model.js index 31c397d..3af9878 100644 --- a/src/components/global/api/Model.js +++ b/src/components/global/api/Model.js @@ -2,9 +2,12 @@ import log from "./log" export default class Model { constructor() { + localStorage.clear() + this.state = { api: { link: "https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&sort=tri", + maplink: "https://data.enseignementsup-recherche.gouv.fr/explore/embed/dataset/fr-esr-parcoursup/map/?timezone=Europe%2FBerlin&sort=tri", facet: { filiaire: "fili", formation: "form_lib_voe_acc", @@ -122,6 +125,10 @@ export default class Model { .then((res) => res.json()) .then((data) => { if(data) { + data.facet_groups[0].facets.forEach((e) => { + e.canDisplay = true + }) + localStorage.setItem(`sec0`, JSON.stringify(data.facet_groups[0].facets)) return data.facet_groups[0].facets } else { @@ -151,6 +158,10 @@ export default class Model { .then((res) => res.json()) .then((data) => { if(data) { + data.facet_groups[1].facets.forEach((e) => { + e.canDisplay = true + }) + localStorage.setItem(`sec1-${this.state.page.cat}`, JSON.stringify(data.facet_groups[1].facets)) return data.facet_groups[1].facets } else { @@ -171,18 +182,33 @@ export default class Model { * */ getModelData2() { if(!localStorage.getItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`)) { - const link = `${this.state.api.link}&rows=0` + + let link = `${this.state.api.link}&rows=0` + `&facet=${encodeURIComponent(this.state.api.facet.filiaire)}` + `&facet=${encodeURIComponent(this.state.api.facet.formation)}` + `&facet=${encodeURIComponent(this.state.api.facet.spec)}` + `&refine.${encodeURIComponent(this.state.api.facet.filiaire)}=${encodeURIComponent(this.state.page.cat)}` + `&refine.${encodeURIComponent(this.state.api.facet.formation)}=${encodeURIComponent(this.state.page.scat)}` + /** + * TODO: (Bilal prends la responsabilite de ce massacre) + * */ + if(this.state.page.scat === "Formations des écoles d'ingénieurs") { + link = `${this.state.api.link}&rows=0` + + `&facet=${encodeURIComponent(this.state.api.facet.filiaire)}` + + `&facet=${encodeURIComponent(this.state.api.facet.formation)}` + + `&facet=${encodeURIComponent(this.state.api.facet.spec)}` + + `&refine.fili=Ecole%20d%27Ingénieur&refine.form_lib_voe_acc=Formations%20%20des%20écoles%20d%27ingénieurs` + } + return fetch(link) .then((res) => res.json()) .then((data) => { try { if(data) { + data.facet_groups[2].facets.forEach((e) => { + e.canDisplay = true + }) + localStorage.setItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`, JSON.stringify(data.facet_groups[2].facets)) return data.facet_groups[2].facets } @@ -204,7 +230,7 @@ export default class Model { if(!localStorage.getItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`) || localStorage.getItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`) === "[]" ) { - const link = `${this.state.api.link}&rows=10000` + + let link = `${this.state.api.link}&rows=10000` + `&facet=${encodeURIComponent(this.state.api.facet.filiaire)}` + `&facet=${encodeURIComponent(this.state.api.facet.formation)}` + `&facet=${encodeURIComponent(this.state.api.facet.spec)}` + @@ -212,6 +238,15 @@ export default class Model { `&refine.${encodeURIComponent(this.state.api.facet.formation)}=${encodeURIComponent(this.state.page.scat)}` + `&refine.${encodeURIComponent(this.state.api.facet.spec)}=${encodeURIComponent(this.state.page.tcat)}` + /** + * TODO: (Bilal prends la responsabilite de ce massacre) + * */ + if(this.state.page.tcat === "Formation d'ingénieur Bac + 5") { + link = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&sort=tri&rows=10000&facet=fili&facet=form_lib_voe_acc&facet=fil_lib_voe_acc&refine.fili=Ecole%20d%27Ing%C3%A9nieur&refine.form_lib_voe_acc=Formations%20%20des%20%C3%A9coles%20d%27ing%C3%A9nieurs&refine.fil_lib_voe_acc=Formation%20d%27ing%C3%A9nieur%20Bac%20%2B%205` + } else if(this.state.page.tcat === "Formation Bac + 3") { + link = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&sort=tri&rows=10000&facet=fili&facet=form_lib_voe_acc&facet=fil_lib_voe_acc&refine.fili=Ecole%20d%27Ing%C3%A9nieur&refine.form_lib_voe_acc=Formations%20%20des%20%C3%A9coles%20d%27ing%C3%A9nieurs&refine.fil_lib_voe_acc=Formation%20Bac%20%2B%203` + } + return fetch(link) .then((res) => { return res.json() @@ -219,11 +254,14 @@ export default class Model { .then((data) => { try { if(data) { + data.records.forEach((e) => { + e.canDisplay = true + }) + if(this.state.page.tcat) { localStorage.setItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`, JSON.stringify(data.records)) } - this.state.page.tcat = null return data.records } } catch(donothing) {} @@ -237,4 +275,23 @@ export default class Model { console.error(e) } } + + /** + * Recuperer le lien vers la map + * @return { promise } Le lien de la map + * */ + getMapLink() { + const link = `${this.state.api.maplink}` + + `&facet=${encodeURIComponent(this.state.api.facet.filiaire)}` + + `&facet=${encodeURIComponent(this.state.api.facet.formation)}` + + `&facet=${encodeURIComponent(this.state.api.facet.spec)}` + + `&refine.${encodeURIComponent(this.state.api.facet.filiaire)}=${encodeURIComponent(this.state.page.cat)}` + + `&refine.${encodeURIComponent(this.state.api.facet.formation)}=${encodeURIComponent(this.state.page.scat)}` + + `&refine.${encodeURIComponent(this.state.api.facet.spec)}=${encodeURIComponent(this.state.page.tcat)}` + + `&location=6,48.04137,1.74683&basemap=e69ab1` + + return new Promise((resolve, reject) => { + resolve(link) + }) + } } \ No newline at end of file diff --git a/src/components/global/api/View.js b/src/components/global/api/View.js index 6cdd0b3..c90578b 100644 --- a/src/components/global/api/View.js +++ b/src/components/global/api/View.js @@ -12,10 +12,23 @@ export default class View { this.home = document.getElementById("home") this.left = document.getElementById("left") this.right = document.getElementById("right") + this.input = document.getElementById("selector-list-input-search") + this.inputEtab = document.getElementById("etablanalytics-search") + this.map = document.getElementById("etablanalytics-map-container") + this.titleStorage = null + this.dataStorage = null this.antispam = null this.inAction = false + this.input.addEventListener("input", (e) => { + this.filterMenu(e.target.value) + }) + + this.inputEtab.addEventListener("input", (e) => { + this.filterEtab(e.target.value) + }) + this.btn.onclick = () => { this.updateMenu(" ", "previous") } @@ -23,6 +36,29 @@ export default class View { log("Selector", "View 1/3") } + /** + * Utile pour filtrer le tableau de resultat qui concerne le menu + * @param { string } filter La saisie dans le input + * */ + filterMenu(filter) { + this.dataStorage.forEach((e) => { + e.canDisplay = e.name.toLowerCase().includes(filter.toLowerCase()); + }) + + this.renderMenu(this.titleStorage, this.dataStorage) + } + + /** + * Utile pour filtrer le tableau de resultat qui concerne les etablissements + * */ + filterEtab(filter) { + this.dataStorage.forEach((e) => { + e.canDisplay = e.fields.g_ea_lib_vx.toLowerCase().includes(filter.toLowerCase()); + }) + + this.renderEtab(this.dataStorage, this.formStorage) + } + /** * Contruction de la balise
  • qui vas se loger dans le menu. * Si l'utilisateur spam clique, ca annule l'action (ce qui peut empecher les crashs) @@ -33,9 +69,13 @@ export default class View { this.title.innerText = title this.zone.innerHTML = "" + this.dataStorage = data + this.titleStorage = title + if(title || data) { data.forEach((e) => { let elem = document.createElement("selectorfragment") + elem.onclick = () => { if(this.antispam === null) { this.antispam = setTimeout(() => { @@ -52,7 +92,8 @@ export default class View { riot.mount(elem, { name: e.name, count: e.count, - idd: `menu0-${e.name}` + idd: `menu0-${e.name}`, + display: e.canDisplay }, "selectorfragment") this.zone.appendChild(elem) @@ -87,6 +128,9 @@ export default class View { * @param { string } form * */ renderEtab(data, form) { + this.formStorage = form + this.dataStorage = data + this.etab.innerHTML = "" + " Nom" + @@ -97,123 +141,141 @@ export default class View { "" data.forEach((e) => { - let etab = e.fields.g_ea_lib_vx - let dept = `${e.fields.dep_lib} (${e.fields.dep})` - let city = e.fields.ville_etab - let moy = "?" - let selection = e.fields.taux_acces_ens - let acad = e.fields.acad_mies - let type = e.fields.contrat_etab - let capacity = e.fields.capa_fin - let admishorsacad = e.fields.pct_aca_orig - let voeuxtotal = e.fields.voe_tot + if(e.canDisplay) { + let etab = e.fields.g_ea_lib_vx + let dept = `${e.fields.dep_lib} (${e.fields.dep})` + let city = e.fields.ville_etab + let moy = "?" + let selection = e.fields.taux_acces_ens + let acad = e.fields.acad_mies + let type = e.fields.contrat_etab + let capacity = e.fields.capa_fin + let admishorsacad = e.fields.pct_aca_orig + let voeuxtotal = e.fields.voe_tot - let woman = `${ Math.round(100 * e.fields.acc_tot_f / e.fields.acc_tot) }%` - let man = `${ Math.round(100 * (e.fields.acc_tot - e.fields.acc_tot_f) / e.fields.acc_tot) }%` + let woman = `${ Math.round(100 * e.fields.acc_tot_f / e.fields.acc_tot) }%` + let man = `${ Math.round(100 * (e.fields.acc_tot - e.fields.acc_tot_f) / e.fields.acc_tot) }%` - let totbac = Math.round(e.fields.acc_bg + e.fields.acc_bp + e.fields.acc_bt + e.fields.acc_at) - let gen = `${ Math.round(100 * e.fields.acc_bg / totbac) }%` - let pro = `${ Math.round(100 * e.fields.acc_bp / totbac) }%` - let tech = `${ Math.round(100 * e.fields.acc_bt / totbac) }%` - let autre = `${ Math.round(100 * e.fields.acc_at / totbac) }%` + let totbac = Math.round(e.fields.acc_bg + e.fields.acc_bp + e.fields.acc_bt + e.fields.acc_at) + let gen = `${ Math.round(100 * e.fields.acc_bg / totbac) }%` + let pro = `${ Math.round(100 * e.fields.acc_bp / totbac) }%` + let tech = `${ Math.round(100 * e.fields.acc_bt / totbac) }%` + let autre = `${ Math.round(100 * e.fields.acc_at / totbac) }%` - let tot = e.fields.acc_sansmention + e.fields.acc_ab + e.fields.acc_b + e.fields.acc_tb + e.fields.acc_tbf - let p = `${ Math.round(100 * e.fields.acc_sansmention / tot) }%` - let ab = `${ Math.round(100 * e.fields.acc_ab / tot) }%` - let b = `${ Math.round(100 * e.fields.acc_b / tot) }%` - let tb = `${ Math.round(100 * e.fields.acc_tb / tot) }%` - let tbf = `${ Math.round(100 * e.fields.acc_tbf / tot) }%` + let tot = e.fields.acc_sansmention + e.fields.acc_ab + e.fields.acc_b + e.fields.acc_tb + e.fields.acc_tbf + let p = `${ Math.round(100 * e.fields.acc_sansmention / tot) }%` + let ab = `${ Math.round(100 * e.fields.acc_ab / tot) }%` + let b = `${ Math.round(100 * e.fields.acc_b / tot) }%` + let tb = `${ Math.round(100 * e.fields.acc_tb / tot) }%` + let tbf = `${ Math.round(100 * e.fields.acc_tbf / tot) }%` - /** - * TODO: Transformer ca en composant riot (GALERE MAX pour faire des ) - * */ - let tr = document.createElement("tr") + /** + * TODO: Transformer ca en composant riot (GALERE MAX pour faire des ) + * */ + let tr = document.createElement("tr") - let td1 = document.createElement("td") - td1.innerText = etab + let td1 = document.createElement("td") + td1.innerText = etab - let td2 = document.createElement("td") - td2.innerText = city + let td2 = document.createElement("td") + td2.innerText = city - let td3 = document.createElement("td") - td3.innerText = dept + let td3 = document.createElement("td") + td3.innerText = dept - let td4 = document.createElement("td") - td4.innerText = moy + let td4 = document.createElement("td") + td4.innerText = moy - let td5 = document.createElement("td") - td5.innerText = `(${selection}%)` - td5.style.display = "flex" - td5.style.gap = "1vw" + let td5 = document.createElement("td") + td5.innerText = `(${selection}%)` + td5.style.display = "flex" + td5.style.gap = "1vw" - let progresstd5 = document.createElement("progress") - progresstd5.setAttribute("max", "100") - progresstd5.setAttribute("value", `${selection}`) - td5.appendChild(progresstd5) + let progresstd5 = document.createElement("progress") + progresstd5.setAttribute("max", "100") + progresstd5.setAttribute("value", `${selection}`) + td5.appendChild(progresstd5) - tr.appendChild(td1) - tr.appendChild(td2) - tr.appendChild(td3) - tr.appendChild(td4) - tr.appendChild(td5) + tr.appendChild(td1) + tr.appendChild(td2) + tr.appendChild(td3) + tr.appendChild(td4) + tr.appendChild(td5) - tr.onclick = () => { - this.left.style.filter = "blur(15px)" - this.right.style.filter = "blur(15px)" + tr.onclick = () => { + this.left.style.filter = "blur(15px)" + this.right.style.filter = "blur(15px)" - let modal = document.createElement("modal") + let modal = document.createElement("modal") - const close = () => { - riot.unmount(modal, false) - this.left.style.filter = "none" - this.right.style.filter = "none" + const close = () => { + riot.unmount(modal, false) + this.left.style.filter = "none" + this.right.style.filter = "none" + } + + riot.mount(modal, { + close : close, + etabname: etab, + formation: form, + city: city, + acad: acad, + type: type, + capacity: capacity, + wish: voeuxtotal, + nhacad: Math.round(100 - admishorsacad), + + manPercent: man, + womanPercent: woman, + hstyle: `width: ${parseInt(man.split("%")[0]) > 10 ? man : `23%`};`, + fstyle: `width: ${parseInt(woman.split("%")[0]) > 10 ? woman : `23%`};`, + + nbacgen: gen, + genstyle: `width: ${parseInt(gen.split("%")[0]) > 10 ? gen : `23%`};`, + nbacpro: pro, + prostyle: `width: ${parseInt(pro.split("%")[0]) > 10 ? pro : `23%`};`, + nbactech: tech, + techstyle: `width: ${parseInt(tech.split("%")[0]) > 10 ? tech : `23%`};`, + nbacautre: autre, + autrestyle: `width: ${parseInt(autre.split("%")[0]) > 10 ? autre : `23%`};`, + + nmentionp: p, + pstyle: `width: ${parseInt(p.split("%")[0]) > 10 ? autre : `23%`};`, + nmentionab: ab, + abstyle: `width: ${parseInt(ab.split("%")[0]) > 10 ? autre : `23%`};`, + nmentionb: b, + bstyle: `width: ${parseInt(b.split("%")[0]) > 10 ? autre : `23%`};`, + nmentiontb: tb, + tbstyle: `width: ${parseInt(tb.split("%")[0]) > 10 ? autre : `23%`};`, + nmentiontbf: tbf, + tbfstyle: `width: ${parseInt(tbf.split("%")[0]) > 10 ? autre : `23%`};` + }, "modal") + + this.home.appendChild(modal) } - riot.mount(modal, { - close : close, - - etabname: etab, - formation: form, - city: city, - acad: acad, - type: type, - capacity: capacity, - wish: voeuxtotal, - nhacad: Math.round(100 - admishorsacad), - - manPercent: man, - womanPercent: woman, - hstyle: `width: ${parseInt(man.split("%")[0]) > 10 ? man : `23%`};`, - fstyle: `width: ${parseInt(woman.split("%")[0]) > 10 ? woman : `23%`};`, - - nbacgen: gen, - genstyle: `width: ${parseInt(gen.split("%")[0]) > 10 ? gen : `23%`};`, - nbacpro: pro, - prostyle: `width: ${parseInt(pro.split("%")[0]) > 10 ? pro : `23%`};`, - nbactech: tech, - techstyle: `width: ${parseInt(tech.split("%")[0]) > 10 ? tech : `23%`};`, - nbacautre: autre, - autrestyle: `width: ${parseInt(autre.split("%")[0]) > 10 ? autre : `23%`};`, - - nmentionp: p, - pstyle: `width: ${parseInt(p.split("%")[0]) > 10 ? autre : `23%`};`, - nmentionab: ab, - abstyle: `width: ${parseInt(ab.split("%")[0]) > 10 ? autre : `23%`};`, - nmentionb: b, - bstyle: `width: ${parseInt(b.split("%")[0]) > 10 ? autre : `23%`};`, - nmentiontb: tb, - tbstyle: `width: ${parseInt(tb.split("%")[0]) > 10 ? autre : `23%`};`, - nmentiontbf: tbf, - tbfstyle: `width: ${parseInt(tbf.split("%")[0]) > 10 ? autre : `23%`};` - }, "modal") - - this.home.appendChild(modal) + this.etab.appendChild(tr) } - - this.etab.appendChild(tr) }) } + /** + * Envoyer dans l'encadrer avec les etablissements la map tout en haut + * */ + renderMap(link) { + this.map.innerHTML = "" + + const nmap = document.createElement("map") + + console.log(link) + + riot.mount(nmap, { + link: link + }, "map") + + this.map.appendChild(nmap) + } + /** * Envoyer dans l'encadrer avec les stats les graphiques * @param { array[json] } data Les donnees pour calcule @@ -398,6 +460,8 @@ export default class View { * */ updateMenu(selection, direction) { if(direction) { + this.inputEtab.value = "" + this.input.value = "" window.updateModel(selection, direction) } else { log("Selector->View", "Mince, le menu ne veut pas se remplir :(") diff --git a/src/components/global/etablanalytics/etablanalytics.riot b/src/components/global/etablanalytics/etablanalytics.riot index c62c029..8047f30 100644 --- a/src/components/global/etablanalytics/etablanalytics.riot +++ b/src/components/global/etablanalytics/etablanalytics.riot @@ -2,10 +2,11 @@
    +
    + +
    + +
    + diff --git a/src/components/global/map/map.riot b/src/components/global/map/map.riot index b6c0a76..4908caf 100644 --- a/src/components/global/map/map.riot +++ b/src/components/global/map/map.riot @@ -1,8 +1,26 @@ - tg + +
    + +
    + +     \ No newline at end of file diff --git a/src/components/global/selector/selector.riot b/src/components/global/selector/selector.riot index ea4f488..3d72180 100644 --- a/src/components/global/selector/selector.riot +++ b/src/components/global/selector/selector.riot @@ -20,6 +20,12 @@ gap: 3%; } + #selector + #selector-list-container + #selector-list-input-search { + background: white; + } + #selector #selector-top-container #selector-top-btn { @@ -57,7 +63,7 @@
    - +
    + +
    diff --git a/src/components/global/selector/selectorfragment.riot b/src/components/global/selector/selectorfragment.riot index eacfe3f..2edfcdb 100644 --- a/src/components/global/selector/selectorfragment.riot +++ b/src/components/global/selector/selectorfragment.riot @@ -44,7 +44,7 @@ } -
  • +
  • { this.props.name } { this.props.count }
    • @@ -54,7 +54,8 @@ props: [ "name", "count", - "idd" + "idd", + "display" ] }
    Nom