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

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

import 'brace/mode/python';
import 'brace/mode/javascript';
import 'brace/theme/monokai';
import { SourceCode } from './source-code';
import { WebSocketService } from '../websocket.service';

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

@Component({
  selector: 'app-webide',
  templateUrl: './webide.component.html',
  styleUrls: ['./webide.component.scss']
})
export class WebideComponent implements OnInit {
  anchor_id = 'anchor_webide';
  filename = 'demo.js';
  code: string = defaultSourceCode;
  language = 'javascript';
  theme = 'monokai';
  files: string[];
  saveButtonState = 'DIRTY';

  constructor(private webSocketService: WebSocketService) { }

  ngOnInit() {
    this.webSocketService.observeAnchor<SourceCode>(this.anchor_id).subscribe((event) => {
      this.filename = event.data.filename;
      this.code = event.data.content;
      this.language = event.data.language;
      this.files = event.data.files;

      if (event.data.command === 'write') { this.saveButtonState = 'SAVED'; }
      if (event.data.command === 'reload') { this.requestCode(); }
    });
    this.requestCode();
  }

  sendCode() {
    this.webSocketService.send(this.anchor_id, {
      'command': 'write',
      'content': this.code
    });
    this.saveButtonState = 'SAVING';
  }

  requestCode() {
    this.webSocketService.send(this.anchor_id, {
      'command': 'read'
    });
  }

  selectCode(filename: string) {
    this.webSocketService.send(this.anchor_id, {
      'command': 'select',
      'filename': filename
    });
  }
}