Sunbird Portal Documentation
  1. Components
  2. LoadOfflineContentComponent

File

src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-load-offline-content
styleUrls ./load-offline-content.component.scss
templateUrl ./load-offline-content.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(router: Router, connectionService: ConnectionService, resourceService: ResourceService, activatedRoute: ActivatedRoute, configService: ConfigService, electronService: ElectronService)
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:25
Parameters :
Name Type Optional
router Router No
connectionService ConnectionService No
resourceService ResourceService No
activatedRoute ActivatedRoute No
configService ConfigService No
electronService ElectronService No

Inputs

hideLoadButton
Type : boolean
Default value : false
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:15

Methods

addFontWeight
addFontWeight()
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:73
Returns : void
closeModal
closeModal()
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:64
Returns : void
handleImportContentDialog
handleImportContentDialog()
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:90
Returns : void
navigate
navigate()
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:69
Returns : void
ngOnDestroy
ngOnDestroy()
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:95
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:36
Returns : void
onChange
onChange(event)
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:57
Parameters :
Name Optional
event No
Returns : void
openImportContentDialog
openImportContentDialog()
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:49
Returns : void
setTelemetryData
setTelemetryData()
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:77
Returns : void

Properties

Public activatedRoute
Type : ActivatedRoute
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:31
addImportFontWeight
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:21
cancelTelemetryInteractEdata
Type : IInteractEventEdata
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:24
Public configService
Type : ConfigService
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:32
continueTelemetryInteractEdata
Type : IInteractEventEdata
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:25
Public electronService
Type : ElectronService
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:33
instance
Type : string
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:22
isConnected
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:18
modal
Decorators :
@ViewChild('modal')
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:17
onlineMsg
Type : string
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:20
Public resourceService
Type : ResourceService
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:30
Public router
Type : Router
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:28
selectedValue
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:19
showLoadContentModal
Type : any
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:16
Public unsubscribe$
Default value : new Subject<void>()
Defined in src/app/modules/shared/components/load-offline-content/load-offline-content.component.ts:23
 
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { ElectronService } from '../../../core/services/electron/electron.service';
import { Component, OnInit, ViewChild, OnDestroy, Input } from '@angular/core';
import { ResourceService, ConnectionService, ConfigService } from '../../services';
import { Router, ActivatedRoute } from '@angular/router';
import * as _ from 'lodash-es';
import { IInteractEventEdata } from '@sunbird/telemetry';
@Component({
  selector: 'app-load-offline-content',
  templateUrl: './load-offline-content.component.html',
  styleUrls: ['./load-offline-content.component.scss']
})
export class LoadOfflineContentComponent implements OnInit, OnDestroy  {
  @Input() hideLoadButton = false;
  showLoadContentModal: any;
  @ViewChild('modal') modal;
  isConnected;
  selectedValue;
  onlineMsg: string;
  addImportFontWeight;
  instance: string;
  public unsubscribe$ = new Subject<void>();
  cancelTelemetryInteractEdata: IInteractEventEdata;
  continueTelemetryInteractEdata: IInteractEventEdata;

  constructor(
    public router: Router,
    private connectionService: ConnectionService,
    public resourceService: ResourceService,
    public activatedRoute: ActivatedRoute,
    public configService: ConfigService,
    public electronService: ElectronService
  ) { }

  ngOnInit() {
    this.instance = _.upperCase(this.resourceService.instance);
    this.connectionService.monitor().pipe(takeUntil(this.unsubscribe$)).subscribe(isConnected => {
      this.isConnected = isConnected;
      this.selectedValue = this.isConnected ? 'browse' : 'import';
      this.addFontWeight();
      this.setTelemetryData();
    });
    if (this.hideLoadButton) {
      this.handleImportContentDialog();
    }
  }

  openImportContentDialog() {
    this.electronService.get({url : this.configService.urlConFig.URLS.ELECTRON_DIALOG.CONTENT_IMPORT}).subscribe(response => {
      console.log('import dialog box opened', response);
    }, error => {
      console.log('error while showing import dialog box');
    });
  }

  onChange(event) {
    this.selectedValue = event;
    event === 'import' ? document.getElementById('online')['checked'] = false : document.getElementById('offline')['checked'] = false;
    this.addFontWeight();
    this.setTelemetryData();
  }

  closeModal() {
    this.selectedValue = this.isConnected ? 'browse' : 'import';
    this.showLoadContentModal = false;
  }

  navigate() {
    this.selectedValue === 'browse' ? this.router.navigate(['/explore/1'], { queryParams: { selectedTab: 'all' }}) : this.openImportContentDialog();
    this.modal.deny();
  }
  addFontWeight() {
    this.addImportFontWeight =  this.selectedValue === 'import' ? true : false;
  }

  setTelemetryData() {
    this.cancelTelemetryInteractEdata = {
      id: 'cancel-load-content',
      type: 'click',
      pageid: _.get(this.activatedRoute.snapshot.data.telemetry, 'pageid')
    };
    this.continueTelemetryInteractEdata = {
      id: 'load-content-from-' + this.selectedValue,
      type: 'click',
      pageid: _.get(this.activatedRoute.snapshot.data.telemetry, 'pageid')
    };
  }

  handleImportContentDialog() {
    this.showLoadContentModal = !this.showLoadContentModal;
  }


  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}

<!--Load content-->
<div class="load-content-section mr-16 p-24 mb-24" *ngIf="!hideLoadButton">
  <div class="load-content-title d-flex">{{resourceService?.frmelmnts?.lbl?.downloadBooks}}</div>
  <button class="sb-btn sb-btn-secondary sb-btn-normal my-8 w-100 fs-1 sb-offline-load-content-btn" type="button" tabindex="0" (click)="showLoadContentModal = true">
    {{resourceService?.frmelmnts?.btn?.loadContent}} </button>
</div>
<!--Load content-->
<app-modal-wrapper *ngIf="showLoadContentModal" [config]="{disableClose: true, size: 'normal'}" (dismiss)="closeModal()"
  #modal>
  <ng-template sbModalContent>
    <div class="sb-modal">
      <div class="transition ui dimmer page modals active visible">
        <div class="ui modal transition active visible normal">
          <div class="sb-modal-header font-weight-normal">{{resourceService?.frmelmnts?.lbl?.loadContentFrom}}</div>
          <div class="sb-modal-content">
            <div class="p-8">
              <div class="d-flex flex-dc sb-radio-btn-checkbox sb-radio-btn-secondary m-0 mb-16"
                [ngClass]="{'disable-color': !isConnected}">
                <div class="d-flex flex-ai-center">
                  <input type="radio" id="online" name="example" [disabled]="!isConnected" [checked]="isConnected"
                    (change)="onChange('browse')">
                  <label for="online" class="mb-0" [ngClass]="{'font-weight-bold': !addImportFontWeight}"
                    id="browse">{{resourceService?.frmelmnts?.lbl?.library}}</label>
                  <div class="sb-label sb-label-table sb-label-error-0 ml-12" *ngIf="!isConnected"><span
                      class="sb-live-error mr-8"></span>{{resourceService?.frmelmnts?.lbl?.offline}}</div>
                  <div class="sb-label sb-label-table sb-label-success-0 ml-12" *ngIf="isConnected"><span
                      class="sb-live mr-8"></span>{{resourceService?.frmelmnts?.lbl?.online}}</div>
                </div>
                <div class="sb-radio-title py-8 fs-0-92">{{resourceService?.messages?.stmsg?.m0031 |
                  interpolate:'{instance}': instance}} &lrm;</div>
              </div>
              <div class="d-flex flex-dc sb-radio-btn-checkbox sb-radio-btn-secondary">
                <div class="d-flex flex-ai-center">
                  <input type="radio" id="offline" name="example2" [checked]="!isConnected"
                    (change)="onChange('import')">
                  <label class="font-weight-bold mb-0" id="" for="offline"
                    [ngClass]="{'font-weight-bold': addImportFontWeight}">{{resourceService?.frmelmnts?.lbl?.drive}}</label>
                </div>
                <div class="sb-radio-title py-8 fs-0-92">{{resourceService?.messages?.stmsg?.m0036 |
                  interpolate:'{instance}': instance}} &lrm;</div>
              </div>
            </div>
          </div>
          <div class="sb-modal-actions">
            <button class="sb-btn sb-btn-normal sb-btn-primary" (click)="navigate()" tabindex="0" appTelemetryInteract
              [telemetryInteractEdata]="continueTelemetryInteractEdata">{{resourceService?.frmelmnts?.lbl?.continue}}</button>
            <button type="button" class="sb-btn sb-btn-outline-primary sb-btn-normal" (click)="closeModal()"
              tabindex="0" appTelemetryInteract
              [telemetryInteractEdata]="cancelTelemetryInteractEdata">{{resourceService?.frmelmnts?.btn?.cancel}}</button>
          </div>
        </div>
      </div>
    </div>
  </ng-template>
</app-modal-wrapper>

./load-offline-content.component.scss 

@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.load-content-section{
    border-radius: calculateRem(24px);
    background-color: var(--sbt-filter-bar-bg);
    position: relative;
    z-index: 9;
    .load-content-title{
      font-size: calculateRem(14px);
    }
}
.sb-offline-load-content-btn{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""