diff options
Diffstat (limited to 'web/templates.templ')
| -rw-r--r-- | web/templates.templ | 10 |
1 files changed, 8 insertions, 2 deletions
diff --git a/web/templates.templ b/web/templates.templ index aceeeee..6a0109f 100644 --- a/web/templates.templ +++ b/web/templates.templ @@ -563,19 +563,25 @@ templ ClimbDetailContent(data ClimbDetailPageData) { if len(data.Attempts) == 0 { <div class="empty">No attempts recorded yet. Open a ride containing this climb to record one.</div> } else { + if len(data.AttemptPoints) > 0 { + <div class="analytics-chart"><canvas id="climb-attempts-chart" data-climb-attempts-chart tabindex="0" role="img" aria-label={ attemptsChartLabel(data.Climb.Name) }></canvas></div> + <output class="analytics-hover" data-attempts-hover aria-live="polite">Hover a point to inspect an attempt.</output> + } <table> - <thead><tr><th>Date</th><th>Ride</th><th class="numeric">Time</th><th class="numeric">Distance</th><th class="numeric">Cotacol</th></tr></thead> + <thead><tr><th>Date</th><th>Ride</th><th class="numeric">Time</th><th class="numeric">Avg power</th><th class="numeric">Distance</th><th class="numeric">Cotacol</th></tr></thead> <tbody> for _, attempt := range data.Attempts { - <tr><td>{ attempt.Date }</td><td><a href={ templ.URL(rideDetailURL(attempt.RideID)) }>{ attempt.RideName }</a></td><td class="numeric">{ attempt.Duration }</td><td class="numeric">{ attempt.Distance }</td><td class="numeric">{ attempt.Cotacol }</td></tr> + <tr><td>{ attempt.Date }</td><td><a href={ templ.URL(rideDetailURL(attempt.RideID)) }>{ attempt.RideName }</a></td><td class="numeric">{ attempt.Duration }</td><td class="numeric">{ formatPower(attempt.AveragePowerW) }</td><td class="numeric">{ attempt.Distance }</td><td class="numeric">{ attempt.Cotacol }</td></tr> } </tbody> </table> } </section> @templ.JSONScript("climb-profile-data", data.Profile) + @templ.JSONScript("climb-attempt-points", data.AttemptPoints) @templ.JSONScript("climb-endpoints", data.Endpoints) <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script type="module" src="/static/climb-profile.js"></script> + <script type="module" src="/static/climb-attempts.js"></script> <script type="module" src="/static/climb-map.js"></script> } |