blob: 59ce04b7416c5654d2805d574c37f6a0d97f019b [file] [log] [blame]
Sean Condon95fb5742019-04-02 12:16:55 +01001/*
2 * Copyright 2019-present Open Networking Foundation
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
17import {LogService} from '../../log.service';
18import {animate, state, style, transition, trigger} from '@angular/animations';
19
Sean Condon98b6ddb2019-12-24 08:07:40 +000020const LOADING_IMG_DIR = 'data/img/loading/';
Sean Condon95fb5742019-04-02 12:16:55 +010021const LOADING_PFX = '/load-';
22const NUM_IMGS = 16;
23
24/**
25 * ONOS GUI - A component that shows the loading icon
26 *
27 * Should be shown if someone has to wait for more than
28 * a certain time for data to be retrieved
29 * Note the animation - there is a pause of 500ms before the images appear
30 * and then it eases in over 200ms
31 */
32@Component({
33 selector: 'onos-loading',
34 templateUrl: './loading.component.html',
35 styleUrls: ['./loading.component.css'],
36 animations: [
37 trigger('loadingState', [
38 state('false', style({
39 opacity: '0.0',
40 'z-index': -5000
41 })),
42 state('true', style({
43 opacity: '1.0',
44 'z-index': 5000
45 })),
46 transition('0 => 1', animate('200ms 500ms ease-in')),
47 transition('1 => 0', animate('200ms ease-out'))
48 ])
49 ]
50})
51export class LoadingComponent implements OnChanges {
52 @Input() theme: string = 'light';
53 @Input() running: boolean;
54
55 speed: number = 8; // Frames per second
56 idx = 1;
57 images: HTMLImageElement[] = [];
58 img: string;
59 task: any;
60
61 constructor(
62 private log: LogService,
63 ) {
64 let idx: number;
65
66 for (idx = 1; idx <= NUM_IMGS ; idx++) {
67 this.addImg('light', idx);
68 this.addImg('dark', idx);
69 }
70
71 this.log.debug('LoadingComponent constructed - images preloaded from', this.fname(1, this.theme));
72 }
73
74 /**
75 * Detects changes in in Input variable
76 * Here we want to detect if running has been enabled or disabled
77 * @param changes
78 */
79 ngOnChanges(changes: SimpleChanges): void {
80 if (changes['running']) {
81 const newRunning: boolean = changes['running'].currentValue;
82
83 if (newRunning) {
84 this.task = setInterval(() => this.nextFrame(), 1000 / this.speed);
85 } else {
86 if (this.task) {
87 clearInterval(this.task);
88 this.task = null;
89 }
90 }
91 }
92 }
93
94 private addImg(theme: string, idx: number): void {
95 const img = new Image();
96 img.src = this.fname(idx, theme);
97 this.images.push(img);
98 }
99
100 private fname(i: number, theme: string): string {
101 const z = i > 9 ? '' : '0';
102 return LOADING_IMG_DIR + theme + LOADING_PFX + z + i + '.png';
103 }
104
105 private nextFrame(): void {
106 this.idx = this.idx === 16 ? 1 : this.idx + 1;
107 this.img = this.fname(this.idx, this.theme);
108 }
109
110}