File
Implements
Methods
|
Public
navigateToSearch
|
navigateToSearch()
|
|
|
|
|
|
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
Public
activatedRoute
|
Type : ActivatedRoute
|
|
|
|
Public
instanceName
|
|
|
used to store insatnce name
|
|
layoutConfiguration
|
Type : any
|
|
|
|
Public
router
|
Type : Router
|
|
|
To navigate to other pages
|
|
Public
searchKeyword
|
|
|
used to store searched keyword
|
|
Public
unsubscribe$
|
Default value : new Subject<void>()
|
|
|
import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import {ResourceService, NavigationHelperService, LayoutService} from '@sunbird/shared';
import { Router, ActivatedRoute } from '@angular/router';
import { IImpressionEventInput } from '@sunbird/telemetry';
import * as _ from 'lodash-es';
import {takeUntil} from 'rxjs/operators';
import {Subject} from 'rxjs';
@Component({
selector: 'app-get',
templateUrl: './get.component.html',
styleUrls: ['./get.component.scss']
})
export class GetComponent implements OnInit, AfterViewInit, OnDestroy {
/**
* telemetryImpression
*/
telemetryImpression: IImpressionEventInput;
/**
* reference of ResourceService
*/
public resourceService: ResourceService;
/**
* used to store insatnce name
*/
public instanceName;
/**
* used to store searched keyword
*/
public searchKeyword;
/**
* To navigate to other pages
*/
public router: Router;
instance: string;
layoutConfiguration: any;
public unsubscribe$ = new Subject<void>();
constructor(resourceService: ResourceService, router: Router, public activatedRoute: ActivatedRoute,
public navigationhelperService: NavigationHelperService, public layoutService: LayoutService) {
this.resourceService = resourceService;
this.router = router;
}
ngOnInit() {
EkTelemetry.config.batchsize = 2;
this.instance = _.upperCase(this.resourceService.instance);
this.initLayout();
}
initLayout() {
this.layoutConfiguration = this.layoutService.initlayoutConfig();
this.layoutService.switchableLayout().pipe(takeUntil(this.unsubscribe$)).subscribe(layoutConfig => {
if (layoutConfig != null) {
this.layoutConfiguration = layoutConfig.layout;
}
});
}
ngAfterViewInit () {
setTimeout(() => {
this.telemetryImpression = {
context: {
env: this.activatedRoute.snapshot.data.telemetry.env
},
edata: {
type: this.activatedRoute.snapshot.data.telemetry.type,
pageid: this.activatedRoute.snapshot.data.telemetry.pageid,
uri: this.router.url,
duration: this.navigationhelperService.getPageLoadTime()
}
};
});
}
public navigateToSearch() {
sessionStorage.removeItem('l1parent'); // l1parent value is removed (SB-19982)
if (this.searchKeyword) {
this.router.navigate(['/get/dial', _.trim(this.searchKeyword)]);
}
}
ngOnDestroy() {
EkTelemetry.config.batchsize = 10;
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
}
<app-landing-section [noTitle]="true" [layoutConfiguration]="layoutConfiguration">
</app-landing-section>
<div [ngClass]="layoutConfiguration ? 'sbt-container relative9 sbt-inside-page-container':''" >
<div [appTelemetryImpression]="telemetryImpression" class="sb-explore-qr-page-cover">
<div class="ui container stackable two column grid sb-explore-qr-container">
<div class="column dial-section-column pr-60">
<h4>
{{resourceService?.frmelmnts?.lbl?.exploreContentOn | interpolate:'{instance}': instance}}
</h4>
<p>
{{resourceService?.frmelmnts?.lbl?.startExploringContentBySearch}}
</p>
<div class="sb-search-box large dial-section-input sbt-dialcode-inputsearch">
<div class="input-div relative">
<i class="search icon"></i>
<input class="sb-search-input" type="text" name="search" (keyup.enter)="navigateToSearch()"
[(ngModel)]="searchKeyword" autofocus
placeholder="{{resourceService?.frmelmnts?.lbl?.enterDialCode}}"
title="Search"/>
</div>
<button class="sb-btn sb-btn-normal sbt-dialcode-btn" tabindex="0" (click)="navigateToSearch()">Search</button>
</div>
<!-- <div class="ui fluid icon input dial-section-input">
<input type="text" name="search" (keyup.enter)="navigateToSearch()" [(ngModel)]="searchKeyword"
placeholder="{{resourceService?.frmelmnts?.lbl?.searchForContent}}" title="Search" />
<i class="search icon dialcode-search-icon" (click)="navigateToSearch()"></i>
</div> -->
</div>
<div class="column dial-scan-column px-60 text-center">
<!-- <h5 class="sb-text-gray">
{{resourceService?.frmelmnts?.lbl?.whatsQRCode}}</h5> -->
<div class="ui large image">
<img src="{{'assets/images/Dialcode.png' | cdnprefixurl}}" alt="Dial code image">
</div>
<!-- <p class="text-align-left sb-text-gray pt-20">
{{resourceService?.frmelmnts?.lbl?.dialCodeDescriptionGetPage}}
</p> -->
</div>
</div>
</div>
</div>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.sb-explore-qr-page-cover {
padding: calculateRem(32px) 0 0 0;
min-height: calc(100vh - 14.375rem);
}
/*get dial code page responsive css*/
.dial-section-input {
margin-top: 11em;
}
@media screen and (min-width: 240px) and (max-width: 768px) {
.dial-section-input {
margin-top: 3em;
}
}
.sb-explore-qr-container {
justify-content: center;
align-items: stretch;
align-content: space-between;
.dial-section-column {
border-right:calculateRem(1px) solid rgba(var(--rc-rgba-gray), 0.1);
flex:50%;
padding-left: 0;
h1 {
color: var(--gray-800); font-size: var(--h5-font-size);
}
p {
color: var(--gray-800);font-size: var(--font-size-base);
}
}
.dial-scan-column {
flex:50%;
h5 {
margin-top:calculateRem(40px);
}
}
}
.pr-60{
padding-right: calculateRem(60px) !important;
}
Legend
Html element with directive