Merge pull request #94 from Apes2getherStrong/93-poprawa-route-edit

93 poprawa route edit

src/app/app-routing.module.ts

@@ -28,6 +28,11 @@ const routes: Routes = [
     canActivate: [AuthGuardService],
     component: MapLocationEditComponent,
   },
+  {
+    path: 'point/:pointId/edit',
+    canActivate: [AuthGuardService],
+    component: MapLocationEditComponent,
+  },
   {
     path: 'routes/new',
     canActivate: [AuthGuardService],
@@ -95,6 +100,11 @@ const routes: Routes = [
       }
     ]
   },
+  {
+    path: 'yourRoutes/:id/edit',
+    canActivate: [AuthGuardService],
+    component: RouteEditComponent
+  },
   {
     path: '',
     redirectTo: 'routes/list', pathMatch: 'full'

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

@@ -1,6 +1,13 @@
 <div class="container">
   <div class="row">
     <div class="col-xs-12">
+      <div class="row" *ngIf="currentImageUrl">
+        <div class="col-xs-12">
+          <div class="form-group text-center img-responsive">
+            <img [src]="currentImageUrl" alt="Current Route Image" style="max-width: 80%; max-height: 40vh; margin-bottom: 20px;">
+          </div>
+        </div>
+      </div>
       <form [formGroup]="mapLocationForm" (ngSubmit)="onSubmit()">
         <div class="col-xs-12">
           <h2>Adding New Point</h2>

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

@@ -7,6 +7,7 @@ import {PointSelectMapComponent} from "../point-select-map/point-select-map.comp
 import {PointSelectMapService} from "../point-select-map/point-select-map.service";
 import {MapLocationService} from "../map-location.service";
 import {RouteMapLocationService} from "../../route-map-location/route-map-location.service";
+import {DomSanitizer, SafeUrl} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-points-edit',
@@ -21,25 +22,45 @@ import {RouteMapLocationService} from "../../route-map-location/route-map-locati
 })
 export class MapLocationEditComponent implements OnInit {
   routeId: string;
+  mapLocationId: string;
   mapLocationForm: FormGroup;
   lat: number | undefined;
   lng: number | undefined;
   selectedFile: File = null;
+  editMode = false;
+  mapLocation: MapLocation;
+  currentImageUrl: SafeUrl = null;
 
   constructor(private activatedRoute: ActivatedRoute,
               private router: Router,
               private mapService: PointSelectMapService,
               private mapLocationService: MapLocationService,
-              private routeMapLocationService: RouteMapLocationService) {
+              private routeMapLocationService: RouteMapLocationService,
+              private sanitizer: DomSanitizer) {
   }
 
   ngOnInit(): void {
-    this.activatedRoute.params.subscribe(
-      (params: Params) => {
-        this.routeId = params['routeId'];
-        this.initForm();
-      }
-    )
+    this.activatedRoute.url.subscribe(urlSegments => {
+      this.editMode = urlSegments.some(segment => segment.path === 'edit');
+    });
+
+    if (!this.editMode) {
+      this.activatedRoute.params.subscribe(
+        (params: Params) => {
+          this.routeId = params['routeId'];
+          this.initForm();
+        }
+      )
+    } else {
+      this.activatedRoute.params.subscribe(
+        (params: Params) => {
+          this.mapLocationId = params['pointId'];
+          this.initForm();
+        }
+      )
+      this.initForm();
+    }
+
 
     this.mapService.markerSelectedEmitter.subscribe((position: { lat: number, lng: number }) => {
       this.mapLocationForm.patchValue({
@@ -67,38 +88,94 @@ export class MapLocationEditComponent implements OnInit {
       },
     }
 
-    this.mapLocationService.postMapLocation(newMapLocation, this.routeId)
-      .subscribe((response: MapLocation) => {
-        if (this.selectedFile) {
-          this.mapLocationService.uploadMapLocationImage(response.id, this.selectedFile)
-            .subscribe(() => {
-              this.routeMapLocationService.postRouteMapLocationService(this.routeId, response.id)
-                .subscribe(() => {
-                  this.goBack();
-                });
-            });
-        } else {
-          this.routeMapLocationService.postRouteMapLocationService(this.routeId, response.id)
-            .subscribe(() => {
-              this.goBack();
-            });
-        }
-      });
+
+    if (this.editMode) {
+      this.mapLocationService.putMapLocation(newMapLocation, this.mapLocationId)
+        .subscribe((response: MapLocation) => {
+          if (this.selectedFile) {
+            this.mapLocationService.uploadMapLocationImage(response.id, this.selectedFile)
+              .subscribe(() => {
+                this.goBack();
+              });
+          } else {
+            this.goBack();
+          }
+          //this.goBack();
+        });
+    } else {
+      this.mapLocationService.postMapLocation(newMapLocation, this.routeId)
+        .subscribe((response: MapLocation) => {
+          if (this.selectedFile) {
+            this.mapLocationService.uploadMapLocationImage(response.id, this.selectedFile)
+              .subscribe(() => {
+                this.routeMapLocationService.postRouteMapLocation(this.routeId, response.id)
+                  .subscribe(() => {
+                    this.goBack();
+                  });
+              });
+          } else {
+            this.routeMapLocationService.postRouteMapLocation(this.routeId, response.id)
+              .subscribe(() => {
+                this.goBack();
+              });
+          }
+        });
+    }
+
+
   }
 
   goBack() {
-    this.router.navigate(['../../../routes/' + this.routeId + '/edit'], {relativeTo: this.activatedRoute});
+    if (this.editMode) {
+      this.router.navigate(['yourRoutes/list'])
+    } else {
+      this.router.navigate(['routes/' + this.routeId + '/edit']);
+    }
+
   }
 
   private initForm() {
     let mapLocationName = '';
     let mapLocationDescription = '';
+    let mapLocationLat = null;
+    let mapLocationLng = null;
 
     this.mapLocationForm = new FormGroup({
       'name': new FormControl(mapLocationName, Validators.required),
       'description': new FormControl(mapLocationDescription),
-      'lat': new FormControl(null, Validators.required),
-      'lng': new FormControl(null, Validators.required),
-    })
+      'lat': new FormControl(mapLocationLat, Validators.required),
+      'lng': new FormControl(mapLocationLng, Validators.required),
+    });
+
+    if (this.editMode) {
+      this.mapLocationService.getMapLocationsById(this.mapLocationId).subscribe(response => {
+        this.mapLocation = response;
+
+        mapLocationName = this.mapLocation.name;
+        mapLocationDescription = this.mapLocation.description;
+        mapLocationLat = this.mapLocation.coordinates.coordinates[0];
+        mapLocationLng = this.mapLocation.coordinates.coordinates[1];
+
+        this.mapLocationForm.patchValue({
+          'name': mapLocationName,
+          'description': mapLocationDescription,
+          'lat': mapLocationLat,
+          'lng': mapLocationLng
+        });
+
+        this.mapLocationService.getMapLocationImageById(this.mapLocationId).subscribe({
+          next: (response: Blob | null) => {
+            if (response) {
+              const objectURL = URL.createObjectURL(response);
+              this.currentImageUrl = this.sanitizer.bypassSecurityTrustUrl(objectURL);
+            }
+          },
+          error: (error: any) => {
+            console.error('Error fetching current image:', error);
+            this.currentImageUrl = null;
+          }
+        })
+      });
+    }
   }
 }

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

@@ -10,6 +10,7 @@
       <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>
     </li>
 
     <!--https://github.com/filipows/angular-animations-->

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

@@ -1,4 +1,14 @@
-import {AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild} from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnInit,
+  Renderer2,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
 import {MapLocationService} from "../map-location.service";
 import {maxPageSize} from "../../shared/http.config";
 import {Route} from "../../route/route.model";
@@ -16,6 +26,7 @@ import { forkJoin } from 'rxjs';
 import { map } from 'rxjs/operators';
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {bounceInDownAnimation, headShakeAnimation} from "angular-animations";
+import {RouteService} from "../../route/route.service";
 
 @Component({
   selector: 'app-map-location-list',
@@ -34,7 +45,7 @@ import {bounceInDownAnimation, headShakeAnimation} from "angular-animations";
   templateUrl: './map-location-list.component.html',
   styleUrl: './map-location-list.component.css'
 })
-export class MapLocationListComponent implements OnInit {
+export class MapLocationListComponent implements OnInit, OnChanges {
 
   @Input() route: Route;
   mapLocations: MapLocation[];
@@ -48,16 +59,25 @@ export class MapLocationListComponent implements OnInit {
   @ViewChild('info') infoWrapper: ElementRef;
   infoWrapperAnimationState: boolean;
 
+  userMode = false;
+
   constructor(private mapService: MapService,
               private sidePanelService: SidePanelService,
               private mapLocationService: MapLocationService,
               private audioService: AudioService,
               private sanitizer: DomSanitizer,
-              private screenSizeService: ScreenSizeService) { }
+              private screenSizeService: ScreenSizeService,
+              private router: Router,
+              private activatedRoute: ActivatedRoute,
+              private routeService: RouteService) { }
 
 
 
   ngOnInit(): void {
+    this.routeService.isUserMode(this.activatedRoute, this.router).subscribe(response => {
+      this.userMode = response;
+    })
+
     this.infoWrapperAnimationState = false;
     this.screenSizeService.isMobileVersion$.subscribe(isMobileVersion => {
       this.mobileVersion = isMobileVersion;
@@ -68,11 +88,18 @@ export class MapLocationListComponent implements OnInit {
       this.onMapLocationSelected(mapLocation);
       this.activeMapLocationId = mapLocation.id;
       this.sidePanelService.togglePanelEventEmitter.emit(true);
-      console.log("BBBBB")
       this.scrollToInfoWrapper();
     });
 
-    this.fetchMapLocations();
+    if (this.route) {
+      this.fetchMapLocations();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['route'] && changes['route'].currentValue) {
+      this.fetchMapLocations();
+    }
   }
 
   onMapLocationSelected(mapLocation: MapLocation) {
@@ -97,7 +124,6 @@ export class MapLocationListComponent implements OnInit {
   private scrollToInfoWrapper() {
     setTimeout(() => {
       if (this.infoWrapper) {
-        console.log("AAAA");
         this.infoWrapper.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
 
         this.infoWrapperAnimationState = false;
@@ -177,4 +203,8 @@ export class MapLocationListComponent implements OnInit {
       });
     });
   }
+
+  onMapLocationEdit(mapLocationId: string) {
+    this.router.navigate(['point/' + mapLocationId + '/edit'])
+  }
 }

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

@@ -19,11 +19,21 @@ export class MapLocationService {
     return this.http.get<Page<MapLocation>>(url, { params });
   }
 
+  getMapLocationsById( mapLocationId: string) {
+    const url = `${backendUrl}/mapLocations/${mapLocationId}`;
+    return this.http.get<MapLocation>(url);
+  }
+
   postMapLocation(mapLocation: MapLocation, routeId: string) {
     const url = `${backendUrl}/mapLocations`;
     return this.http.post(url, mapLocation);
   }
 
+  putMapLocation(mapLocation: MapLocation, mapLocationId: string) {
+    const url = `${backendUrl}/mapLocations/${mapLocationId}`;
+    return this.http.put(url, mapLocation);
+  }
+
   uploadMapLocationImage(mapLocationId: string, image: File) {
     const formData = new FormData();
     formData.append('file', image, image.name);

src/app/map-location/point-select-map/point-select-map.service.ts

@@ -4,4 +4,8 @@ import {MapLocation} from "../map-location.model";
 @Injectable({providedIn: 'root'})
 export class PointSelectMapService {
   markerSelectedEmitter = new EventEmitter<{lat: number, lng: number}>();
+
+  setMarker(position: { lat: number, lng: number }) {
+    this.markerSelectedEmitter.emit(position);
+  }
 }

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

@@ -7,7 +7,7 @@ export class RouteMapLocationService {
 
   constructor(private http: HttpClient) {}
 
-  postRouteMapLocationService(routeId: string, mapLocationId: string) {
+  postRouteMapLocation(routeId: string, mapLocationId: string) {
     let newRouteMapLocation = {
       mapLocation: {
         id: mapLocationId

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

@@ -4,6 +4,9 @@
   <button (click)="goBack()" class="btn btn-primary" style="width: 100%; background-color: #10898d">
     go back
   </button>
+  <button *ngIf="userMode" (click)="onEditRoute()" class="btn btn-primary" style="width: 100%; background-color: #10898d">
+    edit route
+  </button>
 
   <div *ngIf="route" class="panel panel-default" style="flex-grow: 1; margin-top: 1.5rem; overflow: auto">
     <div class="panel-body">

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

@@ -32,12 +32,17 @@ export class RouteDetailComponent implements OnInit, OnDestroy {
   routeId: string;
   route: Route;
   routeImage: SafeUrl = null;
+  userMode: boolean = false;
 
   constructor(private sanitizer: DomSanitizer, private activatedRoute: ActivatedRoute, private routeService: RouteService,
-              private mapService: MapService, private location: Location) {
+              private mapService: MapService, private location: Location, private router: Router) {
   }
 
   ngOnInit() {
+    this.routeService.isUserMode(this.activatedRoute, this.router).subscribe(response => {
+      this.userMode = response;
+    })
+
     this.activatedRoute.params.subscribe(
       (params: Params) => {
         this.routeId = params['id'];
@@ -69,4 +74,7 @@ export class RouteDetailComponent implements OnInit, OnDestroy {
     this.mapService.clearAllMarkers.emit();
   }
 
+  onEditRoute() {
+    this.router.navigate(['edit'], {relativeTo: this.activatedRoute})
+  }
 }