diff --git a/package.json b/package.json index 655bc91..8dedf4a 100644 --- a/package.json +++ b/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", diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html index 5a2a2a6..a85de03 100644 --- a/src/app/webide/webide.component.html +++ b/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}} -
Save! - Done! -
Reloading...
+>Save + Save +
Reloading app...
diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss index daf91d9..f4e8af5 100644 --- a/src/app/webide/webide.component.scss +++ b/src/app/webide/webide.component.scss @@ -1,4 +1,5 @@ .tfw-ace-editor { + min-height: 30vh; height: 80%; width: 100%; overflow: auto; diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 2180d8e..bfe925d 100644 --- a/src/app/webide/webide.component.ts +++ b/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',