$

src/components/global/api/View.js

@@ -9,6 +9,12 @@ export default class View {
         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")
@@ -19,18 +25,28 @@ export default class View {
 
     /**
      * 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) {
+     renderMenu(title, data) {
         this.title.innerText = title
         this.zone.innerHTML = ""
 
         if(title || data) {
             data.forEach((e) => {
                 let elem = document.createElement("selectorfragment")
-                elem.onclick = async () => {
-                    await this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
+                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, {
@@ -68,8 +84,9 @@ export default class View {
     /**
      * Pour afficher en bas a gauche la liste.
      * @param { array[json] } data La liste des etablissements.
+     * @param { string } form
      * */
-    renderEtab(data) {
+    renderEtab(data, form) {
         this.etab.innerHTML =
             "<tbody>" +
             "    <th>Nom</th>" +
@@ -85,9 +102,30 @@ export default class View {
             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)
+             * TODO: Transformer ca en composant riot (GALERE MAX pour faire des <tr><etablanalyticsfragment/></tr>)
              * */
             let tr = document.createElement("tr")
 
@@ -119,6 +157,59 @@ export default class View {
             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)
         })
     }
@@ -273,7 +364,7 @@ export default class View {
                 selectivitycount: gen.selectivitycount,
                 manPercent: gender.man,
                 hstyle: `width: ${parseInt(gender.man.split("%")[0]) > 10 ? gender.man : `23%`};`,
-                womenPercent: gender.woman,
+                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%` };`,
@@ -301,6 +392,7 @@ export default class View {
     }
 
 
+
     /**
      * Envoyer dans le controlleur tous les events fait.
      * @param { string } selection Ce qu'on va utiliser pour le &refine.