Reorganized

src/app/components/calibrate/calibrate.component.html

@@ -0,0 +1,25 @@
+<div>
+    <div class="row mt-2">
+        <div class="col-5 pr-0">
+            <mat-form-field appearance="fill" class="w-100">
+                <mat-label>Shift +/-</mat-label>
+                <input matInput type="number" min="-180" max="180" [(ngModel)]="calibration">
+            </mat-form-field>
+        </div>
+        <div class="col-2 text-center"><h1> = </h1></div>
+        <div class="col-5 pl-0">
+            <mat-form-field appearance="fill" class="w-100">
+                <mat-label>Heading</mat-label>
+                <input matInput type="number" [value]="(physicsService.info | async)?.heading | number : '1.0-0'" readonly>
+            </mat-form-field>
+        </div>
+    </div>
+    <div>
+        <mat-slider class="w-100" [max]="180" [min]="-180" [step]="1" [tickInterval]="90" [thumbLabel]="true" [(ngModel)]="calibration" (input)="calibration = $event.value"></mat-slider>
+    </div>
+    <mat-divider class="mb-1"></mat-divider>
+    <div>
+        <button mat-button class="float-left" (click)="setN()">Set 0°</button>
+        <button mat-button class="float-right" (click)="close()">Close</button>
+    </div>
+</div>

src/app/components/calibrate/calibrate.component.ts

@@ -0,0 +1,33 @@
+import {Component} from "@angular/core";
+import {MatBottomSheetRef} from "@angular/material";
+import {PhysicsService} from "../../services/physics/physics.service";
+
+@Component({
+    selector: 'calibrate',
+    templateUrl: 'calibrate.component.html'
+})
+export class CalibrateComponent {
+    private _calibration = 0;
+    get calibration() { return this._calibration; }
+    set calibration(c: number) {
+        this._calibration = c;
+        this.physicsService.calibrate.next(c);
+    }
+
+    constructor(private bottomSheetRef: MatBottomSheetRef, public physicsService: PhysicsService) {
+        this._calibration = this.physicsService.calibrate.value;
+    }
+
+    close() {
+        this.bottomSheetRef.dismiss();
+    }
+
+    setN() {
+        let currentHeading = Math.round(this.physicsService.orientation.value.alpha);
+        if(currentHeading < 180) {
+            this.calibration = -currentHeading;
+        } else {
+            this.calibration = 360 - currentHeading;
+        }
+    }
+}

src/app/components/palette/palette.component.html

@@ -0,0 +1,3 @@
+<div class="bg-white p-3">
+    <div *ngFor="let c of colors" class="rounded-circle" [style.backgroundColor]="c" style="height: 30px; width: 30px"></div>
+</div>

src/app/components/palette/palette.component.ts

@@ -0,0 +1,9 @@
+import {Component} from "@angular/core";
+
+@Component({
+    selector: 'palette',
+    templateUrl: 'palette.component.html'
+})
+export class PaletteComponent {
+    colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#d82b00']
+}

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'
+    }
+}

src/app/components/toolbar/toolbar.component.html

@@ -0,0 +1,15 @@
+<mat-toolbar>
+    <button mat-icon-button routerLink="/">
+        <img src="/assets/images/logo.png" height="35px" width="auto">
+    </button>
+    <small class="ml-1 text-muted">{{version}}</small>
+    <div class="ml-auto">
+        <div *ngFor="let section of menu" class="d-inline ml-4">
+            <ng-container *ngFor="let item of section">
+                <button *ngIf="!item.hidden" mat-icon-button [ngClass]="{'selected': item.enabled}" class="ml-1" (click)="clickWrapper(item)">
+                    <mat-icon>{{item.icon}}</mat-icon>
+                </button>
+            </ng-container>
+        </div>
+    </div>
+</mat-toolbar>

src/app/components/toolbar/toolbar.component.scss

@@ -0,0 +1,7 @@
+mat-toolbar {
+  height: 40px !important;
+}
+
+.selected {
+  background-color: #cccccc;
+}

src/app/components/toolbar/toolbar.component.ts

@@ -0,0 +1,39 @@
+import {Component, EventEmitter, Input, Output} from "@angular/core";
+import {ToolbarItem} from "./toolbarItem";
+import {version} from '../../../../package.json';
+
+@Component({
+    selector: 'toolbar',
+    templateUrl: 'toolbar.component.html',
+    styleUrls: ['toolbar.component.scss']
+})
+export class ToolbarComponent {
+    @Input() menu: ToolbarItem[][];
+
+    @Output() menuChange = new EventEmitter<ToolbarItem[][]>();
+
+    readonly version = version;
+
+    constructor() { }
+
+    clickWrapper(item: ToolbarItem) {
+        if(item.toggle) {
+            if (item.individualToggle) {
+                this.menu.forEach(menu => menu.filter(i2 => item.name != i2.name && i2.individualToggle).forEach(item => {
+                    item.enabled = false;
+                    if (item.onDisabled) item.onDisabled();
+                }));
+            }
+
+            item.enabled = !item.enabled;
+            this.menuChange.emit(this.menu);
+
+            if(item.enabled) {
+                if(item.onEnabled) item.onEnabled();
+            } else {
+                if(item.onDisabled) item.onDisabled();
+            }
+        }
+        if(item.click) item.click();
+    }
+}

src/app/components/toolbar/toolbarItem.ts

@@ -0,0 +1,11 @@
+export interface ToolbarItem {
+    name: string;
+    icon: string;
+    hidden?: boolean;
+    toggle?: boolean;
+    individualToggle?: boolean;
+    click?: () => void;
+    enabled?: boolean;
+    onEnabled?: () => void;
+    onDisabled?: () => void;
+}