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>