tri du tableau et debut fenetre modale

css/style.css

@@ -1 +1,2 @@
 @import url(./bulam.css);
+@import url(./fontawesome-free-6.4.0-web/css/all.css);

index.html

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

riot/app.riot

@@ -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)
       },
 
     }

riot/modaleEcole.riot

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

riot/suiviformation.riot

@@ -13,9 +13,6 @@
 			onBeforeMount(props, state) {
 				// initial state
 				this.state = {
-					formation: '',
-					type: '',
-					detail: ''
 				}
 			}
 		}

riot/tableuFormation.riot

@@ -1,51 +1,59 @@
 <tableuFormation>
-<div class="scrollable" style="overflow-x: auto">
+
-    <my-table>
+<div class="field is-flex is-justify-content-space-between mt-5" >
-        <div class="field is-grouped is-grouped-multiline">
+    <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"></i>
+                            <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"></i>
+                            <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"></i>
+                            <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"></i>
+                            <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"></i>
+                            <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;">
+            <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)}">
+                <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">
@@ -53,12 +61,24 @@
                                 <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>
+                            </div>
+                        </div>
+                    </progress-bar>
+                </td>
             </tr>
         </tbody>
     </table>
-    </my-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,11 +87,23 @@ export default function todos() {
         onBeforeMount(props, state) {
         // initial state
         this.state = {
+            recherche: '',
+            trie: '',
+            records: '',
+            modal: ''
         };
         },
 
-        getMoyenne(item){
+        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
@@ -86,15 +118,124 @@ export default function todos() {
                 tres=tres*16
                 felicitation=felicitation*18
                 
-            console.log(sans+" "+assez+" "+bien+" "+tres+" "+felicitation)
+                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`)
+            }
             
-            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
+                })
+            }
+        }
     }
 
 }