Commit 46a40f41 authored by Michail Tzanatos's avatar Michail Tzanatos
Browse files

showcase different types of counters when apis are not responding

parent 5c5cdfc5

src/app/app.module.ts

+19 −17
Original line number Diff line number Diff line
@@ -88,6 +88,7 @@ import { DoughnutchartComponent } from './landing/metrics/doughnutchart/doughnut 
import { StatusCardComponent } from './landing/metrics/statuscard/statuscard.component';

import { PortalCardComponent } from './landing/portalcard/portalcard.component';

import { SkeletonComponent } from './landing/metrics/skeleton.component';

import { CdkTableModule } from "@angular/cdk/table";



registerLocaleData(enGB);

export function initializeApp(bootstrap: BootstrapService) {
@@ -131,7 +132,8 @@ export function initializeAppTheme(bootstrap: BootstrapService) { 
    MatCheckboxModule,

    OAuthModule.forRoot(),

    ToastrModule.forRoot({ progressBar: true, preventDuplicates: true }),

    NgChartsModule

    NgChartsModule,

    CdkTableModule

],

    providers: [

        AppService,

src/app/landing/landing.component.html

+8 −3
Original line number Diff line number Diff line
@@ -46,7 +46,7 @@ 
					</svg>

				</div>

				<div class="card-body p-3">

					<h5 class="card-title font-weight-bold">{{animatedCounts.registeredUsers}}</h5>

					<h5 class="card-title font-weight-bold">{{isNaN(animatedCounts.registeredUsers) ? targetCounts.registeredUsers: animatedCounts.registeredUsers}}</h5>

					<div class="card-text">Registered Users</div>

				</div>

			</div>
@@ -61,7 +61,7 @@ 
					</svg>

				</div>

				<div class="card-body p-3">

					<h5 class="card-title font-weight-bold">{{animatedCounts.publishedServiceSpecs}}</h5>

					<h5 class="card-title font-weight-bold">{{isNaN(animatedCounts.publishedServiceSpecs) ? ' ': animatedCounts.publishedServiceSpecs}}</h5>

					<div class="card-text">Published Service Specifications</div>

				</div>

			</div>
@@ -77,7 +77,12 @@ 
					</svg>

				</div>

				<div class="card-body p-3">

					<div *ngIf="isNaN(animatedCounts.registeredResourceSpecs); else apiResponded">

						<h5 class="card-title"><skeleton [width]="'50%'"></skeleton></h5>

					</div>

					<ng-template #apiResponded>

						<h5 class="card-title font-weight-bold">{{animatedCounts.registeredResourceSpecs}}</h5>

					</ng-template>

					<div class="card-text">Registered Resource Specifications</div>

				</div>

			</div>

src/app/landing/landing.component.scss

+2 −0
Original line number Diff line number Diff line
@@ -95,6 +95,8 @@ 
.card-title {

    padding-top: 1.5rem;

    transition: all 0.3s ease-in-out;

    display: flex;

    justify-content: center;

}

src/app/landing/landing.component.ts

+12 −4
Original line number Diff line number Diff line
@@ -23,16 +23,16 @@ export class LandingComponent implements OnInit { 


  config: IAppConfig

  loggedIn: boolean

  

  // Video section variables

  private player: Player;

  videoLoaded: boolean = false;



  @ViewChild('videoRef', { static: true }) videoElement!: ElementRef<HTMLIFrameElement>;



  // Metrics section variables

  registeredUsers = 9999;

  publishedServiceSpecs = 9999;

  registeredResourceSpecs = 9999;

  // registeredUsers = 9999;

  // publishedServiceSpecs = 9999;

  // registeredResourceSpecs = 9999;

  animatedCounts = {

    registeredUsers: 0,

    publishedServiceSpecs: 0,
@@ -84,6 +84,9 @@ export class LandingComponent implements OnInit { 
    ) 

  }



  isNaN(value: any): boolean {

    return isNaN(value);

  }



  initializePlayer() {

    this.player = new Player(this.videoElement.nativeElement, {
@@ -166,6 +169,11 @@ export class LandingComponent implements OnInit { 
        const current = this.animatedCounts[k];

        const target = this.targetCounts[k];



        if (isNaN(target)) {

          this.animatedCounts[k] = NaN;

          continue;

        }



        const delta = target - current;



        if (Math.abs(delta) > 0) {