Commit 17456670 authored by Jie Yuan's avatar Jie Yuan
Browse files

add service component history component

parent 576c502b

src/app/dashboard/service-component-history/service-component-history.component.css

0 → 100644
+149 −0
Original line number Diff line number Diff line 






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
+152 −0
Original line number Diff line number Diff line 




<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
+25 −0
Original line number Diff line number Diff line 
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
+118 −0
Original line number Diff line number Diff line 
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