Steev/GeoTracking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ✨ implemented deleting tracks, drivers, vehicles with proper data correction

Browse Source
This commit is contained in:
steev 2025-01-16 01:30:32 +01:00
parent 1df2b155f3
commit a88c9e5ff7
9 changed files with 337 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
app.py
View File

@ -35,6 +35,22 @@ SessionFactory = sessionmaker(bind=engine)
session = SessionFactory() session = SessionFactory()
create_table(engine) create_table(engine)
print("pushing initial data if not already happened")
try:
defDriver = session.query(Driver).filter(id=1)
defVehicle = session.query(Vehicle).filter(id=1)
if not defDriver and not defVehicle:
defaultVehicle = Vehicle(id=1, name="default", licenseplate="default")
defaultDriver = Driver(id=1, name="default")
session.add(defaultVehicle)
session.add(defaultDriver)
session.commit()
session.flush()
except:
print("default data not pushed as already present")
session.flush()
print("initialize handlers") print("initialize handlers")
gpxHandler = GPXHandler(session) gpxHandler = GPXHandler(session)
driverHandler = DriverHandler(session) driverHandler = DriverHandler(session)
@ -106,7 +122,16 @@ def getTrack():
app.logger.debug(f"fetching all tracks failed with error {e}") app.logger.debug(f"fetching all tracks failed with error {e}")
return f"error {e}", 500 return f"error {e}", 500
case "DELETE": case "DELETE":
pass data = request.get_json()
if "id" not in data:
return "no if found", 400
try:
gpxHandler.deleteTrack(data["id"])
return "track deleted", 200
except Exception as e:
return f"couldnt delete track due to error: {e}", 500
@app.route("/track/meta", methods=['GET']) @app.route("/track/meta", methods=['GET'])
@ -175,10 +200,20 @@ def handleDriverRoute():
except Exception as e: except Exception as e:
app.logger.debug(f"creating drivers failed with error {e}") app.logger.debug(f"creating drivers failed with error {e}")
return "error" + " " + str(e), 500 return "error" + " " + str(e), 500
case "PUT":
pass
case "DELETE": case "DELETE":
pass data = request.get_json()
if "id" not in data:
return "no if found", 400
try:
if data["id"] == 1:
return "deleting defaults is forbidden", 400
driverHandler.deleteDriver(data["id"])
return "driver deleted", 200
except Exception as e:
return f"couldnt delete driver due to error: {e}", 500
@app.route("/vehicle", methods=['GET', 'POST', 'PUT', 'DELETE']) @app.route("/vehicle", methods=['GET', 'POST', 'PUT', 'DELETE'])
@ -230,10 +265,20 @@ def handleVehicleRoute():
except Exception as e: except Exception as e:
app.logger.debug(f"creating vehicle with name {name} failed with error {e}") app.logger.debug(f"creating vehicle with name {name} failed with error {e}")
return "error" + " " + str(e), 500 return "error" + " " + str(e), 500
case "PUT":
pass
case "DELETE": case "DELETE":
pass data = request.get_json()
if "id" not in data:
return "no if found", 400
try:
if data["id"] == 1:
return "deleting defaults is forbidden", 400
vehicleHandler.deleteVehicle(data["id"])
return "vehicle deleted", 200
except Exception as e:
return f"couldnt delete vehicle due to error: {e}", 500
@app.route('/upload', methods=['POST']) @app.route('/upload', methods=['POST'])

35
modules/driverHandler.py
View File

@ -1,7 +1,7 @@
from sqlalchemy.orm import Session from sqlalchemy.orm import Session
from errors.NotFoundException import NotFoundError from errors.NotFoundException import NotFoundError
from modules.geoObjects import Driver from modules.geoObjects import Driver, Track
class DriverHandler: class DriverHandler:
@ -19,30 +19,32 @@ class DriverHandler:
raise ValueError("name is empty") raise ValueError("name is empty")
driver = Driver(name=name) driver = Driver(name=name)
self.dbSession.add(driver) self.dbSession.add(driver)
self.dbSession.commit() self.dbSession.commit()
return driver return driver
except Exception as e: except Exception as e:
raise RuntimeError(f"failed to create driver with errors{e}") raise RuntimeError(f"failed to create driver with errors{e}")
# handles getting a driver by its id from the database # handles getting a driver by its id from the database
def getDriver(self, driverID: int) -> Driver: def getDriver(self, driverID: int) -> Driver:
try: try:
driver = self.dbSession.query(Driver).filter_by(id=driverID).first() driver = self.dbSession.query(
Driver).filter_by(id=driverID).first()
if driver: if driver:
return driver return driver
else: else:
raise NotFoundError(f"Driver with ID {driverID} not found", errors=[]) raise NotFoundError(
f"Driver with ID {driverID} not found", errors=[])
except Exception as e: except Exception as e:
raise RuntimeError(f"failed to get driver with errors{e}") raise RuntimeError(f"failed to get driver with errors{e}")
# handles getting all drivers from the database # handles getting all drivers from the database
def getDrivers(self): def getDrivers(self):
try: try:
drivers = self.dbSession.query(Driver).all() drivers = self.dbSession.query(Driver).all()
driverList = [ driverList = [
{ {
"id": driver.id, "id": driver.id,
@ -53,6 +55,19 @@ class DriverHandler:
] ]
return driverList return driverList
except Exception as e: except Exception as e:
raise RuntimeError(f"failed to get drivers with errors{e}") raise RuntimeError(f"failed to get drivers with errors{e}")
def deleteDriver(self, id):
try:
updated_rows = (
self.dbSession.query(Track).filter(
Track.driver_id == id).update({Track.driver_id: 1})
)
self.dbSession.query(Driver).filter(Driver.id == id).delete()
self.dbSession.commit()
except Exception as e:
raise RuntimeError(f"failed to delete driver due to error: {e}")

11
modules/geoObjects.py
View File

@ -12,10 +12,10 @@ def db_connect():
engine = create_engine("postgresql://example:example@localhost/geotrack", poolclass=NullPool) engine = create_engine("postgresql://example:example@localhost/geotrack", poolclass=NullPool)
# Überprüfe die Verbindung # Überprüfe die Verbindung
with engine.connect() as connection: with engine.connect() as connection:
print("Verbindung zur Datenbank erfolgreich!") print("connected to database!")
return engine return engine
except OperationalError as e: except OperationalError as e:
print(f"Fehler bei der Verbindung zur Datenbank: {e}") print(f"database connection failed: {e}")
return None return None
# Funktion zur Erstellung der Tabellen # Funktion zur Erstellung der Tabellen
@ -23,11 +23,12 @@ def create_table(engine):
try: try:
if engine is not None: if engine is not None:
Base.metadata.create_all(engine) Base.metadata.create_all(engine)
print("Tabellen wurden erfolgreich erstellt!")
print("created tables")
else: else:
print("Keine Verbindung zur Datenbank verfügbar.") print("error no connection")
except Exception as e: except Exception as e:
print(f"Fehler bei der Tabellenerstellung: {e}") print(f"unexpected error during initial database creation: {e}")
# Track-Tabelle # Track-Tabelle
class Track(Base): class Track(Base):

8
modules/gpxInterpreter.py
View File

@ -180,4 +180,10 @@ class GPXHandler:
for track in tracks # iterates all tracks and appends them to the list for track in tracks # iterates all tracks and appends them to the list
] ]
return track_list return track_list
def deleteTrack(self, trackid):
self.__dbSession.query(Waypoint).filter(Waypoint.track_id == trackid).delete()
self.__dbSession.query(Track).filter(Track.id == trackid).delete()
self.__dbSession.commit()

14
modules/vehicleHandler.py
View File

@ -1,6 +1,6 @@
from sqlalchemy.orm import Session from sqlalchemy.orm import Session
from modules.geoObjects import Vehicle from modules.geoObjects import Track, Vehicle
class VehicleHandler: class VehicleHandler:
dbSession: Session dbSession: Session
@ -42,3 +42,15 @@ class VehicleHandler:
] ]
return driverList return driverList
def deleteVehicle(self, id):
try:
updated_rows = (
self.dbSession.query(Track).filter(
Track.vehicle_id == id).update({Track.vehicle_id: 1})
)
self.dbSession.query(Vehicle).filter(Vehicle.id == id).delete()
self.dbSession.commit()
except Exception as e:
raise RuntimeError(f"failed to delete driver due to error: {e}")

6
web/src/components/fileUpload.vue
View File

@ -25,8 +25,8 @@ export default defineComponent({
const form = ref<HTMLFormElement>(); const form = ref<HTMLFormElement>();
const drivers: Ref<driver[]> = ref([]) const drivers: Ref<driver[]> = ref([])
const vehicles: Ref<vehicle[]> = ref([]) const vehicles: Ref<vehicle[]> = ref([])
const selectedDriverID: Ref<number> = ref(0); const selectedDriverID: Ref<number> = ref(1);
const selectedVehicleID: Ref<number> = ref(0); const selectedVehicleID: Ref<number> = ref(1);
const selectedDriverName: Ref<String> = ref("N/A"); const selectedDriverName: Ref<String> = ref("N/A");
const selectedVehicleName: Ref<String> = ref("N/A"); const selectedVehicleName: Ref<String> = ref("N/A");
@ -119,7 +119,7 @@ export default defineComponent({
if (!file.value) { if (!file.value) {
messageType.value = "warning"; messageType.value = "warning";
message.value = "please fill all values"; message.value = "please select a file";
return; return;
} }

43
web/src/views/driver.vue
View File

@ -17,6 +17,31 @@ export default defineComponent({
const messageType: Ref<string> = ref(""); const messageType: Ref<string> = ref("");
const message: Ref<string> = ref(""); const message: Ref<string> = ref("");
// handles delete a driver
const deleteDriver = async (driverID: number) => {
const headers: Headers = new Headers()
headers.set('Content-Type', 'application/json')
headers.set('Accept', 'application/json')
const requestBody = JSON.stringify({ id: driverID });
const request: RequestInfo = new Request("http://localhost:5000/driver", {
method: "DELETE",
headers: headers,
body: requestBody
})
var response = await fetch(request)
if (!response.ok) {
console.log(await response.text())
messageType.value = "error";
message.value = `deleting driver failed with error: ${await response.text()}`;
} else {
console.log(await response.text())
messageType.value = "success";
message.value = `deleted driver`;
}
}
// handles sending webrequests to the backend // handles sending webrequests to the backend
const getDrivers = async () => { const getDrivers = async () => {
@ -45,7 +70,7 @@ export default defineComponent({
} else { } else {
console.log(await response.text()) console.log(await response.text())
messageType.value = "error"; messageType.value = "error";
message.value = `upload failed: ${response.text()}`; message.value = `upload failed: ${response.text()}`;
} }
} }
@ -72,7 +97,7 @@ export default defineComponent({
} else { } else {
console.log(await response.text()) console.log(await response.text())
messageType.value = "error"; messageType.value = "error";
message.value = `upload failed: ${response.text()}`; message.value = `upload failed: ${response.text()}`;
} }
} }
@ -82,7 +107,8 @@ export default defineComponent({
driverName, driverName,
driverList, driverList,
message, message,
messageType messageType,
deleteDriver
}; };
}, },
}); });
@ -90,7 +116,8 @@ export default defineComponent({
<template> <template>
<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message> <Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'">
</Message>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="table"> <table class="table">
<!-- head --> <!-- head -->
@ -115,11 +142,17 @@ export default defineComponent({
<td> <td>
<div class="skeleton h-4 w-full"></div> <div class="skeleton h-4 w-full"></div>
</td> </td>
<td><a class="btn btn-error w-full" v-on:click="createVehicle">Delete Vehicle</a></td> <td></td>
</tr> </tr>
<tr v-for="driver in driverList"> <tr v-for="driver in driverList">
<th>{{ driver.id }}</th> <th>{{ driver.id }}</th>
<td>{{ driver.name }}</td> <td>{{ driver.name }}</td>
<td><a v-if="driver.id != 1" class="btn btn-error w-full" v-on:click="deleteDriver(driver.id)"><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>Delete Driver</a></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

57
web/src/views/route.vue
View File

@ -51,7 +51,7 @@ export default defineComponent({
const mapData: Ref<GeoJSON | null> = ref(null); const mapData: Ref<GeoJSON | null> = ref(null);
const renderSearchOnMap: Ref<Boolean> = ref(false); const renderSearchOnMap: Ref<Boolean> = ref(false);
const multipleTracks: Ref<Boolean> = ref(false); const multipleTracks: Ref<Boolean> = ref(false);
const trackid: Ref<number> = ref(0) const trackid: Ref<number> = ref(0);
// values for UI Information distribution // values for UI Information distribution
const messageType: Ref<string> = ref(""); const messageType: Ref<string> = ref("");
@ -88,10 +88,38 @@ export default defineComponent({
} catch (error) { } catch (error) {
console.error("loading tracks failed with error:", error); console.error("loading tracks failed with error:", error);
messageType.value = "error"; messageType.value = "error";
message.value = `loading tracks failed with error: ${error}`; message.value = `loading tracks failed with error: ${error}`;
} }
}; };
// handles deleting tracks
// note: deleting tracks takes a while due to their waypoints this can take a while and its not a bug
const deleteTrack = async (trackID: number) => {
const headers: Headers = new Headers()
headers.set('Content-Type', 'application/json')
headers.set('Accept', 'application/json')
const requestBody = JSON.stringify({ id: trackID });
const request: RequestInfo = new Request("http://localhost:5000/track", {
method: "DELETE",
headers: headers,
body: requestBody
})
var response = await fetch(request)
if (!response.ok) {
console.log(await response.text())
messageType.value = "error";
message.value = `deleting track failed with error: ${await response.text()}`;
getTracks()
} else {
console.log(await response.text())
messageType.value = "success";
message.value = `deleted track`;
}
}
const getTracks = async () => { const getTracks = async () => {
const headers: Headers = new Headers() const headers: Headers = new Headers()
@ -115,7 +143,7 @@ export default defineComponent({
} else { } else {
console.log(await response.text()) console.log(await response.text())
messageType.value = "error"; messageType.value = "error";
message.value = `loading track list failed with error: ${error}`; message.value = `loading track list failed with error: ${error}`;
} }
} }
@ -132,7 +160,7 @@ export default defineComponent({
if (startSearchDate.value == null || endSearchDate.value == null) { if (startSearchDate.value == null || endSearchDate.value == null) {
messageType.value = "error"; messageType.value = "error";
message.value = "please give all required infos"; message.value = "please give all required infos";
return; return;
} }
@ -167,7 +195,7 @@ export default defineComponent({
} else { } else {
console.log(await response.text()) console.log(await response.text())
messageType.value = "error"; messageType.value = "error";
message.value = `searching tracks failed: ${await response.text()}`; message.value = `searching tracks failed: ${await response.text()}`;
} }
if (renderSearchOnMap.value) { if (renderSearchOnMap.value) {
@ -202,7 +230,9 @@ export default defineComponent({
multipleTracks, multipleTracks,
trackid, trackid,
message, message,
messageType messageType,
deleteTrack,
getTracks
}; };
}, },
}); });
@ -210,8 +240,9 @@ export default defineComponent({
<template> <template>
<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message> <Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'">
<FileUpload v-if="showUpload" @close="showUpload = false;" :drivers="[]" </Message>
<FileUpload v-if="showUpload" @close="showUpload = false;" @response="getTracks" :drivers="[]"
style="position:absolute; top: 30VH; width: 80%;"></FileUpload> style="position:absolute; top: 30VH; width: 80%;"></FileUpload>
<div class="grid grid-flow-col auto-cols-max gap-4"> <div class="grid grid-flow-col auto-cols-max gap-4">
<div> <div>
@ -226,7 +257,15 @@ export default defineComponent({
<li v-if="tracks.length == 0"> <li v-if="tracks.length == 0">
<div class="skeleton h-4 w-full"></div> <div class="skeleton h-4 w-full"></div>
</li> </li>
<li v-for="track in tracks"> <a v-on:click="loadTrack(track.id); multipleTracks = false;"> {{ track.name }} </a> <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)">
<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> </li>
</ul> </ul>
</div> </div>

256
web/src/views/vehicle.vue
View File

@ -2,140 +2,174 @@
import { defineComponent, Ref, ref, SetupContext } from 'vue'; import { defineComponent, Ref, ref, SetupContext } from 'vue';
type vehicle = { type vehicle = {
id: number id: number
name: string name: string
licenseplate: string licenseplate: string
} }
export default defineComponent({ export default defineComponent({
name: 'map', name: 'map',
setup(_, { emit }: SetupContext) { setup(_, { emit }: SetupContext) {
const vehicleName: Ref<string> = ref("") const vehicleName: Ref<string> = ref("")
const licensePlate: Ref<string> = ref("") const licensePlate: Ref<string> = ref("")
const vehicleList: Ref<vehicle[]> = ref([]) const vehicleList: Ref<vehicle[]> = ref([])
// values for UI Information distribution // values for UI Information distribution
const messageType: Ref<string> = ref(""); const messageType: Ref<string> = ref("");
const message: Ref<string> = ref(""); const message: Ref<string> = ref("");
// handles getting all existing drivers // handles deleting a vehicle
const getVehicles = async () => { const deleteVehicle = async (vehicleID: number) => {
const headers: Headers = new Headers() const headers: Headers = new Headers()
headers.set('Content-Type', 'application/json') headers.set('Content-Type', 'application/json')
headers.set('Accept', 'application/json') headers.set('Accept', 'application/json')
const request: RequestInfo = new Request("http://localhost:5000/vehicle", { const requestBody = JSON.stringify({ id: vehicleID });
method: "GET",
headers: headers
})
var response = await fetch(request) const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
// make sure the request was successfull method: "DELETE",
if (response.ok) { headers: headers,
var jsonBody = await response.json() body: requestBody
})
// convert vehicles from json response to processable data var response = await fetch(request)
for (let i = 0; i < jsonBody.length; i++) { if (!response.ok) {
let plate = "N/A" console.log(await response.text())
let vehicle = jsonBody[i] messageType.value = "error";
if (vehicle["licensePlate"] != undefined) { message.value = `deleting vehicle failed with error: ${await response.text()}`;
plate = vehicle["licensePlate"]; } else {
} console.log(await response.text())
messageType.value = "success";
message.value = `deleted vehicle`;
}
}
vehicleList.value.push({ id: vehicle["id"], name: vehicle["name"], licenseplate: plate }) // handles getting all existing drivers
} const getVehicles = async () => {
} else { const headers: Headers = new Headers()
console.log(await response.text()) headers.set('Content-Type', 'application/json')
messageType.value = "error"; headers.set('Accept', 'application/json')
const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
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++) {
let plate = "N/A"
let vehicle = jsonBody[i]
if (vehicle["licensePlate"] != undefined) {
plate = vehicle["licensePlate"];
}
vehicleList.value.push({ id: vehicle["id"], name: vehicle["name"], licenseplate: plate })
}
} else {
console.log(await response.text())
messageType.value = "error";
message.value = `loading vehicles failed with error: ${await response.text()}`; message.value = `loading vehicles failed with error: ${await response.text()}`;
} }
} }
// handles sending webrequests to the backend // handles sending webrequests to the backend
const createVehicle = async () => { const createVehicle = async () => {
const headers: Headers = new Headers() const headers: Headers = new Headers()
headers.set('Content-Type', 'application/json') headers.set('Content-Type', 'application/json')
headers.set('Accept', 'application/json') headers.set('Accept', 'application/json')
const requestBody = JSON.stringify({ name: vehicleName.value, licensePlate: licensePlate.value }); const requestBody = JSON.stringify({ name: vehicleName.value, licensePlate: licensePlate.value });
const request: RequestInfo = new Request("http://localhost:5000/vehicle", { const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
method: "POST", method: "POST",
headers: headers, headers: headers,
body: requestBody body: requestBody
}) })
var response = await fetch(request) var response = await fetch(request)
// make sure the request was successfull // make sure the request was successfull
if (response.ok) { if (response.ok) {
var jsonBody = await response.json() var jsonBody = await response.json()
vehicleList.value.push({ id: jsonBody["body"], name: vehicleName.value, licenseplate: "N/A" }) vehicleList.value.push({ id: jsonBody["body"], name: vehicleName.value, licenseplate: "N/A" })
} else { } else {
console.log(await response.text()) console.log(await response.text())
messageType.value = "error"; messageType.value = "error";
message.value = `creating vehicle failed with error: ${error}`; message.value = `creating vehicle failed with error: ${error}`;
} }
} }
getVehicles() getVehicles()
return { return {
createVehicle, createVehicle,
vehicleName, vehicleName,
licensePlate, licensePlate,
vehicleList, vehicleList,
message, message,
messageType messageType,
}; deleteVehicle
}, };
},
}); });
</script> </script>
<template> <template>
<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message> <Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'">
<div class="overflow-x-auto"> </Message>
<table class="table"> <div class="overflow-x-auto">
<!-- head --> <table class="table">
<thead> <!-- head -->
<tr> <thead>
<th>ID</th> <tr>
<th>Name</th> <th>ID</th>
<th></th> <th>Name</th>
</tr> <th></th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td></td> <tr>
<td><input type="text" placeholder="Vehicle Name" class="input input-bordered w-full " <td></td>
v-model="vehicleName" /></td> <td><input type="text" placeholder="Vehicle Name" class="input input-bordered w-full "
<td><input type="text" placeholder="License Plate" class="input input-bordered w-full " v-model="vehicleName" /></td>
v-model="licensePlate" /></td> <td><input type="text" placeholder="License Plate" class="input input-bordered w-full "
<td><a class="btn btn-success w-full" v-on:click="createVehicle">Create Vehicle</a></td> v-model="licensePlate" /></td>
</tr> <td><a class="btn btn-success w-full" v-on:click="createVehicle">Create Vehicle</a></td>
<tr v-if="vehicleList.length == 0"> </tr>
<th> <tr v-if="vehicleList.length == 0">
<div class="skeleton h-4 w-full"></div> <th>
</th> <div class="skeleton h-4 w-full"></div>
<td> </th>
<div class="skeleton h-4 w-full"></div> <td>
</td> <div class="skeleton h-4 w-full"></div>
<td> </td>
<div class="skeleton h-4 w-full"></div> <td>
</td> <div class="skeleton h-4 w-full"></div>
<td><a class="btn btn-error w-full" v-on:click="createVehicle">Delete Vehicle</a></td> </td>
<td></td> <td><a class="btn btn-error w-full" v-on:click="createVehicle"> <svg
</tr> xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
<tr v-for="vehicle in vehicleList"> class="bi bi-trash3-fill" viewBox="0 0 16 16">
<th>{{ vehicle.id }}</th> <path
<td>{{ vehicle.name }}</td> 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" />
<td>{{ vehicle.licenseplate }}</td> </svg> Delete Vehicle</a></td>
<td><a class="btn btn-error w-full" v-on:click="createVehicle">Delete Vehicle</a></td> <td></td>
</tr> </tr>
</tbody> <tr v-for="vehicle in vehicleList">
</table> <th>{{ vehicle.id }}</th>
</div> <td>{{ vehicle.name }}</td>
<td>{{ vehicle.licenseplate }}</td>
<td><a v-if="vehicle.id != 1" class="btn btn-error w-full"
v-on:click="deleteVehicle(vehicle.id)">Delete Vehicle</a></td>
</tr>
</tbody>
</table>
</div>
</template> </template>
<style scoped></style> <style scoped></style>