Save downloads dashboard.json, Load opens a file picker and imports through apply_import with errors reported in the modal, Clear asks for confirmation then wipes to Dashboard::blank(). App provides the store and ModalState and mounts the modal; init_hydrated starts autosave.
105 lines
3.2 KiB
Rust
105 lines
3.2 KiB
Rust
use leptos::prelude::*;
|
|
use leptos_meta::{ provide_meta_context, Stylesheet, Title };
|
|
use leptos_router::{
|
|
components::{ Route, Router, Routes },
|
|
StaticSegment, WildcardSegment,
|
|
};
|
|
|
|
use crate::{
|
|
components::{
|
|
header::Header,
|
|
modal::{ Modal, ModalState },
|
|
nav::Nav,
|
|
sidebar::Sidebar,
|
|
Character,
|
|
Inventories,
|
|
Wiki
|
|
},
|
|
prelude::*
|
|
};
|
|
|
|
/// Root component of the app.
|
|
///
|
|
/// Sets up meta context, creates the `Store<Dashboard>` (mock data; the
|
|
/// hydrated client swaps in the saved state, see `state::persist`) and
|
|
/// injects it as context, then renders the shell: header, sidebar, nav,
|
|
/// the routed page and the modal overlay. Routes: `/` character, `/inv`
|
|
/// inventories, `/wiki` wiki; anything else falls to `NotFound`.
|
|
#[component]
|
|
pub fn App() -> impl IntoView {
|
|
// Provides context that manages stylesheets, titles, meta tags, etc.
|
|
provide_meta_context();
|
|
let store = Store::new(Dashboard::mock());
|
|
provide_context(store.clone());
|
|
provide_context(ModalState::new());
|
|
console_error_panic_hook::set_once();
|
|
|
|
// Client-only: load the saved state after mount, then autosave.
|
|
#[cfg(feature = "hydrate")]
|
|
crate::state::persist::init_hydrated(&store);
|
|
|
|
let modal = expect_context::<ModalState>();
|
|
|
|
view! {
|
|
// injects a stylesheet into the document <head>
|
|
// id=leptos means cargo-leptos will hot-reload this stylesheet
|
|
<Stylesheet id="leptos" href="/pkg/aex.css"/>
|
|
|
|
// sets the document title
|
|
<Title text="aex"/>
|
|
|
|
// content for this welcome page
|
|
<Router>
|
|
<div class="wrapper">
|
|
<Header />
|
|
<Sidebar />
|
|
<main>
|
|
<Nav />
|
|
<Routes fallback=move || "Not found.">
|
|
<Route path=StaticSegment("") view=Character/>
|
|
<Route path=StaticSegment("inv") view=Inventories/>
|
|
<Route path=StaticSegment("wiki") view=Wiki />
|
|
<Route path=WildcardSegment("any") view=NotFound/>
|
|
</Routes>
|
|
</main>
|
|
</div>
|
|
<Modal state=modal />
|
|
</Router>
|
|
}
|
|
}
|
|
|
|
/// Renders the home page of your application.
|
|
#[component]
|
|
fn HomePage() -> impl IntoView {
|
|
// Creates a reactive value to update the button
|
|
let count = RwSignal::new(0);
|
|
let on_click = move |_| *count.write() += 1;
|
|
|
|
view! {
|
|
<h1>"Welcome to Leptos!"</h1>
|
|
<button on:click=on_click>"Click Me: " {count}</button>
|
|
}
|
|
}
|
|
|
|
/// 404 - Not Found
|
|
#[component]
|
|
fn NotFound() -> impl IntoView {
|
|
// set an HTTP status code 404
|
|
// this is feature gated because it can only be done during
|
|
// initial server-side rendering
|
|
// if you navigate to the 404 page subsequently, the status
|
|
// code will not be set because there is not a new HTTP request
|
|
// to the server
|
|
#[cfg(feature = "ssr")]
|
|
{
|
|
// this can be done inline because it's synchronous
|
|
// if it were async, we'd use a server function
|
|
let resp = expect_context::<leptos_actix::ResponseOptions>();
|
|
resp.set_status(actix_web::http::StatusCode::NOT_FOUND);
|
|
}
|
|
|
|
view! {
|
|
<h1>"Not Found"</h1>
|
|
}
|
|
}
|