$

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")
         }

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)
+        })
+    }
 }

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 <li> 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 =
             "<tbody>" +
             "    <th>Nom</th>" +
@@ -97,6 +141,7 @@ export default class View {
             "</tbody>"
 
         data.forEach((e) => {
+            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
@@ -171,7 +216,6 @@ export default class View {
 
                     riot.mount(modal, {
                         close : close,
-
                         etabname: etab,
                         formation: form,
                         city: city,
@@ -211,9 +255,27 @@ export default class View {
                 }
 
                 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 :(")

src/components/global/etablanalytics/etablanalytics.riot

@@ -2,10 +2,11 @@
     <style>
         #etablanalytics {
             width: 65vw;
-            height: 28vh;
+            height: 50vh;
-            max-height: 28vh;
+            max-height: 50vh;
             font-weight: bold;
             overflow: auto;
+            margin-bottom: 2vw;
         }
 
         #etablanalytics
@@ -39,9 +40,32 @@
             overflow: hidden;
             text-overflow: ellipsis;
         }
+
+        #etablanalytics
+        #etablanalytics-search-container {
+            background: #344D59;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            padding: 0.3vw;
+        }
+
+        #etablanalytics
+        #etablanalytics-search-container
+        #etablanalytics-search {
+            width: 30%;
+            background: white;
+        }
     </style>
 
     <div id="etablanalytics">
+        <div id="etablanalytics-map-container"></div>
+
+        <div id="etablanalytics-search-container">
+            <input type="text" id="etablanalytics-search" />
+        </div>
+
         <table id="etablanalytics-list">
             <tr>
                 <th>Nom</th>

src/components/global/map/map.riot

@@ -1,8 +1,26 @@
 <map>
     <style>
-        span {
+        #map-container {
-            color: green;
+            padding: 1vw;
+            background: #344D59;
+            display: flex;
+            justify-content: center;
+        }
+
+        #map-container
+        #map-map  {
+            width: 100%;
+            height: 25vw;
         }
     </style>
-    <span>tg</span>
+
+    <div id="map-container">
+        <iframe id="map-map" src={this.props.link}></iframe>
+    </div>
+
+    <script>
+        export default {
+            props: ["link"]
+        }
+    </script>
 </map>

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 {
@@ -66,6 +72,8 @@
         </div>
 
         <div id="selector-list-container">
+            <input type="text" id="selector-list-input-search" />
+
             <ul id="selector-list-zone"> </ul>
         </div>
     </div>

src/components/global/selector/selectorfragment.riot

@@ -44,7 +44,7 @@
         }
     </style>
 
-    <li id="selectorfragment-container">
+    <li id="selectorfragment-container" if={ this.props.display } >
         <a id={ this.props.idd } class="selectorfragment-name">{ this.props.name }</a>
         <span id="selectorfragment-count">{ this.props.count }</span>
     </li>
@@ -54,7 +54,8 @@
             props: [
                 "name",
                 "count",
-                "idd"
+                "idd",
+                "display"
             ]
         }
     </script>