diff --git a/src/ui/projects/action-track-pi/src/app/app.component.html b/src/ui/projects/action-track-pi/src/app/app.component.html index a1b7fe6..31a0465 100644 --- a/src/ui/projects/action-track-pi/src/app/app.component.html +++ b/src/ui/projects/action-track-pi/src/app/app.component.html @@ -17,5 +17,22 @@ [context]="context" [isAuthenticated]="isKimaiAuthenticated" > + +
+ +
+
Debug info
+ + +
+ + diff --git a/src/ui/projects/action-track-pi/src/app/app.component.ts b/src/ui/projects/action-track-pi/src/app/app.component.ts index 163bf73..077fa1d 100644 --- a/src/ui/projects/action-track-pi/src/app/app.component.ts +++ b/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) => { diff --git a/src/ui/projects/action-track-pi/src/app/debug/debug.component.ts b/src/ui/projects/action-track-pi/src/app/debug/debug.component.ts new file mode 100644 index 0000000..2870821 --- /dev/null +++ b/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: ``, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DebugComponent { + public readonly store = inject(STORE); +} diff --git a/src/ui/projects/action-track-pi/src/app/debug/json-list.component.ts b/src/ui/projects/action-track-pi/src/app/debug/json-list.component.ts new file mode 100644 index 0000000..0bbf2a1 --- /dev/null +++ b/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: ` + + + + + + + (redacted) + + {{ data }} + + + + + (hidden) + `, + 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; +}