85 poprawki w wygldzie i naprawa bdw map location (#86)

* animation partially fixed, details button improved

* animation fixed, shake added

* added user to route detail and buttons descriptions

* user profile view changed

* user profile view changed

* filter buttons improved

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
     "@types/jwt-decode": "^3.1.0",
+    "angular-animations": "^0.11.0",
     "bootstrap": "^3.4.1",
     "jwt-decode": "^4.0.0",
     "rxjs": "~7.8.0",

src/app/map-location/map-location-info-window/map-location-info-window.component.css

@@ -13,15 +13,20 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
   position: absolute;
   top: 120px;
   left: 10px;
-  background-color: rgba(4, 97, 105, 0.5);
+  background-color: rgba(4, 97, 105, 0.7);
   color: white;
   width: 60px;
   height: 60px;
-  font-size: 30px;
+  font-size: 28px;
+}
+
+.details-button > * {
+  align-self: center;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .details-button:hover {

src/app/map-location/map-location-info-window/map-location-info-window.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="mapLocation" class="wrapper">
 
-  <div class="details-button" (click)="onDetailsClick()">
+  <div class="details-button btn" (click)="onDetailsClick()">
     <span class="glyphicon glyphicon-info-sign"></span>
     <p>details</p>
   </div>

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

@@ -12,8 +12,11 @@
       <p style="flex-grow: 1;"></p>
     </li>
 
+    <!--https://github.com/filipows/angular-animations-->
     <li *ngIf="activeMapLocationId == mapLocationData.mapLocation.id" class="list-group-item"
-        style="background-color: #bdf2e9;" #info >
+        style="background-color: #bdf2e9;" #info
+        [@headShake]="infoWrapperAnimationState"
+    [ngClass]="{'animation' : infoWrapperAnimationState}">
       <div class="map-location-grid-container">
         <div class="photo-wrap">
           <div class="photo">

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

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, OnInit, Renderer2, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild} from '@angular/core';
 import {MapLocationService} from "../map-location.service";
 import {maxPageSize} from "../../shared/http.config";
 import {Route} from "../../route/route.model";
@@ -14,6 +14,8 @@ import {DomSanitizer, SafeUrl} from "@angular/platform-browser";
 import {ScreenSizeService} from "../../shared/screen-size.service";
 import { forkJoin } from 'rxjs';
 import { map } from 'rxjs/operators';
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {bounceInDownAnimation, headShakeAnimation} from "angular-animations";
 
 @Component({
   selector: 'app-map-location-list',
@@ -23,7 +25,11 @@ import { map } from 'rxjs/operators';
     RouteItemComponent,
     RouterLinkActive,
     NgClass,
-    NgIf
+    NgIf,
+
+  ],
+  animations: [
+    headShakeAnimation()
   ],
   templateUrl: './map-location-list.component.html',
   styleUrl: './map-location-list.component.css'
@@ -40,39 +46,68 @@ export class MapLocationListComponent implements OnInit {
   mobileVersion: boolean;
 
   @ViewChild('info') infoWrapper: ElementRef;
+  infoWrapperAnimationState: boolean;
 
   constructor(private mapService: MapService,
               private sidePanelService: SidePanelService,
               private mapLocationService: MapLocationService,
               private audioService: AudioService,
               private sanitizer: DomSanitizer,
-              private renderer: Renderer2,
               private screenSizeService: ScreenSizeService) { }
 
+
+
   ngOnInit(): void {
+    this.infoWrapperAnimationState = false;
     this.screenSizeService.isMobileVersion$.subscribe(isMobileVersion => {
       this.mobileVersion = isMobileVersion;
     });
 
     //subscribe to event emitted by map location in map info window
     this.mapService.mapLocationDetailsEventEmitter.subscribe(mapLocation => {
       this.onMapLocationSelected(mapLocation);
+      this.activeMapLocationId = mapLocation.id;
       this.sidePanelService.togglePanelEventEmitter.emit(true);
+      console.log("BBBBB")
       this.scrollToInfoWrapper();
     });
 
     this.fetchMapLocations();
   }
 
+  onMapLocationSelected(mapLocation: MapLocation) {
+    //this.infoWrapperAnimationState = false;
+
+    this.mapService.centerOnMapLocation.emit(mapLocation);
+    if(this.activeMapLocationId == mapLocation.id) {
+      this.activeMapLocationId = null;
+    }
+    else {
+      this.activeMapLocationId = mapLocation.id;
+      if (this.mobileVersion) {
+        this.sidePanelService.togglePanelEventEmitter.emit(false);
+      }
+      this.fetchMapLocationAudio(mapLocation);
+    }
+
+    //this.scrollToInfoWrapper(); if we want to add animation on list item click
+  }
+
   //scroll to map location info and animate it
   private scrollToInfoWrapper() {
-    if (this.infoWrapper?.nativeElement) {
-      this.infoWrapper.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      this.renderer.addClass(this.infoWrapper.nativeElement, 'animation');
-      this.infoWrapper.nativeElement.addEventListener('animationend', () => {
-        this.renderer.removeClass(this.infoWrapper.nativeElement, 'animation');
-      }, { once: true });
-    }
+    setTimeout(() => {
+      if (this.infoWrapper) {
+        console.log("AAAA");
+        this.infoWrapper.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+        this.infoWrapperAnimationState = false;
+        setTimeout(() => {
+          this.infoWrapperAnimationState = true;
+        }, 1);
+      } else {
+        console.error('infoWrapper  not available');
+      }
+    }, 1);
   }
 
   //fetch map locations and their images
@@ -112,19 +147,7 @@ export class MapLocationListComponent implements OnInit {
     });
   }
 
-  onMapLocationSelected(mapLocation: MapLocation) {
-    this.mapService.centerOnMapLocation.emit(mapLocation);
-    if(this.activeMapLocationId == mapLocation.id) {
-      this.activeMapLocationId = null;
-    }
-    else {
-      this.activeMapLocationId = mapLocation.id;
-      if (this.mobileVersion) {
-        this.sidePanelService.togglePanelEventEmitter.emit(false);
-      }
-      this.fetchMapLocationAudio(mapLocation);
-    }
-  }
+
 
   private fetchMapLocationAudio(mapLocation: MapLocation) {
     this.audiosEntities = [];

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

@@ -0,0 +1,18 @@
+h5 {
+  font-weight: 800;
+  color: #10898d;
+}
+
+.user-container {
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  justify-content: center
+}
+
+.user-container > span {
+  font-size: 2rem;
+  margin-right: 7px;
+  margin-bottom: 5px;
+  color: #046169;
+}

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

@@ -20,7 +20,10 @@
           <div class="card-body">
             <div style="text-align: center">
               <h5 class="card-title">{{ route.name }}</h5>
-              <h6 class="card-subtitle mb-2 text-muted">{{routeId}} </h6>
+              <div class="user-container">
+                <span class="glyphicon glyphicon-user"></span>
+                {{route.user.username}}
+              </div>
             </div>
             <div style=" overflow: auto; max-height: 70%">
               <p class="card-text">{{route.description}}</p>

src/app/route/route-info/route-info.component.css

@@ -14,7 +14,7 @@
 
 .route-button {
   height: 30px;
-  width: 30px;
+  width: auto;
   background-color: white;
   color: #10898d;
   margin-left: 10px;
@@ -24,9 +24,17 @@
   align-items: center;
 }
 
+.route-button > p {
+  margin-left: 5px;
+  align-self: center;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 1.5rem;
+}
+
 .background-animation {
   animation: background-change 1s infinite;
-  animation-duration: 1s;
+  animation-duration: 1.5s;
 }
 
 @keyframes background-change {
@@ -46,12 +54,13 @@
 
 
 @media (max-width: 900px) {
-  * {
-    font-size: 1rem;
-  }
-
   .route-button {
     height: 20px;
-    width: 20px;
+    font-size: 1.5rem;
   }
+
+  .route-button > p {
+    font-size: 1rem;
+  }
+
 }

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

@@ -1,4 +1,7 @@
-<div class="panel panel-default wrapper background-animation" style="color: azure; background-color: #046169">
+<div [routerLink]="['/routes', routeId]"
+     class="panel panel-default wrapper background-animation"
+     style="color: azure; background-color: #046169; cursor: pointer"
+     [@tada]="animationState">
   <div class="panel-body">
     <div class="flex-container" >
       <div *ngIf="route" class="flex-item">{{route.name}}</div>
@@ -7,11 +10,14 @@
         <button class="btn route-button"
                 [routerLink]="['/routes', routeId]">
           <span class="glyphicon glyphicon-info-sign"></span>
+          <p>details</p>
         </button>
 
         <button class="btn route-button"
-                [routerLink]="['/routes', routeId, 'edit']">
+                [routerLink]="['/routes', routeId, 'edit']"
+                *ngIf="userMode">
           <span class="glyphicon glyphicon-pencil"></span>
+          <p>edit</p>
         </button>
       </div>
 

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

@@ -1,11 +1,12 @@
-import {Component, OnInit} from '@angular/core';
+import {AfterViewInit, Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
 import {ActivatedRoute, Params, Router, RouterLink} from "@angular/router";
 import {maxPageSize} from "../../shared/http.config";
 import {Route} from "../route.model";
 import {RouteService} from "../route.service";
 import {NgIf} from "@angular/common";
 import {MapLocationService} from "../../map-location/map-location.service";
 import {MapService} from "../../shared/map/map.service";
+import { tadaAnimation } from "angular-animations";
 
 @Component({
   selector: 'app-route-info',
@@ -14,14 +15,20 @@ import {MapService} from "../../shared/map/map.service";
     RouterLink,
     NgIf
   ],
+  animations: [
+    //lightSpeedInAnimation(),
+    tadaAnimation()
+  ],
   templateUrl: './route-info.component.html',
   styleUrl: './route-info.component.css'
 })
 export class RouteInfoComponent  implements OnInit{
 
+
   routeId: string;
   route: Route;
   userMode: boolean;
+  animationState: boolean;
 
   constructor(private activatedRoute: ActivatedRoute,
               private routeService: RouteService,
@@ -30,9 +37,20 @@ export class RouteInfoComponent  implements OnInit{
               private router: Router) {
   }
 
+
+
   ngOnInit(): void {
+
+
     this.activatedRoute.params.subscribe (
       (params: Params) => {
+
+        //animate
+        this.animationState = false;
+        setTimeout(() => {
+          this.animationState = true;
+        }, 1);
+
         this.routeId = params['id'];
         this.routeService.getRouteById(this.routeId).subscribe(response => {
           this.route = response;
@@ -48,4 +66,6 @@ export class RouteInfoComponent  implements OnInit{
       this.userMode = userMode;
     });
   }
+
+
 }