6 Commits
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
20 changed files with 444 additions and 61 deletions
+1
View File
@@ -9,6 +9,7 @@ backend/target/
frontend/debug/ frontend/debug/
frontend/target/ frontend/target/
frontend/dist/ frontend/dist/
frontend/node_modules/
# These are backup files generated by rustfmt # These are backup files generated by rustfmt
**/*.rs.bk **/*.rs.bk
+2 -3
View File
@@ -7,11 +7,11 @@ use axum::{
response::IntoResponse, response::IntoResponse,
}; };
use serde_json::json; use serde_json::json;
use sqlx::{query, Row}; use sqlx::{Row, query};
use crate::{ use crate::{
AppState, AppState,
models::{FilteredUser, Ticket, TicketCreateScheme, TicketResponse, TicketUpdateScheme}, models::{FilteredUser, TicketCreateScheme, TicketResponse, TicketUpdateScheme},
}; };
pub async fn create_ticket( pub async fn create_ticket(
@@ -217,4 +217,3 @@ pub async fn edit_ticket(
Ok(Json(response)) Ok(Json(response))
} }
+1 -1
View File
@@ -57,5 +57,5 @@ async fn main() {
.layer(cors); .layer(cors);
let listener = tokio::net::TcpListener::bind("0.0.0.0:8001").await.unwrap(); let listener = tokio::net::TcpListener::bind("0.0.0.0:8001").await.unwrap();
axum::serve(listener, app).await; let _ = axum::serve(listener, app).await;
} }
+11 -11
View File
@@ -3,17 +3,17 @@ use std::fmt::Display;
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
use sqlx::{Decode, prelude::Type}; use sqlx::{Decode, prelude::Type};
#[derive(Deserialize, Serialize, PartialEq, Debug, sqlx::FromRow)] // #[derive(Deserialize, Serialize, PartialEq, Debug, sqlx::FromRow)]
pub struct Ticket { // pub struct Ticket {
pub id: i32, // pub id: i32,
pub category: String, // pub category: String,
pub betreff: String, // pub betreff: String,
pub description: String, // pub description: String,
pub room: i16, // pub room: i16,
pub status: String, // pub status: String,
pub date: chrono::DateTime<chrono::Utc>, // pub date: chrono::DateTime<chrono::Utc>,
pub user_id: i16, // pub user_id: i16,
} // }
#[derive(Deserialize, Serialize, Debug, PartialEq)] #[derive(Deserialize, Serialize, Debug, PartialEq)]
pub struct TicketResponse { pub struct TicketResponse {
+1
View File
@@ -129,6 +129,7 @@ dependencies = [
"chrono-tz", "chrono-tz",
"gloo 0.12.0", "gloo 0.12.0",
"gloo-net 0.7.0", "gloo-net 0.7.0",
"gloo-storage 0.4.0",
"serde", "serde",
"serde_json", "serde_json",
"wasm-bindgen", "wasm-bindgen",
+1
View File
@@ -20,6 +20,7 @@ web-sys = { version = "0.3.95", features = [
"SubmitEvent","InputEvent","HtmlInputElement","Event", "HtmlFormElement", "MouseEvent" "SubmitEvent","InputEvent","HtmlInputElement","Event", "HtmlFormElement", "MouseEvent"
] } ] }
gloo-net = "0.7.0" gloo-net = "0.7.0"
gloo-storage = "0.4.0"
yew-router = "0.20.0" yew-router = "0.20.0"
serde_json = "1.0.149" serde_json = "1.0.149"
gloo = "0.12.0" gloo = "0.12.0"
+7 -4
View File
@@ -1,10 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head>
<head>
<link data-trunk rel="rust" data-bin="bin" /> <link data-trunk rel="rust" data-bin="bin" />
<link rel="scss" href="src/styles/main.scss" />
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Yew App</title> <title>Yew App</title>
</head> </head>
<body></body>
</html>
<body></body>
</html>
+1 -2
View File
@@ -64,7 +64,7 @@ pub fn protected_route(props: &ProtectedRouteProps) -> Html {
}); });
} }
match (*auth_state) { match *auth_state {
AuthState { AuthState {
is_authenticated: None, is_authenticated: None,
.. ..
@@ -91,6 +91,5 @@ pub fn protected_route(props: &ProtectedRouteProps) -> Html {
props.children.clone().into() props.children.clone().into()
} }
} }
_ => html! { <div>{ "Checking permissions..." }</div> },
} }
} }
+1
View File
@@ -77,6 +77,7 @@ fn switch(route: Route) -> Html {
pub fn app() -> Html { pub fn app() -> Html {
html! { html! {
<BrowserRouter> <BrowserRouter>
<sidebar::Sidebar/>
<Switch<Route> render={switch} /> <Switch<Route> render={switch} />
</BrowserRouter> </BrowserRouter>
} }
+30 -13
View File
@@ -1,21 +1,38 @@
use gloo_net::http::Request;
use wasm_bindgen_futures::spawn_local;
use yew::prelude::*; use yew::prelude::*;
use yew_router::prelude::*;
#[component(Home)] #[component(Home)]
pub fn home_component() -> Html { pub fn home_component() -> Html {
let counter = use_state(|| 0); let is_admin = use_state(|| None::<bool>);
let onclick = {
let counter = counter.clone();
move |_| {
let value = *counter + 1;
counter.set(value);
}
};
html! { {
<div> let is_admin = is_admin.clone();
<button {onclick}>{ "+1" }</button> use_effect_with((), move |_| {
<p>{ *counter }</p> spawn_local(async move {
</div> 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
View File
@@ -1,3 +1,4 @@
pub mod basic_pages; pub mod basic_pages;
pub mod sidebar;
pub mod ticket; pub mod ticket;
pub mod user; pub mod user;
+267
View File
@@ -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>
},
}
}
+10 -1
View File
@@ -5,6 +5,7 @@ use wasm_bindgen::JsCast;
use wasm_bindgen_futures::spawn_local; use wasm_bindgen_futures::spawn_local;
use web_sys::HtmlSelectElement; use web_sys::HtmlSelectElement;
use yew::prelude::*; use yew::prelude::*;
use yew_router::prelude::*;
#[derive(Serialize, Deserialize, Clone, Debug, PartialEq)] #[derive(Serialize, Deserialize, Clone, Debug, PartialEq)]
pub struct TicketCreateScheme { pub struct TicketCreateScheme {
@@ -155,6 +156,8 @@ pub fn submit_ticket_component() -> Html {
<br/> <br/>
<button type="submit">{ "Send" }</button> <button type="submit">{ "Send" }</button>
<Link<crate::Route> to={crate::Route::AllTickets}>{ "Tickets ansehen" }</Link<crate::Route>>
{ {
if let Some(s) = &*status { if let Some(s) = &*status {
html!{ <p>{ s }</p> } html!{ <p>{ s }</p> }
@@ -338,6 +341,8 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
<button onclick={ondelete} disabled={*deleting}> <button onclick={ondelete} disabled={*deleting}>
{if *deleting {"Löschen..."} else {"Löschen"}} {if *deleting {"Löschen..."} else {"Löschen"}}
</button> </button>
<Link<crate::Route> to={crate::Route::AllTickets}>{ "Zurück zur Ticketübersicht" }</Link<crate::Route>>
if let Some(err) = &*delete_error { if let Some(err) = &*delete_error {
<p style="color:red">{ err.clone() }</p> <p style="color:red">{ err.clone() }</p>
} }
@@ -428,8 +433,9 @@ pub fn all_tickets_component() -> Html {
html! { html! {
<ul> <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! { { 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()}> <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>{ &t.description }</p>
<p>{ match t.status.as_str() { <p>{ match t.status.as_str() {
"ToDo" => "Zu tun", "ToDo" => "Zu tun",
@@ -439,6 +445,9 @@ pub fn all_tickets_component() -> Html {
_ => "Ungültiger Status" _ => "Ungültiger Status"
}}</p> }}</p>
</li> </li>
<Link<crate::Route> to={crate::Route::Ticket}>{ "Zurück zur Startseite" }</Link<crate::Route>>
</div>
})} })}
</ul> </ul>
} }
+13 -13
View File
@@ -1,20 +1,18 @@
use std::net::ToSocketAddrs;
use gloo_net::http::Request; use gloo_net::http::Request;
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
use wasm_bindgen_futures::spawn_local; use wasm_bindgen_futures::spawn_local;
use yew::prelude::*; use yew::prelude::*;
use yew_router::prelude::use_navigator; use yew_router::prelude::*;
#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)] // #[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
pub struct User { // pub struct User {
pub id: i16, // pub id: i16,
pub last_name: String, // pub last_name: String,
pub first_name: String, // pub first_name: String,
pub username: String, // pub username: String,
pub is_admin: bool, // pub is_admin: bool,
pub pwd: String, // pub pwd: String,
} // }
#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)] #[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
pub struct UserCreateScheme { pub struct UserCreateScheme {
@@ -300,7 +298,7 @@ pub fn all_users_component() -> Html {
<ul> <ul>
{ for users.iter().map(|t| html! { { for users.iter().map(|t| html! {
<li key={t.id.to_string()}> <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> </li>
})} })}
</ul> </ul>
@@ -578,6 +576,8 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
<button onclick={ondelete} disabled={*deleting}> <button onclick={ondelete} disabled={*deleting}>
{if *deleting {"Löschen..."} else {"Löschen"}} {if *deleting {"Löschen..."} else {"Löschen"}}
</button> </button>
<Link<crate::Route> to={crate::Route::AllUsers}>{ "Zurück zur Benutzerübersicht" }</Link<crate::Route>>
if let Some(err) = &*delete_error { if let Some(err) = &*delete_error {
<p style="color:red">{ err.clone() }</p> <p style="color:red">{ err.clone() }</p>
} }
+6
View File
@@ -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;
}
+4
View File
@@ -0,0 +1,4 @@
.u-hidden { display: none !important; }
.u-gap-sm { gap: $spacing-sm; }
.text-muted { color: $color-muted; }
+8
View File
@@ -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; }
}
+22
View File
@@ -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; }
}