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.home = document.getElementById("home")
        this.left = document.getElementById("left")
        this.right = document.getElementById("right")

        this.antispam = null
        this.inAction = false

        this.btn.onclick = () => {
            this.updateMenu(" ", "previous")
        }

        log("Selector",  "View 1/3")
    }

    /**
     * Contruction de la balise <li> qui vas se loger dans le menu.
     * Si l'utilisateur spam clique, ca annule l'action (ce qui peut empecher les crashs)
     * @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 = () => {
                    if(this.antispam === null) {
                        this.antispam = setTimeout(() => {
                            this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
                            this.antispam = null
                        }, 400)
                    } else {
                        clearTimeout(this.antispam)
                        this.antispam = null
                        log("View->Anti-spam", "Spam detecte")
                    }
                }

                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) {
        try {
            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}`)
        } catch(e) {}
    }

    /**
     * Pour afficher en bas a gauche la liste.
     * @param { array[json] } data La liste des etablissements.
     * @param { string } form
     * */
    renderEtab(data, form) {
        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_lib} (${e.fields.dep})`
            let city = e.fields.ville_etab
            let moy = "?"
            let selection = e.fields.taux_acces_ens
            let acad = e.fields.acad_mies
            let type = e.fields.contrat_etab
            let capacity = e.fields.capa_fin
            let admishorsacad = e.fields.pct_aca_orig
            let voeuxtotal = e.fields.voe_tot

            let woman = `${ Math.round(100 * e.fields.acc_tot_f / e.fields.acc_tot) }%`
            let man = `${ Math.round(100 * (e.fields.acc_tot - e.fields.acc_tot_f) / e.fields.acc_tot) }%`

            let totbac = Math.round(e.fields.acc_bg + e.fields.acc_bp + e.fields.acc_bt + e.fields.acc_at)
            let gen = `${ Math.round(100 * e.fields.acc_bg / totbac) }%`
            let pro = `${ Math.round(100 * e.fields.acc_bp / totbac) }%`
            let tech = `${ Math.round(100 * e.fields.acc_bt / totbac) }%`
            let autre = `${ Math.round(100 * e.fields.acc_at / totbac) }%`

            let tot = e.fields.acc_sansmention + e.fields.acc_ab + e.fields.acc_b + e.fields.acc_tb + e.fields.acc_tbf
            let p = `${ Math.round(100 * e.fields.acc_sansmention / tot) }%`
            let ab = `${ Math.round(100 * e.fields.acc_ab / tot) }%`
            let b = `${ Math.round(100 * e.fields.acc_b / tot) }%`
            let tb = `${ Math.round(100 * e.fields.acc_tb / tot) }%`
            let tbf = `${ Math.round(100 * e.fields.acc_tbf / tot) }%`

            /**
             * TODO: Transformer ca en composant riot (GALERE MAX pour faire des <tr><etablanalyticsfragment/></tr>)
             * */
            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}%)`
            td5.style.display = "flex"
            td5.style.gap = "1vw"

            let progresstd5 = document.createElement("progress")
            progresstd5.setAttribute("max", "100")
            progresstd5.setAttribute("value", `${selection}`)
            td5.appendChild(progresstd5)

            tr.appendChild(td1)
            tr.appendChild(td2)
            tr.appendChild(td3)
            tr.appendChild(td4)
            tr.appendChild(td5)

            tr.onclick = () => {
                this.left.style.filter = "blur(15px)"
                this.right.style.filter = "blur(15px)"

                let modal = document.createElement("modal")

                const close = () => {
                    riot.unmount(modal, false)
                    this.left.style.filter = "none"
                    this.right.style.filter = "none"
                }

                riot.mount(modal, {
                    close : close,

                    etabname: etab,
                    formation: form,
                    city: city,
                    acad: acad,
                    type: type,
                    capacity: capacity,
                    wish: voeuxtotal,
                    nhacad: Math.round(100 - admishorsacad),

                    manPercent: man,
                    womanPercent: woman,
                    hstyle: `width: ${parseInt(man.split("%")[0]) > 10 ? man : `23%`};`,
                    fstyle: `width: ${parseInt(woman.split("%")[0]) > 10 ? woman : `23%`};`,

                    nbacgen: gen,
                    genstyle: `width: ${parseInt(gen.split("%")[0]) > 10 ? gen : `23%`};`,
                    nbacpro: pro,
                    prostyle: `width: ${parseInt(pro.split("%")[0]) > 10 ? pro : `23%`};`,
                    nbactech: tech,
                    techstyle: `width: ${parseInt(tech.split("%")[0]) > 10 ? tech : `23%`};`,
                    nbacautre: autre,
                    autrestyle: `width: ${parseInt(autre.split("%")[0]) > 10 ? autre : `23%`};`,

                    nmentionp: p,
                    pstyle: `width: ${parseInt(p.split("%")[0]) > 10 ? autre : `23%`};`,
                    nmentionab: ab,
                    abstyle: `width: ${parseInt(ab.split("%")[0]) > 10 ? autre : `23%`};`,
                    nmentionb: b,
                    bstyle: `width: ${parseInt(b.split("%")[0]) > 10 ? autre : `23%`};`,
                    nmentiontb: tb,
                    tbstyle: `width: ${parseInt(tb.split("%")[0]) > 10 ? autre : `23%`};`,
                    nmentiontbf: tbf,
                    tbfstyle: `width: ${parseInt(tbf.split("%")[0]) > 10 ? autre : `23%`};`
                }, "modal")

                this.home.appendChild(modal)
            }

            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) => {
                if(e.fields.taux_acces_ens >= 0) {
                    totselectivity++
                    selectivity += e.fields.taux_acces_ens

                    totcapacity++
                    capacity += e.fields.capa_fin
                } else {
                    totselectivity++
                }
            })

            let moyform = nbformation
            let moycap = Math.round(capacity / totcapacity)
            let moyselectivity = Math.round(selectivity / totselectivity)

            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%`};`,
                womanPercent: 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 :(")
        }
    }
}