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

// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
// All Rights Reserved. See LICENSE file for details.

import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core';

import * as brace from 'brace';
import 'brace/ext/modelist';
import 'brace/ext/language_tools';

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');
const langTools = brace.acequire('ace/ext/language_tools');


enum DeployButtonState {
  DEPLOYED,
  DEPLOYING,
  FAILED,
  TODEPLOY
}


enum CodeState {
  SAVED,
  DIRTY
}


@Component({
  selector: 'app-ide',
  templateUrl: './ide.component.html',
  styleUrls: ['./ide.component.scss']
})
export class IdeComponent implements OnInit {
  CodeState = CodeState;
  DeployButtonState = DeployButtonState;

  key_id = 'ide';
  files: string[];
  filename = '';
  directory = '';
  code: string = config.ide.defaultCode;

  codeState = CodeState.SAVED;
  deployButtonState = DeployButtonState.DEPLOYED;
  showDeployButton: boolean = config.ide.showDeployButton;
  autosave = null;

  language: string = config.ide.defaultLanguage;
  theme = 'cobalt';

  @Output() newLogs = new EventEmitter<any>();

  options: any = {enableBasicAutocompletion: true,
                  enableSnippets: true,
                  enableLiveAutocompletion: true};

  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.initProcessManagerService();
    this.resetAutoSaveCountdown();
  }

  subscribeWS() {
    this.webSocketService.observeKey<SourceCode>(this.key_id).subscribe((event) => {
      this.command_handlers[event.data.command](event.data);
      this.changeDetectorRef.detectChanges();
    });
  }

  initProcessManagerService() {
    this.processManagerService.init();
    this.processManagerService.subscribeCallback(
      config.ide.deployProcessName,
      (event) => {
        this.deploymentNotificationService.deploying.next(false);
        this.newLogs.emit({
          stdout: event.data.stdout,
          stderr: event.data.stderr
        });
      }
    );

    this.processManagerService.subscribeSuccessCallback(
      config.ide.deployProcessName,
      (event) => this.setDeployButtonState(DeployButtonState.DEPLOYED)
    );

    this.processManagerService.subscribeErrorCallback(
      config.ide.deployProcessName,
      (event) => this.setDeployButtonState(DeployButtonState.FAILED)
    );
  }

  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 === CodeState.SAVED) {
      this.updateFileData(data);
    }
  }

  writeHandler() {
    this.setCodeState(CodeState.SAVED);
  }

  selectdirHandler(data: SourceCode) {
    this.updateFileData(data);
  }

  resetAutoSaveCountdown() {
    if (this.autosave) {
      clearInterval(this.autosave);
    }
    this.autosave = setInterval(
      () => { this.sendCodeIfDirty(); },
      config.ide.autoSaveInterval
    );
  }

  tabSwitchButtonHandler(file: string) {
    if (this.codeState === CodeState.DIRTY) {
      this.sendCodeContents();
    }
    this.selectCode(file);
    this.requestCode();
  }

  setCodeState(state: CodeState) {
    this.codeState = state;
  }

  setDeployButtonState(state: DeployButtonState) {
    this.deployButtonState = state;
  }

  deployCode() {
    this.processManagerService.restartProcess(config.ide.deployProcessName);
    this.setDeployButtonState(DeployButtonState.DEPLOYING);
    this.deploymentNotificationService.deploying.next(true);
  }

  sendCodeIfDirty() {
    if (this.codeState === 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
    });
  }
}