Skip to content

S
svmon-web
Commit 17456670 authored by Jie Yuan's avatar Jie Yuan
Browse files
Options

add service component history component

parent 576c502b
Hide whitespace changes
Inline Side-by-side
Showing with 444 additions and 0 deletions
src/app/dashboard/service-component-history/service-component-history.component.css 0 → 100644
View file @ 17456670
th.mat-sort-header-sorted {
color: black;
}
.table-container {
max-width: 40%;
padding: 10px 10px;
margin:0 auto;
font-size: 30px;
}
.sidebar-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #eee;
z-index: 1;
}
.example-container {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.example-is-mobile .example-toolbar {
position: fixed;
/* Make sure the toolbar will stay on top of the content as it scrolls past. */
z-index: 2;
}
h1.example-app-name {
margin-left: 8px;
}
.example-sidenav-container {
/* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
flex: 1;
}
.example-is-mobile .example-sidenav-container {
/* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
`<body>` to be our scrolling element for mobile layouts. */
flex: 1 0 auto;
}
.example-toolbar {
z-index: auto;
}
.basic-container {
padding: 30px;
}
.example-fill-remaining-space {
/* This fills the remaining space, by using flexbox.
Every toolbar row uses a flexbox row layout. */
flex: 1 1 auto;
}
mat-sidenav {
width: 15%;
}
.menu-button {
border:none;
}
.example-card {
margin: 2%;
font-size: 45px;
text-align: left;
}
.example-card-right {
margin: 2.5%;
text-align: left;
margin: 2% ;
}
.example-header-image {
background-size: cover;
}
table{
border-spacing: 7px;
font-size: 130%;
column-gap: 3px;
}
.div-top1{
position: absolute;
left: 5%;
top: 20%;
width: 86%;
height: 20%;
}
.div-top{
position: absolute;
left: 5%;
top: 10%;
width: 86%;
height: 5%;
}
td, th{
width: 10%;
}
h3 {
text-align: center;
}
.activeLine{
background-color: rgb(121, 153, 132);
}
img {
width: 86%;
}
.toolbar-div {
background: rgb(184, 197, 196);
}
\ No newline at end of file
src/app/dashboard/service-component-history/service-component-history.component.html 0 → 100644
View file @ 17456670
<div>
<mat-sidenav-container class="example-container" >
<mat-sidenav *ngIf="sidebarOpen" mode="side" opened>
<div>
<img src="assets/logoSideBar.png" alt="Banner Image" class="logoSideBarImg"/>
</div>
<div>
<mat-form-field>
<mat-label>------DPMT------</mat-label>
<mat-select>
<mat-option *ngFor="let name of dpmtSiteNames" [value]="name" (click)="onSiteNameSelected(name)">
{{name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field>
<mat-label>------GOCDB------</mat-label>
<mat-select>
<mat-option *ngFor="let namegoc of gocdbSiteNames" [value]="namegoc"(click)="onSiteNameSelected(namegoc)">
{{namegoc}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field>
<mat-label>------EOSC------</mat-label>
<mat-select>
<mat-option *ngFor="let name2 of eoscSiteNames" [value]="name2" (click)="onSiteNameSelected(name2)">
{{name2}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-sidenav>
<mat-sidenav-content>
<div>
<mat-toolbar class="toolbar-div">
<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>
&nbsp; &nbsp;
<button class="menu-button" mat-button [matMenuTriggerFor]="menuservice">Service</button>
<mat-menu #menuservice="matMenu">
<button mat-menu-item (click)="onClickService('dpmt')">DPMT</button>
<button mat-menu-item (click)="onClickService('gocdb')">GOCDB</button>
<button mat-menu-item (click)="onClickService('eosc')">EOSC</button>
</mat-menu>
&nbsp; &nbsp;
<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)="onLogout">Logout</button>
</mat-menu>
</mat-toolbar>
</div>
<div class="div-top">
<button mat-button (click)="onBackClick()">Back</button>
</div>
<div class="div-top1">
<mat-card class="example-card-right">
<mat-card-header>
<mat-card-title>History record for {{servComp.name}} @ {{servCompHost}} </mat-card-title>
<mat-icon>home</mat-icon>
</mat-card-header>
<mat-card-content>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Version</th>
<th scope="col">Status</th>
<th scope="col">Service</th>
<th scope="col">Date of Change</th>
</tr>
</thead>
<tbody>
<tr class="activeLine">
<th scope="row"> *</th>
<td>{{servComp.name | uppercase }}</td>
<td>{{servComp.tagAtSite | uppercase }}</td>
<td>{{servComp.productionTag | uppercase }}</td>
<td>{{servComp.serviceType | uppercase}}</td>
<td>{{servComp.createdTime | uppercase }}</td>
</tr>
<tr *ngFor="let recordIterator of servComp.serviceComponentRecords; let i = index">
<th scope="row">{{i}}</th>
<td>{{recordIterator.name | uppercase }}</td>
<td>{{recordIterator.tagAtSite | uppercase}}</td>
<td>{{recordIterator.productionTag | uppercase}}</td>
<td>{{recordIterator.serviceType | uppercase}}</td>
<td>{{recordIterator.lastChangedTime }}</td>
</tr>
</tbody>
</table>
</mat-card-content>
</mat-card>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
<router-outlet></router-outlet>
\ No newline at end of file
src/app/dashboard/service-component-history/service-component-history.component.spec.ts 0 → 100644
View file @ 17456670
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ServiceComponentHistoryComponent } from './service-component-history.component';
describe('ServiceComponentHistoryComponent', () => {
let component: ServiceComponentHistoryComponent;
let fixture: ComponentFixture<ServiceComponentHistoryComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ServiceComponentHistoryComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ServiceComponentHistoryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/dashboard/service-component-history/service-component-history.component.ts 0 → 100644
View file @ 17456670
import {Component, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ServiceComponent} from '../../model/service-component';
import {ServiceComponentService} from '../../service-component.service'
import { SiteService } from 'src/app/site.service';
import { AuthService } from 'src/app/auth.service';
@Component({
selector: 'app-servCompHisComponent',
templateUrl: './service-component-history.component.html',
styleUrls: ['./service-component-history.component.css']
})
export class ServiceComponentHistoryComponent implements OnInit, OnDestroy {
servComp: ServiceComponent;
servCompHost: string;
eoscSiteNames: string[];
gocdbSiteNames: string[];
dpmtSiteNames: string[];
constructor(private servComponentService: ServiceComponentService,
private siteService: SiteService,
public router: Router,
public route: ActivatedRoute,
public authService: AuthService) {
const sessionData = sessionStorage.getItem('currentServComp');
if (sessionData !== null) {
this.servComp = JSON.parse(sessionData);
} else {
this.servComp = new ServiceComponent('default');
this.servComp = servComponentService.getSelectedServComp();
this.servCompHost = servComponentService.getSelectedServCompHost();
}
}
ngOnInit() {
}
ngOnDestroy() {
}
onBackClick() {
console.log('on back click from component history view');
this.router.navigate(['/dashboard/fullTableComponent'], { relativeTo: this.route });
}
setNameLists(){
this.setNameListsFromSource('dpmt');
this.setNameListsFromSource('gocdb');
this.setNameListsFromSource('eosc');
}
setNameListsFromSource(source: string){
const stmp = 'JsonSiteNameList' + source.toUpperCase();
const ltmp = sessionStorage.getItem(stmp) ;
if( ltmp !== null) {
const ldata = JSON.parse(ltmp);
if ( source === 'dpmt') {
this.dpmtSiteNames = ldata;
} else if (source === 'gocdb') {
this.gocdbSiteNames = ldata;
} else if (source === 'eosc') {
this.eoscSiteNames = ldata;
}
} else {
this.siteService.getSiteNameListFromSource(source)
.then((ldata: string[]) => {
if ( source === 'dpmt') {
this.dpmtSiteNames = ldata;
} else if (source === 'gocdb') {
this.gocdbSiteNames = ldata;
} else if (source === 'eosc') {
this.eoscSiteNames = ldata;
}
const tmp = 'JsonSiteNameList' + source.toUpperCase();
sessionStorage.setItem(tmp, JSON.stringify(ldata));
}
).catch((error) => {
console.log('Loading server list from DPMT: ', error);
});
}
}
public onClickSite(source: string) {
console.log('site clicked with');
sessionStorage.setItem('preSitePage', 'Site')
sessionStorage.setItem('currentSiteShortSource',source);
sessionStorage.setItem('currentSiteShortSource', source);
this.router.navigate(['/dashboard'], { relativeTo: this.route });
}
public onClickService(source: string) {
console.log('service clicked with');
sessionStorage.setItem('preSitePage', 'Service')
sessionStorage.setItem('currentServiceSource',source);
sessionStorage.setItem('currentSiteShortSource', source);
this.router.navigate(['/dashboard/fullTableComponent'], { relativeTo: this.route });
}
onLogout(){
this.authService.logout();
}
}
\ No newline at end of file
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