frontend-tutorial-framework/src/app/dashboard/dashboard.component.ts

83 lines
2.9 KiB
TypeScript

// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
// All Rights Reserved. See LICENSE file for details.
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';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, OnDestroy {
deploying = false;
deploymentNotificationSubscription: Subscription;
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)};
constructor(private deploymentNotificationService: DeploymentNotificationService,
private webSocketService: WebSocketService,
private changeDetectorRef: ChangeDetectorRef) {}
ngOnInit() {
this.webSocketService.connect();
this.initCommandHandling();
this.deploymentNotificationSubscription = this.deploymentNotificationService.deploying.subscribe(
(deploying) => {
this.deploying = deploying;
if (!deploying) {
this.reloadIframe();
}
});
}
initCommandHandling() {
this.webSocketService.observeKey<LayoutCommand>('dashboard').subscribe((event) => {
this.command_handlers[event.data.command](event.data);
this.changeDetectorRef.detectChanges();
});
}
layoutHandler(data: LayoutCommand) {
if (config.dashboard.enabledLayouts.includes(data.layout)) {
this.setLayout(data.layout);
} else {
console.log('Invalid ide layout "' + data.layout + '" received!');
}
if (data.hide_messages !== undefined) {
this.hide_messages = data.hide_messages;
}
}
reloadFrontendHandlder(data: LayoutCommand) {
setTimeout(() => window.location.reload(), 2000);
}
setLayout(layout: string) {
this.layout = layout;
// We need to trigger a 'resize' event manually, otherwise ace editor stays collapsed
// Ace editors 'resize' event listener requires a parameter of force=true
setTimeout(() => window.dispatchEvent(new Event('resize', {force: true} as any)), 0);
}
ngOnDestroy() {
if (this.deploymentNotificationSubscription) {
this.deploymentNotificationSubscription.unsubscribe();
}
}
reloadIframe() {
setTimeout(() => {
this.webiframe.nativeElement.contentWindow.location.reload(true);
});
}
}