Removed TrackingTrips
This commit is contained in:
@@ -1,283 +0,0 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
defineShortcuts({
|
||||
'backspace': () => {
|
||||
router.push("/trackingTrips")
|
||||
},
|
||||
'arrowleft': () => {
|
||||
if(openTab.value > 0){
|
||||
openTab.value -= 1
|
||||
}
|
||||
},
|
||||
'arrowright': () => {
|
||||
if(openTab.value < 3) {
|
||||
openTab.value += 1
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const id = ref(route.params.id ? route.params.id : null )
|
||||
const openTab = ref(0)
|
||||
|
||||
|
||||
//Working
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const itemInfo = ref({
|
||||
name: "",
|
||||
type: "Geschäftlich",
|
||||
driver: null,
|
||||
active: true
|
||||
})
|
||||
const oldItemInfo = ref({})
|
||||
|
||||
const profiles = ref([])
|
||||
const projects = ref([])
|
||||
|
||||
//Functions
|
||||
const setupPage = async () => {
|
||||
if(mode.value === "show" ){
|
||||
itemInfo.value = await useSupabaseSelectSingle("trackingtrips",route.params.id,"*, trackingDevice(*, vehicle(*))")
|
||||
} else if(mode.value === "edit") {
|
||||
itemInfo.value = await useSupabaseSelectSingle("trackingtrips",route.params.id,"*")
|
||||
|
||||
}
|
||||
|
||||
if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
|
||||
|
||||
profiles.value = await useSupabaseSelect("profiles","*")
|
||||
projects.value = await useSupabaseSelect("projects","*")
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(itemInfo.value) {
|
||||
router.push(`/trackingTrips/show/${itemInfo.value.id}`)
|
||||
} else {
|
||||
router.push(`/trackingTrips`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const getRowAmount = (row) => {
|
||||
let amount = 0
|
||||
|
||||
row.accounts.forEach(account => {
|
||||
amount += account.amountNet
|
||||
amount += account.amountTax
|
||||
})
|
||||
|
||||
return amount
|
||||
}
|
||||
|
||||
setupPage()
|
||||
|
||||
const zoom = ref(6)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar
|
||||
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
||||
>
|
||||
<template #left>
|
||||
<UButton
|
||||
icon="i-heroicons-chevron-left"
|
||||
variant="outline"
|
||||
@click="router.push(`/trackingTrips`)"
|
||||
>
|
||||
Fahrten
|
||||
</UButton>
|
||||
</template>
|
||||
<template #center>
|
||||
<h1
|
||||
v-if="itemInfo"
|
||||
:class="['text-xl','font-medium' ]"
|
||||
><UIcon name="i-heroicons-lock-closed" v-if="itemInfo.fixed"/><UIcon name="i-heroicons-lock-open" v-else/> {{itemInfo ? `Fahrt vom: ${dayjs(itemInfo.startTime).format("DD.MM.YY HH:mm")} über ${(itemInfo.distance/1000).toFixed(2)} km` : '' }} </h1>
|
||||
</template>
|
||||
<template #right>
|
||||
<UButton
|
||||
@click="cancelEditorCreate"
|
||||
color="red"
|
||||
variant="outline"
|
||||
v-if="mode === 'edit' || mode === 'create'"
|
||||
>
|
||||
Abbrechen
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
variant="outline"
|
||||
color="primary"
|
||||
icon="i-mdi-content-save"
|
||||
@click="dataStore.updateItem('trackingtrips',itemInfo, oldItemInfo)"
|
||||
>
|
||||
Entwurf
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
icon="i-mdi-content-save"
|
||||
@click="dataStore.updateItem('trackingtrips',{...itemInfo, fixed:true}, oldItemInfo)"
|
||||
>
|
||||
Festschreiben
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="mode === 'show' && !itemInfo.fixed"
|
||||
@click="router.push(`/trackingTrips/edit/${itemInfo.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
|
||||
|
||||
<UTabs
|
||||
:items="[{label: 'Informationen'}]"
|
||||
v-if="mode === 'show' && itemInfo.id"
|
||||
class="p-5"
|
||||
v-model="openTab"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<div v-if="item.label === 'Informationen'" class="flex flex-col mt-5">
|
||||
<div class="flex flex-row" style="height: 40vh">
|
||||
<div class="w-1/2 mr-5">
|
||||
<UCard>
|
||||
<table class="w-full">
|
||||
<tr>
|
||||
<td>Festgeschrieben:</td>
|
||||
<td>{{itemInfo.fixed ? "Ja" : "Nein"}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fahrzeug:</td>
|
||||
<td><nuxt-link :to="`/vehicles/show/${itemInfo.trackingDevice.vehicle.id}`">{{itemInfo.trackingDevice.vehicle.licensePlate}}</nuxt-link></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Typ:</td>
|
||||
<td>{{itemInfo.type ? itemInfo.type : "-"}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fahrer:</td>
|
||||
<td>{{profiles.find(i => i.id === itemInfo.driver) ? profiles.find(i => i.id === itemInfo.driver).fullName : "-"}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Startzeit:</td>
|
||||
<td>{{dayjs(itemInfo.startTime).format("DD.MM.YY HH:mm")}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Endzeit:</td>
|
||||
<td>{{dayjs(itemInfo.endTime).format("DD.MM.YY HH:mm")}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Entfernung:</td>
|
||||
<td>{{(itemInfo.distance/1000).toFixed(2)}} km</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Beschreibung:</td>
|
||||
<td>{{itemInfo.description ? itemInfo.description : "-" }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</UCard>
|
||||
<UCard class="mt-5">
|
||||
<Map :markers="[[itemInfo.startLatitude, itemInfo.startLongitude],[itemInfo.endLatitude, itemInfo.endLongitude]]"
|
||||
:startMarker="[itemInfo.startLatitude, itemInfo.startLongitude]"
|
||||
:endMarker="[itemInfo.endLatitude, itemInfo.endLongitude]"
|
||||
/>
|
||||
|
||||
|
||||
|
||||
|
||||
</UCard>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<UCard>
|
||||
<div style="height: 75vh">
|
||||
<HistoryDisplay
|
||||
type="trackingtrip"
|
||||
v-if="itemInfo"
|
||||
:element-id="itemInfo.id"
|
||||
render-headline
|
||||
/>
|
||||
</div>
|
||||
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-40 mt-5">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</UTabs>
|
||||
<UForm
|
||||
v-else-if="mode === 'edit' || mode === 'create'"
|
||||
class="p-5"
|
||||
>
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.type"
|
||||
:options="['Privat','Geschäftlich','Arbeitsweg']"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Fahrer:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.driver"
|
||||
:options="[{id: null, fullName: 'Kein Fahrer'},...profiles]"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
|
||||
>
|
||||
<template #label>
|
||||
{{profiles.find(profile => profile.id === itemInfo.driver) ? profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer ausgewählt'}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Projekt:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.project"
|
||||
:options="projects"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Beschreibung:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.description"
|
||||
rows="6"
|
||||
maxrows="6"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
td {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
vertical-align: top;
|
||||
padding-bottom: 0.15em;
|
||||
padding-top: 0.15em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Fahrten" :badge="filteredRows.length">
|
||||
<template #right>
|
||||
<UInput
|
||||
id="searchinput"
|
||||
v-model="searchString"
|
||||
icon="i-heroicons-funnel"
|
||||
autocomplete="off"
|
||||
placeholder="Suche..."
|
||||
class="hidden lg:block"
|
||||
@keydown.esc="$event.target.blur()"
|
||||
>
|
||||
<template #trailing>
|
||||
<UKbd value="/" />
|
||||
</template>
|
||||
</UInput>
|
||||
|
||||
<!-- <UButton @click="router.push(`/vehicles/create`)">+ Fahrzeug</UButton>-->
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<UDashboardToolbar>
|
||||
<template #right>
|
||||
<USelectMenu
|
||||
v-model="selectedColumns"
|
||||
icon="i-heroicons-adjustments-horizontal-solid"
|
||||
:options="templateColumns"
|
||||
multiple
|
||||
class="hidden lg:block"
|
||||
by="key"
|
||||
>
|
||||
<template #label>
|
||||
Spalten
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
</UDashboardToolbar>
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="columns"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => router.push(`/trackingTrips/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Fahrten anzuzeigen' }"
|
||||
>
|
||||
<template #fixed-data="{row}">
|
||||
<UIcon name="i-heroicons-lock-closed" v-if="row.fixed"/>
|
||||
<div v-else></div>
|
||||
</template>
|
||||
<template #licensePlate-data="{row}">
|
||||
<span v-if="row === filteredRows[selectedItem]" class="font-bold text-primary-500">{{row.vehicle.licensePlate}}</span>
|
||||
<span v-else>{{row.vehicle.licensePlate}}</span>
|
||||
</template>
|
||||
<template #startTime-data="{row}">
|
||||
{{dayjs(row.startTime).format("DD.MM.YY HH:mm")}}
|
||||
</template>
|
||||
<template #endTime-data="{row}">
|
||||
{{dayjs(row.endTime).format("DD.MM.YY HH:mm")}}
|
||||
</template>
|
||||
<template #distance-data="{row}">
|
||||
{{row.distance > 0 ? (row.distance/1000).toFixed(2) : 0 }} km
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import dayjs from "dayjs";
|
||||
|
||||
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'Enter': {
|
||||
usingInput: true,
|
||||
handler: () => {
|
||||
router.push(`/trackingTrips/show/${filteredRows.value[selectedItem.value].id}`)
|
||||
}
|
||||
},
|
||||
'arrowdown': () => {
|
||||
if(selectedItem.value < filteredRows.value.length - 1) {
|
||||
selectedItem.value += 1
|
||||
} else {
|
||||
selectedItem.value = 0
|
||||
}
|
||||
},
|
||||
'arrowup': () => {
|
||||
if(selectedItem.value === 0) {
|
||||
selectedItem.value = filteredRows.value.length - 1
|
||||
} else {
|
||||
selectedItem.value -= 1
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const items = ref([])
|
||||
const selectedItem = ref(0)
|
||||
|
||||
const setupPage = async () => {
|
||||
items.value = await useSupabaseSelect("trackingtrips","*, trackingDevice(*), vehicle (*)","startTime",false)
|
||||
}
|
||||
|
||||
setupPage()
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: 'fixed',
|
||||
label: ""
|
||||
},
|
||||
{
|
||||
key: 'licensePlate',
|
||||
label: "Kennzeichen:",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
label: "Typ:",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "startTime",
|
||||
label: "Startzeit:",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "endTime",
|
||||
label: "Endzeit:",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "distance",
|
||||
label: "Entfernung:",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
const searchString = ref('')
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
return useSearch(searchString.value, items.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user