Implement multiple webide tabs

src/app/webide/source-code.ts

@@ -2,4 +2,5 @@ export class SourceCode {
   filename: string;
   content: string;
   language: string;
+  files: string[];
 }

src/app/webide/webide.component.html

@@ -1,5 +1,8 @@
-<input [(ngModel)]="filename">
-<button (click)="selectCode(); requestCode()" type="submit" class="btn btn-primary">Select file</button>
+<ul class="editor-tabs">
+  <li class="editor-li" *ngFor="let file of files">
+    <button class="editor-button" (click)="selectCode(file); requestCode();">{{file}}</button>
+  </li>
+</ul>
 
 <div
   ace-editor

src/app/webide/webide.component.ts

@@ -19,6 +19,7 @@ export class WebideComponent implements OnInit {
   code: string = defaultSourceCode;
   language = 'javascript';
   theme = 'monokai';
+  files: string[];
 
   constructor(private webSocketService: WebSocketService) { }
 
@@ -27,6 +28,7 @@ export class WebideComponent implements OnInit {
       this.filename = event.data.filename;
       this.code = event.data.content;
       this.language = event.data.language;
+      this.files = event.data.files;
     });
     this.requestCode();
   }
@@ -44,10 +46,10 @@ export class WebideComponent implements OnInit {
     });
   }
 
-  selectCode() {
+  selectCode(filename: string) {
     this.webSocketService.send(this.anchor_id, {
       'command': 'select',
-      'filename': this.filename
+      'filename': filename
     });
   }
 }