Get basic Sessions component to work

This commit is contained in:
Leonard Steppy 2025-02-14 01:58:08 +01:00
parent d94392362a
commit ce1eb3a0d4
5 changed files with 39 additions and 16 deletions

View File

@ -10,4 +10,4 @@ chrono = { version = "0.4", features = ["serde"] }
leptos = { version = "0.7", features = ["csr"] }
console_error_panic_hook = "0.1.7"
serde = { version = "1.0", features = ["derive"] }
gloo-net = "0.6.0"
gloo-timers = { version = "0.3", features = ["futures"] }

View File

@ -1,3 +0,0 @@
{
"motd": "Hello world!"
}

View File

@ -2,7 +2,12 @@
<html>
<head>
<title>Band Sessions</title>
<link data-trunk rel="copy-file" href="config.json"/>
<link data-trunk rel="copy-file" href="session_config.json"/>
<style>
.red {
color:red;
}
</style>
</head>
<body></body>
</html>

3
session_config.json Normal file
View File

@ -0,0 +1,3 @@
{
"motd": "Proben Sonntags um 10:00 Uhr und Dienstags um 18:30 Uhr"
}

View File

@ -3,33 +3,51 @@ use leptos::server_fn::request::browser::Request;
use serde::{Deserialize, Serialize};
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct Config {
pub struct SessionConfig {
pub motd: String,
}
#[component]
pub fn App() -> impl IntoView {
let (count, set_count) = signal(0);
let config = LocalResource::new(load_config);
let session_config = LocalResource::new(load_config);
let session_dates = move || {
session_config
.get()
.as_deref()
.cloned()
.map(|config| match config {
Ok(config) => view! { <Sessions config></Sessions> }.into_any(),
Err(e) => {
view! { <p class="red">{format!("Failed to load Sessions config: {e}")}</p> }.into_any()
}
})
};
view! {
<div style="background-color: #292b29; color: #ffffff; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;">
<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%;">
<h1>"Anstehende Proben Termine"</h1>
<p>"TODO motd"</p>
<button on:click=move |_| { *set_count.write() += 1 }>"Click counter (" {count} ")"</button>
</div>
<Suspense fallback=|| "Laden...">{session_dates}</Suspense>
</div>
}
}
async fn load_config() -> std::result::Result<Config, String> {
let response = Request::get("/config.json")
#[component]
fn Sessions(config: SessionConfig) -> impl IntoView {
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%;">
<h1>"Anstehende Proben Termine"</h1>
<p>{config.motd}</p>
</div>
}
}
async fn load_config() -> Result<SessionConfig, String> {
let response = Request::get("/session_config.json")
.send()
.await
.map_err(|e| format!("HTTP error: {e}"))?;
let config = response
.json::<Config>()
.json::<SessionConfig>()
.await
.map_err(|e| format!("JSON error: {e}"))?;
Ok(config)