Commit ec5f3255 authored by Chris Hines's avatar Chris Hines
Browse files

Strudel2 now has a Light theme and a Dark Theme

parent 4a34fd97
Pipeline #7378 passed with stages
in 2 minutes and 58 seconds
......@@ -21,7 +21,8 @@
"src/favicon.ico"
],
"styles": [
"src/styles.css"
"src/styles.scss",
"src/health-warn.scss"
],
"scripts": []
},
......
......@@ -4,6 +4,7 @@ import { LauncherComponent } from './launcher/launcher.component';
import { KeygenComponent } from './keygen/keygen.component';
import { TransferComponent } from './transfer/transfer.component';
import { ShareconnectComponent } from './shareconnect/shareconnect.component';
import { JoblistComponent } from './joblist/joblist.component';
// import { TokenextractorComponent } from './tokenextractor/tokenextractor.component';
......@@ -11,12 +12,12 @@ import { ShareconnectComponent } from './shareconnect/shareconnect.component';
const routes: Routes = [
{ path: '', redirectTo: 'launch', pathMatch: 'full'},
{ path: 'launch', component: LauncherComponent},
{ path: 'finishlaunch', component: LauncherComponent},
{ path: 'cancellaunch', component: LauncherComponent},
{ path: 'launch', component: JoblistComponent},
// { path: 'finishlaunch', component: LauncherComponent},
//{ path: 'cancellaunch', component: LauncherComponent},
{ path: 'sshauthz_callback', component: KeygenComponent},
{ path: 'transfer', component: TransferComponent },
{ path: 'shareconnect', component: ShareconnectComponent }
// { path: 'transfer', component: TransferComponent },
//{ path: 'shareconnect', component: ShareconnectComponent }
// { path: 'sshauthz_callback', component: LauncherComponent}
......
<!-- <router-outlet class="fill-remaining-space"></router-outlet> -->
<!--<div *ngIf="(tesService.theme | async) == 'strudel-dark-theme'" class="strudel-dark-theme" style="width: 100vw; height: 100vh">
<router-outlet></router-outlet>
</div>
<div *ngIf="(tesService.theme | async) == 'strudel-light-theme'" class="strudel-light-theme" style="width: 100vw; height: 100vh">
<router-outlet></router-outlet>
</div> -->
<app-launcher></app-launcher>
<!--<router-outlet></router-outlet>-->
......@@ -4,6 +4,8 @@ import { AuthorisationService} from './authorisation.service';
import { ComputesitesService} from './computesites.service';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import { MatSnackBar } from '@angular/material';
import {OverlayContainer} from '@angular/cdk/overlay';
@Component({
......@@ -24,7 +26,7 @@ export class AppComponent {
constructor(private tesService: TesService,
private authService: AuthorisationService,
private computesitesService: ComputesitesService,
public snackBar: MatSnackBar,) {
public snackBar: MatSnackBar) {
};
......@@ -36,6 +38,7 @@ export class AppComponent {
this.computesitesService.setStatusMsg(this.statusMsg);
this.authService.setStatusMsg(this.statusMsg);
this.statusMsg.subscribe(msg => this.displayMessage(msg));
}
......@@ -48,6 +51,9 @@ export class AppComponent {
this.snackBarRef = this.snackBar.open(msg,'Dismiss');
}
}
// login() {
// console.log("login");
// this.authService.login()
......
......@@ -47,6 +47,8 @@ import { Sv2SideNavComponent } from './sv2-side-nav/sv2-side-nav.component';
import { ShareconnectComponent } from './shareconnect/shareconnect.component';
import { LaunchDialogComponent } from './launch-dialog/launch-dialog.component';
import { ModaldialogComponent } from './modaldialog/modaldialog.component'
import {OverlayModule} from '@angular/cdk/overlay';
// import { FileExplorerModule } from './file-explorer/file-explorer.module';
......@@ -68,7 +70,7 @@ import { ModaldialogComponent } from './modaldialog/modaldialog.component'
Sv2SideNavComponent,
ShareconnectComponent,
LaunchDialogComponent,
ModaldialogComponent
ModaldialogComponent,
],
imports: [
BrowserModule,
......@@ -94,6 +96,7 @@ import { ModaldialogComponent } from './modaldialog/modaldialog.component'
FileExplorerModule,
FlexLayoutModule,
MatProgressBarModule,
OverlayModule,
],
......
<!-- <div *ngIf="identities.length == 0">
<mat-card>
Click identity and login to a service to start an application.
</mat-card>
</div>
<div *ngFor="let id of identities"> -->
<mat-card style="width: 100%" style="box-sizing: border-box;">
<div *ngIf="identity === undefined || identity == null" >
<div *ngIf="(tesService.identitySubject | async) === null" >
Click login and select a provider or select one you've already logged in to.
</div>
<div *ngIf="(identity !== undefined) && (identity !== null)">
<div *ngIf="(tesService.identitySubject | async) !== null" >
<div *ngFor="let h of tesService.cachetincidents | async">
<div *ngIf="h.stat == 'error'" style="color: warn">
<mat-card color='warn' style='width: 100%'>
<div *ngIf="h.stat == 'error'">
<mat-card style='width: 100%'>
<div class='health-warn'>
{{ h.msg }}
</div>
</mat-card>
</div>
</div>
<div *ngFor="let h of tesService.userhealth | async">
<div *ngIf="h.stat == 'error'" style="color: warn">
<mat-card color='warn' style='width: 100%'>
<div *ngIf="h.stat == 'error'">
<mat-card style='width: 100%'>
<div class='health-warn'>
{{ h.msg }}
</div>
</mat-card>
</div>
</div>
Jobs running as {{ identity.displayName() }}
Jobs running as {{ (tesService.identitySubject | async).displayName() }}
<div *ngFor="let job of tesService.joblist | async">
<app-job [jobdata]=job></app-job>
</div>
<button mat-button (click)="refreshJobs()" style="width: 100%; text-align: right">Refresh Job list</button>
</div>
</div>
</mat-card>
<!-- <iframe src="http://localhost:5200" frameborder="0" style="width: 100%"></iframe> -->
......@@ -31,7 +31,7 @@ export class JoblistComponent implements OnInit {
}
public refreshJobs(): void {
this.tesService.getJobs(this.identity);
this.tesService.getJobs(this.tesService.identitySubject.value);
}
}
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button><mat-icon>menu</mat-icon></button>
<span>Strudel v2.0</span>
<span class="fill-horizontal-space"></span>
</mat-toolbar-row>
</mat-toolbar>
<mat-card>
Generating cryptographic tokens ... this should only take a few seconds
</mat-card>
<mat-card>
Generating cryptographic tokens ... this should only take a few seconds
</mat-card>
......@@ -61,11 +61,22 @@
<button type="button" mat-button (click)="fileInput.click()">Load Config</button>
<input hidden (change)="loadConfig($event)" accept=".json" #fileInput type="file" id="file">
<button mat-button (click)=resetConfig()>Reset Config</button>
<div style="width: 100%">
Select a theme
<mat-form-field >
<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>
</mat-expansion-panel>
</mat-accordion>
</mat-sidenav>
<app-joblist [identity]="(identitySubject | async)"></app-joblist>
<!--<app-joblist [identity]="(identitySubject | async)"></app-joblist>-->
<router-outlet></router-outlet>
<div fxFlex></div>
</mat-sidenav-container>
......
......@@ -21,6 +21,10 @@ import { ComputesitesService } from '../computesites.service';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import {OverlayContainer} from '@angular/cdk/overlay';
......@@ -32,11 +36,12 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
export class LauncherComponent implements OnInit {
public strudelapps: Strudelapp[];
@Input() menuopen: boolean;
public themeSubject: BehaviorSubject<string>;
public app: Strudelapp;
public authorised: boolean;
public identity: Identity;
public identitySubject: BehaviorSubject<Identity>;
// public identitySubject: BehaviorSubject<Identity>;
public identities: Identity[];
public sshauthzservers: SshAuthzServer[];
......@@ -45,21 +50,26 @@ export class LauncherComponent implements OnInit {
public selectedApiServer: any;
private file: any;
private config: any;
public theme: any;
public themes: any[] = [ {'name':'Light','value':'strudel-light-theme'},
{'name': 'Dark','value':'strudel-dark-theme'}]
constructor( public dialog: MatDialog,
public tesService: TesService,
public backendSelectionService: BackendSelectionService,
public authService: AuthorisationService,
public computeSitesService: ComputesitesService,
public overlayContainer: OverlayContainer,
) {
this.authService.sshAuthzServers.subscribe(o => {this.updateSshAuthZServers(o)});
this.identitySubject = new BehaviorSubject(undefined);
this.computeSitesService.appidentities.subscribe(o => this.verifyIdValid(o));
this.backendSelectionService.apiserver.subscribe((s) => this.selectedApiServer = s);
this.backendSelectionService.apiserver.subscribe((s) => this.selectedApiServer = s);
this.themeSubject = new BehaviorSubject<string>('strudel-dark-theme');
this.themeSubject.subscribe(v => this.setTheme(v));
}
verifyIdValid(o) {
let currentId = this.identitySubject.value
let currentId = this.tesService.identitySubject.value
if (currentId === undefined || currentId == null) {
return;
}
......@@ -68,7 +78,7 @@ export class LauncherComponent implements OnInit {
return;
}
}
this.identitySubject.next(null);
this.tesService.identitySubject.next(null);
//if (!(this.identitySubject.value in this.computeSitesService.appidentities.value)) {
// this.identitySubject.next(null);
//}
......@@ -80,20 +90,28 @@ export class LauncherComponent implements OnInit {
ngOnInit() {
this.strudelapps = [];
// setTimeout( () => this.authService.updateAgentContents() )
}
//updateIdentities(identities) {
// this.identities = identities;
// console.log(this.identities);
// if (this.identities.length > 0) {
// this.identity = this.identities[0];
var lstheme: string;
try {
console.log('retrieve theme from localStorage');
lstheme=localStorage.getItem('strudel-theme');
console.log(lstheme)
} catch {
}
if (lstheme == null) {
console.log('no theme set, using light');
lstheme = 'strudel-light-theme';
}
//Set the value of this.theme so that the selection shows a value rather than a blank
console.log('trying to find the initial value for theme');
for (let t of this.themes) {
if (t.value == lstheme) {
console.log('found the initial value',t);
this.theme = t;
}
}
this.setTheme(lstheme);
// } else {
// this.strudelapps = [];
// }
//}
}
logout() {
......@@ -114,7 +132,7 @@ export class LauncherComponent implements OnInit {
selectId(id: Identity) {
this.identity=id;
this.identitySubject.next(id);
this.tesService.identitySubject.next(id);
this.tesService.clearJobs();
this.tesService.getJobs(id);
this.tesService.cancelHealthRequests();
......@@ -152,4 +170,27 @@ export class LauncherComponent implements OnInit {
this.authService.removeLocalAuthZ()
}
setTheme(v) {
console.log('Theme selected');
console.log(v);
let theme = v;
console.log(this.overlayContainer.getContainerElement().classList);
let classList = document.querySelector('app-root').classList
console.log('this theme');
console.log(this.theme);
if (theme == 'strudel-light-theme') {
classList.remove('strudel-dark-theme');
classList.add('strudel-light-theme');
}
if (theme == 'strudel-dark-theme') {
classList.remove('strudel-light-theme');
classList.add('strudel-dark-theme');
}
console.log('setting localStorage theme',v);
}
selectTheme(event) {
this.themeSubject.next(event.value);
localStorage.setItem('strudel-theme',event.value);
}
}
......@@ -52,6 +52,9 @@ private updateUserHealthSub: Subscription;
private cachetincidents: BehaviorSubject<Health[]>;
private nextUpdate: Subscription;
private cancelRequests: Subject<string>;
public theme: BehaviorSubject<string>;
public identitySubject: BehaviorSubject<Identity>;
// public batchinterface: {[id: string] : BatchInterface};
constructor(private http: HttpClient,
......@@ -70,10 +73,12 @@ private cancelRequests: Subject<string>;
this.apiserver = new BehaviorSubject<APIServer>(null);
this.apiservers = new BehaviorSubject<APIServer[]>([]);
this.cancelRequests = new Subject<string>();
this.identitySubject = new BehaviorSubject<Identity>(null);
this.timerSubscription = null;
this.appwindowWatcher = null;
this.backendSelectionService.apiserver.subscribe( (value) => { if (value != null) {this.twsproxy = value.tws ; this.Base = value.tes }});
this.theme = new BehaviorSubject('strudel-light-theme');
// this.batchinterface = {};
// this.computesitesService.identities.subscribe(identities => this.startPolling(identities));
}
......@@ -82,6 +87,9 @@ 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();
......@@ -167,6 +175,7 @@ public setStatusMsg(statusMsg: BehaviorSubject<any>) {
private getCachetIncidentsError(error: any) {
return this.getJobsError(error)
}
public cancelHealthRequests() {
this.cancelRequests.next('cancel')
......
@mixin health-warning-theme($theme) {
$primary: map-get($theme, primary);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.health-warn {
color: mat-color($warn);
}
}
/* You can add global styles to this file, and also import other style files */
@import url( 'https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~@angular/material/theming";
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
@import 'health-warn.scss';
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();
// Define the default theme (same as the example above).
$strudel-app-primary: mat-palette($mat-indigo);
$strudel-app-accent: mat-palette($mat-pink, A200, A100, A400);
$strudel-app-theme: mat-light-theme($strudel-app-primary, $strudel-app-accent);
$health-warn: $mat-pink;
// Include the default theme styles.
@include angular-material-theme($strudel-app-theme);
@include health-warning-theme($strudel-app-theme);
// Define an alternate dark theme.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.strudel-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.strudel-light-theme {
@include angular-material-theme($strudel-app-theme);
@include health-warning-theme($strudel-app-theme);
}
.strudel-dark-theme {
@include angular-material-theme($dark-theme);
@include health-warning-theme($dark-theme);
}
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