Add button to load more session dates

index.html

@@ -6,6 +6,9 @@
       .red {
         color:red;
       }
+      ul {
+        list-style-position: inside;
+      }
     </style>
     <link data-trunk rel="rust" data-bin="jana_sessions_webpage" />
   </head>

src/webpage.rs

@@ -1,3 +1,6 @@
+use crate::localize_day;
+use crate::session_date_calculator::{DayIter, NthWeekday};
+use chrono::Weekday;
 use leptos::prelude::*;
 use leptos::server_fn::request::browser::Request;
 use serde::{Deserialize, Serialize};
@@ -32,10 +35,29 @@ pub fn App() -> impl IntoView {
 
 #[component]
 fn Sessions(config: SessionConfig) -> impl IntoView {
+  let mut session_iter = DayIter::default().filter(move |day| {
+    config
+      .sessions
+      .iter()
+      .any(|session_day| session_day.matches(day))
+  });
+  let (session_dates, set_session_dates) =
+    signal(session_iter.by_ref().take(2).collect::<Vec<_>>());
+
   view! {
-    <div style="background-color: #196e0a; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-align: center; max-width: 400px; width: 100%;">
+    <div style="background-color: #196e0a; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-align: center; max-width: 600px; width: 100%;">
       <h1>"Anstehende Proben Termine"</h1>
       <p>{config.motd}</p>
+      <ul>
+        <For
+          each=move || session_dates.get()
+          key=|day| day.date
+          children=move |day| view! { <li>{localize_day(&day)}</li> }
+        />
+      </ul>
+      <button on:click=move |_| {
+      set_session_dates.write().extend(session_iter.by_ref().take(3));
+    }>"Mehr Anzeigen"</button>
     </div>
   }
 }
@@ -67,12 +89,17 @@ where
 #[serde(default)]
 pub struct SessionConfig {
   pub motd: String,
+  pub sessions: Vec<NthWeekday>,
 }
 
 impl Default for SessionConfig {
   fn default() -> Self {
     Self {
       motd: "Proben Dienstags um 18:30 Uhr und Sonntags um 10:00 Uhr".to_string(),
+      sessions: vec![
+        NthWeekday::new(1, Weekday::Sun),
+        NthWeekday::new(3, Weekday::Tue),
+      ],
     }
   }
 }