Merge pull request #101 from Apes2getherStrong/100-mozliwosc-dodania-…

…istniejacego-punktu-do-trasy

feat: can add existing point (map location) to your route

src/app/map-location/map-location-list/map-location-list.component.html

@@ -10,22 +10,38 @@
       <p style="flex-grow: 1; margin-left: 20px"></p>
       {{mapLocationData.mapLocation.name}}
       <p style="flex-grow: 1;"></p>
-      <button *ngIf="userMode" class="btn btn-primary" (click)="onMapLocationEdit(mapLocationData.mapLocation.id)">edit</button>
-      <button *ngIf="userMode" class="btn btn-danger" (click)="onMapLocationDelete(mapLocationData.mapLocation.id)">delete</button>
+      <button class="btn btn-success" (click)="onAddToYourRoute(mapLocationData.mapLocation.id)">Add to your route
+      </button>
+      <button *ngIf="userMode" class="btn btn-primary" (click)="onMapLocationEdit(mapLocationData.mapLocation.id)">
+        edit
+      </button>
+      <button *ngIf="userMode" class="btn btn-danger" (click)="onMapLocationDelete(mapLocationData.mapLocation.id)">
+        delete
+      </button>
     </li>
 
+    <li *ngIf="addingPointToRoute && pointIdToBeAdded == mapLocationData.mapLocation.id"
+        class="list-group-item"
+        style="background-color: #c6c7d2;">
+      <app-route-list
+        [addingPointToRoute]=true
+        [pointIdToBeAdded]="pointIdToBeAdded"
+      ></app-route-list>
+    </li>
+
+
     <!--https://github.com/filipows/angular-animations-->
     <li *ngIf="activeMapLocationId == mapLocationData.mapLocation.id" class="list-group-item"
         style="background-color: #bdf2e9;" #info
         [@headShake]="infoWrapperAnimationState"
-    [ngClass]="{'animation' : infoWrapperAnimationState}">
+        [ngClass]="{'animation' : infoWrapperAnimationState}">
       <div class="map-location-grid-container">
         <div class="photo-wrap">
           <div class="photo">
             <img *ngIf="mapLocationData.url" [src]="mapLocationData.url">
           </div>
         </div>
-        <div class="info-wrap" >
+        <div class="info-wrap">
           <p style="text-align: center"><strong>Map Location info: </strong></p>
           <p>Name: {{mapLocationData.mapLocation.name}}</p>
           <p>Description: {{mapLocationData.mapLocation.description}}</p>

src/app/map-location/map-location-list/map-location-list.component.ts

@@ -27,6 +27,7 @@ import { map } from 'rxjs/operators';
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {bounceInDownAnimation, headShakeAnimation} from "angular-animations";
 import {RouteService} from "../../route/route.service";
+import {RouteListComponent} from "../../route/route-list/route-list.component";
 
 @Component({
   selector: 'app-map-location-list',
@@ -37,6 +38,7 @@ import {RouteService} from "../../route/route.service";
     RouterLinkActive,
     NgClass,
     NgIf,
+    RouteListComponent,
 
   ],
   animations: [
@@ -61,6 +63,9 @@ export class MapLocationListComponent implements OnInit, OnChanges {
 
   userMode = false;
 
+  addingPointToRoute = false;
+  pointIdToBeAdded: string;
+
   constructor(private mapService: MapService,
               private sidePanelService: SidePanelService,
               private mapLocationService: MapLocationService,
@@ -211,12 +216,16 @@ export class MapLocationListComponent implements OnInit, OnChanges {
   onMapLocationDelete(mapLocationId: string) {
     if (confirm("You are about to delete map location. Do you want to continue?")) {
       this.mapLocationService.deleteMapLocationFromRoute(mapLocationId, this.route.id).subscribe( () => {
-        //this.router.navigate(['yourRoutes/list'])
         this.mapLocations = this.mapLocations.filter(location => location.id !== mapLocationId);
         this.mapLocationsAndImages = this.mapLocationsAndImages.filter(
           locationData => locationData.mapLocation.id !== mapLocationId
         );
       });
     }
   }
+
+  onAddToYourRoute(mapLocationId: string) {
+    this.pointIdToBeAdded = mapLocationId;
+    this.addingPointToRoute = !this.addingPointToRoute;
+  }
 }

src/app/route-map-location/route-map-location.service.ts

@@ -1,23 +1,49 @@
-import {Injectable} from "@angular/core";
-import {HttpClient} from "@angular/common/http";
-import {backendUrl} from "../shared/http.config";
+import { Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { backendUrl } from "../shared/http.config";
+import {Observable, of, switchMap} from "rxjs";
+import { map } from "rxjs/operators";
 
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
 export class RouteMapLocationService {
 
   constructor(private http: HttpClient) {}
 
-  postRouteMapLocation(routeId: string, mapLocationId: string) {
-    let newRouteMapLocation = {
+  postRouteMapLocation(routeId: string, mapLocationId: string): Observable<any> | null {
+    const newRouteMapLocation = {
       mapLocation: {
         id: mapLocationId
       },
       route: {
         id: routeId
       },
       sequenceNr: 1
-    }
-    const url = `${backendUrl}/routeMapLocations`
-    return this.http.post(url, newRouteMapLocation)
+    };
+
+    return this.checkIfIsAlreadyCreated(routeId, mapLocationId).pipe(
+      switchMap(isCreated => {
+        if (!isCreated) {
+          const url = `${backendUrl}/routeMapLocations`;
+          return this.http.post(url, newRouteMapLocation);
+        } else {
+          alert('This map Location is already in your route!')
+          return of(null);
+        }
+      })
+    );
+  }
+
+
+  checkIfIsAlreadyCreated(routeId: string, mapLocationId: string): Observable<boolean> {
+    return this.getRouteMapLocationByMapLocationId(mapLocationId).pipe(
+      map((response: any[]) => {
+        return response.some(location => location.route.id === routeId);
+      })
+    );
+  }
+
+  getRouteMapLocationByMapLocationId(mapLocationId: string): Observable<any> {
+    const url = `${backendUrl}/mapLocation/${mapLocationId}/routeMapLocations`;
+    return this.http.get(url);
   }
 }

src/app/route/route-list/route-list.component.html

@@ -33,7 +33,7 @@
     <ul class="list-group">
       <li *ngFor="let routeIt of routes"
           [routerLinkActiveOptions]="{exact: true}"
-          [routerLink]="[routeIt.id]"
+          [routerLink]="!addingPointToRoute ? [ routeIt.id] : null"
           [queryParams]="{ page: currentPageNumber }"
           class="list-group-item"
           routerLinkActive="active"

src/app/route/route-list/route-list.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {Route} from "../route.model";
 import {RouteService} from "../route.service";
 import {NgForOf, NgIf} from "@angular/common";
@@ -8,6 +8,7 @@ import {MapLocationService} from "../../map-location/map-location.service";
 import {MapService} from "../../shared/map/map.service";
 import {defaultPageSize} from "../../shared/http.config";
 import {FormsModule} from "@angular/forms";
+import {RouteMapLocationService} from "../../route-map-location/route-map-location.service";
 
 
 @Component({
@@ -34,9 +35,13 @@ export class RouteListComponent {
   user = null;
   selectedRoute: Route;
 
+  @Input() addingPointToRoute: boolean = false;
+  @Input() pointIdToBeAdded: string;
+
   constructor(private routeService: RouteService, private mapLocationService: MapLocationService,
               private mapService: MapService, private router: Router,
-              private activatedRoute: ActivatedRoute) {
+              private activatedRoute: ActivatedRoute,
+              private routeMapLocationService: RouteMapLocationService) {
   }
 
   ngOnInit() {
@@ -51,7 +56,6 @@ export class RouteListComponent {
       });
     });
 
-
   }
 
   onAddNewRoute() {
@@ -126,7 +130,7 @@ export class RouteListComponent {
 
   getRoutes() {
     this.validateQueryParams();
-    if (this.userMode) {
+    if (this.userMode || this.addingPointToRoute) {
       this.routeService.getRouteByUserId(this.currentPageNumber, defaultPageSize, this.routeNameToSearch).subscribe(response => {
         this.routes = response.content;
         this.totalPages = response.totalPages;
@@ -165,13 +169,25 @@ export class RouteListComponent {
 
   onRouteSelected(route: Route) {
     //double click lets you see the detials
-    if(route == this.selectedRoute) {
+    if(route == this.selectedRoute && !this.addingPointToRoute) {
       this.selectedRoute = null;
       this.router.navigate(['/yourRoutes', route.id]);
     }
     else {
       this.selectedRoute = route;
     }
 
+    if (this.addingPointToRoute) {
+      this.addPointToRoute()
+    }
+  }
+
+  addPointToRoute() {
+    if (confirm("You are about to add point to " + this.selectedRoute.name + " route.")) {
+      this.routeMapLocationService.postRouteMapLocation(this.selectedRoute.id, this.pointIdToBeAdded)
+        .subscribe( response => {
+          this.router.navigate(['../list'], {relativeTo: this.activatedRoute})
+        });
+    }
   }
 }