Save divider position to user settings

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>

src/app/app.component.ts

@@ -137,6 +137,11 @@
       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,
     ]),
@@ -156,12 +161,12 @@
     const addAccessCode = this.route.snapshot.params['accesscode'];
     if (addAccessCode) {
       this.userService.addAccessCode(addAccessCode).subscribe({
         next: (_s: ServerResponse) => {
           this.accesscodes.push(addAccessCode);
           this.setAccessCode(addAccessCode);
           this.doHomeAccessCode(addAccessCode);
         },
         error: (_s: ServerResponse) => {
           // failure
           this.doHomeAccessCodeError(addAccessCode);
         },
@@ -273,12 +278,14 @@
           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;
         },
@@ -348,7 +355,7 @@
 
   public doSaveSettings() {
     this.settingsService.update(this.settingsForm.value).subscribe({
       next: (_s: ServerResponse) => {
         this.settingsModalOpened = false;
         const theme: 'light' | 'dark' | 'system' =
           this.settingsForm.controls['theme'].value;
@@ -367,7 +374,7 @@
           }
         }
       },
       error: (_s: ServerResponse) => {
         setTimeout(() => (this.settingsModalOpened = false), 2000);
       },
     });

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">

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() {
+    const dividerSize = this.divider.getVisibleAreaSizes()[0];
+    let dividerSizeNumber = this.DEFAULT_DIVIDER_POSITION; // Default is 40% content, 60% terminal
+    if (dividerSize != '*') {
+      dividerSizeNumber = dividerSize;
+    }
+    const dividerPosition = Math.round(dividerSizeNumber);
+
+    this.settingsService
+      .update({ divider_position: dividerPosition })
+      .subscribe();
+  }
+
+  setContentDividerPosition(percentage: number) {
+    const dividerPositions = [percentage, 100 - percentage];
+    this.divider.setVisibleAreaSizes(dividerPositions);
+    this.resizeTerminals();
+  }
 }

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) => {