Add debug information

src/ui/projects/action-track-pi/src/app/app.component.html

@@ -17,5 +17,22 @@
       [context]="context"
       [isAuthenticated]="isKimaiAuthenticated"
     ></app-kimai>
+
+    <hr />
+
+    <div type="checkbox" class="sdpi-item">
+      <div class="sdpi-item-label">Debug info</div>
+      <input
+        class="sdpi-item-value"
+        [formControl]="debugFC"
+        id="debug"
+        type="checkbox"
+        value="on"
+        (change)="cdr.detectChanges()"
+      />
+      <label for="debug"><span></span>enable</label>
+    </div>
+
+    <app-debug *ngIf="debugFC.value === true"></app-debug>
   </div>
 </ng-container>

src/ui/projects/action-track-pi/src/app/app.component.ts

@@ -3,10 +3,9 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ViewChild,
   inject,
 } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import {
   AuthenticationState,
   StateKey,
@@ -16,6 +15,7 @@ import {
   SDConnectionInfo,
 } from '../../../../../js/src/lib/types';
 import { CONTEXT, STORE } from './app.config';
+import { DebugComponent } from './debug/debug.component';
 import { KimaiComponent } from './kimai/kimai.component';
 
 export const DEFAULT_SETTINGS: PluginSettings = {
@@ -30,16 +30,18 @@ export const DEFAULT_SETTINGS: PluginSettings = {
   selector: 'app-root',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, KimaiComponent],
+  imports: [CommonModule, ReactiveFormsModule, KimaiComponent, DebugComponent],
   templateUrl: './app.component.html',
 })
 export class AppComponent {
   private readonly store = inject(STORE);
-  private readonly cdr = inject(ChangeDetectorRef);
+  public readonly cdr = inject(ChangeDetectorRef);
   public readonly context$ = inject(CONTEXT);
 
   public isKimaiAuthenticated = false;
 
+  public debugFC = new FormControl(false);
+
   constructor() {
     $PI.onConnected((connectionInfo: SDConnectionInfo) => {
       console.log('$PI.onConnected(connectionInfo)', { connectionInfo });
@@ -60,6 +62,7 @@ export class AppComponent {
         };
         console.log('$PI.onDidReceiveSettings', settings);
         this.store.patchState({ [StateKey.settings]: settings });
+        this.cdr.detectChanges();
       });
 
       $PI.onDidReceiveGlobalSettings(({ payload: { settings } }: any) => {

src/ui/projects/action-track-pi/src/app/debug/debug.component.ts

@@ -0,0 +1,15 @@
+import { JsonListComponent } from './json-list.component';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { STORE } from '../app.config';
+import { AsyncPipe, JsonPipe } from '@angular/common';
+
+@Component({
+  selector: 'app-debug',
+  standalone: true,
+  imports: [JsonListComponent, AsyncPipe],
+  template: `<app-jsonlist [data]="store.state$ | async"></app-jsonlist>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DebugComponent {
+  public readonly store = inject(STORE);
+}

src/ui/projects/action-track-pi/src/app/debug/json-list.component.ts

@@ -0,0 +1,57 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'type',
+  standalone: true,
+})
+export class TypePipe implements PipeTransform {
+  transform(value: any): string {
+    return typeof value;
+  }
+}
+
+@Component({
+  selector: 'app-jsonlist',
+  standalone: true,
+  imports: [CommonModule, TypePipe],
+  template: `
+    <ng-container [ngSwitch]="data | type">
+      <ng-container *ngSwitchCase="'object'">
+        <ul>
+          <li *ngFor="let item of data | keyvalue">
+            <span>{{ item.key }}:</span>
+            <app-jsonlist
+              *ngIf="item.key !== 'externalWindow'; else hidden"
+              [data]="item.value"
+              [key]="item.key"
+            ></app-jsonlist>
+          </li>
+        </ul>
+      </ng-container>
+      <ng-container *ngSwitchDefault>
+        <ng-container [ngSwitch]="key">
+          <ng-container *ngSwitchCase="'token'"> (redacted)</ng-container>
+          <ng-container *ngSwitchDefault>
+            <strong> {{ data }}</strong>
+          </ng-container>
+        </ng-container>
+      </ng-container>
+    </ng-container>
+    <ng-template #hidden> (hidden)</ng-template>
+  `,
+  styles: [
+    'ul { max-height: max-content!important; overflow: auto!important; margin: 0 !important; padding-left: 1.3em !important; }',
+    'li { background-color: transparent !important; }',
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class JsonListComponent {
+  @Input()
+  public data: any;
+
+  @Input()
+  public key: any;
+}