Merge pull request #4 from dicdiksha/feat-82453-collabgeo-integration

collabgeo integration

src/app/client/src/app/app.module.ts

@@ -23,6 +23,7 @@ import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { TranslateStore } from '@ngx-translate/core';
 import { SbSearchFilterModule } from '@project-sunbird/common-form-elements';
+import { ModalModule } from 'ngx-bootstrap/modal';
 
 @NgModule({
   declarations: [
@@ -33,6 +34,7 @@ import { SbSearchFilterModule } from '@project-sunbird/common-form-elements';
     CoreModule,
     CommonModule,
     HttpClientModule,
+    ModalModule.forRoot(),
     SuiModalModule,
     SharedModule.forRoot(),
     WebExtensionModule.forRoot(),

src/app/client/src/app/modules/shared-feature/components/collection-player/collection-player.component.html

@@ -28,7 +28,7 @@
               <span *ngIf="collectionTreeNodes?.data?.gradeLevel">{{collectionTreeNodes?.data?.gradeLevel}}</span>
             </div>
           </div>
-          <div class="d-flex flex-ai-end flex-w-wrap content-header__buttons">
+          <div class="d-flex flex-ai-end content-header__buttons">
             <div *ngIf="isDesktopApp">
               <button type="button" class="sb-btn sb-btn-outline-primary sb-btn-normal mr-8"
                 *ngIf="isConnected && (checkStatus('DOWNLOADED')) && showUpdate" tabindex="0"
@@ -48,6 +48,16 @@
                 *ngIf="checkStatus('PAUSED')">{{resourceService.frmelmnts?.lbl?.downloadingPaused}}</button>
             </div>
 
+            <button type="button" *ngIf="collectionTreeNodes?.data?.subject == 'Mathematics' && ( 
+              collectionTreeNodes?.data?.gradeLevel.includes('Class 5') ||
+              collectionTreeNodes?.data?.gradeLevel.includes('Class 6') || 
+              collectionTreeNodes?.data?.gradeLevel.includes('Class 7') || 
+              collectionTreeNodes?.data?.gradeLevel.includes('Class 8') ||
+              collectionTreeNodes?.data?.gradeLevel.includes('Class 9')
+              )" (click)="openWebview()" tabindex="0" class="sb-btn sb-btn-normal sb-btn-outline-primary mr-8">
+                Use Geometry Tool
+              </button>
+
             <button type="button" *ngIf="!isCopyAsCourseClicked" tabindex="0"
               (click)="onShareLink();sharelinkModal=true;" class="sb-btn sb-btn-normal sb-btn-outline-primary mr-8">
               <i class="blue share alternate icon"></i> {{resourceService?.frmelmnts?.lbl?.share}}

src/app/client/src/app/modules/shared-feature/components/collection-player/collection-player.component.ts

@@ -18,6 +18,8 @@ import { PublicPlayerService } from '@sunbird/public';
 import { TocCardType, PlatformType } from '@project-sunbird/common-consumption';
 import { CsGroupAddableBloc } from '@project-sunbird/client-services/blocs';
 import { ContentManagerService } from '../../../public/module/offline/services';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { ContentModalComponent } from '../../content-modal/content-modal.component';
 
 @Component({
   selector: 'app-collection-player',
@@ -103,6 +105,7 @@ export class CollectionPlayerComponent implements OnInit, OnDestroy, AfterViewIn
   disableDelete: Boolean = false;
   isAvailableLocally = false;
   noContentMessage = '';
+  modalRef: BsModalRef;
 
   constructor(public route: ActivatedRoute, public playerService: PlayerService,
     private windowScrollService: WindowScrollService, public router: Router, public navigationHelperService: NavigationHelperService,
@@ -115,7 +118,7 @@ export class CollectionPlayerComponent implements OnInit, OnDestroy, AfterViewIn
     public publicPlayerService: PublicPlayerService, public coursesService: CoursesService,
     private utilService: UtilService, public contentManagerService: ContentManagerService,
     public connectionService: ConnectionService, private telemetryService: TelemetryService,
-    private offlineCardService: OfflineCardService) {
+    private offlineCardService: OfflineCardService, public modalService: BsModalService) {
     this.router.onSameUrlNavigation = 'ignore';
     this.collectionTreeOptions = this.configService.appConfig.collectionTreeOptions;
     this.playerOption = { showContentRating: true };
@@ -149,6 +152,15 @@ export class CollectionPlayerComponent implements OnInit, OnDestroy, AfterViewIn
     }
   }
 
+  openWebview() {
+    let siteUrl = 'https://collabgeo.nic.in/collabGeo';
+    localStorage.setItem('siteUrl',siteUrl);
+
+    this.modalRef = this.modalService.show(ContentModalComponent)
+    this.modalRef.setClass('modal-webview');
+
+  }
+
   initLayout() {
     this.layoutConfiguration = this.layoutService.initlayoutConfig();
     this.layoutService.switchableLayout().

src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.html

@@ -24,6 +24,17 @@ <h5 class="sb-color-primary font-weight-bold mb-0 sb__ellipsis" tabindex="0" rol
         </div>
       </div>
         <div class="d-flex flex-ai-end flex-w-wrap content-header__buttons ml-auto">
+
+          <a *ngIf="contentData?.subject == 'Mathematics' && (
+          contentData?.gradeLevel.includes('Class 5') ||
+          contentData?.gradeLevel.includes('Class 6') || 
+          contentData?.gradeLevel.includes('Class 7') || 
+          contentData?.gradeLevel.includes('Class 8') ||
+          contentData?.gradeLevel.includes('Class 9'))
+          " (click)="openWebview()" tabindex="0" class="sb-btn sb-btn-normal sb-btn-outline-primary mr-8">
+            Use Geometry Tool
+          </a>
+
           <a href="javascript:void(0)" tabindex="0" (click)="onShareLink();sharelinkModal=true;" class="sb-btn sb-btn-normal sb-btn-outline-primary mr-8">
               <i class="blue share alternate icon"></i>
               {{resourceService?.frmelmnts?.lbl?.share}}

src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.ts

@@ -13,6 +13,8 @@ import { takeUntil, mergeMap } from 'rxjs/operators';
 import { Subject, of, throwError } from 'rxjs';
 import { PublicPlayerService, ComponentCanDeactivate } from '@sunbird/public';
 import { CsGroupAddableBloc } from '@project-sunbird/client-services/blocs';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { ContentModalComponent } from '../../content-modal/content-modal.component';
 
 @Component({
   selector: 'app-content-player',
@@ -47,6 +49,7 @@ export class ContentPlayerComponent implements OnInit, AfterViewInit, OnDestroy,
   groupId: string;
   isQuestionSet = false;
   isDesktopApp = false;
+  modalRef: BsModalRef;
 
   @HostListener('window:beforeunload')
     canDeactivate() {
@@ -63,7 +66,9 @@ export class ContentPlayerComponent implements OnInit, AfterViewInit, OnDestroy,
     public copyContentService: CopyContentService, public permissionService: PermissionService,
     public contentUtilsServiceService: ContentUtilsServiceService, public popupControlService: PopupControlService,
     private configService: ConfigService,
-    public layoutService: LayoutService, public telemetryService: TelemetryService) {
+    public layoutService: LayoutService, public telemetryService: TelemetryService,
+    public modalService: BsModalService
+    ) {
     this.playerOption = {
       showContentRating: true
     };
@@ -99,6 +104,14 @@ export class ContentPlayerComponent implements OnInit, AfterViewInit, OnDestroy,
       });
   }
 
+  openWebview() {
+    let siteUrl = 'https://collabgeo.nic.in/collabGeo';
+    localStorage.setItem('siteUrl',siteUrl);
+
+    this.modalRef = this.modalService.show(ContentModalComponent)
+    this.modalRef.setClass('modal-webview');
+  }
+
   initLayout() {
     this.layoutConfiguration = this.layoutService.initlayoutConfig();
     this.layoutService.switchableLayout().

src/app/client/src/app/modules/shared-feature/content-modal/content-modal.component.html

@@ -0,0 +1,8 @@
+<div class="loading-wrapper" *ngIf="loading">
+    <span>
+        Loading Please wait...
+    </span>
+</div>
+
+<button (click)="closeModal()" class="close-button">x close</button>
+<object [data]="sanatizedUrl" allow-same-origin allowfullscreen frameborder="1"></object>

src/app/client/src/app/modules/shared-feature/content-modal/content-modal.component.scss

@@ -0,0 +1,45 @@
+object, iframe {
+    width: 100%;
+    height: 100vh;
+    object-fit: cover;
+}
+.loading-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100%;
+    span {
+        width: auto;
+        padding: 8px 16px;
+        color: #000;
+        font-weight: 600;
+        border-radius: 30px;
+        background: #fff;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-size: 14px;
+    }   
+}
+
+.close-button {
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    position: absolute;
+    right: 25px;
+    top: 108px;
+    background: #dc3545;
+    color: #fff;
+    border: 1px solid #dc3545;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    z-index: 0;
+    @media screen and (max-width: 991px) {
+        right: 10px;
+        top: 92px;
+    }
+}

src/app/client/src/app/modules/shared-feature/content-modal/content-modal.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentModalComponent } from './content-modal.component';
+
+describe('ContentModalComponent', () => {
+  let component: ContentModalComponent;
+  let fixture: ComponentFixture<ContentModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ContentModalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContentModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/client/src/app/modules/shared-feature/content-modal/content-modal.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+@Component({
+  selector: 'app-content-modal',
+  templateUrl: './content-modal.component.html',
+  styleUrls: ['./content-modal.component.scss']
+})
+export class ContentModalComponent implements OnInit {
+
+  // @Input() portalUrl: any;
+  sanatizedUrl: any;
+  loading: boolean = true;
+  currentSiteUrl: string = '';
+
+  constructor(
+    public modalRef: BsModalRef,
+    public sanatizer: DomSanitizer
+  )
+  {
+    this.currentSiteUrl = localStorage.getItem('siteUrl');
+    this.getUrl(this.currentSiteUrl);
+  }
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.loading = false;
+    }, 3000);
+  }
+
+  getUrl(url: any) {
+    this.sanatizedUrl = this.sanatizer.bypassSecurityTrustResourceUrl(url);
+    return this.sanatizedUrl;
+  }
+
+  closeModal() {
+    localStorage.removeItem('siteUrl');
+    this.modalRef.hide();
+  }
+
+}

src/app/client/src/app/modules/shared-feature/shared-feature.module.ts

@@ -24,6 +24,7 @@ import { LocationModule } from '../../plugins/location';
 import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { DashletModule } from  '@project-sunbird/sb-dashlet-v9';
 import { FrameworkCatLabelTranslatePipe } from './pipe/framework-label-translate/framework-label-translate.pipe';
+import { ContentModalComponent } from './content-modal/content-modal.component';
 
 export const csUserServiceFactory = (csLibInitializerService: CsLibInitializerService) => {
   if (!CsModule.instance.isInitialised) {
@@ -55,6 +56,7 @@ export const csNotificationServiceFactory = (csLibInitializerService: CsLibIniti
     LocationModule,
     DashletModule.forRoot()
   ],
+  entryComponents: [ContentModalComponent],
   providers:  [{ provide: 'CS_USER_SERVICE', useFactory: csUserServiceFactory, deps: [CsLibInitializerService] },
   { provide: 'CS_NOTIFICATION_SERVICE', useFactory: csNotificationServiceFactory, deps: [CsLibInitializerService] }],
   declarations: [ProfileFrameworkPopupComponent, TermsAndConditionsPopupComponent,
@@ -63,7 +65,7 @@ export const csNotificationServiceFactory = (csLibInitializerService: CsLibIniti
     UserOnboardingComponent,
     OnboardingUserSelectionComponent,
     ConfirmationPopupComponent, CertPreviewPopupComponent, ContentPlayerComponent, GlobalConsentPiiComponent,
-     CollectionPlayerComponent, YearOfBirthComponent, DashboardComponent,FrameworkCatLabelTranslatePipe
+     CollectionPlayerComponent, YearOfBirthComponent, DashboardComponent,FrameworkCatLabelTranslatePipe, ContentModalComponent
   ],
   exports: [ProfileFrameworkPopupComponent, TermsAndConditionsPopupComponent,
     OtpPopupComponent, BatchInfoComponent, SsoMergeConfirmationComponent, ValidateTeacherIdentifierPopupComponent,

src/app/client/src/assets/styles/styles.scss

@@ -17,3 +17,15 @@
 // @import '~@swimlane/ngx-datatable/src/themes/material';
 @import '~@swimlane/ngx-datatable/assets/icons.css';
 @import url( 'https://fonts.googleapis.com/css?family=Material+Icons');
+
+.modal-webview {
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    z-index: 9999;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.854);
+}