From 685b9755b9d058ff8c262f18662103694dea2e34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com> Date: Fri, 2 Mar 2018 10:40:31 +0100 Subject: [PATCH 01/11] Optimize tab switching: saving only happens if state is 'DIRTY' --- src/app/webide/webide.component.html | 2 +- src/app/webide/webide.component.ts | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html index 5a2a2a6..37f1f25 100644 --- a/src/app/webide/webide.component.html +++ b/src/app/webide/webide.component.html @@ -3,7 +3,7 @@ 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> diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 2180d8e..a0d76bd 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -76,6 +76,14 @@ export class WebideComponent implements OnInit { this.updateFileData(data); } + tabSwitchButtonHandler(file) { + if (this.saveButtonState === 'DIRTY') { + this.sendCodeContents(); + } + this.selectCode(file); + this.requestCode(); + } + setButtonStateSaved() { this.saveButtonState = 'SAVED'; } From d17bfce170993be165514af089bd36dc52fdc7d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com> Date: Fri, 2 Mar 2018 11:13:45 +0100 Subject: [PATCH 02/11] Remove unnecessary zone hack attempt --- src/app/webide/webide.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index a0d76bd..135396d 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -89,7 +89,7 @@ export class WebideComponent implements OnInit { } setButtonStateDirty() { - setTimeout(() => {this.saveButtonState = 'DIRTY'; }, 0); + this.saveButtonState = 'DIRTY'; } sendCode() { From 7ec5a75befb43eb591e826d2beb9fdc99824fe45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com> Date: Fri, 2 Mar 2018 11:31:14 +0100 Subject: [PATCH 03/11] Change default webide save button state to 'SAVED' --- src/app/webide/webide.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 135396d..a8ea14f 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -32,7 +32,7 @@ export class WebideComponent implements OnInit { language = 'javascript'; theme = 'monokai'; files: string[]; - saveButtonState = 'DIRTY'; + saveButtonState = 'SAVED'; command_handlers = { 'reload': this.reloadHandler.bind(this), 'read': this.readHandler.bind(this), 'select': this.selectHandler.bind(this), @@ -74,6 +74,7 @@ export class WebideComponent implements OnInit { readHandler(data: SourceCode) { this.updateFileData(data); + this.saveButtonState = 'SAVED'; } tabSwitchButtonHandler(file) { From 2cc5f12f6ce9791a0b7ede6a23a76ee6351c79cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com> Date: Fri, 2 Mar 2018 11:31:47 +0100 Subject: [PATCH 04/11] Change event triggering 'DIRTY' webide state --- src/app/webide/webide.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html index 37f1f25..365fd84 100644 --- a/src/app/webide/webide.component.html +++ b/src/app/webide/webide.component.html @@ -9,7 +9,7 @@ </button> </div> -<div (textChanged)="setButtonStateDirty()" +<div (keypress)="setButtonStateDirty()" ace-editor [(text)]="code" [mode]="language" From 6a7de7f2a534063a751a4243ccecf8fc1443cd05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com> Date: Fri, 2 Mar 2018 11:45:04 +0100 Subject: [PATCH 05/11] Make save button labels less confusing --- src/app/webide/webide.component.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html index 365fd84..626cbfd 100644 --- a/src/app/webide/webide.component.html +++ b/src/app/webide/webide.component.html @@ -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> From bdd4700f2f563ded02f19f4945f95dd27941c714 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com> Date: Fri, 2 Mar 2018 12:07:43 +0100 Subject: [PATCH 06/11] Make webide visible when showing a single component --- src/app/webide/webide.component.scss | 1 + 1 file changed, 1 insertion(+) 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; From 5918b300ef680f656c8f170d00ce12b60f0a0caf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com> Date: Fri, 2 Mar 2018 13:33:03 +0100 Subject: [PATCH 07/11] Add proxy config to yarn start --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From fc5a5b161bec0d720772341b9254cf09577e3ef6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com> Date: Fri, 2 Mar 2018 13:49:00 +0100 Subject: [PATCH 08/11] Implement automatic saving --- src/app/webide/webide.component.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index a8ea14f..3fe10a5 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -48,6 +48,7 @@ export class WebideComponent implements OnInit { this.requestCode(); this.processManagerService.init(); this.processManagerService.subscribeCallback('login', (event) => { this.setButtonStateSaved(); }); + setInterval(() => { this.sendCodeIfDirty(); }, 10000); } subscribeWS() { @@ -99,6 +100,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', From 0d6c0f647ce5dfa3997bba79a453f0d3c762a49a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com> Date: Fri, 2 Mar 2018 14:03:52 +0100 Subject: [PATCH 09/11] Refactor autosave interval to a const --- src/app/webide/webide.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 3fe10a5..54eac1e 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -19,6 +19,7 @@ import { ProcessManagerService } from '../services/processmanager.service'; const modelist = brace.acequire('ace/ext/modelist'); const defaultSourceCode = `alert( 'Hello, world!' );`; +const autosave_interval = 10000; @Component({ selector: 'app-webide', @@ -48,7 +49,7 @@ export class WebideComponent implements OnInit { this.requestCode(); this.processManagerService.init(); this.processManagerService.subscribeCallback('login', (event) => { this.setButtonStateSaved(); }); - setInterval(() => { this.sendCodeIfDirty(); }, 10000); + setInterval(() => { this.sendCodeIfDirty(); }, autosave_interval); } subscribeWS() { From c46f5a345835ea4f6714894d9ab8ea1654faf88e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com> Date: Fri, 2 Mar 2018 14:06:47 +0100 Subject: [PATCH 10/11] Replace default source code with error message --- src/app/webide/webide.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 54eac1e..6c95f4f 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -18,7 +18,7 @@ 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({ From f94a254f9bf640d8668e72c84b77aa3059719abd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com> Date: Fri, 2 Mar 2018 14:16:55 +0100 Subject: [PATCH 11/11] Fix autosave making typed text disappear --- src/app/webide/webide.component.html | 2 +- src/app/webide/webide.component.ts | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html index 626cbfd..a85de03 100644 --- a/src/app/webide/webide.component.html +++ b/src/app/webide/webide.component.html @@ -9,7 +9,7 @@ </button> </div> -<div (keypress)="setButtonStateDirty()" +<div (keypress)="setButtonStateDirty(); resetAutoSaveCountdown()" ace-editor [(text)]="code" [mode]="language" diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 6c95f4f..bfe925d 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -34,6 +34,7 @@ export class WebideComponent implements OnInit { theme = 'monokai'; files: string[]; saveButtonState = 'SAVED'; + autosave = null; command_handlers = { 'reload': this.reloadHandler.bind(this), 'read': this.readHandler.bind(this), 'select': this.selectHandler.bind(this), @@ -49,7 +50,7 @@ export class WebideComponent implements OnInit { this.requestCode(); this.processManagerService.init(); this.processManagerService.subscribeCallback('login', (event) => { this.setButtonStateSaved(); }); - setInterval(() => { this.sendCodeIfDirty(); }, autosave_interval); + this.resetAutoSaveCountdown(); } subscribeWS() { @@ -79,6 +80,13 @@ export class WebideComponent implements OnInit { 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();