Simplify IDE handler

src/app/ide/ide.component.html

@@ -10,9 +10,9 @@
             [class.disabled]="filename === file"
             [disabled]="filename === file"
             [class.tao-tab-btn-saved]="filename === file && codeState === CodeState.SAVED">
-      <span *ngIf="filename !== file">{{file}}</span>
+      <span *ngIf="filename !== file">{{pathBasename(file)}}</span>
       <span *ngIf="filename === file"
-            [class.underline]="codeState === CodeState.DIRTY">{{file}}</span>
+            [class.underline]="codeState === CodeState.DIRTY">{{pathBasename(file)}}</span>
     </button>
   </div>
 
@@ -39,6 +39,6 @@
 
 <ngx-monaco-editor [(ngModel)]="code"
                    class="tfw-ide-editor"
-                   (ngModelChange)="editorWriteHanlder()"
+                   (keyup)="editorWriteHandler()"
                    [options]="editorOptions"
 ></ngx-monaco-editor>

src/app/ide/ide.component.ts

@@ -3,16 +3,15 @@
 
 import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core';
 
-import { IDECommand } from '../message-types/ide-command';
 import { WebSocketService } from '../services/websocket.service';
+import { WebSocketMessage } from '../message-types/websocket-message';
+import { IDECommand } from '../message-types/ide-command';
 import { ProcessManagerService } from '../services/processmanager.service';
 import { DeploymentNotificationService } from '../services/deployment-notification.service';
 import { config } from '../config';
-import { CommandMessage } from '../message-types/command-message';
 import { LanguageMap } from './language-map';
 import { filter, first } from 'rxjs/operators';
 
-
 enum DeployButtonState {
   DEPLOYED,
   DEPLOYING,
@@ -20,13 +19,11 @@ enum DeployButtonState {
   TODEPLOY
 }
 
-
 enum CodeState {
   SAVED,
   DIRTY
 }
 
-
 @Component({
   selector: 'app-ide',
   templateUrl: './ide.component.html',
@@ -36,10 +33,8 @@ export class IdeComponent implements OnInit {
   CodeState = CodeState;
   DeployButtonState = DeployButtonState;
 
-  key_id = 'ide';
   files: string[];
   filename = '';
-  directory = '';
   code: string = config.ide.defaultCode;
 
   codeState = CodeState.SAVED;
@@ -58,11 +53,9 @@ export class IdeComponent implements OnInit {
   @Output() newLogs = new EventEmitter<any>();
 
   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)
+    'ide.reload':    this.reloadHandler.bind(this),
+    'ide.read':      this.readHandler.bind(this),
+    'ide.write':     this.writeHandler.bind(this),
   };
 
   constructor(private webSocketService: WebSocketService,
@@ -80,17 +73,14 @@ export class IdeComponent implements OnInit {
   }
 
   subscribeWS() {
-    this.webSocketService.observeKey<CommandMessage>(this.key_id).subscribe((event) => {
-      this.command_handlers[event.data.command](event.data);
+    this.webSocketService.observeKey<WebSocketMessage>('ide').subscribe((event) => {
+      this.command_handlers[event.key](event);
       this.changeDetectorRef.detectChanges();
     });
   }
 
   subscribeFirstLanguageDetection() {
-    this.webSocketService.observeKey<CommandMessage>(this.key_id).pipe(
-      filter(message =>  message.data.command === 'read'),
-      first()
-    ).subscribe(
+    this.webSocketService.observeKey<IDECommand>('ide.read').pipe(first()).subscribe(
       () => this.autoDetectEditorLanguageIfEnabled(this.filename)
     );
   }
@@ -102,8 +92,8 @@ export class IdeComponent implements OnInit {
       (event) => {
         this.deploymentNotificationService.deploying.next(false);
         this.newLogs.emit({
-          stdout: event.data.stdout,
-          stderr: event.data.stderr
+          stdout: event.stdout,
+          stderr: event.stderr
         });
       }
     );
@@ -119,19 +109,7 @@ export class IdeComponent implements OnInit {
     );
   }
 
-  updateFileData(data: IDECommand) {
-    this.filename = data.filename;
-    this.directory = data.directory;
-    this.code = (data.content != null) ? data.content : this.code;
-    this.files = data.files;
-  }
-
-  selectHandler(data: IDECommand) {
-    this.updateFileData(data);
-    this.autoDetectEditorLanguageIfEnabled(this.filename);
-  }
-
-  reloadHandler(data: CommandMessage) {
+  reloadHandler(data: WebSocketMessage) {
     this.requestCode();
   }
 
@@ -141,12 +119,16 @@ export class IdeComponent implements OnInit {
     }
   }
 
-  writeHandler(data: CommandMessage) {
+  writeHandler(data: IDECommand) {
     this.setCodeState(CodeState.SAVED);
   }
 
-  selectdirHandler(data: IDECommand) {
-    this.updateFileData(data);
+  updateFileData(data: IDECommand) {
+    if (this.filename != data.filename) {
+      this.filename = data.filename;
+    }
+    this.code = (data.content != null) ? data.content : this.code;
+    this.files = data.files;
   }
 
   autoDetectEditorLanguageIfEnabled(filename: string) {
@@ -181,11 +163,12 @@ export class IdeComponent implements OnInit {
     if (this.codeState === CodeState.DIRTY) {
       this.sendCodeContents();
     }
-    this.selectCode(file);
+    this.filename = file;
     this.requestCode();
+    this.autoDetectEditorLanguageIfEnabled(this.filename);
   }
 
-  editorWriteHanlder() {
+  editorWriteHandler() {
     this.setCodeState(CodeState.DIRTY);
     this.setDeployButtonState(DeployButtonState.TODEPLOY);
     this.resetAutoSaveCountdown();
@@ -211,23 +194,22 @@ export class IdeComponent implements OnInit {
     }
   }
 
+  pathBasename(path: string) {
+    return path.split('/').reverse()[0];
+  }
+
   sendCodeContents() {
-    this.webSocketService.send(this.key_id, {
-      'command': 'write',
+    this.webSocketService.sendJSON({
+      'key': 'ide.write',
+      'filename': this.filename,
       '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
+    this.webSocketService.sendJSON({
+      'key': 'ide.read',
+      'filename': this.filename
     });
   }
 }

src/app/message-types/ide-command.ts

@@ -1,11 +1,10 @@
 // Copyright (C) 2018 Avatao.com Innovative Learning Kft.
 // All Rights Reserved. See LICENSE file for details.
 
-import { CommandMessage } from './command-message';
+import { WebSocketMessage } from './websocket-message';
 
-export interface IDECommand extends CommandMessage {
+export interface IDECommand extends WebSocketMessage {
   filename: string;
   content?: string;
-  files: string[];
-  directory: string;
+  files?: string[];
 }