Use fix sidebar to instrument and control layout changes

src/app/ide/ide.component.ts

@@ -0,0 +1,154 @@
+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-ide',
+  templateUrl: './ide.component.html',
+  styleUrls: ['./ide.component.scss']
+})
+export class IdeComponent implements OnInit {
+  key_id = 'webide';
+  filename = '';
+  code: string = config.ide.defaultCode;
+  language: string = config.ide.defaultLanguage;
+  theme = 'cobalt';
+  directory = '';
+  files: string[];
+  codeState = 'SAVED';
+  deployButtonState = 'DEPLOYED';
+  showDeployButton: boolean = config.ide.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.ide.deployProcessName, (event) => { this.setDeployButtonState('DEPLOYED'); });
+    this.processManagerService.subscribeErrorCallback(config.ide.deployProcessName, (event) => { this.setDeployButtonState('FAILED'); });
+    this.resetAutoSaveCountdown();
+  }
+
+  subscribeWS() {
+    this.webSocketService.observeKey<SourceCode>(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.ide.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
+    });
+  }
+}