feat: ✨ implemented uploading files tidied up driver and vehicle response processing
This commit is contained in:
parent
74d00b041f
commit
a701a05c6e
@ -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
|
||||
]
|
||||
|
@ -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>
|
||||
|
@ -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)
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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)
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user