Mr_Steppy/jana_sessions_webpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Get basic Sessions component to work

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Cargo.toml
View File

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

3
config.json
View File

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

7
index.html
View File

@ -2,7 +2,12 @@
<html> <html>
<head> <head>
<title>Band Sessions</title> <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> </head>
<body></body> <body></body>
</html> </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"
}

40
src/webpage.rs
View File

@ -3,33 +3,51 @@ use leptos::server_fn::request::browser::Request;
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
#[derive(Debug, Clone, Serialize, Deserialize)] #[derive(Debug, Clone, Serialize, Deserialize)]
pub struct Config { pub struct SessionConfig {
pub motd: String, pub motd: String,
} }
#[component] #[component]
pub fn App() -> impl IntoView { pub fn App() -> impl IntoView {
let (count, set_count) = signal(0); let session_config = LocalResource::new(load_config);
let 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! { 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: #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%;"> <Suspense fallback=|| "Laden...">{session_dates}</Suspense>
<h1>"Anstehende Proben Termine"</h1>
<p>"TODO motd"</p>
<button on:click=move |_| { *set_count.write() += 1 }>"Click counter (" {count} ")"</button>
</div>
</div> </div>
} }
} }
async fn load_config() -> std::result::Result<Config, String> { #[component]
let response = Request::get("/config.json") 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() .send()
.await .await
.map_err(|e| format!("HTTP error: {e}"))?; .map_err(|e| format!("HTTP error: {e}"))?;
let config = response let config = response
.json::<Config>() .json::<SessionConfig>()
.await .await
.map_err(|e| format!("JSON error: {e}"))?; .map_err(|e| format!("JSON error: {e}"))?;
Ok(config) Ok(config)