Common methods to display dates and distances.

frontend/src/components/Map.vue

@@ -8,7 +8,7 @@
             <div class="key">From</div>
             <div class="value">
               <a href="#" @click.prevent.stop="onStartDateClick">
-                {{ displayedDate(oldestPoint?.timestamp) }}
+                {{ displayDate(oldestPoint?.timestamp) }}
               </a>
             </div>
           </div>
@@ -16,7 +16,7 @@
             <div class="key">To</div>
             <div class="value">
               <a href="#" @click.prevent.stop="onEndDateClick">
-                {{ displayedDate(newestPoint?.timestamp) }}
+                {{ displayDate(newestPoint?.timestamp) }}
               </a>
             </div>
           </div>
@@ -61,6 +61,7 @@ import { useGeographic } from 'ol/proj';
 
 import type { Nullable } from '../models/Types';
 import Api from '../mixins/Api.vue';
+import Dates from '../mixins/Dates.vue';
 import FilterButton from './filter/ToggleButton.vue';
 import FilterForm from './filter/Form.vue';
 import GPSPoint from '../models/GPSPoint';
@@ -76,6 +77,7 @@ useGeographic()
 export default {
   mixins: [
     Api,
+    Dates,
     MapView,
     Paginate,
     Points,
@@ -191,14 +193,6 @@ export default {
       }
     },
 
-    displayedDate(date: Date | number | string | null): string {
-      if (!date) {
-        return '-'
-      }
-
-      return new Date(date).toString().replace(/GMT.*/, '')
-    },
-
     onStartDateClick() {
       this.locationQuery.startDate = this.oldestPoint?.timestamp
       this.locationQuery.minId = undefined

frontend/src/components/PointInfo.vue

@@ -22,14 +22,17 @@
 </template>
 
 <script lang="ts">
-import GPSPoint from '../models/GPSPoint';
 import Map from 'ol/Map';
 import Overlay from 'ol/Overlay';
 import type { TCountryCode } from 'countries-list';
 import { getCountryData, getEmojiFlag } from 'countries-list';
 
+import Dates from '../mixins/Dates.vue';
+import GPSPoint from '../models/GPSPoint';
+
 export default {
   emit: ['close'],
+  mixins: [Dates],
   props: {
     point: {
       type: [GPSPoint, null],
@@ -57,7 +60,7 @@ export default {
     },
 
     timeString(): string | null {
-      return this.point?.timestamp ? new Date(this.point.timestamp).toLocaleString() : null
+      return this.displayDate(this.point?.timestamp)
     },
   },
 

frontend/src/mixins/Dates.vue

@@ -0,0 +1,13 @@
+<script lang="ts">
+export default {
+  methods: {
+    displayDate(date: Date | number | string | null): string {
+      if (!date) {
+        return '-'
+      }
+
+      return new Date(date).toString().replace(/GMT.*/, '')
+    },
+  }
+}
+</script>

frontend/src/mixins/Points.vue

@@ -9,6 +9,7 @@ import { useGeographic } from 'ol/proj';
 
 import GPSPoint from '../models/GPSPoint';
 import Geo from './Geo.vue';
+import Units from './Units.vue';
 
 const minZoom = 2
 const maxZoom = 18
@@ -16,7 +17,7 @@ const maxZoom = 18
 useGeographic()
 
 export default {
-  mixins: [Geo],
+  mixins: [Geo, Units],
   data() {
     return {
       metersTolerance: 20,
@@ -63,14 +64,6 @@ export default {
       return totalDistance
     },
 
-    displayDistance(distance: number) {
-      if (distance < 1000) {
-        return `${distance.toFixed(0)} m`
-      }
-
-      return `${(distance / 1000).toFixed(2)} km`
-    },
-
     createPointsLayer(points: Point[]): VectorLayer {
       const pointFeatures = points.map((point: Point) => new Feature(point))
       return new VectorLayer({

frontend/src/mixins/Units.vue

@@ -0,0 +1,13 @@
+<script lang="ts">
+export default {
+  methods: {
+    displayDistance(distance: number) {
+      if (distance < 1000) {
+        return `${distance.toFixed(0)} m`
+      }
+
+      return `${(distance / 1000).toFixed(2)} km`
+    },
+  }
+}
+</script>