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

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