From 7bb6093672f92636ee13f293b32ef5d67129724a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 16 Feb 2018 10:19:23 +0100 Subject: [PATCH 1/8] Implement routing module --- src/app/app-routing.module.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/app/app-routing.module.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts new file mode 100644 index 0000000..617bd99 --- /dev/null +++ b/src/app/app-routing.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { DashboardComponent } from './dashboard/dashboard.component'; +import { WebideComponent } from './webide/webide.component'; +import { TerminalComponent } from './terminal/terminal.component'; +import { MessagesComponent } from './messages/messages.component'; + +const routes: Routes = [ + { path: '', redirectTo: '/dashboard', pathMatch: 'full'}, + { path: 'dashboard', component: DashboardComponent}, + { path: 'webide', component: WebideComponent }, + { path: 'shell', component: TerminalComponent }, + { path: 'messages', component: MessagesComponent } +]; + +@NgModule({ + imports: [ RouterModule.forRoot(routes) ], + exports: [ RouterModule ], +}) +export class AppRoutingModule {} From 3178fcc7e6f1094962ffcc0c5142af60d47375ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 16 Feb 2018 10:20:17 +0100 Subject: [PATCH 2/8] Remove unused title attribute from AppComponent --- src/app/app.component.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7cb41b3..420842d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -8,8 +8,6 @@ import { FSMUpdateService } from './fsmupdate.service'; styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { - title = 'app'; - constructor(private webSocketService: WebSocketService, private fsmUpdateService: FSMUpdateService) {} ngOnInit() { From 80de695fa1bf82573e5c3a80ce1585ecb55a78d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 16 Feb 2018 11:19:52 +0100 Subject: [PATCH 3/8] Extract demo page to 'dashboard' component --- src/app/app.component.html | 12 +----------- src/app/app.component.scss | 5 ----- src/app/app.component.ts | 11 ++--------- src/app/app.module.ts | 6 +++++- src/app/dashboard/dashboard.component.html | 11 +++++++++++ src/app/dashboard/dashboard.component.scss | 5 +++++ src/app/dashboard/dashboard.component.ts | 18 ++++++++++++++++++ src/app/webide/webide.component.ts | 2 ++ 8 files changed, 44 insertions(+), 26 deletions(-) create mode 100644 src/app/dashboard/dashboard.component.html create mode 100644 src/app/dashboard/dashboard.component.scss create mode 100644 src/app/dashboard/dashboard.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index d6c7861..0680b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,11 +1 @@ - -
-
-
-
-
-
-
-
-
-
+ diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 9d68c22..e69de29 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,5 +0,0 @@ -.tfw-first-row { - height: 40vh; -} - -.tfw-second-row {} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 420842d..761194e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,4 @@ import { Component, OnInit } from '@angular/core'; -import { WebSocketService } from './websocket.service'; -import { FSMUpdateService } from './fsmupdate.service'; @Component({ selector: 'app-root', @@ -8,11 +6,6 @@ import { FSMUpdateService } from './fsmupdate.service'; styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { - constructor(private webSocketService: WebSocketService, private fsmUpdateService: FSMUpdateService) {} - - ngOnInit() { - this.webSocketService.connect(); - this.webSocketService.send('reset', ''); - this.fsmUpdateService.init(); - } + constructor() {} + ngOnInit() {} } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d84778d..c66e85b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,6 +7,7 @@ import { AceEditorModule } from 'ng2-ace-editor'; import { AppComponent } from './app.component'; +import { DashboardComponent } from './dashboard/dashboard.component'; import { HeaderComponent } from './header/header.component'; import { LoginComponent } from './login/login.component'; import { MarkdownService } from './markdown.service'; @@ -16,6 +17,7 @@ import { MessagesComponent } from './messages/messages.component'; import { WebSocketService } from './websocket.service'; import { TerminalComponent } from './terminal/terminal.component'; import { FSMUpdateService } from './fsmupdate.service'; +import { AppRoutingModule } from './app-routing.module'; @NgModule({ @@ -25,7 +27,8 @@ import { FSMUpdateService } from './fsmupdate.service'; LoginComponent, WebideComponent, MessagesComponent, - TerminalComponent + TerminalComponent, + DashboardComponent ], imports: [ BrowserModule, @@ -33,6 +36,7 @@ import { FSMUpdateService } from './fsmupdate.service'; HttpClientModule, NgbModule.forRoot(), AceEditorModule, + AppRoutingModule, ], providers: [ MarkdownService, diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html new file mode 100644 index 0000000..d6c7861 --- /dev/null +++ b/src/app/dashboard/dashboard.component.html @@ -0,0 +1,11 @@ + +
+
+
+
+
+
+
+
+
+
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss new file mode 100644 index 0000000..9d68c22 --- /dev/null +++ b/src/app/dashboard/dashboard.component.scss @@ -0,0 +1,5 @@ +.tfw-first-row { + height: 40vh; +} + +.tfw-second-row {} diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts new file mode 100644 index 0000000..389f8e1 --- /dev/null +++ b/src/app/dashboard/dashboard.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core'; +import { WebSocketService } from '../websocket.service'; +import { FSMUpdateService } from '../fsmupdate.service'; + +@Component({ + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.scss'] +}) +export class DashboardComponent implements OnInit { + constructor(private webSocketService: WebSocketService, private fsmUpdateService: FSMUpdateService) {} + + ngOnInit() { + this.webSocketService.connect(); + this.webSocketService.send('reset', ''); + this.fsmUpdateService.init(); + } +} diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index 07f7f6e..d0f8670 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -41,6 +41,8 @@ export class WebideComponent implements OnInit { private changeDetectorRef: ChangeDetectorRef) { } ngOnInit() { + this.webSocketService.connect(); + this.webSocketService.send('reset', ''); this.subscribeWS(); this.requestCode(); } From e42d8311383f0f38ba7a9d5d9e3fed7bdf142fb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 16 Feb 2018 12:12:01 +0100 Subject: [PATCH 4/8] Add connecting WebSocketService to each component --- src/app/messages/messages.component.ts | 1 + src/app/webide/webide.component.ts | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index b164f9e..38301f0 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -21,6 +21,7 @@ export class MessagesComponent implements OnInit { } ngOnInit() { + this.websocketService.connect(); this.websocketService.observeAnchor('message').subscribe( (event) => { this.messages.push(event.data); diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts index d0f8670..e6e25fd 100644 --- a/src/app/webide/webide.component.ts +++ b/src/app/webide/webide.component.ts @@ -42,7 +42,6 @@ export class WebideComponent implements OnInit { ngOnInit() { this.webSocketService.connect(); - this.webSocketService.send('reset', ''); this.subscribeWS(); this.requestCode(); } From c4c875ae3db122d0412ce80c87efdafe41601e54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 16 Feb 2018 15:24:44 +0100 Subject: [PATCH 5/8] Remove unused ngOnInit --- src/app/app.component.ts | 5 ++--- src/app/messages/messages.component.ts | 1 + 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 761194e..068fb4f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,11 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent implements OnInit { +export class AppComponent { constructor() {} - ngOnInit() {} } diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index 38301f0..4619921 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -24,6 +24,7 @@ export class MessagesComponent implements OnInit { this.websocketService.connect(); this.websocketService.observeAnchor('message').subscribe( (event) => { + console.log(event.data); this.messages.push(event.data); event.data.message = this.convert(event.data.message); } From 1da9489be819e0eca9905a4c8a8469d794428c29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 16 Feb 2018 17:13:51 +0100 Subject: [PATCH 6/8] Remove WebSocketService from dashboard component --- src/app/dashboard/dashboard.component.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 389f8e1..27fcd21 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -1,6 +1,4 @@ import { Component, OnInit } from '@angular/core'; -import { WebSocketService } from '../websocket.service'; -import { FSMUpdateService } from '../fsmupdate.service'; @Component({ selector: 'app-dashboard', @@ -8,11 +6,8 @@ import { FSMUpdateService } from '../fsmupdate.service'; styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent implements OnInit { - constructor(private webSocketService: WebSocketService, private fsmUpdateService: FSMUpdateService) {} + constructor() {} ngOnInit() { - this.webSocketService.connect(); - this.webSocketService.send('reset', ''); - this.fsmUpdateService.init(); } } From 4a0424ef3419ae8311f8dfa8b427feb6e43b6aca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Fri, 16 Feb 2018 17:49:57 +0100 Subject: [PATCH 7/8] Fix messages not showing (detectChanges()) --- src/app/messages/messages.component.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index 4619921..6b4c30c 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { MarkdownService } from '../markdown.service'; import { WebSocketService } from '../websocket.service'; @@ -13,7 +13,8 @@ export class MessagesComponent implements OnInit { messages: Message[] = []; constructor( private markdownService: MarkdownService, - private websocketService: WebSocketService + private websocketService: WebSocketService, + private changeDetectorRef: ChangeDetectorRef ) {} convert(text: string) { @@ -24,11 +25,10 @@ export class MessagesComponent implements OnInit { this.websocketService.connect(); this.websocketService.observeAnchor('message').subscribe( (event) => { - console.log(event.data); this.messages.push(event.data); event.data.message = this.convert(event.data.message); + this.changeDetectorRef.detectChanges(); } ); } - } From 9b3e96f6a2444001be9bfa092a2e98876c414f4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Sat, 17 Feb 2018 21:51:33 +0100 Subject: [PATCH 8/8] Remove unused ngOnInit --- src/app/dashboard/dashboard.component.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 27fcd21..c6740c4 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -1,13 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) -export class DashboardComponent implements OnInit { +export class DashboardComponent { constructor() {} - - ngOnInit() { - } }