Updated gitignore

node_modules now ignored
Sidebar styling
2026-05-02 12:32:38 +02:00 · 2026-05-02 12:27:27 +02:00 · 2026-05-02 12:26:59 +02:00 · 2026-05-02 10:41:11 +02:00 · 2026-05-02 10:23:50 +02:00 · 2026-05-02 10:23:25 +02:00
20 changed files with 444 additions and 61 deletions
@@ -9,6 +9,7 @@ backend/target/
 frontend/debug/
 frontend/target/
 frontend/dist/
+frontend/node_modules/
 # These are backup files generated by rustfmt
 **/*.rs.bk

@@ -7,11 +7,11 @@ use axum::{
    response::IntoResponse,
 };
 use serde_json::json;
-use sqlx::{query, Row};
+use sqlx::{Row, query};

 use crate::{
    AppState,
-    models::{FilteredUser, Ticket, TicketCreateScheme, TicketResponse, TicketUpdateScheme},
+    models::{FilteredUser, TicketCreateScheme, TicketResponse, TicketUpdateScheme},
 };

 pub async fn create_ticket(
@@ -217,4 +217,3 @@ pub async fn edit_ticket(

    Ok(Json(response))
 }
-
@@ -57,5 +57,5 @@ async fn main() {
    .layer(cors);

    let listener = tokio::net::TcpListener::bind("0.0.0.0:8001").await.unwrap();
-    axum::serve(listener, app).await;
+    let _ = axum::serve(listener, app).await;
 }
@@ -3,17 +3,17 @@ use std::fmt::Display;
 use serde::{Deserialize, Serialize};
 use sqlx::{Decode, prelude::Type};

-#[derive(Deserialize, Serialize, PartialEq, Debug, sqlx::FromRow)]
-pub struct Ticket {
-    pub id: i32,
-    pub category: String,
-    pub betreff: String,
-    pub description: String,
-    pub room: i16,
-    pub status: String,
-    pub date: chrono::DateTime<chrono::Utc>,
-    pub user_id: i16,
-}
+// #[derive(Deserialize, Serialize, PartialEq, Debug, sqlx::FromRow)]
+// pub struct Ticket {
+//     pub id: i32,
+//     pub category: String,
+//     pub betreff: String,
+//     pub description: String,
+//     pub room: i16,
+//     pub status: String,
+//     pub date: chrono::DateTime<chrono::Utc>,
+//     pub user_id: i16,
+// }

 #[derive(Deserialize, Serialize, Debug, PartialEq)]
 pub struct TicketResponse {
@@ -129,6 +129,7 @@ dependencies = [
 "chrono-tz",
 "gloo 0.12.0",
 "gloo-net 0.7.0",
+ "gloo-storage 0.4.0",
 "serde",
 "serde_json",
 "wasm-bindgen",
@@ -20,6 +20,7 @@ web-sys = { version = "0.3.95", features = [
  "SubmitEvent","InputEvent","HtmlInputElement","Event", "HtmlFormElement", "MouseEvent"
 ] }
 gloo-net = "0.7.0"
+gloo-storage = "0.4.0"
 yew-router = "0.20.0"
 serde_json = "1.0.149"
 gloo = "0.12.0"
@@ -1,10 +1,13 @@
 <!doctype html>
 <html>
-    <head>
+
+<head>
    <link data-trunk rel="rust" data-bin="bin" />
+    <link rel="scss" href="src/styles/main.scss" />
    <meta charset="utf-8" />
    <title>Yew App</title>
-    </head>
-    <body></body>
-</html>
+</head>

+<body></body>
+
+</html>
@@ -64,7 +64,7 @@ pub fn protected_route(props: &ProtectedRouteProps) -> Html {
        });
    }

-    match (*auth_state) {
+    match *auth_state {
        AuthState {
            is_authenticated: None,
            ..
@@ -91,6 +91,5 @@ pub fn protected_route(props: &ProtectedRouteProps) -> Html {
                props.children.clone().into()
            }
        }
-        _ => html! { <div>{ "Checking permissions..." }</div> },
    }
 }
@@ -77,6 +77,7 @@ fn switch(route: Route) -> Html {
 pub fn app() -> Html {
    html! {
        <BrowserRouter>
+            <sidebar::Sidebar/>
            <Switch<Route> render={switch} />
        </BrowserRouter>
    }
@@ -1,21 +1,38 @@
+use gloo_net::http::Request;
+use wasm_bindgen_futures::spawn_local;
 use yew::prelude::*;
+use yew_router::prelude::*;

 #[component(Home)]
 pub fn home_component() -> Html {
-    let counter = use_state(|| 0);
-    let onclick = {
-        let counter = counter.clone();
-        move |_| {
-            let value = *counter + 1;
-            counter.set(value);
-        }
-    };
+    let is_admin = use_state(|| None::<bool>);

-    html! {
-        <div>
-            <button {onclick}>{ "+1" }</button>
-            <p>{ *counter }</p>
-        </div>
+    {
+        let is_admin = is_admin.clone();
+        use_effect_with((), move |_| {
+            spawn_local(async move {
+                let response = Request::get("/api/users/current")
+                    .credentials(web_sys::RequestCredentials::Include)
+                    .send()
+                    .await;
+
+                match response {
+                    Ok(resp) if resp.status() == 200 => {
+                        let user_data: serde_json::Value = resp.json().await.unwrap_or_default();
+                        let admin_value = user_data["data"]["is_admin"].as_bool();
+                        is_admin.set(admin_value);
+                    }
+                    _ => is_admin.set(Some(false)),
+                }
+            });
+            || ()
+        });
+    }
+
+    match *is_admin {
+        None => html! { <div>{ "Loading..." }</div> },
+        Some(true) => html! { <div>{ "You are admin" }</div> },
+        Some(false) => html! {  <Redirect<crate::Route> to={crate::Route::Ticket}/> },
    }
 }

@@ -1,3 +1,4 @@
 pub mod basic_pages;
+pub mod sidebar;
 pub mod ticket;
 pub mod user;
@@ -0,0 +1,267 @@
+use gloo_net::http::Request;
+use gloo_storage::{LocalStorage, Storage};
+use serde::{Deserialize, Serialize};
+use serde_json::Value;
+use std::rc::Rc;
+use wasm_bindgen_futures::spawn_local;
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+const STORAGE_KEY: &str = "sidebar_state";
+
+#[derive(Clone, PartialEq, Serialize, Deserialize)]
+pub struct SidebarExpandState {
+    pub ticket_open: bool,
+    pub users_open: bool,
+}
+
+impl Default for SidebarExpandState {
+    fn default() -> Self {
+        Self {
+            ticket_open: false,
+            users_open: false,
+        }
+    }
+}
+
+#[derive(Clone, PartialEq)]
+pub struct SidebarState {
+    pub expand: SidebarExpandState,
+    pub set_tickets_open: Callback<bool>,
+    pub toggle_tickets: Callback<()>,
+    pub set_users_open: Callback<bool>,
+    pub toggle_users: Callback<()>,
+}
+
+impl SidebarState {
+    fn new(
+        expand: SidebarExpandState,
+        set_tickets_open: Callback<bool>,
+        toggle_tickets: Callback<()>,
+        set_users_open: Callback<bool>,
+        toggle_users: Callback<()>,
+    ) -> Self {
+        Self {
+            expand,
+            set_tickets_open,
+            toggle_tickets,
+            set_users_open,
+            toggle_users,
+        }
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct SidebarProps {
+    pub children: Children,
+}
+
+#[component(SidebarStateProvider)]
+pub fn sidebar_state_provider(props: &SidebarProps) -> Html {
+    let default = LocalStorage::get(STORAGE_KEY).unwrap_or_else(|_| SidebarExpandState::default());
+    let state = use_state(|| default);
+
+    {
+        let state = state.clone();
+        use_effect_with(state, move |s| {
+            LocalStorage::set(STORAGE_KEY, &**s).ok();
+            || ()
+        });
+    }
+
+    let set_tickets_open = {
+        let state = state.clone();
+        Callback::from(move |v: bool| {
+            state.set(SidebarExpandState {
+                ticket_open: v,
+                users_open: (*state).users_open,
+            })
+        })
+    };
+
+    let toggle_tickets = {
+        let state = state.clone();
+        Callback::from(move |_| {
+            let current = (*state).ticket_open;
+            state.set(SidebarExpandState {
+                ticket_open: !current,
+                users_open: (*state).users_open,
+            });
+        })
+    };
+
+    let set_users_open = {
+        let state = state.clone();
+        Callback::from(move |v: bool| {
+            state.set(SidebarExpandState {
+                ticket_open: (*state).ticket_open,
+                users_open: v,
+            })
+        })
+    };
+
+    let toggle_users = {
+        let state = state.clone();
+        Callback::from(move |_| {
+            let current = (*state).users_open;
+            state.set(SidebarExpandState {
+                ticket_open: (*state).ticket_open,
+                users_open: !current,
+            });
+        })
+    };
+
+    let ctx = SidebarState::new(
+        (*state).clone(),
+        set_tickets_open,
+        toggle_tickets,
+        set_users_open,
+        toggle_users,
+    );
+
+    html! {
+        <ContextProvider<Rc<SidebarState>> context={Rc::new(ctx)}>
+            { for props.children.iter() }
+        </ContextProvider<Rc<SidebarState>>>
+    }
+}
+
+#[component(TicketMenu)]
+pub fn ticket_menu() -> Html {
+    let ctx =
+        use_context::<Rc<SidebarState>>().expect("TicketsMenu must be inside SidebarStateProvider");
+
+    let on_toggle = {
+        let cb = ctx.toggle_tickets.clone();
+        Callback::from(move |_| cb.emit(()))
+    };
+
+    let open = ctx.expand.ticket_open;
+
+    html! {
+        <li class={ if open { "menu open" } else { "menu" } }>
+            <button
+                class="menu-toggle"
+                onclick={on_toggle}
+                aria-expanded={open.to_string()}
+            >
+                { "Tickets" }
+                { if open { " ▾" } else { " ▸" } }
+            </button>
+
+            {
+                if open {
+                    html! {
+                        <ul class="submenu" role="menu">
+                            <li role="none">
+                                <Link<crate::Route> to={crate::Route::Ticket}><span role="menuitem">{ "Submit Ticket" }</span></Link<crate::Route>>
+                            </li>
+                            <li role="none">
+                                <Link<crate::Route> to={crate::Route::AllTickets}><span role="menuitem">{ "View Tickets" }</span></Link<crate::Route>>
+                            </li>
+                        </ul>
+                    }
+                } else {
+                    html!{}
+                }
+            }
+        </li>
+    }
+}
+
+#[component(UsersMenu)]
+pub fn users_menu() -> Html {
+    let ctx =
+        use_context::<Rc<SidebarState>>().expect("UsersMenu must be inside SidebarStateProvider");
+
+    let on_toggle = {
+        let cb = ctx.toggle_users.clone();
+        Callback::from(move |_| cb.emit(()))
+    };
+
+    let open = ctx.expand.users_open;
+
+    html! {
+        <li class={ if open { "menu open" } else { "menu" } }>
+            <button
+                class="menu-toggle"
+                onclick={on_toggle}
+                aria-expanded={open.to_string()}
+            >
+                { "Users" }
+                { if open { " ▾" } else { " ▸" } }
+            </button>
+
+            {
+                if open {
+                    html! {
+                        <ul class="submenu" role="menu">
+                            <li role="none">
+                                <Link<crate::Route> to={crate::Route::Register}><span role="menuitem">{ "Create User" }</span></Link<crate::Route>>
+                            </li>
+                            <li role="none">
+                                <Link<crate::Route> to={crate::Route::AllUsers}><span role="menuitem">{ "View Users" }</span></Link<crate::Route>>
+                            </li>
+                        </ul>
+                    }
+                } else {
+                    html!{}
+                }
+            }
+        </li>
+    }
+}
+
+#[component(Sidebar)]
+pub fn sidebar() -> Html {
+    let is_admin = use_state(|| None::<bool>);
+
+    {
+        let is_admin = is_admin.clone();
+        use_effect_with((), move |_| {
+            spawn_local(async move {
+                let response = Request::get("/api/users/current")
+                    .credentials(web_sys::RequestCredentials::Include)
+                    .send()
+                    .await;
+
+                match response {
+                    Ok(resp) if resp.status() == 200 => {
+                        let user_data: Value = resp.json().await.unwrap_or_default();
+                        let admin_value = user_data["data"]["is_admin"].as_bool();
+                        is_admin.set(admin_value);
+                    }
+                    _ => is_admin.set(Some(false)),
+                }
+            });
+            || ()
+        });
+    }
+
+    match *is_admin {
+        None => html! { <div class="sidebar-loading">{ "Loading..." }</div> },
+
+        // Non-admin: render a condensed user sidebar (no diagnostics, limited links)
+        Some(false) => html! {
+            <SidebarStateProvider>
+                <nav class="sidebar user">
+                    <ul>
+                        <TicketMenu/>
+                    </ul>
+                </nav>
+            </SidebarStateProvider>
+        },
+
+        // Admin: full sidebar wrapped in provider so submenu state persists
+        Some(true) => html! {
+            <SidebarStateProvider>
+                <nav class="sidebar admin">
+                    <ul>
+                        <TicketMenu/>
+                        <UsersMenu/>
+                    </ul>
+                </nav>
+            </SidebarStateProvider>
+        },
+    }
+}
@@ -5,6 +5,7 @@ use wasm_bindgen::JsCast;
 use wasm_bindgen_futures::spawn_local;
 use web_sys::HtmlSelectElement;
 use yew::prelude::*;
+use yew_router::prelude::*;

 #[derive(Serialize, Deserialize, Clone, Debug, PartialEq)]
 pub struct TicketCreateScheme {
@@ -155,6 +156,8 @@ pub fn submit_ticket_component() -> Html {
            <br/>
            <button type="submit">{ "Send" }</button>

+            <Link<crate::Route> to={crate::Route::AllTickets}>{ "Tickets ansehen" }</Link<crate::Route>>
+
            {
                if let Some(s) = &*status {
                    html!{ <p>{ s }</p> }
@@ -338,6 +341,8 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
                <button onclick={ondelete} disabled={*deleting}>
                    {if *deleting {"Löschen..."} else {"Löschen"}}
                </button>
+
+                <Link<crate::Route> to={crate::Route::AllTickets}>{ "Zurück zur Ticketübersicht" }</Link<crate::Route>>
                if let Some(err) = &*delete_error {
                    <p style="color:red">{ err.clone() }</p>
                }
@@ -428,8 +433,9 @@ pub fn all_tickets_component() -> Html {
        html! {
            <ul>
            { for tickets.iter().filter(|t| if user.is_admin { true } else if let Some(uid) = user.id { t.user_id == uid } else { false }).map(|t| html! {
+                    <div>
                        <li key={t.id.to_string()}>
-                        <h3>{ format!("{} - #{}", t.betreff, t.id) }</h3>
+                            <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{} - #{}", t.betreff, t.id) }</h3></Link<crate::Route>>
                            <p>{ &t.description }</p>
                            <p>{ match t.status.as_str() {
                                "ToDo" => "Zu tun",
@@ -439,6 +445,9 @@ pub fn all_tickets_component() -> Html {
                                _ => "Ungültiger Status"
                            }}</p>
                        </li>
+
+                        <Link<crate::Route> to={crate::Route::Ticket}>{ "Zurück zur Startseite" }</Link<crate::Route>>
+                    </div>
                })}
            </ul>
        }
@@ -1,20 +1,18 @@
-use std::net::ToSocketAddrs;
-
 use gloo_net::http::Request;
 use serde::{Deserialize, Serialize};
 use wasm_bindgen_futures::spawn_local;
 use yew::prelude::*;
-use yew_router::prelude::use_navigator;
+use yew_router::prelude::*;

-#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
-pub struct User {
-    pub id: i16,
-    pub last_name: String,
-    pub first_name: String,
-    pub username: String,
-    pub is_admin: bool,
-    pub pwd: String,
-}
+// #[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
+// pub struct User {
+//     pub id: i16,
+//     pub last_name: String,
+//     pub first_name: String,
+//     pub username: String,
+//     pub is_admin: bool,
+//     pub pwd: String,
+// }

 #[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
 pub struct UserCreateScheme {
@@ -300,7 +298,7 @@ pub fn all_users_component() -> Html {
            <ul>
            { for users.iter().map(|t| html! {
                    <li key={t.id.to_string()}>
-                        <h3>{ format!("{} {}- #{}", t.first_name, t.last_name, t.id) }</h3>
+                        <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}- #{}", t.first_name, t.last_name, t.id) }</h3></Link<crate::Route>>
                    </li>
                })}
            </ul>
@@ -578,6 +576,8 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
                <button onclick={ondelete} disabled={*deleting}>
                    {if *deleting {"Löschen..."} else {"Löschen"}}
                </button>
+
+                <Link<crate::Route> to={crate::Route::AllUsers}>{ "Zurück zur Benutzerübersicht" }</Link<crate::Route>>
                if let Some(err) = &*delete_error {
                    <p style="color:red">{ err.clone() }</p>
                }
@@ -0,0 +1,6 @@
+@mixin card {
+  backgroud: #fff;
+  border-radius: &border-radius;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  padding: $spacing-md;
+}
@@ -0,0 +1,4 @@
+.u-hidden { display: none !important; }
+.u-gap-sm { gap: $spacing-sm; }
+.text-muted { color: $color-muted; }
+
@@ -0,0 +1,8 @@
+$color-bg: #ffffff;
+$color-sidebar: #0f172a;
+$color-accent: #2563eb;
+$color-muted: #6b7280;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$border-radius: 6px;
+
@@ -0,0 +1,34 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.sidebar {
+  width: 260px;
+  background: $color-sidebar;
+  color: #fff;
+  min-height: 100vh;
+  padding: $spacing-md;
+
+  ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: $spacing-sm; }
+
+  a, .menu-toggle {
+    color: #fff;
+    text-decoration: none;
+    display: block;
+    padding: 8px 12px;
+    border-radius: 4px;
+    &:hover { background: rgba(255,255,255,0.04); }
+  }
+
+  .menu-toggle { background: transparent; border: none; text-align: left; width: 100%; cursor: pointer; }
+
+  .submenu {
+    margin-left: 8px;
+    background: rgba(255,255,255,0.02);
+    border-radius: 4px;
+    padding: 6px;
+    li { padding: 4px 0; }
+  }
+
+  &.user { width: 220px; background: darken($color-sidebar, 6%); }
+}
+
@@ -0,0 +1,10 @@
+.ticket-card {
+  @include card();
+  border-left: 4px solid $color-accent;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  .meta { color: $color-muted; font-size: 0.9rem; }
+  .title { font-weight: 600; }
+}
+
@@ -0,0 +1,22 @@
+@use "variables";
+@use "mixins";
+@use "utilities";
+@use "components/sidebar";
+@use "components/tickets";
+
+body {
+  background: variables.$color-bg;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+  color: #111827;
+  margin: 0;
+}
+
+.admin { display: flex; }
+.content { flex: 1; padding: variables.$spacing-md; }
+
+@media (max-width: 768px) {
+  .sidebar { position: fixed; left: -100%; transition: left .2s; }
+  .sidebar.open { left: 0; }
+  .content { margin-left: 0; }
+}
+
Author	SHA1	Message	Date
schn33fuchs	4bdf3dc04a	Updated gitignore node_modules now ignored	2026-05-02 12:32:38 +02:00
schn33fuchs	9eb843a786	Sidebar styling In general styling capabilities with scsss	2026-05-02 12:27:27 +02:00
schn33fuchs	fa77190555	Sidebar logic	2026-05-02 12:26:59 +02:00
schn33fuchs	3d1366e704	Pages link to each other	2026-05-02 10:41:11 +02:00
schn33fuchs	6d8fcc6b53	Home page changes depending on role	2026-05-02 10:23:50 +02:00
schn33fuchs	d541cf18b1	Minor bugfixes	2026-05-02 10:23:25 +02:00