From 34a1a93a530138801a2c065e246ad279af6c35c8 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Tue, 11 Sep 2018 14:54:30 +0200
Subject: [PATCH] Show speed to user, fix for #37.

---
 src/components/Map.vue | 21 +++++++++++++++++++++
 src/views/Map.vue      |  7 +++++++
 2 files changed, 28 insertions(+)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index a546ae4..e5bf641 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -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>
diff --git a/src/views/Map.vue b/src/views/Map.vue
index 17999e0..aa5c2a1 100644
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@@ -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) {