Commit 8c428777 authored by Andres Käver's avatar Andres Käver
Browse files

map

parent 1eb99bc4
Pipeline #783 passed with stages
in 1 minute and 16 seconds
......@@ -3,5 +3,6 @@
"testing": true,
"logLevel": "debug",
"backendUrl" : "http://localhost:5000/api/"
"backendUrl" : "https://sportmap.akaver.com/api/v1.0/",
"backendUrlLocal" : "http://localhost:5000/api/v1.0/"
}
......@@ -2,5 +2,6 @@
"debug": false,
"testing": false,
"logLevel": "debug",
"backendUrl" : "https://sportmap.akaver.com/api/"
"backendUrl" : "https://sportmap.akaver.com/api/v1.0/",
"backendUrlLocal" : "http://localhost:5000/api/v1.0/"
}
......@@ -1387,6 +1387,14 @@
"aurelia-logging": "^1.0.0"
}
},
"aurelia-fetch-client": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/aurelia-fetch-client/-/aurelia-fetch-client-1.8.2.tgz",
"integrity": "sha512-HEQAi4CTEByesIBDqfn/YAF7ZwVQCn28npT2HknAr03orYr57klwY6y+oT3Kc1mEVe+9PU5gk2tzJiaqPXK5hw==",
"requires": {
"aurelia-pal": "^1.3.0"
}
},
"aurelia-framework": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/aurelia-framework/-/aurelia-framework-1.3.1.tgz",
......
export interface IGpsLocation {
id: string;
latitude: number;
longitude: number;
}
export interface IGpsSession {
id: string;
}
import { autoinject } from 'aurelia-framework';
import { HttpClient, json } from 'aurelia-fetch-client';
import * as environment from '../../config/environment.json';
import { IFetchResponse } from 'types/IFetchResponse';
@autoinject
export class BaseService<TEntity> {
private authHeaders = {
'Authorization': 'Bearer '
}
constructor(protected apiEndpointUrl: string, protected httpClient: HttpClient) {
this.httpClient.configure(config => {
config
.withBaseUrl(environment.backendUrl)
.withDefaults({
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-Requested-With': 'Fetch'
}
})
.withInterceptor({
request(request) {
console.log(`Requesting ${request.method} ${request.url}`);
return request;
},
response(response) {
console.log(`Received ${response.status} ${response.url}`);
return response;
}
});
});
}
async getAll(): Promise<IFetchResponse<TEntity[]>> {
try {
const response = await this.httpClient
.fetch(this.apiEndpointUrl, {
cache: "no-store",
headers:this.authHeaders
});
// happy case
if (response.ok) {
const data = (await response.json()) as TEntity[];
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)
}
}
}
async get(id: string): Promise<IFetchResponse<TEntity>> {
try {
const response = await this.httpClient
.fetch(this.apiEndpointUrl + '/' + id, {
cache: "no-store",
headers: this.authHeaders
});
// happy case
if (response.ok) {
const data = (await response.json()) as TEntity;
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)
}
}
}
}
import { IGpsLocation } from './../domain/IGpsLocation';
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 GpsLocationService extends BaseService<IGpsLocation> {
constructor(protected httpClient: HttpClient){
super('GpsLocations', httpClient);
}
async getAllForSession(gpsSessionId: string): Promise<IFetchResponse<IGpsLocation[]>> {
try {
const response = await this.httpClient
.fetch(this.apiEndpointUrl + '?gpsSessionId=' + gpsSessionId, {
cache: "no-store"
});
// happy case
if (response.ok) {
const data = (await response.json()) as IGpsLocation[];
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)
}
}
}
}
import { autoinject } from 'aurelia-framework';
import { BaseService } from './base-service';
import { IGpsSession } from 'domain/IGpsSession';
import { HttpClient } from 'aurelia-fetch-client';
@autoinject
export class GpsSessionService extends BaseService<IGpsSession> {
constructor(protected httpClient: HttpClient){
super('GpsSessions', httpClient);
}
}
export interface IFetchResponse<TData> {
statusCode: number;
errorMessage?: string; // can be undefined
data?: TData;
}
<template>
<div id="map"></div>
<div class="form-group">
<label for="sessionSelect">Sessions</label>
<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.id}
</option>
</select>
</div>
</template>
import { IGpsLocation } from './../../domain/IGpsLocation';
import { GpsLocationService } from './../../services/gpslocation-service';
import { GpsSessionService } from './../../services/gpssession-service';
import { IGpsSession } from './../../domain/IGpsSession';
import { PLATFORM } from 'aurelia-pal';
import { autoinject, LogManager, View } from 'aurelia-framework';
import { autoinject, LogManager, View, observable } from 'aurelia-framework';
import { RouterConfiguration, Router, RouteConfig, NavigationInstruction } from 'aurelia-router';
import { EventAggregator, Subscription } from 'aurelia-event-aggregator';
import * as L from 'leaflet';
......@@ -12,14 +16,23 @@ L.Icon.Default.mergeOptions({
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
export const log = LogManager.getLogger('app.App');
export const log = LogManager.getLogger('app.HomeIndex');
@autoinject
export class HomeIndex {
private subscriptions: Subscription[] = [];
map?: L.Map;
map!: L.Map;
gpsSessions: IGpsSession[] = [];
@observable
selectedGpsSession: IGpsSession | null = null;
gpsLocations: IGpsLocation[] = [];
constructor(private gpsSessionService: GpsSessionService, private gpsLocationService: GpsLocationService) {
}
// ================================= view lifecycle ===============================
created(owningView: View, myView: View): void {
......@@ -42,6 +55,14 @@ export class HomeIndex {
}
).addTo(this.map);
this.gpsSessionService.getAll().then(
response => {
if (response.data) {
this.gpsSessions = response.data;
}
}
);
}
detached(): void {
......@@ -82,5 +103,28 @@ export class HomeIndex {
// ================================= Helpers ===============================
selectedGpsSessionChanged(newValue: IGpsSession, oldValue: IGpsSession): void {
log.debug('selectedGpsSessionChanged', newValue, oldValue);
if (this.selectedGpsSession) {
this.gpsLocationService.getAllForSession(this.selectedGpsSession.id).then(
result => {
if (result.data) {
this.gpsLocations = result.data;
this.visualizeSession();
}
}
);
}
}
visualizeSession(): void {
const polylinePoints: L.LatLngExpression[] = [];
this.gpsLocations.forEach(location => {
polylinePoints.push([location.latitude, location.longitude]);
});
const polyline = L.polyline(polylinePoints).addTo(this.map);
this.map.fitBounds(polyline.getBounds());
}
}
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