Merge pull request #111 from Apes2getherStrong/WTG-27-create-universa…

…l-snackbar

Wtg 27 create universal snackbar

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

@@ -20,4 +20,5 @@
       </p>
     </div>
   </div>
+  <button (click)="tmpOnClick()">snackbar</button>
 </div>

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

@@ -1,16 +1,14 @@
 import {Component, Input, OnInit} from "@angular/core";
-import {ActivatedRoute, Router} from "@angular/router";
 import {NgForOf, NgIf} from "@angular/common";
 import {MapLocation} from "../map-location.model";
 import {DomSanitizer, SafeUrl} from "@angular/platform-browser";
 import {Audio} from "../../audio/audio.model";
-import {MapService} from "../../shared/map/map.service";
-import {SidePanelService} from "../../shared/side-panel.service";
 import {MapLocationService} from "../map-location.service";
 import {AudioService} from "../../audio/audio.service";
 import {ScreenSizeService} from "../../shared/screen-size.service";
-import {RouteService} from "../../route/route.service";
 import {maxPageSize} from "../../shared/http.config";
+import {SnackbarService} from "../../shared/snackbar/snackbar.service";
+import {SnackbarType} from "../../shared/snackbar/snackbar-type";
 
 @Component({
   selector: 'app-modal',
@@ -33,15 +31,12 @@ export class MapLocationModalComponent implements OnInit {
   audioData: { audio: Audio, url: SafeUrl }[] = [];
   mobileVersion: boolean;
 
-  constructor(private mapService: MapService,
-              private sidePanelService: SidePanelService,
+  constructor(
               private mapLocationService: MapLocationService,
               private audioService: AudioService,
               private sanitizer: DomSanitizer,
               private screenSizeService: ScreenSizeService,
-              private router: Router,
-              private activatedRoute: ActivatedRoute,
-              private routeService: RouteService) {
+              private snackbarService: SnackbarService) {
   }
 
   ngOnInit(): void {
@@ -102,4 +97,7 @@ export class MapLocationModalComponent implements OnInit {
     });
   }
 
+  tmpOnClick() {
+    this.snackbarService.displaySnackbar("This is my message to the world", SnackbarType.DARK);
+  }
 }

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

@@ -1,4 +1,4 @@
-<div [routerLink]="['/routes', routeId]"
+<div (click)="onRouteInfoClick()"
      class="panel panel-default wrapper background-animation"
      style="color: azure; background-color: #046169; cursor: pointer; margin-bottom: 20px;
 padding: 10px">

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

@@ -59,4 +59,11 @@ export class RouteInfoComponent  implements OnInit{
   }
 
 
+  onRouteInfoClick() {
+    if (this.userMode) {
+      this.router.navigate(['/yourRoutes/', this.route.id]);
+    } else {
+      this.router.navigate(['/routes/', this.route.id]);
+    }
+  }
 }

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

@@ -12,7 +12,7 @@
   align-items: center;
   height: 7dvh;
   cursor: pointer;
-
+  border: grey 1px solid;
 }
 
 .list-group-item.active {
@@ -34,11 +34,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-left: 0px
-}
-
-.filter-btn > i {
-  margin-right: 10px
 }
 
 .flex-container {

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

@@ -4,14 +4,14 @@
     <button
       (click)="onAddNewRoute()" class="filter-btn">
       <i class="fa fa-plus filter-btn"></i>
-      new route
+      &nbsp; new route
     </button>
     <div style="display: flex; flex-grow: 1">
       <input
         type="text"
         [(ngModel)]="routeNameToSearch"
         class="input-sm"
-        style="flex: 1 1;">
+        style="flex: 1 1; border: #046169 2px solid">
 
       <button class="filter-btn" (click)="onClearFilters()">
         <i class="fa fa-remove"></i>
@@ -20,7 +20,7 @@
     <button
       class="filter-btn" (click)="onGetRoutesByName()">
       <i class="fa fa-search"></i>
-      search
+      &nbsp; search
     </button>
 
   </div>

src/app/shared/snackbar/snackbar-type.ts

@@ -0,0 +1,10 @@
+export enum SnackbarType {
+    PRIMARY = "alert-primary",
+    SECONDARY = "alert-secondary",
+    SUCCESS = "alert-success",
+    DANGER = "alert-danger",
+    WARNING = "alert-warning",
+    INFO = "alert-info",
+    LIGHT = "alert-light",
+    DARK = "alert-dark"
+}

src/app/shared/snackbar/snackbar.component.css

@@ -0,0 +1,15 @@
+.snackbar-container {
+    position: absolute;
+    left: 25vw;
+    width: 50vw;
+    top: -200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 7;
+}
+
+.snackbar-message {
+    flex-grow: 1;
+    text-align: center;
+}

src/app/shared/snackbar/snackbar.component.html

@@ -0,0 +1,14 @@
+<div [@moveDiv]="animationState"
+     class="snackbar-container alert "
+     [ngClass]="type"
+     role="alert">
+  <div class="snackbar-message">
+    {{message}}
+  </div>
+  <div>
+    <button (click)="closeSnackbar()">
+      <i class="fa fa-close"></i>
+    </button>
+  </div>
+</div>
+

src/app/shared/snackbar/snackbar.component.ts

@@ -0,0 +1,56 @@
+import { Component, ElementRef, Input, OnInit, Renderer2 } from "@angular/core";
+import {bounceInDownAnimation, bounceOutUpAnimation} from "angular-animations";
+import {NgClass, NgStyle} from "@angular/common";
+import {SnackbarType} from "./snackbar-type";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+
+@Component({
+    selector: 'app-snackbar',
+    standalone: true,
+    animations: [
+        trigger('moveDiv', [
+            state('initial', style({ top: '-200px' })),
+            state('final', style({ top: '20px' })),
+            transition('initial => final', [
+                animate('0.7s ease')
+            ]),
+            transition('final => initial', [
+                animate('0.7s ease')
+            ]),
+        ]),
+    ],
+    templateUrl: './snackbar.component.html',
+    imports: [
+        NgStyle,
+        NgClass
+    ],
+    styleUrls: ['./snackbar.component.css']
+})
+export class SnackbarComponent implements OnInit {
+    @Input() message: string;
+    @Input() type: SnackbarType;
+
+
+    constructor(public el: ElementRef, private renderer: Renderer2) {}
+
+    animationState = 'initial';
+
+    ngOnInit() {
+
+        setTimeout(() => {
+            this.animationState = 'final';
+        }, 1);
+
+        setTimeout(() => {
+            this.animationState = 'initial';
+        }, 3000);
+
+        setTimeout(() => {
+            this.closeSnackbar();
+        }, 4000);
+    }
+
+    closeSnackbar() {
+        this.renderer.removeChild(document.body, this.el.nativeElement);
+    }
+}

src/app/shared/snackbar/snackbar.service.ts

@@ -0,0 +1,36 @@
+import {ApplicationRef, ComponentFactoryResolver, Injectable, Injector} from "@angular/core";
+import {SnackbarComponent} from "./snackbar.component";
+import {SnackbarType} from "./snackbar-type";
+
+@Injectable({ providedIn: 'root' })
+export class SnackbarService {
+  constructor(
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private injector: Injector,
+    private appRef: ApplicationRef
+  ) {}
+
+    displaySnackbar(message: string, type: SnackbarType) {
+
+        //creating snackbar (component) dynamically
+        const SnackbarComponentFactory = this.componentFactoryResolver.resolveComponentFactory(SnackbarComponent);
+        const SnackbarComponentRef = SnackbarComponentFactory.create(this.injector);
+
+        //passing @Inputs to the snackbar component
+        if (message) {
+          SnackbarComponentRef.instance["message"] = message;
+          SnackbarComponentRef.instance["type"] = type;
+        }
+
+        //attach snackbar to the DOM
+        const snackbarElement = (SnackbarComponentRef.hostView as any).rootNodes[0] as HTMLElement;
+        this.appRef.attachView(SnackbarComponentRef.hostView);
+        document.body.appendChild(snackbarElement);
+
+        //clean up when the snackbar is closed
+        (SnackbarComponentRef.instance as any).closeSnackbar = () => {
+            this.appRef.detachView(SnackbarComponentRef.hostView);
+            SnackbarComponentRef.destroy();
+        };
+    }
+}