From cbed14ee1e3ea3b329eb61532b1a9930fc5c61c8 Mon Sep 17 00:00:00 2001
From: Polianin Nikita <nikitkapolyanin@yandex.ru>
Date: Tue, 13 Feb 2024 02:52:38 +0300
Subject: [PATCH] feat: add notification

---
 .../notification/notification.component.css   | 10 ++++
 .../notification/notification.component.html  | 11 +++++
 .../notification/notification.component.ts    | 46 +++++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 src/components/notification/notification.component.css
 create mode 100644 src/components/notification/notification.component.html
 create mode 100644 src/components/notification/notification.component.ts

diff --git a/src/components/notification/notification.component.css b/src/components/notification/notification.component.css
new file mode 100644
index 0000000..67b0bef
--- /dev/null
+++ b/src/components/notification/notification.component.css
@@ -0,0 +1,10 @@
+.notification-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.close-button {
+  margin-left: 8px;
+}
diff --git a/src/components/notification/notification.component.html b/src/components/notification/notification.component.html
new file mode 100644
index 0000000..a7c5dbd
--- /dev/null
+++ b/src/components/notification/notification.component.html
@@ -0,0 +1,11 @@
+<div class="notification-content" [class]="data.className">
+  <span>
+    {{ data.message }}
+    </span>
+  <button mat-icon-button class="close-button" (click)="dismiss()">
+    <mat-icon>close</mat-icon>
+  </button>
+</div>
+@if (showProgressBar) {
+  <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
+}
diff --git a/src/components/notification/notification.component.ts b/src/components/notification/notification.component.ts
new file mode 100644
index 0000000..b4c6f12
--- /dev/null
+++ b/src/components/notification/notification.component.ts
@@ -0,0 +1,46 @@
+import {Component, Inject} from '@angular/core';
+import {MatIcon} from "@angular/material/icon";
+import {MatProgressBar} from "@angular/material/progress-bar";
+import {MAT_SNACK_BAR_DATA, MatSnackBarRef} from "@angular/material/snack-bar";
+import {MatIconButton} from "@angular/material/button";
+
+@Component({
+  selector: 'app-notification',
+  standalone: true,
+  imports: [
+    MatIconButton,
+    MatIcon,
+    MatProgressBar
+  ],
+  templateUrl: './notification.component.html',
+  styleUrl: './notification.component.css'
+})
+
+export class NotificationComponent {
+  showProgressBar: boolean = false;
+  progress: number = 100;
+
+  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any, private snackBarRef: MatSnackBarRef<NotificationComponent>) {
+    if (data.duration) {
+      this.startProgress(data.duration);
+      this.showProgressBar = true;
+    }
+  }
+
+  dismiss(): void {
+    this.snackBarRef.dismiss();
+  }
+
+  private startProgress(duration: number): void {
+    const interval: number = duration / 100;
+    const progressInterval: number = setInterval(() => {
+      this.progress--;
+      if (this.progress === 0) {
+        clearInterval(progressInterval);
+        setTimeout(() => {
+          this.dismiss();
+        }, 1000);
+      }
+    }, interval);
+  }
+}