Get basic Sessions component to work
This commit is contained in:
parent
d94392362a
commit
ce1eb3a0d4
@ -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"] }
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"motd": "Hello world!"
|
||||
}
|
||||
@ -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
3
session_config.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"motd": "Proben Sonntags um 10:00 Uhr und Dienstags um 18:30 Uhr"
|
||||
}
|
||||
@ -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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user