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");
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()))),
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");
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()))),
Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
}
@@ -500,7 +504,7 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
if *loading {
html! {<p>{ "Lade..." }</p>}
} 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 {
html! {
<div>
@@ -533,13 +537,13 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
<button type="submit">{ "Aktualisieren" }</button>
</form>
<button onclick={ondelete} disabled={*deleting}>
<button onclick={ondelete} disabled={*deleting} class="delete">
{if *deleting {"Löschen..."} else {"Löschen"}}
</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 {
<p style="color:red">{ err.clone() }</p>
<p class="alert error">{ err.clone() }</p>
}
</div>
}
@@ -632,19 +636,20 @@ pub fn all_tickets_component() -> Html {
.send()
.await
&& response.status() == 200
&& let Ok(json) = response.json::<serde_json::Value>().await {
let id = json
.get("data")
.and_then(|d| d.get("id"))
.and_then(|v| v.as_i64())
.and_then(|n| i16::try_from(n).ok());
let is_admin = json
.get("data")
.and_then(|d| d.get("is_admin"))
.and_then(|v| v.as_bool())
.unwrap_or(false);
user.set(ActiveUser { id, is_admin });
}
&& let Ok(json) = response.json::<serde_json::Value>().await
{
let id = json
.get("data")
.and_then(|d| d.get("id"))
.and_then(|v| v.as_i64())
.and_then(|n| i16::try_from(n).ok());
let is_admin = json
.get("data")
.and_then(|d| d.get("is_admin"))
.and_then(|v| v.as_bool())
.unwrap_or(false);
user.set(ActiveUser { id, is_admin });
}
});
|| ()
});
@@ -653,7 +658,7 @@ pub fn all_tickets_component() -> Html {
if *loading {
html! {<p>{ "Lade..." }</p>}
} else if let Some(e) = &*error {
html! { <p>{ format!("Fehler: {}", e) }</p> }
html! { <p class="alert error">{ format!("Fehler: {}", e) }</p> }
} else {
html! {
<div>
@@ -769,19 +774,20 @@ pub fn archived_tickets_component() -> Html {
.send()
.await
&& response.status() == 200
&& let Ok(json) = response.json::<serde_json::Value>().await {
let id = json
.get("data")
.and_then(|d| d.get("id"))
.and_then(|v| v.as_i64())
.and_then(|n| i16::try_from(n).ok());
let is_admin = json
.get("data")
.and_then(|d| d.get("is_admin"))
.and_then(|v| v.as_bool())
.unwrap_or(false);
user.set(ActiveUser { id, is_admin });
}
&& let Ok(json) = response.json::<serde_json::Value>().await
{
let id = json
.get("data")
.and_then(|d| d.get("id"))
.and_then(|v| v.as_i64())
.and_then(|n| i16::try_from(n).ok());
let is_admin = json
.get("data")
.and_then(|d| d.get("is_admin"))
.and_then(|v| v.as_bool())
.unwrap_or(false);
user.set(ActiveUser { id, is_admin });
}
});
|| ()
});
@@ -790,7 +796,7 @@ pub fn archived_tickets_component() -> Html {
if *loading {
html! {<p>{ "Lade..." }</p>}
} else if let Some(e) = &*error {
html! { <p>{ format!("Fehler: {}", e) }</p> }
html! { <p class="alert error">{ format!("Fehler: {}", e) }</p> }
} else {
html! {
<div>

View File

@@ -181,7 +181,9 @@ pub fn register_component() -> Html {
.expect("Error building request");
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()))),
Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))),
}
@@ -661,8 +663,10 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
// confirm
if !web_sys::window()
.and_then(|w| {
w.confirm_with_message("Sind Sie sicher, dass Sie dieses Element löschen möchten?")
.ok()
w.confirm_with_message(
"Sind Sie sicher, dass Sie dieses Element löschen möchten?",
)
.ok()
})
.unwrap_or(false)
{
@@ -699,7 +703,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
if *loading {
html! {<p>{ "Lade..." }</p>}
} 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 {
html! {
<div>
@@ -774,11 +778,11 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
}
</form>
<button onclick={ondelete} disabled={*deleting}>
<button onclick={ondelete} disabled={*deleting} class="delete">
{if *deleting {"Löschen..."} else {"Löschen"}}
</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 {
<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;
}