change directory

2023-04-29 16:21:57 +02:00
parent 11b0d87a66
commit e42ecade5d
11 changed files with 14 additions and 14 deletions
--- a/src/app/component/detail/detail.component.css
+++ b/src/app/component/detail/detail.component.css
@@ -0,0 +1,9 @@
+.titolo {
+  font-size: 1.5em;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+}
+
+button {
+  margin: 1em;
+}
--- a/src/app/component/detail/detail.component.html
+++ b/src/app/component/detail/detail.component.html
@@ -0,0 +1,69 @@
+<!--
+  <div class="infos">
+    <h1 class="titolo">{{test.name}}</h1>
+    <p>{{test.description}}</p>
+  </div>
+
+  <div class="nav">
+    <p ng-model="showNav" *ngIf="showNav">Distanza: {{distance}}</p>
+    <div id="nav" ng-model="showNav" *ngIf="showNav">
+      <iframe
+        width="500"
+        height="300"
+        frameborder="0" style="border:0"
+        referrerpolicy="no-referrer-when-downgrade"
+        [src]='embed | safe '
+        allowfullscreen>
+      </iframe>
+    </div>
+  </div>
+
+  <div class="image">
+    <img src="assets/testDetail/img.jpg" alt="image">
+  </div>-->
+<div>
+  <div class="grid grid-cols-2 gap-4">
+    <div class="p-4">
+      <h1 class="text-xl font-bold mb-2">{{test.name}}</h1>
+      <p class="text-gray-700">{{test.description}}</p>
+      <div class="mb-4">
+        <p class="text-lg font-medium">Distanza: {{distance === undefined ? '...' : distance}} Km</p>
+      </div>
+    </div>
+
+    <div class="p-4">
+      <img class="w-full" src="../../../assets/testDetail/img.png" alt="image">
+    </div>
+
+    <div class="p-4 col-start-1 col-span-2 lg:col-start-2 lg:col-span-1">
+      <div>
+        <iframe class="w-full" height="300" frameborder="0" style="border:0" referrerpolicy="no-referrer-when-downgrade" [src]='embed | safe' allowfullscreen></iframe>
+      </div>
+    </div>
+  </div>
+
+
+
+<!-- Put this part before </body> tag -->
+  <input type="checkbox" id="my-modal-6" class="modal-toggle" #myModal/>
+
+  <div class="modal modal-bottom sm:modal-middle" *ngIf="img">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg">Congratulations you have discovred {{ test.name }}!</h3>
+      <img class="xl:max-w-md max-h-screen py-4 m-auto" [src]="img" *ngIf="img">
+      <div class="modal-action">
+        <label for="my-modal-6" class="btn bg-white hover:bg-blue-700" (click)="downloadImage()">
+          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+               width="17.334" height="23.4863">
+            <g>
+              <rect height="23.4863" opacity="0" width="17.334" x="0" y="0"/>
+              <path
+                d="M3.06641 22.041L14.2676 22.041C16.3086 22.041 17.334 21.0254 17.334 19.0137L17.334 9.26758C17.334 7.25586 16.3086 6.24023 14.2676 6.24023L11.543 6.24023L11.543 7.8125L14.2383 7.8125C15.2051 7.8125 15.7617 8.33984 15.7617 9.35547L15.7617 18.9258C15.7617 19.9414 15.2051 20.4688 14.2383 20.4688L3.08594 20.4688C2.10938 20.4688 1.57227 19.9414 1.57227 18.9258L1.57227 9.35547C1.57227 8.33984 2.10938 7.8125 3.08594 7.8125L5.79102 7.8125L5.79102 6.24023L3.06641 6.24023C1.02539 6.24023 0 7.25586 0 9.26758L0 19.0137C0 21.0254 1.02539 22.041 3.06641 22.041ZM8.66211 14.3945C9.08203 14.3945 9.44336 14.043 9.44336 13.6328L9.44336 3.60352L9.38477 2.13867L10.0391 2.83203L11.5234 4.41406C11.6602 4.57031 11.8555 4.64844 12.0508 4.64844C12.4512 4.64844 12.7637 4.35547 12.7637 3.95508C12.7637 3.75 12.6758 3.59375 12.5293 3.44727L9.22852 0.263672C9.0332 0.0683594 8.86719 0 8.66211 0C8.4668 0 8.30078 0.0683594 8.0957 0.263672L4.79492 3.44727C4.64844 3.59375 4.57031 3.75 4.57031 3.95508C4.57031 4.35547 4.86328 4.64844 5.27344 4.64844C5.45898 4.64844 5.67383 4.57031 5.81055 4.41406L7.28516 2.83203L7.94922 2.13867L7.89062 3.60352L7.89062 13.6328C7.89062 14.043 8.24219 14.3945 8.66211 14.3945Z"
+                fill="#000000"/>
+            </g>
+          </svg>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
--- a/src/app/component/detail/detail.component.ts
+++ b/src/app/component/detail/detail.component.ts
@@ -0,0 +1,193 @@
+import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
+import {ActivatedRoute} from "@angular/router";
+import {positionService} from "../../service/position.service";
+import * as qrcode from 'qrcode';
+
+@Component({
+  selector: 'app-detail',
+  templateUrl: './detail.component.html',
+  styleUrls: ['./detail.component.css']
+})
+export class DetailComponent implements OnInit {
+  @ViewChild('myModal', { static: true }) myModal!: ElementRef<HTMLInputElement>;
+  private location: string | undefined;
+  private id: number | undefined;
+
+  private URLParams: any;
+
+  test = {
+    name: 'SPAI',
+    cordinates: '50.027403679083974, 19.20198289778017',
+    lat: 50.027403679083974,
+    lng: 19.20198289778017,
+    description: "Lorem ipsum"
+  }
+
+  embed = `https://www.google.com/maps/embed/v1/place?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&q=${this.test.lat},${this.test.lng}`
+
+  cord: any;
+
+  showNav = true;
+  distance: number | undefined;
+  displayedDistance = 0;
+
+  img: any;
+
+  constructor(private route: ActivatedRoute , private positionService: positionService) {}
+
+  async ngOnInit(){
+    this.URLParams = this.route.params
+
+    console.log(this.URLParams.location); // {location: "lugano", id: "1"}
+
+    //this.URLParams = this.route.snapshot.url.slice(-2).map(segment => segment.path);
+    console.log("getting your location: wait...");
+    this.cord = await this.positionService.getLocation();
+    console.log("location: ", this.cord);
+    this.checkDistanceTimer();
+  }
+
+  checkDistanceTimer() {
+    //set interval
+    let intervalID = setInterval(() => {
+      if (this.showNav) {
+        this.distance = this.positionService.getDistanceBetweenCoordinates(this.cord.lat, this.cord.lon, this.test.lat, this.test.lng);
+        console.log(this.distance);
+        if (this.distance == 0) {
+          this.showNav = false;
+          this.displayedDistance = Math.round(this.distance * 100) / 100;
+        }
+        if (this.distance < 0.05) {
+          this.showNav = false;
+          this.generateQR()
+          // implement this nex line in angular ts
+          this.myModal.nativeElement.checked = true;
+          clearInterval(intervalID);
+        }
+      } else {
+        clearInterval(intervalID);
+      }
+    }, 1000);
+  }
+
+  async generateQRCode(url: string) {
+    try {
+      const string = await qrcode.toString(url, { errorCorrectionLevel: 'H', margin: 1, color: { dark: '#000000FF', light: '#FFFFFFFF' } });
+      return string;
+    } catch (error) {
+      console.error(error);
+      throw new Error('Error generating QR code');
+    }
+  }
+
+  addSvgToImage(imageUrl: string, svgString: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const image = new Image();
+      image.src = imageUrl;
+
+      const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
+      const svgUrl = URL.createObjectURL(svgBlob);
+
+      image.onload = () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = image.width;
+        canvas.height = image.height;
+
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          ctx.drawImage(image, 0, 0);
+          const svgImage = new Image();
+          svgImage.src = svgUrl;
+
+          svgImage.onload = () => {
+            if (ctx && svgImage) {
+              const x = image.width - (image.width * 0.2 + 5);
+              const y = image.height - (image.width * 0.2 + 5);
+              ctx.drawImage(svgImage, x, y, image.width * 0.2, image.width * 0.2);
+              const outputImageUrl = canvas.toDataURL('image/png');
+              resolve(outputImageUrl);
+            } else {
+              reject('Error loading SVG');
+            }
+          };
+
+          svgImage.onerror = () => {
+            reject('Error loading SVG');
+          };
+        } else {
+          reject('Error creating canvas context');
+        }
+      };
+
+      image.onerror = () => {
+        reject('Error loading image');
+      };
+    });
+  }
+
+
+
+
+
+  async generateQR() {
+    console.log("generating QR code");
+    console.log(this.URLParams.value);
+    let url = `http://localhost:4200/location/${this.URLParams.value.location}/${this.URLParams.value.id}`;
+
+    let qrCode = await this.generateQRCode(url);
+
+    console.log(qrCode);
+
+    const imageUrl = 'assets/testDetail/img.jpg';
+
+    this.addSvgToImage(imageUrl, qrCode).then((outputImageUrl) => {
+      this.img = outputImageUrl // Output the URL of the output image
+      console.log(outputImageUrl);
+    }).catch((error) => {
+      console.error(error); // Handle any errors that occur
+    });
+
+  }
+
+  public downloadImage(): void {
+    const link = document.createElement('a');
+    link.download = this.test.name;
+    link.href = this.img;
+    link.click();
+  }
+
+
+
+
+
+  /*async addQRCodeToImage(url: string, imagePath: string, outputPath: string): Promise<void> {
+    // Generate QR code
+    const qrCode = await qrcode.toBuffer(url);
+
+    // Load input image using Sharp
+    const image = sharp(imagePath);
+
+    // Get input image dimensions
+    const { width, height } = await image.metadata();
+
+    // Resize QR code to 25% of input image height
+    const qrCodeHeight = Math.round(height * 0.25);
+    const qrCodeBuffer = await sharp(qrCode)
+      .resize(qrCodeHeight, qrCodeHeight)
+      .toBuffer();
+
+    // Composite QR code onto input image at bottom-right corner
+    await image.composite([
+      {
+        input: qrCodeBuffer,
+        gravity: 'southeast',
+        top: height - qrCodeHeight,
+        left: width - qrCodeHeight,
+      },
+    ]);
+
+    // Save output image to file
+    await image.toFile(outputPath);
+  }*/
+
+}
--- a/src/app/component/list/list.component.css
+++ b/src/app/component/list/list.component.css
@@ -0,0 +1,39 @@
+h1 {
+  font-size: 75px;
+  padding-left: 0;
+}
+
+h3 {
+  font-size: 25px;
+  margin-top: 20px;
+}
+
+h4 {
+  color: dimgray;
+}
+
+.distance {
+  font-size: 20px;
+  border-bottom: 2px solid #E9E92D;
+  width: 35%;
+  padding-bottom: 20px;
+  height: 60px;
+}
+
+.row {
+}
+
+.container {
+  margin-left: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+#translate{
+  position: absolute;
+  right: 0;
+}
+#translateUl{
+  position: absolute;
+  right: 0;
+}
--- a/src/app/component/list/list.component.html
+++ b/src/app/component/list/list.component.html
@@ -0,0 +1,41 @@
+<div class="dropdown dropdown-hover" id="translate">
+  <label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100"
+         id="translateLabel">{{translations.translate}}</label>
+  <ul tabindex="0" class="dropdown-content menu p-2 shadow rounded-box w-52" id="translateUl">
+    <li (click)="switchLanguage('DE')"><a>DE</a></li>
+    <li (click)="switchLanguage('FR')"><a>FR</a></li>
+    <li (click)="switchLanguage('IT')"><a>IT</a></li>
+    <li (click)="switchLanguage('EN')"><a>EN</a></li>
+  </ul>
+</div>
+<div *ngIf="isNear" class="container">
+  <h1>
+    {{translations.locationName}}{{locationParams}}
+  </h1>
+  <div *ngFor="let locations of locations, let i = index" class="row">
+    <h3>
+      <a class="link link-primary" href="location/{{locations.location}}">{{locations.location}}</a>
+    </h3>
+    <div>
+      <h4 *ngIf="distance[i] &&! positionNotFound">{{translations.distance}}{{distance[i]}} km</h4>
+      <h4 *ngIf="positionNotFound && !distance[i]">{{translations.positionNotFoundErrorMessage}}</h4>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="!isNear && location && location.waypoints" class="container">
+  <h1>
+    {{location.location}}
+  </h1>
+  <div *ngFor="let waypoinst of location.waypoints, let i = index" class="row">
+    <h3>
+      <a class="link link-primary" href="location/{{location.location}}/{{waypoinst.id}}"> {{waypoinst.name}}</a>
+    </h3>
+    <div class="distance">
+      <h4 *ngIf="distance[i] && !positionNotFound">{{translations.distance}}{{distance[i]}} km</h4>
+      <h4 *ngIf="positionNotFound && !distance[i]">{{translations.positionNotFoundErrorMessage}}</h4>
+    </div>
+
+  </div>
+
+</div>
--- a/src/app/component/list/list.component.ts
+++ b/src/app/component/list/list.component.ts
@@ -0,0 +1,126 @@
+import {Component, OnInit, SimpleChanges, OnChanges} from '@angular/core';
+import {Locations} from "../../interface/data";
+import {ReadjsonService} from "../../service/readjson.service";
+import {ActivatedRoute} from "@angular/router";
+import {positionService} from "../../service/position.service";
+import {listTranslations} from "../../interface/translations";
+import {TranslateService} from "../../service/language/translate.service";
+import {ReadTranslateJsonService} from "../../service/language/readTranslateJson.service";
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.css']
+})
+export class ListComponent implements OnInit, OnChanges {
+  locationParams: string | undefined
+  locations: Partial<Locations>[] | undefined;
+  location: Partial<Locations> | undefined;
+
+  positionCord: any;
+
+  isNear: boolean = true;
+
+  distance: number[] = [];
+
+  translations: listTranslations = {} as listTranslations
+
+  positionNotFound: boolean = false;
+
+  constructor(private route: ActivatedRoute, private readjsonService: ReadjsonService, private positionService: positionService, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) {
+  }
+
+  async ngOnInit() {
+    this.translations = this.readTranslationJsonService.getListTransaltions();
+    this.route.params.subscribe(params => {
+      this.locationParams = params['location'];
+    });
+    this.readjsonService.getLocations().subscribe(locations => {
+      this.locations = locations;
+      if (this.locationParams != null) {
+        this.readjsonService.getLocation(this.locationParams ?? "").subscribe(async location => {
+          this.location = location;
+          this.readjsonService.getWaypoints(this.locationParams ?? "").subscribe(waypoints => {
+            if (this.location) {
+              this.location.waypoints = waypoints ?? []
+            }
+          });
+          await this.checkDataPopulated();
+        });
+      }
+    });
+    this.getPosition();
+    this.positionNotFoundFunction();
+  }
+
+  positionNotFoundFunction() {
+    if (!this.positionNotFound) {
+      setTimeout(() => {
+        if (!this.distance[0]) {
+          this.positionNotFound = true;
+
+        }
+      }, 5000);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['positionCord'] && (changes['positionCord'])) {
+      console.log("onChanges")
+      this.setDistance();
+    }
+  }
+
+
+  private checkDataPopulated(): void {
+    if (this.locations && this.location) {
+      console.log("Dati popolati correttamente:", this.locations, this.location);
+      for (let i = 0; i < this.locations.length; i++) {
+        if (this.locations[i].location === this.locationParams) {
+          this.location = this.locations[i];
+          console.log("Location trovata:", this.location);
+          this.isNear = false;
+          this.setDistance();
+          break;
+        }
+      }
+    }
+  }
+
+  private setDistance(): void {
+    if (this.locations && this.location) {
+      if (this.isNear) {
+        console.log("location lenght " + this.locations.length);
+        for (let i = 0; i < this.locations.length; i++) {
+          console.log("for" + i);
+          console.log("lat" + this.locations[i].lat);
+          this.distance.push(this.positionService.getDistanceBetweenCoordinates(this.locations[i].lat, this.locations[i].lon, this.positionCord.lat, this.positionCord.lon));
+        }
+      } else {
+        if (this.location?.waypoints) {
+          console.log("waypoints lenght " + this.location.waypoints.length);
+          for (let i = 0; i < this.location.waypoints.length; i++) {
+            console.log("for" + i);
+            console.log("lat" + this.location.waypoints[i].lat);
+            this.distance.push(this.positionService.getDistanceBetweenCoordinates(this.location.waypoints[i].lat, this.location.waypoints[i].lon, this.positionCord.lat, this.positionCord.lon));
+          }
+        }
+      }
+    }
+    console.log("ciao" + this.distance[0])
+  }
+
+  getPosition(): any {
+    setInterval(async () => {
+      this.positionCord = await this.positionService.getLocation();
+      this.setDistance();
+    }, 2000);
+  }
+
+  async switchLanguage(lang: string) {
+    this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
+    this.translations.distance = await this.translateService.getData(this.translations.distance, lang);
+    this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang);
+    this.translations.positionNotFoundErrorMessage = await this.translateService.getData(this.translations.positionNotFoundErrorMessage, lang);
+  }
+}
--- a/src/app/component/management/management.component.css
+++ b/src/app/component/management/management.component.css
@@ -0,0 +1,141 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  margin:2% 0 1% 10%;
+  font-size: 30px;
+}
+
+/* Tabella degli utenti */
+table {
+  border-collapse: collapse;
+  width: 80%;
+  margin: 0 10% 0 10%;
+}
+
+th, td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+th {
+  background-color: #f2f2f2;
+}
+
+/* Form di aggiunta utente */
+.overlay {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form-container {
+  background-color: #fefefe;
+  border-radius: 5px;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  width: 400px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.form-container h2 {
+  margin: 0 0 10px 0;
+  font-size: 20px;
+}
+
+.form-container div {
+  margin-bottom: 10px;
+}
+
+.form-container label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-container input {
+  width: 100%;
+  padding: 8px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+
+.form-container select{
+  width: 100%;
+  padding: 8px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+
+.form-container button {
+  background-color: #4CAF50;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.form-container button[type="submit"] {
+  background-color: #008CBA;
+  margin-top:10px;
+}
+
+.form-container button[type="submit"]:hover {
+  background-color: #0d8bf2;
+}
+
+.form-container button[type="submit"]:active {
+  background-color: #0a5a8d;
+}
+
+.form-container button[type="submit"]:focus {
+  outline: none;
+}
+
+.form-container button[type="submit"]:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.form-container button[type="submit"]:disabled:hover {
+  background-color: #cccccc;
+}
+
+.form-container button:not([type="submit"]) {
+  background-color: #f44336;
+  margin-top: 5px;
+}
+
+.form-container button:not([type="submit"]):hover {
+  background-color: #d30f0f;
+}
+
+.form-container button:not([type="submit"]):active {
+  background-color: #8b0c0c;
+}
+
+.form-container button:not([type="submit"]):focus {
+  outline: none;
+}
+
+.button-container{
+  display: flex;
+  justify-content: flex-end;
+}
--- a/src/app/component/management/management.component.html
+++ b/src/app/component/management/management.component.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Management</title>
+</head>
+<body>
+<h1>Users</h1>
+<table>
+  <thead>
+  <tr>
+    <th>Name</th>
+    <th>Username</th>
+    <th>Password</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let user of userList">
+    <td>{{ user.name }}</td>
+    <td>{{ user.username }}</td>
+    <td>{{ user.password }}</td>
+  </tr>
+  </tbody>
+</table>
+
+<div class="button-container">
+  <button (click)="openUserForm()" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary" style="margin: 10px 10% 0 0;">Add</button>
+</div>
+
+<div class="overlay" [style.display]="showUserForm ? 'block' : 'none'">
+  <div class="form-container">
+    <h2>Add User</h2>
+    <form (submit)="addUser(newUser.name, newUser.username, newUser.password)">
+      <div>
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" [(ngModel)]="newUser.name">
+      </div>
+      <div>
+        <label for="username">Username:</label>
+        <input type="text" id="username" name="username" [(ngModel)]="newUser.username">
+      </div>
+      <div>
+        <label for="password">Password:</label>
+        <input type="password" id="password" name="password" [(ngModel)]="newUser.password">
+      </div>
+      <button type="submit">Add User</button>
+    </form>
+    <button (click)="closeUserForm()">Close</button>
+  </div>
+</div>
+
+<h1>Locations</h1>
+<table>
+  <thead>
+  <tr>
+    <th>Location</th>
+    <th>Region</th>
+    <th>Latitude</th>
+    <th>Longitude</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let location of locationList">
+    <td>{{ location.location }}</td>
+    <td>{{ location.region }}</td>
+    <td>{{ location.lat }}</td>
+    <td>{{ location.lon }}</td>
+  </tr>
+  </tbody>
+</table>
+
+<div class="button-container">
+  <button (click)="openLocationForm()" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary" style="margin: 10px 10% 0 0;">Add</button>
+</div>
+
+<div class="overlay" [style.display]="showLocationForm ? 'block' : 'none'">
+  <div class="form-container">
+    <h2>Add Location</h2>
+    <form (submit)="addLocation(newLocation.location, newLocation.region, newLocation.lat, newLocation.lon)">
+      <div>
+        <label for="location">Location:</label>
+        <input type="text" id="location" name="location" [(ngModel)]="newLocation.location">
+      </div>
+      <div>
+        <label for="region">Region:</label>
+        <input type="text" id="region" name="region" [(ngModel)]="newLocation.region">
+      </div>
+
+      <div>
+        <label for="lat">Latitude:</label>
+        <input type="text" id="lat" name="lat" [(ngModel)]="newLocation.lat">
+      </div>
+
+      <div>
+        <label for="lon">Longitude:</label>
+        <input type="text" id="lon" name="lon" [(ngModel)]="newLocation.lon">
+      </div>
+
+
+      <button type="submit">Add Location</button>
+    </form>
+    <button (click)="closeLocationForm()">Close</button>
+  </div>
+</div>
+
+<h1>Waypoints</h1>
+<table>
+  <thead>
+  <tr>
+    <th>Name</th>
+    <th>Latitude</th>
+    <th>Longitude</th>
+    <th>Description</th>
+    <th>Location Name</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let waypoint of waypointList">
+    <td>{{ waypoint.name }}</td>
+    <td>{{ waypoint.lat }}</td>
+    <td>{{ waypoint.lon }}</td>
+    <td>{{ waypoint.description }}</td>
+    <td>{{ waypoint.locationName }}</td>
+  </tr>
+  </tbody>
+</table>
+
+<div class="button-container">
+  <button (click)="openWaypointForm()" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary" style="margin: 10px 10% 0 0;">Add</button>
+</div>
+
+<div class="overlay" [style.display]="showWaypointForm ? 'block' : 'none'">
+  <div class="form-container">
+    <h2>Add Location</h2>
+    <form (submit)="addWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.image, newWaypoint.locationName)">
+      <div>
+        <label for="waypointName">Waypoint:</label>
+        <input type="text" id="waypointName" name="waypointName" [(ngModel)]="newWaypoint.name">
+      </div>
+
+      <div>
+        <label for="waypointLat">Latitude:</label>
+        <input type="text" id="waypointLat" name="waypointLat" [(ngModel)]="newWaypoint.lat">
+      </div>
+
+      <div>
+        <label for="waypointLon">Longitude:</label>
+        <input type="text" id="waypointLon" name="waypointLon" [(ngModel)]="newWaypoint.lon">
+      </div>
+
+      <div>
+        <label for="description">Description:</label>
+        <input type="text" id="description" name="description" [(ngModel)]="newWaypoint.description">
+      </div>
+
+      <div>
+        <label for="image">Image (Base64):</label>
+        <input type="text" id="image" name="image" [(ngModel)]="newWaypoint.image">
+      </div>
+
+      <div>
+        <label for="locationName">Location Name:</label>
+        <select [(ngModel)]="newWaypoint.locationName" id="locationName" name="locationName">
+          <option *ngFor="let location of locationList" [value]="location.location">{{ location.location }}</option>
+        </select>
+      </div>
+
+      <button type="submit">Add Waypoint</button>
+    </form>
+    <button (click)="closeWaypointForm()">Close</button>
+  </div>
+</div>
+</body>
+</html>
--- a/src/app/component/management/management.component.ts
+++ b/src/app/component/management/management.component.ts
@@ -0,0 +1,125 @@
+import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
+
+interface User {
+  id: number;
+  name: string;
+  username: string;
+  password: string;
+}
+
+interface Location {
+  id: number;
+  location: string;
+  region: string;
+  lat: string;
+  lon: string;
+}
+
+interface Waypoint {
+  id: number;
+  name: string;
+  lat: string;
+  lon: string;
+  description: string;
+  image: string;
+  locationName: string;
+}
+
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './management.component.html',
+  styleUrls: ['./management.component.css']
+})
+
+export class ManagementComponent implements OnInit, AfterViewInit, OnDestroy {
+  showUserForm: boolean = false;
+  showLocationForm: boolean = false;
+  showWaypointForm: boolean = false;
+  newUser: User = {id: 0, name: '', username: '', password: ''};
+  newLocation: Location = {id: 0, location: '', region: '', lat: '', lon: ''};
+  newWaypoint: Waypoint = {id: 0, name: '', lat: '', lon: '', description: '', image: '', locationName: ''};
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+
+  }
+
+  ngOnDestroy() {
+
+  }
+
+
+  ngAfterViewInit() {
+
+  }
+
+  userList: User[] = [
+    {id: 1, name: 'John', username: 'john@test.com', password: '0790000000'},
+    {id: 2, name: 'Jane', username: 'jane@test.com', password: '0790000001'},
+    {id: 3, name: 'Bob', username: 'bob@test.com', password: '0790000002'},
+  ];
+
+  locationList: Location[] = [
+    {id: 1, location: 'New York', region: "US", lat: "40.7128", lon: "74.0060"},
+    {id: 2, location: 'London', region: "UK", lat: "51.5074", lon: "0.1278"},
+    {id: 3, location: 'Paris', region: "FR", lat: "48.8566", lon: "2.3522"},
+  ];
+
+  waypointList: Waypoint[] = [
+    {id: 1, name: 'Statue of Liberty', lat: "40.6892", lon: "74.0445", description: "Statue of Liberty", image: "", locationName: "New York"},
+    {id: 2, name: 'Big Ben', lat: "51.5007", lon: "0.1246", description: "Big Ben", image: "", locationName: "London"},
+    {id: 3, name: 'Eiffel Tower', lat: "48.8584", lon: "2.2945", description: "Eiffel Tower", image: "", locationName: "Paris"},
+  ];
+
+  addUser(name: string, username: string, password: string) {
+    const id = this.userList.length + 1;
+    const newUser: User = {id, name, username: username, password: password};
+    this.userList.push(newUser);
+    this.showUserForm = false;
+    this.newUser = {id: 0, name: '', username: '', password: ''};
+  }
+
+  addLocation(name: string, region: string, lat: string, lon: string) {
+    const id = this.locationList.length + 1;
+    const newLocation: Location = {id, location: name, region: region, lat: lat, lon: lon};
+    this.locationList.push(newLocation);
+    this.showLocationForm = false;
+    this.newLocation = {id: 0, location: '', region: '', lat: '', lon: ''};
+  }
+
+  addWaypoint(name: string, lat: string, lon: string, description: string, image: string, locationName: string) {
+    console.log(locationName)
+    const id = this.waypointList.length + 1;
+    const newWaypoint: Waypoint = {id, name, lat: lat, lon: lon, description: description, image: image, locationName: locationName};
+    this.waypointList.push(newWaypoint);
+    this.showWaypointForm = false;
+    this.newWaypoint = {id: 0, name: '', lat: '', lon: '', description: '', image: '', locationName: ''};
+  }
+
+  openUserForm() {
+    this.showUserForm = true;
+  }
+
+  closeUserForm() {
+    this.showUserForm = false;
+  }
+
+  openLocationForm() {
+    this.showLocationForm = true;
+  }
+
+  closeLocationForm() {
+    this.showLocationForm = false;
+  }
+
+  openWaypointForm() {
+    this.showWaypointForm = true;
+  }
+
+  closeWaypointForm() {
+    this.showWaypointForm = false;
+  }
+}