diff --git a/src/app/route/route-info/route-info.component.ts b/src/app/route/route-info/route-info.component.ts
index 10934be..94b9306 100644
--- a/src/app/route/route-info/route-info.component.ts
+++ b/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]);
+ }
+ }
}
diff --git a/src/app/route/route-list/route-list.component.css b/src/app/route/route-list/route-list.component.css
index 25b4361..c7c8775 100644
--- a/src/app/route/route-list/route-list.component.css
+++ b/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 {
diff --git a/src/app/route/route-list/route-list.component.html b/src/app/route/route-list/route-list.component.html
index 296b2c2..38105d6 100644
--- a/src/app/route/route-list/route-list.component.html
+++ b/src/app/route/route-list/route-list.component.html
@@ -4,14 +4,14 @@
+ style="flex: 1 1; border: #046169 2px solid">
diff --git a/src/app/shared/snackbar/snackbar-type.ts b/src/app/shared/snackbar/snackbar-type.ts
new file mode 100644
index 0000000..0497d37
--- /dev/null
+++ b/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"
+}
diff --git a/src/app/shared/snackbar/snackbar.component.css b/src/app/shared/snackbar/snackbar.component.css
new file mode 100644
index 0000000..ac9e0a6
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/shared/snackbar/snackbar.component.html b/src/app/shared/snackbar/snackbar.component.html
new file mode 100644
index 0000000..1d52046
--- /dev/null
+++ b/src/app/shared/snackbar/snackbar.component.html
@@ -0,0 +1,14 @@
+
+
+ {{message}}
+
+
+
+
+
+
diff --git a/src/app/shared/snackbar/snackbar.component.ts b/src/app/shared/snackbar/snackbar.component.ts
new file mode 100644
index 0000000..1f48ba1
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/app/shared/snackbar/snackbar.service.ts b/src/app/shared/snackbar/snackbar.service.ts
new file mode 100644
index 0000000..043503a
--- /dev/null
+++ b/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();
+ };
+ }
+}