$

readme.md

@@ -1,31 +1,44 @@
 ## Info
-### Documentation de riot : 
+
+### Probleme connu
+```text
+Section : Ingenieur, Ecole de commerce, Tout ce qui commence par "Formation"
+Raison : Le model d'envoie de donnees ne prends pas en charge plus de 3 sections (changer les fonctions getDataN()
 ```
+
+### IMPORTANT
+```text
+Si ca ne s'affiche pas dans la milli seconde, pas besoin de forcer le boutton,
+faut juste attendre que le MVC receptionne les donnees.
+```
+
+### Documentation de riot : 
+```http request
 https://riot.js.org/documentation/
 ```
 ### Git
-```
+```http request
 https://dwarves.iut-fbleau.fr/gitiut/boudjeml/ParcoursupAnalytics
 ```
 
 ## Pour compiler:
 
 ### Installer node js
-```
+```http request
 https://nodejs.org/en/download/
 ```
 
 ### Run le serveur
-```
+```shell
 npm start
 ```
 
 ### Si vous avez des erreurs vous disant qu'un package n'est pas installé,<br> faites
 Structure :
-```
+```shell
 npm install {nom_du_package} --save-dev
 ```
 Exemple :
-```
+```shell
 npm install webpack --save-dev
 ```

src/components/global/api/View.js

@@ -1,11 +1,12 @@
 import log from "./log";
+import * as riot from "riot";
 
 export default class View {
     constructor() {
         this.title = document.getElementById("selector-top-title")
         this.zone = document.getElementById("selector-list-zone")
-        this.path = document.getElementById("location")
+        this.path = document.getElementById("loc")
-        this.etab = document.getElementById("etab")
+        this.etab = document.getElementById("etablanalytics-list")
         this.btn = document.getElementById("selector-top-btn")
         this.btn.onclick = () => {
             this.updateMenu(" ", "previous")
@@ -29,25 +30,18 @@ export default class View {
 
         if(title || data) {
             data.forEach((e) => {
-                let li = document.createElement("li")
+                let elem = document.createElement("selectorfragment")
-                li.className = "selector-list-inner"
+                elem.onclick = () => {
-                li.onclick = () => {
                     this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
                 }
 
-                let name = document.createElement("a")
+                this.zone.appendChild(elem)
-                name.innerText = e.name
-                name.id = `menu0-${e.name}`
-                name.className = "selector-list-names"
 
-                let count = document.createElement("span")
+                riot.mount(elem, {
-                count.innerText = e.count
+                    name: e.name,
-                count.className = "selector-list-counts"
+                    count: e.count,
-
+                    idd: `menu0-${e.name}`
-                li.appendChild(name)
+                }, "selectorfragment")
-                li.appendChild(count)
-
-                this.zone.appendChild(li)
             })
         }
 
@@ -59,7 +53,14 @@ export default class View {
      * @param { string[] } path Chemin courant.
      * */
     renderPath(path) {
-        this.path.innerText = `${path[0]} / ${path[1]} / ${path[2]}`
+        this.path.innerHTML = ""
+        let elem = document.createElement("locfragment")
+        this.path.appendChild(elem)
+
+        riot.mount(elem, {
+            msg: path.filter(Boolean).join(" ► ")
+        }, "locfragment")
+
         log("Loc->View",  `Chemin change ${path}`)
     }
 
@@ -69,13 +70,13 @@ export default class View {
      * */
     renderEtab(data) {
         this.etab.innerHTML =
-            "<tr>" +
+            "<tbody>" +
             "    <th>Nom</th>" +
             "    <th>Ville</th>" +
-            "    <th>Dept</th>" +
+            "    <th>Departement</th>" +
             "    <th>Moyenne</th>" +
             "    <th>Selectivite</th>" +
-            "</tr>"
+            "</tbody>"
 
         data.forEach((e) => {
             let etab = e.fields.g_ea_lib_vx

src/components/global/etablanalytics/etablanalytics.riot

@@ -1,6 +1,6 @@
 <etablanalytics>
     <style>
-        etablanalytics {
+        #etablanalytics {
             width: 65vw;
             height: 28vh;
             max-height: 28vh;
@@ -8,8 +8,8 @@
             overflow: auto;
         }
 
-        etablanalytics
+        #etablanalytics
-        #etab {
+        #etablanalytics-list {
             font-size: 17px;
             color: white;
             font-weight: bold;
@@ -17,8 +17,8 @@
             width: 100%;
         }
 
-        etablanalytics
+        #etablanalytics
-        #etab
+        #etablanalytics-list
         tr
         th {
             background: #344D59;
@@ -28,8 +28,8 @@
             text-align: center;
         }
 
-        etablanalytics
+        #etablanalytics
-        #etab
+        #etablanalytics-list
         tr
         td {
             text-align: center;
@@ -38,12 +38,12 @@
         }
     </style>
 
-    <div>
+    <div id="etablanalytics">
-        <table id="etab">
+        <table id="etablanalytics-list">
             <tr>
                 <th>Nom</th>
                 <th>Ville</th>
-                <th>Dept</th>
+                <th>Departement</th>
                 <th>Moyenne</th>
                 <th>Selectivite</th>
             </tr>

src/components/global/generalytics/generalytics.riot

@@ -2,6 +2,7 @@
     <style>
         #generalytics {
             width: 65vw;
+            max-width: 65vw;
             height: 55vh;
             max-height: 57vh;
             font-weight: bold;

src/components/global/loc/loc.riot

@@ -1,21 +1,21 @@
 <loc>
     <style>
-        loc {
+        #loc {
             width: 100%;
             height: 3vw;
+            max-height: 3vw;
+            max-width: 100%;
             display: flex;
             justify-content: center;
             align-items: center;
         }
-
-        loc
-        #location {
-            padding: 8px;
-            background: #344D59;
-            color: white;
-            font-weight: bold;
-        }
     </style>
 
-    <span id="location"> </span>
+    <div id="loc"></div>
+
+    <script>
+        export default {
+            props: ["msg"]
+        }
+    </script>
 </loc>

src/components/global/loc/locfragment.riot

@@ -0,0 +1,18 @@
+<locfragment>
+    <style>
+        #locfragment {
+            padding: 8px;
+            background: #344D59;
+            color: white;
+            font-weight: bold;
+        }
+    </style>
+
+    <span id="locfragment">{ this.props.msg }</span>
+
+    <script>
+        export default {
+            props: ["msg"]
+        }
+    </script>
+</locfragment>

src/components/global/selector/selector.riot

@@ -53,58 +53,6 @@
             display: flex;
             flex-direction: column;
         }
-
-        #selector
-        #selector-list-container
-        #selector-list-zone
-        .selector-list-inner {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            align-items: center;
-            justify-content: space-between;
-            font-weight: bold;
-            list-style-type: none;
-        }
-
-        #selector
-        #selector-list-container
-        #selector-list-zone
-        .selector-list-inner
-        .selector-list-names {
-            text-decoration: none;
-            color: white;
-            justify-self: center;
-            padding: 4px;
-        }
-
-        #selector
-        #selector-list-container
-        #selector-list-zone
-        .selector-list-inner
-        .selector-list-names:hover {
-            background: #344D59;
-            cursor: pointer;
-            transition: 0.5s;
-            transform: scale(1.05);
-        }
-
-        #selector
-        #selector-list-container
-        #selector-list-zone
-        .selector-list-inner
-        .selector-list-counts {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: white;
-            background: green;
-            padding: 3px;
-            text-align: center;
-            border-radius: 4px;
-            width: 4vw;
-            height: 2vw;
-        }
     </style>
 
     <div id="selector">
@@ -118,8 +66,7 @@
         </div>
 
         <div id="selector-list-container">
-            <ul id="selector-list-zone">
+            <ul id="selector-list-zone"> </ul>
-            </ul>
         </div>
     </div>
 </selector>

src/components/global/selector/selectorfragment.riot

@@ -0,0 +1,53 @@
+<selectorfragment>
+    <style>
+        #selectorfragment-container {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            font-weight: bold;
+            list-style-type: none;
+        }
+
+        #selectorfragment-container
+        .selectorfragment-name {
+            text-decoration: none;
+            color: white;
+            justify-self: center;
+            padding: 4px;
+        }
+
+        #selectorfragment-container
+        .selectorfragment-name:hover {
+            background: #344D59;
+            cursor: pointer;
+            transition: 0.5s;
+            transform: scale(1.05);
+        }
+
+        #selectorfragment-container
+        #selectorfragment-count {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            background: green;
+            padding: 0.5vw;
+            text-align: center;
+            border-radius: 4px;
+            width: auto;
+            height: auto;
+        }
+    </style>
+
+    <li id="selectorfragment-container">
+        <a id={ this.props.idd } class="selectorfragment-name">{ this.props.name }</a>
+        <span id="selectorfragment-count">{ this.props.count }</span>
+    </li>
+
+    <script>
+        export default {
+            props: ["name", "count", "idd"]
+        }
+    </script>
+</selectorfragment>

src/pages/home.riot

@@ -1,25 +1,25 @@
 <home>
 	<style>
-		#main-container {
+		#home {
 			position: relative;
 			display: flex;
 			flex-direction: row;
 			justify-content: space-around;
 		}
 
-		#main-container
+		#home
 		#right, #left generalytics, #left etablanalytics, #left loc {
 			box-shadow: 0px 0px 9px 1px black;
 			background: #7A90A4;
 		}
 
-		#main-container
+		#home
 		#right {
 			align-self: flex-start;
 			margin-right: 3vw;
 		}
 
-		#main-container
+		#home
 		#left {
 			display: flex;
 			flex-direction: column;
@@ -27,7 +27,7 @@
 			align-self: center;
 		}
 
-		#main-container
+		#home
 		#left
 		generalytics {
 			margin-bottom: 1.3vw;
@@ -35,23 +35,7 @@
 		}
 	</style>
 
-	<script>
+	<div id="home">
-		import * as riot from "riot";
-		import start from "../components/global/api/api.js"
-
-		export default {
-			onMounted() {
-				start()
-			}
-		}
-
-		riot.mount("selector", document.getElementById("right"))
-		riot.mount("loc", document.getElementById("left"))
-		riot.mount("generalytics", document.getElementById("left"))
-		riot.mount("etablanalytics", document.getElementById("left"))
-	</script>
-
-	<div id="main-container">
 		<div id="right">
 			<selector />
 		</div>
@@ -62,4 +46,15 @@
 			<etablanalytics />
 		</div>
 	</div>
+
+	<script>
+		import * as riot from "riot";
+		import start from "../components/global/api/api.js"
+
+		export default {
+			onMounted() {
+				start()
+			}
+		}
+	</script>
 </home>