feat: ✨ implemented deleting tracks, drivers, vehicles with proper data correction
This commit is contained in:
parent
1df2b155f3
commit
a88c9e5ff7
59
app.py
59
app.py
@ -35,6 +35,22 @@ SessionFactory = sessionmaker(bind=engine)
|
||||
session = SessionFactory()
|
||||
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")
|
||||
gpxHandler = GPXHandler(session)
|
||||
driverHandler = DriverHandler(session)
|
||||
@ -106,7 +122,16 @@ def getTrack():
|
||||
app.logger.debug(f"fetching all tracks failed with error {e}")
|
||||
return f"error {e}", 500
|
||||
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'])
|
||||
@ -175,10 +200,20 @@ def handleDriverRoute():
|
||||
except Exception as e:
|
||||
app.logger.debug(f"creating drivers failed with error {e}")
|
||||
return "error" + " " + str(e), 500
|
||||
case "PUT":
|
||||
pass
|
||||
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'])
|
||||
@ -230,10 +265,20 @@ def handleVehicleRoute():
|
||||
except Exception as e:
|
||||
app.logger.debug(f"creating vehicle with name {name} failed with error {e}")
|
||||
return "error" + " " + str(e), 500
|
||||
case "PUT":
|
||||
pass
|
||||
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'])
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
from sqlalchemy.orm import Session
|
||||
|
||||
from errors.NotFoundException import NotFoundError
|
||||
from modules.geoObjects import Driver
|
||||
from modules.geoObjects import Driver, Track
|
||||
|
||||
|
||||
class DriverHandler:
|
||||
@ -19,30 +19,32 @@ class DriverHandler:
|
||||
raise ValueError("name is empty")
|
||||
|
||||
driver = Driver(name=name)
|
||||
|
||||
|
||||
self.dbSession.add(driver)
|
||||
self.dbSession.commit()
|
||||
|
||||
|
||||
return driver
|
||||
except Exception as e:
|
||||
raise RuntimeError(f"failed to create driver with errors{e}")
|
||||
|
||||
|
||||
# handles getting a driver by its id from the database
|
||||
def getDriver(self, driverID: int) -> Driver:
|
||||
try:
|
||||
driver = self.dbSession.query(Driver).filter_by(id=driverID).first()
|
||||
driver = self.dbSession.query(
|
||||
Driver).filter_by(id=driverID).first()
|
||||
if driver:
|
||||
return driver
|
||||
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:
|
||||
raise RuntimeError(f"failed to get driver with errors{e}")
|
||||
|
||||
|
||||
# handles getting all drivers from the database
|
||||
def getDrivers(self):
|
||||
try:
|
||||
drivers = self.dbSession.query(Driver).all()
|
||||
|
||||
|
||||
driverList = [
|
||||
{
|
||||
"id": driver.id,
|
||||
@ -53,6 +55,19 @@ class DriverHandler:
|
||||
]
|
||||
|
||||
return driverList
|
||||
|
||||
|
||||
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}")
|
||||
|
||||
|
||||
@ -12,10 +12,10 @@ def db_connect():
|
||||
engine = create_engine("postgresql://example:example@localhost/geotrack", poolclass=NullPool)
|
||||
# Überprüfe die Verbindung
|
||||
with engine.connect() as connection:
|
||||
print("Verbindung zur Datenbank erfolgreich!")
|
||||
print("connected to database!")
|
||||
return engine
|
||||
except OperationalError as e:
|
||||
print(f"Fehler bei der Verbindung zur Datenbank: {e}")
|
||||
print(f"database connection failed: {e}")
|
||||
return None
|
||||
|
||||
# Funktion zur Erstellung der Tabellen
|
||||
@ -23,11 +23,12 @@ def create_table(engine):
|
||||
try:
|
||||
if engine is not None:
|
||||
Base.metadata.create_all(engine)
|
||||
print("Tabellen wurden erfolgreich erstellt!")
|
||||
|
||||
print("created tables")
|
||||
else:
|
||||
print("Keine Verbindung zur Datenbank verfügbar.")
|
||||
print("error no connection")
|
||||
except Exception as e:
|
||||
print(f"Fehler bei der Tabellenerstellung: {e}")
|
||||
print(f"unexpected error during initial database creation: {e}")
|
||||
|
||||
# Track-Tabelle
|
||||
class Track(Base):
|
||||
|
||||
@ -180,4 +180,10 @@ class GPXHandler:
|
||||
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()
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
from sqlalchemy.orm import Session
|
||||
|
||||
from modules.geoObjects import Vehicle
|
||||
from modules.geoObjects import Track, Vehicle
|
||||
|
||||
class VehicleHandler:
|
||||
dbSession: Session
|
||||
@ -42,3 +42,15 @@ class VehicleHandler:
|
||||
]
|
||||
|
||||
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}")
|
||||
@ -25,8 +25,8 @@ export default defineComponent({
|
||||
const form = ref<HTMLFormElement>();
|
||||
const drivers: Ref<driver[]> = ref([])
|
||||
const vehicles: Ref<vehicle[]> = ref([])
|
||||
const selectedDriverID: Ref<number> = ref(0);
|
||||
const selectedVehicleID: Ref<number> = ref(0);
|
||||
const selectedDriverID: Ref<number> = ref(1);
|
||||
const selectedVehicleID: Ref<number> = ref(1);
|
||||
const selectedDriverName: Ref<String> = ref("N/A");
|
||||
const selectedVehicleName: Ref<String> = ref("N/A");
|
||||
|
||||
@ -119,7 +119,7 @@ export default defineComponent({
|
||||
|
||||
if (!file.value) {
|
||||
messageType.value = "warning";
|
||||
message.value = "please fill all values";
|
||||
message.value = "please select a file";
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -17,6 +17,31 @@ export default defineComponent({
|
||||
const messageType: 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
|
||||
const getDrivers = async () => {
|
||||
@ -45,7 +70,7 @@ export default defineComponent({
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `upload failed: ${response.text()}`;
|
||||
message.value = `upload failed: ${response.text()}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,7 +97,7 @@ export default defineComponent({
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `upload failed: ${response.text()}`;
|
||||
message.value = `upload failed: ${response.text()}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,7 +107,8 @@ export default defineComponent({
|
||||
driverName,
|
||||
driverList,
|
||||
message,
|
||||
messageType
|
||||
messageType,
|
||||
deleteDriver
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -90,7 +116,8 @@ export default defineComponent({
|
||||
|
||||
|
||||
<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">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
@ -115,11 +142,17 @@ export default defineComponent({
|
||||
<td>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
</td>
|
||||
<td><a class="btn btn-error w-full" v-on:click="createVehicle">Delete Vehicle</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr v-for="driver in driverList">
|
||||
<th>{{ driver.id }}</th>
|
||||
<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>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -51,7 +51,7 @@ export default defineComponent({
|
||||
const mapData: Ref<GeoJSON | null> = ref(null);
|
||||
const renderSearchOnMap: 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
|
||||
const messageType: Ref<string> = ref("");
|
||||
@ -88,10 +88,38 @@ export default defineComponent({
|
||||
} catch (error) {
|
||||
console.error("loading tracks failed with error:", 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 headers: Headers = new Headers()
|
||||
@ -115,7 +143,7 @@ export default defineComponent({
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
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) {
|
||||
messageType.value = "error";
|
||||
message.value = "please give all required infos";
|
||||
message.value = "please give all required infos";
|
||||
return;
|
||||
}
|
||||
|
||||
@ -167,7 +195,7 @@ export default defineComponent({
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `searching tracks failed: ${await response.text()}`;
|
||||
message.value = `searching tracks failed: ${await response.text()}`;
|
||||
}
|
||||
|
||||
if (renderSearchOnMap.value) {
|
||||
@ -202,7 +230,9 @@ export default defineComponent({
|
||||
multipleTracks,
|
||||
trackid,
|
||||
message,
|
||||
messageType
|
||||
messageType,
|
||||
deleteTrack,
|
||||
getTracks
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -210,8 +240,9 @@ export default defineComponent({
|
||||
|
||||
|
||||
<template>
|
||||
<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message>
|
||||
<FileUpload v-if="showUpload" @close="showUpload = false;" :drivers="[]"
|
||||
<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'">
|
||||
</Message>
|
||||
<FileUpload v-if="showUpload" @close="showUpload = false;" @response="getTracks" :drivers="[]"
|
||||
style="position:absolute; top: 30VH; width: 80%;"></FileUpload>
|
||||
<div class="grid grid-flow-col auto-cols-max gap-4">
|
||||
<div>
|
||||
@ -226,7 +257,15 @@ export default defineComponent({
|
||||
<li v-if="tracks.length == 0">
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
</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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -2,140 +2,174 @@
|
||||
import { defineComponent, Ref, ref, SetupContext } from 'vue';
|
||||
|
||||
type vehicle = {
|
||||
id: number
|
||||
name: string
|
||||
licenseplate: string
|
||||
id: number
|
||||
name: string
|
||||
licenseplate: string
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'map',
|
||||
setup(_, { emit }: SetupContext) {
|
||||
name: 'map',
|
||||
setup(_, { emit }: SetupContext) {
|
||||
|
||||
const vehicleName: Ref<string> = ref("")
|
||||
const licensePlate: Ref<string> = ref("")
|
||||
const vehicleList: Ref<vehicle[]> = ref([])
|
||||
const vehicleName: Ref<string> = ref("")
|
||||
const licensePlate: Ref<string> = ref("")
|
||||
const vehicleList: Ref<vehicle[]> = ref([])
|
||||
|
||||
// values for UI Information distribution
|
||||
const messageType: Ref<string> = ref("");
|
||||
const message: Ref<string> = ref("");
|
||||
// values for UI Information distribution
|
||||
const messageType: Ref<string> = ref("");
|
||||
const message: Ref<string> = ref("");
|
||||
|
||||
// handles getting all existing drivers
|
||||
const getVehicles = async () => {
|
||||
const headers: Headers = new Headers()
|
||||
headers.set('Content-Type', 'application/json')
|
||||
headers.set('Accept', 'application/json')
|
||||
// handles deleting a vehicle
|
||||
const deleteVehicle = async (vehicleID: number) => {
|
||||
const headers: Headers = new Headers()
|
||||
headers.set('Content-Type', 'application/json')
|
||||
headers.set('Accept', 'application/json')
|
||||
|
||||
const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
|
||||
method: "GET",
|
||||
headers: headers
|
||||
})
|
||||
const requestBody = JSON.stringify({ id: vehicleID });
|
||||
|
||||
var response = await fetch(request)
|
||||
// make sure the request was successfull
|
||||
if (response.ok) {
|
||||
var jsonBody = await response.json()
|
||||
const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
|
||||
method: "DELETE",
|
||||
headers: headers,
|
||||
body: requestBody
|
||||
})
|
||||
|
||||
// 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"];
|
||||
}
|
||||
var response = await fetch(request)
|
||||
if (!response.ok) {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `deleting vehicle failed with error: ${await response.text()}`;
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "success";
|
||||
message.value = `deleted vehicle`;
|
||||
}
|
||||
}
|
||||
|
||||
vehicleList.value.push({ id: vehicle["id"], name: vehicle["name"], licenseplate: plate })
|
||||
}
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
// handles getting all existing drivers
|
||||
const getVehicles = async () => {
|
||||
const headers: Headers = new Headers()
|
||||
headers.set('Content-Type', 'application/json')
|
||||
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()}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// handles sending webrequests to the backend
|
||||
const createVehicle = async () => {
|
||||
const headers: Headers = new Headers()
|
||||
// handles sending webrequests to the backend
|
||||
const createVehicle = async () => {
|
||||
const headers: Headers = new Headers()
|
||||
|
||||
headers.set('Content-Type', 'application/json')
|
||||
headers.set('Accept', 'application/json')
|
||||
headers.set('Content-Type', '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", {
|
||||
method: "POST",
|
||||
headers: headers,
|
||||
body: requestBody
|
||||
})
|
||||
const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
|
||||
method: "POST",
|
||||
headers: headers,
|
||||
body: requestBody
|
||||
})
|
||||
|
||||
var response = await fetch(request)
|
||||
// make sure the request was successfull
|
||||
if (response.ok) {
|
||||
var jsonBody = await response.json()
|
||||
vehicleList.value.push({ id: jsonBody["body"], name: vehicleName.value, licenseplate: "N/A" })
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
var response = await fetch(request)
|
||||
// make sure the request was successfull
|
||||
if (response.ok) {
|
||||
var jsonBody = await response.json()
|
||||
vehicleList.value.push({ id: jsonBody["body"], name: vehicleName.value, licenseplate: "N/A" })
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `creating vehicle failed with error: ${error}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getVehicles()
|
||||
return {
|
||||
createVehicle,
|
||||
vehicleName,
|
||||
licensePlate,
|
||||
vehicleList,
|
||||
message,
|
||||
messageType
|
||||
};
|
||||
},
|
||||
getVehicles()
|
||||
return {
|
||||
createVehicle,
|
||||
vehicleName,
|
||||
licensePlate,
|
||||
vehicleList,
|
||||
message,
|
||||
messageType,
|
||||
deleteVehicle
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><input type="text" placeholder="Vehicle Name" class="input input-bordered w-full "
|
||||
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>
|
||||
</tr>
|
||||
<tr v-if="vehicleList.length == 0">
|
||||
<th>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
</th>
|
||||
<td>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
</td>
|
||||
<td><a class="btn btn-error w-full" v-on:click="createVehicle">Delete Vehicle</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr v-for="vehicle in vehicleList">
|
||||
<th>{{ vehicle.id }}</th>
|
||||
<td>{{ vehicle.name }}</td>
|
||||
<td>{{ vehicle.licenseplate }}</td>
|
||||
<td><a class="btn btn-error w-full" v-on:click="createVehicle">Delete Vehicle</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'">
|
||||
</Message>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><input type="text" placeholder="Vehicle Name" class="input input-bordered w-full "
|
||||
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>
|
||||
</tr>
|
||||
<tr v-if="vehicleList.length == 0">
|
||||
<th>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
</th>
|
||||
<td>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
</td>
|
||||
<td><a class="btn btn-error w-full" v-on:click="createVehicle"> <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 Vehicle</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr v-for="vehicle in vehicleList">
|
||||
<th>{{ vehicle.id }}</th>
|
||||
<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>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
x
Reference in New Issue
Block a user