Show speed to user, fix for #37.
This commit is contained in:
parent
1c67f6dc1e
commit
34a1a93a53
@ -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>
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user