314 lines
10 KiB
JavaScript
314 lines
10 KiB
JavaScript
import log from "./log";
|
|
import * as riot from "riot";
|
|
|
|
export default class View {
|
|
constructor() {
|
|
this.title = document.getElementById("selector-top-title")
|
|
this.zone = document.getElementById("selector-list-zone")
|
|
this.path = document.getElementById("loc")
|
|
this.stat = document.getElementById("generalytics")
|
|
this.etab = document.getElementById("etablanalytics-list")
|
|
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 { array[json] } data Donnees a afficher.
|
|
* @param { string } 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 elem = document.createElement("selectorfragment")
|
|
elem.onclick = () => {
|
|
this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
|
|
}
|
|
|
|
riot.mount(elem, {
|
|
name: e.name,
|
|
count: e.count,
|
|
idd: `menu0-${e.name}`
|
|
}, "selectorfragment")
|
|
|
|
this.zone.appendChild(elem)
|
|
})
|
|
}
|
|
|
|
log("Selector->View", "Donnees recuperer OK !")
|
|
}
|
|
|
|
/**
|
|
* Pour afficher en haut a gauche le chemin courant.
|
|
* @param { array[string] } path Chemin courant.
|
|
* */
|
|
renderPath(path) {
|
|
this.path.innerHTML = ""
|
|
let elem = document.createElement("locfragment")
|
|
|
|
riot.mount(elem, {
|
|
msg: path.filter(Boolean).join(" ► ")
|
|
}, "locfragment")
|
|
|
|
this.path.appendChild(elem)
|
|
|
|
log("Loc->View", `Chemin change ${path}`)
|
|
}
|
|
|
|
/**
|
|
* Pour afficher en bas a gauche la liste.
|
|
* @param { array[json] } data La liste des etablissements.
|
|
* */
|
|
renderEtab(data) {
|
|
this.etab.innerHTML =
|
|
"<tbody>" +
|
|
" <th>Nom</th>" +
|
|
" <th>Ville</th>" +
|
|
" <th>Departement</th>" +
|
|
" <th>Moyenne</th>" +
|
|
" <th>Selectivite</th>" +
|
|
"</tbody>"
|
|
|
|
data.forEach((e) => {
|
|
let etab = e.fields.g_ea_lib_vx
|
|
let dept = e.fields.dep
|
|
let city = e.fields.ville_etab
|
|
let moy = "null"
|
|
let selection = "null"
|
|
|
|
/**
|
|
* TODO: Transformer ca en composant riot (GALERE MAX)
|
|
* */
|
|
let tr = document.createElement("tr")
|
|
|
|
let td1 = document.createElement("td")
|
|
td1.innerText = etab
|
|
|
|
let td2 = document.createElement("td")
|
|
td2.innerText = city
|
|
|
|
let td3 = document.createElement("td")
|
|
td3.innerText = dept
|
|
|
|
let td4 = document.createElement("td")
|
|
td4.innerText = moy
|
|
|
|
let td5 = document.createElement("td")
|
|
td5.innerText = selection
|
|
|
|
tr.appendChild(td1)
|
|
tr.appendChild(td2)
|
|
tr.appendChild(td3)
|
|
tr.appendChild(td4)
|
|
tr.appendChild(td5)
|
|
|
|
this.etab.appendChild(tr)
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Envoyer dans l'encadrer avec les stats les graphiques
|
|
* @param { array[json] } data Les donnees pour calcule
|
|
* */
|
|
renderStat(data) {
|
|
this.stat.innerHTML = ""
|
|
let elem = document.createElement("generalysticsfragment")
|
|
|
|
/**
|
|
* Pour calculer le pourcentage en fonction du genre
|
|
* @param { array[json] } data
|
|
* @return {{ capacitycount: int, nformcount: int, selectivitycount: int }}
|
|
* */
|
|
const genStat = (data) => {
|
|
let nbformation = data.length
|
|
|
|
let totcapacity = 0
|
|
let capacity = 0
|
|
|
|
|
|
let totselectivity = 0
|
|
let selectivity = 0
|
|
|
|
data.forEach((e) => {
|
|
console.log(e.fields.select_form)
|
|
if(e.fields.select_form === "formation sélective") {
|
|
totselectivity++
|
|
selectivity++
|
|
} else {
|
|
totselectivity++
|
|
}
|
|
|
|
totcapacity++
|
|
capacity += e.fields.capa_fin
|
|
})
|
|
|
|
let moyform = nbformation
|
|
let moycap = Math.round(capacity / totcapacity)
|
|
let moyselectivity = Math.round(selectivity / totselectivity)
|
|
|
|
console.log(capacity + " " + totcapacity +"\n" + selectivity + " " + totselectivity)
|
|
console.log(moyform + "\n" + moycap + "\n" + moyselectivity)
|
|
|
|
return {
|
|
capacitycount: moycap,
|
|
nformcount: moyform,
|
|
selectivitycount: moyselectivity
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Pour calculer le pourcentage en fonction du genre
|
|
* @param { array[json] } data
|
|
* @return {{ man: string, woman: string }}
|
|
* */
|
|
const genderStat = (data) => {
|
|
let tot = 0
|
|
let woman = 0
|
|
|
|
data.forEach((e) => {
|
|
woman += e.fields.acc_tot_f
|
|
tot += e.fields.acc_tot
|
|
})
|
|
|
|
let man = tot - woman
|
|
let moywomen = Math.round(100 * woman / tot)
|
|
let moyman = Math.round(100 * man / tot)
|
|
|
|
return {
|
|
man: `${moyman}%`,
|
|
woman: `${moywomen}%`
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Pour calculer le pourcentage en fonction du type de bac obtenu
|
|
* @param { array[json] } data
|
|
* @return {{ gen: string, tech: string, pro: string, autre: string}}
|
|
* */
|
|
const bacStat = (data) => {
|
|
let gen = 0
|
|
let pro = 0
|
|
let tech = 0
|
|
let autre = 0
|
|
|
|
data.forEach((e) => {
|
|
gen += e.fields.acc_bg
|
|
pro += e.fields.acc_bp
|
|
tech += e.fields.acc_bt
|
|
autre += e.fields.acc_at
|
|
})
|
|
|
|
let tot = gen + pro + tech + autre
|
|
let moygen = Math.round(100 * gen / tot)
|
|
let moytech = Math.round(100 * tech / tot)
|
|
let moypro = Math.round(100 * pro / tot)
|
|
let moyautre = Math.round(100 * autre / tot)
|
|
|
|
return {
|
|
gen: `${moygen}%`,
|
|
tech: `${moytech}%`,
|
|
pro: `${moypro}%`,
|
|
autre: `${moyautre}%`
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Pour calculer le pourcentage en fonction de la mention au bac
|
|
* @param { array[json] } data
|
|
* @return {{ gen: string, tech: string, pro: string, autre: string}}
|
|
* */
|
|
const mentionStat = (data) => {
|
|
let p = 0
|
|
let ab = 0
|
|
let b = 0
|
|
let tb = 0
|
|
let tbf = 0
|
|
|
|
data.forEach((e) => {
|
|
p += e.fields.acc_sansmention
|
|
ab += e.fields.acc_ab
|
|
b += e.fields.acc_b
|
|
tb += e.fields.acc_tb
|
|
tbf += e.fields.acc_tbf
|
|
})
|
|
|
|
let tot = p + ab + b + tb + tbf
|
|
let moyp = Math.round(100 * p / tot)
|
|
let moyab = Math.round(100 * ab / tot)
|
|
let moyb = Math.round(100 * b / tot)
|
|
let moytb = Math.round(100 * tb / tot)
|
|
let moytbf = Math.round(100 * tbf / tot)
|
|
|
|
return {
|
|
p: `${moyp}%`,
|
|
b: `${moyb}%`,
|
|
ab: `${moyab}%`,
|
|
tb: `${moytb}%`,
|
|
tbf: `${moytbf}%`
|
|
}
|
|
}
|
|
|
|
let gender = genderStat(data)
|
|
let bac = bacStat(data)
|
|
let mention = mentionStat(data)
|
|
let gen = genStat(data)
|
|
|
|
if(data.length > 0) {
|
|
riot.mount(elem, {
|
|
capacitycount: gen.capacitycount,
|
|
nformcount: gen.nformcount,
|
|
selectivitycount: gen.selectivitycount,
|
|
manPercent: gender.man,
|
|
hstyle: `width: ${parseInt(gender.man.split("%")[0]) > 10 ? gender.man : `23%`};`,
|
|
womenPercent: gender.woman,
|
|
fstyle: `width: ${parseInt(gender.woman.split("%")[0]) > 10 ? gender.woman : `23%`};`,
|
|
nbacgen: bac.gen,
|
|
genstyle: `width: ${parseInt(bac.gen.split("%")[0]) > 10 ? bac.gen : `23%` };`,
|
|
nbacpro: bac.pro,
|
|
prostyle: `width: ${parseInt(bac.pro.split("%")[0]) > 10 ? bac.pro : `23%` };`,
|
|
nbactech: bac.tech,
|
|
techstyle: `width: ${parseInt(bac.tech.split("%")[0]) > 10 ? bac.tech : `23%` };`,
|
|
nbacautre: bac.autre,
|
|
autrestyle: `width: ${parseInt(bac.autre.split("%")[0]) > 10 ? bac.autre : `23%` };`,
|
|
nmentionp: mention.p,
|
|
pstyle: `width: ${parseInt(mention.p.split("%")[0]) > 10 ? bac.autre : `23%` };`,
|
|
nmentionb: mention.b,
|
|
bstyle: `width: ${parseInt(mention.b.split("%")[0]) > 10 ? bac.autre : `23%` };`,
|
|
nmentionab: mention.ab,
|
|
abstyle: `width: ${parseInt(mention.ab.split("%")[0]) > 10 ? bac.autre : `23%` };`,
|
|
nmentiontb: mention.tb,
|
|
tbstyle: `width: ${parseInt(mention.tb.split("%")[0]) > 10 ? bac.autre : `23%` };`,
|
|
nmentiontbf: mention.tbf,
|
|
tbfstyle: `width: ${parseInt(mention.tbf.split("%")[0]) > 10 ? bac.autre : `23%` };`
|
|
|
|
}, "generalysticsfragment")
|
|
|
|
this.stat.appendChild(elem)
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* 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 se remplir :(")
|
|
}
|
|
}
|
|
} |