import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import * as brace from 'brace'; import 'brace/ext/modelist'; import 'brace/mode/c_cpp'; import 'brace/mode/csharp'; import 'brace/mode/java'; import 'brace/mode/javascript'; import 'brace/mode/json'; import 'brace/mode/python'; import 'brace/mode/sql'; import 'brace/theme/cobalt'; import { SourceCode } from './source-code'; import { WebSocketService } from '../services/websocket.service'; import { ProcessManagerService } from '../services/processmanager.service'; import { DeploymentNotificationService } from '../services/deployment-notification.service'; import { config } from '../config'; const modelist = brace.acequire('ace/ext/modelist'); @Component({ selector: 'app-webide', templateUrl: './webide.component.html', styleUrls: ['./webide.component.scss'] }) export class WebideComponent implements OnInit { key_id = 'webide'; filename = ''; code: string = config.webide.defaultCode; language: string = config.webide.defaultLanguage; theme = 'cobalt'; directory = ''; files: string[]; codeState = 'SAVED'; deployButtonState = 'DEPLOYED'; showDeployButton: boolean = config.webide.showDeployButton; autosave = null; command_handlers = {'reload': this.reloadHandler.bind(this), 'read': this.readHandler.bind(this), 'select': this.selectHandler.bind(this), 'write': this.writeHandler.bind(this), 'selectdir': this.selectdirHandler.bind(this)}; constructor(private webSocketService: WebSocketService, private changeDetectorRef: ChangeDetectorRef, private processManagerService: ProcessManagerService, private deploymentNotificationService: DeploymentNotificationService) { } ngOnInit() { this.webSocketService.connect(); this.subscribeWS(); this.requestCode(); this.processManagerService.init(); this.processManagerService.subscribeCallback(config.webide.deployProcessName, (event) => { this.setDeployButtonState('DEPLOYED'); }); this.processManagerService.subscribeErrorCallback(config.webide.deployProcessName, (event) => { this.setDeployButtonState('FAILED'); }); this.resetAutoSaveCountdown(); } subscribeWS() { this.webSocketService.observeKey(this.key_id).subscribe((event) => { this.command_handlers[event.data.command](event.data); this.changeDetectorRef.detectChanges(); }); } updateFileData(data: SourceCode) { this.filename = data.filename; this.directory = data.directory; this.code = (data.content != null) ? data.content : this.code; this.language = modelist.getModeForPath(this.filename).name; this.files = data.files; } selectHandler(data: SourceCode) { this.updateFileData(data); } reloadHandler(data: SourceCode) { this.requestCode(); } readHandler(data: SourceCode) { if (this.codeState == 'SAVED') { this.updateFileData(data); } } writeHandler() { this.setCodeState('SAVED'); } selectdirHandler(data: SourceCode) { this.updateFileData(data); } resetAutoSaveCountdown() { if (this.autosave) { clearInterval(this.autosave); } this.autosave = setInterval(() => { this.sendCodeIfDirty(); }, config.webide.autoSaveInterval); } tabSwitchButtonHandler(file) { if (this.codeState === 'DIRTY') { this.sendCodeContents(); } this.selectCode(file); this.requestCode(); } setCodeState(state: string) { if (state.match('SAVED|DIRTY')) { this.codeState = state; } } setDeployButtonState(state: string) { this.deployButtonState = state; this.deploymentNotificationService.deploying.next(state === 'DEPLOYING' ? true : false); } deployCode() { this.processManagerService.restartProcess('login'); this.setDeployButtonState('DEPLOYING'); } sendCodeIfDirty() { if (this.codeState === 'DIRTY') { this.sendCodeContents(); } } sendCodeContents() { this.webSocketService.send(this.key_id, { 'command': 'write', 'content': this.code }); } requestCode() { this.webSocketService.send(this.key_id, { 'command': 'read' }); } selectCode(filename: string) { this.webSocketService.send(this.key_id, { 'command': 'select', 'filename': filename }); } }