Some styling

This commit is contained in:
2026-05-26 22:01:50 +02:00
parent e096b9144b
commit 6e836d9260
3 changed files with 72 additions and 40 deletions

View File

@@ -208,7 +208,9 @@ pub fn submit_ticket_component() -> Html {
.expect("Failed to build request"); .expect("Failed to build request");
match request.send().await { match request.send().await {
Ok(response) if response.status() == 200 => status.set(Some("Erfolgreich".into())), Ok(response) if response.status() == 200 => {
status.set(Some("Erfolgreich".into()))
}
Ok(response) => status.set(Some(format!("Fehler: {}", response.status()))), Ok(response) => status.set(Some(format!("Fehler: {}", response.status()))),
Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))), Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))),
} }
@@ -444,7 +446,9 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
.expect("Failed to construct request"); .expect("Failed to construct request");
match request.send().await { match request.send().await {
Ok(response) if response.status() == 200 => error.set(Some("Erfolgreich".into())), Ok(response) if response.status() == 200 => {
error.set(Some("Erfolgreich".into()))
}
Ok(response) => error.set(Some(format!("Fehler: {}", response.status()))), Ok(response) => error.set(Some(format!("Fehler: {}", response.status()))),
Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))), Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
} }
@@ -500,7 +504,7 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
if *loading { if *loading {
html! {<p>{ "Lade..." }</p>} html! {<p>{ "Lade..." }</p>}
} else if let Some(e) = &*error { } else if let Some(e) = &*error {
html! { <p>{ format!("Fehler: {}", e) }</p> } html! { <p class="alert error">{ format!("Fehler: {}", e) }</p> }
} else if let Some(t) = &*ticket { } else if let Some(t) = &*ticket {
html! { html! {
<div> <div>
@@ -533,13 +537,13 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
<button type="submit">{ "Aktualisieren" }</button> <button type="submit">{ "Aktualisieren" }</button>
</form> </form>
<button onclick={ondelete} disabled={*deleting}> <button onclick={ondelete} disabled={*deleting} class="delete">
{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>> <Link<crate::Route> to={crate::Route::AllTickets} classes="return-to">{ "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 class="alert error">{ err.clone() }</p>
} }
</div> </div>
} }
@@ -632,19 +636,20 @@ pub fn all_tickets_component() -> Html {
.send() .send()
.await .await
&& response.status() == 200 && response.status() == 200
&& let Ok(json) = response.json::<serde_json::Value>().await { && let Ok(json) = response.json::<serde_json::Value>().await
let id = json {
.get("data") let id = json
.and_then(|d| d.get("id")) .get("data")
.and_then(|v| v.as_i64()) .and_then(|d| d.get("id"))
.and_then(|n| i16::try_from(n).ok()); .and_then(|v| v.as_i64())
let is_admin = json .and_then(|n| i16::try_from(n).ok());
.get("data") let is_admin = json
.and_then(|d| d.get("is_admin")) .get("data")
.and_then(|v| v.as_bool()) .and_then(|d| d.get("is_admin"))
.unwrap_or(false); .and_then(|v| v.as_bool())
user.set(ActiveUser { id, is_admin }); .unwrap_or(false);
} user.set(ActiveUser { id, is_admin });
}
}); });
|| () || ()
}); });
@@ -653,7 +658,7 @@ pub fn all_tickets_component() -> Html {
if *loading { if *loading {
html! {<p>{ "Lade..." }</p>} html! {<p>{ "Lade..." }</p>}
} else if let Some(e) = &*error { } else if let Some(e) = &*error {
html! { <p>{ format!("Fehler: {}", e) }</p> } html! { <p class="alert error">{ format!("Fehler: {}", e) }</p> }
} else { } else {
html! { html! {
<div> <div>
@@ -769,19 +774,20 @@ pub fn archived_tickets_component() -> Html {
.send() .send()
.await .await
&& response.status() == 200 && response.status() == 200
&& let Ok(json) = response.json::<serde_json::Value>().await { && let Ok(json) = response.json::<serde_json::Value>().await
let id = json {
.get("data") let id = json
.and_then(|d| d.get("id")) .get("data")
.and_then(|v| v.as_i64()) .and_then(|d| d.get("id"))
.and_then(|n| i16::try_from(n).ok()); .and_then(|v| v.as_i64())
let is_admin = json .and_then(|n| i16::try_from(n).ok());
.get("data") let is_admin = json
.and_then(|d| d.get("is_admin")) .get("data")
.and_then(|v| v.as_bool()) .and_then(|d| d.get("is_admin"))
.unwrap_or(false); .and_then(|v| v.as_bool())
user.set(ActiveUser { id, is_admin }); .unwrap_or(false);
} user.set(ActiveUser { id, is_admin });
}
}); });
|| () || ()
}); });
@@ -790,7 +796,7 @@ pub fn archived_tickets_component() -> Html {
if *loading { if *loading {
html! {<p>{ "Lade..." }</p>} html! {<p>{ "Lade..." }</p>}
} else if let Some(e) = &*error { } else if let Some(e) = &*error {
html! { <p>{ format!("Fehler: {}", e) }</p> } html! { <p class="alert error">{ format!("Fehler: {}", e) }</p> }
} else { } else {
html! { html! {
<div> <div>

View File

@@ -181,7 +181,9 @@ pub fn register_component() -> Html {
.expect("Error building request"); .expect("Error building request");
match request.send().await { match request.send().await {
Ok(response) if response.status() == 200 => status.set(Some("Erfolgreich".into())), Ok(response) if response.status() == 200 => {
status.set(Some("Erfolgreich".into()))
}
Ok(response) => status.set(Some(format!("Fehler: {}", response.status()))), Ok(response) => status.set(Some(format!("Fehler: {}", response.status()))),
Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))), Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))),
} }
@@ -661,8 +663,10 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
// confirm // confirm
if !web_sys::window() if !web_sys::window()
.and_then(|w| { .and_then(|w| {
w.confirm_with_message("Sind Sie sicher, dass Sie dieses Element löschen möchten?") w.confirm_with_message(
.ok() "Sind Sie sicher, dass Sie dieses Element löschen möchten?",
)
.ok()
}) })
.unwrap_or(false) .unwrap_or(false)
{ {
@@ -699,7 +703,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
if *loading { if *loading {
html! {<p>{ "Lade..." }</p>} html! {<p>{ "Lade..." }</p>}
} else if let Some(e) = &*error { } else if let Some(e) = &*error {
html! { <p>{ format!("Fehler: {}", e) }</p> } html! { <p class="alert error">{ format!("Fehler: {}", e) }</p> }
} else if let Some(u) = &*user { } else if let Some(u) = &*user {
html! { html! {
<div> <div>
@@ -774,11 +778,11 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
} }
</form> </form>
<button onclick={ondelete} disabled={*deleting}> <button onclick={ondelete} disabled={*deleting} class="delete">
{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>> <Link<crate::Route> to={crate::Route::AllUsers} classes="return-to">{ "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>
} }

View File

@@ -270,3 +270,25 @@ input[type="checkbox"] {
} }
} }
} }
.return-to {
display: block;
padding: 16px 2rem;
background: #2b79c2;
background-color: rgb(43, 121, 194);
color: white;
text-decoration: none;
text-align: center;
border-radius: 0.5rem;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: #1d5fa0;
}
}
.delete {
display: block;
width: 100%;
text-align: center;
}