...
 
Commits (6)
......@@ -14,7 +14,7 @@ import {MatButtonModule} from '@angular/material/button';
import {MatDividerModule} from '@angular/material/divider';
import {MatCardModule} from '@angular/material/card';
import { MatListModule, MatSidenavModule } from '@angular/material';
import {MatDialogModule} from '@angular/material/dialog';
import {DashboardModule} from './dashboard/dashboard.module';
......@@ -63,9 +63,8 @@ const SERVICES = [
MatDividerModule,
MatCardModule,
MatListModule,
MatSidenavModule
MatSidenavModule,
MatDialogModule
],
providers: [
...SERVICES ],
......
......@@ -21,6 +21,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import { FormsModule , ReactiveFormsModule} from '@angular/forms';
import {MatDialogModule} from '@angular/material/dialog';
import {AuthGuard} from './auth-guard.service';
import { FulltableComponent } from './fulltable/fulltable.component';
......@@ -28,6 +29,7 @@ import { HostnameComponent } from './hostname/hostname.component';
import { SiteComponent } from './site/site.component';
import { ServiceComponentComponent } from './service-component/service-component.component';
import { ServiceComponentHistoryComponent } from './service-component-history/service-component-history.component';
import { ProfileDialogComponent } from './profile-dialog/profile-dialog.component';
export const SINGLETON_SERVICES = [
......@@ -38,7 +40,8 @@ export const SINGLETON_SERVICES = [
@NgModule({
declarations: [TableComponent,
FulltableComponent, HostnameComponent, SiteComponent, ServiceComponentComponent, ServiceComponentHistoryComponent ],
FulltableComponent, HostnameComponent, SiteComponent, ServiceComponentComponent,
ServiceComponentHistoryComponent,ProfileDialogComponent],
imports: [
CommonModule,
RouterModule,
......@@ -58,7 +61,9 @@ export const SINGLETON_SERVICES = [
MatFormFieldModule,
MatInputModule,
FormsModule,
ReactiveFormsModule
]
ReactiveFormsModule,
MatDialogModule
],
entryComponents: [ProfileDialogComponent]
})
export class DashboardModule { }
<h2 mat-dialog-title><B>Hi, {{user}}</B></h2>
<div mat-dialog-content >
<mat-list *ngIf="hasToken">
<p mat-line> <B> Your Id: &nbsp; </B>{{apitoken.id}} </p>
<p mat-line matTooltip="{{this.apitoken.token}}" ><B> Your Token: &nbsp; </B> {{shortToken}}
<button (click)="copyToken(this.apitoken.token)" value="click to copy" mat-raised-button >
<mat-icon>format_align_justify</mat-icon>
</button>
<button (click)="onDeleteClick()" mat-raised-button >
<mat-icon>delete</mat-icon>
</button>
</p>
<p mat-line> <B> Validate till: &nbsp; </B> {{eDate}} </p>
</mat-list>
<button *ngIf = "hasToken === false" mat-button (click)="onCreationClick()">Create an API</button>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">OK</button>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProfileDialogComponent } from './profile-dialog.component';
describe('ProfileDialogComponent', () => {
let component: ProfileDialogComponent;
let fixture: ComponentFixture<ProfileDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProfileDialogComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProfileDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit , Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA, throwMatDialogContentAlreadyAttachedError} from '@angular/material/dialog';
import {HttpClient} from '@angular/common/http';
import {HttpHeaders} from '@angular/common/http';
import {TableComponent} from '../table/table.component';
import {SharedService} from '../../shared-service';
import { TokenInfo } from 'src/app/model/tokenInfo';
import { resolve } from 'url';
@Component({
selector: 'app-profile-dialog',
templateUrl: './profile-dialog.component.html',
styleUrls: ['./profile-dialog.component.css']
})
export class ProfileDialogComponent implements OnInit {
user: string = "";
hasToken: boolean;
apitoken: TokenInfo;
eDate: Date;
shortToken: string;
constructor ( public dialogRef: MatDialogRef<ProfileDialogComponent>,
public sharedService: SharedService,
private httpClient: HttpClient)
{
const tmp = sessionStorage.getItem('currentUser');
console.log("opened the dialog by " + tmp);
this.user = tmp;
}
onNoClick(): void {
this.dialogRef.close();
}
ngOnInit() {
this.getApiToken()
.then(
(atoken: TokenInfo) => {
this.apitoken = atoken;
if ( this.apitoken === undefined || this.apitoken === null) {
this.hasToken = false;
} else {
this.hasToken = true;
this.shortToken=this.apitoken.token.slice(0,20) + " ... ...";
this.eDate = new Date(this.apitoken.validationDate);
console.log(new Date(this.apitoken.validationDate));
}
}
).catch(
error => {
console.log('No token');
console.log(error);
}
);
// console.log(this.apitoken);
// this.dialogRef.updatePosition({ top: `200px`, right: `400px`});
}
getApiToken() {
console.log('Fetching api token');
const promise = new Promise(
(resolve, reject) => {
/** Gets the sites from the source specified (GOCDB or DPMT) **/
const getUrl = this.sharedService.apiTokenURL;
if ( sessionStorage.getItem('authHeader') !== '') {
const headers = new HttpHeaders( sessionStorage.getItem('authHeader') ? {
'Authorization' : sessionStorage.getItem('authHeader'),
'Content-Type' : 'application/json'
} : {}
);
this.httpClient.get<TokenInfo>(getUrl , {headers : headers })
.subscribe(
(tokeninfo: TokenInfo) => {
// this.apitoken = tokeninfo;
resolve(tokeninfo);
//return new TokenInfo(tokeninfo.id,tokeninfo.token,tokeninfo.validationDate);
// this.apitoken = tokeninfo;
//resolve(tokeninfo);
//console.log(this.token);
},
(error) => {
reject(error);
}
);
}
});
return promise;
}
postApiToken() {
console.log('Creating api token');
const promise = new Promise(
(resolve, reject) => {
/** Gets the sites from the source specified (GOCDB or DPMT) **/
const Url = this.sharedService.apiTokenURL;
if ( sessionStorage.getItem('authHeader') !== '') {
const headers = new HttpHeaders( sessionStorage.getItem('authHeader') ? {
'Authorization' : sessionStorage.getItem('authHeader'),
'Content-Type' : 'application/json'
} : {}
);
//console.log("post header");
//console.log(headers);
this.httpClient.post<TokenInfo>(Url , null ,{headers : headers })
.subscribe(
(tokeninfo: TokenInfo) => {
// this.apitoken = tokeninfo;
resolve(tokeninfo);
// return new TokenInfo(tokeninfo.id,tokeninfo.token,tokeninfo.validationDate);
// this.apitoken = tokeninfo;
//resolve(tokeninfo);
//console.log(this.token);
},
(error) => {
reject(error);
}
);
}
});
return promise;
}
deleteApiToken() {
console.log('deleting api token');
const promise = new Promise(
(resolve, reject) => {
/** Gets the sites from the source specified (GOCDB or DPMT) **/
const Url = this.sharedService.apiTokenURL;
if ( sessionStorage.getItem('authHeader') !== '') {
const headers = new HttpHeaders( sessionStorage.getItem('authHeader') ? {
'Authorization' : sessionStorage.getItem('authHeader'),
'Content-Type' : 'application/json'
} : {}
);
console.log("post header");
console.log(headers);
this.httpClient.delete(Url ,{headers : headers })
.subscribe(
(info: string) => {
// this.apitoken = tokeninfo;
resolve(info);
//return new TokenInfo(tokeninfo.id,tokeninfo.token,tokeninfo.validationDate);
// this.apitoken = tokeninfo;
//resolve(tokeninfo);
//console.log(this.token);
},
(error) => {
reject(error);
}
);
}
});
return promise;
}
copyToken(val: string){
let selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = val;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
}
onCreationClick(){
console.log("on creation clicked");
this.postApiToken()
.then(
(atoken: TokenInfo) => {
this.apitoken = atoken;
if ( this.apitoken === undefined || this.apitoken === null) {
this.hasToken = false;
} else {
this.hasToken = true;
this.shortToken=this.apitoken.token.slice(0,20) + " ... ...";
this.eDate = new Date(this.apitoken.validationDate);
console.log(new Date(this.apitoken.validationDate));
}
}
).catch(
error => {
console.log('No token created');
console.log(error);
}
);
}
onDeleteClick(){
console.log("on creation clicked");
this.deleteApiToken()
.then(
(info: string) => {
this.hasToken = false;
this.shortToken = "";
this.apitoken = null
}
).catch(
error => {
console.log('No token deleted');
console.log(error);
}
);
}
}
......@@ -98,6 +98,12 @@ table {
border:none;
}
.submenu {
pointer-events: none;
}
img {
width: 80%;
padding: 3%;
......@@ -110,4 +116,5 @@ table {
.form-div {
width: 80%;
margin:0 auto;
}
\ No newline at end of file
}
......@@ -57,13 +57,20 @@
<button class="menu-button" mat-icon-button (click)="sidenavtoggle()"><mat-icon>menu</mat-icon></button>
<span class="example-fill-remaining-space"></span>
<!--
<button class="menu-button" mat-button [matMenuTriggerFor]="menusite">Site</button>
<mat-menu #menusite="matMenu">
<button mat-menu-item (click)="onClickSite('dpmt')">DPMT</button>
<button mat-menu-item (click)="onClickSite('gocdb')">GOCDB</button>
<button mat-menu-item (click)="onClickSite('eosc')">EOSC</button>
</mat-menu>
-->
<button class="menu-button" (mouseenter) ='mouseEnter("Site")' >Site</button>
<mat-menu class="submenu" #menusite="matMenu">
<button class="submenu" mat-menu-item (click)="onClickSite('dpmt')">DPMT</button>
<button class="submenu" mat-menu-item (click)="onClickSite('gocdb')">GOCDB</button>
<button class="submenu" mat-menu-item (click)="onClickSite('eosc')">EOSC</button>
</mat-menu>
&nbsp; &nbsp;
<button class="menu-button" mat-button [matMenuTriggerFor]="menuservice">Service</button>
......@@ -78,7 +85,7 @@
<button class="menu-button" mat-button [matMenuTriggerFor]="menuuser">{{username}}</button>
<mat-menu #menuuser="matMenu">
<button mat-menu-item>Profile</button>
<button mat-menu-item (click)="openDialog()">Profile</button>
<button mat-menu-item (click)="onLogout()">Logout</button>
</mat-menu>
......
import {Component, OnInit, Inject, ViewContainerRef,Input, DoCheck,ViewChild,OnDestroy,ChangeDetectorRef,AfterViewInit, ViewChildren} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {MatPaginator, MatTableDataSource,MatSort} from '@angular/material';
import {MatPaginator, MatTableDataSource,MatSort,MatMenuTrigger, MatDialog} from '@angular/material';
import {MediaMatcher} from '@angular/cdk/layout';
import {SiteShort} from '../../model/site-short';
......@@ -11,6 +11,7 @@ import {SharedService} from '../../shared-service';
import {Site} from '../../model/site';
import { AuthService } from 'src/app/auth.service';
import { DataSource } from '@angular/cdk/table';
import { ProfileDialogComponent } from '../profile-dialog/profile-dialog.component';
......@@ -41,12 +42,14 @@ export class TableComponent implements OnInit, DoCheck,AfterViewInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
constructor(
public siteService: SiteShortService,
public router: Router,
public route: ActivatedRoute,
public authService: AuthService
public authService: AuthService,
public dialog: MatDialog
) {
console.log('table constructor');
......@@ -353,4 +356,31 @@ getPageSizeOptions(): number[] {
}
mouseEnter(name: string) {
console.log("enter "+ name);
this.trigger.openMenu();
}
mouseLeave(name: string) {
console.log("leave " +name);
this.trigger.closeMenu();
}
openDialog(): void {
console.log("opening the dialog");
const dialogRef = this.dialog.open(ProfileDialogComponent, {
width: '500px'
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
}
export class TokenInfo {
id: number;
token: string;
validationDate: Date;
constructor (
id: number,
token: string,
validationDate: Date) {
this.id =id;
this.token = token;
this.validationDate = validationDate;
}
}
......@@ -10,6 +10,7 @@ export class SharedService {
serviceCompURL: string;
address: string;
pagesize: number;
apiTokenURL: string;
......@@ -23,6 +24,7 @@ export class SharedService {
this.signInURL = this.baseURL + 'auth/signin';
this.redirectionURL = this.address + '/login';
this.serviceCompURL = this.baseURL + 'serviceComponent/all/historic/';
this.apiTokenURL = this.baseURL + 'auth/api-token'
this.pagesize = 50;
}
......