tri du tableau et debut fenetre modale
This commit is contained in:
martins
parent
221890a935
commit
be3dd2006d
@ -1 +1,2 @@
|
||||
@import url(./bulam.css);
|
||||
@import url(./fontawesome-free-6.4.0-web/css/all.css);
|
||||
@ -5,14 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
|
||||
<script src="./riot/suiviformation.riot" type="riot"></script>
|
||||
<script src="./riot/choixformation.riot" type="riot"></script>
|
||||
<script src="./riot/app.riot" type="riot"></script>
|
||||
<script src="./riot/pourcentageForma.riot" type="riot"></script>
|
||||
<script src="./riot/statistiqueFormation.riot" type="riot"></script>
|
||||
<script src="./riot/tableuFormation.riot" type="riot"></script>
|
||||
<script src="./riot/carte.riot" type="riot"></script>
|
||||
<script src="./riot/modaleEcole.riot" type="riot"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/7.1.0/riot+compiler.min.js" integrity="sha512-sSGKGR9MvL0bUx3CScaBb56crXwspwDkL/JnB0IrLFQfw3uvSUlITQtsTtDZctshhv5wdwIt+qZeN8zThRF4Dw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<title>S4WEB</title>
|
||||
</head>
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
<statistiqueFormation pct_femme={state.pct_femme} repartitionBac={state.pct_Bac} repartitionMention={state.repartitionMention}></statistiqueFormation>
|
||||
</div>
|
||||
<div class="box p-5 my-5" if={state.statistique!=''}>
|
||||
<carte records={state.statistique.records}></carte>
|
||||
<tableuFormation records={state.statistique.records}></tableuFormation>
|
||||
</div>
|
||||
</div>
|
||||
@ -193,11 +192,22 @@
|
||||
let autre=total - (general+tecno+pro);
|
||||
|
||||
this.update({
|
||||
capacite: Math.round(total/records.length),
|
||||
pct_Bac: new Array(Math.round(general/total*100), Math.round(tecno/total*100), Math.round(pro/total*100), Math.round(autre/total*100))
|
||||
})
|
||||
},
|
||||
|
||||
getCapacite(records){
|
||||
let total=records.reduce(function (accumulateur, valeurCourante) {
|
||||
if(valeurCourante.fields.capa_fin){
|
||||
accumulateur += (valeurCourante.fields.capa_fin)
|
||||
}
|
||||
return accumulateur;
|
||||
}, 0);
|
||||
this.update({
|
||||
capacite: Math.round(total/records.length)
|
||||
})
|
||||
},
|
||||
|
||||
getRepartitionMention(records){
|
||||
|
||||
let sans=records.reduce(function (accumulateur, valeurCourante) {
|
||||
@ -248,6 +258,7 @@
|
||||
this.getPctFemme(this.state.statistique.records)
|
||||
this.getRepartitionBac(this.state.statistique.records)
|
||||
this.getRepartitionMention(this.state.statistique.records)
|
||||
this.getCapacite(this.state.statistique.records)
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
119
riot/modaleEcole.riot
Normal file
119
riot/modaleEcole.riot
Normal file
@ -0,0 +1,119 @@
|
||||
<modaleEcole>
|
||||
<div class="box">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-two-thirds content mb-0">
|
||||
<p class="has-text-weight-bold">
|
||||
Lycée professionnel Marie Curie - Mention complémentaire - Accueil réception
|
||||
<span class="tag is-danger">formation sélective</span>
|
||||
</p>
|
||||
<div>
|
||||
<modal-text title="Ville" text="Saint-Jean-du-Gard">
|
||||
<p class="my-2">Ville : {props.ecole.ville_etab}</p>
|
||||
</modal-text>
|
||||
</div>
|
||||
<div>
|
||||
<modal-text title="Département" text="Gard">
|
||||
<p class="my-2">Département : {props.ecole.dep_lib}</p>
|
||||
</modal-text>
|
||||
</div>
|
||||
<div>
|
||||
<modal-text title="Académie" text="Montpellier">
|
||||
<p class="my-2">Académie : {props.ecole.acad_mies}</p>
|
||||
</modal-text>
|
||||
</div>
|
||||
<div>
|
||||
<modal-text title="Contrat établissement" text="Public">
|
||||
<p class="my-2">Contrat établissement : {props.ecole.contrat_etab}</p>
|
||||
</modal-text>
|
||||
</div>
|
||||
<div>
|
||||
<modal-text title="Capacité" text="12">
|
||||
<p class="my-2">Capacité : {props.ecole.capa_fin}</p>
|
||||
</modal-text>
|
||||
</div>
|
||||
<!----
|
||||
PARTIE A COMPLETER AVEC LES DONN2ES
|
||||
|
||||
*
|
||||
-->
|
||||
<div>
|
||||
<modal-text title="Nombres de voeux" text="51">
|
||||
<p class="my-2">Nombres de voeux : </p>
|
||||
</modal-text>
|
||||
</div>
|
||||
<div>
|
||||
<modal-text title="Admis hors académie" text="25%">
|
||||
<p class="my-2">Admis hors académie : 25%</p>
|
||||
</modal-text>
|
||||
</div>
|
||||
<modal-text title="Rang du dernier admis :">
|
||||
<p class="my-2">Rang du dernier admis :</p>
|
||||
</modal-text>
|
||||
<ul>
|
||||
<li>Tous sauf les Bac technologiques : 46</li>
|
||||
<li>Bac technologiques toutes séries : </li>
|
||||
</ul>
|
||||
<p>Lien de la formation sur <a target="_blank" href="https://dossier.parcoursup.fr/Candidats/public/fiches/afficherFicheFormation?g_ta_cod=19380">parcoursup</a></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="has-text-weight-bold"> Vitesse de remplissage</p>
|
||||
<div class="timeline">
|
||||
<ul>
|
||||
<li class="timeline_li">
|
||||
<div>
|
||||
<p class="timeline_date">ouverture 27 mai</p>
|
||||
<span class="timeline_percentage">60%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline_li">
|
||||
<div>
|
||||
<p class="timeline_date">17 juin</p>
|
||||
<span class="timeline_percentage">80%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline_li">
|
||||
<div>
|
||||
<p class="timeline_date">16 juillet</p>
|
||||
<span class="timeline_percentage">80%</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pourcentageForma statistique={getPourcentageForma(props.ecole)} moyenne={getMoyenne(props.ecole)} selectivite={getSelectivite(props.ecole)} capacite={getCapacite(props.ecole)}></pourcentageForma>
|
||||
|
||||
|
||||
<script>
|
||||
export default function todos(){
|
||||
return {
|
||||
onBeforeMount(props, state) {
|
||||
// initial state
|
||||
this.state = {
|
||||
}
|
||||
},
|
||||
|
||||
getPourcentageForma(){
|
||||
|
||||
},
|
||||
|
||||
getMoyenne(){
|
||||
|
||||
},
|
||||
|
||||
getSelectivite(){
|
||||
|
||||
},
|
||||
|
||||
getCapacite(){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</modaleEcole>
|
||||
@ -13,9 +13,6 @@
|
||||
onBeforeMount(props, state) {
|
||||
// initial state
|
||||
this.state = {
|
||||
formation: '',
|
||||
type: '',
|
||||
detail: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,64 +1,84 @@
|
||||
<tableuFormation>
|
||||
<div class="scrollable" style="overflow-x: auto">
|
||||
<my-table>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
</div>
|
||||
<table class="table is-fullwidth is-hoverable tableFixHead">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="has-text-link">Nom
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="has-text-link">Ville
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="has-text-link">Dpt
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="has-text-link">Moyenne
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="has-text-link">Selectivité
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody each={item in props.records}>
|
||||
<tr class="is-clickable animate" style="transform: translateY(0px); opacity: 1;">
|
||||
<td>{item.fields.lib_comp_voe_ins}</td><td>{item.fields.ville_etab}</td><td>{item.fields.dep}</td><td>{getMoyenne(item)}</td><td><progress-bar select="{getSelectivite(item)}">
|
||||
<div class="columns is-mobile is-vcentered">
|
||||
<div class="column is-narrow pr-1"><p class="has-text-right has-text-weight-bold">{getSelectivite(item)}%</p></div>
|
||||
<div class="column pl-0">
|
||||
<progress class="progress is-info" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) >= 75}> {getSelectivite(item)}%</progress>
|
||||
<progress class="progress is-success" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) >= 50 && getSelectivite(item) < 75}>{getSelectivite(item)}%</progress>
|
||||
<progress class="progress is-warning" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) > 25 && getSelectivite(item) < 50}>{getSelectivite(item)}%</progress>
|
||||
<progress class="progress is-danger" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) <= 25}>{getSelectivite(item)}%</progress>
|
||||
</div></div></progress-bar></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</my-table>
|
||||
|
||||
<div class="field is-flex is-justify-content-space-between mt-5" >
|
||||
<input class="input" type="search" placeholder="nom de l'établissement" id="myInput" oninput={search}>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="tags has-addons" if={state.trie}>
|
||||
<span class="tag has-background-primary">{state.trie}</span>
|
||||
<span class="tag is-delete" onclick={deleteTri}></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scrollable" style="overflow-x: auto">
|
||||
<table class="table is-fullwidth is-hoverable tableFixHead">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="has-text-link">Nom
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort" onclick={tri} id="nom"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="has-text-link">Ville
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort" onclick={tri} id="ville"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="has-text-link">Dpt
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort" onclick={tri} id="département"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="has-text-link">Moyenne
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort" onclick={tri} id="moyenne"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="has-text-link">Selectivité
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort" onclick={tri} id="selectivité"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody each={item in props.records}>
|
||||
<tr class="is-clickable animate" style="transform: translateY(0px); opacity: 1;" if={item.fields.lib_comp_voe_ins.includes(state.recherche)} onclick={() => afficherModal(item)}>
|
||||
<td>{item.fields.lib_comp_voe_ins}</td><td>{item.fields.ville_etab}</td><td>{item.fields.dep}</td><td>{getMoyenne(item)}</td><td>
|
||||
<progress-bar select="{getSelectivite(item)}">
|
||||
<div class="columns is-mobile is-vcentered">
|
||||
<div class="column is-narrow pr-1"><p class="has-text-right has-text-weight-bold">{getSelectivite(item)}%</p></div>
|
||||
<div class="column pl-0">
|
||||
<progress class="progress is-info" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) >= 75}> {getSelectivite(item)}%</progress>
|
||||
<progress class="progress is-success" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) >= 50 && getSelectivite(item) < 75}>{getSelectivite(item)}%</progress>
|
||||
<progress class="progress is-warning" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) > 25 && getSelectivite(item) < 50}>{getSelectivite(item)}%</progress>
|
||||
<progress class="progress is-danger" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) <= 25}>{getSelectivite(item)}%</progress>
|
||||
</div>
|
||||
</div>
|
||||
</progress-bar>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="modal is-active" id="modal" if={state.modal}>
|
||||
<div class="modal-background" onclick={afficherModal}></div>
|
||||
<div class="modal-content">
|
||||
<modaleEcole ecole={state.modal}></modaleEcole>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close" onclick={afficherModal}></button>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
@ -67,34 +87,155 @@ export default function todos() {
|
||||
onBeforeMount(props, state) {
|
||||
// initial state
|
||||
this.state = {
|
||||
recherche: '',
|
||||
trie: '',
|
||||
records: '',
|
||||
modal: ''
|
||||
};
|
||||
},
|
||||
|
||||
onMounnted(){
|
||||
if(this.props.records){
|
||||
this.update({
|
||||
records: this.props.records
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
getMoyenne(item){
|
||||
if(!localStorage.getItem(`${item.fields.lib_comp_voe_ins}moyenne`)){
|
||||
let sans=item.fields.acc_sansmention
|
||||
let assez=item.fields.acc_ab
|
||||
let bien=item.fields.acc_b
|
||||
let tres=item.fields.acc_tb
|
||||
let felicitation=item.fields.acc_tbf
|
||||
|
||||
let sans=item.fields.acc_sansmention
|
||||
let assez=item.fields.acc_ab
|
||||
let bien=item.fields.acc_b
|
||||
let tres=item.fields.acc_tb
|
||||
let felicitation=item.fields.acc_tbf
|
||||
let total=sans+assez+bien+felicitation;
|
||||
|
||||
let total=sans+assez+bien+felicitation;
|
||||
sans=sans*10;
|
||||
assez=assez*12
|
||||
bien=bien*14
|
||||
tres=tres*16
|
||||
felicitation=felicitation*18
|
||||
|
||||
sans=sans*10;
|
||||
assez=assez*12
|
||||
bien=bien*14
|
||||
tres=tres*16
|
||||
felicitation=felicitation*18
|
||||
let valeur= Math.round((sans+assez+bien+felicitation)/total*100)/100
|
||||
localStorage.setItem(`${item.fields.lib_comp_voe_ins}moyenne`, valeur)
|
||||
return valeur;
|
||||
}else{
|
||||
return localStorage.getItem(`${item.fields.lib_comp_voe_ins}moyenne`)
|
||||
}
|
||||
|
||||
console.log(sans+" "+assez+" "+bien+" "+tres+" "+felicitation)
|
||||
|
||||
return Math.round((sans+assez+bien+felicitation)/total*100)/100
|
||||
},
|
||||
|
||||
getSelectivite(item){
|
||||
return item.fields.taux_acces_ens;
|
||||
}
|
||||
},
|
||||
|
||||
triNom(croissant){
|
||||
if(croissant){
|
||||
this.props.records.sort((a, b) => a.fields.lib_comp_voe_ins.localeCompare(b.fields.lib_comp_voe_ins))
|
||||
}else{
|
||||
this.props.records.reverse();
|
||||
}
|
||||
this.update();
|
||||
},
|
||||
|
||||
triVille(croissant){
|
||||
if(croissant){
|
||||
this.props.records.sort((a, b) => a.fields.ville_etab.localeCompare(b.fields.ville_etab))
|
||||
}else{
|
||||
this.props.records.reverse();
|
||||
}
|
||||
this.update();
|
||||
},
|
||||
|
||||
triDpt(croissant){
|
||||
if(croissant){
|
||||
this.props.records.sort((a,b) => (a.fields.dep > b.fields.dep) ? 1 : ((b.fields.dep > a.fields.dep) ? -1 : 0))
|
||||
}else{
|
||||
this.props.records.reverse();
|
||||
}
|
||||
this.update();
|
||||
},
|
||||
|
||||
triMoyenne(croissant){
|
||||
if(croissant){
|
||||
this.props.records.sort((a,b) => (this.getMoyenne(a) > this.getMoyenne(b)) ? 1 : ((this.getMoyenne(b) > this.getMoyenne(a)) ? -1 : 0))
|
||||
}else{
|
||||
this.props.records.reverse();
|
||||
}
|
||||
this.update();
|
||||
},
|
||||
|
||||
trieSelectivite(croissant){
|
||||
if(croissant){
|
||||
this.props.records.sort((a,b) => (this.getSelectivite(a) > this.getSelectivite(b)) ? 1 : ((this.getSelectivite(b) > this.getSelectivite(a)) ? -1 : 0))
|
||||
}else{
|
||||
this.props.records.reverse();
|
||||
}
|
||||
this.update();
|
||||
},
|
||||
|
||||
tri(e){
|
||||
let nom=e.target.id
|
||||
let bool
|
||||
|
||||
if(nom === this.state.trie){
|
||||
bool=false;
|
||||
}else{
|
||||
if(this.state.trie!=''){
|
||||
this.deleteTri()
|
||||
}
|
||||
bool= true
|
||||
}
|
||||
|
||||
this.update({
|
||||
trie: nom
|
||||
})
|
||||
|
||||
|
||||
if(nom==="nom"){
|
||||
this.triNom(bool)
|
||||
}
|
||||
if(nom==="moyenne"){
|
||||
this.triMoyenne(bool)
|
||||
}
|
||||
if(nom==="ville"){
|
||||
this.triVille(bool)
|
||||
}
|
||||
if(nom==="département"){
|
||||
this.triDpt(bool)
|
||||
}
|
||||
if(nom==="selectivité"){
|
||||
console.log("selectivite")
|
||||
this.trieSelectivite(bool)
|
||||
}
|
||||
},
|
||||
|
||||
deleteTri(e){
|
||||
this.update({
|
||||
trie: ''
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
search(e){
|
||||
this.update({
|
||||
recherche: e.target.value
|
||||
})
|
||||
},
|
||||
|
||||
afficherModal(item){
|
||||
if(this.state.modal){
|
||||
this.update({
|
||||
modal: ''
|
||||
})
|
||||
}else{
|
||||
this.update({
|
||||
modal: item.fields
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user