256 lines
8.7 KiB
Plaintext
256 lines
8.7 KiB
Plaintext
<tableuFormation>
|
|
<div id="map"></div>
|
|
<maMap if={props.records} records={props.records} modifyByLoc={modifyByLoc} afficherModal={afficherModal}></maMap>
|
|
<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) && locInclude(item.recordid)} 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>
|
|
|
|
|
|
export default function todos() {
|
|
return {
|
|
onBeforeMount(props, state) {
|
|
// initial state
|
|
this.state = {
|
|
recherche: '',
|
|
trie: '',
|
|
records: '',
|
|
modal: '',
|
|
loc: []
|
|
};
|
|
},
|
|
|
|
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 total=sans+assez+bien+felicitation;
|
|
|
|
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`)
|
|
}
|
|
|
|
},
|
|
|
|
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é"){
|
|
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
|
|
})
|
|
}
|
|
},
|
|
|
|
modifyByLoc(newRecords){
|
|
this.update({
|
|
loc: newRecords
|
|
});
|
|
},
|
|
|
|
locInclude(geolocalisation){
|
|
|
|
return this.state.loc.find((str) => str === geolocalisation);
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
</tableuFormation> |