mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-07-01 06:36:22 +00:00
Code Issues Releases Wiki Activity

Make whole frontend dynamically configurable to avoid rebuilds

Browse Source
This commit is contained in:
Kristóf Tóth
2019-08-28 10:19:14 +02:00
parent 41eebc60f6
commit a88415bad1
17 changed files with 187 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/app/dashboard/dashboard.component.ts
View File

@ -3,9 +3,7 @@ import { DeploymentNotificationService } from '../services/deployment-notificati
import { Subscription } from 'rxjs';
import { WebSocketService } from '../services/websocket.service';
import { WebSocketMessage } from '../message-types/websocket-message';
import { HideMessagesMessage, LayoutMessage, TerminalMenuItemMessage } from '../message-types/dashboard-messages';
import { config } from '../config';
import { LogMessage } from '../message-types/log-message';
import { DashboardConfigService } from '../services/config.service';
import { HttpClient } from '@angular/common/http';
import { delay, retryWhen, tap } from 'rxjs/operators';
@ -18,22 +16,19 @@ export class DashboardComponent implements OnInit, OnDestroy {
deploying = false;
polling = false;
deploymentNotificationSubscription: Subscription;
@ViewChild('webiframe', {static: true}) webiframe: ElementRef;
@ViewChild('tfwmessages', {static: true}) messages: ElementRef;
@ViewChild('urlbar', {static: true}) urlbar: ElementRef;
@ViewChild('webiframe', {static: false}) webiframe: ElementRef;
@ViewChild('tfwmessages', {static: false}) messages: ElementRef;
@ViewChild('urlbar', {static: false}) urlbar: ElementRef;
layout: string = config.dashboard.currentLayout;
hideMessages: boolean = config.dashboard.hideMessages;
iframeUrl: string = config.dashboard.iframeUrl;
showUrlBar = config.dashboard.showUrlBar;
actualIframeUrl: string = this.iframeUrl;
selectedTerminalMenuItem: string = config.dashboard.terminalOrConsole;
layout = this.configService.layout;
hideMessages = this.configService.hideMessages;
showUrlBar = this.configService.showUrlBar;
iframeUrl = this.configService.iframeUrl;
actualIframeUrl = this.iframeUrl.value;
terminalMenuItem = this.configService.terminalMenuItem;
iframeReloadSubscription: Subscription;
command_handlers = {
'dashboard.layout': this.layoutHandler.bind(this),
'dashboard.hideMessages': this.hideMessagesHandler.bind(this),
'dashboard.terminalMenuItem': this.terminalMenuItemHandler.bind(this),
'dashboard.reloadFrontend': this.reloadFrontendHandlder.bind(this),
'dashboard.reloadIframe': this.reloadIframeHandler.bind(this)
};
@ -41,13 +36,20 @@ export class DashboardComponent implements OnInit, OnDestroy {
constructor(private deploymentNotificationService: DeploymentNotificationService,
private webSocketService: WebSocketService,
private changeDetectorRef: ChangeDetectorRef,
private http: HttpClient) {}
private http: HttpClient,
private configService: DashboardConfigService) {}
ngOnInit() {
this.webSocketService.connect();
this.configService.init();
this.subscribeResizeOnLayoutChange();
this.initCommandHandling();
this.initDeploymentNotifications();
this.sendReadyIfNeeded();
this.sendReady();
}
subscribeResizeOnLayoutChange() {
this.configService.layout.subscribe(() => this.emitResizeEvent());
}
initCommandHandling() {
@ -61,7 +63,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
this.deploymentNotificationSubscription = this.deploymentNotificationService.deploying.subscribe(
(deploying) => {
this.deploying = deploying;
if (!deploying && config.ide.reloadIframeOnDeploy) {
if (!deploying && this.configService.reloadIframeOnDeploy.value) {
if (this.polling) {
this.iframeReloadSubscription.unsubscribe();
}
@ -70,26 +72,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
});
}
sendReadyIfNeeded() {
if (config.dashboard.sendReadyAfterPageReload) {
setTimeout(() => this.webSocketService.send({'key': 'frontend.ready'}));
}
}
layoutHandler(message: LayoutMessage) {
if (config.dashboard.enabledLayouts.includes(message.value)) {
this.setLayout(message.value);
} else {
console.log('Invalid ide layout "' + message.value + '" received!');
}
}
hideMessagesHandler(message: HideMessagesMessage) {
this.hideMessages = message.value;
}
terminalMenuItemHandler(message: TerminalMenuItemMessage) {
this.selectTerminalMenuItem(message.value);
sendReady() {
setTimeout(() => this.webSocketService.send({'key': 'frontend.ready'}));
}
reloadFrontendHandlder(message: WebSocketMessage) {
@ -101,7 +85,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
}
setLayout(layout: string) {
this.layout = layout;
this.layout.next(layout);
this.emitResizeEvent();
}
emitResizeEvent() {
// We need to trigger a 'resize' event manually, otherwise editor stays collapsed
// editor 'resize' event listener requires a parameter of force=true
setTimeout(() => window.dispatchEvent(new Event('resize', {force: true} as any)), 0);
@ -124,7 +112,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
if (!item.match('(terminal|console)')) {
return;
}
this.selectedTerminalMenuItem = item;
this.terminalMenuItem.next(item);
}
scrollMessagesToBottom(): void {