version finale avec comparateur complet et amélioration UX

parcoursup/app.riot

@@ -57,6 +57,8 @@
           </div>
         </div>
 
+        <button onclick={ clearSelection }>Vider la sélection</button>
+
         <hr />
 
         <h3>Formations sélectionnées</h3>
@@ -75,7 +77,12 @@
             Pro { f.pctPro }%
           </p>
 
-          <p><b>Estimation :</b> { estimateFormation(f) }</p>
+          <p>
+            <b>Estimation :</b>
+            <span class={ getEstimateClass(f) }>
+              { estimateFormation(f) }
+            </span>
+          </p>
 
           <button onclick={ () => removeFromSelection(f.id) }>
             Retirer
@@ -199,6 +206,14 @@
         localStorage.setItem('selectionFormations', JSON.stringify(newSelection))
       },
 
+      clearSelection() {
+        this.update({
+          selectedFormations: []
+        })
+
+        localStorage.setItem('selectionFormations', JSON.stringify([]))
+      },
+
       updateNote(e) {
         this.update({ note: Number(e.target.value) })
       },
@@ -241,6 +256,14 @@
         if (score >= 5) return 'Favorable'
         if (score >= 3) return 'Possible'
         return 'Difficile'
+      },
+
+      getEstimateClass(f) {
+        const result = this.estimateFormation(f)
+
+        if (result === 'Favorable') return 'estimate favorable'
+        if (result === 'Possible') return 'estimate possible'
+        return 'estimate difficile'
       }
     }
   </script>

parcoursup/style.css

@@ -102,6 +102,32 @@ body {
     overflow: hidden;
   }
   
+  .estimate {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-weight: bold;
+    margin-left: 6px;
+  }
+  
+  .favorable {
+    background: #d9f7e8;
+    color: #146c43;
+    border: 1px solid #9ed8b8;
+  }
+  
+  .possible {
+    background: #fff3cd;
+    color: #8a6d1d;
+    border: 1px solid #eed58f;
+  }
+  
+  .difficile {
+    background: #f8d7da;
+    color: #842029;
+    border: 1px solid #e4aeb5;
+  }
+  
   .map {
     height: 420px;
     width: 100%;