$
This commit is contained in:
parent
607729c848
commit
d31043cce5
@ -2,8 +2,8 @@ import log from "./log";
|
||||
|
||||
export default class Controller {
|
||||
/**
|
||||
* @param model La class Model().
|
||||
* @param view La class View().
|
||||
* @param { Model } model La class Model().
|
||||
* @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 action Retour en arriere ou aller en avant. { "previous", "next" }.
|
||||
* @param { string } selection Ce qu'on va utiliser pour le &refine.
|
||||
* @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())
|
||||
}
|
||||
}
|
@ -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) {
|
||||
this.state.page.cat = v
|
||||
getTitle() {
|
||||
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) {
|
||||
this.state.page.scat = v
|
||||
setCat(val) {
|
||||
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) => {
|
||||
try {
|
||||
if(data) {
|
||||
localStorage.setItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`, JSON.stringify(data.facet_groups[2].facets))
|
||||
return data.facet_groups[2].facets
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
} catch(donothing) {}
|
||||
})
|
||||
} else {
|
||||
return new Promise((resolve, reject) => {
|
73
src/components/global/api/View.js
Normal file
73
src/components/global/api/View.js
Normal file
@ -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 :(")
|
||||
}
|
||||
}
|
||||
}
|
@ -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 }
|
||||
}
|
@ -2,8 +2,8 @@
|
||||
<style>
|
||||
etablanalytics {
|
||||
width: 65vw;
|
||||
height: 31vh;
|
||||
max-height: 33vh;
|
||||
height: 28vh;
|
||||
max-height: 28vh;
|
||||
font-weight: bold;
|
||||
padding: 15px;
|
||||
overflow: auto;
|
||||
|
20
src/components/global/loc/loc.riot
Normal file
20
src/components/global/loc/loc.riot
Normal file
@ -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>
|
@ -1,10 +0,0 @@
|
||||
<loc>
|
||||
<style>
|
||||
#location {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p id="location"> </p>
|
||||
</loc>
|
@ -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 :(")
|
||||
}
|
||||
}
|
||||
}
|
@ -103,9 +103,7 @@
|
||||
|
||||
<div id="selector">
|
||||
<div id="selector-top-container">
|
||||
<span id="selector-top-title">
|
||||
blabal
|
||||
</span>
|
||||
<span id="selector-top-title"> </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>
|
@ -1,3 +0,0 @@
|
||||
<user>
|
||||
<p>My username is: <b>{ props.name }</b></p>
|
||||
</user>
|
@ -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')
|
||||
})
|
||||
})
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user