S4WEB/riot/modaleEcole.riot

<modaleEcole>
<div class="box">
    <div class="columns is-mobile">
        <div class="column is-two-thirds content mb-0">
            <p class="has-text-weight-bold">
                <a href={props.ecole.lien_form_psup}> {props.ecole.lib_comp_voe_ins} </a><br/>
                <span class="tag is-danger" if={getSelectivite(props.ecole)<=25}>formation très sélective</span>
								<span class="tag is-warning" if={getSelectivite(props.ecole)>25 && getSelectivite(props.ecole)<=50}>formation sélective</span>
								<span class="tag is-success" if={getSelectivite(props.ecole)>50 && getSelectivite(props.ecole)<=75}>formation peu sélective</span>
								<span class="tag is-info" if={getSelectivite(props.ecole)>=75}>formation très peu 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>
            <div>
                <modal-text title="Nombres de voeux" text="51">
                    <p class="my-2">Nombres de voeux : {props.ecole.voe_tot + props.ecole.voe_tot_f} </p>
                </modal-text>
            </div>
            <div>
                <modal-text title="Admis hors académie" text="25%">
                    <p class="my-2">Admis hors académie : {100 - props.ecole.pct_aca_orig}%</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 : {props.ecole.ran_grp1}</li>
                <li>Bac technologiques toutes séries : {props.ecole.ran_grp2}</li>
            </ul>
        </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">{props.ecole.pct_acc_debutpp}%</span>
                        </div>
                    </li>
                    <li class="timeline_li">
                        <div>
                            <p class="timeline_date">17 juin</p>
                            <span class="timeline_percentage">{props.ecole.pct_acc_datebac}%</span>
                        </div>
                    </li>
                    <li class="timeline_li">
                        <div>
                            <p class="timeline_date">16 juillet</p>
                            <span class="timeline_percentage">{props.ecole.pct_acc_finpp}%</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
				<statistiqueFormation pct_femme={getRepartitionFemme(props.ecole)} repartitionBac={getRepartitionBac(props.ecole)} repartitionMention={getRepartitionMention(props.ecole)} ></statistiqueFormation>

</div>



<script>
	export default function todos(){
		return {
			onBeforeMount(props, state) {
				// initial state
				this.state = {

				}
			},

			getRepartitionBac(ecole){
				let repartition = [];
				let total = ecole.acc_bg + ecole.acc_bt + ecole.acc_bp + ecole.acc_at
				repartition.push(Math.round(ecole.acc_bg/total*100))
				repartition.push(Math.round(ecole.acc_bt/total*100))
				repartition.push(Math.round(ecole.acc_bp/total*100))
				repartition.push(Math.round(ecole.acc_at/total*100))
				return repartition;
			},

			getRepartitionMention(ecole){
				let repartition = [];
				let total = ecole.acc_sansmention + ecole.acc_ab + ecole.acc_b + ecole.acc_tb + ecole.acc_tbf
				repartition.push(Math.round(ecole.acc_sansmention/total*100))
				repartition.push(Math.round(ecole.acc_ab/total*100))
				repartition.push(Math.round(ecole.acc_b/total*100))
				repartition.push(Math.round(ecole.acc_tb/total*100))
				repartition.push(Math.round(ecole.acc_tbf/total*100))
				return repartition;
			},
			
			getRepartitionFemme(ecole){
				return Math.round((ecole.acc_tot_f/ecole.acc_tot)*100);
			},

			getSelectivite(ecole){
				return ecole.taux_acces_ens
		}
	}
}
</script>
</modaleEcole>