Skip to content
Snippets Groups Projects
Commit c4c8399e authored by marcantoinem's avatar marcantoinem
Browse files

Start implementing feedback

parent dd41fe48
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 88 additions and 39 deletions
aep-schedule-website/src/frontend/components/common/number_input.rs
+ 1
− 1
View file @ c4c8399e
......@@ -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">
......
aep-schedule-website/src/frontend/components/options/optimizations.rs
+ 3
− 3
View file @ c4c8399e
......@@ -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();
......
aep-schedule-website/src/frontend/components/options/todo.rs
+ 25
− 11
View file @ c4c8399e
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>
......
aep-schedule-website/src/frontend/components/schedule.rs
+ 40
− 20
View file @ c4c8399e
......@@ -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>
}
}
aep-schedule-website/src/frontend/pages/generator.rs
+ 1
− 1
View file @ c4c8399e
......@@ -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/>
......
aep-schedule-website/style/main.scss
+ 1
− 1
View file @ c4c8399e
......@@ -125,7 +125,7 @@ main {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
gap: 2rem;
padding: 0.25rem;
background-color: $light-background;
}
......
aep-schedule-website/style/schedule.scss
+ 17
− 2
View file @ c4c8399e
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment