add map and clicks
This commit is contained in:
Jonas Rabenstein
parent
45bcc13788
commit
3cfd5bdd6c
8 changed files with 1195 additions and 992 deletions
798
src/web.rs
798
src/web.rs
|
|
@ -1,158 +1,463 @@
|
|||
use axum::{extract::State, response::Html};
|
||||
use std::collections::{HashMap, HashSet};
|
||||
|
||||
use chrono::{DateTime, Utc};
|
||||
|
||||
use axum::{
|
||||
extract::{Form, Path, Query, State},
|
||||
http::StatusCode,
|
||||
response::{Html, Redirect},
|
||||
};
|
||||
use axum_extra::extract::cookie::CookieJar;
|
||||
use serde::Deserialize;
|
||||
use serde_json::Value;
|
||||
use sqlx::Row;
|
||||
|
||||
use crate::{AppState, db, leaderboard};
|
||||
use crate::{
|
||||
AppState, db, leaderboard,
|
||||
model::{ActivityCrossing, LeaderboardGroup},
|
||||
};
|
||||
|
||||
pub async fn index(State(state): State<AppState>, jar: CookieJar) -> Html<String> {
|
||||
let groups = leaderboard::build(&state.db).await.unwrap_or_default();
|
||||
#[derive(Debug, Deserialize, Default)]
|
||||
pub struct PageQuery {
|
||||
pub group_id: Option<i64>,
|
||||
}
|
||||
|
||||
let current_user = match jar.get("county_session") {
|
||||
Some(cookie) => db::athlete_for_session(&state.db, cookie.value())
|
||||
#[derive(Debug, Deserialize)]
|
||||
pub struct GroupForm {
|
||||
pub group_id: Option<i64>,
|
||||
pub name: String,
|
||||
pub members: Option<Vec<i64>>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Deserialize)]
|
||||
pub struct DeleteGroupForm {
|
||||
pub group_id: i64,
|
||||
}
|
||||
|
||||
pub async fn index(
|
||||
State(state): State<AppState>,
|
||||
jar: CookieJar,
|
||||
Query(query): Query<PageQuery>,
|
||||
) -> Html<String> {
|
||||
let current = current_user(&state, &jar).await;
|
||||
let group_id = query.group_id;
|
||||
|
||||
let valid_group_id = match (current.as_ref(), group_id) {
|
||||
(Some((owner_id, _)), Some(gid)) => group_belongs_to_user(&state, gid, *owner_id)
|
||||
.await
|
||||
.ok()
|
||||
.flatten()
|
||||
.map(|(_, name)| name),
|
||||
.flatten(),
|
||||
_ => None,
|
||||
};
|
||||
|
||||
let groups = leaderboard::build(&state.db, valid_group_id)
|
||||
.await
|
||||
.unwrap_or_default();
|
||||
|
||||
let available_groups = match current.as_ref() {
|
||||
Some((id, _)) => futures_groups(&state, *id).await.unwrap_or_default(),
|
||||
None => Vec::new(),
|
||||
};
|
||||
|
||||
render_index(&groups, current.as_ref(), valid_group_id, &available_groups)
|
||||
}
|
||||
|
||||
async fn futures_groups(
|
||||
state: &AppState,
|
||||
owner_id: i64,
|
||||
) -> Result<Vec<(i64, String)>, anyhow::Error> {
|
||||
let rows = sqlx::query(
|
||||
r#"
|
||||
SELECT id, name
|
||||
FROM leaderboard_groups
|
||||
WHERE owner_athlete_id = $1
|
||||
ORDER BY name
|
||||
"#,
|
||||
)
|
||||
.bind(owner_id)
|
||||
.fetch_all(&state.db)
|
||||
.await?;
|
||||
|
||||
Ok(rows
|
||||
.into_iter()
|
||||
.map(|row| (row.get("id"), row.get("name")))
|
||||
.collect())
|
||||
}
|
||||
|
||||
pub async fn activity(
|
||||
State(state): State<AppState>,
|
||||
jar: CookieJar,
|
||||
Path(activity_id): Path<String>,
|
||||
Query(query): Query<PageQuery>,
|
||||
) -> Result<Html<String>, StatusCode> {
|
||||
let Some((current_id, _)) = current_user(&state, &jar).await else {
|
||||
return Err(StatusCode::UNAUTHORIZED);
|
||||
};
|
||||
|
||||
let group_id = match query.group_id {
|
||||
Some(gid) => group_belongs_to_user(&state, gid, current_id)
|
||||
.await
|
||||
.map_err(internal)?,
|
||||
None => None,
|
||||
};
|
||||
|
||||
let mut html = String::from(
|
||||
r#"<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Landkreis-Sprints</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
background: #111827;
|
||||
color: #f9fafb;
|
||||
let activity = sqlx::query(
|
||||
r#"
|
||||
SELECT
|
||||
a.intervals_activity_id,
|
||||
a.start_time,
|
||||
a.activity_json,
|
||||
ath.id AS athlete_id,
|
||||
ath.display_name
|
||||
FROM activities a
|
||||
JOIN athletes ath ON ath.id = a.athlete_id
|
||||
WHERE a.intervals_activity_id = $1
|
||||
AND (
|
||||
ath.id = $2
|
||||
OR (
|
||||
$3::BIGINT IS NOT NULL
|
||||
AND ath.id IN (
|
||||
SELECT athlete_id
|
||||
FROM leaderboard_group_members
|
||||
WHERE group_id = $3
|
||||
)
|
||||
)
|
||||
)
|
||||
ORDER BY a.id DESC
|
||||
LIMIT 1
|
||||
"#,
|
||||
)
|
||||
.bind(&activity_id)
|
||||
.bind(current_id)
|
||||
.bind(group_id)
|
||||
.fetch_optional(&state.db)
|
||||
.await
|
||||
.map_err(internal)?;
|
||||
|
||||
let Some(activity) = activity else {
|
||||
return Err(StatusCode::NOT_FOUND);
|
||||
};
|
||||
|
||||
let start_time: Option<DateTime<Utc>> = activity.try_get("start_time").map_err(internal)?;
|
||||
let activity_json: Option<Value> = activity.try_get("activity_json").map_err(internal)?;
|
||||
let athlete_name: String = activity.try_get("display_name").map_err(internal)?;
|
||||
let crossings = leaderboard::activity_crossings(&state.db, &activity_id, group_id)
|
||||
.await
|
||||
.map_err(internal)?;
|
||||
|
||||
Ok(Html(render_activity(
|
||||
&activity_id,
|
||||
athlete_name,
|
||||
start_time,
|
||||
activity_json.as_ref(),
|
||||
&crossings,
|
||||
group_id,
|
||||
)))
|
||||
}
|
||||
a { color: #93c5fd; }
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
pub async fn groups(
|
||||
State(state): State<AppState>,
|
||||
jar: CookieJar,
|
||||
) -> Result<Html<String>, StatusCode> {
|
||||
let Some((owner_id, owner_name)) = current_user(&state, &jar).await else {
|
||||
return Err(StatusCode::UNAUTHORIZED);
|
||||
};
|
||||
|
||||
let group_rows = sqlx::query(
|
||||
r#"
|
||||
SELECT
|
||||
g.id AS group_id,
|
||||
g.name AS group_name,
|
||||
gm.athlete_id
|
||||
FROM leaderboard_groups g
|
||||
LEFT JOIN leaderboard_group_members gm
|
||||
ON gm.group_id = g.id
|
||||
WHERE g.owner_athlete_id = $1
|
||||
ORDER BY g.name, gm.athlete_id
|
||||
"#,
|
||||
)
|
||||
.bind(owner_id)
|
||||
.fetch_all(&state.db)
|
||||
.await
|
||||
.map_err(internal)?;
|
||||
|
||||
let mut groups: Vec<(i64, String, HashSet<i64>)> = Vec::new();
|
||||
for row in group_rows {
|
||||
let group_id: i64 = row.get("group_id");
|
||||
let group_name: String = row.get("group_name");
|
||||
let athlete_id: Option<i64> = row.get("athlete_id");
|
||||
|
||||
if let Some((_, _, members)) = groups.iter_mut().find(|(id, _, _)| *id == group_id) {
|
||||
if let Some(id) = athlete_id {
|
||||
members.insert(id);
|
||||
}
|
||||
} else {
|
||||
let mut members = HashSet::new();
|
||||
if let Some(id) = athlete_id {
|
||||
members.insert(id);
|
||||
}
|
||||
groups.push((group_id, group_name, members));
|
||||
}
|
||||
}
|
||||
|
||||
let athletes = sqlx::query(
|
||||
r#"
|
||||
SELECT id, display_name
|
||||
FROM athletes
|
||||
ORDER BY display_name, id
|
||||
"#,
|
||||
)
|
||||
.fetch_all(&state.db)
|
||||
.await
|
||||
.map_err(internal)?;
|
||||
|
||||
let athlete_list: Vec<(i64, String)> = athletes
|
||||
.into_iter()
|
||||
.map(|row| (row.get("id"), row.get("display_name")))
|
||||
.collect();
|
||||
|
||||
Ok(Html(render_groups(&owner_name, &groups, &athlete_list)))
|
||||
}
|
||||
.card {
|
||||
background: #1f2937;
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
pub async fn save_group(
|
||||
State(state): State<AppState>,
|
||||
jar: CookieJar,
|
||||
Form(form): Form<GroupForm>,
|
||||
) -> Result<Redirect, StatusCode> {
|
||||
let Some((owner_id, _)) = current_user(&state, &jar).await else {
|
||||
return Err(StatusCode::UNAUTHORIZED);
|
||||
};
|
||||
|
||||
let name = form.name.trim();
|
||||
if name.is_empty() {
|
||||
return Err(StatusCode::BAD_REQUEST);
|
||||
}
|
||||
|
||||
let group_id = match form.group_id {
|
||||
Some(group_id) => {
|
||||
let result = sqlx::query(
|
||||
r#"
|
||||
UPDATE leaderboard_groups
|
||||
SET name = $1, updated_at = now()
|
||||
WHERE id = $2 AND owner_athlete_id = $3
|
||||
"#,
|
||||
)
|
||||
.bind(name)
|
||||
.bind(group_id)
|
||||
.bind(owner_id)
|
||||
.execute(&state.db)
|
||||
.await
|
||||
.map_err(internal)?;
|
||||
|
||||
if result.rows_affected() != 1 {
|
||||
return Err(StatusCode::NOT_FOUND);
|
||||
}
|
||||
|
||||
group_id
|
||||
}
|
||||
None => {
|
||||
let row = sqlx::query(
|
||||
r#"
|
||||
INSERT INTO leaderboard_groups(owner_athlete_id, name)
|
||||
VALUES ($1, $2)
|
||||
RETURNING id
|
||||
"#,
|
||||
)
|
||||
.bind(owner_id)
|
||||
.bind(name)
|
||||
.fetch_one(&state.db)
|
||||
.await
|
||||
.map_err(internal)?;
|
||||
|
||||
row.get("id")
|
||||
}
|
||||
};
|
||||
|
||||
sqlx::query("DELETE FROM leaderboard_group_members WHERE group_id = $1")
|
||||
.bind(group_id)
|
||||
.execute(&state.db)
|
||||
.await
|
||||
.map_err(internal)?;
|
||||
|
||||
if let Some(members) = form.members {
|
||||
for athlete_id in members {
|
||||
sqlx::query(
|
||||
r#"
|
||||
INSERT INTO leaderboard_group_members(group_id, athlete_id)
|
||||
SELECT $1, id
|
||||
FROM athletes
|
||||
WHERE id = $2
|
||||
ON CONFLICT DO NOTHING
|
||||
"#,
|
||||
)
|
||||
.bind(group_id)
|
||||
.bind(athlete_id)
|
||||
.execute(&state.db)
|
||||
.await
|
||||
.map_err(internal)?;
|
||||
}
|
||||
}
|
||||
|
||||
Ok(Redirect::to("/groups"))
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
pub async fn delete_group(
|
||||
State(state): State<AppState>,
|
||||
jar: CookieJar,
|
||||
Form(form): Form<DeleteGroupForm>,
|
||||
) -> Result<Redirect, StatusCode> {
|
||||
let Some((owner_id, _)) = current_user(&state, &jar).await else {
|
||||
return Err(StatusCode::UNAUTHORIZED);
|
||||
};
|
||||
|
||||
sqlx::query(
|
||||
r#"
|
||||
DELETE FROM leaderboard_groups
|
||||
WHERE id = $1 AND owner_athlete_id = $2
|
||||
"#,
|
||||
)
|
||||
.bind(form.group_id)
|
||||
.bind(owner_id)
|
||||
.execute(&state.db)
|
||||
.await
|
||||
.map_err(internal)?;
|
||||
|
||||
Ok(Redirect::to("/groups"))
|
||||
}
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: .55rem;
|
||||
border-bottom: 1px solid #374151;
|
||||
|
||||
async fn current_user(state: &AppState, jar: &CookieJar) -> Option<(i64, String)> {
|
||||
let cookie = jar.get("county_session")?;
|
||||
db::athlete_for_session(&state.db, cookie.value())
|
||||
.await
|
||||
.ok()
|
||||
.flatten()
|
||||
}
|
||||
.rank {
|
||||
font-weight: bold;
|
||||
|
||||
async fn group_belongs_to_user(
|
||||
state: &AppState,
|
||||
group_id: i64,
|
||||
owner_id: i64,
|
||||
) -> Result<Option<i64>, anyhow::Error> {
|
||||
let exists = sqlx::query(
|
||||
r#"
|
||||
SELECT id
|
||||
FROM leaderboard_groups
|
||||
WHERE id = $1 AND owner_athlete_id = $2
|
||||
"#,
|
||||
)
|
||||
.bind(group_id)
|
||||
.bind(owner_id)
|
||||
.fetch_optional(&state.db)
|
||||
.await?;
|
||||
|
||||
Ok(exists.map(|row| row.get("id")))
|
||||
}
|
||||
.time {
|
||||
font-family: ui-monospace, monospace;
|
||||
|
||||
fn internal(error: impl std::fmt::Display) -> StatusCode {
|
||||
tracing::error!(%error, "web request failed");
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
}
|
||||
.small {
|
||||
color: #9ca3af;
|
||||
font-size: .9rem;
|
||||
}
|
||||
button, .button {
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
padding: .6rem .9rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
||||
fn render_index(
|
||||
groups: &[LeaderboardGroup],
|
||||
current: Option<&(i64, String)>,
|
||||
selected_group: Option<i64>,
|
||||
available_groups: &[(i64, String)],
|
||||
) -> Html<String> {
|
||||
let mut html = String::from(BASE_HEAD);
|
||||
|
||||
html.push_str(
|
||||
r#"<header>
|
||||
<div>
|
||||
<h1>🚴 Landkreis-Sprints</h1>
|
||||
<div class="small">
|
||||
Grenzübertritte · Millisekunden · Intervals.icu
|
||||
</div>
|
||||
</div>
|
||||
"#,
|
||||
<div class="small">Grenzübertritte · Millisekunden · Intervals.icu</div>
|
||||
</div>"#,
|
||||
);
|
||||
|
||||
if let Some(name) = current_user {
|
||||
if let Some((_, name)) = current {
|
||||
html.push_str(&format!(
|
||||
"<div>Angemeldet als <strong>{}</strong> · \
|
||||
<a class=\"button\" href=\"/logout\">Logout</a></div>",
|
||||
escape_html(&name)
|
||||
r#"<div>Angemeldet als <strong>{}</strong><br>
|
||||
<a class="button secondary" href="/groups">Gruppen</a>
|
||||
<a class="button" href="/logout">Logout</a></div>"#,
|
||||
escape_html(name)
|
||||
));
|
||||
} else {
|
||||
html.push_str(
|
||||
r#"<a class="button" href="/oauth/start">
|
||||
Mit Intervals.icu verbinden
|
||||
</a>"#,
|
||||
);
|
||||
html.push_str(r#"<a class="button" href="/oauth/start">Mit Intervals.icu verbinden</a>"#);
|
||||
}
|
||||
|
||||
html.push_str("</header>");
|
||||
|
||||
if !available_groups.is_empty() {
|
||||
html.push_str(
|
||||
r#"<div class="card filter-card"><form method="get" action="/">
|
||||
<label for="group_id"><strong>Leaderboard-Gruppe</strong></label>
|
||||
<select id="group_id" name="group_id" onchange="this.form.submit()">
|
||||
<option value="">Alle Athleten</option>"#,
|
||||
);
|
||||
|
||||
for (id, name) in available_groups {
|
||||
let selected = if Some(*id) == selected_group {
|
||||
" selected"
|
||||
} else {
|
||||
""
|
||||
};
|
||||
html.push_str(&format!(
|
||||
"<option value=\"{}\"{}>{}</option>",
|
||||
id,
|
||||
selected,
|
||||
escape_html(name)
|
||||
));
|
||||
}
|
||||
|
||||
html.push_str("</select></form></div>");
|
||||
}
|
||||
|
||||
if groups.is_empty() {
|
||||
html.push_str(
|
||||
r#"<div class="card">
|
||||
Noch keine Landkreisüberquerungen.
|
||||
</div>"#,
|
||||
r#"<div class="card">Noch keine Landkreisüberquerungen für diese Auswahl.</div>"#,
|
||||
);
|
||||
}
|
||||
|
||||
for group in groups {
|
||||
html.push_str("<div class=\"card\">");
|
||||
|
||||
html.push_str("<section class=\"card\">");
|
||||
html.push_str(&format!(
|
||||
"<h2>{} → {}</h2>",
|
||||
escape_html(&group.from_county),
|
||||
escape_html(&group.to_county)
|
||||
));
|
||||
html.push_str(&format!(
|
||||
"<div class=\"small\">10-Minuten-Fenster · {} · Standort ±10 m</div>",
|
||||
group.bucket_start.to_rfc3339()
|
||||
));
|
||||
|
||||
html.push_str(&format!(
|
||||
"<div class=\"small\">10-Minuten-Fenster ab {}</div>",
|
||||
group.bucket_start.format("%Y-%m-%d %H:%M:%S UTC")
|
||||
r#"<div class="group-map" data-lat="{}" data-lon="{}"></div>"#,
|
||||
group.crossing_lat, group.crossing_lon
|
||||
));
|
||||
|
||||
html.push_str(
|
||||
r#"<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Fahrer</th>
|
||||
<th>Übertritt</th>
|
||||
<th>Intervall</th>
|
||||
<th>Power</th>
|
||||
<th>HR</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>"#,
|
||||
r#"<table><thead><tr>
|
||||
<th>#</th><th>Fahrer</th><th>Übertritt</th><th>Aktivität</th>
|
||||
<th>Intervall</th><th>Power</th><th>HR</th><th>Karte</th>
|
||||
</tr></thead><tbody>"#,
|
||||
);
|
||||
|
||||
for row in group.rows {
|
||||
let interval = match row.interval_url {
|
||||
Some(url) => format!(
|
||||
"<a href=\"{}\" target=\"_blank\">Intervall</a>",
|
||||
escape_html(&url)
|
||||
),
|
||||
|
||||
None => "<span class=\"small\">—</span>".into(),
|
||||
};
|
||||
for row in &group.rows {
|
||||
let interval = row
|
||||
.interval_url
|
||||
.as_ref()
|
||||
.map(|url| {
|
||||
format!(
|
||||
"<a href=\"{}\" target=\"_blank\" rel=\"noreferrer\">Intervall</a>",
|
||||
escape_html(url)
|
||||
)
|
||||
})
|
||||
.unwrap_or_else(|| "<span class=\"small\">—</span>".into());
|
||||
|
||||
let power = row
|
||||
.average_watts
|
||||
.map(|v| format!("{:.0} W", v))
|
||||
.unwrap_or_else(|| "—".into());
|
||||
|
||||
let hr = row
|
||||
.average_heartrate
|
||||
.map(|v| format!("{:.0} bpm", v))
|
||||
|
|
@ -160,38 +465,283 @@ button, .button {
|
|||
|
||||
html.push_str(&format!(
|
||||
r#"<tr>
|
||||
<td class="rank">{}</td>
|
||||
<td>{}</td>
|
||||
<td class="time">{}</td>
|
||||
<td>{}</td>
|
||||
<td>{}</td>
|
||||
<td>{}</td>
|
||||
</tr>"#,
|
||||
<td class="rank">{}</td>
|
||||
<td>{}</td>
|
||||
<td class="time" data-time="{}">{}</td>
|
||||
<td><a href="{}">{}</a></td>
|
||||
<td>{}</td><td>{}</td><td>{}</td>
|
||||
<td><div class="mini-map" data-lat="{}" data-lon="{}"></div></td>
|
||||
</tr>"#,
|
||||
row.rank,
|
||||
escape_html(&row.athlete),
|
||||
row.crossing_time.format("%H:%M:%S%.3f"),
|
||||
escape_html(&row.crossing_time.to_rfc3339()),
|
||||
row.crossing_time.format("%H:%M:%S%.3f UTC"),
|
||||
escape_html(&row.activity_url),
|
||||
escape_html(&row.activity_id),
|
||||
interval,
|
||||
row.lat,
|
||||
row.lon,
|
||||
power,
|
||||
hr
|
||||
hr,
|
||||
));
|
||||
}
|
||||
|
||||
html.push_str("</tbody></table>");
|
||||
|
||||
html.push_str("</div>");
|
||||
html.push_str("</tbody></table></section>");
|
||||
}
|
||||
|
||||
html.push_str(
|
||||
r#"<footer class="small">
|
||||
Datenquelle: Intervals.icu · Landkreisgeometrien: VG250
|
||||
</footer>
|
||||
</body>
|
||||
</html>"#,
|
||||
);
|
||||
|
||||
html.push_str(BASE_FOOT);
|
||||
Html(html)
|
||||
}
|
||||
|
||||
fn render_activity(
|
||||
activity_id: &str,
|
||||
athlete_name: String,
|
||||
start_time: Option<chrono::DateTime<chrono::Utc>>,
|
||||
activity_json: Option<&Value>,
|
||||
crossings: &[ActivityCrossing],
|
||||
group_id: Option<i64>,
|
||||
) -> String {
|
||||
let title = activity_json
|
||||
.and_then(|v| v.get("name"))
|
||||
.and_then(Value::as_str)
|
||||
.unwrap_or("Aktivität");
|
||||
let sport = activity_json
|
||||
.and_then(|v| v.get("type"))
|
||||
.and_then(Value::as_str)
|
||||
.unwrap_or("");
|
||||
|
||||
let mut html = String::from(BASE_HEAD);
|
||||
html.push_str(&format!(
|
||||
r#"<header><div><a href="/">← Leaderboard</a>
|
||||
<h1>{}</h1><div class="small">{} · {}</div></div></header>
|
||||
<section class="card">
|
||||
<h2>{}</h2>
|
||||
<div class="small">Athlet: {} · Aktivität: {}</div>"#,
|
||||
escape_html(title),
|
||||
escape_html(&athlete_name),
|
||||
escape_html(sport),
|
||||
escape_html(title),
|
||||
escape_html(&athlete_name),
|
||||
escape_html(activity_id),
|
||||
));
|
||||
|
||||
if let Some(start) = start_time {
|
||||
html.push_str(&format!(
|
||||
r#"<div class="small activity-start" data-time="{}">Start: {}</div>"#,
|
||||
escape_html(&start.to_rfc3339()),
|
||||
start.format("%Y-%m-%d %H:%M:%S UTC")
|
||||
));
|
||||
}
|
||||
|
||||
let points: Vec<_> = crossings
|
||||
.iter()
|
||||
.map(|c| {
|
||||
serde_json::json!({
|
||||
"lat": c.lat,
|
||||
"lon": c.lon,
|
||||
"time": c.crossing_time.to_rfc3339(),
|
||||
"from": c.from_county,
|
||||
"to": c.to_county,
|
||||
"rank": c.rank,
|
||||
"athlete": c.athlete,
|
||||
})
|
||||
})
|
||||
.collect();
|
||||
let points_json = escape_html(&serde_json::to_string(&points).unwrap_or_else(|_| "[]".into()));
|
||||
|
||||
html.push_str(&format!(
|
||||
r#"<div id="activity-map" class="activity-map" data-points="{}"></div>"#,
|
||||
points_json
|
||||
));
|
||||
|
||||
if crossings.is_empty() {
|
||||
html.push_str("<p class=\"small\">Keine Landkreisübertritte in dieser Aktivität.</p>");
|
||||
} else {
|
||||
html.push_str(r#"<table><thead><tr>
|
||||
<th>#</th><th>Zeit</th><th>Landkreis</th><th>Rang</th><th>Power</th><th>HR</th><th>Intervall</th>
|
||||
</tr></thead><tbody>"#);
|
||||
|
||||
for (index, crossing) in crossings.iter().enumerate() {
|
||||
let interval = crossing
|
||||
.interval_url
|
||||
.as_ref()
|
||||
.map(|url| {
|
||||
format!(
|
||||
"<a href=\"{}\" target=\"_blank\" rel=\"noreferrer\">Intervall</a>",
|
||||
escape_html(url)
|
||||
)
|
||||
})
|
||||
.unwrap_or_else(|| "—".into());
|
||||
let power = crossing
|
||||
.average_watts
|
||||
.map(|v| format!("{:.0} W", v))
|
||||
.unwrap_or_else(|| "—".into());
|
||||
let hr = crossing
|
||||
.average_heartrate
|
||||
.map(|v| format!("{:.0} bpm", v))
|
||||
.unwrap_or_else(|| "—".into());
|
||||
|
||||
html.push_str(&format!(
|
||||
r#"<tr><td>{}</td>
|
||||
<td class="time" data-time="{}">{}</td>
|
||||
<td>{} → {}</td><td class="rank">{}</td>
|
||||
<td>{}</td><td>{}</td><td>{}</td></tr>"#,
|
||||
index + 1,
|
||||
escape_html(&crossing.crossing_time.to_rfc3339()),
|
||||
crossing.crossing_time.format("%H:%M:%S%.3f UTC"),
|
||||
escape_html(&crossing.from_county),
|
||||
escape_html(&crossing.to_county),
|
||||
crossing.rank,
|
||||
power,
|
||||
hr,
|
||||
interval,
|
||||
));
|
||||
}
|
||||
html.push_str("</tbody></table>");
|
||||
}
|
||||
|
||||
if let Some(group_id) = group_id {
|
||||
html.push_str(&format!(
|
||||
"<div class=\"small\">Leaderboard-Gruppe #{}</div>",
|
||||
group_id
|
||||
));
|
||||
}
|
||||
|
||||
html.push_str("</section>");
|
||||
html.push_str(BASE_FOOT);
|
||||
html
|
||||
}
|
||||
|
||||
fn render_groups(
|
||||
owner_name: &str,
|
||||
groups: &[(i64, String, HashSet<i64>)],
|
||||
athletes: &[(i64, String)],
|
||||
) -> String {
|
||||
let mut html = String::from(BASE_HEAD);
|
||||
html.push_str(&format!(
|
||||
r#"<header><div><a href="/">← Leaderboard</a><h1>Leaderboard-Gruppen</h1>
|
||||
<div class="small">Gruppen werden für {} verwaltet.</div></div></header>"#,
|
||||
escape_html(owner_name)
|
||||
));
|
||||
|
||||
html.push_str(
|
||||
r#"<section class="card"><h2>Neue Gruppe</h2>
|
||||
<form method="post" action="/groups">
|
||||
<input type="text" name="name" placeholder="z. B. Trainingsgruppe" required>
|
||||
<div class="members">"#,
|
||||
);
|
||||
for (id, name) in athletes {
|
||||
html.push_str(&format!(
|
||||
r#"<label><input type="checkbox" name="members" value="{}"> {}</label>"#,
|
||||
id,
|
||||
escape_html(name)
|
||||
));
|
||||
}
|
||||
html.push_str(r#"</div><button type="submit">Gruppe anlegen</button></form></section>"#);
|
||||
|
||||
for (group_id, name, members) in groups {
|
||||
html.push_str(&format!(
|
||||
r#"<section class="card"><form method="post" action="/groups">
|
||||
<input type="hidden" name="group_id" value="{}">
|
||||
<input type="text" name="name" value="{}" required>
|
||||
<div class="members">"#,
|
||||
group_id,
|
||||
escape_html(name)
|
||||
));
|
||||
|
||||
for (id, athlete_name) in athletes {
|
||||
let checked = if members.contains(id) { " checked" } else { "" };
|
||||
html.push_str(&format!(
|
||||
r#"<label><input type="checkbox" name="members" value="{}"{}> {}</label>"#,
|
||||
id,
|
||||
checked,
|
||||
escape_html(athlete_name)
|
||||
));
|
||||
}
|
||||
|
||||
html.push_str(&format!(
|
||||
r#"</div><button type="submit">Speichern</button></form>
|
||||
<form method="post" action="/groups/delete" onsubmit="return confirm('Gruppe löschen?')">
|
||||
<input type="hidden" name="group_id" value="{}"><button class="danger" type="submit">Löschen</button>
|
||||
</form></section>"#,
|
||||
group_id
|
||||
));
|
||||
}
|
||||
|
||||
html.push_str(BASE_FOOT);
|
||||
html
|
||||
}
|
||||
|
||||
const BASE_HEAD: &str = r#"<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Landkreis-Sprints</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
||||
<style>
|
||||
body{font-family:system-ui,sans-serif;max-width:1250px;margin:0 auto;padding:1rem;background:#111827;color:#f9fafb}
|
||||
a{color:#93c5fd}.small{color:#9ca3af;font-size:.9rem}header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.card{background:#1f2937;border-radius:12px;padding:1rem;margin:1rem 0}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.55rem;border-bottom:1px solid #374151;vertical-align:middle}.rank{font-weight:800}.time{font-family:ui-monospace,monospace;white-space:nowrap}.button,button{background:#2563eb;color:#fff;border:0;border-radius:8px;padding:.6rem .9rem;text-decoration:none;cursor:pointer;display:inline-block;margin:.15rem}.secondary{background:#374151}.danger{background:#991b1b}select,input[type=text]{background:#111827;color:#f9fafb;border:1px solid #4b5563;border-radius:8px;padding:.55rem}.filter-card form{display:flex;gap:.75rem;align-items:center}.group-map{height:240px;border-radius:10px;margin:.75rem 0}.mini-map{width:180px;height:120px;border-radius:8px}.activity-map{height:480px;border-radius:10px;margin:1rem 0}.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.4rem;margin:1rem 0}.members label{padding:.4rem;background:#111827;border-radius:6px}.leaflet-container{background:#ddd}.activity-start{margin-top:.35rem}
|
||||
@media(max-width:800px){table{font-size:.85rem}.mini-map{width:130px;height:100px}.group-map{height:200px}.activity-map{height:360px}th:nth-child(5),td:nth-child(5),th:nth-child(6),td:nth-child(6){display:none}}
|
||||
</style>
|
||||
</head><body>
|
||||
"#;
|
||||
|
||||
const BASE_FOOT: &str = r#"
|
||||
<footer class="small" style="margin:2rem 0">Datenquelle: Intervals.icu · Landkreisgeometrien: VG250 · Karten: OpenStreetMap</footer>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script>
|
||||
function tileLayer(map){
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© OpenStreetMap contributors'
|
||||
}).addTo(map);
|
||||
}
|
||||
function fmtTime(value){
|
||||
const d=new Date(value);
|
||||
if(Number.isNaN(d.getTime())) return value;
|
||||
return new Intl.DateTimeFormat(undefined,{dateStyle:'medium',timeStyle:'medium'}).format(d);
|
||||
}
|
||||
document.querySelectorAll('[data-time]').forEach(el=>{
|
||||
el.textContent=fmtTime(el.dataset.time);
|
||||
el.title=Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
});
|
||||
document.querySelectorAll('.group-map').forEach(el=>{
|
||||
const lat=Number(el.dataset.lat),lon=Number(el.dataset.lon);
|
||||
if(!Number.isFinite(lat)||!Number.isFinite(lon)) return;
|
||||
const map=L.map(el,{scrollWheelZoom:false}).setView([lat,lon],15);
|
||||
tileLayer(map);
|
||||
L.circle([lat,lon],{radius:10}).addTo(map);
|
||||
L.marker([lat,lon]).addTo(map);
|
||||
});
|
||||
document.querySelectorAll('.mini-map').forEach(el=>{
|
||||
const lat=Number(el.dataset.lat),lon=Number(el.dataset.lon);
|
||||
if(!Number.isFinite(lat)||!Number.isFinite(lon)) return;
|
||||
const map=L.map(el,{zoomControl:false,dragging:false,scrollWheelZoom:false,doubleClickZoom:false,touchZoom:false}).setView([lat,lon],16);
|
||||
tileLayer(map);
|
||||
L.circle([lat,lon],{radius:10}).addTo(map);
|
||||
L.marker([lat,lon]).addTo(map);
|
||||
});
|
||||
const activityMapEl=document.getElementById('activity-map');
|
||||
if(activityMapEl){
|
||||
const points=JSON.parse(activityMapEl.dataset.points || '[]');
|
||||
if(points.length){
|
||||
const map=L.map(activityMapEl).setView([points[0].lat,points[0].lon],14);
|
||||
tileLayer(map);
|
||||
const bounds=[];
|
||||
points.forEach((p,i)=>{
|
||||
const marker=L.marker([p.lat,p.lon]).addTo(map);
|
||||
marker.bindPopup('<strong>#'+(i+1)+'</strong><br>'+p.from+' → '+p.to+'<br>'+fmtTime(p.time)+'<br>Rang: '+p.rank);
|
||||
L.circle([p.lat,p.lon],{radius:10}).addTo(map);
|
||||
bounds.push([p.lat,p.lon]);
|
||||
});
|
||||
map.fitBounds(bounds,{padding:[25,25]});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body></html>
|
||||
"#;
|
||||
|
||||
fn escape_html(value: &str) -> String {
|
||||
value
|
||||
.replace('&', "&")
|
||||
|
|
|
|||
Loading…
Reference in a new issue