$

src/components/global/api/Controller.js

@@ -2,8 +2,8 @@ import log from "./log";
 
 export default class Controller {
     /**
-     * @param model La class Model().
+     * @param { Model } model La class Model().
-     * @param view La class View().
+     * @param { View } view La class View().
      * */
     constructor(model, view) {
         this.model = model
@@ -11,8 +11,8 @@ export default class Controller {
 
         /**
          * Envoyer dans le controlleur tous les events fait.
-         * @param selection Ce qu'on va utiliser pour le &refine.
+         * @param { string } selection Ce qu'on va utiliser pour le &refine.
-         * @param action Retour en arriere ou aller en avant. { "previous", "next" }.
+         * @param { string } action Retour en arriere ou aller en avant. { "previous", "next" }.
          * */
         window.updateModel = (selection, action) => {
             if(this.model.getCurIndex() === 0) {
@@ -23,6 +23,8 @@ export default class Controller {
                 this.model.setSCat(selection)
             }
 
+            this.model.setPath(this.model.getCurIndex(), selection)
+
             if(action === "next") {
                 this.model.nextPage()
             } else if(action === "previous") {
@@ -39,26 +41,28 @@ export default class Controller {
     }
 
     /**
-     * @param n Numero de la page courante { 0, 1, 2 }.
+     * @param { int } n Numero de la page courante { 0, 1, 2 }.
      * */
     async getData(n) {
         if(n === 0) {
             log("Selector->Controller",  "Requete Section 0")
             this.model.getModelData0().then((res) => {
-                this.view.renderMenu(res)
+                this.view.renderMenu(this.model.getTitle(), res)
             })
         } else if(n === 1) {
             log("Selector->Controller",  "Requete Section 1")
             this.model.getModelData1().then((res) => {
-                this.view.renderMenu(res)
+                this.view.renderMenu(this.model.getTitle(), res)
             })
         } else if(n === 2) {
             log("Selector->Controller",  "Requete Section 2")
             this.model.getModelData2().then((res) => {
-                this.view.renderMenu(res)
+                this.view.renderMenu(this.model.getTitle(), res)
             })
         } else {
             log("Selector->Controller",  "Numero de page inconnue")
         }
+
+        this.view.renderPath(this.model.getPath())
     }
 }

src/components/global/api/Model.js

@@ -29,7 +29,7 @@ export default class Model {
 
     /**
      * Retourne l'index courant de la page.
-     * @return int
+     * @return { number } l'index courant
      * */
     getCurIndex() {
         return this.state.page.curIndex
@@ -54,22 +54,47 @@ export default class Model {
     }
 
     /**
-     * @param v La valeur du refine "fili"
+     * Recuperer le titre de la page
+     * @return { string } Le titre.
      * */
-    setCat(v) {
+    getTitle() {
-        this.state.page.cat = v
+        return this.state.page.name[this.state.page.curIndex]
     }
 
     /**
-     * @param v la valeur du refine "form_lib_voe_acc"
+     * @param { string } val La valeur du refine "fili"
      * */
-    setSCat(v) {
+    setCat(val) {
-        this.state.page.scat = v
+        this.state.page.cat = val
+    }
+
+    /**
+     * @param { string } val la valeur du refine "form_lib_voe_acc"
+     * */
+    setSCat(val) {
+        this.state.page.scat = val
+    }
+
+    /**
+     * Retourne le chemin filiaires - formations - formations detaillees
+     * @return { array[] } Le chemin.
+     * */
+    getPath() {
+        return this.state.page.path
+    }
+
+    /**
+     * Ajouter un chemin
+     * @param { number } index
+     * @param { string } choose
+     * */
+    setPath(index, choose) {
+        this.state.page.path[index] = choose
     }
 
     /**
      * Retourne la section 0 + l'enregistre dans le local storage
-     * @return les donnees demandees en JSON
+     * @return { json } Le resultat.
      * */
     getModelData0() {
         if(!localStorage.getItem(`sec0`)) {
@@ -95,7 +120,7 @@ export default class Model {
 
     /**
      * Retourne la section 1 + l'enregistre dans le local storage
-     * @return les donnees demandees en JSON
+     * @return { json } les donnees demandees en JSON
      * */
     getModelData1() {
         if(!localStorage.getItem(`sec1-${this.state.page.cat}`)) {
@@ -124,7 +149,8 @@ export default class Model {
 
     /**
      * Retourne la section 2 + l'enregistre dans le local storage
-     * @return les donnees demandees en JSON
+     * PS: Generalement c'est ici que il y a possibilite de ne pas avoir de 3eme section
+     * @return { json } les donnees demandees en JSON
      * */
     getModelData2() {
         if(!localStorage.getItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`)) {
@@ -134,16 +160,17 @@ export default class Model {
             `&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())
                 .then((data) => {
-                    if(data) {
+                    try {
-                        localStorage.setItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`, JSON.stringify(data.facet_groups[2].facets))
+                        if(data) {
-                        return data.facet_groups[2].facets
+                            localStorage.setItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`, JSON.stringify(data.facet_groups[2].facets))
-                    } else {
+                            return data.facet_groups[2].facets
-                        return null
+                        }
-                    }
+                    } catch(donothing) {}
                 })
         } else {
             return new Promise((resolve, reject) => {

src/components/global/api/View.js

@@ -0,0 +1,73 @@
+import log from "./log";
+
+export default class View {
+    constructor() {
+        this.title = document.getElementById("selector-top-title")
+        this.zone = document.getElementById("selector-list-zone")
+        this.path = document.getElementById("location")
+        this.btn = document.getElementById("selector-top-btn")
+        this.btn.onclick = () => {
+            this.updateMenu("", "previous")
+        }
+
+        log("Selector",  "View 1/3")
+    }
+
+    /**
+     * Contruction de la balise <li> qui vas se loger dans le menu.
+     * <li>
+     *     <a>Tous les noms des formations par section</a>
+     *     <span>Combien de formations dispo ?</span>
+     * </li>
+     * @param data Donnees a afficher.
+     * @param title Titre de la section d'un menu.
+     * */
+    renderMenu(title, data) {
+        this.title.innerText = title
+        this.zone.innerHTML = ""
+
+        if(title || data) {
+            data.forEach((e) => {
+                let li = document.createElement("li")
+                li.className = "selector-list-inner"
+                li.onclick = () => {
+                    this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
+                }
+
+                let name = document.createElement("a")
+                name.innerText = e.name
+                name.id = `menu0-${e.name}`
+                name.className = "selector-list-names"
+
+                let count = document.createElement("span")
+                count.innerText = e.count
+                count.className = "selector-list-counts"
+
+                li.appendChild(name)
+                li.appendChild(count)
+
+                this.zone.appendChild(li)
+            })
+        }
+
+        log("Selector->View",  "Donnees recuperer OK !")
+    }
+
+    renderPath(path) {
+        this.path.innerText = `${path[0]} / ${path[1]} / ${path[2]}`
+        log("Loc->View",  `Chemin change ${path}`)
+    }
+
+    /**
+     * Envoyer dans le controlleur tous les events fait.
+     * @param { string } selection Ce qu'on va utiliser pour le &refine.
+     * @param { string } direction Retour en arriere ou aller en avant. { "previous", "next" }
+     * */
+    updateMenu(selection, direction) {
+        if(direction) {
+            window.updateModel(selection, direction)
+        } else {
+            log("Selector->View",  "Mince, le menu ne veut pas s'ouvrir :(")
+        }
+    }
+}

src/components/global/api/api.js

@@ -2,8 +2,13 @@ import Controller from "./Controller.js"
 import View from "./View.js"
 import Model from "./Model.js"
 
+/**
+ * @return {{ Controller, Model, View }}
+ * */
 export default function start() {
     const view = new View()
     const model = new Model()
-    new Controller(model, view)
+    const controller = new Controller(model, view)
+
+    return { "controller": controller, "model": model, "view": view }
 }

src/components/global/etablanalytics/etablanalytics.riot

@@ -2,8 +2,8 @@
     <style>
         etablanalytics {
             width: 65vw;
-            height: 31vh;
+            height: 28vh;
-            max-height: 33vh;
+            max-height: 28vh;
             font-weight: bold;
             padding: 15px;
             overflow: auto;

src/components/global/loc/loc.riot

@@ -0,0 +1,20 @@
+<loc>
+    <style>
+        loc {
+            width: 100%;
+            height: 7vw;
+            max-height: 7vw;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        loc
+        #location {
+            color: white;
+            font-weight: bold;
+        }
+    </style>
+
+    <span id="location"> </span>
+</loc>

src/components/global/localisationpath/loc.riot

@@ -1,10 +0,0 @@
-<loc>
-    <style>
-        #location {
-            color: white;
-            font-weight: bold;
-        }
-    </style>
-
-    <p id="location"> </p>
-</loc>

src/components/global/selector/api/View.js

@@ -1,61 +0,0 @@
-import log from "./log";
-
-export default class View {
-    constructor() {
-        this.zone = document.getElementById("selector-list-zone")
-        this.btn = document.getElementById("selector-top-btn")
-        this.btn.onclick = () => {
-            this.updateMenu("", "previous")
-        }
-
-        log("Selector",  "View 1/3")
-    }
-
-    /**
-     * Contruction de la balise <li> qui vas se loger dans le menu.
-     * <li>
-     *     <a>Tous les noms des formations par section</a>
-     *     <span>Combien de formations dispo ?</span>
-     * </li>
-     * @param data Donnees a afficher.
-     * */
-    renderMenu(data) {
-        this.zone.innerHTML = ""
-
-        data.forEach((e) => {
-            let li = document.createElement("li")
-            li.className = "selector-list-inner"
-            li.onclick = () => {
-                this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
-            }
-
-            let name = document.createElement("a")
-            name.innerText = e.name
-            name.id = `menu0-${e.name}`
-            name.className = "selector-list-names"
-
-            let count = document.createElement("span")
-            count.innerText = e.count
-            count.className = "selector-list-counts"
-        
-            li.appendChild(name)
-            li.appendChild(count)
-            this.zone.appendChild(li)
-        })
-
-        log("Selector->View",  "Donnees recuperer OK !")
-    }
-
-    /**
-     * Envoyer dans le controlleur tous les events fait.
-     * @param selection Ce qu'on va utiliser pour le &refine.
-     * @param direction Retour en arriere ou aller en avant. { "previous", "next" }
-     * */
-    updateMenu(selection, direction) {
-        if(direction) {
-            window.updateModel(selection, direction)
-        } else {
-            log("Selector->View",  "Mince, le menu ne veut pas s'ouvrir :(")
-        }
-    }
-}

src/components/global/selector/selector.riot

@@ -103,9 +103,7 @@
 
     <div id="selector">
         <div id="selector-top-container">
-              <span id="selector-top-title">
+              <span id="selector-top-title"> </span>
-                blabal
-              </span>
 
             <button
                     id="selector-top-btn">
@@ -118,14 +116,4 @@
             </ul>
         </div>
     </div>
-
-    <script>
-        import start from "./api/selector.spec.js"
-
-        export default {
-            onMounted() {
-                start()
-            }
-        }
-    </script>
 </selector>

src/components/includes/user/user.riot

@@ -1,3 +0,0 @@
-<user>
-  <p>My username is: <b>{ props.name }</b></p>
-</user>

src/components/includes/user/user.spec.js

@@ -1,17 +0,0 @@
-import User from './user.riot'
-import { expect } from 'chai'
-import { component } from 'riot'
-
-describe('User Unit Test', () => {
-  const mountUser = component(User)
-
-  it('The component is properly rendered', () => {
-    const div = document.createElement('div')
-
-    const component = mountUser(div, {
-      name: 'Jack'
-    })
-
-    expect(component.$('b').innerHTML).to.be.equal('Jack')
-  })
-})

src/pages/home.riot

@@ -8,7 +8,7 @@
 		}
 
 		#main-container
-		#right, #left generalytics, #left etablanalytics {
+		#right, #left generalytics, #left etablanalytics, #left loc {
 			box-shadow: 0px 0px 9px 1px black;
 			background: #7A90A4;
 		}
@@ -30,12 +30,20 @@
 		#main-container
 		#left
 		generalytics {
-			margin-bottom: 1.5vw;
+			margin-bottom: 1.3vw;
+			margin-top: 1.3vw;
 		}
 	</style>
 
 	<script>
 		import * as riot from "riot";
+		import start from "../components/global/api/api.js"
+
+		export default {
+			onMounted() {
+				start()
+			}
+		}
 
 		riot.mount("selector", document.getElementById("right"))
 		riot.mount("loc", document.getElementById("left"))
@@ -49,7 +57,7 @@
 		</div>
 
 		<div id="left">
-			<loc id="loc" />
+			<loc />
 			<generalytics />
 			<etablanalytics />
 		</div>