haissous/ProjetRIOT
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modal

Browse Source
This commit is contained in:
Haïssous Kayyissa 2023-03-31 14:54:13 +02:00
parent 507ff5fe50
commit 55196aca70
3 changed files with 132 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/main-controller.riot
View File

@ -9,11 +9,11 @@
<div class="column"> <div class="column">
<fili-info schoolList={state.schoolList} course={state.course} shouldShowInfos={state.shouldShowInfos}></fili-info> <fili-info schoolList={state.schoolList} course={state.course} shouldShowInfos={state.shouldShowInfos}></fili-info>
<school sortList={sortList} schoolList={state.filteredSchoolList} sortFields={state.sortFields} course={state.course} shouldShowInfos={state.shouldShowInfos}></school> <school popup={popup} sortList={sortList} schoolList={state.filteredSchoolList} sortFields={state.sortFields} course={state.course} shouldShowInfos={state.shouldShowInfos}></school>
</div> </div>
</div> </div>
<school-info></school-info> <school-info closeWindow={closePopup} popupEnabled={state.popupEnabled} school={state.school}></school-info>
<script> <script>
@ -97,7 +97,9 @@
schoolList: null, schoolList: null,
sortFields: SORT_TABLE, sortFields: SORT_TABLE,
filteredSchoolList: null, filteredSchoolList: null,
shouldShowInfos: false shouldShowInfos: false,
school: null,
popupEnabled: false
}) })
}, },
filterSearch() { filterSearch() {
@ -118,6 +120,19 @@
this.update({ this.update({
filteredSchoolList: finalArray filteredSchoolList: finalArray
}) })
},
popup(school){
this.update({
school: school,
popupEnabled: true
})
console.log("popup!")
},
closePopup(){
this.update({
popupEnabled: false
})
console.log("closed!")
} }
} }
</script> </script>

120
components/school-info.riot
View File

@ -1,24 +1,124 @@
<school-info> <school-info>
<div if={state.enabled} style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000000DD;"> <div if={props.popupEnabled} class="modal is-active">
<div style="position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: #FFFFFF"> <div class="modal-background"></div>
<button class="delete is-medium" onclick={closeWindow}>X</button> <div class="modal-content">
<div class="box p-2">
<p>
<h1 class="title is-4 m-2" style="color: #485FC7;">{props.school.fields.g_ea_lib_vx}</h1>
</p>
<p> <p>
<h2></h2> <h2></h2>
</p> </p>
<line-graph style="height: 90px; margin: 10px;"></line-graph> <div class="columns m-2">
<div class="column">
<p>Ville : {props.school.fields.ville_etab}</p>
<p>Département : {props.school.fields.dep} {props.school.fields.dep_lib}</p>
<p>Académie : {props.school.fields.acad_mies}</p>
<p>{props.school.fields.contrat_etab}</p>
<p>Capacité : {props.school.fields.capa_fin}</p>
<p>Nombre de voeux : {props.school.fields.voe_tot}</p>
<p>Rang dernier admis : </p>
</div> </div>
<div class="column is-one-fifth">
<p>Vitesse de remplissage :</p>
</div>
</div>
<div class="m-4">
<line-graph title="Répartition par genre" data={state.genreStats} style="height: 6rem;"></line-graph>
</div>
<div class="m-4">
<line-graph title="Répartition par bac" data={state.bacStats} style="height: 6rem;"></line-graph>
</div>
<div class="m-4">
<line-graph title="Répartition par mention au bac" data={state.mentionStats} style="height: 6rem;"></line-graph>
</div>
</div>
</div>
<button class="modal-close is-medium" onclick={props.closeWindow}></button>
</div> </div>
<script> <script>
export default { export default {
onMounted() { onBeforeMount(props, state) {
this.state.enabled = false this.state={
this.update() bacStats: [],
genreStats: [],
mentionStats: []
}
}, },
onBeforeUpdate(props, state) {
if (!this.props.school) return
let school=this.props.school.fields
state.genreStats = [
{
name: "Hommes",
short: "H",
value: (100 - school.pct_f)
},
{
name: "Femmes",
short: "F",
value: school.pct_f
},
]
state.bacStats = [
{
name: "Général",
short: "Gen.",
value: school.part_acces_gen
},
{
name: "Technologique",
short: "Tech.",
value: school.part_acces_tec
},
{
name: "Professionnel",
short: "Pro.",
value: school.part_acces_pro
},
{
name: "Autre",
short: "Au.",
value: 100 - (school.part_acces_gen + school.part_acces_tec + school.part_acces_pro)
}
]
state.mentionStats = [
{
name: "Sans Mention",
short: "SM",
value: school.pct_sansmention
},
{
name: "Assez Bien",
short: "AB",
value: school.pct_ab
},
{
name: "Bien",
short: "B",
value: school.pct_b
},
{
name: "Très Bien",
short: "TB",
value: school.pct_tb
},
{
name: "Très Bien + Félicitations",
short: "TBF",
value: school.pct_tbf
},
{
name: "Non Spécifié",
short: "NS",
value: 100 - (school.pct_sansmention + school.pct_ab + school.pct_b + school.pct_tb + school.pct_tbf)
}
]
closeWindow() {
this.state.enabled = false
this.update()
} }
} }
</script> </script>

2
components/school.riot
View File

@ -23,7 +23,7 @@
</thead> </thead>
<tbody> <tbody>
<tr each={school in props.schoolList}> <tr each={school in props.schoolList}>
<td>{school.fields.g_ea_lib_vx}</td> <td><a onclick={() => props.popup(school)}>{school.fields.g_ea_lib_vx}</a></td>
<td>{school.fields.ville_etab}</td> <td>{school.fields.ville_etab}</td>
<td>{school.fields.dep}</td> <td>{school.fields.dep}</td>
<td>{school.fields.moyenne}</td> <td>{school.fields.moyenne}</td>