S4WEB/riot/tableuFormation.riot

<tableuFormation>

<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>


export default function todos() {
    return {
        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 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é"){
                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
                })
            }
        }
    }

}
</script>

</tableuFormation>