73 lines
2.3 KiB
JavaScript
73 lines
2.3 KiB
JavaScript
|
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 :(")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|