Commit 4e6d7f47 authored by Chris Hines's avatar Chris Hines
Browse files

add a settings option to switch between menus and tabs

parent 5edb03d0
Pipeline #7808 failed with stages
in 4 minutes and 40 seconds
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<div fxLayout="row" style="width: 100%"> <div fxLayout="row" style="width: 100%">
<mat-toolbar-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%"> <img src="assets/MASSIVElogoTransparent128x128.png" style="width: auto; height: 90%">
<span>Strudel2</span> <span>Strudel2</span>
<span fxFlex></span> <span fxFlex></span>
......
...@@ -6,6 +6,7 @@ import {BehaviorSubject} from 'rxjs/BehaviorSubject'; ...@@ -6,6 +6,7 @@ import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import { MatSnackBar } from '@angular/material'; import { MatSnackBar } from '@angular/material';
import {OverlayContainer} from '@angular/cdk/overlay'; import {OverlayContainer} from '@angular/cdk/overlay';
import { Computesite, Health } from './computesite'; import { Computesite, Health } from './computesite';
import {SettingsService } from './settings.service';
...@@ -27,6 +28,7 @@ export class AppComponent { ...@@ -27,6 +28,7 @@ export class AppComponent {
constructor(private tesService: TesService, constructor(private tesService: TesService,
private authService: AuthorisationService, private authService: AuthorisationService,
private computesitesService: ComputesitesService, private computesitesService: ComputesitesService,
private settingsService: SettingsService,
public snackBar: MatSnackBar) { public snackBar: MatSnackBar) {
}; };
...@@ -39,10 +41,18 @@ export class AppComponent { ...@@ -39,10 +41,18 @@ export class AppComponent {
this.computesitesService.setStatusMsg(this.statusMsg); this.computesitesService.setStatusMsg(this.statusMsg);
this.authService.setStatusMsg(this.statusMsg); this.authService.setStatusMsg(this.statusMsg);
this.statusMsg.subscribe(msg => this.displayMessage(msg)); 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) { private displayMessage(msg) {
if (msg === null || msg == "") { if (msg === null || msg == "") {
...@@ -53,9 +63,7 @@ export class AppComponent { ...@@ -53,9 +63,7 @@ export class AppComponent {
this.snackBarRef = this.snackBar.open(msg,'Dismiss'); this.snackBarRef = this.snackBar.open(msg,'Dismiss');
} }
} }
setTheme() { setTheme(theme: string) {
var theme;
theme=localStorage.getItem('strudel-theme');
if (theme == null) { if (theme == null) {
theme = 'strudel-theme-light'; theme = 'strudel-theme-light';
} }
......
...@@ -55,6 +55,7 @@ import { LoginComponent } from './login/login.component'; ...@@ -55,6 +55,7 @@ import { LoginComponent } from './login/login.component';
import { SettingsComponent } from './settings/settings.component'; import { SettingsComponent } from './settings/settings.component';
import { LogoutComponent } from './logout/logout.component'; import { LogoutComponent } from './logout/logout.component';
import { AccountinfoComponent } from './accountinfo/accountinfo.component'; import { AccountinfoComponent } from './accountinfo/accountinfo.component';
import {SettingsService } from './settings.service';
// import { FileExplorerModule } from './file-explorer/file-explorer.module'; // import { FileExplorerModule } from './file-explorer/file-explorer.module';
...@@ -116,7 +117,7 @@ import { AccountinfoComponent } from './accountinfo/accountinfo.component'; ...@@ -116,7 +117,7 @@ import { AccountinfoComponent } from './accountinfo/accountinfo.component';
], ],
entryComponents: [ LogoutdialogComponent, ModaldialogComponent], entryComponents: [ LogoutdialogComponent, ModaldialogComponent],
providers: [ StrudelappsService, ComputesitesService, TesService, SubmitAppService, MatDialog, AuthorisationService,BackendSelectionService], providers: [ StrudelappsService, ComputesitesService, TesService, SubmitAppService, MatDialog, AuthorisationService,BackendSelectionService,SettingsService],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule { }
<!--<div fxFlex style="flex: 1 1 0%; box-sizing: border-box">--> <!--<div fxFlex style="flex: 1 1 0%; box-sizing: border-box">-->
<mat-sidenav-container style="height: 100%" autosize> <mat-sidenav-container style="height: 100%" autosize>
<mat-sidenav #idSideNav mode="side" opened> <mat-sidenav #idSideNav mode="side" [opened]="(settingsService.menuToggle$ | async) && (settingsService.useMenu$ | async)">
<div *ngIf="usemenu">
<div fxLayout="column" fxLayout="stretch" style="height: 100%"> <div fxLayout="column" fxLayout="stretch" style="height: 100%">
<nav> <nav>
<mat-accordion style="width: 100%" [displayMode]="flat"> <mat-accordion style="width: 100%" [displayMode]="flat">
...@@ -37,10 +36,9 @@ ...@@ -37,10 +36,9 @@
</nav> </nav>
</div> </div>
<div fxFlex></div> <div fxFlex></div>
</div>
</mat-sidenav> </mat-sidenav>
<mat-sidenav-content style="height: 100%"> <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"> <nav mat-tab-nav-bar color="accent" backgroundColor="primary">
<a mat-tab-link <a mat-tab-link
*ngFor="let id of (computeSitesService.appidentities | async)" *ngFor="let id of (computeSitesService.appidentities | async)"
...@@ -75,7 +73,7 @@ ...@@ -75,7 +73,7 @@
</a> </a>
</nav> </nav>
</div> </div>
</div>--> </div>
<div fxLayout="column" fxLayoutAlign="space-between stretch" style="width: 100%; height: 100%" > <div fxLayout="column" fxLayoutAlign="space-between stretch" style="width: 100%; height: 100%" >
<div *ngIf="identitySubject | async as identity"> <div *ngIf="identitySubject | async as identity">
......
...@@ -22,6 +22,7 @@ import { LogoutdialogComponent } from '../logoutdialog/logoutdialog.component'; ...@@ -22,6 +22,7 @@ import { LogoutdialogComponent } from '../logoutdialog/logoutdialog.component';
import { SshAuthzServer } from '../identity'; import { SshAuthzServer } from '../identity';
import { ComputesitesService } from '../computesites.service'; import { ComputesitesService } from '../computesites.service';
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { SettingsService} from '../settings.service';
...@@ -58,8 +59,6 @@ export class LauncherComponent implements OnInit { ...@@ -58,8 +59,6 @@ export class LauncherComponent implements OnInit {
private identity$: Observable<Identity>; private identity$: Observable<Identity>;
private app$: Observable<Strudelapp>; private app$: Observable<Strudelapp>;
private app: Strudelapp; private app: Strudelapp;
private usetabs: boolean;
private usemenu: boolean;
constructor( public dialog: MatDialog, constructor( public dialog: MatDialog,
...@@ -70,6 +69,7 @@ export class LauncherComponent implements OnInit { ...@@ -70,6 +69,7 @@ export class LauncherComponent implements OnInit {
private router: Router, private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private strudelappsService: StrudelappsService, private strudelappsService: StrudelappsService,
private settingsService: SettingsService,
) { ) {
this.subscriptions = []; this.subscriptions = [];
this.subscriptions.push(this.authService.sshAuthzServers.subscribe(o => {this.updateSshAuthZServers(o)})); this.subscriptions.push(this.authService.sshAuthzServers.subscribe(o => {this.updateSshAuthZServers(o)}));
...@@ -172,8 +172,6 @@ export class LauncherComponent implements OnInit { ...@@ -172,8 +172,6 @@ export class LauncherComponent implements OnInit {
this.app$.subscribe((v) => { console.log('app changed'); console.log(v)});*/ this.app$.subscribe((v) => { console.log('app changed'); console.log(v)});*/
//this.site$.subscribe ( (v) => { this.getId(v) }); //this.site$.subscribe ( (v) => { this.getId(v) });
//this.app$.subscribe( (v) => { this.getApp(v) }); //this.app$.subscribe( (v) => { this.getApp(v) });
this.usetabs = false;
this.usemenu = true;
} }
updateIdApp(params: ParamMap) { updateIdApp(params: ParamMap) {
......
<div fxLayout="row" fxLayoutAlign="space-around">
<div fxLayout="row" style="width: 100%"> <div fxLayout="column" style="max-width: 500px">
<div fxFlex></div> <div><h2>Settings</h2></div>
<div gdAreas = "header header | apiselect apiselect | themeselect themeselect | loadconfig resetconfig | done done"> <div><h3>Appearance</h3></div>
<div gdArea="header"><h2 style="width: 100%">Settings</h2></div> <div>
<div gdArea="apiselect"> <mat-form-field >
<div *ngIf="(backendSelectionService.apiservers | async) !== undefined"> <mat-label>Theme</mat-label>
<mat-form-field> <mat-select [(value)] ="theme" (selectionChange)="selectTheme($event.value)">
<mat-label>API Server</mat-label> <mat-option *ngFor="let opttheme of themes" [value]="opttheme">
<mat-select [ngModel]="selectedApiServer" (selectionChange)="backendSelectionService.setApiServer($event.value)"> {{ opttheme.name }}
<mat-option *ngFor="let apis of backendSelectionService.apiservers|async" [value]="apis"> </mat-option>
{{ apis.name }} </mat-select>
</mat-option> </mat-form-field>
</mat-select> </div>
</mat-form-field> <div>
</div> <mat-button-toggle-group (change)="toggleMenu($event.value)" [value]="selectedVal">
</div> <mat-button-toggle value="true">Menu</mat-button-toggle>
<div gdArea="themeselect"> <mat-button-toggle value="false">Tabs</mat-button-toggle>
<mat-form-field > </mat-button-toggle-group>
<mat-label>Theme</mat-label> </div>
<mat-select [(value)] ="theme" (selectionChange)="selectTheme($event.value)">
<mat-option *ngFor="let opttheme of themes" [value]="opttheme"> <div><h3>Advanced</h3></div>
{{ opttheme.name }} <div >
</mat-option> <div *ngIf="(backendSelectionService.apiservers | async) !== undefined">
</mat-select> <mat-form-field>
</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="loadconfig"> </div>
<div fxLayout="row">
<div>
<button type="button" mat-button (click)="fileInput.click()">Load Config</button> <button type="button" mat-button (click)="fileInput.click()">Load Config</button>
<input hidden (change)="loadConfig($event)" accept=".json" #fileInput type="file" id="file"> <input hidden (change)="loadConfig($event)" accept=".json" #fileInput type="file" id="file">
</div> </div>
<div gdArea="resetconfig"> <div>
<button mat-button (click)=resetConfig()>Reset Config</button> <button mat-button (click)=resetConfig()>Reset Config</button>
</div> </div>
<div gdArea="done"><button mat-flat-button color=primary (click)="location.back()" style="width: 100%">Done</button></div>
</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> </div>
...@@ -5,6 +5,8 @@ import {OverlayContainer} from '@angular/cdk/overlay'; ...@@ -5,6 +5,8 @@ import {OverlayContainer} from '@angular/cdk/overlay';
import { AuthorisationService } from '../authorisation.service'; import { AuthorisationService } from '../authorisation.service';
import { ComputesitesService } from '../computesites.service'; import { ComputesitesService } from '../computesites.service';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { SettingsService } from '../settings.service';
import { MatButtonToggleGroup } from '@angular/material';
@Component({ @Component({
selector: 'app-settings', selector: 'app-settings',
...@@ -16,16 +18,17 @@ export class SettingsComponent implements OnInit { ...@@ -16,16 +18,17 @@ export class SettingsComponent implements OnInit {
public selectedApiServer: any; public selectedApiServer: any;
private file: any; private file: any;
private config: any; private config: any;
public theme: any; public theme: string;
public themeSubject: BehaviorSubject<string>;
public themes: any[] = [ {'name':'Light','value':'strudel-light-theme'}, public themes: any[] = [ {'name':'Light','value':'strudel-light-theme'},
{'name': 'Dark','value':'strudel-dark-theme'}] {'name': 'Dark','value':'strudel-dark-theme'}]
public apiservers: any[] public apiservers: any[]
public selectedVal: string;
constructor( constructor(
public backendSelectionService: BackendSelectionService, public backendSelectionService: BackendSelectionService,
public authService: AuthorisationService, public authService: AuthorisationService,
public computeSitesService: ComputesitesService, public computeSitesService: ComputesitesService,
public overlayContainer: OverlayContainer, public overlayContainer: OverlayContainer,
public settingsService: SettingsService,
private location: Location private location: Location
) { ) {
this.selectedApiServer = null; this.selectedApiServer = null;
...@@ -35,7 +38,13 @@ export class SettingsComponent implements OnInit { ...@@ -35,7 +38,13 @@ export class SettingsComponent implements OnInit {
} }
ngOnInit() { 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) { loadConfig(event) {
...@@ -68,26 +77,12 @@ export class SettingsComponent implements OnInit { ...@@ -68,26 +77,12 @@ export class SettingsComponent implements OnInit {
this.authService.removeLocalAuthZ() 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) { selectTheme(event) {
localStorage.setItem('strudel-theme',event.value); this.settingsService.setTheme(event.value);
this.setTheme(); }
toggleMenu(v) {
this.settingsService.useMenu$.next(v == "true");
} }
} }
...@@ -50,7 +50,6 @@ private updateUserHealthSub: Subscription; ...@@ -50,7 +50,6 @@ private updateUserHealthSub: Subscription;
private cachetincidents: BehaviorSubject<Health[]>; private cachetincidents: BehaviorSubject<Health[]>;
private nextUpdate: Subscription; private nextUpdate: Subscription;
private cancelRequests: Subject<string>; private cancelRequests: Subject<string>;
public theme: BehaviorSubject<string>;
public identitySubject: BehaviorSubject<Identity>; public identitySubject: BehaviorSubject<Identity>;
public appSubject: BehaviorSubject<Strudelapp>; public appSubject: BehaviorSubject<Strudelapp>;
private openapps: any[]; private openapps: any[];
...@@ -77,7 +76,6 @@ private openapps: any[]; ...@@ -77,7 +76,6 @@ private openapps: any[];
//this.appSubject = new BehaviorSubject<Strudelapp>(null); //this.appSubject = new BehaviorSubject<Strudelapp>(null);
this.backendSelectionService.apiserver.subscribe( (value) => { if (value != null) {this.twsproxy = value.tws ; this.Base = value.tes }}); 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()); timer(500).pipe(repeat()).subscribe(() => this.checkWindows());
// this.batchinterface = {}; // this.batchinterface = {};
// this.computesitesService.identities.subscribe(identities => this.startPolling(identities)); // this.computesitesService.identities.subscribe(identities => this.startPolling(identities));
...@@ -104,10 +102,6 @@ public setStatusMsg(statusMsg: BehaviorSubject<any>) { ...@@ -104,10 +102,6 @@ public setStatusMsg(statusMsg: BehaviorSubject<any>) {
this.statusMsg = statusMsg; this.statusMsg = statusMsg;
} }
public setTheme(theme: string) {
this.theme.next(theme);
}
private buildParams(app: Strudelapp, identity: Identity, batchinterface: BatchInterface, appinst?: any): string { private buildParams(app: Strudelapp, identity: Identity, batchinterface: BatchInterface, appinst?: any): string {
let params = new URLSearchParams(); let params = new URLSearchParams();
let id = identity.copy_skip_catalog(); let id = identity.copy_skip_catalog();
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment