@mxtommy/kip 1.2.3 → 1.3.0

package/src/app/app-help/app-help.component.html

@@ -1,135 +1,135 @@
-<mat-tab-group class="tabGroup">
-  <mat-tab label="Editing Layout">
-
-    <div *ngIf="!unlockStatus">
-      <h2>Unlocking</h2>
-      <p>
-        The layout is "Locked" by default. This is to prevent accidental interaction from touch screens from changing anything.
-        You can unlock KIP using the hamburger icon in the lower right corner and selecting "Configuration -> Edit Layout". Go Ahead try it now!
-      </p>
-    </div>
-    <div *ngIf="unlockStatus">
-      <h2>Configuring Layout</h2>
-      <p>
-        Now that KIP is unlocked, you can do a few actions.
-      </p>
-      <ul>
-        <li>The icon in the lower right can be used to select the Widget you would like to display</li>
-        <li>The icon in the lower left can be used to "split" the existing area. You can use this to display multiple items on one page</li>
-        <li>The "X" in the upper right can be used to delete an area (basically undoing a split)</li>
-        <li>Once a widget is selected, there will be a gear in the lower middle. Clicking it will allow you to setup the widget parameters</li>
-        <li>You can drag the bars between widgits to resize them</li>
-      </ul>
-    
-    </div>
-
-  </mat-tab>
-  <mat-tab label="Video Tutorials">
-    <ng-template matTabContent>
-      <mat-tab-group class="tabGroup">
-
-        <mat-tab label="KIP">
-          <mat-accordion>
-            <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  5 Minutes with Kip (by Boating with the Baileys)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Introduction to using KIP
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/v6o4uK-Iq8s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-      
-            <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  Graphana embeded in KIP (by Boating with the Baileys)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Pretty graphs
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/S8FbtwBwW3w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-
-            <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  Setting up zones in KIP (by Boating with the Baileys)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Warnings/Alarms
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/BJFjLzjlpuY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-            
-          </mat-accordion>
-
-        </mat-tab>
-
-        <mat-tab label="Graphana">
-          <mat-accordion>
-            <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  5 Minutes with Graphana (by Boating with the Baileys)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Introduction to using Graphana
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/b3lHwLnYgx0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-      
-            <mat-expansion-panel [expanded]="step === 3" (opened)="setStep(3)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  SignalK to InfluxDB (by Boating with the Baileys)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Database to store historical data
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/ULnN-cByQXE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-          </mat-accordion>
-        </mat-tab>
-
-        <mat-tab label="OpenPlotter">
-          <mat-accordion>
-            <mat-expansion-panel [expanded]="step === 4" (opened)="setStep(4)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  OpenPlotter (by Boating with the Baileys)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Installing OpenPlotter
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/Q0sEpgzhHTE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-      
-            <mat-expansion-panel [expanded]="step === 5" (opened)="setStep(5)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  OpenPlotter instruction video (by Smart Sailing Boat)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Installing OpenPlotter
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/r8CGixMl18k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-          </mat-accordion>
-        </mat-tab>
-              
-      </mat-tab-group>
-    </ng-template>
- 
-  </mat-tab>
-</mat-tab-group>
-  
-
+<mat-tab-group class="tabGroup">
+  <mat-tab label="Editing Layout">
+
+    <div *ngIf="!unlockStatus">
+      <h2>Unlocking</h2>
+      <p>
+        The layout is "Locked" by default. This is to prevent accidental interaction from touch screens from changing anything.
+        You can unlock KIP using the hamburger icon in the lower right corner and selecting "Configuration -> Edit Layout". Go Ahead try it now!
+      </p>
+    </div>
+    <div *ngIf="unlockStatus">
+      <h2>Configuring Layout</h2>
+      <p>
+        Now that KIP is unlocked, you can do a few actions.
+      </p>
+      <ul>
+        <li>The icon in the lower right can be used to select the Widget you would like to display</li>
+        <li>The icon in the lower left can be used to "split" the existing area. You can use this to display multiple items on one page</li>
+        <li>The "X" in the upper right can be used to delete an area (basically undoing a split)</li>
+        <li>Once a widget is selected, there will be a gear in the lower middle. Clicking it will allow you to setup the widget parameters</li>
+        <li>You can drag the bars between widgits to resize them</li>
+      </ul>
+    
+    </div>
+
+  </mat-tab>
+  <mat-tab label="Video Tutorials">
+    <ng-template matTabContent>
+      <mat-tab-group class="tabGroup">
+
+        <mat-tab label="KIP">
+          <mat-accordion>
+            <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  5 Minutes with Kip (by Boating with the Baileys)
+                </mat-panel-title>
+                <mat-panel-description>
+                  Introduction to using KIP
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <iframe width="560" height="315" src="https://www.youtube.com/embed/v6o4uK-Iq8s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </mat-expansion-panel>
+      
+            <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  Graphana embeded in KIP (by Boating with the Baileys)
+                </mat-panel-title>
+                <mat-panel-description>
+                  Pretty graphs
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <iframe width="560" height="315" src="https://www.youtube.com/embed/S8FbtwBwW3w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </mat-expansion-panel>
+
+            <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  Setting up zones in KIP (by Boating with the Baileys)
+                </mat-panel-title>
+                <mat-panel-description>
+                  Warnings/Alarms
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <iframe width="560" height="315" src="https://www.youtube.com/embed/BJFjLzjlpuY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </mat-expansion-panel>
+            
+          </mat-accordion>
+
+        </mat-tab>
+
+        <mat-tab label="Graphana">
+          <mat-accordion>
+            <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  5 Minutes with Graphana (by Boating with the Baileys)
+                </mat-panel-title>
+                <mat-panel-description>
+                  Introduction to using Graphana
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <iframe width="560" height="315" src="https://www.youtube.com/embed/b3lHwLnYgx0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </mat-expansion-panel>
+      
+            <mat-expansion-panel [expanded]="step === 3" (opened)="setStep(3)">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  SignalK to InfluxDB (by Boating with the Baileys)
+                </mat-panel-title>
+                <mat-panel-description>
+                  Database to store historical data
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <iframe width="560" height="315" src="https://www.youtube.com/embed/ULnN-cByQXE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </mat-expansion-panel>
+          </mat-accordion>
+        </mat-tab>
+
+        <mat-tab label="OpenPlotter">
+          <mat-accordion>
+            <mat-expansion-panel [expanded]="step === 4" (opened)="setStep(4)">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  OpenPlotter (by Boating with the Baileys)
+                </mat-panel-title>
+                <mat-panel-description>
+                  Installing OpenPlotter
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <iframe width="560" height="315" src="https://www.youtube.com/embed/Q0sEpgzhHTE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </mat-expansion-panel>
+      
+            <mat-expansion-panel [expanded]="step === 5" (opened)="setStep(5)">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  OpenPlotter instruction video (by Smart Sailing Boat)
+                </mat-panel-title>
+                <mat-panel-description>
+                  Installing OpenPlotter
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <iframe width="560" height="315" src="https://www.youtube.com/embed/r8CGixMl18k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </mat-expansion-panel>
+          </mat-accordion>
+        </mat-tab>
+              
+      </mat-tab-group>
+    </ng-template>
+ 
+  </mat-tab>
+</mat-tab-group>
+  
+

package/src/app/app-help/app-help.component.ts

@@ -1,45 +1,45 @@
-import { Component, Input, OnInit, ViewEncapsulation, Inject } from '@angular/core';
-import { Subscription } from 'rxjs';
-
-import { AppSettingsService } from '../app-settings.service';
-
-
-
-@Component({
-  selector: 'app-help',
-  templateUrl: './app-help.component.html',
-  styleUrls: ['./app-help.component.css'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class AppHelpComponent implements OnInit {
-
-  unlockStatusSub: Subscription;
-  unlockStatus: boolean;
-
-  step = -1;
-
-
-  constructor(  private AppSettingsService: AppSettingsService,) {
-
-  }
-
-  ngOnInit() {
-    // get Unlock Status
-    this.unlockStatusSub = this.AppSettingsService.getUnlockStatusAsO().subscribe(
-      unlockStatus => {
-        this.unlockStatus = unlockStatus;
-      }
-    );
-  }
-
-  ngOnDestroy() {
-    this.unlockStatusSub.unsubscribe();
-  }
-
-  setStep(index: number) {
-    this.step = index;
-  }
-
-
-}
-
+import { Component, Input, OnInit, ViewEncapsulation, Inject } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { AppSettingsService } from '../app-settings.service';
+
+
+
+@Component({
+  selector: 'app-help',
+  templateUrl: './app-help.component.html',
+  styleUrls: ['./app-help.component.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class AppHelpComponent implements OnInit {
+
+  unlockStatusSub: Subscription;
+  unlockStatus: boolean;
+
+  step = -1;
+
+
+  constructor(  private AppSettingsService: AppSettingsService,) {
+
+  }
+
+  ngOnInit() {
+    // get Unlock Status
+    this.unlockStatusSub = this.AppSettingsService.getUnlockStatusAsO().subscribe(
+      unlockStatus => {
+        this.unlockStatus = unlockStatus;
+      }
+    );
+  }
+
+  ngOnDestroy() {
+    this.unlockStatusSub.unsubscribe();
+  }
+
+  setStep(index: number) {
+    this.step = index;
+  }
+
+
+}
+

package/src/app/app.component.css

@@ -1,39 +1,39 @@
-.fullheight {
-  height: 100%;
-}
-
-
-
-.mainContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  height: 100%;
-}
-
-.mainWindow {
- /* width: 100%; */
-  flex: 30;
-  /*
-  top: 0px;
-  bottom: 60px;
-  position: absolute;
-  */
-}
-
-.menuBar {
-  /*width: 100%;
-   height: 60px; */
-  flex: 1;
- /*   bottom: 0px;
-      position: absolute;
-  background-color:  rgb(100,100,100);;
-  */
-}
-
-.menuBarContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
+.fullheight {
+  height: 100%;
+}
+
+
+
+.mainContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
+}
+
+.mainWindow {
+ /* width: 100%; */
+  flex: 30;
+  /*
+  top: 0px;
+  bottom: 60px;
+  position: absolute;
+  */
+}
+
+.menuBar {
+  /*width: 100%;
+   height: 60px; */
+  flex: 1;
+ /*   bottom: 0px;
+      position: absolute;
+  background-color:  rgb(100,100,100);;
+  */
+}
+
+.menuBarContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+

package/src/app/app.component.html

@@ -1,93 +1,93 @@
-<div [class]="themeClass">
-  <div class="mainContainer app-defaults" >
-    <div class="mainWindow">
-        <router-outlet></router-outlet>
-    </div>
-    <div class="menuBar">
-      <div class="menuBarContainer theme-menu">
-        <div class="menuBarButtonGroups">
-          <app-alarm-menu></app-alarm-menu>
-        </div>
-        <div class="menuBarButtonGroups">
-          <button color="accent"mat-flat-button class="menuBarNavButtons" (click)="pageDown()">
-            <i class="fa fa-chevron-left fa-2x" aria-hidden="true"></i>
-          </button>
-        </div>
-        <div class="menuBarButtonGroups">
-          <button color="accent" mat-flat-button class="menuBarNavButtons" (click)="pageUp()">
-            <i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
-          </button>
-        </div>
-        <div class="menuBarButtonGroups">
-            <button color="accent" mat-flat-button class="menuBarSettingsButton" [matMenuTriggerFor]="settingsMenu" >
-              <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
-            </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<mat-menu #settingsMenu="matMenu">
-  <button mat-menu-item routerLink="/help">
-    <span><i class="fa fa-question-circle" aria-hidden="true"></i> Help</span>
-  </button>
-  <button mat-menu-item [matMenuTriggerFor]="configMenu">
-    <span><i class="fa fa-cog" aria-hidden="true"></i> Configuration</span>
-  </button>
-  <button mat-menu-item routerLink="/data">
-    <span><i class="fa fa-info" aria-hidden="true"></i> Data Browser</span>
-  </button>  
-  <button mat-menu-item (click)="setNightMode(isNightMode ? false : true)">
-    <span *ngIf="!isNightMode"><i class="fa fa-moon-o" aria-hidden="true"></i> Night Mode</span>
-    <span *ngIf="isNightMode"><i class="fa fa-sun-o" aria-hidden="true"></i> Day Mode</span>
-  </button>
-  <button mat-menu-item (click)="toggleFullScreen()">
-    <span *ngIf="!fullscreenStatus"><i class="fa fa-window-maximize" aria-hidden="true"></i> Fullscreen</span>
-    <span *ngIf="fullscreenStatus"><i class="fa fa-window-restore" aria-hidden="true"></i> Exit Fullscreen</span>
-  </button>
-</mat-menu>
-
-<mat-menu #configMenu="matMenu">
-  <button mat-menu-item routerLink="/settings">
-    <span><i class="fa fa-sliders" aria-hidden="true"></i> Settings</span>
-  </button>
-  <button mat-menu-item [disabled]="isNightMode" [matMenuTriggerFor]="themesMenu">
-    <span><i class="fa fa-paint-brush"></i> Themes</span>
-  </button>
-  <button mat-menu-item [disabled]="!unlockStatus" (click)="newPage()">
-    <span><i class="fa fa-plus-square" aria-hidden="true"></i> Add Page</span>
-  </button>
-  <button mat-menu-item (click)="unlockPage()">
-    <span *ngIf="!unlockStatus"><i class="fa fa-columns" aria-hidden="true"></i> Edit Layout</span>
-    <span *ngIf="unlockStatus"><i class="fa fa-lock" aria-hidden="true"></i> Lock Layout</span>
-  </button>
-</mat-menu>
-
-
-<mat-menu #themesMenu="matMenu" xPosition="before">
-  <button mat-menu-item (click)="setTheme('default-light')">
-    <span><i *ngIf="themeName == 'default-light' else elseBlock" class="fa fa-circle" aria-hidden="true"></i> Light Blue</span>
-      <ng-template #elseBlock><i class="fa fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('signalk-light')">
-    <span><i *ngIf="themeName == 'signalk-light' else elseBlock" class="fa fa-circle" aria-hidden="true"></i> Signal K</span>
-      <ng-template #elseBlock><i class="fa fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('high-contrast-light')">
-    <span><i *ngIf="themeName == 'high-contrast-light' else elseBlock" class="fa fa-circle" aria-hidden="true"></i> High Contrast</span>
-      <ng-template #elseBlock><i class="fa fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('platypus-light')">
-    <span><i *ngIf="themeName == 'platypus-light' else elseBlock" class="fa fa-circle" aria-hidden="true"></i> Platypus</span>
-    <ng-template #elseBlock><i class="fa fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('darkBlue-dark')">
-    <span><i *ngIf="themeName == 'darkBlue-dark' else elseBlock" class="fa fa-circle" aria-hidden="true"></i> Dark Blue</span>
-    <ng-template #elseBlock><i class="fa fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('modern-dark')">
-    <span><i *ngIf="themeName == 'modern-dark' else elseBlock" class="fa fa-circle" aria-hidden="true"></i> Modern Dark</span>
-    <ng-template #elseBlock><i class="fa fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-</mat-menu>
+<div [class]="themeClass">
+  <div class="mainContainer app-defaults" >
+    <div class="mainWindow">
+        <router-outlet></router-outlet>
+    </div>
+    <div class="menuBar">
+      <div class="menuBarContainer theme-menu">
+        <div class="menuBarButtonGroups">
+          <app-alarm-menu></app-alarm-menu>
+        </div>
+        <div class="menuBarButtonGroups">
+          <button color="accent"mat-flat-button class="menuBarNavButtons" (click)="pageDown()">
+            <i class="fa-solid fa-chevron-left fa-2x" aria-hidden="true"></i>
+          </button>
+        </div>
+        <div class="menuBarButtonGroups">
+          <button color="accent" mat-flat-button class="menuBarNavButtons" (click)="pageUp()">
+            <i class="fa-solid fa-chevron-right fa-2x" aria-hidden="true"></i>
+          </button>
+        </div>
+        <div class="menuBarButtonGroups">
+            <button color="accent" mat-flat-button class="menuBarSettingsButton" [matMenuTriggerFor]="settingsMenu" >
+              <i class="fa-solid fa-bars fa-2x" aria-hidden="true"></i>
+            </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<mat-menu #settingsMenu="matMenu">
+  <button mat-menu-item routerLink="/help">
+    <span><i class="fa-solid fa-question-circle" aria-hidden="true"></i> Help</span>
+  </button>
+  <button mat-menu-item [matMenuTriggerFor]="configMenu">
+    <span><i class="fa-solid fa-cog" aria-hidden="true"></i> Configuration</span>
+  </button>
+  <button mat-menu-item routerLink="/data">
+    <span><i class="fa-solid fa-info" aria-hidden="true"></i> Data Browser</span>
+  </button>
+  <button mat-menu-item (click)="setNightMode(isNightMode ? false : true)">
+    <span *ngIf="!isNightMode"><i class="fa-solid fa-moon-o" aria-hidden="true"></i> Night Mode</span>
+    <span *ngIf="isNightMode"><i class="fa-solid fa-sun-o" aria-hidden="true"></i> Day Mode</span>
+  </button>
+  <button mat-menu-item (click)="toggleFullScreen()">
+    <span *ngIf="!fullscreenStatus"><i class="fa-solid fa-window-maximize" aria-hidden="true"></i> Fullscreen</span>
+    <span *ngIf="fullscreenStatus"><i class="fa-solid fa-window-restore" aria-hidden="true"></i> Exit Fullscreen</span>
+  </button>
+</mat-menu>
+
+<mat-menu #configMenu="matMenu">
+  <button mat-menu-item routerLink="/settings">
+    <span><i class="fa-solid fa-sliders" aria-hidden="true"></i> Settings</span>
+  </button>
+  <button mat-menu-item [disabled]="isNightMode" [matMenuTriggerFor]="themesMenu">
+    <span><i class="fa-solid fa-paint-brush"></i> Themes</span>
+  </button>
+  <button mat-menu-item [disabled]="!unlockStatus" (click)="newPage()">
+    <span><i class="fa-solid fa-plus-square" aria-hidden="true"></i> Add Page</span>
+  </button>
+  <button mat-menu-item (click)="unlockPage()">
+    <span *ngIf="!unlockStatus"><i class="fa-solid fa-columns" aria-hidden="true"></i> Edit Layout</span>
+    <span *ngIf="unlockStatus"><i class="fa-solid fa-lock" aria-hidden="true"></i> Lock Layout</span>
+  </button>
+</mat-menu>
+
+
+<mat-menu #themesMenu="matMenu" xPosition="before">
+  <button mat-menu-item (click)="setTheme('default-light')">
+    <span><i *ngIf="themeName == 'default-light' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i> Light Blue</span>
+      <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
+  </button>
+  <button mat-menu-item (click)="setTheme('signalk-light')">
+    <span><i *ngIf="themeName == 'signalk-light' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i> Signal K</span>
+      <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
+  </button>
+  <button mat-menu-item (click)="setTheme('high-contrast-light')">
+    <span><i *ngIf="themeName == 'high-contrast-light' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i> High Contrast</span>
+      <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
+  </button>
+  <button mat-menu-item (click)="setTheme('platypus-light')">
+    <span><i *ngIf="themeName == 'platypus-light' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i> Platypus</span>
+    <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
+  </button>
+  <button mat-menu-item (click)="setTheme('darkBlue-dark')">
+    <span><i *ngIf="themeName == 'darkBlue-dark' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i> Dark Blue</span>
+    <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
+  </button>
+  <button mat-menu-item (click)="setTheme('modern-dark')">
+    <span><i *ngIf="themeName == 'modern-dark' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i> Modern Dark</span>
+    <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
+  </button>
+</mat-menu>