Merge pull request #3 from avatao-content/webide_rework

Webide rework

src/app/app.component.html

@@ -1,6 +1,6 @@
 <app-header></app-header>
 <div class="container-fluid">
-  <div class="row tfw-first-row">
+  <div class="row">
     <div class="col-sm"><app-login></app-login></div>
     <div class="col-sm-6"><app-webide></app-webide></div>
     <div class="col-sm"><app-messages></app-messages></div>

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,3 +1,12 @@
+<div class="btn-group btn-group-sm flex-wrap">
+  <button *ngFor="let file of files"
+          class="btn btn-secondary"
+          [class.active]="filename === file"
+          (click)="selectCode(file); requestCode();">
+    {{file}}
+  </button>
+</div>
+
 <div
   ace-editor
   [(text)]="code"

src/app/webide/webide.component.scss

@@ -3,3 +3,15 @@
   width:100%;
   overflow: auto;
 }
+
+.editor-tabs {
+  list-style: none;
+}
+
+.editor-li {
+  float: left;
+}
+
+.btn-secondary {
+  border-radius: 0;
+}

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,4 +46,10 @@ export class WebideComponent implements OnInit {
     });
   }
 
+  selectCode(filename: string) {
+    this.webSocketService.send(this.anchor_id, {
+      'command': 'select',
+      'filename': filename
+    });
+  }
 }