Merge pull request #13 from avatao-content/pmgeh_monitorpause_fix

Fix monitor pausing rendered useless by pmgeh, general webide optimization

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.conf.json",
     "build": "ng build --prod --aot --build-optimizer",
     "test": "ng test",
     "lint": "ng lint",

src/app/webide/webide.component.html

@@ -3,13 +3,13 @@
           class="btn btn-secondary"
           [class.active]="filename === file"
           [class.disabled]="filename === file"
-          (click)="sendCodeContents(); selectCode(file); requestCode()"
+          (click)="tabSwitchButtonHandler(file)"
           [disabled]="filename === file">
     {{file}}
   </button>
 </div>
 
-<div (textChanged)="setButtonStateDirty()"
+<div (keypress)="setButtonStateDirty(); resetAutoSaveCountdown()"
   ace-editor
   [(text)]="code"
   [mode]="language"
@@ -25,6 +25,6 @@
         [class.btn-success]="saveButtonState === 'SAVED'"
         [class.btn-info]="saveButtonState === 'SAVING'"
         [class.disabled]="saveButtonState === 'SAVING'"
-><span *ngIf="saveButtonState === 'DIRTY'">Save!</span>
- <span *ngIf="saveButtonState === 'SAVED'">Done!</span>
- <span *ngIf="saveButtonState === 'SAVING'"><div class="loader"></div>Reloading...</span></button>
+><span *ngIf="saveButtonState === 'DIRTY'">Save</span>
+ <span *ngIf="saveButtonState === 'SAVED'">Save</span>
+ <span *ngIf="saveButtonState === 'SAVING'"><div class="loader"></div>Reloading app...</span></button>

src/app/webide/webide.component.scss

@@ -1,4 +1,5 @@
 .tfw-ace-editor {
+  min-height: 30vh;
   height: 80%;
   width: 100%;
   overflow: auto;

src/app/webide/webide.component.ts

@@ -18,7 +18,8 @@ import { ProcessManagerService } from '../services/processmanager.service';
 
 const modelist = brace.acequire('ace/ext/modelist');
 
-const defaultSourceCode = `alert( 'Hello, world!' );`;
+const defaultSourceCode = 'Oops! Something went wrong :(';
+const autosave_interval = 10000;
 
 @Component({
   selector: 'app-webide',
@@ -32,7 +33,8 @@ export class WebideComponent implements OnInit {
   language = 'javascript';
   theme = 'monokai';
   files: string[];
-  saveButtonState = 'DIRTY';
+  saveButtonState = 'SAVED';
+  autosave = null;
   command_handlers = { 'reload': this.reloadHandler.bind(this),
                        'read': this.readHandler.bind(this),
                        'select': this.selectHandler.bind(this),
@@ -48,6 +50,7 @@ export class WebideComponent implements OnInit {
     this.requestCode();
     this.processManagerService.init();
     this.processManagerService.subscribeCallback('login', (event) => { this.setButtonStateSaved(); });
+    this.resetAutoSaveCountdown();
   }
 
   subscribeWS() {
@@ -74,6 +77,22 @@ export class WebideComponent implements OnInit {
 
   readHandler(data: SourceCode) {
     this.updateFileData(data);
+    this.saveButtonState = 'SAVED';
+  }
+
+  resetAutoSaveCountdown() {
+    if (this.autosave) {
+      clearInterval(this.autosave);
+    }
+    this.autosave = setInterval(() => { this.sendCodeIfDirty(); }, autosave_interval);
+  }
+
+  tabSwitchButtonHandler(file) {
+    if (this.saveButtonState === 'DIRTY') {
+      this.sendCodeContents();
+    }
+    this.selectCode(file);
+    this.requestCode();
   }
 
   setButtonStateSaved() {
@@ -81,7 +100,7 @@ export class WebideComponent implements OnInit {
   }
 
   setButtonStateDirty() {
-    setTimeout(() => {this.saveButtonState = 'DIRTY'; }, 0);
+    this.saveButtonState = 'DIRTY';
   }
 
   sendCode() {
@@ -90,6 +109,12 @@ export class WebideComponent implements OnInit {
     this.processManagerService.restartProcess('login');
   }
 
+  sendCodeIfDirty() {
+    if (this.saveButtonState === 'DIRTY') {
+      this.sendCodeContents();
+    }
+  }
+
   sendCodeContents() {
     this.webSocketService.send(this.key_id, {
       'command': 'write',