settings checkbox FIX

src/main/angular/src/app/app.html

@@ -9,6 +9,10 @@
       {{ menuService.title }}
     </div>
 
+    <div class="MainMenuItem" routerLink="/Location">
+      <fa-icon [icon]="faHome"></fa-icon>
+    </div>
+
     <div class="MainMenuItem" routerLink="/Settings">
       <fa-icon [icon]="faGears"></fa-icon>
     </div>

src/main/angular/src/app/app.ts

@@ -1,13 +1,12 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
-import {faBars, faBookmark as faBookmarkSolid, faGear, faGears} from '@fortawesome/free-solid-svg-icons';
+import {faBars, faGears} from '@fortawesome/free-solid-svg-icons';
 import {MenuService} from './menu-service';
 import {Location} from './location/Location';
 import {LocationService} from './location/location-service';
 import {WebsocketService} from './common';
-import {ConfigService} from './config.service';
+import {faHome} from '@fortawesome/free-regular-svg-icons';
-import {faBookmark as faBookmarkRegular} from '@fortawesome/free-regular-svg-icons';
 
 @Component({
   selector: 'app-root',
@@ -17,6 +16,8 @@ import {faBookmark as faBookmarkRegular} from '@fortawesome/free-regular-svg-ico
 })
 export class App implements OnInit, OnDestroy {
 
+  protected readonly faGears = faGears;
+
   protected readonly faBars = faBars;
 
   protected showDrawer: boolean = false;
@@ -25,7 +26,6 @@ export class App implements OnInit, OnDestroy {
 
   constructor(
     readonly locationService: LocationService,
-    readonly configService: ConfigService,
     readonly menuService: MenuService,
     readonly router: Router,
     readonly ws: WebsocketService,
@@ -48,11 +48,5 @@ export class App implements OnInit, OnDestroy {
     })
   }
 
-  protected readonly faBookmarkRegular = faBookmarkRegular;
+  protected readonly faHome = faHome;
-
-  protected readonly faBookmarkSolid = faBookmarkSolid;
-
-  protected readonly faGear = faGear;
-
-  protected readonly faGears = faGears;
 }

src/main/angular/src/app/settings/settings-component.html

@@ -16,17 +16,7 @@
     </div>
   </div>
   <div>
-    <div>
+    <app-checkbox [initial]="configService.energyPercent" (onChange)="configService.energyPercent = $event" label="Energie Prozentsätze"></app-checkbox>
-      <label>
+    <app-checkbox [initial]="configService.locationConfig" (onChange)="configService.locationConfig = $event" label="Ort Konfiguration"></app-checkbox>
-        <input type="checkbox" #checkbox [checked]="configService.energyPercent" (change)="configService.energyPercent = checkbox.checked">
-        Energie Prozentsätze
-      </label>
-    </div>
-    <div>
-      <label>
-        <input type="checkbox" #checkbox [checked]="configService.locationConfig" (change)="configService.locationConfig = checkbox.checked">
-        Ort Konfiguration
-      </label>
-    </div>
   </div>
 </div>

src/main/angular/src/app/settings/settings-component.ts

@@ -1,30 +1,36 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {LocationSelect} from '../location/select/location-select';
 import {LocationService} from '../location/location-service';
 import {Location} from '../location/Location'
 import {ConfigService} from '../config.service';
-import {config} from 'rxjs';
 import {FormsModule} from '@angular/forms';
+import {Checkbox} from '../shared/checkbox/checkbox';
+import {MenuService} from '../menu-service';
 
 @Component({
   selector: 'app-settings-component',
   imports: [
     LocationSelect,
-    FormsModule
+    FormsModule,
+    Checkbox
   ],
   templateUrl: './settings-component.html',
   styleUrl: './settings-component.less',
 })
-export class SettingsComponent {
+export class SettingsComponent implements OnInit {
 
   protected location: Location | null = null;
 
   constructor(
     readonly locationService: LocationService,
     readonly configService: ConfigService,
+    readonly menuService: MenuService,
   ) {
     //
   }
 
-  protected readonly config = config;
+  ngOnInit(): void {
+    this.menuService.title = "Einstellungen";
+  }
+
 }

src/main/angular/src/app/shared/checkbox/checkbox.html

@@ -0,0 +1,12 @@
+<div class="all" (click)="onChange.emit(!initial)">
+  <div class="box">
+    @if (initial) {
+      <div class="inside">
+        &nbsp;
+      </div>
+    }
+  </div>
+  <div class="label">
+    {{ label }}
+  </div>
+</div>

src/main/angular/src/app/shared/checkbox/checkbox.less

@@ -0,0 +1,21 @@
+.all {
+  display: flex;
+
+  .box {
+    height: 1em;
+    aspect-ratio: 1;
+    border: 1px solid lightgray;
+    padding: 0.1em;
+    margin: 0.2em 0.2em 0.2em 0;
+
+    .inside {
+      width: 100%;
+      height: 100%;
+      background-color: steelblue;
+    }
+  }
+
+  .label {
+    flex: 1;
+  }
+}

src/main/angular/src/app/shared/checkbox/checkbox.ts

@@ -0,0 +1,20 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'app-checkbox',
+  imports: [],
+  templateUrl: './checkbox.html',
+  styleUrl: './checkbox.less',
+})
+export class Checkbox {
+
+  @Input()
+  initial: boolean = false;
+
+  @Input()
+  label: string = "";
+
+  @Output()
+  readonly onChange: EventEmitter<boolean> = new EventEmitter();
+
+}