feat: implemented uploading files tidied up driver and vehicle response processing

This commit is contained in:
steev 2025-01-07 22:29:49 +01:00
parent 74d00b041f
commit a701a05c6e
5 changed files with 125 additions and 38 deletions

View File

@ -100,17 +100,17 @@ class GPXHandler:
{
"id": track.id,
"name": track.trackName,
"driver": {
"id": track.driver.id,
"name": track.driver.name
} if track.driver else None,
"vehicle": {
"id": track.vehicle.id,
"name": track.vehicle.name
} if track.vehicle else None,
"distance": track.distance,
"start_time": track.start.isoformat() if track.start else None,
"end_time": track.end.isoformat() if track.end else None,
# "driver": {
# "id": track.driver.id,
# "name": track.driver.name
# } if track.driver else None,
# "vehicle": {
# "id": track.vehicle.id,
# "name": track.vehicle.name
# } if track.vehicle else None,
# "distance": track.distance,
# "start_time": track.start.isoformat() if track.start else None,
# "end_time": track.end.isoformat() if track.end else None,
}
for track in tracks # iterates all tracks and appends them to the list
]

View File

@ -2,11 +2,25 @@
import {defineComponent, SetupContext, ref, Ref} from 'vue';
import GetLocalizedText from "../classes/language";
type driver = {
id:number
name:string
}
export default defineComponent({
emits: ['close'],
emits: ['close', 'response'],
name: 'settings',
setup(_, { emit }: SetupContext) {
var showUploadEmbed:Ref<boolean> = ref(false);
props: ["drivers"],
setup(props, { emit }: SetupContext) {
const file = ref<File | null>();
const form = ref<HTMLFormElement>();
const drivers:Ref<driver[]> = ref([])
const selectedDriver:Ref<number> = ref(0);
props.drivers.forEach((d:driver) => {
drivers.value.push({id:d.id, name:d.name})
});
// localized text
// if there is time left this gets moved out to its own class
@ -15,6 +29,46 @@ export default defineComponent({
localizedUploadHeader.value = await GetLocalizedText("localizedUploadHeader")
}
var fileInputChange = async ($event: Event) => {
const target = $event.target as HTMLInputElement;
if (target && target.files) {
file.value = target.files[0];
}
}
var save = async () => {
if (!file.value) {
alert("Bitte wählen Sie eine Datei aus, bevor Sie sie hochladen.");
return;
}
const formData = new FormData();
formData.append("file", file.value);
formData.append("driverId", selectedDriver.value.toString());
try {
const response = await fetch('/track', {
method: 'POST',
body: formData,
});
if (response.ok) {
const result = await response.json();
emit("response", result);
alert("Datei erfolgreich hochgeladen!");
} else {
console.error('Fehler beim Hochladen:', response.statusText);
alert("Fehler beim Hochladen der Datei.");
}
} catch (error) {
console.error("upload failed:", error);
alert("failed to upload file.");
}
}
getLocalization()
const close = () => {
emit("close");
@ -22,6 +76,9 @@ export default defineComponent({
return {
close,
fileInputChange,
selectedDriver,
save,
localizedUploadHeader
};
},
@ -44,9 +101,15 @@ export default defineComponent({
<div class="label">
<span class="label-text">Upload a GPX File</span>
</div>
<input type="file" class="file-input file-input-bordered w-full max-w-xs" />
<input type="file" ref="file" v-on:change="fileInputChange($event)" class="file-input file-input-bordered w-full max-w-xs" />
</label>
<button class="btn btn-success">Upload</button>
<div class="dropdown dropdown-bottom">
select Driver: <div tabindex="0" role="button" class="btn m-1">Click</div>
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
<li v-for="driver in drivers"><a v-on:click="selectedDriver=driver.id">{{ driver.name }}</a></li>
</ul>
</div>
<button class="btn btn-success" v-on:click="save">Upload</button>
</div>
</div>
</template>

View File

@ -34,16 +34,9 @@ export default defineComponent({
var jsonBody = await response.json()
// convert vehicles from json response to processable data
var drivers: driver[] = []
for (let i = 0; i < jsonBody.length; i++) {
drivers.push(jsonBody["vehicles"][i])
driverList.value.push({ id: jsonBody[i]["id"], name: jsonBody[i]["name"] })
}
// push all vehicles into the table
drivers.forEach(driver => {
driverList.value.push({ id: driver.id, name: driver.name })
});
} else {
alert(response.text)
}

View File

@ -18,9 +18,9 @@ export default defineComponent({
setup(_, { emit }: SetupContext) {
const showMap:Ref<boolean> = ref(false);
const showCloud:Ref<boolean> = ref(false);
const search:Ref<boolean> = ref(true);
const showUpload:Ref<boolean> = ref(false);
const tracks:Ref<track[]> = ref([{id:0, name:"test"}])
const search:Ref<boolean> = ref(false);
const showUpload:Ref<boolean> = ref(true);
const tracks:Ref<track[]> = ref([])
const startSearchDate = ref();
const endSearchDate = ref();
const mapData = ref(null);
@ -29,14 +29,51 @@ export default defineComponent({
showMap.value = true;
showCloud.value = false;
search.value = false;
}
showUpload.value = false;
const toggleUpdload = () => {
const headers: Headers = new Headers()
headers.set('Content-Type', 'application/json')
headers.set('Accept', 'application/json')
const request: RequestInfo = new Request("/track?id=" + id, {
method:"GET",
headers:headers
})
var response = await fetch(request)
// make sure the request was successfull
if (response.ok){
// convert vehicles from json response to processable data
mapData.value = await response.json()
} else {
alert(response.text)
}
}
const getTracks = async() => {
const headers: Headers = new Headers()
headers.set('Content-Type', 'application/json')
headers.set('Accept', 'application/json')
const request: RequestInfo = new Request("/track", {
method:"GET",
headers:headers
})
var response = await fetch(request)
// make sure the request was successfull
if (response.ok){
var jsonBody = await response.json()
// convert vehicles from json response to processable data
for(let i = 0; i < jsonBody.length; i++) {
tracks.value.push({id: jsonBody[i]["id"], name: jsonBody[i]["name"]})
}
} else {
alert(response.text)
}
}
const searchTracks = async() => {
@ -62,12 +99,12 @@ export default defineComponent({
<template>
<FileUpload v-if="showUpload" @close="showUpload=false;" style="position:absolute; top: 30VH; width: 80%;"></FileUpload>
<FileUpload v-if="showUpload" @close="showUpload=false;" :drivers="[]" style="position:absolute; top: 30VH; width: 80%;"></FileUpload>
<div class="grid grid-flow-col auto-cols-max gap-4">
<div>
<ul class="menu menu-xs bg-base-200 rounded-lg w-full max-w-xs overscroll-auto">
<li> <a v-on:click="showUpload=true; showMap=false;showCloud=false;search=false;"> upload file </a> </li>
<li> <a v-on:click="search=true;showMap=false;showCloud=false;"> filter track </a> </li>
<li> <a v-on:click="search=true;showMap=false;showCloud=false;showUpload=false;"> filter track </a> </li>
<li><div class="divider"></div></li>
<li v-for="track in tracks"> <a v-on:click="loadTrack(track.id)"> {{ track.name }} </a> </li>
</ul>

View File

@ -30,15 +30,9 @@ export default defineComponent({
var jsonBody = await response.json()
// convert vehicles from json response to processable data
var vehicles:vehicle[] = []
for(let i = 0; i < jsonBody.length; i++) {
vehicles.push(jsonBody["vehicles"][i])
vehicleList.value.push({id: jsonBody[i]["id"], name: jsonBody[i]["name"]})
}
// push all vehicles into the table
vehicles.forEach(vehicle => {
vehicleList.value.push({id: vehicle.id, name: vehicle.name})
});
} else {
alert(response.text)
}