This commit is contained in:
Bilal 2023-03-10 16:54:11 +01:00
parent 4d63922b23
commit c1ddbd9205
4 changed files with 156 additions and 379 deletions

View File

@ -35,13 +35,13 @@ export default class View {
this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next") this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
} }
this.zone.appendChild(elem)
riot.mount(elem, { riot.mount(elem, {
name: e.name, name: e.name,
count: e.count, count: e.count,
idd: `menu0-${e.name}` idd: `menu0-${e.name}`
}, "selectorfragment") }, "selectorfragment")
this.zone.appendChild(elem)
}) })
} }
@ -55,12 +55,13 @@ export default class View {
renderPath(path) { renderPath(path) {
this.path.innerHTML = "" this.path.innerHTML = ""
let elem = document.createElement("locfragment") let elem = document.createElement("locfragment")
this.path.appendChild(elem)
riot.mount(elem, { riot.mount(elem, {
msg: path.filter(Boolean).join(" ► ") msg: path.filter(Boolean).join(" ► ")
}, "locfragment") }, "locfragment")
this.path.appendChild(elem)
log("Loc->View", `Chemin change ${path}`) log("Loc->View", `Chemin change ${path}`)
} }

View File

@ -0,0 +1,129 @@
<!--
Composant servant a faire les progressbar dans #left
-->
<generalysticsfragment>
<style>
#generalysticsfragment {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 15vw;
}
#generalysticsfragment
#generalysticsfragment-percent {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
width: 100%;
color: white;
font-weight: bold;
}
#generalysticsfragment
#generalysticsfragment-percent
#woman, #man {
padding: 5px;
text-align: center;
}
#generalysticsfragment
#generalysticsfragment-percent
#woman {
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
background: mediumpurple;
}
#generalysticsfragment
#generalysticsfragment-percent
#man {
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
background: royalblue;
}
#generalysticsfragment
#generalysticsfragment-legend {
width: 100%;
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
gap: 2vw;
margin-top: 1vw;
}
#generalysticsfragment
#generalysticsfragment-legend
#generalysticsfragment-legend-container-h, #generalysticsfragment-legend-container-f {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
}
#generalysticsfragment
#generalysticsfragment-legend
.generalysticsfragment-legend-square {
width: 40px;
height: 40px;
}
#generalysticsfragment
#generalysticsfragment-legend
#generalysticsfragment-legend-container-h
#generalysticsfragment-legend-h {
background: royalblue;
}
#generalysticsfragment
#generalysticsfragment-legend
#generalysticsfragment-legend-container-f
#generalysticsfragment-legend-f {
background: mediumpurple;
}
</style>
<div id="generalysticsfragment">
<div id="generalysticsfragment-percent">
<span style={ this.props.hstyle } id="man">
{ this.props.manPercent } (H)
</span>
<span style={ this.props.fstyle } id="woman">
{ this.props.womenPercent } (F)
</span>
</div>
<div id="generalysticsfragment-legend">
<div id="generalysticsfragment-legend-container-h">
<div id="generalysticsfragment-legend-h" class="generalysticsfragment-legend-square"></div>
<span>H</span>
</div>
<div id="generalysticsfragment-legend-container-f">
<div id="generalysticsfragment-legend-f" class="generalysticsfragment-legend-square"></div>
<span>F</span>
</div>
</div>
</div>
<script>
export default {
props: [
"manPercent",
"womanPercent",
"hstyle",
"fstyle"
]
}
</script>
</generalysticsfragment>

View File

@ -9,385 +9,29 @@
padding: 1vw; padding: 1vw;
overflow: auto; overflow: auto;
} }
#generalytics
#generalytics-stat-container
#generalytics-stat-glob {
color: white;
display: flex;
flex-direction: column;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-glob
.generalytics-stat-atom {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-glob
.generalytics-stat-atom
#generalytics-stat-progress {
width: 40vw;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-gender, #generalytics-stat-bac, #generalytics-stat-mention {
text-align: center;
color: white;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-gender-progressbar-container, #generalytics-stat-bac-progressbar-container, #generalytics-stat-mention-progressbar-container {
padding: 10px;
display: flex;
width: 100%;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-gender-legend, #generalytics-stat-bac-legend, #generalytics-stat-mention-legend {
display: flex;
flex-direction: row;
justify-content: center;
gap: 3%;
align-items: center;
}
/*
* A PARTIR DE LA FAUT AUTOMATISER (C'est juste pour chopper le model)
*/
#generalytics
#generalytics-stat-container
#generalytics-stat-gender
#generalytics-stat-gender-progressbar-container
.generalytics-stat-gender-progressbar-h {
border-top-right-radius: 1vw;
border-bottom-right-radius: 1vw;
background: royalblue;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-gender
#generalytics-stat-gender-progressbar-container
.generalytics-stat-gender-progressbar-f {
border-top-left-radius: 1vw;
border-bottom-left-radius: 1vw;
background: purple;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-bac
#generalytics-stat-bac-progressbar-container
.generalytics-stat-bac-progressbar-gen {
border-top-left-radius: 1vw;
border-bottom-left-radius: 1vw;
background: purple;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-bac
#generalytics-stat-bac-progressbar-container
.generalytics-stat-bac-progressbar-tech {
background: royalblue;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-bac
#generalytics-stat-bac-progressbar-container
.generalytics-stat-bac-progressbar-pro {
background: green;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-bac
#generalytics-stat-bac-progressbar-container
.generalytics-stat-bac-progressbar-aut {
border-top-right-radius: 1vw;
border-bottom-right-radius: 1vw;
background: saddlebrown;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-mention
#generalytics-stat-mention-progressbar-container
.generalytics-stat-mention-progressbar-r {
border-top-left-radius: 1vw;
border-bottom-left-radius: 1vw;
background: purple;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-mention
#generalytics-stat-mention-progressbar-container
.generalytics-stat-mention-progressbar-ab {
background: royalblue;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-mention
#generalytics-stat-mention-progressbar-container
.generalytics-stat-mention-progressbar-b {
background: green;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-mention
#generalytics-stat-mention-progressbar-container
.generalytics-stat-mention-progressbar-tb {
background: saddlebrown;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-mention
#generalytics-stat-mention-progressbar-container
.generalytics-stat-mention-progressbar-tbf {
border-top-right-radius: 1vw;
border-bottom-right-radius: 1vw;
background: darkred;
}
#generalytics
#generalytics-stat-container
.generalytics-stat-legend-square {
width: 2vw;
height: 2vw;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-gender
#generalytics-stat-gender-legend
#generalytics-stat-gender-legend-h
.generalytics-stat-legend-square {
background: royalblue;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-gender
#generalytics-stat-gender-legend
#generalytics-stat-gender-legend-f
.generalytics-stat-legend-square {
background: purple;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-bac
#generalytics-stat-bac-legend
#generalytics-stat-bac-legend-gen
.generalytics-stat-legend-square {
background: purple;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-bac
#generalytics-stat-bac-legend
#generalytics-stat-bac-legend-tech
.generalytics-stat-legend-square {
background: royalblue;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-bac
#generalytics-stat-bac-legend
#generalytics-stat-bac-legend-pro
.generalytics-stat-legend-square {
background: green;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-bac
#generalytics-stat-bac-legend
#generalytics-stat-bac-legend-autre
.generalytics-stat-legend-square {
background: saddlebrown;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-mention
#generalytics-stat-mention-legend
#generalytics-stat-mention-legend-r
.generalytics-stat-legend-square {
background: purple;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-mention
#generalytics-stat-mention-legend
#generalytics-stat-mention-legend-ab
.generalytics-stat-legend-square {
background: royalblue;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-mention
#generalytics-stat-mention-legend
#generalytics-stat-mention-legend-b
.generalytics-stat-legend-square {
background: green;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-mention
#generalytics-stat-mention-legend
#generalytics-stat-mention-legend-tb
.generalytics-stat-legend-square {
background: saddlebrown;
}
#generalytics
#generalytics-stat-container
#generalytics-stat-mention
#generalytics-stat-mention-legend
#generalytics-stat-mention-legend-tbf
.generalytics-stat-legend-square {
background: darkred;
}
</style> </style>
<div id="generalytics"> <div id="generalytics">
<div id="generalytics-stat-container">
<div id="generalytics-stat-glob" >
<div class="generalytics-stat-atom">
<span>Moyenne</span>
<span>342</span>
</div> </div>
<div class="generalytics-stat-atom"> <script>
<span>Nb formations</span> import * as riot from "riot";
<span>49</span>
</div>
<div class="generalytics-stat-atom"> export default {
<span>Capacite</span> onMounted() {
<span>38</span> const path = document.getElementById("generalytics")
</div>
<div class="generalytics-stat-atom"> let ga = document.createElement("generalysticsfragment")
<span>Selectivite (50%)</span> riot.mount(ga, {
<progress id="generalytics-stat-progress" max="100" min="40" value="50"/> manPercent: "98%",
</div> womenPercent: "2%",
</div> hstyle: "width: 90%;",
fstyle: "width: 8%;"
}, "generalysticsfragment")
<div id="generalytics-stat-gender"> path.appendChild(ga)
<span>Repartition par genre</span> }
}
<div id="generalytics-stat-gender-progressbar-container"> </script>
<span class="generalytics-stat-gender-progressbar-f" style="width: 15%;">15% (F)</span>
<span class="generalytics-stat-gender-progressbar-h" style="width: 85%;">85% (H)</span>
</div>
<div id="generalytics-stat-gender-legend">
<div id="generalytics-stat-gender-legend-f">
<div class="generalytics-stat-legend-square"></div>
<span>F</span>
</div>
<div id="generalytics-stat-gender-legend-h">
<div class="generalytics-stat-legend-square"></div>
<span>H</span>
</div>
</div>
</div>
<div id="generalytics-stat-bac">
<span>Repartition par bac</span>
<div id="generalytics-stat-bac-progressbar-container">
<span class="generalytics-stat-bac-progressbar-gen" style="width: 20%;">20% (Gen.)</span>
<span class="generalytics-stat-bac-progressbar-tech" style="width: 30%;">30% (Tech.)</span>
<span class="generalytics-stat-bac-progressbar-pro" style="width: 25%;">25% (Pro.)</span>
<span class="generalytics-stat-bac-progressbar-aut" style="width: 25%;">0% (Aut.)</span>
</div>
<div id="generalytics-stat-bac-legend">
<div id="generalytics-stat-bac-legend-gen">
<div class="generalytics-stat-legend-square"></div>
<span>Gen</span>
</div>
<div id="generalytics-stat-bac-legend-tech">
<div class="generalytics-stat-legend-square"></div>
<span>Techno</span>
</div>
<div id="generalytics-stat-bac-legend-pro">
<div class="generalytics-stat-legend-square"></div>
<span>Pro</span>
</div>
<div id="generalytics-stat-bac-legend-autre">
<div class="generalytics-stat-legend-square"></div>
<span>Aut</span>
</div>
</div>
</div>
<div id="generalytics-stat-mention">
<span>Repartition par mention au bac</span>
<div id="generalytics-stat-mention-progressbar-container">
<span class="generalytics-stat-mention-progressbar-r" style="width: 10%;">10% (R)</span>
<span class="generalytics-stat-mention-progressbar-ab" style="width: 10%;">10% (AB)</span>
<span class="generalytics-stat-mention-progressbar-b" style="width: 40%;">40% (B)</span>
<span class="generalytics-stat-mention-progressbar-tb" style="width: 29%;">29% (TB)</span>
<span class="generalytics-stat-mention-progressbar-tbf" style="width: 10%;">10% (TBF)</span>
</div>
<div id="generalytics-stat-mention-legend">
<div id="generalytics-stat-mention-legend-r">
<div class="generalytics-stat-legend-square"></div>
<span>R</span>
</div>
<div id="generalytics-stat-mention-legend-ab">
<div class="generalytics-stat-legend-square"></div>
<span>AB</span>
</div>
<div id="generalytics-stat-mention-legend-b">
<div class="generalytics-stat-legend-square"></div>
<span>B</span>
</div>
<div id="generalytics-stat-mention-legend-tb">
<div class="generalytics-stat-legend-square"></div>
<span>TB</span>
</div>
<div id="generalytics-stat-mention-legend-tbf">
<div class="generalytics-stat-legend-square"></div>
<span>TBF</span>
</div>
</div>
</div>
</div>
</div>
</generalytics> </generalytics>

View File

@ -4,7 +4,10 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center;
align-items: center;
justify-content: space-around; justify-content: space-around;
margin-top: 2%;
} }
#home #home