frontend-tutorial-framework/src/app/webide/webide.component.ts

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/monokai';
import { SourceCode } from './source-code';
import { WebSocketService } from '../services/websocket.service';
import { ProcessManagerService } from '../services/processmanager.service';

const modelist = brace.acequire('ace/ext/modelist');

const defaultSourceCode = `alert( 'Hello, world!' );`;

@Component({
  selector: 'app-webide',
  templateUrl: './webide.component.html',
  styleUrls: ['./webide.component.scss']
})
export class WebideComponent implements OnInit {
  key_id = 'webide';
  filename = 'demo.js';
  code: string = defaultSourceCode;
  language = 'javascript';
  theme = 'monokai';
  files: string[];
  saveButtonState = 'SAVED';
  command_handlers = { 'reload': this.reloadHandler.bind(this),
                       'read': this.readHandler.bind(this),
                       'select': this.selectHandler.bind(this),
                       'write': () => {}};

  constructor(private webSocketService: WebSocketService,
              private changeDetectorRef: ChangeDetectorRef,
              private processManagerService: ProcessManagerService) { }

  ngOnInit() {
    this.webSocketService.connect();
    this.subscribeWS();
    this.requestCode();
    this.processManagerService.init();
    this.processManagerService.subscribeCallback('login', (event) => { this.setButtonStateSaved(); });
  }

  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.code = data.content;
    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) {
    this.updateFileData(data);
    this.saveButtonState = 'SAVED';
  }

  tabSwitchButtonHandler(file) {
    if (this.saveButtonState === 'DIRTY') {
      this.sendCodeContents();
    }
    this.selectCode(file);
    this.requestCode();
  }

  setButtonStateSaved() {
    this.saveButtonState = 'SAVED';
  }

  setButtonStateDirty() {
    this.saveButtonState = 'DIRTY';
  }

  sendCode() {
    this.sendCodeContents();
    this.saveButtonState = 'SAVING';
    this.processManagerService.restartProcess('login');
  }

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