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 718ad19ee8e4954d13e34ace71292ec33b491dca..5526b856a02650f11521b80db399c104588455e7 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 e945853fd29229cf79e9d544d7a1a5a4664f97b9..3c27cd8c7e0d30a7caf16a8297205991b74bcafd 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 40e1e7f1ea956c9046c8f29fec5828bb9f0d1d3c..be3cd949ea854b71ce485898a7914530af7ec4c4 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 b2885c03ccc5b5f71a054821da44b6b539e29d81..e90f77c989e924426ee65265c6a1a78d751748b6 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 8d3c6a774dfef08c58c5a615e950f04c5383d03c..d03cd86e51523b1b991bff670a386142d7eeb8a7 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 22324334f105575330ad798e2c55c958371fe38f..680a920ec0545427a62799f94fa3cd2c0e6dced9 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 9bc7da7008d09394da6b985d255215fb2623c45c..701433779957dc84b1500c1c9d3ac350d6be7651 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