replaced toggle-component by template to use full cell for clicking

src/main/angular/src/app/app.component.less

@@ -8,7 +8,7 @@
   }
 
   .itemActive {
-    background-color: palegreen;
+    background-color: lightblue;
   }
 
 }

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

@@ -7,7 +7,6 @@ import {HttpClientModule} from "@angular/common/http";
 import {FormsModule} from "@angular/forms";
 import {EditFieldComponent} from './shared/edit-field/edit-field.component';
 import {ScheduleListComponent} from './pages/schedule-list/schedule-list.component';
-import {ToggleSwitchComponent} from './shared/toggle-switch/toggle-switch.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {NumberComponent} from './shared/number/number.component';
 
@@ -16,7 +15,6 @@ import {NumberComponent} from './shared/number/number.component';
     AppComponent,
     EditFieldComponent,
     ScheduleListComponent,
-    ToggleSwitchComponent,
     NumberComponent,
   ],
   imports: [

src/main/angular/src/app/pages/schedule-list/schedule-list.component.html

@@ -1,19 +1,21 @@
+<ng-template #boolean let-schedule="schedule" let-entry="entry" let-value="value" let-key="key">
+  <td class="boolean" (click)="set(schedule, entry, key, !value)" [class.true]="value" [class.false]="!value">
+    <fa-icon *ngIf="value" [icon]="faCheck"></fa-icon>
+    <fa-icon *ngIf="!value" [icon]="faTimes"></fa-icon>
+  </td>
+</ng-template>
+
 <table>
   <ng-container *ngFor="let schedule of schedules; let first = first; trackBy: Schedule.trackBy">
-
     <tr *ngIf="!first" class="blank">
-      <td colspan="22">&nbsp;</td>
+      <td colspan="21">&nbsp;</td>
     </tr>
-
-    <tr class="blank">
-      <td class="boolean">
-        <app-toggle-switch [initial]="schedule.enabled" (onChange)="scheduleUpdate(schedule, 'enabled', $event)"></app-toggle-switch>
-      </td>
+    <tr class="header">
+      <ng-container *ngTemplateOutlet="boolean;context:{schedule: schedule, value: schedule.enabled, key:'enabled'}"></ng-container>
       <td colspan="20">{{schedule.name}}</td>
     </tr>
-
-    <tr>
-      <th></th>
+    <tr [class.disabled]="!schedule.enabled">
+      <th>&nbsp;</th>
       <th>Mo</th>
       <th>Di</th>
       <th>Mi</th>
@@ -27,35 +29,18 @@
       <th>Unschärfe</th>
       <th colspan="6">Nächste Ausführung</th>
     </tr>
-
     <tr *ngFor="let entry of schedule.entries" [class.disabled]="entry.nextClearTimestamp === null">
-      <td class="boolean">
-        <app-toggle-switch [initial]="entry.enabled" (onChange)="entryUpdate(schedule, entry, 'enabled', $event)"></app-toggle-switch>
-      </td>
-      <td class="boolean">
-        <app-toggle-switch [initial]="entry.monday" (onChange)="entryUpdate(schedule, entry, 'monday', $event)"></app-toggle-switch>
-      </td>
-      <td class="boolean">
-        <app-toggle-switch [initial]="entry.tuesday" (onChange)="entryUpdate(schedule, entry, 'tuesday', $event)"></app-toggle-switch>
-      </td>
-      <td class="boolean">
-        <app-toggle-switch [initial]="entry.wednesday" (onChange)="entryUpdate(schedule, entry, 'wednesday', $event)"></app-toggle-switch>
-      </td>
-      <td class="boolean">
-        <app-toggle-switch [initial]="entry.thursday" (onChange)="entryUpdate(schedule, entry, 'thursday', $event)"></app-toggle-switch>
-      </td>
-      <td class="boolean">
-        <app-toggle-switch [initial]="entry.friday" (onChange)="entryUpdate(schedule, entry, 'friday', $event)"></app-toggle-switch>
-      </td>
-      <td class="boolean">
-        <app-toggle-switch [initial]="entry.saturday" (onChange)="entryUpdate(schedule, entry, 'saturday', $event)"></app-toggle-switch>
-      </td>
-      <td class="boolean">
-        <app-toggle-switch [initial]="entry.sunday" (onChange)="entryUpdate(schedule, entry, 'sunday', $event)"></app-toggle-switch>
-      </td>
+      <ng-container *ngTemplateOutlet="boolean;context:{schedule: schedule, entry: entry, value: entry.enabled, key:'enabled'}"></ng-container>
+      <ng-container *ngTemplateOutlet="boolean;context:{schedule: schedule, entry: entry, value: entry.monday, key:'monday'}"></ng-container>
+      <ng-container *ngTemplateOutlet="boolean;context:{schedule: schedule, entry: entry, value: entry.tuesday, key:'tuesday'}"></ng-container>
+      <ng-container *ngTemplateOutlet="boolean;context:{schedule: schedule, entry: entry, value: entry.wednesday, key:'wednesday'}"></ng-container>
+      <ng-container *ngTemplateOutlet="boolean;context:{schedule: schedule, entry: entry, value: entry.thursday, key:'thursday'}"></ng-container>
+      <ng-container *ngTemplateOutlet="boolean;context:{schedule: schedule, entry: entry, value: entry.friday, key:'friday'}"></ng-container>
+      <ng-container *ngTemplateOutlet="boolean;context:{schedule: schedule, entry: entry, value: entry.saturday, key:'saturday'}"></ng-container>
+      <ng-container *ngTemplateOutlet="boolean;context:{schedule: schedule, entry: entry, value: entry.sunday, key:'sunday'}"></ng-container>
 
       <td>
-        <select [(ngModel)]="entry.type" (ngModelChange)="entryUpdate(schedule, entry, 'type', entry.type)">
+        <select [(ngModel)]="entry.type" (ngModelChange)="set(schedule, entry, 'type', entry.type)">
           <option value="TIME">Uhrzeit</option>
           <option value="SUNRISE">Sonnenaufgang</option>
           <option value="SUNSET">Sonnenuntergang</option>
@@ -64,7 +49,7 @@
 
       <ng-container *ngIf="entry.type === 'SUNRISE' || entry.type === 'SUNSET'">
         <td>
-          <select class="number" [(ngModel)]="entry.zenith" (ngModelChange)="entryUpdate(schedule, entry, 'zenith', entry.zenith)">
+          <select class="number" [(ngModel)]="entry.zenith" (ngModelChange)="set(schedule, entry, 'zenith', entry.zenith)">
             <option value="90.8333">
               <ng-container *ngIf="entry.type === 'SUNRISE'">Sonnenaufgang</ng-container>
               <ng-container *ngIf="entry.type === 'SUNSET'">Sonnenuntergang</ng-container>
@@ -83,13 +68,13 @@
 
       <ng-container *ngIf="entry.type === 'TIME'">
         <td class="first">
-          <select class="number" [(ngModel)]="entry.hour" (ngModelChange)="entryUpdate(schedule, entry, 'hour', entry.hour)">
+          <select class="number" [(ngModel)]="entry.hour" (ngModelChange)="set(schedule, entry, 'hour', entry.hour)">
             <option *ngFor="let _ of [].constructor(60); let value = index" [ngValue]="value">{{value}}</option>
           </select>
         </td>
         <td class="middle">:</td>
         <td class="last">
-          <select class="number" [(ngModel)]="entry.minute" (ngModelChange)="entryUpdate(schedule, entry, 'minute', entry.minute)">
+          <select class="number" [(ngModel)]="entry.minute" (ngModelChange)="set(schedule, entry, 'minute', entry.minute)">
             <option *ngFor="let _ of [].constructor(60); let value = index" [ngValue]="value">{{value | number:'2.0'}}</option>
           </select>
         </td>
@@ -97,7 +82,7 @@
       <td *ngIf="entry.type !== 'TIME'" colspan="3" class="empty"></td>
 
       <td>
-        <select class="number" [(ngModel)]="entry.fuzzySeconds" (ngModelChange)="entryUpdate(schedule, entry, 'fuzzySeconds', entry.fuzzySeconds)">
+        <select class="number" [(ngModel)]="entry.fuzzySeconds" (ngModelChange)="set(schedule, entry, 'fuzzySeconds', entry.fuzzySeconds)">
           <option [ngValue]="0">Keine</option>
           <option [ngValue]="60">1 Minute</option>
           <option [ngValue]="300">5 Minuten</option>

src/main/angular/src/app/pages/schedule-list/schedule-list.component.less

@@ -1,4 +1,3 @@
-
 select {
   background-color: transparent;
   border-width: 0;
@@ -7,14 +6,24 @@ select {
   font-family: monospace;
 }
 
+th {
+  background-color: lightblue;
+}
+
 tr.blank {
+
   th, td {
     border: none;
   }
+
+}
+
+tr.header {
+
+  th:not(:first-child), td:not(:first-child) {
+    border: none;
   }
 
-th {
-  background-color: palegreen;
 }
 
 .empty {
@@ -27,6 +36,14 @@ th {
   text-align: center;
 }
 
+.true {
+  background-color: palegreen;
+}
+
+.false {
+  background-color: indianred;
+}
+
 .number {
   text-align: right;
 }

src/main/angular/src/app/pages/schedule-list/schedule-list.component.ts

@@ -3,6 +3,7 @@ import {ScheduleService} from "../../api/schedule/schedule.service";
 import {Schedule} from "../../api/schedule/Schedule";
 import {ScheduleEntry} from "../../api/schedule/entry/ScheduleEntry";
 import {ScheduleEntryService} from "../../api/schedule/entry/schedule-entry.service";
+import {faCheck, faTimes} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-schedule-list',
@@ -11,6 +12,8 @@ import {ScheduleEntryService} from "../../api/schedule/entry/schedule-entry.serv
 })
 export class ScheduleListComponent implements OnInit {
 
+  readonly faCheck = faCheck;
+  readonly faTimes = faTimes;
   readonly Schedule = Schedule;
 
   schedules: Schedule[] = [];
@@ -26,12 +29,12 @@ export class ScheduleListComponent implements OnInit {
     this.scheduleService.findAll(schedules => this.schedules = schedules, Schedule.compareName);
   }
 
-  scheduleUpdate(schedule: Schedule, key: string, value: any): void {
+  set(schedule: Schedule, entry: ScheduleEntry, key: string, value: any): void {
+    if (entry) {
+      this.scheduleEntryService.set(entry, key, value, entry => this.updateEntry(schedule, entry));
+    } else {
       this.scheduleService.set(schedule, key, value, schedule => this.updateSchedule(schedule));
     }
-
-  entryUpdate(schedule: Schedule, entry: ScheduleEntry, key: string, value: any): void {
-    this.scheduleEntryService.set(entry, key, value, entry => this.updateEntry(schedule, entry));
   }
 
   private updateSchedule(schedule: Schedule): void {

src/main/angular/src/app/shared/toggle-switch/toggle-switch.component.html

@@ -1,2 +0,0 @@
-<fa-icon [icon]="faCheck" *ngIf="initial" (click)="toggle()"></fa-icon>
-<fa-icon [icon]="faTimes" *ngIf="!initial" (click)="toggle()"></fa-icon>

src/main/angular/src/app/shared/toggle-switch/toggle-switch.component.spec.ts

@@ -1,25 +0,0 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {ToggleSwitchComponent} from './toggle-switch.component';
-
-describe('ToggleSwitchComponent', () => {
-  let component: ToggleSwitchComponent;
-  let fixture: ComponentFixture<ToggleSwitchComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ToggleSwitchComponent]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ToggleSwitchComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/main/angular/src/app/shared/toggle-switch/toggle-switch.component.ts

@@ -1,40 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-
-import {faCheck, faTimes} from '@fortawesome/free-solid-svg-icons';
-
-@Component({
-  selector: 'app-toggle-switch',
-  templateUrl: './toggle-switch.component.html',
-  styleUrls: ['./toggle-switch.component.less']
-})
-export class ToggleSwitchComponent implements OnInit {
-
-  faCheck = faCheck;
-  faTimes = faTimes;
-
-  @Input()
-  initial!: boolean;
-
-  @Input()
-  active: string = "Aktiv";
-
-  @Input()
-  inactive: string = "Inaktiv";
-
-  @Output()
-  onChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-  value!: boolean;
-
-  constructor() {
-  }
-
-  ngOnInit(): void {
-    this.value = this.initial;
-  }
-
-  toggle(): void {
-    this.onChange.emit(!this.initial);
-  }
-
-}