Improve number input

aep-schedule-website/src/backend/state.rs

@@ -36,16 +36,20 @@ pub struct AppState {
 
 impl AppState {
     pub async fn new(leptos_options: LeptosOptions, routes: Vec<RouteListing>) -> Self {
-        let client = reqwest::Client::builder()
-            .user_agent("NCSA Mosaic/1.0 (X11;SunOS 4.1.4 sun4m)")
-            .build()
-            .unwrap();
-        let horsage = client.get(HORSAGE_URL).send().await.unwrap();
-        let horsage = horsage.text().await.unwrap();
-        let fermes = client.get(FERME_URL).send().await.unwrap();
-        let fermes = fermes.text().await.unwrap();
-        fs::write("horsage.csv", horsage).expect("Unable to write file");
-        fs::write("fermes.csv", fermes).expect("Unable to write file");
+        #[cfg(not(debug_assertions))]
+        {
+            // Don't spam Poly when reloading the website in debug mode
+            let client = reqwest::Client::builder()
+                .user_agent("NCSA Mosaic/1.0 (X11;SunOS 4.1.4 sun4m)")
+                .build()
+                .unwrap();
+            let horsage = client.get(HORSAGE_URL).send().await.unwrap();
+            let horsage = horsage.text().await.unwrap();
+            let fermes = client.get(FERME_URL).send().await.unwrap();
+            let fermes = fermes.text().await.unwrap();
+            fs::write("horsage.csv", horsage).expect("Unable to write file");
+            fs::write("fermes.csv", fermes).expect("Unable to write file");
+        }
         let horsage = BufReader::new(File::open("horsage.csv").unwrap());
         let fermes = BufReader::new(File::open("fermes.csv").unwrap());
         let courses = Arc::new(RwLock::new(Courses::from_csv(horsage, fermes)));

aep-schedule-website/src/frontend/components/common/number_input.rs

 use leptos::*;
 
 #[component]
-pub fn NumberInput(#[prop(optional, into)] value: RwSignal<u8>, max: u8) -> impl IntoView {
+pub fn NumberInput<F>(
+    #[prop(optional, into)] value: RwSignal<u8>,
+    max: u8,
+    label: &'static str,
+    submit: F,
+) -> impl IntoView
+where
+    F: Fn() + Copy + 'static,
+{
     let on_input = move |ev| {
         value.set(event_target_value(&ev).parse::<u8>().unwrap());
+        submit();
+    };
+
+    let minus = move |_| {
+        let v = value.get();
+        if v > 0 {
+            value.set(v - 1);
+            submit();
+        }
+    };
+
+    let plus = move |_| {
+        let v = value.get();
+        if v != u8::MAX {
+            value.set(v + 1);
+            submit();
+        }
+        submit();
     };
 
     view! {
-        <input
-            on:input=on_input
-            type="number"
-            min="0"
-            max=max
-            prop:value=value
-            class="number-input"
-        />
+        <div class="flex flex-row gap-8 items-center">
+            <p class="text-white font-sans">{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">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
+                    </svg>
+                </button>
+                <input
+                    type="numeric"
+                    class="bg-gray-50 border-x-0 border-gray-300 h-7 text-center text-gray-900 text-sm focus:ring-amber-500 focus:border-amber-500 block w-full py-2.5"
+                    placeholder="0"
+                    on:input=on_input
+                    type="number"
+                    min="0"
+                    max=max
+                    prop:value=value
+                    required />
+                <button on:click=plus type="button" class="bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-e-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 18">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
     }
 }

aep-schedule-website/src/frontend/components/options/form.rs

@@ -28,7 +28,7 @@ pub fn OptionsForms(action: Action<SchedulesOptions, Vec<Schedule>>) -> impl Int
     view! {
         <CoursesSelector state=state submit/>
         <span class="grow"></span>
-        <div class="row-container input-item auto-bottom"><p>"Nombre de conflits maximum"</p><NumberInput value=state.max_nb_conflicts max=127/></div>
+        <NumberInput value=state.max_nb_conflicts max=127 label="Nombre de période de cours en conflits maximum: " submit/>
         <SelectOptimizations state=state submit/>
         <button on:click=submit_mobile class="lg:hidden 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>
     }

aep-schedule-website/src/frontend/components/options/optimizations.rs

@@ -30,7 +30,7 @@ where
             <div class="col-container">
                 <House weight=weight_house size="10vh"/>
                 <p>"Plus de congés"</p>
-                <input type="range" min="0" max="4" class="opti-slider" prop:value=state.day_off  on:input=move |ev| {
+                <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();
                 }/>
@@ -41,7 +41,7 @@ where
                     <Sun weight=weight_morning size="10vh"/>
                 </div>
                 <p>"Cours plus tôt ou plus tard"</p>
-                <input type="range" min="-4" max="4" class="opti-slider" prop:value=state.morning  on:input=move |ev| {
+                <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();
                 }/>
@@ -49,7 +49,7 @@ where
             <div class="col-container">
                 <CalendarCheck weight=weight_finish size="10vh"/>
                 <p>"Finir plus tôt"</p>
-                <input type="range" min="0" max="4" class="opti-slider" prop:value=state.finish_early  on:input=move |ev| {
+                <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();
                 }/>