feat: ✨ implemented visual messaging
This commit is contained in:
parent
20ac0faa75
commit
5769fabce4
318
app.py
318
app.py
@ -40,182 +40,200 @@ gpxHandler = GPXHandler(session)
|
||||
driverHandler = DriverHandler(session)
|
||||
vehicleHandler = VehicleHandler(session)
|
||||
|
||||
|
||||
@app.route('/')
|
||||
@cross_origin()
|
||||
def serve_vue_app():
|
||||
return send_from_directory(app.static_folder, 'index.html')
|
||||
|
||||
@app.route("/track", methods=['GET'])
|
||||
|
||||
@app.route("/track", methods=['GET', 'DELETE'])
|
||||
@cross_origin()
|
||||
def getTrack():
|
||||
|
||||
app.logger.debug(f"found arguments {request.args}")
|
||||
|
||||
if ("start" in request.args and "end" in request.args) or ("id" in request.args):
|
||||
if "start" in request.args and "end" in request.args:
|
||||
if "asMap" in request.args:
|
||||
# get tracks by filter
|
||||
start = request.args["start"]
|
||||
end = request.args["end"]
|
||||
|
||||
# Die GeoJSON-Daten aus der Datenbank abrufen
|
||||
geojson_data = gpxHandler.getTracksInTimeWithGeoData(start, end)
|
||||
app.logger.debug(f"returned track {geojson_data}")
|
||||
|
||||
# Die GeoJSON-Daten als JSON zurückgeben
|
||||
return jsonify(geojson_data)
|
||||
|
||||
# get tracks by filter
|
||||
start = request.args["start"]
|
||||
end = request.args["end"]
|
||||
try:
|
||||
return gpxHandler.getTracksInTime(start, request.args["end"]), 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"failed to search tracks error {e} values: start={start}, end={end}")
|
||||
return f"error {e}", 500
|
||||
match request.method:
|
||||
case "GET":
|
||||
if ("start" in request.args and "end" in request.args) or ("id" in request.args):
|
||||
if "start" in request.args and "end" in request.args:
|
||||
if "asMap" in request.args:
|
||||
# get tracks by filter
|
||||
start = request.args["start"]
|
||||
end = request.args["end"]
|
||||
|
||||
elif "id" in request.args:
|
||||
# get track by id
|
||||
trackID = int(request.args["id"])
|
||||
try:
|
||||
app.logger.debug(f"Request args: {request.args}")
|
||||
app.logger.debug(f"track id {trackID}")
|
||||
track = gpxHandler.getTrack(trackID)
|
||||
|
||||
app.logger.debug(f"returned track {track}")
|
||||
|
||||
return jsonify(track), 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"fetching track failed with error {e}")
|
||||
return f"error {e}", 500
|
||||
else:
|
||||
try:
|
||||
tracks = gpxHandler.getTracks()
|
||||
if len(tracks) > 0:
|
||||
# gets all tracks as list
|
||||
return tracks, 200
|
||||
# Die GeoJSON-Daten aus der Datenbank abrufen
|
||||
geojson_data = gpxHandler.getTracksInTimeWithGeoData(
|
||||
start, end)
|
||||
app.logger.debug(f"returned track {geojson_data}")
|
||||
|
||||
# Die GeoJSON-Daten als JSON zurückgeben
|
||||
return jsonify(geojson_data)
|
||||
|
||||
# get tracks by filter
|
||||
start = request.args["start"]
|
||||
end = request.args["end"]
|
||||
try:
|
||||
return gpxHandler.getTracksInTime(start, request.args["end"]), 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"failed to search tracks error {
|
||||
e} values: start={start}, end={end}")
|
||||
return f"error {e}", 500
|
||||
|
||||
elif "id" in request.args:
|
||||
# get track by id
|
||||
trackID = int(request.args["id"])
|
||||
try:
|
||||
app.logger.debug(f"Request args: {request.args}")
|
||||
app.logger.debug(f"track id {trackID}")
|
||||
track = gpxHandler.getTrack(trackID)
|
||||
|
||||
app.logger.debug(f"returned track {track}")
|
||||
|
||||
return jsonify(track), 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"fetching track failed with error {e}")
|
||||
return f"error {e}", 500
|
||||
else:
|
||||
return [], 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"fetching all tracks failed with error {e}")
|
||||
return f"error {e}", 500
|
||||
try:
|
||||
tracks = gpxHandler.getTracks()
|
||||
if len(tracks) > 0:
|
||||
# gets all tracks as list
|
||||
return tracks, 200
|
||||
else:
|
||||
return [], 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"fetching all tracks failed with error {e}")
|
||||
return f"error {e}", 500
|
||||
case "DELETE":
|
||||
pass
|
||||
|
||||
|
||||
@app.route("/track/meta", methods=['GET'])
|
||||
@cross_origin()
|
||||
def getTrackMeta():
|
||||
|
||||
app.logger.debug(f"found arguments {request.args}")
|
||||
|
||||
if "id" in request.args:
|
||||
# get track by id
|
||||
trackID = int(request.args["id"])
|
||||
try:
|
||||
app.logger.debug(f"Request args: {request.args}")
|
||||
app.logger.debug(f"track id {trackID}")
|
||||
track = gpxHandler.getTrackMeta(trackID)
|
||||
|
||||
app.logger.debug(f"returned track {track}")
|
||||
|
||||
return jsonify(track), 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"fetching track failed with error {e}")
|
||||
return f"error {e}", 500
|
||||
|
||||
@app.route("/driver", methods=['GET', 'POST'])
|
||||
if "id" in request.args:
|
||||
# get track by id
|
||||
trackID = int(request.args["id"])
|
||||
try:
|
||||
app.logger.debug(f"Request args: {request.args}")
|
||||
app.logger.debug(f"track id {trackID}")
|
||||
track = gpxHandler.getTrackMeta(trackID)
|
||||
|
||||
app.logger.debug(f"returned track {track}")
|
||||
|
||||
return jsonify(track), 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"fetching track failed with error {e}")
|
||||
return f"error {e}", 500
|
||||
|
||||
|
||||
@app.route("/driver", methods=['GET', 'POST', 'PUT', 'DELETE'])
|
||||
@cross_origin()
|
||||
def handleDriverRoute():
|
||||
|
||||
if request.method == "GET":
|
||||
if 'driver' in request.args:
|
||||
match request.method:
|
||||
case "GET":
|
||||
if 'driver' in request.args:
|
||||
|
||||
try:
|
||||
driver = driverHandler.getDriver(int(request.args["driver"]))
|
||||
return driver, 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"getting driver failed with error {e}")
|
||||
return "error" + " " + str(e), 500
|
||||
|
||||
else:
|
||||
|
||||
try:
|
||||
drivers = driverHandler.getDrivers()
|
||||
if len(drivers) > 0:
|
||||
return drivers, 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"getting drivers failed with error {e}")
|
||||
return "error" + " " + str(e), 500
|
||||
case "POST":
|
||||
# grabbing json from request
|
||||
data = request.get_json()
|
||||
app.logger.debug(f"json request payload: {data}")
|
||||
|
||||
if "name" not in data:
|
||||
app.logger.debug(f"no driver name was found in request")
|
||||
return "missing name", 400
|
||||
|
||||
app.logger.debug(f"driver name has passed check {data["name"]}")
|
||||
|
||||
# handle creating vehicle
|
||||
try:
|
||||
driver = driverHandler.getDriver(int(request.args["driver"]))
|
||||
return driver, 200
|
||||
app.logger.debug(f"json request name: {data["name"]}")
|
||||
driver = driverHandler.createDriver(data["name"])
|
||||
return jsonify({"name": driver.name, "id": driver.id}), 200
|
||||
|
||||
except Exception as e:
|
||||
app.logger.debug(f"getting driver failed with error {e}")
|
||||
app.logger.debug(f"creating drivers failed with error {e}")
|
||||
return "error" + " " + str(e), 500
|
||||
|
||||
else:
|
||||
|
||||
try:
|
||||
drivers = driverHandler.getDrivers()
|
||||
if len(drivers) > 0:
|
||||
return drivers, 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"getting drivers failed with error {e}")
|
||||
return "error" + " " + str(e), 500
|
||||
|
||||
elif request.method == "POST":
|
||||
|
||||
# grabbing json from request
|
||||
data = request.get_json()
|
||||
app.logger.debug(f"json request payload: {data}")
|
||||
|
||||
if "name" not in data:
|
||||
app.logger.debug(f"no driver name was found in request")
|
||||
return "missing name", 400
|
||||
|
||||
app.logger.debug(f"driver name has passed check {data["name"]}")
|
||||
|
||||
# handle creating vehicle
|
||||
try:
|
||||
app.logger.debug(f"json request name: {data["name"]}")
|
||||
driver = driverHandler.createDriver(data["name"])
|
||||
return jsonify({"name": driver.name, "id": driver.id}), 200
|
||||
|
||||
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
|
||||
|
||||
|
||||
@app.route("/vehicle", methods=['GET', 'POST'])
|
||||
@app.route("/vehicle", methods=['GET', 'POST', 'PUT', 'DELETE'])
|
||||
@cross_origin()
|
||||
def handleVehicleRoute():
|
||||
|
||||
if request.method == "GET":
|
||||
if 'vehicle' in request.args:
|
||||
app.logger.debug(f"no vehicle id was found in request")
|
||||
vehicle = int(request.args["vehicle"])
|
||||
match request.method:
|
||||
case "GET":
|
||||
if 'vehicle' in request.args:
|
||||
app.logger.debug(f"no vehicle id was found in request")
|
||||
vehicle = int(request.args["vehicle"])
|
||||
|
||||
try:
|
||||
foundVehicle = vehicleHandler.getVehicle(vehicle)
|
||||
return foundVehicle, 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"getting vehicle {vehicle} failed with error {e}")
|
||||
return "error" + " " + str(e), 500
|
||||
|
||||
else:
|
||||
|
||||
try:
|
||||
foundVehicles = vehicleHandler.getVehicles()
|
||||
return foundVehicles, 200
|
||||
except Exception as e:
|
||||
app.logger.debug(
|
||||
f"getting all vehicles failed with error {e}")
|
||||
return "error" + " " + str(e), 500
|
||||
case "POST":
|
||||
data = request.get_json()
|
||||
app.logger.debug(f"json request payload: {data}")
|
||||
|
||||
if "name" not in data:
|
||||
return "missing name", 400
|
||||
|
||||
licenseplate = ""
|
||||
|
||||
if "licensePlate" not in data:
|
||||
licenseplate = "N/A"
|
||||
else:
|
||||
licenseplate = data["licensePlate"]
|
||||
name = data["name"]
|
||||
|
||||
# handle creating vehicle
|
||||
try:
|
||||
foundVehicle = vehicleHandler.getVehicle(vehicle)
|
||||
return foundVehicle, 200
|
||||
vehicle = vehicleHandler.createVehicle(name, licenseplate)
|
||||
return jsonify({"id": vehicle.id, "name": vehicle.name}), 200
|
||||
|
||||
except Exception as e:
|
||||
app.logger.debug(f"getting vehicle {vehicle} failed with error {e}")
|
||||
app.logger.debug(f"creating vehicle with name {name} failed with error {e}")
|
||||
return "error" + " " + str(e), 500
|
||||
|
||||
else:
|
||||
|
||||
try:
|
||||
foundVehicles = vehicleHandler.getVehicles()
|
||||
return foundVehicles, 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"getting all vehicles failed with error {e}")
|
||||
return "error" + " " + str(e), 500
|
||||
|
||||
elif request.method == "POST":
|
||||
data = request.get_json()
|
||||
app.logger.debug(f"json request payload: {data}")
|
||||
|
||||
if "name" not in data:
|
||||
return "missing name", 400
|
||||
|
||||
licenseplate = ""
|
||||
|
||||
if "licensePlate" not in data:
|
||||
licenseplate = "N/A"
|
||||
else:
|
||||
licenseplate = data["licensePlate"]
|
||||
name = data["name"]
|
||||
|
||||
# handle creating vehicle
|
||||
try:
|
||||
vehicle = vehicleHandler.createVehicle(name, licenseplate)
|
||||
return jsonify({"id": vehicle.id, "name": vehicle.name}), 200
|
||||
|
||||
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
|
||||
|
||||
|
||||
@app.route('/upload', methods=['POST'])
|
||||
@ -231,29 +249,29 @@ def uploadFile():
|
||||
return "no file selected", 400
|
||||
|
||||
try:
|
||||
|
||||
app.logger.debug(f"Received file: {file.filename}, size: {len(file.read())} bytes")
|
||||
file.seek(0) # Setzt den Datei-Zeiger zurück, nachdem die Größe abgerufen wurde.
|
||||
|
||||
|
||||
file.seek(0)
|
||||
|
||||
file_path = f'./uploads/{file.filename}'
|
||||
with open(file_path, 'wb') as f:
|
||||
f.write(file.read())
|
||||
|
||||
|
||||
driverID = int(request.form.get('driverID'))
|
||||
vehicleID = int(request.form.get('vehicleID'))
|
||||
|
||||
|
||||
driver = driverHandler.getDriver(driverID)
|
||||
vehicle = vehicleHandler.getVehicle(vehicleID)
|
||||
|
||||
|
||||
app.logger.debug(f"driver {driver.id}")
|
||||
app.logger.debug(f"vehicle {vehicle.id}")
|
||||
|
||||
|
||||
if not driver or not vehicle:
|
||||
raise ValueError("Driver or vehicle not found")
|
||||
|
||||
|
||||
app.logger.debug(f"attempting to parse file: {file.filename}")
|
||||
gpxHandler.parse(file.filename, driver, vehicle)
|
||||
|
||||
|
||||
return "file stored succesfull", 200
|
||||
except Exception as e:
|
||||
app.logger.debug(f"storing gpx file failed with error {e}")
|
||||
|
||||
@ -1,214 +1,244 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, SetupContext, ref, Ref } from 'vue';
|
||||
import GetLocalizedText from "../classes/language";
|
||||
import Message from "./message.vue";
|
||||
|
||||
type driver = {
|
||||
id: number
|
||||
name: string
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
|
||||
type vehicle = {
|
||||
id: number
|
||||
name: string
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['close', 'response'],
|
||||
name: 'settings',
|
||||
props: ["drivers"],
|
||||
setup(props, { emit }: SetupContext) {
|
||||
emits: ['close', 'response'],
|
||||
components: { Message },
|
||||
name: 'settings',
|
||||
props: ["drivers"],
|
||||
setup(props, { emit }: SetupContext) {
|
||||
|
||||
const file = ref<File | null>();
|
||||
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 selectedDriverName: Ref<String> = ref("N/A");
|
||||
const selectedVehicleName: Ref<String> = ref("N/A");
|
||||
const file = ref<File | null>();
|
||||
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 selectedDriverName: Ref<String> = ref("N/A");
|
||||
const selectedVehicleName: Ref<String> = ref("N/A");
|
||||
|
||||
props.drivers.forEach((d: driver) => {
|
||||
drivers.value.push({ id: d.id, name: d.name })
|
||||
});
|
||||
// button text
|
||||
const buttonText: Ref<string> = ref('Upload');
|
||||
|
||||
// localized text
|
||||
// if there is time left this gets moved out to its own class
|
||||
var localizedUploadHeader: Ref<string> = ref("")
|
||||
async function getLocalization() {
|
||||
localizedUploadHeader.value = await GetLocalizedText("localizedUploadHeader")
|
||||
}
|
||||
// values for UI Information distribution
|
||||
const messageType: Ref<string> = ref("None ");
|
||||
const message:Ref<string> = ref("");
|
||||
|
||||
var fileInputChange = async ($event: Event) => {
|
||||
const target = $event.target as HTMLInputElement;
|
||||
if (target && target.files) {
|
||||
file.value = target.files[0];
|
||||
console.log(`selected file: ${file.value}`);
|
||||
}
|
||||
}
|
||||
props.drivers.forEach((d: driver) => {
|
||||
drivers.value.push({ id: d.id, name: d.name })
|
||||
});
|
||||
|
||||
// handles sending webrequests to the backend
|
||||
const getDrivers = async () => {
|
||||
// localized text
|
||||
// if there is time left this gets moved out to its own class
|
||||
var localizedUploadHeader: Ref<string> = ref("")
|
||||
async function getLocalization() {
|
||||
localizedUploadHeader.value = await GetLocalizedText("localizedUploadHeader")
|
||||
}
|
||||
|
||||
const headers: Headers = new Headers()
|
||||
var fileInputChange = async ($event: Event) => {
|
||||
const target = $event.target as HTMLInputElement;
|
||||
if (target && target.files) {
|
||||
file.value = target.files[0];
|
||||
console.log(`selected file: ${file.value}`);
|
||||
}
|
||||
}
|
||||
|
||||
headers.set('Content-Type', 'application/json')
|
||||
headers.set('Accept', 'application/json')
|
||||
// handles sending webrequests to the backend
|
||||
const getDrivers = async () => {
|
||||
|
||||
const request: RequestInfo = new Request("http://localhost:5000/driver", {
|
||||
method: "GET",
|
||||
headers: headers
|
||||
})
|
||||
const headers: Headers = new Headers()
|
||||
|
||||
var response = await fetch(request)
|
||||
headers.set('Content-Type', 'application/json')
|
||||
headers.set('Accept', 'application/json')
|
||||
|
||||
// make sure the request was successfull
|
||||
if (response.ok) {
|
||||
const request: RequestInfo = new Request("http://localhost:5000/driver", {
|
||||
method: "GET",
|
||||
headers: headers
|
||||
})
|
||||
|
||||
var jsonBody = await response.json()
|
||||
var response = await fetch(request)
|
||||
|
||||
// convert vehicles from json response to processable data
|
||||
for (let i = 0; i < jsonBody.length; i++) {
|
||||
drivers.value.push({ id: jsonBody[i]["id"], name: jsonBody[i]["name"] })
|
||||
}
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
}
|
||||
}
|
||||
// make sure the request was successfull
|
||||
if (response.ok) {
|
||||
|
||||
// handles getting all existing drivers
|
||||
const getVehicles = async () => {
|
||||
const headers: Headers = new Headers()
|
||||
headers.set('Content-Type', 'application/json')
|
||||
headers.set('Accept', 'application/json')
|
||||
var jsonBody = await response.json()
|
||||
|
||||
const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
|
||||
method: "GET",
|
||||
headers: headers
|
||||
})
|
||||
// convert vehicles from json response to processable data
|
||||
for (let i = 0; i < jsonBody.length; i++) {
|
||||
drivers.value.push({ id: jsonBody[i]["id"], name: jsonBody[i]["name"] })
|
||||
}
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `upload failed: ${await response.statusText}`;
|
||||
}
|
||||
}
|
||||
|
||||
var response = await fetch(request)
|
||||
// make sure the request was successfull
|
||||
if (response.ok) {
|
||||
var jsonBody = await response.json()
|
||||
// handles getting all existing drivers
|
||||
const getVehicles = async () => {
|
||||
const headers: Headers = new Headers()
|
||||
headers.set('Content-Type', 'application/json')
|
||||
headers.set('Accept', 'application/json')
|
||||
|
||||
// convert vehicles from json response to processable data
|
||||
for (let i = 0; i < jsonBody.length; i++) {
|
||||
vehicles.value.push({ id: jsonBody[i]["id"], name: jsonBody[i]["name"] })
|
||||
}
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
}
|
||||
}
|
||||
const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
|
||||
method: "GET",
|
||||
headers: headers
|
||||
})
|
||||
|
||||
var save = async () => {
|
||||
var response = await fetch(request)
|
||||
// make sure the request was successfull
|
||||
if (response.ok) {
|
||||
var jsonBody = await response.json()
|
||||
|
||||
if (!file.value) {
|
||||
alert("Bitte wählen Sie eine Datei aus, bevor Sie sie hochladen.");
|
||||
return;
|
||||
}
|
||||
// convert vehicles from json response to processable data
|
||||
for (let i = 0; i < jsonBody.length; i++) {
|
||||
vehicles.value.push({ id: jsonBody[i]["id"], name: jsonBody[i]["name"] })
|
||||
}
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `upload failed: ${await response.text()}`;
|
||||
buttonText.value = "Upload";
|
||||
}
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", file.value);
|
||||
formData.append("driverID", selectedDriverID.value.toString());
|
||||
formData.append("vehicleID", selectedVehicleID.value.toString());
|
||||
var save = async () => {
|
||||
|
||||
try {
|
||||
if (!file.value) {
|
||||
messageType.value = "warning";
|
||||
message.value = "please fill all values";
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Request Body:', formData);
|
||||
const formData = new FormData();
|
||||
formData.append("file", file.value);
|
||||
formData.append("driverID", selectedDriverID.value.toString());
|
||||
formData.append("vehicleID", selectedVehicleID.value.toString());
|
||||
|
||||
const response = await fetch('http://localhost:5000/upload', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
buttonText.value = 'Loading <span class="loading loading-spinner loading-xs"></span>';
|
||||
|
||||
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.");
|
||||
}
|
||||
try {
|
||||
|
||||
} catch (error) {
|
||||
console.error("upload failed:", error);
|
||||
alert("failed to upload file.");
|
||||
}
|
||||
console.log('Request Body:', formData);
|
||||
|
||||
}
|
||||
const response = await fetch('http://localhost:5000/upload', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
getVehicles()
|
||||
getDrivers()
|
||||
getLocalization()
|
||||
const close = () => {
|
||||
emit("close");
|
||||
};
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
emit("response", result);
|
||||
messageType.value = "success";
|
||||
message.value = `upload successfull`;
|
||||
buttonText.value = "Upload";
|
||||
} else {
|
||||
console.error('upload failed: ', await response.statusText);
|
||||
messageType.value = "error";
|
||||
message.value = `upload failed: ${await response.statusText}`;
|
||||
buttonText.value = "Upload";
|
||||
}
|
||||
} catch (error) {
|
||||
messageType.value = "error";
|
||||
message.value = `upload failed: ${error}`;
|
||||
buttonText.value = "Upload";
|
||||
}
|
||||
|
||||
return {
|
||||
close,
|
||||
fileInputChange,
|
||||
selectedDriverID,
|
||||
selectedVehicleID,
|
||||
selectedDriverName,
|
||||
selectedVehicleName,
|
||||
save,
|
||||
drivers,
|
||||
vehicles,
|
||||
localizedUploadHeader
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
getVehicles()
|
||||
getDrivers()
|
||||
getLocalization()
|
||||
const close = () => {
|
||||
emit("close");
|
||||
};
|
||||
|
||||
return {
|
||||
close,
|
||||
fileInputChange,
|
||||
selectedDriverID,
|
||||
selectedVehicleID,
|
||||
selectedDriverName,
|
||||
selectedVehicleName,
|
||||
save,
|
||||
drivers,
|
||||
vehicles,
|
||||
localizedUploadHeader,
|
||||
buttonText,
|
||||
messageType,
|
||||
message
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="card bg-base-100 w-full shadow-xl" style="">
|
||||
<div class="card-body">
|
||||
<div class="card bg-base-100 w-full shadow-xl" style="">
|
||||
<div class="card-body">
|
||||
|
||||
<h2 class="card-title">File Upload</h2>
|
||||
|
||||
<button class="btn btn-error close round" @click="close()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
|
||||
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
|
||||
</svg>
|
||||
</button>
|
||||
<label class="form-control w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">Upload a GPX File</span>
|
||||
</div>
|
||||
<input type="file" ref="file" v-on:change="fileInputChange($event)"
|
||||
class="file-input file-input-bordered w-full max-w-xs" />
|
||||
</label>
|
||||
<div class="dropdown dropdown-bottom">
|
||||
select Driver: <div tabindex="0" role="button" class="btn m-1"> {{ selectedDriverName }}</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="selectedDriverID = driver.id; selectedDriverName=driver.name">{{ driver.name }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown dropdown-bottom">
|
||||
select Vehicle: <div tabindex="0" role="button" class="btn m-1"> {{ selectedVehicleName }}</div>
|
||||
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
|
||||
<li v-for="vehicle in vehicles"><a v-on:click="selectedVehicleID = vehicle.id; selectedVehicleName=vehicle.name">{{ vehicle.name }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="btn btn-success" v-on:click="save">Upload</button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="card-title">File Upload</h2>
|
||||
<Message v-if="type=='none'" :type="messageType" :message="message" @close="message=''; messageType='None'"></Message>
|
||||
<button class="btn btn-error close round" @click="close()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
|
||||
fill="#e8eaed">
|
||||
<path
|
||||
d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
|
||||
</svg>
|
||||
</button>
|
||||
<label class="form-control w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">Upload a GPX File</span>
|
||||
</div>
|
||||
<input type="file" ref="file" v-on:change="fileInputChange($event)"
|
||||
class="file-input file-input-bordered w-full max-w-xs" />
|
||||
</label>
|
||||
<div class="dropdown dropdown-bottom">
|
||||
select Driver: <div tabindex="0" role="button" class="btn m-1"> {{ selectedDriverName }}</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="selectedDriverID = driver.id; selectedDriverName = driver.name">{{ driver.name
|
||||
}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown dropdown-bottom">
|
||||
select Vehicle: <div tabindex="0" role="button" class="btn m-1"> {{ selectedVehicleName }}</div>
|
||||
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
|
||||
<li v-for="vehicle in vehicles"><a
|
||||
v-on:click="selectedVehicleID = vehicle.id; selectedVehicleName = vehicle.name">{{
|
||||
vehicle.name }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="btn btn-success" v-on:click="save" v-html="buttonText"></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.settingsBody {
|
||||
position: absolute;
|
||||
margin: 10% 10% 0 10%;
|
||||
width: 80%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
margin: 10% 10% 0 10%;
|
||||
width: 80%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn.close {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -4,174 +4,203 @@ import "leaflet/dist/leaflet.css";
|
||||
import L from "leaflet";
|
||||
|
||||
type Track = {
|
||||
id: number
|
||||
name: string
|
||||
driver: string
|
||||
vehicle: {
|
||||
name: string
|
||||
licenseplate: string
|
||||
}
|
||||
distance: number
|
||||
id: number
|
||||
name: string
|
||||
driver: string
|
||||
vehicle: {
|
||||
name: string
|
||||
licenseplate: string
|
||||
}
|
||||
distance: number
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Map',
|
||||
props: {
|
||||
track: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
require: true,
|
||||
},
|
||||
geoJsonData: {
|
||||
type: Object as PropType<any>,
|
||||
required: true
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
name: 'Map',
|
||||
props: {
|
||||
track: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
require: true,
|
||||
},
|
||||
geoJsonData: {
|
||||
type: Object as PropType<any>,
|
||||
required: true
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
|
||||
},
|
||||
setup(props) {
|
||||
const mapDiv = ref<HTMLElement | null>(null); // ref to map container element
|
||||
const mapInstance = ref<any>(null); // reference for the Leaflet map
|
||||
const track: Ref<Track> = ref({ id: 0, name: "N/A", driver: "N/A", vehicle: { name: "N/A", licenseplate: "N/A" }, distance: 0.0 })
|
||||
const multiple:Ref<boolean> = ref(props.multiple);
|
||||
},
|
||||
setup(props) {
|
||||
const mapDiv = ref<HTMLElement | null>(null); // ref to map container element
|
||||
const mapInstance = ref<any>(null); // reference for the Leaflet map
|
||||
const track: Ref<Track> = ref({ id: 0, name: "N/A", driver: "N/A", vehicle: { name: "N/A", licenseplate: "N/A" }, distance: 0.0 })
|
||||
const multiple: Ref<boolean> = ref(props.multiple);
|
||||
|
||||
const initializeMap = () => {
|
||||
if (mapDiv.value) {
|
||||
mapInstance.value = L.map(mapDiv.value, {
|
||||
center: [51.4819, 7.2162],
|
||||
zoom: 13,
|
||||
});
|
||||
// values for UI Information distribution
|
||||
const messageType: Ref<string> = ref("None");
|
||||
const message: Ref<string> = ref("");
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(mapInstance.value);
|
||||
}
|
||||
};
|
||||
const initializeMap = () => {
|
||||
if (mapDiv.value) {
|
||||
mapInstance.value = L.map(mapDiv.value, {
|
||||
center: [51.4819, 7.2162],
|
||||
zoom: 13,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
console.log(props.geoJsonData)
|
||||
initializeMap();
|
||||
});
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(mapInstance.value);
|
||||
}
|
||||
};
|
||||
|
||||
const clearMap = () => {
|
||||
if (mapInstance.value) {
|
||||
mapInstance.value.eachLayer((layer: any) => {
|
||||
if (!(layer instanceof L.TileLayer)) {
|
||||
mapInstance.value.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
console.log(props.geoJsonData)
|
||||
initializeMap();
|
||||
});
|
||||
|
||||
const getTrackMeta = async (id: number) => {
|
||||
const clearMap = () => {
|
||||
if (mapInstance.value) {
|
||||
mapInstance.value.eachLayer((layer: any) => {
|
||||
if (!(layer instanceof L.TileLayer)) {
|
||||
mapInstance.value.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const headers: Headers = new Headers()
|
||||
headers.set('Content-Type', 'application/json')
|
||||
headers.set('Accept', 'application/json')
|
||||
const getTrackMeta = async (id: number) => {
|
||||
|
||||
const request: RequestInfo = new Request(`http://localhost:5000/track/meta?id=${id}`, {
|
||||
method: "GET",
|
||||
headers: headers
|
||||
})
|
||||
const headers: Headers = new Headers()
|
||||
headers.set('Content-Type', 'application/json')
|
||||
headers.set('Accept', 'application/json')
|
||||
|
||||
var response = await fetch(request)
|
||||
// make sure the request was successfull
|
||||
if (response.ok) {
|
||||
var jsonBody = await response.json()
|
||||
console.log(jsonBody)
|
||||
track.value = {
|
||||
id: jsonBody["id"],
|
||||
name: jsonBody["name"],
|
||||
driver: jsonBody["driver"]["name"],
|
||||
vehicle: {
|
||||
name: jsonBody["vehicle"]["name"],
|
||||
licenseplate: jsonBody["vehicle"]["licenseplate"] ?? "N/A"
|
||||
},
|
||||
distance: jsonBody["distance"]
|
||||
}
|
||||
console.log(track.value)
|
||||
}
|
||||
}
|
||||
const request: RequestInfo = new Request(`http://localhost:5000/track/meta?id=${id}`, {
|
||||
method: "GET",
|
||||
headers: headers
|
||||
})
|
||||
|
||||
watch(() => props.geoJsonData, (newData) => {
|
||||
if (newData) {
|
||||
console.log("loading GeoJSON:", newData);
|
||||
var response = await fetch(request)
|
||||
// make sure the request was successfull
|
||||
if (response.ok) {
|
||||
var jsonBody = await response.json()
|
||||
console.log(jsonBody)
|
||||
track.value = {
|
||||
id: jsonBody["id"],
|
||||
name: jsonBody["name"],
|
||||
driver: jsonBody["driver"]["name"],
|
||||
vehicle: {
|
||||
name: jsonBody["vehicle"]["name"],
|
||||
licenseplate: jsonBody["vehicle"]["licenseplate"] ?? "N/A"
|
||||
},
|
||||
distance: jsonBody["distance"]
|
||||
}
|
||||
console.log(track.value)
|
||||
} else {
|
||||
messageType.value = "error";
|
||||
message.value = `"failed to load track meta with error: ${await response.statusText}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (mapInstance.value) {
|
||||
if (!props.multiple){
|
||||
clearMap();
|
||||
}
|
||||
watch(() => props.geoJsonData, (newData) => {
|
||||
if (newData) {
|
||||
console.log("loading GeoJSON:", newData);
|
||||
|
||||
var geoJsonLayer = L.geoJSON(newData).addTo(mapInstance.value);
|
||||
if (mapInstance.value) {
|
||||
if (!props.multiple) {
|
||||
clearMap();
|
||||
}
|
||||
|
||||
// pull meta data for for a single track
|
||||
// function wont be called if multiple tracks are loaded
|
||||
if (!props.multiple) {
|
||||
getTrackMeta(props.track);
|
||||
}
|
||||
var geoJsonLayer = L.geoJSON(newData).addTo(mapInstance.value);
|
||||
|
||||
// move camera view according to loaded track
|
||||
const bounds = geoJsonLayer.getBounds();
|
||||
mapInstance.value.fitBounds(bounds);
|
||||
} else {
|
||||
console.error("Map or GeoJSON data not available.");
|
||||
}
|
||||
}
|
||||
});
|
||||
// pull meta data for for a single track
|
||||
// function wont be called if multiple tracks are loaded
|
||||
if (!props.multiple) {
|
||||
getTrackMeta(props.track);
|
||||
}
|
||||
|
||||
return {
|
||||
mapDiv,
|
||||
multiple,
|
||||
track
|
||||
};
|
||||
},
|
||||
// move camera view according to loaded track
|
||||
const bounds = geoJsonLayer.getBounds();
|
||||
mapInstance.value.fitBounds(bounds);
|
||||
} else {
|
||||
console.error("Map or GeoJSON data not available.");
|
||||
messageType.value = "error";
|
||||
message.value = `"Map or GeoJSON data not available.`;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
mapDiv,
|
||||
multiple,
|
||||
track,
|
||||
message,
|
||||
messageType
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div ref="mapDiv" style="width: 70vw; height: 75vh; overflow: hidden;"></div>
|
||||
<br>
|
||||
<div class="overflow-x-auto" style="width: 70vw;" v-if="!multiple">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>track name</th>
|
||||
<th>driver</th>
|
||||
<th>vehicle</th>
|
||||
<th>License Plate</th>
|
||||
<th>distance</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row 1 -->
|
||||
<tr class="bg-base-200">
|
||||
<th>{{ track.name }}</th>
|
||||
<td>{{ track.driver }}</td>
|
||||
<td>{{ track.vehicle.name }}</td>
|
||||
<td>{{ track.vehicle.licenseplate }}</td>
|
||||
<td>{{ Math.round((track.distance / 1000) * 100) / 100 }}KM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message>
|
||||
<div ref="mapDiv" style="width: 70vw; height: 75vh; overflow: hidden;"></div>
|
||||
<br>
|
||||
<div class="overflow-x-auto" style="width: 70vw;" v-if="!multiple">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>track name</th>
|
||||
<th>driver</th>
|
||||
<th>vehicle</th>
|
||||
<th>License Plate</th>
|
||||
<th>distance</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row 1 -->
|
||||
<tr v-if="track.id == 0" class="bg-base-200">
|
||||
<th>{{ track.name }}</th>
|
||||
<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>
|
||||
<td>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr v-if="track.id != 0" class="bg-base-200">
|
||||
<th>{{ track.name }}</th>
|
||||
<td>{{ track.driver }}</td>
|
||||
<td>{{ track.vehicle.name }}</td>
|
||||
<td>{{ track.vehicle.licenseplate }}</td>
|
||||
<td>{{ Math.round((track.distance / 1000) * 100) / 100 }}KM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#mapDiv {
|
||||
width: 100vw;
|
||||
height: 70vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: 70vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
46
web/src/components/message.vue
Normal file
46
web/src/components/message.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, SetupContext, Ref, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Navbar',
|
||||
emits: ['close'],
|
||||
props:["type", "message"],
|
||||
setup(props, { emit }: SetupContext) {
|
||||
|
||||
const type:Ref<string> = ref(props.type);
|
||||
const message:Ref<string> = ref(props.message);
|
||||
|
||||
const close = () => {
|
||||
emit("close");
|
||||
};
|
||||
|
||||
return {
|
||||
close,
|
||||
type,
|
||||
message,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div v-if="type==='info'" role="alert" class="alert alert-info alert-soft">
|
||||
<span>{{ message }}</span>
|
||||
<button class="btn btn-soft btn-info" v-on:click="close">Close</button>
|
||||
</div>
|
||||
<div v-if="type==='success'" role="alert" class="alert alert-success alert-soft">
|
||||
<span>{{ message }}</span>
|
||||
<button class="btn btn-soft btn-success" v-on:click="close">Close</button>
|
||||
</div>
|
||||
<div v-if="type==='warning'" role="alert" class="alert alert-warning alert-soft">
|
||||
<span>{{ message }}</span>
|
||||
<button class="btn btn-soft btn-warning" v-on:click="close">Close</button>
|
||||
</div>
|
||||
<div v-if="type==='error'" role="alert" class="alert error alert-soft">
|
||||
<span>{{ message }}</span>
|
||||
<button class="btn btn-soft btn-error" v-on:click="close">Close</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -13,7 +13,7 @@ type Route = {
|
||||
name: string;
|
||||
id: number;
|
||||
time: Date;
|
||||
driver: {id:number, name:string}
|
||||
driver: { id: number, name: string }
|
||||
};
|
||||
|
||||
|
||||
@ -21,12 +21,12 @@ export default defineComponent({
|
||||
emits: ['close', 'response'],
|
||||
name: 'settings',
|
||||
props: {
|
||||
routes: {
|
||||
type: Array as () => Route[],
|
||||
default: () => [], // Standard: leeres Array
|
||||
required: true,
|
||||
routes: {
|
||||
type: Array as () => Route[],
|
||||
default: () => [], // Standard: leeres Array
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
setup(props, { emit }: SetupContext) {
|
||||
console.log(props)
|
||||
if (!props.routes || props.routes.length <= 0) alert("no points to show");
|
||||
@ -37,8 +37,12 @@ export default defineComponent({
|
||||
const router = useRouter();
|
||||
const legend = ref<Record<string, string>>({});
|
||||
const driverColors = ref<Record<string, string>>({});
|
||||
var drivers:driver[] = [];
|
||||
const points:Route[] = props.routes;
|
||||
var drivers: driver[] = [];
|
||||
const points: Route[] = props.routes;
|
||||
|
||||
// values for UI Information distribution
|
||||
const messageType: Ref<string> = ref("None");
|
||||
const message: Ref<string> = ref("");
|
||||
|
||||
// handles sending webrequests to the backend
|
||||
const getDrivers = async () => {
|
||||
@ -72,18 +76,20 @@ export default defineComponent({
|
||||
}
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `failed to get drivers with error: ${await response.statusText}`;
|
||||
}
|
||||
}
|
||||
|
||||
// assigns a driver to a point based on the points driver id
|
||||
const assignDriverToPoint = (points:Route[]) => {
|
||||
const assignDriverToPoint = (points: Route[]) => {
|
||||
return points.reduce((acc, point) => {
|
||||
|
||||
const driverId = point.driver.id;
|
||||
console.log(`driverid: ${driverId}`)
|
||||
acc[driverId] = acc[driverId] || [];
|
||||
acc[driverId].push(point);
|
||||
return acc;
|
||||
|
||||
const driverId = point.driver.id;
|
||||
console.log(`driverid: ${driverId}`)
|
||||
acc[driverId] = acc[driverId] || [];
|
||||
acc[driverId].push(point);
|
||||
return acc;
|
||||
}, {} as Record<number, Route[]>);
|
||||
}
|
||||
|
||||
@ -97,13 +103,13 @@ export default defineComponent({
|
||||
console.log(`routes: ${props.routes}`)
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value, antialias: true, });
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
const controls = new OrbitControls(camera, renderer.domElement);
|
||||
const raycaster = new THREE.Raycaster();
|
||||
const mouse = new THREE.Vector2();
|
||||
const mouse = new THREE.Vector2();
|
||||
|
||||
const groupedPoints = assignDriverToPoint(points)
|
||||
|
||||
@ -112,11 +118,9 @@ export default defineComponent({
|
||||
const colors: number[] = [];
|
||||
|
||||
const totalPoints = points.length;
|
||||
const offsetXStep = 2; // Wir setzen den Abstand pro Gruppe
|
||||
const offsetXStep = 2;
|
||||
|
||||
let offsetX = 0;
|
||||
|
||||
// Berechnungen für den Mittelpunkt der Punktwolke
|
||||
let sumX = 0, sumY = 0, sumZ = 0;
|
||||
|
||||
const getColorForDriver = (driverId: number) => {
|
||||
@ -128,7 +132,12 @@ export default defineComponent({
|
||||
return color;
|
||||
};
|
||||
|
||||
// complicated math things
|
||||
/**
|
||||
* complicated math things (i am scared of this part)
|
||||
*
|
||||
* calculates a points position and ensures that all points grouped by the same driver are placed together
|
||||
* a point is a uploaded track and during this step it gets applied its color material which was generated whiles getting drivers
|
||||
*/
|
||||
Object.entries(groupedPoints).forEach(([driverIdStr, driverPoints], index) => {
|
||||
const driverId = parseInt(driverIdStr, 10);
|
||||
console.log("Driver Colors:", driverColors.value[driverIdStr]);
|
||||
@ -137,7 +146,7 @@ export default defineComponent({
|
||||
console.error(`Missing color for Driver ID: ${driverId}`);
|
||||
}
|
||||
|
||||
const color = new THREE.Color(driverColors.value[driverId]);
|
||||
const color = new THREE.Color(driverColors.value[driverId]);
|
||||
console.log(`Color for Driver ${driverId}:`, driverColors.value[driverId]);
|
||||
|
||||
// calculate offset base on driverid
|
||||
@ -158,8 +167,8 @@ export default defineComponent({
|
||||
colors.push(color.r, color.g, color.b);
|
||||
});
|
||||
});
|
||||
|
||||
// Mittelpunkt der Punktwolke berechnen
|
||||
|
||||
// calculate clouds centerpoint
|
||||
const centerX = sumX / totalPoints;
|
||||
const centerY = sumY / totalPoints;
|
||||
const centerZ = sumZ / totalPoints;
|
||||
@ -194,7 +203,10 @@ export default defineComponent({
|
||||
}
|
||||
animate();
|
||||
|
||||
// handles mouse actions
|
||||
/**
|
||||
* handles mouse events and moves 3D space
|
||||
* @param event the event triggered when the mouse is moved inside the canvas
|
||||
*/
|
||||
const onMouseMove = (event: MouseEvent) => {
|
||||
if (!canvasRef.value || !tooltipRef.value) return;
|
||||
|
||||
@ -211,22 +223,24 @@ export default defineComponent({
|
||||
|
||||
tooltipRef.value.style.display = "block";
|
||||
|
||||
// 3D-Koordinaten des Punktes holen
|
||||
|
||||
/**
|
||||
* getting coordinates and calculating 2D coordinates from them
|
||||
* this is done for the tooltip to be positions at the cursor
|
||||
*/
|
||||
const positionArray = pointCloud.geometry.attributes.position.array;
|
||||
const x = positionArray[intersectIndex * 3];
|
||||
const y = positionArray[intersectIndex * 3 + 1];
|
||||
const z = positionArray[intersectIndex * 3 + 2];
|
||||
|
||||
// 3D-Koordinaten in 2D Bildschirmkoordinaten umrechnen
|
||||
const screenPosition = new THREE.Vector3(x, y, z);
|
||||
screenPosition.project(camera);
|
||||
|
||||
// Umrechnung von NDC (Normalized Device Coordinates) zu Pixeln
|
||||
const tooltipX = (screenPosition.x * 0.5 + 0.5) * window.innerWidth;
|
||||
const tooltipY = (screenPosition.y * -0.5 + 0.5) * window.innerHeight;
|
||||
|
||||
tooltipRef.value.style.left = `${tooltipX + 10}px`; // 10px Abstand zum Punkt
|
||||
tooltipRef.value.style.top = `${tooltipY + 10}px`; // 10px Abstand zum Punkt
|
||||
tooltipRef.value.style.left = `${tooltipX + 10}px`;
|
||||
tooltipRef.value.style.top = `${tooltipY + 10}px`;
|
||||
|
||||
tooltipText.value = `${point.driver.name}: ${point.name} (${point.time.toLocaleString()})`;
|
||||
} else {
|
||||
@ -250,6 +264,8 @@ export default defineComponent({
|
||||
tooltipText,
|
||||
legend,
|
||||
driverColors,
|
||||
message,
|
||||
messageType
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -257,6 +273,7 @@ export default defineComponent({
|
||||
|
||||
|
||||
<template>
|
||||
<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message>
|
||||
<div class="pointcloud-container relative">
|
||||
<canvas ref="canvasRef"></canvas>
|
||||
<div ref="tooltipRef" class="tooltip hidden fixed z-50 px-2 py-1 bg-base-200 text-base-content rounded">
|
||||
@ -264,7 +281,7 @@ export default defineComponent({
|
||||
</div>
|
||||
<!-- Legende -->
|
||||
<div class="legend absolute top-10 left-10 bg-base-200 p-4 rounded shadow-lg z-50">
|
||||
<h3 class="font-bold mb-2">Fahrer Legende</h3>
|
||||
<h3 class="font-bold mb-2">Drivers</h3>
|
||||
<ul>
|
||||
<li v-for="(driverName, driverId) in legend" :key="driverId" class="flex items-center mb-1">
|
||||
<div class="w-4 h-4" :style="{ backgroundColor: driverColors[driverId] }"></div>
|
||||
@ -276,52 +293,52 @@ export default defineComponent({
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pointcloud-container {
|
||||
width: 100%;
|
||||
height: calc(90vh);
|
||||
overflow: hidden;
|
||||
}
|
||||
.pointcloud-container {
|
||||
width: 100%;
|
||||
height: calc(90vh);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
padding: 2px 8px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
padding: 2px 8px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.legend {
|
||||
width: auto;
|
||||
max-width: 250px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.legend {
|
||||
width: auto;
|
||||
max-width: 250px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.legend ul {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.legend ul {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.legend li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.legend li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.legend .color-box {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.legend .color-box {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -13,6 +13,11 @@ export default defineComponent({
|
||||
const driverName: Ref<string> = ref("")
|
||||
const driverList: Ref<driver[]> = ref([])
|
||||
|
||||
// values for UI Information distribution
|
||||
const messageType: Ref<string> = ref("");
|
||||
const message: Ref<string> = ref("");
|
||||
|
||||
|
||||
// handles sending webrequests to the backend
|
||||
const getDrivers = async () => {
|
||||
|
||||
@ -39,6 +44,8 @@ export default defineComponent({
|
||||
}
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `upload failed: ${response.text()}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -64,6 +71,8 @@ export default defineComponent({
|
||||
driverList.value.push({ id: jsonBody["body"], name: driverName.value })
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `upload failed: ${response.text()}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,7 +80,9 @@ export default defineComponent({
|
||||
return {
|
||||
createDriver,
|
||||
driverName,
|
||||
driverList
|
||||
driverList,
|
||||
message,
|
||||
messageType
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -79,6 +90,7 @@ export default defineComponent({
|
||||
|
||||
|
||||
<template>
|
||||
<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
@ -92,9 +104,18 @@ export default defineComponent({
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><input type="text" placeholder="Driver Name" class="input input-bordered w-full max-w-xs"
|
||||
v-model="driverName" /></td>
|
||||
<td><a class="btn btn-success" v-on:click="createDriver">Create Driver</a></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>
|
||||
</tr>
|
||||
<tr v-if="driverList.length == 0">
|
||||
<th>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
</th>
|
||||
<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>
|
||||
</tr>
|
||||
<tr v-for="driver in driverList">
|
||||
<th>{{ driver.id }}</th>
|
||||
|
||||
@ -5,6 +5,7 @@ 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';
|
||||
|
||||
type DriverType = {
|
||||
id: number
|
||||
@ -37,7 +38,7 @@ type GeoJSON = {
|
||||
|
||||
export default defineComponent({
|
||||
name: 'map',
|
||||
components: { PointCloud, VueDatePicker, Map, FileUpload },
|
||||
components: { PointCloud, VueDatePicker, Map, FileUpload, Message },
|
||||
setup(_, { emit }: SetupContext) {
|
||||
const showMap: Ref<boolean> = ref(false);
|
||||
const showCloud: Ref<boolean> = ref(false);
|
||||
@ -52,6 +53,10 @@ export default defineComponent({
|
||||
const multipleTracks: Ref<Boolean> = ref(false);
|
||||
const trackid: Ref<number> = ref(0)
|
||||
|
||||
// values for UI Information distribution
|
||||
const messageType: Ref<string> = ref("");
|
||||
const message: Ref<string> = ref("");
|
||||
|
||||
const loadTrack = async (id: number) => {
|
||||
showMap.value = true;
|
||||
showCloud.value = false;
|
||||
@ -75,12 +80,15 @@ export default defineComponent({
|
||||
if (response.ok) {
|
||||
// Wenn die Antwort OK ist, die Daten verarbeiten
|
||||
mapData.value = await response.json();
|
||||
console.log("GeoJSON-Daten erfolgreich geladen", mapData.value);
|
||||
} else {
|
||||
console.log(await response.text());
|
||||
messageType.value = "error";
|
||||
message.value = `loading tracks failed: ${await response.text()}`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Track-Daten:", error);
|
||||
console.error("loading tracks failed with error:", error);
|
||||
messageType.value = "error";
|
||||
message.value = `loading tracks failed with error: ${error}`;
|
||||
}
|
||||
};
|
||||
|
||||
@ -106,6 +114,8 @@ export default defineComponent({
|
||||
}
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `loading track list failed with error: ${error}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -121,7 +131,8 @@ export default defineComponent({
|
||||
multipleTracks.value = false;
|
||||
|
||||
if (startSearchDate.value == null || endSearchDate.value == null) {
|
||||
alert("please give all required infos")
|
||||
messageType.value = "error";
|
||||
message.value = "please give all required infos";
|
||||
return;
|
||||
}
|
||||
|
||||
@ -155,6 +166,8 @@ export default defineComponent({
|
||||
|
||||
} else {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `searching tracks failed: ${await response.text()}`;
|
||||
}
|
||||
|
||||
if (renderSearchOnMap.value) {
|
||||
@ -188,6 +201,8 @@ export default defineComponent({
|
||||
showUpload,
|
||||
multipleTracks,
|
||||
trackid,
|
||||
message,
|
||||
messageType
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -195,6 +210,7 @@ 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="[]"
|
||||
style="position:absolute; top: 30VH; width: 80%;"></FileUpload>
|
||||
<div class="grid grid-flow-col auto-cols-max gap-4">
|
||||
@ -207,6 +223,9 @@ export default defineComponent({
|
||||
<li>
|
||||
<div class="divider"></div>
|
||||
</li>
|
||||
<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>
|
||||
</ul>
|
||||
@ -217,11 +236,11 @@ export default defineComponent({
|
||||
<div v-if="!showMap && !showCloud && search" style="margin-left: 20%; display:flex;">
|
||||
<div>
|
||||
start time
|
||||
<input class="datepicker" type="date" id="birthday" name="birthday" v-model="startSearchDate">
|
||||
<input class="datepicker" type="date" id="startdate" name="startdate" v-model="startSearchDate">
|
||||
</div>
|
||||
<div style="margin-left: 5%;">
|
||||
end time
|
||||
<input class="datepicker" type="date" id="birthday" name="birthday" v-model="endSearchDate">
|
||||
<input class="datepicker" type="date" id="enddate" name="enddate" v-model="endSearchDate">
|
||||
</div>
|
||||
<div style="margin-left: 5%;">
|
||||
show on map:
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
import {defineComponent, Ref, ref, SetupContext} from 'vue';
|
||||
import { defineComponent, Ref, ref, SetupContext } from 'vue';
|
||||
|
||||
type vehicle = {
|
||||
id:number
|
||||
name:string
|
||||
id: number
|
||||
name: string
|
||||
licenseplate: string
|
||||
}
|
||||
|
||||
@ -11,9 +11,13 @@ export default defineComponent({
|
||||
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("");
|
||||
|
||||
// handles getting all existing drivers
|
||||
const getVehicles = async () => {
|
||||
@ -22,27 +26,29 @@ export default defineComponent({
|
||||
headers.set('Accept', 'application/json')
|
||||
|
||||
const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
|
||||
method:"GET",
|
||||
headers:headers
|
||||
method: "GET",
|
||||
headers: headers
|
||||
})
|
||||
|
||||
var response = await fetch(request)
|
||||
// make sure the request was successfull
|
||||
if (response.ok){
|
||||
if (response.ok) {
|
||||
var jsonBody = await response.json()
|
||||
|
||||
// convert vehicles from json response to processable data
|
||||
for(let i = 0; i < jsonBody.length; i++) {
|
||||
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})
|
||||
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()}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,27 +62,31 @@ export default defineComponent({
|
||||
const requestBody = JSON.stringify({ name: vehicleName.value, licensePlate: licensePlate.value });
|
||||
|
||||
const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
|
||||
method:"POST",
|
||||
headers:headers,
|
||||
method: "POST",
|
||||
headers: headers,
|
||||
body: requestBody
|
||||
})
|
||||
|
||||
var response = await fetch(request)
|
||||
// make sure the request was successfull
|
||||
if (response.ok){
|
||||
if (response.ok) {
|
||||
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 {
|
||||
console.log(await response.text())
|
||||
messageType.value = "error";
|
||||
message.value = `creating vehicle failed with error: ${error}`;
|
||||
}
|
||||
}
|
||||
|
||||
getVehicles()
|
||||
return {
|
||||
return {
|
||||
createVehicle,
|
||||
vehicleName,
|
||||
licensePlate,
|
||||
vehicleList
|
||||
vehicleList,
|
||||
message,
|
||||
messageType
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -84,6 +94,7 @@ export default defineComponent({
|
||||
|
||||
|
||||
<template>
|
||||
<Message v-if="type == 'none'" :type="messageType" :message="message" @close="message = ''; messageType = 'None'"></Message>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
@ -97,20 +108,34 @@ export default defineComponent({
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><input type="text" placeholder="Vehicle Name" class="input input-bordered w-full max-w-xs" v-model="vehicleName"/></td>
|
||||
<td><input type="text" placeholder="License Plate" class="input input-bordered w-full max-w-xs" v-model="licensePlate"/></td>
|
||||
<td><a class="btn btn-success" v-on:click="createVehicle">Create Vehicle</a></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></td>
|
||||
<td><a class="btn btn-error w-full" v-on:click="createVehicle">Delete Vehicle</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
@ -1 +1 @@
|
||||
{"root":["./theme-manager.config.ts","./vite.config.ts","./src/app.vue","./src/leatflet.d.ts","./src/main.ts","./src/vite-env.d.ts","./src/classes/debugger.ts","./src/classes/language.ts","./src/components/settings.vue","./src/components/cookieprompt.vue","./src/components/fileupload.vue","./src/components/map.vue","./src/components/navbar.vue","./src/components/pointcloud.vue","./src/views/driver.vue","./src/views/home.vue","./src/views/login.vue","./src/views/register.vue","./src/views/route.vue","./src/views/settings.vue","./src/views/vehicle.vue"],"version":"5.6.2"}
|
||||
{"root":["./theme-manager.config.ts","./vite.config.ts","./src/app.vue","./src/leatflet.d.ts","./src/main.ts","./src/vite-env.d.ts","./src/classes/debugger.ts","./src/classes/language.ts","./src/components/settings.vue","./src/components/cookieprompt.vue","./src/components/fileupload.vue","./src/components/map.vue","./src/components/navbar.vue","./src/components/pointcloud.vue","./src/views/driver.vue","./src/views/home.vue","./src/views/login.vue","./src/views/register.vue","./src/views/route.vue","./src/views/settings.vue","./src/views/vehicle.vue"],"errors":true,"version":"5.6.2"}
|
||||
Loading…
x
Reference in New Issue
Block a user