From d567f9a4ee6b2d84d36bd9f2a31aabdd9c11bbb6 Mon Sep 17 00:00:00 2001 From: Zihan Chen Date: Sun, 21 Jan 2024 13:25:34 +0100 Subject: [PATCH 1/8] feat: create waypoint detail component --- .../waypoint-detail.component.css | 11 +++++ .../waypoint-detail.component.html | 28 +++++++++++++ .../waypoint-detail.component.ts | 40 +++++++++++++++++++ 3 files changed, 79 insertions(+) create mode 100644 src/app/waypoint/waypoint-detail/waypoint-detail.component.css create mode 100644 src/app/waypoint/waypoint-detail/waypoint-detail.component.html create mode 100644 src/app/waypoint/waypoint-detail/waypoint-detail.component.ts diff --git a/src/app/waypoint/waypoint-detail/waypoint-detail.component.css b/src/app/waypoint/waypoint-detail/waypoint-detail.component.css new file mode 100644 index 0000000..cba6457 --- /dev/null +++ b/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; +} diff --git a/src/app/waypoint/waypoint-detail/waypoint-detail.component.html b/src/app/waypoint/waypoint-detail/waypoint-detail.component.html new file mode 100644 index 0000000..c7b25ce --- /dev/null +++ b/src/app/waypoint/waypoint-detail/waypoint-detail.component.html @@ -0,0 +1,28 @@ +
+
+
+
Waypoint Detail
+
+
+
Waypoint Title
+

{{ waypoint.title }}

+
+
+
Description
+

{{ waypoint.description }}

+
+
+
+
+
Waypoint Type
+

{{ waypoint.type }}

+
+
+
+
+ Edit Waypoint +
+
+
+
+
diff --git a/src/app/waypoint/waypoint-detail/waypoint-detail.component.ts b/src/app/waypoint/waypoint-detail/waypoint-detail.component.ts new file mode 100644 index 0000000..40972f3 --- /dev/null +++ b/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(); + } + +} From b08c3e1700e5e448617327b0cda0813a8aa513ac Mon Sep 17 00:00:00 2001 From: Zihan Chen Date: Sun, 21 Jan 2024 13:25:46 +0100 Subject: [PATCH 2/8] feat: create waypoint delete component --- .../waypoint-delete.component.css | 0 .../waypoint-delete.component.html | 15 +++++++++ .../waypoint-delete.component.ts | 33 +++++++++++++++++++ 3 files changed, 48 insertions(+) create mode 100644 src/app/waypoint/waypoint-delete/waypoint-delete.component.css create mode 100644 src/app/waypoint/waypoint-delete/waypoint-delete.component.html create mode 100644 src/app/waypoint/waypoint-delete/waypoint-delete.component.ts diff --git a/src/app/waypoint/waypoint-delete/waypoint-delete.component.css b/src/app/waypoint/waypoint-delete/waypoint-delete.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/waypoint/waypoint-delete/waypoint-delete.component.html b/src/app/waypoint/waypoint-delete/waypoint-delete.component.html new file mode 100644 index 0000000..a8e42d4 --- /dev/null +++ b/src/app/waypoint/waypoint-delete/waypoint-delete.component.html @@ -0,0 +1,15 @@ +
+
+
Please, confirm deletion:
+
+
+
+ + +
+
+
diff --git a/src/app/waypoint/waypoint-delete/waypoint-delete.component.ts b/src/app/waypoint/waypoint-delete/waypoint-delete.component.ts new file mode 100644 index 0000000..6738eba --- /dev/null +++ b/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']); + }); + } +} From 01dcd599f57dc06f184b4f743bc57fcd72b981be Mon Sep 17 00:00:00 2001 From: Zihan Chen Date: Sun, 21 Jan 2024 13:25:52 +0100 Subject: [PATCH 3/8] feat: create waypoint edit component --- .../waypoint-edit/waypoint-edit.component.css | 0 .../waypoint-edit.component.html | 33 +++++++++++++++ .../waypoint-edit/waypoint-edit.component.ts | 41 +++++++++++++++++++ 3 files changed, 74 insertions(+) create mode 100644 src/app/waypoint/waypoint-edit/waypoint-edit.component.css create mode 100644 src/app/waypoint/waypoint-edit/waypoint-edit.component.html create mode 100644 src/app/waypoint/waypoint-edit/waypoint-edit.component.ts diff --git a/src/app/waypoint/waypoint-edit/waypoint-edit.component.css b/src/app/waypoint/waypoint-edit/waypoint-edit.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/waypoint/waypoint-edit/waypoint-edit.component.html b/src/app/waypoint/waypoint-edit/waypoint-edit.component.html new file mode 100644 index 0000000..e2454e3 --- /dev/null +++ b/src/app/waypoint/waypoint-edit/waypoint-edit.component.html @@ -0,0 +1,33 @@ +
+
+ +
+ + +
+ + +
+ + +
+ +
+ + +
+ + +
+ + +
+ +
+
+ diff --git a/src/app/waypoint/waypoint-edit/waypoint-edit.component.ts b/src/app/waypoint/waypoint-edit/waypoint-edit.component.ts new file mode 100644 index 0000000..7a5ef41 --- /dev/null +++ b/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(); + } +} From 8ad6a09f8e0ae754c805303652c60e583a4a10fa Mon Sep 17 00:00:00 2001 From: Zihan Chen Date: Sun, 21 Jan 2024 13:26:37 +0100 Subject: [PATCH 4/8] refactor: comment waypoint id field --- .../waypoint/waypoint-list/waypoint-list.component.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/waypoint/waypoint-list/waypoint-list.component.html b/src/app/waypoint/waypoint-list/waypoint-list.component.html index ed6d3aa..1d1cddf 100644 --- a/src/app/waypoint/waypoint-list/waypoint-list.component.html +++ b/src/app/waypoint/waypoint-list/waypoint-list.component.html @@ -40,10 +40,10 @@

Waypoints

-
-
ID
- {{ waypoint.id }} -
+ + + +
Title

{{ waypoint.title }}

From de688721ce1764a1ec5754c7a61a30391f3856b1 Mon Sep 17 00:00:00 2001 From: Zihan Chen Date: Sun, 21 Jan 2024 13:26:47 +0100 Subject: [PATCH 5/8] refactor: comment waypoint id field --- src/app/waypoint/waypoint.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/app/waypoint/waypoint.ts b/src/app/waypoint/waypoint.ts index 8585aa3..9736750 100644 --- a/src/app/waypoint/waypoint.ts +++ b/src/app/waypoint/waypoint.ts @@ -4,6 +4,7 @@ import {Coordinate} from "../coordinate/coordinate.entity"; @HateoasResource('waypoints') export class Waypoint extends Resource { uri: string; + id: string; title: string; description: string; type: string; @@ -15,8 +16,8 @@ export class Waypoint extends Resource { Object.assign(this as any, values); } - public get id(): string { - let uriArray = this.uri.split('/'); - return uriArray.pop(); - } + // public get id(): string { + // let uriArray = this.uri.split('/'); + // return uriArray.pop(); + // } } From c19cc9940dd093a0153f95335c80628ea2c20792 Mon Sep 17 00:00:00 2001 From: Zihan Chen Date: Sun, 21 Jan 2024 13:27:38 +0100 Subject: [PATCH 6/8] feat: add waypoint detail, edit, delete module & routes --- src/app/app-routing.module.ts | 6 ++++++ src/app/app.module.ts | 11 +++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 5953eef..ce9bfcf 100644 --- a/src/app/app-routing.module.ts +++ b/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,6 +50,9 @@ const routes: Routes = [ { path: 'routeFollowed', component: RouteFollowedListComponent, canActivate: [CheckIsNotAdminGuard] }, { path: 'waypoints/create', component: WaypointCreateComponent, canActivate: [CheckIsNotAdminGuard] }, + { path: 'waypoints/:id', component: WaypointDetailComponent, canActivate: [CheckIsNotAdminGuard] }, + { path: 'waypoints/:id/edit', component: WaypointEditComponent, canActivate: [CheckIsNotAdminGuard]}, + { path: 'waypoints/:id/delete', component: WaypointDeleteComponent, canActivate: [CheckIsNotAdminGuard]}, { path: 'waypoints', component: WaypointListComponent, canActivate: [CheckIsNotAdminGuard] }, { path: 'about', component: AboutComponent}, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5a529b6..f3be4a7 100644 --- a/src/app/app.module.ts +++ b/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 }, From 49a80049eb93a73b35c61320b9c8a06a5525290e Mon Sep 17 00:00:00 2001 From: Zihan Chen Date: Sun, 21 Jan 2024 16:31:22 +0100 Subject: [PATCH 7/8] fix: waypoint delete permission issue & add some styles --- src/app/app-routing.module.ts | 4 +- .../waypoint-list/waypoint-list.component.css | 56 ++++++++++ .../waypoint-list.component.html | 104 ++++++++++-------- 3 files changed, 114 insertions(+), 50 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index ce9bfcf..5465f4b 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -52,8 +52,8 @@ const routes: Routes = [ { path: 'waypoints/create', component: WaypointCreateComponent, canActivate: [CheckIsNotAdminGuard] }, { path: 'waypoints/:id', component: WaypointDetailComponent, canActivate: [CheckIsNotAdminGuard] }, { path: 'waypoints/:id/edit', component: WaypointEditComponent, canActivate: [CheckIsNotAdminGuard]}, - { path: 'waypoints/:id/delete', component: WaypointDeleteComponent, canActivate: [CheckIsNotAdminGuard]}, - { path: 'waypoints', component: WaypointListComponent, canActivate: [CheckIsNotAdminGuard] }, + { path: 'waypoints/:id/delete', component: WaypointDeleteComponent, canActivate: [CheckIsAdminGuard]}, + { path: 'waypoints', component: WaypointListComponent, canActivate: [CheckLoggedInGuard] }, { path: 'about', component: AboutComponent}, { path: '404', component: NotFoundComponent}, diff --git a/src/app/waypoint/waypoint-list/waypoint-list.component.css b/src/app/waypoint/waypoint-list/waypoint-list.component.css index e69de29..60ae316 100644 --- a/src/app/waypoint/waypoint-list/waypoint-list.component.css +++ b/src/app/waypoint/waypoint-list/waypoint-list.component.css @@ -0,0 +1,56 @@ +/* waypoint-list.component.css */ + +.container { + max-width: 800px; + margin: auto; +} + +.display-4 { + margin-top: 20px; + margin-bottom: 30px; + text-align: center; +} + +.jumbotron { + margin-bottom: 20px; +} + +.btn-success { + background-color: #28a745; + color: #fff; +} + +.float-right { + float: right; +} + +.mb-3 { + margin-bottom: 15px; +} + +.btn-secondary { + background-color: #6c757d; + color: #fff; +} + +.card { + margin-bottom: 20px; + cursor: pointer; +} + +.card-subtitle { + color: #6c757d; +} + +.card-text { + font-size: 16px; + margin-bottom: 10px; +} + +.d-flex { + display: flex; +} + +.justify-content-center { + justify-content: center; +} diff --git a/src/app/waypoint/waypoint-list/waypoint-list.component.html b/src/app/waypoint/waypoint-list/waypoint-list.component.html index 1d1cddf..0239019 100644 --- a/src/app/waypoint/waypoint-list/waypoint-list.component.html +++ b/src/app/waypoint/waypoint-list/waypoint-list.component.html @@ -1,69 +1,77 @@ -

Waypoints

+
+

Waypoints

-
- -
-
- -
+
-
-
- +
+
+
+ +
    + +
+
+
+ +
+
+ +
    + +
+
+
-
-
-
+
- - - - -
+
Title

{{ waypoint.title }}

-
+
Description

{{ waypoint.description }}

-
+
Type

{{ waypoint.type }}

+
+ Delete +
-
- + +
From c4259ef20cf4daa598b58567cc2d329d09863281 Mon Sep 17 00:00:00 2001 From: Zihan Chen Date: Sun, 21 Jan 2024 16:38:28 +0100 Subject: [PATCH 8/8] feat: add more styles --- .../waypoint-create.component.ts | 44 ++++++++++--------- .../waypoint-list/waypoint-list.component.css | 6 +++ .../waypoint-list.component.html | 4 +- 3 files changed, 31 insertions(+), 23 deletions(-) diff --git a/src/app/waypoint/waypoint-create/waypoint-create.component.ts b/src/app/waypoint/waypoint-create/waypoint-create.component.ts index fc739ae..e259405 100644 --- a/src/app/waypoint/waypoint-create/waypoint-create.component.ts +++ b/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) => { 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(); }); diff --git a/src/app/waypoint/waypoint-list/waypoint-list.component.css b/src/app/waypoint/waypoint-list/waypoint-list.component.css index 60ae316..8010188 100644 --- a/src/app/waypoint/waypoint-list/waypoint-list.component.css +++ b/src/app/waypoint/waypoint-list/waypoint-list.component.css @@ -54,3 +54,9 @@ .justify-content-center { justify-content: center; } + +.btn-delete { + background-color: #dc3545; + color: #fff; +} + diff --git a/src/app/waypoint/waypoint-list/waypoint-list.component.html b/src/app/waypoint/waypoint-list/waypoint-list.component.html index 0239019..ee42e25 100644 --- a/src/app/waypoint/waypoint-list/waypoint-list.component.html +++ b/src/app/waypoint/waypoint-list/waypoint-list.component.html @@ -61,8 +61,8 @@
Description
Type

{{ waypoint.type }}

-
- Delete +
+ Delete