feat(frontend): added button to toggle - wip

unitopia-de · Aug 13, 2024 · bc693e4 · bc693e4
1 parent 0e41d46
commit bc693e4
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 47 deletions.
diff --git a/frontend/src/app/core/mud/components/mud-output/mud-output.component.ts b/frontend/src/app/core/mud/components/mud-output/mud-output.component.ts
@@ -3,7 +3,10 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
+  EventEmitter,
   Input,
+  OnDestroy,
+  Output,
   ViewChild,
 } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -15,13 +18,18 @@ import { IMudMessage } from '../../types/mud-message';
   templateUrl: './mud-output.component.html',
   styleUrls: ['./mud-output.component.scss'],
 })
-export class MudOutputComponent implements AfterViewChecked, AfterViewInit {
+export class MudOutputComponent
+  implements AfterViewChecked, AfterViewInit, OnDestroy
+{
+  ngOnDestroy(): void {
+    console.log('DESTROY!');
+  }
   private readonly linesSubject = new BehaviorSubject<IMudMessage[]>([]);
 
-  private canScrollToBottom = true;
+  private isScrollAtBottom = true;
 
-  @ViewChild('container', { static: true })
-  private readonly outputContainer!: ElementRef<HTMLDivElement>;
+  @ViewChild('container', { static: false })
+  private readonly outputContainer?: ElementRef<HTMLDivElement>;
 
   protected readonly lines$: Observable<IMudMessage[]> =
     this.linesSubject.asObservable();
@@ -47,16 +55,21 @@ export class MudOutputComponent implements AfterViewChecked, AfterViewInit {
   @Input({ required: false })
   public autoScroll: boolean = false;
 
+  @Output()
+  public readonly onScrolled = new EventEmitter<boolean>();
+
   public ngAfterViewChecked() {
-    if (this.canScrollToBottom && this.autoScroll) {
+    if (this.isScrollAtBottom && this.autoScroll) {
       this.scrollToBottom();
     }
   }
 
   public ngAfterViewInit(): void {
-    this.outputContainer.nativeElement.onscroll = (event: Event) => {
-      this.onScroll(event);
-    };
+    if (this.outputContainer?.nativeElement !== undefined) {
+      this.outputContainer.nativeElement.onscroll = (event: Event) => {
+        this.onScroll(event);
+      };
+    }
   }
 
   private onScroll(event: Event): void {
@@ -67,11 +80,15 @@ export class MudOutputComponent implements AfterViewChecked, AfterViewInit {
         element.scrollHeight - element.scrollTop - element.clientHeight,
       ) <= tolerance;
 
-    this.canScrollToBottom = atBottom;
+    this.onScrolled.emit(atBottom);
+
+    this.isScrollAtBottom = atBottom;
   }
 
-  private scrollToBottom(): void {
-    this.outputContainer.nativeElement.scrollTop =
-      this.outputContainer.nativeElement.scrollHeight;
+  public scrollToBottom(): void {
+    if (this.outputContainer?.nativeElement !== undefined) {
+      this.outputContainer.nativeElement.scrollTop =
+        this.outputContainer.nativeElement.scrollHeight;
+    }
   }
 }
diff --git a/frontend/src/app/core/mud/mud-client/mud-client.component.html b/frontend/src/app/core/mud/mud-client/mud-client.component.html
@@ -1,42 +1,63 @@
-<p-splitter
-  layout="vertical"
-  [style]="{ flex: '0 1 100%', overflow: 'hidden' }"
-  [panelStyle]="{ overflow: 'hidden' }"
->
-  <ng-template pTemplate>
-    <app-mud-output
-      id="test"
-      *ngIf="this.output$ | async as lines"
-      [lines]="lines"
-      [foregroundColor]="this.v.stdfg"
-      [backgroundColor]="this.v.stdbg"
-      [shallScroll]="true"
-    ></app-mud-output>
-  </ng-template>
-  <ng-template pTemplate>
+<ng-container *ngIf="this.mode$ | async as mode">
+  <p-splitter
+    *ngIf="mode === 'split'; else singleMode"
+    layout="vertical"
+    [style]="{ flex: '0 1 100%', overflow: 'hidden' }"
+    [panelStyle]="{ overflow: 'hidden' }"
+    [panelSizes]="[85, 15]"
+  >
+    <ng-template pTemplate>
+      <app-mud-output
+        id="test"
+        *ngIf="this.output$ | async as lines"
+        [lines]="lines"
+        [foregroundColor]="this.v.stdfg"
+        [backgroundColor]="this.v.stdbg"
+        [shallScroll]="true"
+      ></app-mud-output>
+    </ng-template>
+    <ng-template pTemplate>
+      <app-mud-output
+        #mainOutputSplit
+        *ngIf="this.output$ | async as lines"
+        [lines]="lines"
+        [foregroundColor]="this.v.stdfg"
+        [backgroundColor]="this.v.stdbg"
+        [autoScroll]="true"
+      ></app-mud-output>
+    </ng-template>
+  </p-splitter>
+
+  <ng-template #singleMode>
     <app-mud-output
       *ngIf="this.output$ | async as lines"
       [lines]="lines"
       [foregroundColor]="this.v.stdfg"
       [backgroundColor]="this.v.stdbg"
       [autoScroll]="true"
+      [shallScroll]="true"
     ></app-mud-output>
   </ng-template>
-</p-splitter>
 
-<ng-container *ngIf="this.isConnected$ | async; else disconnected">
-  <app-mud-input
-    [mode]="(this.showEcho$ | async) ? 'text' : 'password'"
-    (messageSent)="onInputReceived($event)"
-  ></app-mud-input>
-</ng-container>
+  <ng-container *ngIf="this.isConnected$ | async; else disconnected">
+    <div style="display: flex; align-items: center">
+      <app-mud-input
+        [mode]="(this.showEcho$ | async) ? 'text' : 'password'"
+        (messageSent)="onInputReceived($event)"
+        [style]="{ flex: '1 1 auto' }"
+      ></app-mud-input>
+      <p-button
+        [style]="{ flex: '0 1 auto' }"
+        [label]="mode === 'normal' ? 'split' : 'unsplit'"
+        (click)="this.onSplitToggle()"
+      ></p-button>
+    </div>
+  </ng-container>
 
-<ng-template #disconnected>
-  <div id="disconnected-panel">
-    <p>Disconnected!</p>
-    <p-button label="reconnect" (click)="this.onConnectClicked()"></p-button>
-  </div>
-</ng-template>
-
-<!--<p-divider layout="vertical"></p-divider>
-  <app-inventory [inv]="invlist" [vheight]="v.ref_height"></app-inventory>-->
+  <ng-template #disconnected>
+    <div id="disconnected-panel">
+      <p>Disconnected!</p>
+      <p-button label="reconnect" (click)="this.onConnectClicked()"></p-button>
+    </div>
+  </ng-template>
+</ng-container>
diff --git a/frontend/src/app/core/mud/mud-client/mud-client.component.scss b/frontend/src/app/core/mud/mud-client/mud-client.component.scss
@@ -35,6 +35,11 @@
 
   app-mud-output {
     flex: 1 1 100%;
+    overflow: hidden;
+
+    &#test {
+      flex: 1 1 0%;
+    }
   }
 
   app-mud-input {

diff --git a/frontend/src/app/core/mud/mud-client/mud-client.component.ts b/frontend/src/app/core/mud/mud-client/mud-client.component.ts
@@ -1,25 +1,38 @@
-import { Component, HostListener, ViewChild } from '@angular/core';
-import { Observable } from 'rxjs';
+import {
+  AfterViewChecked,
+  Component,
+  HostListener,
+  ViewChild,
+} from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 import { MudInputComponent } from '../components/mud-input/mud-input.component';
 import { MudService } from '../mud.service';
 import { IMudMessage } from '../types/mud-message';
 import { isSecureString, SecureString } from '@mudlet3/frontend/shared';
+import { MudOutputComponent } from 'src/app/core/mud/components/mud-output/mud-output.component';
 
 @Component({
   selector: 'app-mud-client',
   templateUrl: './mud-client.component.html',
   styleUrls: ['./mud-client.component.scss'],
 })
-export class MudclientComponent {
+export class MudclientComponent implements AfterViewChecked {
+  private readonly mode = new BehaviorSubject<'normal' | 'split'>('normal');
+
   protected readonly output$: Observable<IMudMessage[]>;
 
   protected readonly isConnected$: Observable<boolean>;
   protected readonly showEcho$: Observable<boolean>;
 
+  protected readonly mode$ = this.mode.asObservable();
+
   @ViewChild(MudInputComponent, { static: false })
   private mudInputComponent?: MudInputComponent;
 
+  @ViewChild('mainOutputSplit', { static: false })
+  private mudOutputComponent?: MudOutputComponent;
+
   public v = {
     // scrollLock: true,
     // sizeCalculated: false,
@@ -52,6 +65,12 @@ export class MudclientComponent {
 
     this.mudService.connect();
 
+    // this.mode$.subscribe((mode) => {
+    //   if (mode === 'split') {
+    //     this.mudOutputComponent?.scrollToBottom();
+    //   }
+    // });
+
     // this.invlist = new InventoryList();
 
     // Todo[myst]: Herausfinden, was der cookieService alles unter 'mudcolors' gespeichert hat
@@ -67,11 +86,20 @@ export class MudclientComponent {
     //   this.v.stdbg = 'black';
     // }
   }
+  ngAfterViewChecked(): void {
+    if (this.mode.value === 'split') {
+      this.mudOutputComponent?.scrollToBottom();
+    }
+  }
 
   // protected onDisconnectClicked() {
   //   this.mudService.disconnect();
   // }
 
+  protected onSplitToggle() {
+    this.mode.next(this.mode.value === 'normal' ? 'split' : 'normal');
+  }
+
   protected onConnectClicked() {
     this.mudService.connect();
   }