Implement save saving... saved! button magic. Refactor via enum

src/app/webide/source-code.ts

@@ -4,4 +4,5 @@ export class SourceCode {
   language: string;
   files: string[];
   saved: boolean;
+  command: string;
 }

src/app/webide/webide.component.html

@@ -2,7 +2,8 @@
   <button *ngFor="let file of files"
           class="btn btn-secondary"
           [class.active]="filename === file"
-          (click)="selectCode(file); requestCode();">
+          [class.disabled]="filename === file"
+          (click)="selectCode(file); requestCode()">
     {{file}}
   </button>
 </div>
@@ -17,7 +18,17 @@
 </div>
 
 <button (click)="sendCode()"
+        [disabled]="saving === true"
         type="submit"
         class="btn btn-secondary"
         [class.btn-success]="saved === true"
->Save<span *ngIf="saved === true">d!</span></button>
+        [class.btn-warning]="saving === true"
+        [class.disabled]="saving === true"
+><span *ngIf="saved === false && saving === false">Save</span>
+ <span *ngIf="saved === true && saving === false">Saved!</span>
+ <span *ngIf="saved === false && saving === true">Saving...</span></button>
+
+<span *ngIf="saved === true">Saved</span>
+<span *ngIf="saving === true">Saving</span>
+<span *ngIf="saved === false">Not Saved</span>
+<span *ngIf="saving === false">Not Saving</span>

src/app/webide/webide.component.ts

@@ -21,6 +21,7 @@ export class WebideComponent implements OnInit {
   theme = 'monokai';
   files: string[];
   saved = false;
+  saving = false;
 
   constructor(private webSocketService: WebSocketService) { }
 
@@ -30,7 +31,7 @@ export class WebideComponent implements OnInit {
       this.code = event.data.content;
       this.language = event.data.language;
       this.files = event.data.files;
-      this.saved = event.data.saved;
+      if (event.data.command === 'write') { this.saved = true; this.saving = false; }
     });
     this.requestCode();
   }
@@ -40,6 +41,8 @@ export class WebideComponent implements OnInit {
       'command': 'write',
       'content': this.code
     });
+    this.saving = true;
+    this.saved = false;
   }
 
   requestCode() {