feat: header with campaign image, name, session #, current date and (not yet functional nor properly styled) buttons

src/app.rs

@@ -5,13 +5,14 @@ use leptos_router::{
     StaticSegment, WildcardSegment,
 };
 
-use crate::{ prelude::*, components::{ header::Header, Dash } };
+use crate::{ prelude::*, components::{ sidebar::Sidebar, header::Header, Dash } };
 
 #[component]
 pub fn App() -> impl IntoView {
     // Provides context that manages stylesheets, titles, meta tags, etc.
     provide_meta_context();
     provide_context(Store::new(Dashboard::mock()));
+    console_error_panic_hook::set_once();
 
     view! {
         // injects a stylesheet into the document <head>
@@ -23,14 +24,16 @@ pub fn App() -> impl IntoView {
 
         // content for this welcome page
         <Router>
+            <div class="wrapper">
             <Header />
-            <aside></aside>
+            <Sidebar />
             <main>
                 <Routes fallback=move || "Not found.">
                     <Route path=StaticSegment("") view=Dash/>
                     <Route path=WildcardSegment("any") view=NotFound/>
                 </Routes>
             </main>
+            </div>
         </Router>
     }
 }

src/components/header.rs

@@ -1,17 +1,55 @@
 use crate::{ entities::DashboardStoreFields, prelude::* };
-use leptos::prelude::*;
+use chrono::TimeDelta;
+use leptos::{ logging, prelude::* };
 
 #[component]
 pub fn Header () -> impl IntoView {
     let state = expect_context::<Context>();
     let campaign = state.campaign();
     let date = state.date();
+    let session = state.session();
+    let image = state.campaign_image();
+
+    let adjust_day = move |adjustment: i64| date.update(|d| {
+        *d = d.checked_add_signed(TimeDelta::days(adjustment)).unwrap();
+    });
+
+    let adjust_session = move |adjustment: isize| session.update(|s| {
+        if let Some(new) = s.checked_add_signed(adjustment) {
+            *s = new;
+        }
+    });
+
+    Effect::new(move |_| {
+        logging::warn!("{}", campaign.get());
+    });
 
     view! {
         <header>
-            <h1>Aboba v{env!("CARGO_PKG_VERSION")} by mk</h1>
-            <h2>{campaign.get_untracked()}</h2>
-            <h3>{move || date.get().to_string()}</h3>
+            <Show when=move || !image.get().is_empty()>
+                <div class="campaign-image">
+                    <img src=image.get()/>
+                </div>
+            </Show>
+            <section>
+                <h5 class="version">aex v{env!("CARGO_PKG_VERSION")} by mk</h5>
+                <input id="campaign-name" type="text" class="header-input header-input-1 campaign-name" bind:value=campaign></input>
+                <div class="game-date">
+                    <h4>{move || format!("{}", date.get().format("%d/%m/%Y"))}</h4>
+                    <button on:click=move |_| adjust_day(-1) title="Предыдущий день" class="adjust" id="date-back">"<"</button>
+                    <button on:click=move |_| adjust_day( 1) title="Следующий день" class="adjust" id="date-forward">">"</button>
+                </div>
+                <div class="session-number">
+                    <h4>Сессия #{move || format!("{}", session.get())}</h4>
+                    <button on:click=move |_| adjust_session(-1) title="Предыдущая сессия" class="adjust" id="session-back">"<"</button>
+                    <button on:click=move |_| adjust_session( 1) title="Следующая сессия" class="adjust" id="session-forward">">"</button>
+                </div>
+                <div class="controls">
+                    <button>Save</button>
+                    <button>Load</button>
+                    <button>Clear</button>
+                </div>
+            </section>
         </header>
     }
 }

src/components/mod.rs

@@ -10,8 +10,7 @@ pub mod sidebar;
 pub fn Dash () -> impl IntoView {
 
     view! {
-        <div class="wrapper">
-        </div>
+        main
     }
 }
 

src/components/sidebar.rs

@@ -1,2 +1,12 @@
 use crate::prelude::*;
 use leptos::prelude::*;
+
+
+#[component]
+pub fn Sidebar () -> impl IntoView {
+    view! {
+        <aside>
+            sidebar
+        </aside>
+    }
+}

src/lib.rs

@@ -1,3 +1,4 @@
+#![allow(unused_imports)]
 pub mod app;
 
 use leptos::prelude::*;

src/main.rs

@@ -13,6 +13,8 @@ async fn main() -> std::io::Result<()> {
     let conf = get_configuration(None).unwrap();
     let addr = conf.leptos_options.site_addr;
 
+    console_error_panic_hook::set_once();
+
     HttpServer::new(move || {
         // Generate the list of routes in your Leptos App
         let routes = generate_route_list(App);

src/prelude.rs

@@ -1,4 +1,5 @@
 #![allow(unused_imports)]
+#![allow(dead_code)]
 pub use std::collections::{ HashMap, HashSet };
 
 pub use serde_json::{ Value, Map };