$

src/components/global/api/Controller.js

@@ -8,6 +8,7 @@ export default class Controller {
     constructor(model, view) {
         this.model = model
         this.view = view
+        this.getData(0).then()
 
         /**
          * Envoyer dans le controlleur tous les events fait.
@@ -21,6 +22,9 @@ export default class Controller {
             } else if(this.model.getCurIndex() === 1) {
                 log("Selector->Controller",  "Ajout d'une section pour refine form_lib_voe_acc")
                 this.model.setSCat(selection)
+            } else if(this.model.getCurIndex() === 2) {
+                log("Selector->Controller",  "Ajout d'une section pour refine fil_lib_voe_acc")
+                this.model.setTCat(selection)
             }
 
             this.model.setPath(this.model.getCurIndex(), selection)
@@ -33,11 +37,14 @@ export default class Controller {
                 log("Selector->Controller",  "Action inconnue au bataillon (updateModel)")
             }
 
-            this.getData(this.model.getCurIndex()).then()
+            if(this.model.getTCat()) {
+                this.getData(3).then()
+            } else {
+                this.getData(this.model.getCurIndex()).then()
+            }
         }
 
         log("Selector",  "Controller 3/3")
-        this.getData(0).then()
     }
 
     /**
@@ -49,6 +56,7 @@ export default class Controller {
             this.model.getModelData0().then((res) => {
                 this.view.renderMenu(this.model.getTitle(), res)
             })
+            this.view.renderPath("")
         } else if(n === 1) {
             log("Selector->Controller",  "Requete Section 1")
             this.model.getModelData1().then((res) => {
@@ -59,6 +67,12 @@ export default class Controller {
             this.model.getModelData2().then((res) => {
                 this.view.renderMenu(this.model.getTitle(), res)
             })
+        } else if(n === 3) {
+            log("Selector->Controller",  "Requete de la liste des etablissements")
+            this.model.getModelData3().then((res) => {
+                console.log(res)
+                this.view.renderEtab(res)
+            })
         } else {
             log("Selector->Controller",  "Numero de page inconnue")
         }

src/components/global/api/Model.js

@@ -4,7 +4,7 @@ export default class Model {
     constructor() {
         this.state = {
             api: {
-                link: "https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&rows=0&sort=tri",
+                link: "https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&sort=tri",
                 facet: {
                     filiaire: "fili",
                     formation: "form_lib_voe_acc",
@@ -15,6 +15,7 @@ export default class Model {
                 curIndex: 0, /* section n.0 -> n.2. */
                 cat: null,
                 scat: null,
+                tcat: null,
                 path: ["", "", ""],
                 name: [
                     "formation",
@@ -75,6 +76,21 @@ export default class Model {
         this.state.page.scat = val
     }
 
+    /**
+     * Recuperer la valeur de TCat
+     * @return { string | null }
+     * */
+    getTCat() {
+        return this.state.page.tcat
+    }
+
+    /**
+     * @param { string } val la valeur du refine "fil_lib_voe_acc"
+     * */
+    setTCat(val) {
+        this.state.page.tcat = val
+    }
+
     /**
      * Retourne le chemin filiaires - formations - formations detaillees
      * @return { array[] } Le chemin.
@@ -98,7 +114,7 @@ export default class Model {
      * */
     getModelData0() {
         if(!localStorage.getItem(`sec0`)) {
-            const link = `${ this.state.api.link }` +
+            const link = `${ this.state.api.link }&rows=0` +
                                 `&facet=${this.state.api.facet.filiaire}`
 
             return fetch(link)
@@ -124,7 +140,7 @@ export default class Model {
      * */
     getModelData1() {
         if(!localStorage.getItem(`sec1-${this.state.page.cat}`)) {
-            const link = `${this.state.api.link}` +
+            const link = `${this.state.api.link}&rows=0` +
             `&facet=${this.state.api.facet.filiaire}` +
             `&facet=${this.state.api.facet.formation}` +
             `&facet=${this.state.api.facet.spec}` +
@@ -154,13 +170,12 @@ export default class Model {
      * */
     getModelData2() {
         if(!localStorage.getItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`)) {
-            const link = `${this.state.api.link}` +
+            const link = `${this.state.api.link}&rows=0` +
             `&facet=${this.state.api.facet.filiaire}` +
             `&facet=${this.state.api.facet.formation}` +
             `&facet=${this.state.api.facet.spec}` +
             `&refine.${this.state.api.facet.filiaire}=${this.state.page.cat}` +
             `&refine.${this.state.api.facet.formation}=${this.state.page.scat}`
-            console.log(link)
 
             return fetch(link)
                 .then((res) => res.json())
@@ -178,4 +193,41 @@ export default class Model {
             })
         }
     }
+
+    /**
+     * Retourne la liste d'etablissement
+     * @return { json } les donnees demandees en JSON
+     * */
+    getModelData3() {
+        if(!localStorage.getItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`)) {
+            const link = `${this.state.api.link}&rows=100` +
+                `&facet=${this.state.api.facet.filiaire}` +
+                `&facet=${this.state.api.facet.formation}` +
+                `&facet=${this.state.api.facet.spec}` +
+                `&refine.${this.state.api.facet.filiaire}=${this.state.page.cat}` +
+                `&refine.${this.state.api.facet.formation}=${this.state.page.scat}` +
+                `&refine.${this.state.api.facet.spec}=${this.state.page.tcat}`
+
+            console.log(link)
+
+            return fetch(link)
+                .then((res) => {
+
+                    console.log(res)
+                    return res.json()
+                })
+                .then((data) => {
+                    try {
+                        if(data) {
+                            localStorage.setItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`, JSON.stringify(data.records))
+                            return data.records
+                        }
+                    } catch(donothing) {}
+                })
+        } else {
+            return new Promise((resolve, reject) => {
+                resolve(JSON.parse(localStorage.getItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`)))
+            })
+        }
+    }
 }

src/components/global/api/View.js

@@ -5,6 +5,7 @@ export default class View {
         this.title = document.getElementById("selector-top-title")
         this.zone = document.getElementById("selector-list-zone")
         this.path = document.getElementById("location")
+        this.etab = document.getElementById("etab")
         this.btn = document.getElementById("selector-top-btn")
         this.btn.onclick = () => {
             this.updateMenu("", "previous")
@@ -58,6 +59,70 @@ export default class View {
         log("Loc->View",  `Chemin change ${path}`)
     }
 
+    renderEtab(data) {
+        this.etab.innerHTML = ""
+        let table = document.createElement("table")
+        let trow = document.createElement("tr")
+
+        let th1 = document.createElement("th")
+        th1.innerText = "Nom"
+
+        let th2 = document.createElement("th")
+        th2.innerText = "Ville"
+
+        let th3 = document.createElement("th")
+        th3.innerText = "Dpt"
+
+        let th4 = document.createElement("th")
+        th4.innerText = "Moyenne"
+
+        let th5 = document.createElement("th")
+        th5.innerText = "Selectivite"
+
+        trow.appendChild(th1)
+        trow.appendChild(th2)
+        trow.appendChild(th3)
+        trow.appendChild(th4)
+        trow.appendChild(th5)
+        table.appendChild(trow)
+
+
+        data.forEach((e) => {
+            let etab = e.fields.g_ea_lib_vx
+            let dept = e.fields.dep
+            let city = e.fields.ville_etab
+            let moy = "null"
+            let selection = "null"
+
+            let tr = document.createElement("tr")
+
+            let td1 = document.createElement("td")
+            td1.innerText = etab
+
+            let td2 = document.createElement("td")
+            td2.innerText = city
+
+            let td3 = document.createElement("td")
+            td3.innerText = dept
+
+            let td4 = document.createElement("td")
+            td4.innerText = moy
+
+            let td5 = document.createElement("td")
+            td5.innerText = selection
+
+            tr.appendChild(td1)
+            tr.appendChild(td2)
+            tr.appendChild(td3)
+            tr.appendChild(td4)
+            tr.appendChild(td5)
+
+            table.appendChild(tr)
+        })
+
+        this.etab.appendChild(table)
+    }
+
     /**
      * Envoyer dans le controlleur tous les events fait.
      * @param { string } selection Ce qu'on va utiliser pour le &refine.

src/components/global/etablanalytics/etablanalytics.riot

@@ -5,10 +5,41 @@
             height: 28vh;
             max-height: 28vh;
             font-weight: bold;
-            padding: 15px;
             overflow: auto;
         }
+
+        etablanalytics
+        #etab
+        table {
+            font-size: 17px;
+            color: white;
+            font-weight: bold;
+            text-align: center;
+            width: 100%;
+        }
+
+        etablanalytics
+        #etab
+        table
+        tr
+        th {
+            background: #344D59;
+            font-size: 17px;
+            color: white;
+            font-weight: bold;
+            text-align: center;
+        }
+
+        etablanalytics
+        #etab
+        table
+        tr
+        td {
+            text-align: center;
+            font-size: 16px;
+            color: white;
+        }
     </style>
 
-    <p>etablissements</p>
+    <div id="etab"></div>
 </etablanalytics>

src/components/global/generalytics/generalytics.riot

@@ -5,7 +5,7 @@
             height: 55vh;
             max-height: 57vh;
             font-weight: bold;
-            padding: 2vw;
+            padding: 1vw;
             overflow: auto;
         }
 

src/components/global/loc/loc.riot

@@ -2,8 +2,8 @@
     <style>
         loc {
             width: 100%;
-            height: 7vw;
+            height: 3vw;
-            max-height: 7vw;
+            max-height: auto;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -11,6 +11,8 @@
 
         loc
         #location {
+            padding: 8px;
+            background: #344D59;
             color: white;
             font-weight: bold;
         }

src/components/global/selector/selector.riot

@@ -60,6 +60,8 @@
         .selector-list-inner {
             display: flex;
             flex-direction: row;
+            justify-content: center;
+            align-items: center;
             justify-content: space-between;
             font-weight: bold;
             list-style-type: none;
@@ -92,12 +94,16 @@
         #selector-list-zone
         .selector-list-inner
         .selector-list-counts {
+            display: flex;
+            justify-content: center;
+            align-items: center;
             color: white;
             background: green;
             padding: 3px;
             text-align: center;
             border-radius: 4px;
-            width: 50px;
+            width: 4vw;
+            height: 2vw;
         }
     </style>