Skip to content

Commit 61a50c0

Browse files
jyoo980jyoo980
authored
Implementing a "total mileage" column for the schedule (#48)
* Start implementing a "total mileage" column for the schedule * Finish implementing a "Total distance" column * Tweaking table * Adding km/mi toggle
1 parent 2a9a5e7 commit 61a50c0

2 files changed

Lines changed: 61 additions & 18 deletions

File tree

‎_bin/mkical.py‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ def dtstart(date, time):
6161
phases = run['plan']
6262
if 'cancelled' in run.keys():
6363
continue
64+
total_dist = 0
6465
for i in range(len(phases)):
6566
phase = phases[i]
6667
if 'cancelled' in phase.keys():
@@ -73,6 +74,8 @@ def dtstart(date, time):
7374
name = route['name']
7475
gmap = route['map'] if 'map' in route else ''
7576
dist = route['distance_mi'] if 'distance_mi' in route else None
77+
if dist:
78+
total_dist += dist
7679

7780
event_name = f'{name} ({dist}mi)' if dist else name
7881

‎_includes/schedule_table.html‎

Lines changed: 58 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<div class="table-responsive">
1+
<div class="table-responsive schedule-table-wrapper" data-unit="mi">
22
<table class='schedule-table table'>
33
{% if include.show_header %}
44
<thead>
55
<tr>
66
<th>Date</th>
77
<th class="text-end">Time</th>
8-
<th>Route (miles)</th>
8+
<th><div class="d-flex justify-content-between">Routes<span>Distance (<button class="dist-unit-toggle" title="For the enlightened..." style="background:none;border:none;padding:0;font:inherit;text-decoration:underline dotted;cursor:pointer;">mi</button>)</span></div></th>
99
</tr>
1010
</thead>
1111
{% endif %}
@@ -15,6 +15,17 @@
1515
{% else %}
1616
{% assign cancelled-class = "" %}
1717
{% endif %}
18+
{% assign total_dist = 0.0 %}
19+
{% for _phase in run.plan %}
20+
{% unless _phase.cancelled %}
21+
{% if _phase.route_id %}
22+
{% assign _r = site.data.routes | where: 'id', _phase.route_id | first %}
23+
{% if _r.distance_mi %}{% assign total_dist = total_dist | plus: _r.distance_mi %}{% endif %}
24+
{% elsif _phase.route.distance_mi %}
25+
{% assign total_dist = total_dist | plus: _phase.route.distance_mi %}
26+
{% endif %}
27+
{% endunless %}
28+
{% endfor %}
1829
<tbody class="run" data-date="{{ run.date }}">
1930
{% for plan in run.plan %}
2031
{% if plan.cancelled %}
@@ -44,23 +55,27 @@
4455
{% endunless %}
4556
{% endif %}
4657
<td class="{{part-cancelled-class}}">
47-
{% if plan.route_id %}
48-
<a href="{{site.baseurl}}/routes/{{ plan.route_id }}/"
49-
class="route-preview-map-link"
50-
title="{{ plan.route_id }}"
51-
popovertarget="map-popover-{{run.date | slugify}}-part-{{ forloop.index}}">{{route.name}}</a>
52-
<div id="map-popover-{{run.date | slugify}}-part-{{ forloop.index}}" class="route-map-popover" popover>
53-
<img src="{{ '/img/routes/' | append: plan.route_id | append: '.jpg' | relative_url }}" alt="{{ route.name }} map" class="route-image" loading="lazy"/>
58+
<div class="d-flex justify-content-between align-items-baseline gap-2">
59+
<span>
60+
{% if plan.route_id %}
61+
<a href="{{site.baseurl}}/routes/{{ plan.route_id }}/"
62+
class="route-preview-map-link"
63+
title="{{ plan.route_id }}"
64+
popovertarget="map-popover-{{run.date | slugify}}-part-{{ forloop.index}}">{{route.name}}</a>
65+
<div id="map-popover-{{run.date | slugify}}-part-{{ forloop.index}}" class="route-map-popover" popover>
66+
<img src="{{ '/img/routes/' | append: plan.route_id | append: '.jpg' | relative_url }}" alt="{{ route.name }} map" class="route-image" loading="lazy"/>
67+
</div>
68+
{% elsif route.map %}
69+
<a target="_blank" href="{{ route.map }}">{{route.name}}</a>
70+
{% else %}
71+
{{route.name}}
72+
{% endif %}
73+
{% if route.gpx and include.link_gpx %}
74+
&nbsp; <a href="{{ route.gpx }}" class="gpx-link" title="Download GPX" data-goatcounter-click="download-{{ route.id }}">&#8986;</a>
75+
{% endif %}
76+
</span>
77+
{% if route.distance_mi %}<span class="dist-value text-end text-nowrap" data-mi="{{ route.distance_mi | round: 1 }}" data-km="{{ route.distance_mi | times: 1.609 | round: 1 }}">{{ route.distance_mi | round: 1 }}</span>{% endif %}
5478
</div>
55-
{% elsif route.map %}
56-
<a target="_blank" href="{{ route.map }}">{{route.name}}</a>
57-
{% else %}
58-
{{route.name}}
59-
{% endif %}
60-
{% if route.distance_mi %}&nbsp; (<span title="{{ route.distance_mi | times: 1.609 | round: 1}}km" class="text-decoration-dashed">{{ route.distance_mi | round: 1}})</span>{% endif %}
61-
{% if route.gpx and include.link_gpx %}
62-
&nbsp; <a href="{{ route.gpx }}" class="gpx-link" title="Download GPX" data-goatcounter-click="download-{{ route.id }}">&#8986;</a>
63-
{% endif %}
6479
</td>
6580
</tr>
6681
{% if plan.notes %}
@@ -90,6 +105,12 @@
90105
{% endif %}
91106

92107
{% endfor %}
108+
{% if total_dist > 0 and run.plan.size > 1 %}
109+
<tr class="total-dist-row">
110+
<td></td><td></td>
111+
<td class="text-end fw-semibold"><hr class="my-1" style="border-top-width: 2px;"/><span class="dist-value" data-mi="{{ total_dist | round: 1 }}" data-km="{{ total_dist | times: 1.609 | round: 1 }}">{{ total_dist | round: 1 }}</span></td>
112+
</tr>
113+
{% endif %}
93114
{% if run.cancelled and plan.cancelled != "" %}
94115
<tr class="cancellation-note">
95116
<td></td>
@@ -102,3 +123,22 @@
102123
<tfoot id="schedule-finished" style="display: none"><tr><td colspan="3">A new schedule is coming! <a href="https://github.com/raceconditionrunning/raceconditionrunning.github.io">Contribute on GitHub</a></td></tr></tfoot>
103124
</table>
104125
</div>
126+
<script>
127+
if (!window.__distToggleInit) {
128+
// For switching between miles and kilometers.
129+
window.__distToggleInit = true;
130+
document.addEventListener('click', (e) => {
131+
const btn = e.target.closest('.dist-unit-toggle');
132+
if (!btn) {
133+
return;
134+
}
135+
const wrapper = btn.closest('.schedule-table-wrapper');
136+
const newUnit = wrapper.dataset.unit === 'km' ? 'mi' : 'km';
137+
wrapper.dataset.unit = newUnit;
138+
btn.textContent = newUnit;
139+
wrapper.querySelectorAll('.dist-value').forEach((span) => {
140+
span.textContent = span.dataset[newUnit];
141+
});
142+
});
143+
}
144+
</script>

0 commit comments

Comments
 (0)