Add initial logic to WebIDE

src/app/webide/webide.component.html

@@ -1,9 +1,12 @@
 <div
   ace-editor
   [(text)]="code"
-  [mode]="language"
+  [(mode)]="language"
   [theme]="theme"
   style="min-height: 200px; width:100%; overflow: auto;"
+  class="mt-3 mb-3"
 >
 
 </div>
+
+<button (click)="sendCode()" type="submit" class="btn btn-primary">Save</button>

src/app/webide/webide.component.ts

@@ -1,11 +1,12 @@
 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 =
-  `def hello():
-      print('Hello world!')`;
+const defaultSourceCode = `alert( 'Hello, world!' );`;
 
 @Component({
   selector: 'app-webide',
@@ -13,13 +14,34 @@ const defaultSourceCode =
   styleUrls: ['./webide.component.scss']
 })
 export class WebideComponent implements OnInit {
+  anchor_id = 'anchor_webide';
+  filename = 'demo.js';
   code: string = defaultSourceCode;
-  language = 'python';
+  language = 'javascript';
   theme = 'monokai';
 
-  constructor() { }
+  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.requestCode();
+  }
+
+  sendCode() {
+    this.webSocketService.send(this.anchor_id, {
+      'command': 'write',
+      'content': this.code
+    });
+  }
+
+  requestCode() {
+    this.webSocketService.send(this.anchor_id, {
+      'command': 'read'
+    });
   }
 
 }

src/source-code.ts

@@ -0,0 +1,5 @@
+export class SourceCode {
+  filename: string;
+  content: string;
+  language: string;
+}