feat: implement infinite scroll

aep-schedule-website/src/frontend/pages/generator.rs

@@ -32,7 +32,21 @@ pub fn GeneratorPage() -> impl IntoView {
         <aside class="left-panel" class=("hide-left-panel", hide)>
             <OptionsForms/>
         </aside>
-        <section class="right-panel">
+        <section class="right-panel" on:scroll=move |ev| {
+            use web_sys::wasm_bindgen::JsCast;
+
+            let target = ev
+                .target()
+                .unwrap()
+                .dyn_into::<web_sys::Element>()
+                .unwrap();
+            let scroll_top = target.scroll_top() as f64;
+            logging::log!("{} {}", scroll_top, target.client_height());
+            if (scroll_top + target.client_height() as f64 >= target.scroll_height() as f64 - 500.0) && state.step.get() == 5 {
+                state.regenerate();
+            }
+
+        }>
             <SchedulesComponent/>
         </section>
         <Notifications modal set_modal/>

aep-schedule-website/src/frontend/state/mod.rs

@@ -23,6 +23,7 @@ pub struct OptionState {
     pub step: RwSignal<u8>,
     pub hide: RwSignal<bool>,
     pub schedule: RwSignal<Vec<Schedule>>,
+    pub max_size: StoredValue<usize>,
 }
 
 impl OptionState {
@@ -67,6 +68,18 @@ impl OptionState {
     }
 
     pub fn generate(&self) {
+        self.max_size.set_value(5);
+        self.gen();
+    }
+
+    pub fn regenerate(&self) {
+        self.max_size.update_value(|size| {
+            *size = std::cmp::max(*size * 2, 2usize.pow(16));
+        });
+        self.gen();
+    }
+
+    fn gen(&self) {
         let mut schedule_option: SchedulesOptions = self.into();
         schedule_option.apply_personal_schedule();
         let schedules = schedule_option.get_schedules().into_sorted_vec();
@@ -107,6 +120,7 @@ impl Default for OptionState {
             step: create_rw_signal(0),
             schedule: create_rw_signal(vec![]),
             hide: create_rw_signal(false),
+            max_size: store_value(5usize),
         }
     }
 }
@@ -121,6 +135,7 @@ impl From<&OptionState> for SchedulesOptions {
             .into_iter()
             .map(|c| c.into())
             .collect();
+        let max_size = state.max_size.get_value();
         let max_nb_conflicts = state.max_nb_conflicts.get();
         let evaluation = EvaluationOption {
             day_off: state.day_off.get(),
@@ -133,7 +148,7 @@ impl From<&OptionState> for SchedulesOptions {
             max_nb_conflicts,
             evaluation,
             user_conflicts,
-            max_size: 10,
+            max_size,
         }
     }
 }

aep-schedule-website/style/constant.scss

 $background-color: #151420;
-$highlight-color: #F28A00;
+$highlight-color: rgb(245 158 11);
 $highlight-text: #0F1741;
 $tern-color: #daa662;
 $tern-text: #3b3b3b;
@@ -11,9 +11,10 @@ $success: #0FCC3B;
 
 @keyframes fadeIn {
 	0% {
-	  opacity: 0;
+		opacity: 0;
 	}
+
 	100% {
-	  opacity: 1;
+		opacity: 1;
 	}
 }
\ No newline at end of file

aep-schedule-website/style/main.scss

@@ -125,6 +125,8 @@ main {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	overflow-y: auto;
+	max-height: calc(100vh - 3em);
 	gap: 3rem;
 	padding: 1rem;
 	background-color: $light-background;