Use fix sidebar to instrument and control layout changes

src/app/ide/ide.component.html

@@ -0,0 +1,44 @@
+<div class="tfw-grid-ide-statusbar">
+  <div class="btn-group btn-group-sm flex-wrap tao-grid-center-left">
+    <button *ngFor="let file of files"
+            class="btn tfw-tab-btn"
+            (click)="tabSwitchButtonHandler(file)"
+            [class.active]="filename === file"
+            [class.disabled]="filename === file"
+            [disabled]="filename === file"
+            [class.tao-tab-btn-saved]="filename === file && codeState === 'SAVED'">
+      <span *ngIf="filename !== file">{{file}}</span>
+      <span *ngIf="filename === file"
+            [class.underline]="codeState === 'DIRTY'">{{file}}</span>
+    </button>
+  </div>
+
+  <div class="btn-group-sm tfw-deploy-btn-group">
+    <button *ngIf="showDeployButton"
+            type="submit"
+            class="btn tfw-deploy-btn tao-grid-top-center"
+            (click)="sendCodeIfDirty(); deployCode()"
+            [disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
+            [class.deployed]="deployButtonState === 'DEPLOYED'"
+            [class.deploy]="deployButtonState === 'DEPLOYING'"
+            [class.disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
+            [class.failed]="deployButtonState === 'FAILED'"
+    >
+      <span *ngIf="deployButtonState === 'TODEPLOY'">Deploy</span>
+      <span *ngIf="deployButtonState === 'DEPLOYED'">
+        <img src="images/greentick_icon.svg"/>
+        <span>Deployed</span>
+      </span>
+      <span *ngIf="deployButtonState === 'DEPLOYING'"><div class="loader"></div>Reloading app...</span>
+      <span *ngIf="deployButtonState === 'FAILED'">Deployment failed. Retry</span></button>
+  </div>
+</div>
+
+<div (keyup)="setCodeState('DIRTY'); setDeployButtonState('TODEPLOY'); resetAutoSaveCountdown()"
+  ace-editor
+  [(text)]="code"
+  [mode]="language"
+  [theme]="theme"
+  class="tfw-ace-editor"
+>
+</div>

src/app/ide/ide.component.scss

@@ -0,0 +1,95 @@
+@import "../../assets/scss/variables.scss";
+
+.tfw-grid-ide-statusbar {
+  display: grid;
+  height: $tao-navbar-height;
+  grid-template-columns: 8fr 1fr;
+}
+
+.tfw-ace-editor {
+  height: calc(100% - 67px);
+  width: 100%;
+}
+
+.btn-group {
+  padding-left: 34px;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.tfw-tab-btn {
+  background-color: white;
+  border: 1px solid $tao-plum-900;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 100px;
+  padding: 5px 19px;
+  z-index: 200;
+
+  .tfw-tab-btn-saved,
+  .active,
+  .disabled,
+  &:disabled {
+    background-color: $tao-plum-200;
+    font-weight: 500;
+    font-style: italic;
+    color: black;
+    border: 0;
+  }
+}
+
+.tfw-deploy-btn-group {
+  margin: auto $tiny;
+
+  .tfw-deploy-btn {
+    background: $tao-bright-green-200;
+    border-radius: 100px;
+    padding: 6px 19px;
+
+    img {
+      position: relative;
+      bottom: 1px;
+      height: $small;
+    }
+
+    &.failed {
+      background-color: $tao-red-500;
+      color:white;
+    }
+
+    &:disabled,
+    &.disabled,
+    &.deployed,
+    &.deploy
+    {
+      background-color: $tao-bright-green-100;
+      color: black;
+    }
+
+    &.deploy {
+      background-color: $tao-warm-yellow-200;
+    }
+
+
+    .loader {
+      border: 2px solid $tao-warm-yellow-600;
+      border-radius: 50%;
+      border-top: 2px solid $tao-warm-yellow-200;
+      width: 15px;
+      height: 15px;
+      animation: spin 2s linear infinite;
+      display: inline-block;
+      margin-right: 5px;
+      position: relative;
+      top: 2px;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+  }
+}

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
+    });
+  }
+}

src/app/ide/source-code.ts

@@ -0,0 +1,7 @@
+export interface SourceCode {
+  filename: string;
+  content?: string;
+  files: string[];
+  directory: string;
+  command: string;
+}