Open-ILS/src/eg2/src/app/share/dialog/progress-inline.component.ts

   1 import {Component, Input, ViewChild, TemplateRef} from '@angular/core';
   2
   3 /**
   4  * Inline Progress Bar
   5  *
   6  * // assuming a template reference...
   7  * @ViewChild('progress')
   8  * private progress: progressInlineComponent;
   9  *
  10  * progress.update({value : 0, max : 123});
  11  * progress.increment();
  12  * progress.increment();
  13  *
  14  * Each progress has 2 numbers, 'max' and 'value'.
  15  * The content of these values determines how the progress displays.
  16  *
  17  * There are 3 flavors:
  18  *
  19  * -- value is set, max is set
  20  * determinate: shows a progression with a percent complete.
  21  *
  22  * -- value is set, max is unset
  23  * semi-determinate, with a value report.  Shows a value-less
  24  * <progress/>, but shows the value as a number in the progress.
  25  *
  26  * This is useful in cases where the total number of items to retrieve
  27  * from the server is unknown, but we know how many items we've
  28  * retrieved thus far.  It helps to reinforce that something specific
  29  * is happening, but we don't know when it will end.
  30  *
  31  * -- value is unset
  32  * indeterminate: shows a generic value-less <progress/> with no
  33  * clear indication of progress.
  34  */
  35 @Component({
  36   selector: 'eg-progress-inline',
  37   templateUrl: './progress-inline.component.html',
  38   styleUrls: ['progress-inline.component.css']
  39 })
  40 export class ProgressInlineComponent {
  41
  42     @Input() max: number;
  43     @Input() value: number;
  44
  45     reset() {
  46         delete this.max;
  47         delete this.value;
  48     }
  49
  50     hasValue(): boolean {
  51         return Number.isInteger(this.value);
  52     }
  53
  54     hasMax(): boolean {
  55         return Number.isInteger(this.max);
  56     }
  57
  58     percent(): number {
  59         if (this.hasValue()  &&
  60             this.hasMax()    &&
  61             this.max > 0     &&
  62             this.value <= this.max) {
  63             return Math.floor((this.value / this.max) * 100);
  64         }
  65         return 100;
  66     }
  67
  68     // Set the current state of the progress bar.
  69     update(args: {[key: string]: number}) {
  70         if (args.max !== undefined) {
  71             this.max = args.max;
  72         }
  73         if (args.value !== undefined) {
  74             this.value = args.value;
  75         }
  76     }
  77
  78     // Increment the current value.  If no amount is specified,
  79     // it increments by 1.  Calling increment() on an indetermite
  80     // progress bar will force it to be a (semi-)determinate bar.
  81     increment(amt?: number) {
  82         if (!Number.isInteger(amt)) { amt = 1; }
  83
  84         if (!this.hasValue()) {
  85             this.value = 0;
  86         }
  87
  88         this.value += amt;
  89     }
  90 }
  91
  92