Show speed to user, fix for #37.

This commit is contained in:
Lucas Verney 2018-09-11 14:54:30 +02:00
parent 1c67f6dc1e
commit 34a1a93a53
2 changed files with 28 additions and 0 deletions

View File

@ -1,5 +1,12 @@
<template>
<v-layout row fill-height wrap>
<v-flex xs12 class="speed-badge text-xs-center white" v-if="speed !== null && speed !== undefined">
<v-layout column>
<v-flex xs8 class="title mt-1">{{ speed }}</v-flex>
<v-flex xs4 class="caption">km/h</v-flex>
</v-layout>
</v-flex>
<v-flex xs12 id="map" :style="{ height: mapElementHeight }"></v-flex>
<v-btn
@ -425,6 +432,7 @@ export default {
polyline: Array,
positionLatLng: Array,
reportLatLng: Array,
speed: Number,
zoom: {
type: Number,
required: true,
@ -586,6 +594,19 @@ export default {
.fill-width {
width: 100%;
}
.speed-badge {
position: absolute;
right: 10px;
font-size: 1.14em;
margin: 1px;
top: calc(3em + 25px);
z-index: 1000;
height: 3em;
width: 3em;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, .87) !important;
}
</style>
<style>

View File

@ -14,6 +14,7 @@
:polyline="positionHistory"
:positionLatLng="currentLatLng"
:reportLatLng="reportLatLng"
:speed="currentSpeed"
:zoom="mapZoom"
></Map>
<v-btn
@ -110,6 +111,12 @@ export default {
currentLocation() {
return this.$store.getters.getLastLocation || {};
},
currentSpeed() {
if (this.hasCenterProvidedByRoute || !this.currentLocation) {
return null;
}
return Math.round(this.currentLocation.speed || 0, 0);
},
error() {
const errorCode = this.$store.state.location.error;
if (errorCode) {