File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
hideLoadButton
|
Type : boolean
|
Default value : false
|
|
|
Methods
|
addFontWeight
|
addFontWeight()
|
|
|
|
|
|
handleImportContentDialog
|
handleImportContentDialog()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
openImportContentDialog
|
openImportContentDialog()
|
|
|
|
|
|
setTelemetryData
|
setTelemetryData()
|
|
|
|
|
|
Public
activatedRoute
|
Type : ActivatedRoute
|
|
|
|
modal
|
Decorators :
@ViewChild('modal')
|
|
|
|
Public
router
|
Type : Router
|
|
|
|
showLoadContentModal
|
Type : any
|
|
|
|
Public
unsubscribe$
|
Default value : new Subject<void>()
|
|
|
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}} ‎</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}} ‎</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>
@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 with directive