From fefed5b84edc7fbe3800642a1ca79ed450d28b38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Wed, 21 Feb 2018 15:00:10 +0100 Subject: [PATCH 01/10] Implement first version of ProcessManagerService --- src/app/services/processcommand.ts | 3 ++ src/app/services/processmanager.service.ts | 41 ++++++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 src/app/services/processcommand.ts create mode 100644 src/app/services/processmanager.service.ts diff --git a/src/app/services/processcommand.ts b/src/app/services/processcommand.ts new file mode 100644 index 0000000..9b6d711 --- /dev/null +++ b/src/app/services/processcommand.ts @@ -0,0 +1,3 @@ +export class ProcessCommand { + command: string; +} diff --git a/src/app/services/processmanager.service.ts b/src/app/services/processmanager.service.ts new file mode 100644 index 0000000..092a7ac --- /dev/null +++ b/src/app/services/processmanager.service.ts @@ -0,0 +1,41 @@ +import { Injectable } from '@angular/core'; + +import { WebSocketService } from './websocket.service'; +import { ProcessCommand } from './processcommand'; + + +@Injectable() +export class ProcessManagerService { + anchor = 'anchor_processmanager'; + process_name: string; + + constructor(private webSocketService: WebSocketService) {} + + init(process_name: string) { + this.process_name = process_name; + this.webSocketService.connect(); + } + + subscribeCallback(callback: (event: any) => void) { + this.webSocketService.observeAnchor(this.anchor).subscribe(callback); + } + + sendCommand(command: string, callback?: (event: any) => void) { + if (callback) { + this.subscribeCallback(callback); + } + this.webSocketService.send(this.anchor, {'command': command}); + } + + startProcess(callback?: (event: any) => void) { + this.sendCommand('start', callback); + } + + stopProcess(callback?: (event: any) => void) { + this.sendCommand('stop', callback); + } + + restartProcess(callback?: (event: any) => void) { + this.sendCommand('restart', callback); + } +} From 052dbad0e401b4bce350a3e15a164eae7bc9a434 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Wed, 21 Feb 2018 15:00:47 +0100 Subject: [PATCH 02/10] Add ProcessManagerService to providers --- src/app/app.module.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 624d876..93fd321 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,6 +17,7 @@ import { MessagesComponent } from './messages/messages.component'; import { WebSocketService } from './services/websocket.service'; import { TerminalComponent } from './terminal/terminal.component'; import { FSMUpdateService } from './services/fsmupdate.service'; +import { ProcessManagerService } from './services/processmanager.service'; import { AppRoutingModule } from './app-routing.module'; @@ -42,7 +43,8 @@ import { AppRoutingModule } from './app-routing.module'; MarkdownService, WebSocketService, TerminadoService, - FSMUpdateService + FSMUpdateService, + ProcessManagerService ], bootstrap: [ AppComponent From 848c7ce71bbd67a04db2c130cb55c856d5b047fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Wed, 21 Feb 2018 15:01:14 +0100 Subject: [PATCH 03/10] Hook process restarting to 'Save' button click --- src/app/webide/webide.component.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index b4d542e..4324288 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -14,6 +14,7 @@ import 'brace/mode/sql'; import 'brace/theme/monokai'; import { SourceCode } from './source-code'; import { WebSocketService } from '../services/websocket.service'; +import { ProcessManagerService } from '../services/processmanager.service'; const modelist = brace.acequire('ace/ext/modelist'); @@ -38,12 +39,14 @@ export class WebideComponent implements OnInit { 'write': this.writeHandler.bind(this)}; constructor(private webSocketService: WebSocketService, - private changeDetectorRef: ChangeDetectorRef) { } + private changeDetectorRef: ChangeDetectorRef, + private processManagerService: ProcessManagerService) { } ngOnInit() { this.webSocketService.connect(); this.subscribeWS(); this.requestCode(); + this.processManagerService.init('login'); } subscribeWS() { @@ -86,6 +89,7 @@ export class WebideComponent implements OnInit { 'content': this.code }); this.saveButtonState = 'SAVING'; + this.processManagerService.restartProcess((event) => { console.log('CICÁK!!'); }); } requestCode() { From 21043ee74efe813a94266bca0b99b9765ff2a252 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Tue, 27 Feb 2018 14:31:20 +0100 Subject: [PATCH 04/10] Fix anchor->key refactor conflicts after rebase --- src/app/services/processmanager.service.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/services/processmanager.service.ts b/src/app/services/processmanager.service.ts index 092a7ac..e041436 100644 --- a/src/app/services/processmanager.service.ts +++ b/src/app/services/processmanager.service.ts @@ -6,7 +6,7 @@ import { ProcessCommand } from './processcommand'; @Injectable() export class ProcessManagerService { - anchor = 'anchor_processmanager'; + key = 'processmanager'; process_name: string; constructor(private webSocketService: WebSocketService) {} @@ -17,14 +17,14 @@ export class ProcessManagerService { } subscribeCallback(callback: (event: any) => void) { - this.webSocketService.observeAnchor(this.anchor).subscribe(callback); + this.webSocketService.observeKey(this.key).subscribe(callback); } sendCommand(command: string, callback?: (event: any) => void) { if (callback) { this.subscribeCallback(callback); } - this.webSocketService.send(this.anchor, {'command': command}); + this.webSocketService.send(this.key, {'command': command}); } startProcess(callback?: (event: any) => void) { From ffcc608a979616e6d73427063640f99cc0e2c83b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Tue, 27 Feb 2018 15:55:23 +0100 Subject: [PATCH 05/10] Refactor ProcessManagerService to be stateless --- src/app/services/processcommand.ts | 1 + src/app/services/processmanager.service.ts | 27 +++++++++++----------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/app/services/processcommand.ts b/src/app/services/processcommand.ts index 9b6d711..f275533 100644 --- a/src/app/services/processcommand.ts +++ b/src/app/services/processcommand.ts @@ -1,3 +1,4 @@ export class ProcessCommand { command: string; + process_name: string; } diff --git a/src/app/services/processmanager.service.ts b/src/app/services/processmanager.service.ts index e041436..677119f 100644 --- a/src/app/services/processmanager.service.ts +++ b/src/app/services/processmanager.service.ts @@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'; import { WebSocketService } from './websocket.service'; import { ProcessCommand } from './processcommand'; +import { filter } from 'rxjs/operators'; @Injectable() @@ -11,31 +12,31 @@ export class ProcessManagerService { constructor(private webSocketService: WebSocketService) {} - init(process_name: string) { - this.process_name = process_name; + init() { this.webSocketService.connect(); } - subscribeCallback(callback: (event: any) => void) { - this.webSocketService.observeKey(this.key).subscribe(callback); + subscribeCallback(process_name: string, callback: (event: any) => void) { + this.webSocketService.observeKey(this.key) + .pipe(filter(message => message.data.process_name === process_name)).subscribe(callback); } - sendCommand(command: string, callback?: (event: any) => void) { + sendCommand(command: string, process_name: string, callback?: (event: any) => void) { if (callback) { - this.subscribeCallback(callback); + this.subscribeCallback(process_name, callback); } - this.webSocketService.send(this.key, {'command': command}); + this.webSocketService.send(this.key, {'command': command, 'process_name': process_name}); } - startProcess(callback?: (event: any) => void) { - this.sendCommand('start', callback); + startProcess(process_name: string, callback?: (event: any) => void) { + this.sendCommand('start', process_name, callback); } - stopProcess(callback?: (event: any) => void) { - this.sendCommand('stop', callback); + stopProcess(process_name: string, callback?: (event: any) => void) { + this.sendCommand('stop', process_name, callback); } - restartProcess(callback?: (event: any) => void) { - this.sendCommand('restart', callback); + restartProcess(process_name: string, callback?: (event: any) => void) { + this.sendCommand('restart', process_name, callback); } } From ceabfe75bc52a9e3b59929f91cc2ede4cdd0a338 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Tue, 27 Feb 2018 15:55:38 +0100 Subject: [PATCH 06/10] Add support for stateless ProcessManagerService in webide --- src/app/webide/webide.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 4324288..41aee77 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -46,7 +46,7 @@ export class WebideComponent implements OnInit { this.webSocketService.connect(); this.subscribeWS(); this.requestCode(); - this.processManagerService.init('login'); + this.processManagerService.init(); } subscribeWS() { @@ -89,7 +89,7 @@ export class WebideComponent implements OnInit { 'content': this.code }); this.saveButtonState = 'SAVING'; - this.processManagerService.restartProcess((event) => { console.log('CICÁK!!'); }); + this.processManagerService.restartProcess('login', (event) => { console.log('CICÁK!!'); }); } requestCode() { From 0779ad2ef68dfe29370475671c3c8a6ce39ed235 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Tue, 27 Feb 2018 16:06:15 +0100 Subject: [PATCH 07/10] Rework faulty callback concept in ProcessManagerService --- src/app/services/processmanager.service.ts | 17 +++++++---------- src/app/webide/webide.component.ts | 3 ++- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/app/services/processmanager.service.ts b/src/app/services/processmanager.service.ts index 677119f..3e948a6 100644 --- a/src/app/services/processmanager.service.ts +++ b/src/app/services/processmanager.service.ts @@ -21,22 +21,19 @@ export class ProcessManagerService { .pipe(filter(message => message.data.process_name === process_name)).subscribe(callback); } - sendCommand(command: string, process_name: string, callback?: (event: any) => void) { - if (callback) { - this.subscribeCallback(process_name, callback); - } + sendCommand(command: string, process_name: string) { this.webSocketService.send(this.key, {'command': command, 'process_name': process_name}); } - startProcess(process_name: string, callback?: (event: any) => void) { - this.sendCommand('start', process_name, callback); + startProcess(process_name: string) { + this.sendCommand('start', process_name); } - stopProcess(process_name: string, callback?: (event: any) => void) { - this.sendCommand('stop', process_name, callback); + stopProcess(process_name: string) { + this.sendCommand('stop', process_name); } - restartProcess(process_name: string, callback?: (event: any) => void) { - this.sendCommand('restart', process_name, callback); + restartProcess(process_name: string) { + this.sendCommand('restart', process_name); } } diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 41aee77..53bfd05 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -47,6 +47,7 @@ export class WebideComponent implements OnInit { this.subscribeWS(); this.requestCode(); this.processManagerService.init(); + this.processManagerService.subscribeCallback('login', (event) => { console.log('CICÁK!!'); }); } subscribeWS() { @@ -89,7 +90,7 @@ export class WebideComponent implements OnInit { 'content': this.code }); this.saveButtonState = 'SAVING'; - this.processManagerService.restartProcess('login', (event) => { console.log('CICÁK!!'); }); + this.processManagerService.restartProcess('login'); } requestCode() { From 52298cbd8c22308db3e8768770062b58825243d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Wed, 28 Feb 2018 14:13:01 +0100 Subject: [PATCH 08/10] Update webide frontend to emphasize that a process is being reloaded --- src/app/webide/webide.component.html | 6 +++--- src/app/webide/webide.component.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html index 9054c88..163476b 100644 --- a/src/app/webide/webide.component.html +++ b/src/app/webide/webide.component.html @@ -23,8 +23,8 @@ type="submit" class="btn btn-secondary" [class.btn-success]="saveButtonState === 'SAVED'" - [class.btn-warning]="saveButtonState === 'SAVING'" + [class.btn-info]="saveButtonState === 'SAVING'" [class.disabled]="saveButtonState === 'SAVING'" >Save! - Saved! - Saving... + Done! + Reloading... diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 53bfd05..6fc1ec5 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -36,7 +36,7 @@ export class WebideComponent implements OnInit { command_handlers = { 'reload': this.reloadHandler.bind(this), 'read': this.readHandler.bind(this), 'select': this.selectHandler.bind(this), - 'write': this.writeHandler.bind(this)}; + 'write': () => {}}; constructor(private webSocketService: WebSocketService, private changeDetectorRef: ChangeDetectorRef, @@ -47,7 +47,7 @@ export class WebideComponent implements OnInit { this.subscribeWS(); this.requestCode(); this.processManagerService.init(); - this.processManagerService.subscribeCallback('login', (event) => { console.log('CICÁK!!'); }); + this.processManagerService.subscribeCallback('login', (event) => { this.setButtonStateSaved(); }); } subscribeWS() { @@ -76,7 +76,7 @@ export class WebideComponent implements OnInit { this.updateFileData(data); } - writeHandler(data: SourceCode) { + setButtonStateSaved() { this.saveButtonState = 'SAVED'; } From 277d253fbf2fb6aa3782bf6ee6dd99a4013fdc66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Wed, 28 Feb 2018 15:05:51 +0100 Subject: [PATCH 09/10] Add spinning reload animation for Satan's grace --- src/app/webide/webide.component.html | 2 +- src/app/webide/webide.component.scss | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html index 163476b..125ff21 100644 --- a/src/app/webide/webide.component.html +++ b/src/app/webide/webide.component.html @@ -27,4 +27,4 @@ [class.disabled]="saveButtonState === 'SAVING'" >Save! Done! - Reloading... +
Reloading... diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss index 0ad49f6..daf91d9 100644 --- a/src/app/webide/webide.component.scss +++ b/src/app/webide/webide.component.scss @@ -7,3 +7,21 @@ .btn-secondary { border-radius: 0; } + +.loader { + border: 2px solid #ffffff; + border-radius: 50%; + border-top: 2px solid #212529; + width: 15px; + height: 15px; + animation: spin 2s linear infinite; + display: inline-block; + margin-right: 5px; + position: relative; + top: 2px; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} From 2d6289609f35560dddadd4e577e756e1d753c519 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Wed, 28 Feb 2018 15:38:22 +0100 Subject: [PATCH 10/10] Implement tab switching saving files --- src/app/webide/webide.component.html | 2 +- src/app/webide/webide.component.ts | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html index 125ff21..5a2a2a6 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)="selectCode(file); requestCode()" + (click)="sendCodeContents(); selectCode(file); requestCode()" [disabled]="filename === file"> {{file}} diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 6fc1ec5..2180d8e 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -85,12 +85,16 @@ export class WebideComponent implements OnInit { } sendCode() { + this.sendCodeContents(); + this.saveButtonState = 'SAVING'; + this.processManagerService.restartProcess('login'); + } + + sendCodeContents() { this.webSocketService.send(this.key_id, { 'command': 'write', 'content': this.code }); - this.saveButtonState = 'SAVING'; - this.processManagerService.restartProcess('login'); } requestCode() {