Fixed tsc warnings and errors.

frontend/package-lock.json

@@ -21,6 +21,7 @@
       },
       "devDependencies": {
         "@tsconfig/node22": "^22.0.0",
+        "@types/lodash": "^4.17.15",
         "@types/node": "^22.13.4",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vue/eslint-config-prettier": "^10.2.0",
@@ -1734,6 +1735,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.15.tgz",
+      "integrity": "sha512-w/P33JFeySuhN6JLkysYUK2gEmy9kHHFN7E8ro0tkfmlDOgxBDzWEZ/J8cWA+fHqFevpswDTFZnDx+R9lbL6xw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "22.13.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.4.tgz",

frontend/package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
+    "@types/lodash": "^4.17.15",
     "@types/node": "^22.13.4",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/eslint-config-prettier": "^10.2.0",

frontend/src/components/Map.vue

@@ -3,12 +3,12 @@
     <div class="loading" v-if="loading">Loading...</div>
     <div class="map-wrapper" v-else>
       <div id="map">
-        <div class="time-range" v-if="gpsPoints?.length">
+        <div class="time-range" v-if="oldestPoint && newestPoint">
           <div class="row">
             <div class="key">From</div>
             <div class="value">
               <a href="#" @click.prevent.stop="onStartDateClick">
-                {{ displayDate(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">
-                {{ displayDate(newestPoint?.timestamp) }}
+                {{ displayDate(newestPoint.timestamp) }}
               </a>
             </div>
           </div>
@@ -38,7 +38,7 @@
                         :has-next-page="hasNextPage"
                         :has-prev-page="hasPrevPage"
                         @refresh="locationQuery = $event"
-                        @reset-page="locationQuery.minId = locationQuery.maxId = undefined"
+                        @reset-page="locationQuery.minId = locationQuery.maxId = null"
                         @next-page="fetchNextPage"
                         @prev-page="fetchPrevPage" />
           </div>
@@ -94,7 +94,6 @@ export default {
   data() {
     return {
       loading: false,
-      locationQuery: new LocationQuery({}),
       map: null as Nullable<Map>,
       mappedPoints: [] as Point[],
       mapView: null as Nullable<View>,
@@ -140,16 +139,19 @@ export default {
 
     createMap(gpsPoints: GPSPoint[]): Map {
       this.mappedPoints = this.toMappedPoints(gpsPoints)
-      this.pointsLayer = this.createPointsLayer(this.mappedPoints)
+      this.pointsLayer = this.createPointsLayer(this.mappedPoints as Point[])
-      this.routesLayer = this.createRoutesLayer(this.mappedPoints)
+      this.routesLayer = this.createRoutesLayer(this.mappedPoints as Point[])
       this.mapView = this.mapView || this.createMapView(gpsPoints)
       const map = new Map({
         target: 'map',
         layers: [
           this.createMapLayer(),
+          // @ts-ignore
           this.pointsLayer,
+          // @ts-ignore
           this.routesLayer,
         ],
+        // @ts-ignore
         view: this.mapView,
       })
 
@@ -194,15 +196,15 @@ export default {
     },
 
     onStartDateClick() {
-      this.locationQuery.startDate = this.oldestPoint?.timestamp
+      this.locationQuery.startDate = this.oldestPoint?.timestamp || null
-      this.locationQuery.minId = undefined
+      this.locationQuery.minId = null
-      this.locationQuery.maxId = undefined
+      this.locationQuery.maxId = null
     },
 
     onEndDateClick() {
-      this.locationQuery.endDate = this.newestPoint?.timestamp
+      this.locationQuery.endDate = this.newestPoint?.timestamp || null
-      this.locationQuery.minId = undefined
+      this.locationQuery.minId = null
-      this.locationQuery.maxId = undefined
+      this.locationQuery.maxId = null
     },
   },
 
@@ -215,8 +217,8 @@ export default {
         if (!isFirstQuery &&
           (newQuery.startDate !== oldQuery.startDate || newQuery.endDate !== oldQuery.endDate)
         ) {
-          newQuery.minId = undefined
+          newQuery.minId = null
-          newQuery.maxId = undefined
+          newQuery.maxId = null
           this.hasNextPage = true
           this.hasPrevPage = true
         }
@@ -254,8 +256,11 @@ export default {
 
         this.mappedPoints = this.toMappedPoints(this.gpsPoints)
         if (this.mapView) {
+          // @ts-ignore
           this.refreshMapView(this.mapView, this.gpsPoints)
+          // @ts-ignore
           this.refreshPointsLayer(this.pointsLayer, this.mappedPoints)
+          // @ts-ignore
           this.refreshRoutesLayer(this.routesLayer, this.mappedPoints)
         }
       },

frontend/src/components/filter/Form.vue

@@ -8,8 +8,8 @@
         <input type="datetime-local"
                id="start-date"
                name="start-date"
-               @input="newFilter.startDate = startPlusHours($event.target.value, 0)"
+               @input="newFilter.startDate = startPlusHours($event, 0)"
-               @change="newFilter.startDate = startPlusHours($event.target.value, 0)"
+               @change="newFilter.startDate = startPlusHours($event, 0)"
                :value="toLocalString(newFilter.startDate)"
                :disabled="disabled"
                :max="maxDate" />
@@ -44,8 +44,8 @@
         <input type="datetime-local"
                id="end-date"
                name="end-date"
-               @input="newFilter.endDate = endPlusHours($event.target.value, 0)"
+               @input="newFilter.endDate = endPlusHours($event, 0)"
-               @change="newFilter.endDate = endPlusHours($event.target.value, 0)"
+               @change="newFilter.endDate = endPlusHours($event, 0)"
                :value="toLocalString(newFilter.endDate)"
                :disabled="disabled"
                :max="maxDate" />
@@ -80,7 +80,7 @@
       <div class="page-button-container">
         <button type="button"
                 :disabled="disabled"
-                v-if="value.minId || value.maxId"
+                v-if="value?.minId || value?.maxId"
                 @click.stop="$emit('reset-page')">
           <font-awesome-icon icon="fas fa-undo" />
         </button>
@@ -99,8 +99,8 @@
         <input type="number"
                id="limit"
                name="limit"
-               @input="newFilter.limit = Number($event.target.value)"
+               @input="setLimit"
-               @change="newFilter.limit = Number($event.target.value)"
+               @change="setLimit"
                :value="newFilter.limit"
                :disabled="disabled"
                min="1" />
@@ -168,8 +168,8 @@ export default {
       return !_.isEqual(
         {
           ...oldValue,
-          startDate: this.normalizeDate(this.value.startDate),
+          startDate: this.normalizeDate(this.value?.startDate),
-          endDate: this.normalizeDate(this.value.endDate),
+          endDate: this.normalizeDate(this.value?.endDate),
         },
         {
           ...newValue,
@@ -179,7 +179,7 @@ export default {
       )
     },
 
-    normalizeDate(date: Date | number | string | null): Date | null {
+    normalizeDate(date: any): Date | null {
       if (!date) {
         return null
       }
@@ -203,7 +203,11 @@ export default {
       ).toISOString().slice(0, -8)
     },
 
-    startPlusHours(date: Date | number | null, hours: number): Date | null {
+    startPlusHours(date: Date | number | Event | undefined | null, hours: number): Date | null {
+      if ((date as any)?.target?.value) {
+        date = (date as any).target.value
+      }
+
       let d = this.normalizeDate(date)
       if (!d) {
         return null
@@ -219,11 +223,15 @@ export default {
       return d
     },
 
-    startPlusDays(date: Date | number | null, days: number): Date | null {
+    startPlusDays(date: Date | number | Event | undefined | null, days: number): Date | null {
       return this.startPlusHours(date, days * 24)
     },
 
-    endPlusHours(date: Date | number | null, hours: number): Date | null {
+    endPlusHours(date: Date | number | Event | undefined | null, hours: number): Date | null {
+      if ((date as any)?.target?.value) {
+        date = (date as any).target.value
+      }
+
       let d = this.normalizeDate(date)
       if (!d) {
         return null
@@ -244,13 +252,17 @@ export default {
       return d
     },
 
-    endPlusDays(date: Date | number | null, days: number): Date | null {
+    endPlusDays(date: Date | number | Event | undefined | null, days: number): Date | null {
       return this.endPlusHours(date, days * 24)
     },
 
     handleSubmit() {
       this.$emit('refresh', this.newFilter)
     },
+
+    setLimit(event: Event) {
+      this.newFilter.limit = Number((event.target as HTMLInputElement).value)
+    },
   },
 
   watch: {

frontend/src/mixins/Dates.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
   methods: {
-    displayDate(date: Date | number | string | null): string {
+    displayDate(date: Date | number | string | null | undefined): string {
       if (!date) {
         return '-'
       }

frontend/src/mixins/Paginate.vue

@@ -8,16 +8,17 @@ export default {
       gpsPoints: [] as GPSPoint[],
       hasNextPage: true,
       hasPrevPage: true,
+      locationQuery: new LocationQuery({}),
     }
   },
 
   computed: {
-    newestPoint(): GPSPoint | undefined {
+    newestPoint(): GPSPoint | null {
-      return this.gpsPoints[this.gpsPoints.length - 1] || undefined
+      return this.gpsPoints[this.gpsPoints.length - 1] || null
     },
 
-    oldestPoint(): GPSPoint | undefined {
+    oldestPoint(): GPSPoint | null {
-      return this.gpsPoints[0] || undefined
+      return this.gpsPoints[0] || null
     },
   },
 

frontend/src/mixins/Points.vue

@@ -83,6 +83,10 @@ export default {
 
     refreshPointsLayer(layer: VectorLayer, points: Point[]) {
       const source = layer.getSource()
+      if (!source) {
+        return
+      }
+
       source.clear()
       source.addFeatures(points.map((point: Point) => new Feature(point)))
       source.changed()

frontend/src/mixins/Routes.vue

@@ -27,13 +27,17 @@ export default {
     refreshRoutesLayer(layer: VectorLayer, points: Point[]) {
       const routeFeatures = this.extractRouteFeatures(points)
       const source = layer.getSource()
+      if (!source) {
+        return
+      }
+
       source.clear()
       source.addFeatures(routeFeatures)
       source.changed()
     },
 
     extractRouteFeatures(points: Point[]): Feature[] {
-      const routeFeatures = []
+      const routeFeatures: Feature[] = []
       points.forEach((point: Point, index: number) => {
         if (index === 0) {
           return

frontend/src/mixins/URLQueryHandler.vue

@@ -11,7 +11,7 @@ function isDate(key: string, value: string): boolean {
   )
 }
 
-function parseValue(key: string, value: string | null): string | number | boolean | Date {
+function parseValue(key: string, value: string | null): string | number | boolean | Date | undefined {
   value = decodeURI(value?.trim() || '')
   if (!value.length) {
     return undefined