add a settings option to switch between menus and tabs

src/app/app.component.html

@@ -17,6 +17,7 @@
         <mat-toolbar color="primary">
             <div fxLayout="row" style="width: 100%">
               <mat-toolbar-row style="width: 100%">
+                    <button mat-icon-button aria-label="toggle menu" (click)=toggleMenu()><mat-icon>menu</mat-icon></button>
                     <img src="assets/MASSIVElogoTransparent128x128.png" style="width: auto; height: 90%">
                     <span>Strudel2</span>
                     <span fxFlex></span>

src/app/app.component.ts

@@ -6,6 +6,7 @@ import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import { MatSnackBar } from '@angular/material';
 import {OverlayContainer} from '@angular/cdk/overlay';
 import { Computesite, Health } from './computesite';
+import {SettingsService } from './settings.service';
 
 
 
@@ -27,6 +28,7 @@ export class AppComponent {
   constructor(private tesService: TesService,
               private authService: AuthorisationService,
               private computesitesService: ComputesitesService,
+              private settingsService: SettingsService,
               public snackBar: MatSnackBar) {
 
    };
@@ -39,10 +41,18 @@ export class AppComponent {
     this.computesitesService.setStatusMsg(this.statusMsg);
     this.authService.setStatusMsg(this.statusMsg);
     this.statusMsg.subscribe(msg => this.displayMessage(msg));
-    this.setTheme()
+    this.settingsService.theme$.subscribe((v) => this.setTheme(v))
 
   }
 
+  toggleMenu() {
+    if (this.settingsService.menuToggle$.value == true) {
+      this.settingsService.menuToggle$.next(false);
+      return
+    }
+    this.settingsService.menuToggle$.next(true);
+  }
+
 
   private displayMessage(msg) {
    if (msg === null || msg == "") {
@@ -53,9 +63,7 @@ export class AppComponent {
      this.snackBarRef = this.snackBar.open(msg,'Dismiss');
    }
  }
-  setTheme()  {
-    var theme;
-    theme=localStorage.getItem('strudel-theme');
+  setTheme(theme: string)  {
     if (theme == null) {
       theme = 'strudel-theme-light';
     }

src/app/app.module.ts

@@ -55,6 +55,7 @@ import { LoginComponent } from './login/login.component';
 import { SettingsComponent } from './settings/settings.component';
 import { LogoutComponent } from './logout/logout.component';
 import { AccountinfoComponent } from './accountinfo/accountinfo.component';
+import {SettingsService } from './settings.service';
 
 // import { FileExplorerModule } from './file-explorer/file-explorer.module';
 
@@ -116,7 +117,7 @@ import { AccountinfoComponent } from './accountinfo/accountinfo.component';
 
   ],
     entryComponents: [ LogoutdialogComponent, ModaldialogComponent],
-  providers: [ StrudelappsService, ComputesitesService, TesService, SubmitAppService, MatDialog, AuthorisationService,BackendSelectionService],
+  providers: [ StrudelappsService, ComputesitesService, TesService, SubmitAppService, MatDialog, AuthorisationService,BackendSelectionService,SettingsService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/launcher/launcher.component.html

 <!--<div  fxFlex style="flex: 1 1 0%; box-sizing: border-box">-->
 <mat-sidenav-container style="height: 100%" autosize>
-  <mat-sidenav #idSideNav mode="side" opened>
-    <div *ngIf="usemenu">
+  <mat-sidenav #idSideNav mode="side" [opened]="(settingsService.menuToggle$ | async) && (settingsService.useMenu$ | async)">
         <div fxLayout="column" fxLayout="stretch" style="height: 100%">
             <nav>
             <mat-accordion style="width: 100%" [displayMode]="flat">
@@ -37,10 +36,9 @@
             </nav>
         </div>
         <div fxFlex></div>
-    </div>
   </mat-sidenav>
   <mat-sidenav-content style="height: 100%">
-<!--<div *ngIf="usetabs" class=darker-theme>
+    <div *ngIf="!(settingsService.useMenu$ | async)" class=darker-theme>
     <nav mat-tab-nav-bar color="accent" backgroundColor="primary">
     <a mat-tab-link
     *ngFor="let id of (computeSitesService.appidentities | async)"
@@ -75,7 +73,7 @@
         </a>
         </nav>
 </div>
-</div>-->
+</div>
 <div fxLayout="column" fxLayoutAlign="space-between stretch" style="width: 100%; height: 100%" >
 
         <div *ngIf="identitySubject | async as identity">

src/app/launcher/launcher.component.ts

@@ -22,6 +22,7 @@ import { LogoutdialogComponent } from '../logoutdialog/logoutdialog.component';
 import { SshAuthzServer } from '../identity';
 import { ComputesitesService } from '../computesites.service';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { SettingsService} from '../settings.service';
 
 
 
@@ -58,8 +59,6 @@ export class LauncherComponent implements OnInit {
   private identity$: Observable<Identity>;
   private app$: Observable<Strudelapp>;
   private app: Strudelapp;
-  private usetabs: boolean;
-  private usemenu: boolean;
 
 
   constructor( public dialog: MatDialog,
@@ -70,6 +69,7 @@ export class LauncherComponent implements OnInit {
                 private router: Router,
                 private route: ActivatedRoute,
                 private strudelappsService: StrudelappsService,
+                private settingsService: SettingsService,
                 ) {
       this.subscriptions = [];
       this.subscriptions.push(this.authService.sshAuthzServers.subscribe(o => {this.updateSshAuthZServers(o)}));
@@ -172,8 +172,6 @@ export class LauncherComponent implements OnInit {
     this.app$.subscribe((v) => { console.log('app changed'); console.log(v)});*/
     //this.site$.subscribe ( (v) => { this.getId(v) });
     //this.app$.subscribe( (v) => { this.getApp(v) });
-    this.usetabs = false;
-    this.usemenu = true;
   }
 
   updateIdApp(params: ParamMap) {

src/app/settings/settings.component.html

-    
-<div fxLayout="row" style="width: 100%">
-    <div fxFlex></div>
-    <div gdAreas = "header header | apiselect apiselect | themeselect themeselect | loadconfig resetconfig | done done">
-        <div gdArea="header"><h2 style="width: 100%">Settings</h2></div>
-        <div gdArea="apiselect">
-            <div *ngIf="(backendSelectionService.apiservers | async) !== undefined">
-            <mat-form-field>
-                <mat-label>API Server</mat-label>
-                <mat-select [ngModel]="selectedApiServer" (selectionChange)="backendSelectionService.setApiServer($event.value)">
-                    <mat-option *ngFor="let apis of backendSelectionService.apiservers|async" [value]="apis">
-                        {{ apis.name }}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-            </div>
-        </div>
-        <div gdArea="themeselect">
-            <mat-form-field >
-                <mat-label>Theme</mat-label>
-                <mat-select [(value)] ="theme" (selectionChange)="selectTheme($event.value)">
-                    <mat-option *ngFor="let opttheme of themes" [value]="opttheme">
-                        {{ opttheme.name }}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
+<div fxLayout="row" fxLayoutAlign="space-around">    
+<div fxLayout="column" style="max-width: 500px">
+    <div><h2>Settings</h2></div>
+    <div><h3>Appearance</h3></div>
+    <div>
+        <mat-form-field >
+            <mat-label>Theme</mat-label>
+            <mat-select [(value)] ="theme" (selectionChange)="selectTheme($event.value)">
+                <mat-option *ngFor="let opttheme of themes" [value]="opttheme">
+                    {{ opttheme.name }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+    </div>
+    <div>
+        <mat-button-toggle-group (change)="toggleMenu($event.value)" [value]="selectedVal">
+            <mat-button-toggle value="true">Menu</mat-button-toggle>
+            <mat-button-toggle value="false">Tabs</mat-button-toggle>
+        </mat-button-toggle-group>
+    </div>
+
+    <div><h3>Advanced</h3></div>
+    <div >
+        <div *ngIf="(backendSelectionService.apiservers | async) !== undefined">
+        <mat-form-field>
+            <mat-label>API Server</mat-label>
+            <mat-select [ngModel]="selectedApiServer" (selectionChange)="backendSelectionService.setApiServer($event.value)">
+                <mat-option *ngFor="let apis of backendSelectionService.apiservers|async" [value]="apis">
+                    {{ apis.name }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
         </div>
-        <div gdArea="loadconfig"> 
+    </div>
+    <div fxLayout="row">
+        <div> 
             <button type="button" mat-button (click)="fileInput.click()">Load Config</button>
             <input hidden (change)="loadConfig($event)" accept=".json" #fileInput type="file" id="file">
         </div>
-        <div gdArea="resetconfig">
+        <div>
             <button mat-button (click)=resetConfig()>Reset Config</button>
         </div>
-        <div gdArea="done"><button mat-flat-button color=primary (click)="location.back()" style="width: 100%">Done</button></div>
     </div>
-    <div fxFlex></div>
+    <div gdArea="done"><button mat-flat-button color=primary (click)="location.back()" style="width: 100%">Done</button></div>
+</div>
 </div>

src/app/settings/settings.component.ts

@@ -5,6 +5,8 @@ import {OverlayContainer} from '@angular/cdk/overlay';
 import { AuthorisationService } from '../authorisation.service';
 import { ComputesitesService } from '../computesites.service';
 import { Location } from '@angular/common';
+import { SettingsService } from '../settings.service';
+import { MatButtonToggleGroup } from '@angular/material';
 
 @Component({
   selector: 'app-settings',
@@ -16,16 +18,17 @@ export class SettingsComponent implements OnInit {
   public selectedApiServer: any;
   private file: any;
   private config: any;
-  public theme: any;
-  public themeSubject: BehaviorSubject<string>;
+  public theme: string;
   public themes: any[] = [ {'name':'Light','value':'strudel-light-theme'},
                    {'name': 'Dark','value':'strudel-dark-theme'}]
   public apiservers: any[]
+  public selectedVal: string;
   constructor(
                 public backendSelectionService: BackendSelectionService,
                 public authService: AuthorisationService,
                 public computeSitesService: ComputesitesService,
                 public overlayContainer: OverlayContainer,
+                public settingsService: SettingsService,
                 private location: Location
     ) { 
       this.selectedApiServer = null;
@@ -35,7 +38,13 @@ export class SettingsComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.setTheme();
+
+    for (let t of this.themes) {
+      if (t.value == this.settingsService.theme$.value) {
+        this.theme = t;
+      }
+    }
+    this.selectedVal = this.settingsService.useMenu$.value ? "true":"false";
   }
 
   loadConfig(event) {
@@ -68,26 +77,12 @@ export class SettingsComponent implements OnInit {
       this.authService.removeLocalAuthZ()
   }
 
-  setTheme()  {
-    var theme;
-    theme=localStorage.getItem('strudel-theme');
-    if (theme == null) {
-      theme = 'strudel-theme-light';
-    }
-    let classList = document.querySelector('app-root').classList
-    var c;
-    for (c of classList.value.split(' ')) {
-      if (c.indexOf('strudel-') == 0) {
-        console.log('remove class'+c);
-        classList.remove(c);
-      }
-    }
-    classList.add(theme)
-}
-
   selectTheme(event) {
-    localStorage.setItem('strudel-theme',event.value);
-    this.setTheme();
+    this.settingsService.setTheme(event.value);
+  }
+
+  toggleMenu(v) {
+    this.settingsService.useMenu$.next(v == "true");
   }
 
 }

src/app/tes.service.ts

@@ -50,7 +50,6 @@ private updateUserHealthSub: Subscription;
 private cachetincidents: BehaviorSubject<Health[]>;
 private nextUpdate: Subscription;
 private cancelRequests: Subject<string>;
-public theme: BehaviorSubject<string>;
 public identitySubject: BehaviorSubject<Identity>;
 public appSubject: BehaviorSubject<Strudelapp>;
 private openapps: any[];
@@ -77,7 +76,6 @@ private openapps: any[];
     //this.appSubject = new BehaviorSubject<Strudelapp>(null);
 
       this.backendSelectionService.apiserver.subscribe( (value) => { if (value != null) {this.twsproxy = value.tws ; this.Base = value.tes }});
-    this.theme = new BehaviorSubject('strudel-light-theme');
     timer(500).pipe(repeat()).subscribe(() => this.checkWindows());
     // this.batchinterface = {};
     // this.computesitesService.identities.subscribe(identities => this.startPolling(identities));
@@ -104,10 +102,6 @@ public setStatusMsg(statusMsg: BehaviorSubject<any>) {
   this.statusMsg = statusMsg;
 }
 
- public setTheme(theme: string) {
-   this.theme.next(theme);
- }
-
  private buildParams(app: Strudelapp, identity: Identity, batchinterface: BatchInterface, appinst?: any): string {
    let params = new URLSearchParams();
    let id = identity.copy_skip_catalog();