Waypoint detail, edit, delete components

src/app/app-routing.module.ts

@@ -24,6 +24,9 @@ import { RouteFollowedEditComponent } from './routeFollowed/route-followed-edit/
 
 import {WaypointCreateComponent} from "./waypoint/waypoint-create/waypoint-create.component";
 import {WaypointListComponent} from "./waypoint/waypoint-list/waypoint-list.component";
+import {WaypointDetailComponent} from "./waypoint/waypoint-detail/waypoint-detail.component";
+import {WaypointEditComponent} from "./waypoint/waypoint-edit/waypoint-edit.component";
+import {WaypointDeleteComponent} from "./waypoint/waypoint-delete/waypoint-delete.component";
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -47,7 +50,10 @@ const routes: Routes = [
   { path: 'routeFollowed', component: RouteFollowedListComponent, canActivate: [CheckIsNotAdminGuard] },
 
   { path: 'waypoints/create', component: WaypointCreateComponent, canActivate: [CheckIsNotAdminGuard] },
-  { path: 'waypoints', component: WaypointListComponent, canActivate: [CheckIsNotAdminGuard] },
+  { path: 'waypoints/:id', component: WaypointDetailComponent, canActivate: [CheckIsNotAdminGuard] },
+  { path: 'waypoints/:id/edit', component: WaypointEditComponent, canActivate: [CheckIsNotAdminGuard]},
+  { path: 'waypoints/:id/delete', component: WaypointDeleteComponent, canActivate: [CheckIsAdminGuard]},
+  { path: 'waypoints', component: WaypointListComponent, canActivate: [CheckLoggedInGuard] },
 
   { path: 'about', component: AboutComponent},
   { path: '404', component: NotFoundComponent},

src/app/app.module.ts

@@ -34,7 +34,9 @@ import { RouteFilterComponent } from './routes/route-filter/route-filter.compone
 
 import {WaypointCreateComponent} from "./waypoint/waypoint-create/waypoint-create.component";
 import {WaypointListComponent} from "./waypoint/waypoint-list/waypoint-list.component";
-
+import {WaypointDetailComponent} from "./waypoint/waypoint-detail/waypoint-detail.component";
+import {WaypointEditComponent} from "./waypoint/waypoint-edit/waypoint-edit.component";
+import {WaypointDeleteComponent} from "./waypoint/waypoint-delete/waypoint-delete.component";
 
 import {PermissionsService } from "./login-basic/authentication.guard";
 import {RouteFollowedCreateComponent} from "./routeFollowed/route-followed-create/route-followed-create.component";
@@ -45,6 +47,7 @@ import {RouteFollowedDetailComponent} from "./routeFollowed/route-followed-detai
 
 import { RouteVersionsCreateComponent } from './route-versions/route-versions-create/route-versions-create.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
 
 @NgModule({
   declarations: [
@@ -67,6 +70,9 @@ import { ServiceWorkerModule } from '@angular/service-worker';
     RouteDetailComponent,
     WaypointCreateComponent,
     WaypointListComponent,
+    WaypointDetailComponent,
+    WaypointEditComponent,
+    WaypointDeleteComponent,
     RouteFollowedCreateComponent,
     RouteFollowedDeleteComponent,
     RouteFollowedEditComponent,
@@ -93,7 +99,8 @@ import { ServiceWorkerModule } from '@angular/service-worker';
       // Register the ServiceWorker as soon as the application is stable
       // or after 30 seconds (whichever comes first).
       registrationStrategy: 'registerWhenStable:30000'
-    })
+    }),
+    NgxDatatableModule
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },

src/app/waypoint/waypoint-create/waypoint-create.component.ts

@@ -1,12 +1,12 @@
-import { Component, OnInit } from '@angular/core';
-import { Waypoint } from '../waypoint';
-import { Router } from '@angular/router';
-import { WaypointService } from '../waypoint.service';
-import { AuthenticationBasicService } from 'src/app/login-basic/authentication-basic.service';
-import { FormControl, FormGroup, Validators, } from '@angular/forms';
-import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { PagedResourceCollection } from '@lagoshny/ngx-hateoas-client';
-import { Coordinate } from "../../coordinate/coordinate.entity";
+import {Component, OnInit} from '@angular/core';
+import {Waypoint} from '../waypoint';
+import {Router} from '@angular/router';
+import {WaypointService} from '../waypoint.service';
+import {AuthenticationBasicService} from 'src/app/login-basic/authentication-basic.service';
+import {FormControl, FormGroup, Validators,} from '@angular/forms';
+import {ModalDismissReasons, NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {PagedResourceCollection} from '@lagoshny/ngx-hateoas-client';
+import {Coordinate} from "../../coordinate/coordinate.entity";
 
 @Component({
   selector: 'app-waypoint-create',
@@ -23,14 +23,16 @@ export class WaypointCreateComponent implements OnInit {
   public selectedWaypoint: String | undefined = undefined;
   public showModal: boolean = false;
   public waypointForm: FormGroup;
-  public types: string[] = ['Summit', 'Lake', 'River', 'Waterfall', 'Fountain'];
+  public types: string[] = ['Summit', 'Lake', 'River', 'Waterfall', 'Fountain',
+    'Cave', 'Risk', 'Valley', 'Panoramic view', 'Wildlife observation', 'Parking', 'Cliff', 'Shelter', 'Other'];
 
   constructor(
     private router: Router,
     private waypointService: WaypointService,
     private authenticationService: AuthenticationBasicService,
     private modalService: NgbModal
-  ) {}
+  ) {
+  }
 
   ngOnInit(): void {
     this.waypoint = new Waypoint();
@@ -48,7 +50,7 @@ export class WaypointCreateComponent implements OnInit {
   loadWaypointList() {
     this.waypointService
       .getPage({
-        sort: { title: 'ASC' },
+        sort: {title: 'ASC'},
       })
       .subscribe((waypoints: PagedResourceCollection<Waypoint>) => {
         this.waypoints = waypoints.resources.sort((a, b) =>
@@ -59,15 +61,15 @@ export class WaypointCreateComponent implements OnInit {
 
   open(content) {
     this.modalService
-      .open(content, { ariaLabelledBy: 'modal-basic-title' })
+      .open(content, {ariaLabelledBy: 'modal-basic-title'})
       .result.then(
-        (result) => {
-          this.closeResult = `Closed with: ${result}`;
-        },
-        (reason) => {
-          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
-        }
-      );
+      (result) => {
+        this.closeResult = `Closed with: ${result}`;
+      },
+      (reason) => {
+        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+      }
+    );
   }
 
   private getDismissReason(reason: any): string {
@@ -97,7 +99,7 @@ export class WaypointCreateComponent implements OnInit {
     this.waypoint.title = this.title?.value;
     this.waypoint.type = this.waypointForm.get('type')?.value;
     this.waypointService
-      .createResource({ body: this.waypoint })
+      .createResource({body: this.waypoint})
       .subscribe(() => {
         this.router.navigate(['/waypoints']).then();
       });

src/app/waypoint/waypoint-delete/waypoint-delete.component.html

@@ -0,0 +1,15 @@
+<div class="panel panel-warning">
+  <div class="panel-heading">
+    <div class="panel-title">Please, confirm deletion:</div>
+  </div>
+  <div class="panel-body">
+    <div class="text-center">
+      <button id="deleteBtn" type="button" (click)="delete()"
+              class="btn btn-outline-danger m-1">Delete
+      </button>
+      <button id="listBtn" type="button" [routerLink]="['routes', waypoint.id]"
+              class="btn btn-outline-primary m-1">Cancel
+      </button>
+    </div>
+  </div>
+</div>

src/app/waypoint/waypoint-delete/waypoint-delete.component.ts

@@ -0,0 +1,33 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {Waypoint} from "../waypoint";
+import {WaypointService} from "../waypoint.service";
+
+@Component({
+  selector: 'app-waypoint-delete',
+  templateUrl: './waypoint-delete.component.html',
+  styleUrls: ['./waypoint-delete.component.css']
+})
+export class WaypointDeleteComponent implements OnInit {
+
+  public waypoint: Waypoint = new Waypoint();
+  private id: string;
+
+  constructor(private activatedRoute: ActivatedRoute,
+              private router: Router,
+              private waypointService: WaypointService) {
+  }
+
+  ngOnInit(): void {
+    this.id = this.activatedRoute.snapshot.paramMap.get('id');
+    this.waypointService.getResource(this.id).subscribe(
+      w => this.waypoint = w);
+  }
+
+  delete(): void {
+    this.waypointService.deleteResource(this.waypoint).subscribe(
+      () => {
+        this.router.navigate(['waypoints']);
+      });
+  }
+}

src/app/waypoint/waypoint-detail/waypoint-detail.component.css

@@ -0,0 +1,11 @@
+.custom-container {
+  border: 1px solid #ddd;
+  padding: 15px;
+  border-radius: 5px;
+  background-color: #fff;
+}
+
+.info-text {
+  font-weight: bold;
+  color: #333;
+}

src/app/waypoint/waypoint-detail/waypoint-detail.component.html

@@ -0,0 +1,28 @@
+<div class="row">
+  <div class="col-12">
+    <div class="custom-container">
+      <h5 class="text-center mb-4">Waypoint Detail</h5>
+      <div class="row mb-3">
+        <div class="col-md-6">
+          <h6 class="text-muted">Waypoint Title</h6>
+          <p id="WaypointTitle" class="info-text">{{ waypoint.title }}</p>
+        </div>
+        <div class="col-md-6">
+          <h6 class="text-muted">Description</h6>
+          <p id="WaypointDescription" class="info-text">{{ waypoint.description }}</p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6">
+          <h6 class="text-muted">Waypoint Type</h6>
+          <p id="WaypointType" class="info-text">{{ waypoint.type }}</p>
+        </div>
+      </div>
+      <div class="row mt-4">
+        <div class="col-12 text-right">
+          <a [routerLink]="[waypoint.uri.endsWith('/') ? waypoint.uri.slice(0, -1) : waypoint.uri, 'edit']" class="btn btn-primary">Edit Waypoint</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/waypoint/waypoint-detail/waypoint-detail.component.ts

@@ -0,0 +1,40 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {AuthenticationBasicService} from "../../login-basic/authentication-basic.service";
+import {WaypointService} from "../waypoint.service";
+import {Waypoint} from "../waypoint";
+import {Location} from "@angular/common";
+
+@Component({
+  selector: 'app-waypoint-detail',
+  templateUrl: './waypoint-detail.component.html',
+  styleUrls: ['./waypoint-detail.component.css']
+})
+export class WaypointDetailComponent implements OnInit {
+  public waypoint: Waypoint = new Waypoint();
+
+  constructor(
+    public router: Router,
+    private activatedRoute: ActivatedRoute,
+    private waypointService: WaypointService,
+    private authenticationService: AuthenticationBasicService,
+    private location: Location) {
+  }
+
+  ngOnInit(): void {
+    const id = this.activatedRoute.snapshot.paramMap.get('id');
+    this.waypointService.getResource(id).subscribe(
+      (w: Waypoint) => {
+        this.waypoint = w;
+      });
+  }
+
+  isRole(role: string): boolean {
+    return this.authenticationService.isRole(role);
+  }
+
+  goBackToPrevPage(): void {
+    this.location.back();
+  }
+
+}

src/app/waypoint/waypoint-edit/waypoint-edit.component.html

@@ -0,0 +1,33 @@
+<form id="routes-form" (ngSubmit)="onSubmit()" #form="ngForm">
+  <fieldset>
+    <!-- Title input -->
+    <div class="form-group mb-3" [class.was-validated]="title.invalid && (title.dirty || title.touched)">
+      <label class="control-label" for="title">Title</label>
+      <input id="title" name="title" type="text" class="form-control"
+             [(ngModel)]="waypoint.title" #title="ngModel">
+    </div>
+
+    <!-- Description input -->
+    <div class="form-group mb-3" [class.was-validated]="description.dirty || description.touched">
+      <label class="control-label" for="description">Description</label>
+      <input id="description" name="description" type="text" class="form-control"
+             [(ngModel)]="waypoint.description" #description="ngModel">
+    </div>
+
+    <div class="form-group mb-3">
+      <label class="control-label" for="type">Type</label>
+      <input id="type" name="type" type="text" class="form-control" readonly
+             [(ngModel)]="waypoint.type" #type="ngModel">
+    </div>
+
+    <!-- Button -->
+    <div class="form-group fa-pull-right">
+      <button id="routeBack" type="button" (click)="goBackToPrevPage()"
+              class="btn btn-outline-primary">Back</button>
+      <button id="submit" type="submit" [disabled]="!form.form.valid"
+              class="btn btn-success ms-3">Submit</button>
+    </div>
+
+  </fieldset>
+</form>
+

src/app/waypoint/waypoint-edit/waypoint-edit.component.ts

@@ -0,0 +1,41 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {Location} from "@angular/common";
+import {Waypoint} from "../waypoint";
+import {WaypointService} from "../waypoint.service";
+
+@Component({
+  selector: 'app-waypoint-edit',
+  templateUrl: './waypoint-edit.component.html',
+  styleUrls: ['./waypoint-edit.component.css']
+})
+export class WaypointEditComponent implements OnInit {
+  public waypoint: Waypoint = new Waypoint();
+
+  constructor(private activatedRoute: ActivatedRoute,
+              private router: Router,
+              private waypointService: WaypointService,
+              private location: Location) {
+  }
+
+  ngOnInit(): void {
+
+    const id = this.activatedRoute.snapshot.paramMap.get('id');
+    this.waypointService.getResource(id).subscribe(
+      (w: Waypoint) => {
+        this.waypoint = w;
+        this.waypoint.id = id;
+      });
+  }
+
+  onSubmit() {
+    this.waypointService.patchResource(this.waypoint).subscribe(
+      (waypoint: Waypoint) => {
+        this.router.navigate([waypoint.uri]);
+      });
+  }
+
+  goBackToPrevPage(): void {
+    this.location.back();
+  }
+}