This commit is contained in:
pro.boooooo 2023-03-09 11:52:52 +01:00
parent 607729c848
commit d31043cce5
13 changed files with 168 additions and 134 deletions

View File

@ -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())
}
}

View File

@ -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) => {

View 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 :(")
}
}
}

View File

@ -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 }
}

View File

@ -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;

View 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>

View File

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

View File

@ -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 :(")
}
}
}

View File

@ -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>

View File

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

View File

@ -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')
})
})

View File

@ -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>