Skip to content
GitLab
Explore
Sign in
Commits on Source (6)
add model tokenInfo
· 5ac956cf
Jie Yuan
authored
Oct 02, 2019
5ac956cf
add apitokenurl
· 3786f17f
Jie Yuan
authored
Oct 02, 2019
3786f17f
add profile dialog comp
· c8cde83c
Jie Yuan
authored
Oct 02, 2019
c8cde83c
add profiledialog comp to dashboard module
· 79ae2ac7
Jie Yuan
authored
Oct 02, 2019
79ae2ac7
add dialog material module in app
· c94bc32f
Jie Yuan
authored
Oct 02, 2019
c94bc32f
add dialog to table comp
· 6fb9c020
Jie Yuan
authored
Oct 02, 2019
6fb9c020
Show whitespace changes
Inline
Side-by-side
src/app/app.module.ts
View file @
6fb9c020
...
...
@@ -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
],
...
...
src/app/dashboard/dashboard.module.ts
View file @
6fb9c020
...
...
@@ -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
{
}
src/app/dashboard/profile-dialog/profile-dialog.component.css
0 → 100644
View file @
6fb9c020
src/app/dashboard/profile-dialog/profile-dialog.component.html
0 → 100644
View file @
6fb9c020
<h2
mat-dialog-title
><B>
Hi, {{user}}
</B></h2>
<div
mat-dialog-content
>
<mat-list
*ngIf=
"hasToken"
>
<p
mat-line
>
<B>
Your Id:
</B>
{{apitoken.id}}
</p>
<p
mat-line
matTooltip=
"{{this.apitoken.token}}"
><B>
Your Token:
</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:
</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>
src/app/dashboard/profile-dialog/profile-dialog.component.spec.ts
0 → 100644
View file @
6fb9c020
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
();
});
});
src/app/dashboard/profile-dialog/profile-dialog.component.ts
0 → 100644
View file @
6fb9c020
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
);
}
);
}
}
src/app/dashboard/table/table.component.css
View file @
6fb9c020
...
...
@@ -98,6 +98,12 @@ table {
border
:
none
;
}
.submenu
{
pointer-events
:
none
;
}
img
{
width
:
80%
;
padding
:
3%
;
...
...
@@ -111,3 +117,4 @@ table {
width
:
80%
;
margin
:
0
auto
;
}
src/app/dashboard/table/table.component.html
View file @
6fb9c020
...
...
@@ -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>
<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>
...
...
src/app/dashboard/table/table.component.ts
View file @
6fb9c020
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
'
);
});
}
}
src/app/model/tokenInfo.ts
0 → 100644
View file @
6fb9c020
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
;
}
}
src/app/shared-service.ts
View file @
6fb9c020
...
...
@@ -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
;
}
...
...