Sunbird Portal Documentation
  1. Components
  2. OfflineApplicationDownloadComponent

File

src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts

Implements

OnInit AfterViewInit

Metadata

selector app-offline-application-download
styleUrls ./offline-application-download.component.scss
templateUrl ./offline-application-download.component.html

Index

Properties
Methods

Constructor

constructor(resourceService: ResourceService, router: Router, deviceDetectorService: DeviceDetectorService)
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:34
Parameters :
Name Type Optional
resourceService ResourceService No
router Router No
deviceDetectorService DeviceDetectorService No

Methods

downloadApp
downloadApp(downloadApp: string)
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:83
Parameters :
Name Type Optional
downloadApp string No
Returns : void
ngAfterViewInit
ngAfterViewInit()
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:64
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:38
Returns : void
setTelemetryData
setTelemetryData()
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:70
Returns : void

Properties

Public appDownloadUrl
Default value : (<HTMLInputElement>document.getElementById('offlineDesktopAppDownloadUrl')) ? (<HTMLInputElement>document.getElementById('offlineDesktopAppDownloadUrl')).value : ''
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:33
Public desktopAppReleaseDate
Default value : (<HTMLInputElement>document.getElementById('offlineDesktopAppReleaseDate')) ? (<HTMLInputElement>document.getElementById('offlineDesktopAppReleaseDate')).value : ''
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:22
Public desktopAppSupportedLanguage
Default value : (<HTMLInputElement>document.getElementById('offlineDesktopAppSupportedLanguage')) ? (<HTMLInputElement>document.getElementById('offlineDesktopAppSupportedLanguage')).value : ''
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:30
Public desktopAppVersion
Default value : (<HTMLInputElement>document.getElementById('offlineDesktopAppVersion')) ? (<HTMLInputElement>document.getElementById('offlineDesktopAppVersion')).value : ''
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:26
Public deviceDetectorService
Type : DeviceDetectorService
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:36
instance
Type : string
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:16
otherOption1
Type : string
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:19
otherOption2
Type : string
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:20
recomanded_download
Type : string
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:17
recomandedOS
Type : string
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:18
Public resourceService
Type : ResourceService
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:36
Public router
Type : Router
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:36
Public telemetryImpression
Type : IImpressionEventInput
Defined in src/app/modules/shared/components/offline-application-download/offline-application-download.component.ts:15
 
import { Router } from '@angular/router';
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ResourceService } from './../../services';
import { IImpressionEventInput } from '@sunbird/telemetry';
import { DeviceDetectorService } from 'ngx-device-detector';
import * as _ from 'lodash-es';

@Component({
  selector: 'app-offline-application-download',
  templateUrl: './offline-application-download.component.html',
  styleUrls: ['./offline-application-download.component.scss']
})
export class OfflineApplicationDownloadComponent implements OnInit, AfterViewInit {

  public telemetryImpression: IImpressionEventInput;
  instance: string;
  recomanded_download: string;
  recomandedOS: string;
  otherOption1: string;
  otherOption2: string;
  /* it stores the release date of the offline desktop app from env variable.*/
  public desktopAppReleaseDate = (<HTMLInputElement>document.getElementById('offlineDesktopAppReleaseDate')) ?
  (<HTMLInputElement>document.getElementById('offlineDesktopAppReleaseDate')).value : '';

  /* it stores the version of the offline desktop app from env variable.*/
  public desktopAppVersion = (<HTMLInputElement>document.getElementById('offlineDesktopAppVersion')) ?
  (<HTMLInputElement>document.getElementById('offlineDesktopAppVersion')).value : '';

  /* it stores the supported languages of offline desktop app from env variable.*/
  public desktopAppSupportedLanguage = (<HTMLInputElement>document.getElementById('offlineDesktopAppSupportedLanguage')) ?
  (<HTMLInputElement>document.getElementById('offlineDesktopAppSupportedLanguage')).value : '';

  public appDownloadUrl = (<HTMLInputElement>document.getElementById('offlineDesktopAppDownloadUrl')) ?
  (<HTMLInputElement>document.getElementById('offlineDesktopAppDownloadUrl')).value : '';

  constructor( public resourceService: ResourceService, public router: Router, public deviceDetectorService: DeviceDetectorService) { }

  ngOnInit() {
    this.instance = _.upperCase(this.resourceService.instance);
    const deviceInfo = this.deviceDetectorService.getDeviceInfo();
    const userAgent = deviceInfo.userAgent;
    const os = deviceInfo.os;
    this.recomanded_download = _.get(this.resourceService, 'frmelmnts.btn.downloadAppForWindows32');
    this.otherOption1 = _.get(this.resourceService, 'frmelmnts.btn.downloadAppForWindows64');
    this.otherOption2 = _.get(this.resourceService, 'frmelmnts.btn.downloadAppForLinux');
    if (os.toLowerCase() === 'windows') {
      if (userAgent.toLowerCase().indexOf('win32') >= 0 ) {
        this.recomanded_download = _.get(this.resourceService, 'frmelmnts.btn.downloadAppForWindows32');
        this.otherOption1 = _.get(this.resourceService, 'frmelmnts.btn.downloadAppForWindows64');
        this.otherOption2 = _.get(this.resourceService, 'frmelmnts.btn.downloadAppForLinux');
      } else if (userAgent.toLowerCase().indexOf('win64') >= 0) {
        this.recomanded_download = _.get(this.resourceService, 'frmelmnts.btn.downloadAppForWindows64');
        this.otherOption1 = _.get(this.resourceService, 'frmelmnts.btn.downloadAppForWindows32');
        this.otherOption2 = _.get(this.resourceService, 'frmelmnts.btn.downloadAppForLinux');
      }
    } else if (os.toLowerCase() === 'linux') {
      this.recomandedOS = 'linux';
      this.recomanded_download = _.get(this.resourceService, 'frmelmnts.btn.downloadAppForLinux');
      this.otherOption1 = _.get(this.resourceService, 'frmelmnts.btn.downloadAppForWindows32');
      this.otherOption2 = _.get(this.resourceService, 'frmelmnts.btn.downloadAppForWindows64');
    }
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.setTelemetryData();
    });
  }

  setTelemetryData() {
    this.telemetryImpression = {
      context: {
        env: 'download-app'
      },
      edata: {
        type: 'view',
        pageid: 'offline-application-download',
        uri: this.router.url
      }
    };
  }

  downloadApp(downloadApp: string) {
    const appDownloadUrl = this.appDownloadUrl;
    if (appDownloadUrl) {
      switch (downloadApp) {
        case _.get(this.resourceService, 'frmelmnts.btn.downloadAppForLinux'):
          window.open(appDownloadUrl + '/desktop/latest/' + this.instance + '_' + this.desktopAppVersion + '_linux64bit.deb');
          break;
        case _.get(this.resourceService, 'frmelmnts.btn.downloadAppForWindows32'):
          window.open(appDownloadUrl + '/desktop/latest/' + this.instance + '_' + this.desktopAppVersion + '_windows32bit.exe');
          break;
        case _.get(this.resourceService, 'frmelmnts.btn.downloadAppForWindows64'):
          window.open(appDownloadUrl + '/desktop/latest/' + this.instance + '_' + this.desktopAppVersion + '_windows64bit.exe');
          break;
      }
    }
    // window.open(this.appDownloadUrl);
  }
}

<div class="ui container" [appTelemetryImpression]="telemetryImpression">
  <div class="ui stackable grid mt-32">
    <div class="seven wide column pr-8">
      <div class="offline-download-card">
        <h2 class="offline-download-card__heading">
          {{resourceService?.frmelmnts?.lbl?.downloadAppLite | interpolate:'{instance}': instance}}</h2>
        <dl class="mt-16">
          <div class="d-flex" *ngIf="desktopAppVersion">
            <dt class="description-list-key">{{resourceService?.frmelmnts?.lbl?.versionKey}}</dt>
            <dd class="description-list-value">{{desktopAppVersion}}</dd>
          </div>
          <div class="d-flex mt-8" *ngIf="desktopAppReleaseDate">
            <dt class="description-list-key">{{resourceService?.frmelmnts?.lbl?.releaseDateKey}}</dt>
            <dd class="description-list-value">{{desktopAppReleaseDate}}</dd>
          </div>
          <div class="d-flex mt-8" *ngIf="desktopAppSupportedLanguage">
            <dt class="description-list-key">{{resourceService?.frmelmnts?.lbl?.supportedLanguages}}</dt>
            <dd class="description-list-value">{{desktopAppSupportedLanguage}}</dd>
          </div>
        </dl>
        <div class="offline-download-card__description mt-32">
          {{resourceService?.frmelmnts?.lbl?.desktopAppDescription | interpolate:'{instance}': instance | interpolate:'{instance}': instance}}
        </div>
        <ul class="sb-circular-list mt-32">
          <li class="sb-circular-list-item mb-0">{{resourceService?.frmelmnts?.lbl?.desktopAppFeature001}}</li>
          <li class="sb-circular-list-item mb-0">{{resourceService?.frmelmnts?.lbl?.desktopAppFeature002}}</li>
          <li class="sb-circular-list-item mb-0">{{resourceService?.frmelmnts.lbl?.desktopAppFeature003}}</li>
        </ul>
      </div>
    </div>
    <div class="five wide column pl-0">
      <div class="offline-download-card offline-page-content">
        <div class="d-flex flex-ai-center flex-jc-center text-center flex-dc offline-page-content">
          <img src="../assets/images/offline-computer.png" alt="download {{instance}} app" class="desktop-icon">
          <div class="container" style="max-width:280px; width:100%">
          <div class="d-flex flex-dc text-align-left mt-16 w-100">
            <div class="d-flex cursor-pointer">
              {{resourceService?.frmelmnts?.lbl?.downloadAppRecommended}}
            </div>
            <button appTelemetryInteract
              [telemetryInteractEdata]="{id:'offlineAppDownload-button' , type:'click' , pageid:'offline-application-download' }"
              type="button" class="w-100 d-flex flex-ai-center py-0 sb-btn sb-btn-primary sb-btn-normal mt-8"
              tabindex="0" (click)="downloadApp(recomanded_download)">
              <span class="mr-8" *ngIf="recomandedOS!=='linux'"><img src="assets/images/windows-white.svg" width="16px"></span>
              <span class="mr-8" *ngIf="recomandedOS==='linux'"><img src="assets/images/ubuntu-white.svg" width="16px"></span>
              {{recomanded_download}}&#x200E;</button>
          </div>
          <div class="d-flex flex-dc text-align-left mt-16 w-100">
            <div class="d-flex cursor-pointer">
              {{resourceService?.frmelmnts?.lbl?.downloadAppOtherversions}}
            </div>
            <button appTelemetryInteract
              [telemetryInteractEdata]="{id:'offlineAppDownload-button' , type:'click' , pageid:'offline-application-download' }"
              type="button" class="w-100 d-flex flex-ai-center py-0 sb-btn sb-btn-outline-primary sb-btn-normal mt-8"
              tabindex="0" (click)="downloadApp(otherOption1)">
              <span class="mr-8"><img src="assets/images/windows.svg" width="16px"></span>
              {{otherOption1}}&#x200E;</button>
            <button appTelemetryInteract
              [telemetryInteractEdata]="{id:'offlineAppDownload-button' , type:'click' , pageid:'offline-application-download' }"
              type="button" class="w-100 d-flex flex-ai-center py-0 sb-btn sb-btn-outline-primary sb-btn-normal mt-10 "
              tabindex="0" (click)="downloadApp(otherOption2)">
              <span class="mr-8" *ngIf="recomandedOS!=='linux'"><img src="assets/images/ubuntu.svg" width="16px"></span>
              <span class="mr-8" *ngIf="recomandedOS==='linux'"><img src="assets/images/windows.svg" width="16px"></span>
              {{otherOption2}}&#x200E;</button>
          </div>
          <!-- <div class="offline-download-card__extra my-8 cursor-pointer">
            {{resourceService?.frmelmnts?.btn?.downloadInstruction}}</div>
          </div> -->
         </div>
        </div>
      </div>
    </div>
  </div>

./offline-application-download.component.scss 

@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;

.offline-page-content {
    height: 100%;
    .desktop-icon{
      width:100%;
      max-width: calculateRem(300px);
    }
  }
  .offline-download-card {
    background-color: var(--white);
    box-shadow: 0 calculateRem(10px) calculateRem(10px) 0 rgba(var(--rc-rgba-black), 0.1);
    padding: calculateRem(40px);
    &__heading {
      color: var(--primary-color);
      font-size: calculateRem(18px);
      font-weight: bold;
    }
    &__description {
      font-size: calculateRem(14px);
      color:var(--gray-800);
    }
  &__extra {
      color: var(--primary-color);
      font-size: calculateRem(12px);
    }
  }
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""