feat: 🎨
This commit is contained in:
+1
-1
@@ -39,7 +39,7 @@ export default defineComponent({
|
||||
<template>
|
||||
<div class="appContainer">
|
||||
<Navbar></Navbar>
|
||||
<cookiePrompt v-if="showCookiePrompt" @close="showCookiePrompt=false;"></cookiePrompt>
|
||||
<cookiePrompt v-if="showCookiePrompt" @close="showCookiePrompt=false;" style="margin-left:20%;width:90%;"></cookiePrompt>
|
||||
<RouterView></RouterView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -274,7 +274,7 @@ export default defineComponent({
|
||||
console.log(point.id)
|
||||
|
||||
// Redirect to /track/:id using Vue Router
|
||||
router.push(`/track/${point.id}`);
|
||||
router.push(`/route/${point.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -138,7 +138,9 @@ export default defineComponent({
|
||||
<td></td>
|
||||
<td><input type="text" placeholder="Driver Name" class="input input-bordered w-full" v-model="driverName" />
|
||||
</td>
|
||||
<td><a class="btn btn-success w-full" v-on:click="createDriver">Create Driver</a></td>
|
||||
<td><a class="btn btn-success w-full" v-on:click="createDriver"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>
|
||||
</svg> Create Driver</a></td>
|
||||
</tr>
|
||||
<tr v-if="driverList.length == 0">
|
||||
<th>
|
||||
|
||||
+34
-16
@@ -1,11 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, Ref, SetupContext } from 'vue';
|
||||
import { defineComponent, ref, Ref, SetupContext, watch } from 'vue';
|
||||
import PointCloud from '../components/pointcloud.vue';
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
import '@vuepic/vue-datepicker/dist/main.css'
|
||||
import Map from '../components/map.vue';
|
||||
import FileUpload from '../components/fileUpload.vue';
|
||||
import Message from '../components/message.vue';
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
type DriverType = {
|
||||
id: number
|
||||
@@ -52,16 +53,22 @@ export default defineComponent({
|
||||
const renderSearchOnMap: Ref<Boolean> = ref(false);
|
||||
const multipleTracks: Ref<Boolean> = ref(false);
|
||||
const trackid: Ref<number> = ref(0);
|
||||
const isLoading:Ref<boolean> = ref(false);
|
||||
|
||||
// values for UI Information distribution
|
||||
const messageType: Ref<string> = ref("");
|
||||
const message: Ref<string> = ref("");
|
||||
const route = useRoute()
|
||||
|
||||
watch(() => route.params.id, (id) => {
|
||||
loadTrack(id)
|
||||
})
|
||||
|
||||
const loadTrack = async (id: number) => {
|
||||
showMap.value = true;
|
||||
showCloud.value = false;
|
||||
search.value = false;
|
||||
showUpload.value = false;
|
||||
isLoading.value = true;
|
||||
|
||||
trackid.value = id
|
||||
|
||||
@@ -78,11 +85,13 @@ export default defineComponent({
|
||||
var response = await fetch(request);
|
||||
|
||||
if (response.ok) {
|
||||
// Wenn die Antwort OK ist, die Daten verarbeiten
|
||||
showMap.value = true;
|
||||
isLoading.value = false;
|
||||
mapData.value = await response.json();
|
||||
} else {
|
||||
|
||||
alert(`loading tracks failed: ${await response.text()}`)
|
||||
isLoading.value = false;
|
||||
console.log(await response.text());
|
||||
messageType.value = "error";
|
||||
message.value = `loading tracks failed: ${await response.text()}`;
|
||||
@@ -159,7 +168,7 @@ export default defineComponent({
|
||||
const headers: Headers = new Headers()
|
||||
headers.set('Content-Type', 'application/json')
|
||||
headers.set('Accept', 'application/json')
|
||||
|
||||
isLoading.value = true;
|
||||
showMap.value = false;
|
||||
search.value = false;
|
||||
showCloud.value = true;
|
||||
@@ -198,6 +207,7 @@ export default defineComponent({
|
||||
time: track["time"]
|
||||
})
|
||||
}
|
||||
isLoading.value = false;
|
||||
showCloud.value = true;
|
||||
|
||||
} else {
|
||||
@@ -209,6 +219,7 @@ export default defineComponent({
|
||||
|
||||
if (renderSearchOnMap.value) {
|
||||
multipleTracks.value = true;
|
||||
isLoading.value = true;
|
||||
showMap.value = true;
|
||||
showCloud.value = false;
|
||||
|
||||
@@ -217,6 +228,8 @@ export default defineComponent({
|
||||
await loadTrack(track.id);
|
||||
}, 500)
|
||||
});
|
||||
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -241,7 +254,8 @@ export default defineComponent({
|
||||
message,
|
||||
messageType,
|
||||
deleteTrack,
|
||||
getTracks
|
||||
getTracks,
|
||||
isLoading
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -252,7 +266,7 @@ export default defineComponent({
|
||||
<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'">
|
||||
</Message>
|
||||
<FileUpload v-if="showUpload" @close="showUpload = false;" @response="tracks=[]; getTracks();" :drivers="[]"
|
||||
style="position:absolute; top: 30VH; width: 80%;"></FileUpload>
|
||||
style="position:absolute; top: 30VH; width: 60%; left:25%;"></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">
|
||||
@@ -267,18 +281,22 @@ export default defineComponent({
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
</li>
|
||||
<li v-for="track in tracks">
|
||||
<span><a v-on:click="loadTrack(track.id); multipleTracks = false;"> {{ track.name }}</a>
|
||||
<button class="btn btn-error" v-on:click="deleteTrack(track.id); tracks=[]; getTracks();">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||
class="bi bi-trash3-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
|
||||
</svg>
|
||||
</button></span>
|
||||
<span><a style="line-height: 50px; height:50px;" v-on:click="loadTrack(track.id); multipleTracks = false; showMap=false;"> {{ track.name }}</a>
|
||||
<button style="width:50px; float:right;" class="btn btn-error" v-on:click="deleteTrack(track.id); tracks=[]; getTracks();">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||
class="bi bi-trash3-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="width: 70%; margin-left: 5%;">
|
||||
<div v-if="isLoading">
|
||||
<h1 class="title text-center " style="text-align: center;"> map is loading: <span class="loading loading-spinner loading-lg"></span> </h1>
|
||||
</div>
|
||||
<div style="width: 65%; margin-left: 5%;">
|
||||
<PointCloud :routes="searchedTracks" style="border-radius: 10px;" v-if="showCloud && !search"></PointCloud>
|
||||
</div>
|
||||
<div v-if="!showMap && !showCloud && search" style="margin-left: 20%; display:flex;">
|
||||
@@ -299,7 +317,7 @@ export default defineComponent({
|
||||
</div>
|
||||
<div v-if="showMap && !search && !showCloud">
|
||||
<Map :track="trackid" :multiple="multipleTracks" :geoJsonData="mapData"
|
||||
style="width: 68vw; margin-left: 10%; border-radius: 10px; border: 1px solid #95a5a6;"></Map>
|
||||
style="width: 68vw; margin-left: 15%; border-radius: 10px; border: 1px solid #95a5a6;"></Map>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -144,7 +144,9 @@ export default defineComponent({
|
||||
v-model="vehicleName" /></td>
|
||||
<td><input type="text" placeholder="License Plate" class="input input-bordered w-full "
|
||||
v-model="licensePlate" /></td>
|
||||
<td><a class="btn btn-success w-full" v-on:click="createVehicle">Create Vehicle</a></td>
|
||||
<td><a class="btn btn-success w-full" v-on:click="createVehicle"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>
|
||||
</svg> Create Vehicle</a></td>
|
||||
</tr>
|
||||
<tr v-if="vehicleList.length == 0">
|
||||
<th>
|
||||
|
||||
Reference in New Issue
Block a user