From 6c3e874bf34caecfa1c4dc942437fd75c12e7a8b Mon Sep 17 00:00:00 2001 From: Raghavendra Shivhare Date: Fri, 1 Feb 2019 20:43:46 +0530 Subject: [PATCH] Issue #SB-10418 fix: update content listener added in qr-result page --- src/pages/qr-code-result/qr-code-result.html | 13 +- src/pages/qr-code-result/qr-code-result.scss | 286 ++++++++++--------- src/pages/qr-code-result/qr-code-result.ts | 147 +++++++++- 3 files changed, 310 insertions(+), 136 deletions(-) diff --git a/src/pages/qr-code-result/qr-code-result.html b/src/pages/qr-code-result/qr-code-result.html index 8a63c2561..97dd27e8f 100644 --- a/src/pages/qr-code-result/qr-code-result.html +++ b/src/pages/qr-code-result/qr-code-result.html @@ -60,4 +60,15 @@
{{content?.contentData?.name}}
- \ No newline at end of file + + + +
+ {{ 'LOADING_CONTENTS' | translate: {'%s': downloadProgress ? downloadProgress : 0} }} + +
+ + +
\ No newline at end of file diff --git a/src/pages/qr-code-result/qr-code-result.scss b/src/pages/qr-code-result/qr-code-result.scss index 42ec106a1..416261460 100644 --- a/src/pages/qr-code-result/qr-code-result.scss +++ b/src/pages/qr-code-result/qr-code-result.scss @@ -1,144 +1,168 @@ page-qr-code-result{ -.card-container{ - margin-bottom: 20px; - padding: 0 !important; -} - -.P010{ - padding:0 10px; -} - -.PT0{ - padding-top: 0 !important; -} - -[dir="ltr"] .card-content-md, [dir="rtl"] .card-content-md{ - padding: 5px !important; -} - -.card.card-md { - border-radius: 4px; - box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16); - background-color: #ffffff; - border: solid 0.5px #cccccc; - position: relative; - .card-content-md { - padding: 7px !important; + .card-container{ + margin-bottom: 20px; + padding: 0 !important; } - .button.button-block.button-block-md { - margin: 0; - border-radius: 0; - } - - .badge { - @include padding(5px, 15px); - color: #333; - border-radius: 100px; - border: solid 0.5px #c6dbd8; - font-size: 11px; - @include margin(null, 10px, null, null); - } - - .author { - font-size: 11px; - font-weight: normal; - font-style: normal; - font-stretch: normal; - line-height: normal; - letter-spacing: normal; - color: #666666; - } - - .size{ - font-size: 11px; - color: #666666; - } - - .name, .author{ - margin-bottom: 5px; + + .P010{ + padding:0 10px; } - - .name{ - // min-height: 48px; - display: -webkit-box; - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - font-size: 14px !important; - color: #333333; - min-height: 32px; + + .PT0{ + padding-top: 0 !important; } - - .bottom-fix{ - position: absolute; - bottom: 0; + + [dir="ltr"] .card-content-md, [dir="rtl"] .card-content-md{ + padding: 5px !important; } - - - - .top { - min-height:15vh; - // background: #E9E9E9; - .img-container { - border: 1px solid #c6dbd8; - padding: 0 !important; - background: #E9E9E9; - min-height: 18vh; - max-height: 18vh; - border-radius: 4px; - img { - max-height: 100%; - margin: 0 auto; - width: auto; - transform: translateY(-56%); - position: relative; - top: 50%; - transform: perspective(1px) translateY(-50%); + + .card.card-md { + border-radius: 4px; + box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16); + background-color: #ffffff; + border: solid 0.5px #cccccc; + position: relative; + .card-content-md { + padding: 7px !important; + } + .button.button-block.button-block-md { + margin: 0; + border-radius: 0; + } + + .badge { + @include padding(5px, 15px); + color: #333; + border-radius: 100px; + border: solid 0.5px #c6dbd8; + font-size: 11px; + @include margin(null, 10px, null, null); + } + + .author { + font-size: 11px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: normal; + letter-spacing: normal; + color: #666666; + } + + .size{ + font-size: 11px; + color: #666666; + } + + .name, .author{ + margin-bottom: 5px; + } + + .name{ + // min-height: 48px; + display: -webkit-box; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + font-size: 14px !important; + color: #333333; + min-height: 32px; + } + + .bottom-fix{ + position: absolute; + bottom: 0; + } + + + + .top { + min-height:15vh; + // background: #E9E9E9; + .img-container { + border: 1px solid #c6dbd8; + padding: 0 !important; + background: #E9E9E9; + min-height: 18vh; + max-height: 18vh; + border-radius: 4px; + img { + max-height: 100%; + margin: 0 auto; + width: auto; + transform: translateY(-56%); + position: relative; + top: 50%; + transform: perspective(1px) translateY(-50%); + } } + + } + } + + ul.breadcrumbs{ + list-style: none; + padding: 0; + margin: 0; + li{ + display: inline-block; + color: #007aff; + @extend .font-weight-bold; + font-size: 10px; + } + + + li:after{ + content: '\003e'; + color: #979797; + height: 0; + width: 0; + margin: 0 5px; + } + li:last-child:after{ + content: none; } } -} - -ul.breadcrumbs{ - list-style: none; - padding: 0; - margin: 0; - li{ - display: inline-block; - color: #007aff; - @extend .font-weight-bold; - font-size: 10px; + + .custom-btn{ + background-color: #0076FE; } - - - li:after{ - content: '\003e'; - color: #979797; - height: 0; - width: 0; - margin: 0 5px; + + .custom-btn.play .arrow-right{ + width: 0; + height: 0; + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + border-left: 14px solid #fff; + margin-right: 8px; + } + + .loading-backdrop { + .backdrop-container { + width: 100%; + padding: 16px; + text-align: center; + position: absolute; + top: 50%; + margin-top: -50px; + } + + .backdrop-footer { + position: absolute; + width: 100%; + bottom: 0; + padding-bottom: 16px; + } + + background-color: #ffffff; + height: 100%; + z-index: 1000; + opacity: 1 !important; } - li:last-child:after{ - content: none; } -} - -.custom-btn{ - background-color: #0076FE; -} - -.custom-btn.play .arrow-right{ - width: 0; - height: 0; - border-top: 8px solid transparent; - border-bottom: 8px solid transparent; - border-left: 14px solid #fff; - margin-right: 8px; -} -} - - + + \ No newline at end of file diff --git a/src/pages/qr-code-result/qr-code-result.ts b/src/pages/qr-code-result/qr-code-result.ts index 1ac0f8f7a..6f55f6283 100644 --- a/src/pages/qr-code-result/qr-code-result.ts +++ b/src/pages/qr-code-result/qr-code-result.ts @@ -25,7 +25,8 @@ import { SharedPreferences, TabsPage, SuggestedFrameworkRequest, - FrameworkService + FrameworkService, + FileUtil } from 'sunbird'; import { ContentDetailsPage } from '../content-details/content-details'; import { EnrolledCourseDetailsPage } from '../enrolled-course-details/enrolled-course-details'; @@ -102,8 +103,13 @@ export class QrCodeResultPage { subjectList: Array = []; profileCategories: any; isSingleContent = false; + showLoading: Boolean; + isDownloadStarted: Boolean; @ViewChild(Navbar) navBar: Navbar; + downloadProgress: any = 0; + isDownloadCompleted: boolean; + isUpdateAvailable: boolean; constructor( public navCtrl: NavController, public navParams: NavParams, @@ -120,7 +126,8 @@ export class QrCodeResultPage { private preferences: SharedPreferences, private popOverCtrl: PopoverController, private commonUtilService: CommonUtilService, - private framework: FrameworkService + private framework: FrameworkService, + private fileUtil: FileUtil ) { this.defaultImg = 'assets/imgs/ic_launcher.png'; } @@ -146,11 +153,12 @@ export class QrCodeResultPage { this.isParentContentAvailable = false; this.identifier = this.content.identifier; } - + this.setContentDetails(this.identifier, true); this.getChildContents(); this.unregisterBackButton = this.platform.registerBackButtonAction(() => { this.handleBackButton(InteractSubtype.DEVICE_BACK_CLICKED); }, 10); + this.subscribeGenieEvent(); } ionViewDidLoad() { @@ -168,6 +176,8 @@ export class QrCodeResultPage { if (this.unregisterBackButton) { this.unregisterBackButton(); } + this.downloadProgress = 0; + this.events.unsubscribe('genie.event'); } handleBackButton(clickSource) { @@ -514,6 +524,136 @@ export class QrCodeResultPage { } } + /** + * Subscribe genie event to get content download progress + */ + subscribeGenieEvent() { + this.events.subscribe('genie.event', (data) => { + this.zone.run(() => { + data = JSON.parse(data); + const res = data; + console.log('Geni Event!'); + console.log(res); + + if (res.type === 'downloadProgress' && res.data.downloadProgress) { + if (res.data.downloadProgress === -1 || res.data.downloadProgress === '-1') { + this.downloadProgress = 0; + } else if (res.data.identifier === this.content.identifier) { + this.downloadProgress = res.data.downloadProgress; + } + + if (this.downloadProgress === 100) { + this.showLoading = false; + this.getChildContents(); + } + } + // Get child content + if (res.data && res.data.status === 'IMPORT_COMPLETED' && res.type === 'contentImport') { + + this.showLoading = false; + this.isDownloadStarted = false; + } + // For content update available + if (res.data && res.type === 'contentUpdateAvailable' && res.data.identifier === this.identifier) { + this.zone.run(() => { + if (this.parentContent) { + const parentIdentifier = this.parentContent.contentId || this.parentContent.identifier; + this.showLoading = true; + this.importContent([parentIdentifier], false); + } + }); + } + }); + }); + } + + /** + * To set content details in local variable + * @param {string} identifier identifier of content / course + */ + setContentDetails(identifier, refreshContentDetails: boolean | true) { + const option = { + contentId: identifier, + refreshContentDetails: refreshContentDetails, + attachFeedback: true, + attachContentAccess: true + }; + this.contentService.getContentDetail(option) + .then((data: any) => { + }) + .catch((error: any) => { + }); + } + + /** + * Function to get import content api request params + * + * @param {Array} identifiers contains list of content identifier(s) + * @param {boolean} isChild + */ + importContent(identifiers: Array, isChild: boolean, isDownloadAllClicked?) { + const option = { + contentImportMap: _.extend({}, this.getImportContentRequestBody(identifiers, isChild)), + contentStatusArray: [] + }; + + // Call content service + this.contentService.importContent(option) + .then((data: any) => { + this.zone.run(() => { + data = JSON.parse(data); + }); + }) + .catch((error: any) => { + this.zone.run(() => { + console.log('error while loading content details', error); + this.isDownloadStarted = false; + this.showLoading = false; + const errorRes = JSON.parse(error); + if (errorRes && (errorRes.error === 'NETWORK_ERROR' || errorRes.error === 'CONNECTION_ERROR')) { + this.commonUtilService.showToast('NEED_INTERNET_TO_CHANGE'); + } else { + this.commonUtilService.showToast('UNABLE_TO_FETCH_CONTENT'); + } + }); + }); + } + + /** + * Function to get import content api request params + * + * @param {Array} identifiers contains list of content identifier(s) + * @param {boolean} isChild + */ + getImportContentRequestBody(identifiers: Array, isChild: boolean) { + const requestParams = []; + _.forEach(identifiers, (value) => { + requestParams.push({ + isChildContent: isChild, + destinationFolder: this.fileUtil.internalStoragePath(), + contentId: value, + correlationData: this.corRelationList !== undefined ? this.corRelationList : [] + }); + }); + + return requestParams; + } + + cancelDownload() { + this.telemetryGeneratorService.generateCancelDownloadTelemetry(this.content); + this.contentService.cancelDownload(this.identifier).then(() => { + this.zone.run(() => { + this.showLoading = false; + this.navCtrl.pop(); + }); + }).catch(() => { + this.zone.run(() => { + this.showLoading = false; + this.navCtrl.pop(); + }); + }); + } + skipSteps() { this.telemetryGeneratorService.generateInteractTelemetry( InteractType.TOUCH, @@ -531,4 +671,3 @@ export class QrCodeResultPage { } } } -