Reorganized

src/app/components/permissions/permissions.component.html

@@ -0,0 +1,10 @@
+<div mat-dialog-content>
+    <div class="d-flex">
+        <div><mat-icon class="mr-2">{{icon}}</mat-icon></div>
+        <div><p class="d-inline">{{message}}</p></div>
+    </div>
+</div>
+<div mat-dialog-actions class="float-right">
+    <button mat-button [mat-dialog-close]="false">No Thanks</button>
+    <button mat-button [mat-dialog-close]="true">Ok</button>
+</div>

src/app/components/permissions/permissions.component.ts

@@ -0,0 +1,16 @@
+import { Component, Inject } from "@angular/core";
+import { MAT_DIALOG_DATA } from "@angular/material";
+
+@Component({
+    selector: 'permissions',
+    templateUrl: 'permissions.component.html'
+})
+export class PermissionsComponent {
+    icon: string;
+    message: string;
+
+    constructor(@Inject(MAT_DIALOG_DATA) data) {
+        this.icon = data.icon;
+        this.message = data.message;
+    }
+}

src/app/components/permissions/permissions.service.ts

@@ -0,0 +1,18 @@
+import {Injectable} from "@angular/core";
+import {MatDialog} from "@angular/material";
+import {PermissionsComponent} from "./permissions.component";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PermissionsService {
+    constructor(private dialog: MatDialog) { }
+
+    async requestPermission(name: string, icon: string, message: string) {
+        let perm = await navigator['permissions'].query({name: name});
+        if (perm.state == 'prompt') {
+            return await this.dialog.open(PermissionsComponent, {autoFocus: false, data: {icon: icon, message: message}}).afterClosed().toPromise();
+        }
+        return perm.state == 'granted'
+    }
+}