File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Outputs
|
|
|
Outputs
|
close
|
Type : EventEmitter
|
|
|
Methods
|
addFontWeight
|
addFontWeight()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
openImportContentDialog
|
openImportContentDialog()
|
|
|
|
|
|
setTelemetryData
|
setTelemetryData()
|
|
|
|
|
|
Public
activatedRoute
|
Type : ActivatedRoute
|
|
|
|
modal
|
Decorators :
@ViewChild('modal')
|
|
|
|
Public
router
|
Type : Router
|
|
|
|
Public
unsubscribe$
|
Default value : new Subject<void>()
|
|
|
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { Component, OnInit, Output, EventEmitter, ViewChild, OnDestroy } from '@angular/core';
import { ElectronDialogService } from './../../services';
import { ResourceService, ConnectionService } from '@sunbird/shared';
import { Router, ActivatedRoute } from '@angular/router';
import * as _ from 'lodash-es';
import { IInteractEventEdata } from '@sunbird/telemetry';
@Component({
selector: 'app-load-content',
templateUrl: './load-content.component.html',
styleUrls: ['./load-content.component.scss']
})
export class LoadContentComponent implements OnInit, OnDestroy {
@ViewChild('modal') modal;
isConnected;
selectedValue;
@Output() close = new EventEmitter();
onlineMsg: string;
addImportFontWeight;
instance: string;
public unsubscribe$ = new Subject<void>();
cancelTelemetryInteractEdata: IInteractEventEdata;
continueTelemetryInteractEdata: IInteractEventEdata;
constructor(
public router: Router,
private connectionService: ConnectionService,
public resourceService: ResourceService,
private electronDialogService: ElectronDialogService,
public activatedRoute: ActivatedRoute
) { }
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();
});
}
openImportContentDialog() {
this.electronDialogService.showContentImportDialog();
}
onChange(event) {
this.selectedValue = event;
event === 'import' ? document.getElementById('online')['checked'] = false : document.getElementById('offline')['checked'] = false;
this.addFontWeight();
this.setTelemetryData();
}
closeModal() {
this.close.emit();
this.modal.deny();
}
navigate() {
this.selectedValue === 'browse' ? this.router.navigate(['/browse']) : 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')
};
}
ngOnDestroy() {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
}
<app-modal-wrapper [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" tabindex="0" (click)="navigate()" appTelemetryInteract
[telemetryInteractEdata]="continueTelemetryInteractEdata">{{resourceService?.frmelmnts?.lbl?.continue}}</button>
<button type="button" class="sb-btn sb-btn-outline-primary sb-btn-normal" tabindex="0"
(click)="closeModal()" 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 *;
.sb-modal{
.disable-color{
color: var(--gray-400);
opacity: 0.5;
}
.sb-radio-title{
padding-left: 1.5rem;
padding-right: 0;
}
.sb-label-table .sb-live-error{
height: 0.5rem;
width: 0.5rem;
display: inline-block;
border-radius: 50%;
background: var(--tertiary-100);
}
}
Legend
Html element with directive