mirror of
https://github.com/avatao-content/frontend-tutorial-framework
synced 2025-01-15 21:51:57 +00:00
Implement dashboard layout manipulation from backend
This commit is contained in:
parent
809b78056d
commit
138fccbe77
@ -1,6 +1,8 @@
|
|||||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
|
||||||
import { DeploymentNotificationService } from '../services/deployment-notification.service';
|
import { DeploymentNotificationService } from '../services/deployment-notification.service';
|
||||||
import { Subscription } from 'rxjs/Subscription';
|
import { Subscription } from 'rxjs/Subscription';
|
||||||
|
import { WebSocketService } from '../services/websocket.service';
|
||||||
|
import { LayoutCommand } from './layout-command';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dashboard',
|
selector: 'app-dashboard',
|
||||||
@ -8,18 +10,35 @@ import { Subscription } from 'rxjs/Subscription';
|
|||||||
styleUrls: ['./dashboard.component.scss']
|
styleUrls: ['./dashboard.component.scss']
|
||||||
})
|
})
|
||||||
export class DashboardComponent implements OnInit, OnDestroy {
|
export class DashboardComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
deploying = false;
|
deploying = false;
|
||||||
deploymentNotificationSubscription: Subscription;
|
deploymentNotificationSubscription: Subscription;
|
||||||
|
layout = 'vraw-open';
|
||||||
|
command_handlers = {'layout': this.layoutHandler.bind(this)};
|
||||||
|
|
||||||
constructor(private deploymentNotificationService: DeploymentNotificationService) {}
|
constructor(private deploymentNotificationService: DeploymentNotificationService,
|
||||||
|
private webSocketService: WebSocketService,
|
||||||
|
private changeDetectorRef: ChangeDetectorRef) {}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
this.webSocketService.connect();
|
||||||
|
this.webSocketService.observeKey<LayoutCommand>('dashboard').subscribe((event) => {
|
||||||
|
this.command_handlers[event.data.command](event.data);
|
||||||
|
this.changeDetectorRef.detectChanges();
|
||||||
|
});
|
||||||
this.deploymentNotificationSubscription = this.deploymentNotificationService.deploying.subscribe(
|
this.deploymentNotificationSubscription = this.deploymentNotificationService.deploying.subscribe(
|
||||||
(deploying) => this.deploying = deploying
|
(deploying) => this.deploying = deploying
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
layoutHandler(data: LayoutCommand) {
|
||||||
|
if (data.layout.match('vraw-open|vraw-closed|hraw|default-open|default-closed')) {
|
||||||
|
this.layout = data.layout;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.log('Invalid webide layout "' + data.layout + '" received!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ngOnDestroy() {
|
ngOnDestroy() {
|
||||||
if (this.deploymentNotificationSubscription) {
|
if (this.deploymentNotificationSubscription) {
|
||||||
this.deploymentNotificationSubscription.unsubscribe();
|
this.deploymentNotificationSubscription.unsubscribe();
|
||||||
|
4
src/app/dashboard/layout-command.ts
Normal file
4
src/app/dashboard/layout-command.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export class LayoutCommand {
|
||||||
|
command: string;
|
||||||
|
layout: string;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user