schn33fuchs/ticketsystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Diagnosics styling

Browse Source 
It looks nice now
This commit is contained in:
Silas
2026-05-05 16:34:09 +02:00
parent 7bde1470a1
commit d41b31b5af
3 changed files with 183 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/pages/utilities.rs
View File

@@ -254,7 +254,7 @@ pub fn submit_stats_component() -> Html {
.unwrap_or((0, ()));
html! {
<div>
<div class="diagnostics-section">
if *loading {
<p>{ "Loading..." }</p>
}
@@ -262,17 +262,32 @@ pub fn submit_stats_component() -> Html {
<p style="color: red;">{ e.clone() }</p>
}
<h3>{ "Tickets per weekday" }</h3>
<ul>
{ for (0..7).map(|i| {
let is_max = i == max_idx;
html! {
<li style={ if is_max { "font-weight: bold; color: green;" } else { "" } }>
{ format!("{}: {:3}", weekdays[i], avg[i]) }
{ if is_max { html!{ <span>{ " ← most" }</span> } } else { html!{} } }
</li>
}
})}
</ul>
<div class="weekday-chart">
<div class="weekday-bars">
{ for (0..7).map(|i| {
let is_max = i == max_idx;
let max_value = counts.iter().cloned().max().unwrap_or(1).max(1);
let bar_height_percent = if max_value > 0 { (avg[i] / max_value as f64) * 100.0 } else { 0.0 };
let bar_height_px = (bar_height_percent * 200.0 / 100.0) as i32;
html! {
<div class="weekday-bar">
<div class={format!("bar{}", if is_max { " max" } else { "" })} style={format!("height: {}px;", bar_height_px)}>
</div>
</div>
}
})}
</div>
<div class="weekday-labels">
{ for (0..7).map(|i| {
html! {
<div class="label-item">
<div class="day">{ weekdays[i] }</div>
<div class="value">{ format!("{:.1}", avg[i]) }</div>
</div>
}
})}
</div>
</div>
<RoomTotalTickets tickets={(*tickets).clone()}/>
</div>
}
@@ -288,15 +303,29 @@ fn room_total_component(props: &RoomTotalsProps) -> Html {
let mut totals_vec: Vec<(i16, usize)> = totals.into_iter().collect();
totals_vec.sort_by(|a, b| b.1.cmp(&a.1));
let max_count = totals_vec.iter().map(|(_, c)| *c).max().unwrap_or(1).max(1);
html! {
<div>
<div class="diagnostics-section">
<h3>{ "Tickets pro Raum" }</h3>
<ul>
<div class="room-chart">
{ for totals_vec.into_iter().map(|(room, count)| {
let label = parse_room(room);
html! { <li>{ format!("{}: {}", label, count) }</li> }
let bar_width_percent = (count as f64 / max_count as f64) * 100.0;
html! {
<div class="room-bar-item">
<div class="room-header">
<span class="room-label">{ label }</span>
<span class="room-count">{ count }</span>
</div>
<div class="room-bar-container">
<div class="room-bar" style={format!("width: {}%;", bar_width_percent)}>
</div>
</div>
</div>
}
}) }
</ul>
</div>
</div>
}
}