Skip to content

Commit

Permalink
Statistics tab: add links to 'max' activities.
Browse files Browse the repository at this point in the history
  • Loading branch information
Florian Pigorsch committed Jul 5, 2020
1 parent ba50809 commit f08b5f0
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 30 deletions.
57 changes: 38 additions & 19 deletions web/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,24 @@ var App = {
* 'category' that are created in the future.
*/
document.addEventListener('click', event => {
if (event.target.classList.contains('activity')) {
self.loadActivity(event.target.dataset.id);
} else if (event.target.classList.contains('type')) {
self.setTypeFilter(event.target.dataset.type);
} else if (event.target.classList.contains('category')) {
self.setCategoryFilter(event.target.dataset.category);
var obj = event.target;
while (obj.parentElement !== null &&
!obj.classList.contains('activity') &&
!obj.classList.contains('type') &&
!obj.classList.contains('category')
) {
obj = obj.parentElement;
}

if (obj.classList.contains('activity')) {
self.loadActivity(obj.dataset.id);
event.stopPropagation();
} else if (obj.classList.contains('type')) {
self.setTypeFilter(obj.dataset.type);
event.stopPropagation();
} else if (obj.classList.contains('category')) {
self.setCategoryFilter(obj.dataset.category);
event.stopPropagation();
}
}, false);
$("#filter-name").change(function () {
Expand Down Expand Up @@ -122,6 +134,12 @@ var App = {
self.loadNextActivity();
});

document.querySelectorAll(".statistics-button").forEach(button => {
button.onclick = () => {
self.loadActivity(button.dataset.id);
}
});

document.querySelectorAll(".sidebar-control").forEach(control => {
const container_id = control.dataset.container;
const container = document.getElementById(container_id);
Expand Down Expand Up @@ -438,35 +456,36 @@ var App = {
}
});

this.statistics_distance_max_id = distance_max_id;
this.statistics_elevation_max_id = elevation_max_id;
this.statistics_time_max_id = time_max_id;

document.querySelector('#filter-matches').textContent = `${count} / ${this.activities.length}`;
document.querySelector('#no-activities-message').style.display = (count === 0) ? "block" : "none";

document.querySelector('#statistics-count').textContent = `${count}`;
if (count > 0) {
document.querySelector('#statistics-distance-max-button').dataset.id = distance_max_id;
document.querySelector('#statistics-elevation-max-button').dataset.id = elevation_max_id;
document.querySelector('#statistics-time-max-button').dataset.id = time_max_id;

document.querySelector('#statistics-distance-sum').textContent = this.format_distance(distance_sum);
document.querySelector('#statistics-distance-avg').textContent = this.format_distance(distance_sum / count);
document.querySelector('#statistics-distance-max').textContent = this.format_distance(distance_max);

document.querySelector('#statistics-elevation-sum').textContent = this.format_elevation(elevation_sum);
document.querySelector('#statistics-elevation-avg').textContent = this.format_elevation(elevation_sum / count);
document.querySelector('#statistics-elevation-max').textContent = this.format_elevation(elevation_max);

document.querySelector('#statistics-time-sum').textContent = this.format_duration(time_sum);
document.querySelector('#statistics-time-avg').textContent = this.format_duration(time_sum / count);
document.querySelector('#statistics-time-max').textContent = this.format_duration(time_max);
} else {
document.querySelector('#statistics-distance-sum').textContent = "n/a";
document.querySelector('#statistics-distance-avg').textContent = "n/a";
document.querySelector('#statistics-distance-max').textContent = "n/a";

document.querySelector('#statistics-elevation-sum').textContent = "n/a";
document.querySelector('#statistics-elevation-avg').textContent = "n/a";
document.querySelector('#statistics-elevation-max').textContent = "n/a";

document.querySelector('#statistics-time-sum').textContent = "n/a";
document.querySelector('#statistics-time-avg').textContent = "n/a";
document.querySelector('#statistics-time-max').textContent = "n/a";
document.querySelector('#statistics-table').style.display = "table";
} else {
document.querySelector('#statistics-table').style.display = "none";
}

if (selected_found) {
this.loadActivity(this.selected_activity);
} else {
Expand Down
41 changes: 31 additions & 10 deletions web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,57 +102,78 @@ <h2>Statistics</h2>
<p>
These statistics apply to the <span id="statistics-count">n/a</span> activities matching the current filter settings.
</p>
<table class="statistics-table">
<table id="statistics-table">
<tr>
<td colspan=2>
<td colspan=3>
<h3>Distance</h3>
</td>
</tr>
<tr>
<td>Sum:</td>
<td id="statistics-distance-sum">n/a</td>
<td colspan=2 id="statistics-distance-sum">n/a</td>
</tr>
<tr>
<td>Avg:</td>
<td id="statistics-distance-avg">n/a</td>
<td colspan=2 id="statistics-distance-avg">n/a</td>
</tr>
<tr>
<td>Max:</td>
<td id="statistics-distance-max">n/a</td>
<td>
<button id="statistics-distance-max-button" class="button is-small statistics-button">
<span class="icon is-small">
<i class="fas fa-map-marked-alt"></i>
</span>
</button>
</td>
</tr>
<tr>
<td colspan=2>
<td colspan=3>
<h3>Elevation</h3>
</td>
</tr>
<tr>
<td>Sum:</td>
<td id="statistics-elevation-sum">n/a</td>
<td colspan=2 id="statistics-elevation-sum">n/a</td>
</tr>
<tr>
<td>Avg:</td>
<td id="statistics-elevation-avg">n/a</td>
<td colspan=2 id="statistics-elevation-avg">n/a</td>
</tr>
<tr>
<td>Max:</td>
<td id="statistics-elevation-max">n/a</td>
<td>
<button id="statistics-elevation-max-button" class="button is-small statistics-button">
<span class="icon is-small">
<i class="fas fa-map-marked-alt"></i>
</span>
</button>
</td>
</tr>
<tr>
<td colspan=2>
<td colspan=3>
<h3>Time</h3>
</td>
</tr>
<tr>
<td>Sum:</td>
<td id="statistics-time-sum">n/a</td>
<td colspan=2 id="statistics-time-sum">n/a</td>
</tr>
<tr>
<td>Avg:</td>
<td id="statistics-time-avg">n/a</td>
<td colspan=2 id="statistics-time-avg">n/a</td>
</tr>
<tr>
<td>Max:</td>
<td id="statistics-time-max">n/a</td>
<td>
<button id="statistics-time-max-button" class="button is-small statistics-button">
<span class="icon is-small">
<i class="fas fa-map-marked-alt"></i>
</span>
</button>
</td>
</tr>
</table>
</div>
Expand Down
2 changes: 1 addition & 1 deletion web/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ html {
min-height: 0;
}

.statistics-table h3 {
#statistics-table h3 {
margin: 0;
padding: 0;
border: 0;
Expand Down

0 comments on commit f08b5f0

Please sign in to comment.