sunbirded-mobile-app documentation
  1. Components
  2. SbDownloadPopupComponent

File

src/app/components/popups/sb-download-popup/sb-download-popup.component.ts

Implements

OnInit OnChanges

Metadata

selector app-sb-download-popup
styleUrls ./sb-download-popup.component.scss
templateUrl ./sb-download-popup.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(events: Events, fileSizePipe: FileSizePipe)
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:33
Parameters :
Name Type Optional
events Events No
fileSizePipe FileSizePipe No

Inputs

collectionName
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:23
contentAvailableLocally
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:28
contentName
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:25
contentSize
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:29
currentCount
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:21
downloadProgress
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:24
downloadSize
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:22
isUpdateAvail
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:26
queuedIdentifiers
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:20
showDownload
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:27
showPopover
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:30

Outputs

cancelDownloadEmit
Type : EventEmitter
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:19

Methods

cancelDownload
cancelDownload()
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:51
Returns : void
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:56
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:40
Returns : void
togglePopover
togglePopover(popover?)
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:44
Parameters :
Name Optional
popover Yes
Returns : void

Properties

constContentSize
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:32
didViewLoad
Type : boolean
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:33
popupUpdate
Type : any
Defined in src/app/components/popups/sb-download-popup/sb-download-popup.component.ts:31
 
import {
  Component,
  EventEmitter,
  Input,
  OnChanges,
  OnInit, Output,
  SimpleChanges
} from '@angular/core';
import { FileSizePipe } from '@app/pipes/file-size/file-size';
import { Events } from '@app/util/events';

@Component({
  selector: 'app-sb-download-popup',
  templateUrl: './sb-download-popup.component.html',
  styleUrls: ['./sb-download-popup.component.scss'],
})
export class SbDownloadPopupComponent implements OnInit, OnChanges {

  @Output() cancelDownloadEmit = new EventEmitter();
  @Input() queuedIdentifiers: any;
  @Input() currentCount: any;
  @Input() downloadSize: any;
  @Input() collectionName: any;
  @Input() downloadProgress: any;
  @Input() contentName: any;
  @Input() isUpdateAvail: any;
  @Input() showDownload: any;
  @Input() contentAvailableLocally: any;
  @Input() contentSize: any;
  @Input() showPopover: any;
  popupUpdate: any;
  constContentSize: any;
  didViewLoad: boolean;

  constructor(
    private events: Events,
    private fileSizePipe: FileSizePipe) {
  }

  ngOnInit() {
    this.queuedIdentifiers = typeof this.queuedIdentifiers === 'number' ? new Array(this.queuedIdentifiers) : this.queuedIdentifiers;
  }

  togglePopover(popover?) {
    if (popover) {
      this.events.publish('header:decreasezIndex');
    } else {
      this.events.publish('header:setzIndexToNormal');
    }
  }
  cancelDownload() {
    this.cancelDownloadEmit.emit();
    this.showDownload = false;
  }

  ngOnChanges(changes: SimpleChanges) {
    this.popupUpdate = this.isUpdateAvail && this.contentAvailableLocally;
    this.constContentSize = this.fileSizePipe.transform(this.contentSize, 2);
    if (changes['queuedIdentifiers']) {
      this.queuedIdentifiers = typeof this.queuedIdentifiers === 'number' ? new Array(this.queuedIdentifiers) : this.queuedIdentifiers;
    }
    if (changes['currentCount']) {
      this.currentCount = changes['currentCount'].currentValue;
    }
    if (changes['downloadSize']) {
      this.downloadSize = changes['downloadSize'].currentValue;
    }
    if (changes['downloadProgress']) {
      this.downloadProgress = changes['downloadProgress'].currentValue;
      if ((this.contentName && this.contentAvailableLocally) && (this.downloadProgress  || this.downloadProgress === 100)) {
        this.showDownload = false;
      }
    }
    if (changes['contentName']) {
      this.contentName = changes['contentName'];
    }
  }
}

<div class="sb-popover sb-popover-download" *ngIf="!this.showPopover && showDownload">
    <div class="backdrop" (click)="togglePopover(this.showPopover); this.showPopover = !this.showPopover"></div>
    <div class="popover-content">
      <ion-header class="sb-popover-header">
        <ion-toolbar class="sb-popover-toolbar">
            <ion-title class="sb-popover-title" *ngIf="collectionName">{{ 'DOWNLOADING_2' | translate }}
                <ion-button fill="clear" class="sb-modal-close"
                  (click)="togglePopover(this.showPopover); this.showPopover = !this.showPopover">{{'HIDE' | translate}}</ion-button>
              </ion-title>
          <ion-title class="sb-popover-title" *ngIf="contentName && !popupUpdate && showDownload">{{ 'DOWNLOADING_2' | translate }}
            <ion-button fill="clear" class="sb-modal-close"
              (click)="togglePopover(this.showPopover); this.showPopover = !this.showPopover">{{'HIDE' | translate}}</ion-button>
          </ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="sb-popover-container noscroll">
          <div class="sb-popover-items"  *ngIf = "collectionName">
            <div class="sb-popover-content-details">
              <div class="sb-progress-percent-text pb-8">{{ !queuedIdentifiers.length ? '0%' : ((currentCount/queuedIdentifiers.length)*100).toFixed(0)+ '%' }}</div>
              <div class="sb-accordian-grey-text p-0">
                  {{ collectionName }}
                <div class="meta-info font-weight-bold py-8">
                  {{ currentCount }} / {{ queuedIdentifiers?.length }}
                </div>
              </div>
            </div>
          </div>
          <div class="sb-popover-items" *ngIf = "contentName && this.showDownload">
              <div class="sb-popover-content-details">
                <div class="sb-progress-percent-text pb-8">{{downloadProgress + '%'}}</div>
                <div class="sb-accordian-grey-text p-0">
                    {{ contentName }}
                  <div class="meta-info font-weight-bold py-8">
                    {{ constContentSize }}
                  </div>
                </div>
              </div>
            </div>
        </ion-content>
      <ion-footer>
        <div class="sb-popover-footer">
          <button class="sb-popover-action-btn sb-btn sb-btn-normal sb-btn-info" (click)="cancelDownload()" *ngIf="contentName">{{ 'CANCEL' | translate }}</button>
        </div>
      </ion-footer>
    </div>
  </div>
  
  <!-- Update Popup -->
  <div class="sb-popover sb-popover-download" *ngIf="!this.showPopover && this.isUpdateAvail && contentName && this.popupUpdate">
      <div class="backdrop" (click)="togglePopover(this.showPopover); this.showPopover = !this.showPopover"></div>
      <div class="popover-content">
        <ion-header class="sb-popover-header">
          <ion-toolbar class="sb-popover-toolbar">
            <ion-title class="sb-popover-title" *ngIf="contentName && popupUpdate">{{ 'UPDATING' | translate }}
                <ion-button fill="clear" class="sb-modal-close"
                  (click)="togglePopover(this.showPopover); this.showPopover = !this.showPopover">{{'HIDE' | translate}}</ion-button>
              </ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content class="sb-popover-container noscroll">
            <div class="sb-popover-items" *ngIf = "contentName && this.isUpdateAvail">
                <div class="sb-popover-content-details">
                  <div class="sb-progress-percent-text pb-8">{{downloadProgress + '%'}}</div>
                  <div class="sb-accordian-grey-text p-0">
                      {{ contentName }}
                    <div class="meta-info font-weight-bold py-8">
                      {{ constContentSize }}
                    </div>
                  </div>
                </div>
              </div>
          </ion-content>
        <ion-footer>
          <div class="sb-popover-footer">
            <button class="sb-popover-action-btn sb-btn sb-btn-normal sb-btn-info" (click)="cancelDownload()" *ngIf="contentName">{{ 'CANCEL' | translate }}</button>
          </div>
        </ion-footer>
      </div>
    </div>
  <div class="sb-popover sb-popover-download collapsed" *ngIf="this.showPopover && collectionName">
    <div class="collpase">
      <ion-header class="sb-popover-header">
        <ion-toolbar class="sb-popover-toolbar">
          <ion-title padding-left padding-right class="sb-popover-title sb-popover-title-collapsed"> {{ 'DOWNLOADING_2' | translate }}
            <span class="meta-info">{{ currentCount }} / {{ queuedIdentifiers?.length }}</span>
            <ion-button fill="clear" class="sb-modal-close"
              (click)="togglePopover(this.showPopover); this.showPopover = !this.showPopover">{{ 'SHOW' | translate }}</ion-button>
          </ion-title>
        </ion-toolbar>
        <div class="popover-progress-container">
          <div class="progress-highlight" [ngStyle]="{'left': (currentCount/queuedIdentifiers.length)*100 + '%'}">  
          </div>
        </div>
      </ion-header>
    </div>
  </div>
  <div class="sb-popover sb-popover-download collapsed" *ngIf="this.showPopover && contentName && !popupUpdate && this.showDownload">
      <div class="collpase">
        <ion-header class="sb-popover-header">
          <ion-toolbar class="sb-popover-toolbar">
            <ion-title  padding-left padding-right class="sb-popover-title sb-popover-title-collapsed"> {{ 'DOWNLOADING_2' | translate }}
              <span class="meta-info">{{this.constContentSize}} </span>
              <ion-button fill="clear" class="sb-modal-close"
                (click)="togglePopover(this.showPopover); this.showPopover = !this.showPopover">{{ 'SHOW' | translate }}</ion-button>
            </ion-title>
          </ion-toolbar>
          <div class="popover-progress-container">
            <div class="progress-highlight" [ngStyle]="{'left': this.downloadProgress+ '%'}">  
            </div>
          </div>
        </ion-header>
      </div>
    </div>
    <!-- Update Popup-->
    <div class="sb-popover sb-popover-download collapsed" *ngIf="this.showPopover && contentName && popupUpdate">
        <div class="collpase">
          <ion-header class="sb-popover-header">
            <ion-toolbar class="sb-popover-toolbar">
              <ion-title padding-left padding-right class="sb-popover-title"> {{ 'UPDATING' | translate }}
                <span class="meta-info">{{this.constContentSize}}</span>
                <ion-button fill="clear" class="sb-modal-close"
                  (click)="togglePopover(this.showPopover); this.showPopover = !this.showPopover">{{ 'SHOW' | translate }} </ion-button>
              </ion-title>
            </ion-toolbar>
            <div class="popover-progress-container">
              <div class="progress-highlight" [ngStyle]="{'left': this.downloadProgress+ '%'}">  
              </div>
            </div>
          </ion-header>
        </div>
      </div>

./sb-download-popup.component.scss 

@import "src/assets/styles/base/_variables.scss";

:host {
  .sb-progress-percent-text {
    color: $primary-color;
    font-size: $h5-font-size;
    line-height: 1.375rem;
  }
  .p-0 {
    padding: 0 !important;
  }
  .sb-popover-download.collapsed {
    z-index: 9;
  }
  .sb-popover-title-collapsed{
    text-align: left !important;
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""