Commit 9e458b20 authored by Andres Käver's avatar Andres Käver
Browse files

trivial session filter

parent 9870bba0
Pipeline #832 passed with stages
in 1 minute and 21 seconds
......@@ -3,7 +3,7 @@
"testing": true,
"logLevel": "debug",
"backendUrlExt" : "https://sportmap.akaver.com/api/v1.0/",
"backendUrl" : "http://localhost:5000/api/v1.0/",
"backendUrl" : "https://sportmap.akaver.com/api/v1.0/",
"backendUrlInt" : "http://localhost:5000/api/v1.0/",
"swaggerUrl" : "http://localhost:5000/swagger/index.html"
}
......@@ -2,14 +2,47 @@ import { autoinject } from 'aurelia-framework';
import { BaseService } from './base-service';
import { IGpsSession } from 'domain/IGpsSession';
import { HttpClient } from 'aurelia-fetch-client';
import { IFetchResponse } from 'types/IFetchResponse';
@autoinject
export class GpsSessionService extends BaseService<IGpsSession> {
constructor(protected httpClient: HttpClient){
constructor(protected httpClient: HttpClient) {
super('GpsSessions', httpClient);
}
async getAllSessions(minLocations: number, minDistance: number, minDuration: number): Promise<IFetchResponse<IGpsSession[]>> {
let url = this.apiEndpointUrl;
url = url + '?minLocationsCount=' + minLocations.toString() + '&minDuration=' + minDuration.toString() + '&minDistance=' + minDistance.toString();
try {
const response = await this.httpClient
.fetch(url, {
cache: "no-store",
});
// happy case
if (response.ok) {
const data = (await response.json()) as IGpsSession[];
console.log(data);
return {
statusCode: response.status,
data: data
}
}
// something went wrong
return {
statusCode: response.status,
errorMessage: response.statusText
}
} catch (reason) {
return {
statusCode: 0,
errorMessage: JSON.stringify(reason)
}
}
}
}
......@@ -4,29 +4,46 @@
<select value.bind="selectedGpsSession" class="form-control" id="sessionSelect">
<option model.bind="null">Choose...</option>
<option repeat.for="gpsSession of gpsSessions" model.bind="gpsSession">
${gpsSession.userFirstLastName} - ${gpsSession.name} - Locations: ${gpsSession.gpsLocationsCount} - ${gpsSession.recordedAt}
${gpsSession.userFirstLastName} - ${gpsSession.name} - Locations: ${gpsSession.gpsLocationsCount} -
${gpsSession.recordedAt}
</option>
</select>
</div>
<div class="form-row">
<div class="form-row align-items-end">
<div class="form-group col-md-2">
<div class="form-check">
<input checked.bind="showWp" class="form-check-input" type="checkbox" id="show-wp">
<label class="form-check-label" for="show-wp">
Show WP-s
Show WP-s
</label>
</div>
</div>
</div>
<div class="form-group col-md-2">
<div class="form-check">
<input checked.bind="showCp" class="form-check-input" type="checkbox" id="show-cp">
<label class="form-check-label" for="show-cp">
Show CP-s
Show CP-s
</label>
</div>
</div>
</div>
</div>
<div class="form-group col-md-1">
<label for="locations">Locations</label>
<input value.bind="minLocations" type="number" class="form-control" id="locations">
</div>
<div class="form-group col-md-1">
<label for="duration">Duration</label>
<input value.bind="minDuration" type="number" class="form-control" id="duration">
</div>
<div class="form-group col-md-1">
<label for="distance">Distance</label>
<input value.bind="minDistance" type="number" class="form-control" id="distance">
</div>
<div class="form-group col-md-2 align-self-end">
<a click.delegate="reloadSessions()" href="#" class="btn btn-primary" role="button">Reload Sessions</a>
</div>
</div>
<div id="map"></div>
<div show.bind="selectedGpsSession">Track length: ${trackLength / 1000} km</div>
</template>
......@@ -28,7 +28,7 @@ export const log = LogManager.getLogger('app.HomeIndex');
export class HomeIndex {
private subscriptions: Subscription[] = [];
public state!: IState;
map!: L.Map;
gpsSessions: IGpsSession[] = [];
......@@ -38,6 +38,10 @@ export class HomeIndex {
selectedGpsSession: IGpsSession | null = null;
showCp = true;
showWp = true;
minLocations = 10;
minDistance = 10;
minDuration = 60;
trackLength = 0;
......@@ -53,7 +57,7 @@ export class HomeIndex {
this.paceColorGradient = gradstop({
stops: 256,
inputFormat: 'hex',
colorArray: ['#00FF00', '#FFFF00', '#FF0000']
colorArray: ['#00FF00', '#FFFF00', '#FF0000']
});
}
......@@ -77,7 +81,7 @@ export class HomeIndex {
this.map = L.map('map').setView([59.3953607, 24.6643414], 18);
//this.map = L.map('map').setView([59.3245441,25.6506961], 14);
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
......@@ -98,23 +102,23 @@ export class HomeIndex {
//latitude: 59.3176531
//longitude: 25.6569272
/*
// use this? https://github.com/IvanSanchez/Leaflet.ImageOverlay.Rotated/blob/gh-pages/Leaflet.ImageOverlay.Rotated.js
const topLat= 59.337;
const topLng = 25.645;
const width = 0.035;
const height = 0.025;
const imageBounds: L.LatLngBoundsExpression = [
[topLat, topLng],
[topLat - height, topLng + width]
];
L.imageOverlay(imageUrl, imageBounds).addTo(this.map);
L.imageOverlay(imageUrl, imageBounds).bringToFront();
*/
/*
// use this? https://github.com/IvanSanchez/Leaflet.ImageOverlay.Rotated/blob/gh-pages/Leaflet.ImageOverlay.Rotated.js
const topLat= 59.337;
const topLng = 25.645;
const width = 0.035;
const height = 0.025;
const imageBounds: L.LatLngBoundsExpression = [
[topLat, topLng],
[topLat - height, topLng + width]
];
L.imageOverlay(imageUrl, imageBounds).addTo(this.map);
L.imageOverlay(imageUrl, imageBounds).bringToFront();
*/
this.gpsSessionService.getAll().then(
this.gpsSessionService.getAllSessions(this.minLocations, this.minDistance, this.minDuration).then(
response => {
if (response.data) {
this.gpsSessions = response.data;
......@@ -156,6 +160,15 @@ export class HomeIndex {
// ================================= View ===============================
reloadSessions(): void {
this.gpsSessionService.getAllSessions(this.minLocations, this.minDistance, this.minDuration).then(
response => {
if (response.data) {
this.gpsSessions = response.data;
}
}
);
}
// ================================= Event ===============================
......@@ -204,9 +217,9 @@ export class HomeIndex {
const polylinePoints: L.LatLngExpression[] = [];
this.trackLength = 0;
const minPace = this.selectedGpsSession?.paceMin ? this.selectedGpsSession?.paceMin : 6*60;
const maxPace = this.selectedGpsSession?.paceMax ? this.selectedGpsSession?.paceMax : 18*60;
const minPace = this.selectedGpsSession?.paceMin ? this.selectedGpsSession?.paceMin : 6 * 60;
const maxPace = this.selectedGpsSession?.paceMax ? this.selectedGpsSession?.paceMax : 18 * 60;
const paceBuckets = getColorCodedPolylines(this.gpsLocations, minPace, maxPace, this.paceColorGradient.length);
this.gpsLocations.forEach((location, index) => {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment