From e38a59c33b02f2822ee7f1fda25ea6bbeae488db Mon Sep 17 00:00:00 2001
From: Jan-Gerrit Goebel <Jan-Gerrit.Goebel@sva.de>
Date: Thu, 11 Jan 2024 14:10:31 +0100
Subject: [PATCH 1/2] Save divider position to user settings

---
 src/app/app.component.html           | 20 ++++++++++++++++
 src/app/app.component.ts             |  7 ++++++
 src/app/scenario/step.component.html |  7 +++++-
 src/app/scenario/step.component.ts   | 36 ++++++++++++++++++++++++++++
 src/app/services/settings.service.ts |  2 ++
 5 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4203b3a9..52feac3f 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -284,6 +284,26 @@ <h3 class="modal-title">Settings</h3>
                     />
                   </clr-checkbox-wrapper>
                 </clr-checkbox-container>
+                <clr-input-container>
+                  <label class="clr-col-md-4">Divider Position</label>
+                  <input
+                    class="clr-col-md-8"
+                    clrInput
+                    type="number"
+                    required
+                    name="divider_position"
+                    formControlName="divider_position"
+                  />
+                  <clr-control-error *clrIfError="'required'"
+                    >Divider Position required.</clr-control-error
+                  >
+                  <clr-control-error *clrIfError="'min'"
+                    >Divider Position minimum is 0.</clr-control-error
+                  >
+                  <clr-control-error *clrIfError="'max'"
+                    >Divider Position maximum is 100.</clr-control-error
+                  >
+                </clr-input-container>
               </clr-tab-content>
             </clr-tab>
             <clr-tab>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d9100083..558c703d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -137,6 +137,11 @@ export class AppComponent implements OnInit {
       Validators.required,
     ]),
     ctr_enabled: new FormControl<boolean>(false),
+    divider_position: new FormControl<number | null>(null, [
+      Validators.required,
+      Validators.max(100),
+      Validators.min(0),
+    ]),
     theme: new FormControl<'light' | 'dark' | 'system' | null>(null, [
       Validators.required,
     ]),
@@ -273,12 +278,14 @@ export class AppComponent implements OnInit {
           terminal_fontSize = 16,
           ctr_enabled = true,
           theme = 'light',
+          divider_position = 40,
         }) => {
           this.settingsForm.setValue({
             terminal_theme,
             terminal_fontSize,
             ctr_enabled,
             theme,
+            divider_position,
           });
           this.fetchingSettings = false;
         },
diff --git a/src/app/scenario/step.component.html b/src/app/scenario/step.component.html
index d4d5c72e..aa283144 100644
--- a/src/app/scenario/step.component.html
+++ b/src/app/scenario/step.component.html
@@ -1,5 +1,10 @@
 <div class="split-container">
-  <as-split unit="percent" direction="horizontal" (dragEnd)="dragEnd()">
+  <as-split
+    unit="percent"
+    direction="horizontal"
+    (dragEnd)="dragEnd()"
+    #divider
+  >
     <as-split-area [size]="40" class="split-area-1">
       <div class="card" id="sidebar">
         <div class="card-header">
diff --git a/src/app/scenario/step.component.ts b/src/app/scenario/step.component.ts
index 7774a239..5f40b3fc 100644
--- a/src/app/scenario/step.component.ts
+++ b/src/app/scenario/step.component.ts
@@ -44,6 +44,8 @@ import { ProgressService } from '../services/progress.service';
 import { HfMarkdownRenderContext } from '../hf-markdown/hf-markdown.component';
 import { GuacTerminalComponent } from './guacTerminal.component';
 import { JwtHelperService } from '@auth0/angular-jwt';
+import { SplitComponent } from 'angular-split';
+import { SettingsService } from '../services/settings.service';
 
 type Service = {
   name: string;
@@ -100,6 +102,8 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
   public reloadTabObservable: Observable<webinterfaceTabIdentifier> =
     this.reloadTabSubject.asObservable();
 
+  private DEFAULT_DIVIDER_POSITION = 40;
+
   @ViewChildren('term') private terms: QueryList<TerminalComponent> =
     new QueryList();
   @ViewChildren('guacterm')
@@ -109,6 +113,7 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChildren('tab') private tabs: QueryList<ClrTab> = new QueryList();
   @ViewChild('pausemodal', { static: true }) private pauseModal: ClrModal;
   @ViewChild('contentdiv', { static: false }) private contentDiv: ElementRef;
+  @ViewChild('divider', { static: true }) divider: SplitComponent;
 
   constructor(
     private route: ActivatedRoute,
@@ -122,6 +127,7 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
     private shellService: ShellService,
     private progressService: ProgressService,
     private jwtHelper: JwtHelperService,
+    private settingsService: SettingsService,
   ) {}
 
   setTabActive(webinterface: Service, vmName: string) {
@@ -287,6 +293,12 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
     this.shellService.watch().subscribe((ss: Map<string, string>) => {
       this.shellStatus = ss;
     });
+
+    this.settingsService.settings$.subscribe(
+      ({ divider_position = this.DEFAULT_DIVIDER_POSITION }) => {
+        this.setContentDividerPosition(divider_position);
+      },
+    );
   }
 
   ngAfterViewInit() {
@@ -410,6 +422,11 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   public dragEnd() {
+    this.resizeTerminals();
+    this.saveContentDivider();
+  }
+
+  resizeTerminals() {
     let numberOfGuacTabs = 0;
     let numberOfTermTabs = 0;
     const vmArray: VM[] = [...this.vms.values()];
@@ -493,4 +510,23 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
       }
     }
   }
+
+  saveContentDivider() {
+    let dividerSize = this.divider.getVisibleAreaSizes()[0];
+    let dividerSizeNumber = this.DEFAULT_DIVIDER_POSITION; // Default is 40% content, 60% terminal
+    if (dividerSize != '*') {
+      dividerSizeNumber = dividerSize;
+    }
+    let dividerPosition = Math.round(dividerSizeNumber);
+
+    this.settingsService
+      .update({ divider_position: dividerPosition })
+      .subscribe();
+  }
+
+  setContentDividerPosition(percentage: number) {
+    let dividerPositions = [percentage, 100 - percentage];
+    this.divider.setVisibleAreaSizes(dividerPositions);
+    this.resizeTerminals();
+  }
 }
diff --git a/src/app/services/settings.service.ts b/src/app/services/settings.service.ts
index 63632e1e..a3023e63 100644
--- a/src/app/services/settings.service.ts
+++ b/src/app/services/settings.service.ts
@@ -21,6 +21,7 @@ export interface Settings {
   ctr_enabled: boolean;
   ctxAccessCode: string;
   theme: 'light' | 'dark' | 'system';
+  divider_position: number;
 }
 
 @Injectable()
@@ -43,6 +44,7 @@ export class SettingsService {
               ctr_enabled: true,
               ctxAccessCode: '',
               theme: 'light',
+              divider_position: 40,
             } as Settings),
       ),
       tap((s: Settings) => {

From dfb271b9b8839dc5f297504898d91d127b073763 Mon Sep 17 00:00:00 2001
From: Jan-Gerrit Goebel <Jan-Gerrit.Goebel@sva.de>
Date: Thu, 11 Jan 2024 14:13:50 +0100
Subject: [PATCH 2/2] use const instead of let

---
 src/app/scenario/step.component.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/scenario/step.component.ts b/src/app/scenario/step.component.ts
index 5f40b3fc..a07bd04a 100644
--- a/src/app/scenario/step.component.ts
+++ b/src/app/scenario/step.component.ts
@@ -512,12 +512,12 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   saveContentDivider() {
-    let dividerSize = this.divider.getVisibleAreaSizes()[0];
+    const dividerSize = this.divider.getVisibleAreaSizes()[0];
     let dividerSizeNumber = this.DEFAULT_DIVIDER_POSITION; // Default is 40% content, 60% terminal
     if (dividerSize != '*') {
       dividerSizeNumber = dividerSize;
     }
-    let dividerPosition = Math.round(dividerSizeNumber);
+    const dividerPosition = Math.round(dividerSizeNumber);
 
     this.settingsService
       .update({ divider_position: dividerPosition })
@@ -525,7 +525,7 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   setContentDividerPosition(percentage: number) {
-    let dividerPositions = [percentage, 100 - percentage];
+    const dividerPositions = [percentage, 100 - percentage];
     this.divider.setVisibleAreaSizes(dividerPositions);
     this.resizeTerminals();
   }