mirror of
				https://github.com/avatao-content/frontend-tutorial-framework
				synced 2025-11-04 05:52:56 +00:00 
			
		
		
		
	Implement iframe reload on deployment
This commit is contained in:
		@@ -10,6 +10,7 @@
 | 
			
		||||
         <app-web *ngIf="!iframeUrl"></app-web>
 | 
			
		||||
         <div *ngIf="iframeUrl" class="iframe-container">
 | 
			
		||||
          <iframe class="iframe"
 | 
			
		||||
                  #webiframe
 | 
			
		||||
                  scrolling="yes"
 | 
			
		||||
                  frameborder="0"
 | 
			
		||||
                  [src]="iframeUrl | safe">
 | 
			
		||||
 
 | 
			
		||||
@@ -1,13 +1,12 @@
 | 
			
		||||
// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
 | 
			
		||||
// All Rights Reserved. See LICENSE file for details.
 | 
			
		||||
 | 
			
		||||
import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
 | 
			
		||||
import { Component, OnDestroy, OnInit, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
 | 
			
		||||
import { DeploymentNotificationService } from '../services/deployment-notification.service';
 | 
			
		||||
import { Subscription } from 'rxjs/Subscription';
 | 
			
		||||
import { WebSocketService } from '../services/websocket.service';
 | 
			
		||||
import { LayoutCommand } from './layout-command';
 | 
			
		||||
import { config } from '../config';
 | 
			
		||||
import { SidebarComponent } from '../sidebar/sidebar.component';
 | 
			
		||||
 | 
			
		||||
@Component({
 | 
			
		||||
  selector: 'app-dashboard',
 | 
			
		||||
@@ -20,6 +19,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
 | 
			
		||||
  layout: string = config.dashboard.currentLayout;
 | 
			
		||||
  hide_messages: boolean = config.dashboard.hide_messages;
 | 
			
		||||
  iframeUrl: string = config.dashboard.iframeUrl;
 | 
			
		||||
  @ViewChild('webiframe') webiframe: ElementRef;
 | 
			
		||||
  command_handlers = {'layout':          this.layoutHandler.bind(this),
 | 
			
		||||
                      'reload_frontend': this.reloadFrontendHandlder.bind(this)};
 | 
			
		||||
 | 
			
		||||
@@ -34,8 +34,12 @@ export class DashboardComponent implements OnInit, OnDestroy {
 | 
			
		||||
      this.changeDetectorRef.detectChanges();
 | 
			
		||||
    });
 | 
			
		||||
    this.deploymentNotificationSubscription = this.deploymentNotificationService.deploying.subscribe(
 | 
			
		||||
      (deploying) => this.deploying = deploying
 | 
			
		||||
    );
 | 
			
		||||
      (deploying) => {
 | 
			
		||||
        this.deploying = deploying;
 | 
			
		||||
        if (!deploying) {
 | 
			
		||||
          this.reloadIframe();
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  layoutHandler(data: LayoutCommand) {
 | 
			
		||||
@@ -65,4 +69,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
 | 
			
		||||
      this.deploymentNotificationSubscription.unsubscribe();
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  reloadIframe() {
 | 
			
		||||
    setTimeout(() => {
 | 
			
		||||
      this.webiframe.nativeElement.contentWindow.location.reload(true);
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -62,7 +62,10 @@ export class IdeComponent implements OnInit {
 | 
			
		||||
    this.subscribeWS();
 | 
			
		||||
    this.requestCode();
 | 
			
		||||
    this.processManagerService.init();
 | 
			
		||||
    this.processManagerService.subscribeCallback(config.ide.deployProcessName, (event) => { this.setDeployButtonState('DEPLOYED'); });
 | 
			
		||||
    this.processManagerService.subscribeCallback(config.ide.deployProcessName, (event) => {
 | 
			
		||||
       this.setDeployButtonState('DEPLOYED');
 | 
			
		||||
       this.deploymentNotificationService.deploying.next(false);
 | 
			
		||||
      });
 | 
			
		||||
    this.processManagerService.subscribeErrorCallback(config.ide.deployProcessName, (event) => { this.setDeployButtonState('FAILED'); });
 | 
			
		||||
    this.resetAutoSaveCountdown();
 | 
			
		||||
  }
 | 
			
		||||
@@ -126,13 +129,15 @@ export class IdeComponent implements OnInit {
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  setDeployButtonState(state: string) {
 | 
			
		||||
    this.deployButtonState = state;
 | 
			
		||||
    this.deploymentNotificationService.deploying.next(state === 'DEPLOYING' ? true : false);
 | 
			
		||||
    if (state.match('DEPLOYED|DEPLOYING|FAILED|TODEPLOY')) {
 | 
			
		||||
      this.deployButtonState = state;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  deployCode() {
 | 
			
		||||
    this.processManagerService.restartProcess(config.ide.deployProcessName);
 | 
			
		||||
    this.setDeployButtonState('DEPLOYING');
 | 
			
		||||
    this.deploymentNotificationService.deploying.next(true);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  sendCodeIfDirty() {
 | 
			
		||||
 
 | 
			
		||||
@@ -6,9 +6,7 @@ import { Subject } from 'rxjs/Subject';
 | 
			
		||||
 | 
			
		||||
@Injectable()
 | 
			
		||||
export class DeploymentNotificationService {
 | 
			
		||||
 | 
			
		||||
  deploying: Subject<boolean> = new Subject<boolean>();
 | 
			
		||||
 | 
			
		||||
  constructor() { }
 | 
			
		||||
 | 
			
		||||
  constructor() {}
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user