blacklight/gpstracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed tsc warnings and errors.

Browse source
This commit is contained in:
Fabio Manganiello 2025-02-24 22:02:30 +01:00
parent 696bb89e04
commit b7c6ae1f55
Signed by: blacklight
GPG key ID: D90FBA7F76362774
9 changed files with 71 additions and 36 deletions

8
frontend/package-lock.json generated
View file

@ -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",

1
frontend/package.json
View file

@ -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",

35
frontend/src/components/Map.vue
View file

@ -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.routesLayer = this.createRoutesLayer(this.mappedPoints)
this.pointsLayer = this.createPointsLayer(this.mappedPoints as Point[])
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.minId = undefined
this.locationQuery.maxId = undefined
this.locationQuery.startDate = this.oldestPoint?.timestamp || null
this.locationQuery.minId = null
this.locationQuery.maxId = null
},
onEndDateClick() {
this.locationQuery.endDate = this.newestPoint?.timestamp
this.locationQuery.minId = undefined
this.locationQuery.maxId = undefined
this.locationQuery.endDate = this.newestPoint?.timestamp || null
this.locationQuery.minId = null
this.locationQuery.maxId = null
},
},
@ -215,8 +217,8 @@ export default {
if (!isFirstQuery &&
(newQuery.startDate !== oldQuery.startDate || newQuery.endDate !== oldQuery.endDate)
) {
newQuery.minId = undefined
newQuery.maxId = undefined
newQuery.minId = null
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)
}
},

40
frontend/src/components/filter/Form.vue
View file

@ -8,8 +8,8 @@
<input type="datetime-local"
id="start-date"
name="start-date"
@input="newFilter.startDate = startPlusHours($event.target.value, 0)"
@change="newFilter.startDate = startPlusHours($event.target.value, 0)"
@input="newFilter.startDate = startPlusHours($event, 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)"
@change="newFilter.endDate = endPlusHours($event.target.value, 0)"
@input="newFilter.endDate = endPlusHours($event, 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)"
@change="newFilter.limit = Number($event.target.value)"
@input="setLimit"
@change="setLimit"
:value="newFilter.limit"
:disabled="disabled"
min="1" />
@ -168,8 +168,8 @@ export default {
return !_.isEqual(
{
...oldValue,
startDate: this.normalizeDate(this.value.startDate),
endDate: this.normalizeDate(this.value.endDate),
startDate: this.normalizeDate(this.value?.startDate),
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: {

2
frontend/src/mixins/Dates.vue
View file

@ -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 '-'
}

9
frontend/src/mixins/Paginate.vue
View file

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

4
frontend/src/mixins/Points.vue
View file

@ -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()

6
frontend/src/mixins/Routes.vue
View file

@ -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

2
frontend/src/mixins/URLQueryHandler.vue
View file

@ -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