From c4c8399ea455b6a691b957f09b02cd3f9d6948d0 Mon Sep 17 00:00:00 2001
From: marcantoinem <marc-antoine.m@outlook.com>
Date: Sat, 27 Jul 2024 16:12:52 -0400
Subject: [PATCH] Start implementing feedback
---
.../components/common/number_input.rs | 2 +-
.../components/options/optimizations.rs | 6 +-
.../src/frontend/components/options/todo.rs | 36 +++++++----
.../src/frontend/components/schedule.rs | 60 ++++++++++++-------
.../src/frontend/pages/generator.rs | 2 +-
aep-schedule-website/style/main.scss | 2 +-
aep-schedule-website/style/schedule.scss | 19 +++++-
7 files changed, 88 insertions(+), 39 deletions(-)
diff --git a/aep-schedule-website/src/frontend/components/common/number_input.rs b/aep-schedule-website/src/frontend/components/common/number_input.rs
index 718ad19..5526b85 100644
--- a/aep-schedule-website/src/frontend/components/common/number_input.rs
+++ b/aep-schedule-website/src/frontend/components/common/number_input.rs
@@ -34,7 +34,7 @@ where
view! {
<div class="flex flex-row gap-8 items-center">
- <p class="text-white font-sans">{label}</p>
+ <p class="text-white font-sans font-medium tracking-tight">{label}</p>
<div class="relative flex items-center max-w-20">
<button on:click=minus type="button" class="bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-s-lg p-1 h-7 focus:ring-gray-100 focus:ring-2 focus:outline-none">
<svg class="w-3 h-3 text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
diff --git a/aep-schedule-website/src/frontend/components/options/optimizations.rs b/aep-schedule-website/src/frontend/components/options/optimizations.rs
index e945853..3c27cd8 100644
--- a/aep-schedule-website/src/frontend/components/options/optimizations.rs
+++ b/aep-schedule-website/src/frontend/components/options/optimizations.rs
@@ -29,7 +29,7 @@ where
<div class="three-col">
<div class="col-container">
<House weight=weight_house size="10vh"/>
- <p>"Plus de congés"</p>
+ <p class="font-sans font-medium tracking-tight">"Plus de congés"</p>
<input type="range" min="0" max="4" class="opti-slider accent-amber-500" prop:value=state.day_off on:input=move |ev| {
state.day_off.set(event_target_value(&ev).parse::<u8>().unwrap());
submit();
@@ -40,7 +40,7 @@ where
<SunHorizon weight=weight_early size="10vh"/>
<Sun weight=weight_morning size="10vh"/>
</div>
- <p>"Cours plus tôt ou plus tard"</p>
+ <p class="font-sans font-medium tracking-tight">"Cours plus tôt ou plus tard"</p>
<input type="range" min="-4" max="4" class="opti-slider accent-amber-500" prop:value=state.morning on:input=move |ev| {
state.morning.set(event_target_value(&ev).parse::<i8>().unwrap());
submit();
@@ -48,7 +48,7 @@ where
</div>
<div class="col-container">
<CalendarCheck weight=weight_finish size="10vh"/>
- <p>"Finir plus tôt"</p>
+ <p class="font-sans font-medium tracking-tight">"Finir plus tôt"</p>
<input type="range" min="0" max="4" class="opti-slider accent-amber-500" prop:value=state.finish_early on:input=move |ev| {
state.finish_early.set(event_target_value(&ev).parse::<u8>().unwrap());
submit();
diff --git a/aep-schedule-website/src/frontend/components/options/todo.rs b/aep-schedule-website/src/frontend/components/options/todo.rs
index 40e1e7f..be3cd94 100644
--- a/aep-schedule-website/src/frontend/components/options/todo.rs
+++ b/aep-schedule-website/src/frontend/components/options/todo.rs
@@ -1,3 +1,5 @@
+use std::cmp::Ordering;
+
use aep_schedule_generator::algorithm::{generation::SchedulesOptions, schedule::Schedule};
use leptos::*;
@@ -6,12 +8,25 @@ use crate::frontend::{
};
#[component]
-pub fn Step(n: u8, title: &'static str, description: &'static str) -> impl IntoView {
+pub fn Step(
+ n: u8,
+ step: ReadSignal<u8>,
+ title: &'static str,
+ description: &'static str,
+) -> impl IntoView {
+ let bg_color = move || {
+ match n.cmp(&step.get()) {
+ Ordering::Less => "flex transition-colors items-center justify-center w-10 h-10 border rounded-full bg-green-400",
+ Ordering::Greater => "flex transition-colors items-center justify-center w-10 h-10 border rounded-full",
+ Ordering::Equal => "flex transition-colors items-center justify-center w-10 h-10 border rounded-full bg-amber-400",
+ }
+ };
+
view! {
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
- <div class="flex items-center justify-center w-10 h-10 border rounded-full">
+ <div class=bg_color>
<svg class="w-4 text-gray-600" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<line fill="none" stroke-miterlimit="10" x1="12" y1="2" x2="12" y2="22"></line>
<polyline fill="none" stroke-miterlimit="10" points="19,15 12,22 5,15"></polyline>
@@ -40,15 +55,17 @@ pub fn Todo(action: Action<SchedulesOptions, Vec<Schedule>>) -> impl IntoView {
action.dispatch((&state).into())
};
+ let (step, set_step) = create_signal(3);
+
view! {
<div class="px-4 py-4 mx-auto">
<div class="grid gap-6 row-gap-10">
<div class="lg:py-6 lg:pr-16">
- <Step n=1 title="Ajoutez vos cours" description="Utilisez la barre de recherche à gauche pour trouver et sélectionner vos cours. Une fois les cours sélectionnés, ils apparaîtront comme un onglet."/>
- <Step n=2 title="Forcer des heures libres" description="Sélectionnez une plage de temps à avoir absolument libre en pressant et relâchant sur votre horaire personnel."/>
- <Step n=3 title="Ouvrez des sections" description="Assurez d'avoir au moins une section d'ouverte pour la théorie et la pratique. En sélectionnant l'onglet du cours et en appuyant sur les sections."/>
- <Step n=4 title="Ajustez les paramètres" description="Bougez les curseurs en bas pour ajuster vos préférences. Vous pouvez choisir d'avoir plus de congés, de commencer en moyenne les cours plus tôt ou plus tard, ou de finir en moyenne plus tôt."/>
- <div class="flex">
+ <Step n=1 step title="Ajoutez vos cours" description="Utilisez la barre de recherche à gauche pour trouver et sélectionner vos cours. Une fois les cours sélectionnés, ils apparaîtront comme un onglet."/>
+ <Step n=2 step title="Forcer des heures libres" description="Sélectionnez une plage de temps à avoir absolument libre en pressant et relâchant sur votre horaire personnel."/>
+ <Step n=3 step title="Ouvrez des sections" description="Assurez d'avoir au moins une section d'ouverte pour la théorie et la pratique. En sélectionnant l'onglet du cours et en appuyant sur les sections."/>
+ <Step n=4 step title="Ajustez les paramètres" description="Bougez les curseurs en bas pour ajuster vos préférences. Vous pouvez choisir d'avoir plus de congés, de commencer en moyenne les cours plus tôt ou plus tard, ou de finir en moyenne plus tôt."/>
+ <div class="flex items-center">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 border rounded-full">
@@ -58,10 +75,7 @@ pub fn Todo(action: Action<SchedulesOptions, Vec<Schedule>>) -> impl IntoView {
</div>
</div>
</div>
- <div class="pt-1">
- <button on:click=submit class="select-none rounded-lg bg-amber-500 py-2 text-xl px-4 w-64 self-center text-center align-middle text-black shadow-md shadow-amber-500/20 transition-all hover:shadow-lg hover:shadow-amber-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">"Générer les horaires"</button>
- <p class="text-gray-700"></p>
- </div>
+ <button on:click=submit class="select-none rounded-lg bg-amber-500 py-1 text-lg font-sans font-semibold px-2 w-64 self-center text-center align-middle text-black shadow-md shadow-amber-500/20 transition-all hover:shadow-lg hover:shadow-amber-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">"Générer les horaires"</button>
</div>
</div>
</div>
diff --git a/aep-schedule-website/src/frontend/components/schedule.rs b/aep-schedule-website/src/frontend/components/schedule.rs
index b2885c0..e90f77c 100644
--- a/aep-schedule-website/src/frontend/components/schedule.rs
+++ b/aep-schedule-website/src/frontend/components/schedule.rs
@@ -11,12 +11,26 @@ use aep_schedule_generator::{
use leptos::{html::A, *};
#[component]
-pub fn Course<'a>(course: &'a TakenCourse) -> impl IntoView {
+pub fn Course<'a>(i: usize, course: &'a TakenCourse) -> impl IntoView {
let theo_group = course.theo_group().map(|g| format!("T: {}", g.number));
let lab_group = course.lab_group().map(|g| format!("L: {}", g.number));
+ let color_box = match i % 8 {
+ 0 => "w-5 h-5 color1",
+ 1 => "w-5 h-5 color2",
+ 2 => "w-5 h-5 color3",
+ 3 => "w-5 h-5 color4",
+ 4 => "w-5 h-5 color5",
+ 5 => "w-5 h-5 color6",
+ 6 => "w-5 h-5 color7",
+ _ => "w-5 h-5 color8",
+ };
+
view! {
<tr>
- <td>{course.sigle.to_string()}</td>
+ <td class="flex items-center gap-1">
+ <div class=color_box></div>
+ <span>{course.sigle.to_string()}</span>
+ </td>
<td>{course.name.to_string()}</td>
<td>{theo_group}</td>
<td>{lab_group}</td>
@@ -33,11 +47,15 @@ fn PeriodEvent<'a>(
) -> impl IntoView {
let location = period.hours.to_string() + " - " + period.room.as_str();
let sigle = course.sigle.to_string() + " - " + period_type;
- let mut class = match i % 4 {
+ let mut class = match i % 8 {
0 => " color1".to_string(),
1 => " color2".to_string(),
2 => " color3".to_string(),
- _ => " color4".to_string(),
+ 3 => " color4".to_string(),
+ 4 => " color5".to_string(),
+ 5 => " color6".to_string(),
+ 6 => " color7".to_string(),
+ _ => " color8".to_string(),
};
match period.week_nb {
WeekNumber::B1 => class.push_str(" b1"),
@@ -100,21 +118,23 @@ pub fn ScheduleComponent(schedule: Schedule, calendar: Calendar) -> impl IntoVie
let link: NodeRef<A> = create_node_ref();
view! {
- <a class="hidden" download="cours.ics" href=move || download.get() node_ref=link></a>
- <table class="cours">
- {schedule.taken_courses.iter().map(|c| view!{<Course course={c} />}).collect_view()}
- </table>
- <Schedule last_day=schedule.last_day>
- {schedule.taken_courses.iter().enumerate().map(|(i, c)| view!{<CoursePeriods i course=c />}).collect_view()}
- </Schedule>
- <button class="button-download" on:click=move |_| {
- let ics = schedule2.generate_ics(&calendar);
- let url = url_escape::encode_fragment(&ics);
- set_download("data:text/plain;charset=utf-8,".to_string() + &url);
- link().unwrap().click();
- }>
- <Download weight=IconWeight::Regular size="3vh"/>
- <span>"Télécharger le calendrier de cet horaire"</span>
- </button>
+ <div class="flex flex-col w-full items-center">
+ <a class="hidden" download="cours.ics" href=move || download.get() node_ref=link></a>
+ <table class="cours">
+ {schedule.taken_courses.iter().enumerate().map(|(i, c)| view!{<Course i course={c} />}).collect_view()}
+ </table>
+ <Schedule last_day=schedule.last_day>
+ {schedule.taken_courses.iter().enumerate().map(|(i, c)| view!{<CoursePeriods i course=c />}).collect_view()}
+ </Schedule>
+ <button class="button-download flex" on:click=move |_| {
+ let ics = schedule2.generate_ics(&calendar);
+ let url = url_escape::encode_fragment(&ics);
+ set_download("data:text/plain;charset=utf-8,".to_string() + &url);
+ link().unwrap().click();
+ }>
+ <Download weight=IconWeight::Regular size="3vh"/>
+ <span>"Télécharger le calendrier de cet horaire"</span>
+ </button>
+ </div>
}
}
diff --git a/aep-schedule-website/src/frontend/pages/generator.rs b/aep-schedule-website/src/frontend/pages/generator.rs
index 8d3c6a7..d03cd86 100644
--- a/aep-schedule-website/src/frontend/pages/generator.rs
+++ b/aep-schedule-website/src/frontend/pages/generator.rs
@@ -36,7 +36,7 @@ pub fn GeneratorPage() -> impl IntoView {
<aside class="left-panel" class=("hide-left-panel", hide)>
<OptionsForms action=action/>
</aside>
- <section class="right-panel">
+ <section class="right-panel ">
<SchedulesComponent action=action read_signal=action.value()/>
</section>
<Notifications modal set_modal/>
diff --git a/aep-schedule-website/style/main.scss b/aep-schedule-website/style/main.scss
index 2232433..680a920 100644
--- a/aep-schedule-website/style/main.scss
+++ b/aep-schedule-website/style/main.scss
@@ -125,7 +125,7 @@ main {
display: flex;
flex-direction: column;
align-items: center;
- gap: 10px;
+ gap: 2rem;
padding: 0.25rem;
background-color: $light-background;
}
diff --git a/aep-schedule-website/style/schedule.scss b/aep-schedule-website/style/schedule.scss
index 9bc7da7..7014337 100644
--- a/aep-schedule-website/style/schedule.scss
+++ b/aep-schedule-website/style/schedule.scss
@@ -20,7 +20,6 @@ $days: $time-width 10px repeat(5, 1fr);
width: 100%;
display: grid;
grid-template-rows: $days-height auto;
- margin-bottom: 0.4em;
}
.days {
@@ -49,7 +48,7 @@ $days: $time-width 10px repeat(5, 1fr);
align-self: end;
font-size: 80%;
position: relative;
- bottom: -1ex;
+ bottom: -1.4ex;
color: black;
padding-right: 2px;
}
@@ -130,4 +129,20 @@ $days: $time-width 10px repeat(5, 1fr);
.color4 {
background-color: #B91E32;
+}
+
+.color5 {
+ background-color: #950de4;
+}
+
+.color6 {
+ background-color: #007706;
+}
+
+.color7 {
+ background-color: #ffd20b;
+}
+
+.color8 {
+ background-color: #ff008c;
}
\ No newline at end of file
--
GitLab