From a825841d0ed1b6db9daeca399a96ed96a5487ec1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Mon, 25 Jun 2018 09:59:45 +0200 Subject: [PATCH 01/15] Refactor handling of messages --- src/app/messages/messages.component.ts | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index 3a8105e..17fc2ff 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -32,15 +32,17 @@ export class MessagesComponent implements OnInit { ngOnInit() { this.websocketService.connect(); this.websocketService.observeKey('message').subscribe( - (event) => { - this.messages.push(event.data); - event.data.message = this.convert(event.data.message); - this.changeDetectorRef.detectChanges(); - }); + (event) => this.handleMessage(event.data) + ); this.websocketService.observeKey('messagecontrol').subscribe( - (event) => { - this.command_handlers[event.data.command](event.data); - }); + (event) => this.command_handlers[event.data.command](event.data) + ); + } + + handleMessage(data: MessagesMessage) { + data.message = this.convert(data.message); + this.messages.push(data); + this.changeDetectorRef.detectChanges(); } convert(text: string) { From 224da31981cd38cb96b28dd07aa4d12906097c03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Mon, 25 Jun 2018 14:02:37 +0200 Subject: [PATCH 02/15] Implement first version of message queueing --- src/app/message-types/message-metadata.ts | 7 +++ .../message-types/message-queue-message.ts | 8 +++ src/app/message-types/messages-message.ts | 6 +- src/app/messages/messages.component.ts | 55 ++++++++++++++++++- 4 files changed, 72 insertions(+), 4 deletions(-) create mode 100644 src/app/message-types/message-metadata.ts create mode 100644 src/app/message-types/message-queue-message.ts diff --git a/src/app/message-types/message-metadata.ts b/src/app/message-types/message-metadata.ts new file mode 100644 index 0000000..301764a --- /dev/null +++ b/src/app/message-types/message-metadata.ts @@ -0,0 +1,7 @@ +// Copyright (C) 2018 Avatao.com Innovative Learning Kft. +// All Rights Reserved. See LICENSE file for details. + +export class MessageMetadata { + originator: string; + timestamp: Date; +} diff --git a/src/app/message-types/message-queue-message.ts b/src/app/message-types/message-queue-message.ts new file mode 100644 index 0000000..540cebb --- /dev/null +++ b/src/app/message-types/message-queue-message.ts @@ -0,0 +1,8 @@ +// Copyright (C) 2018 Avatao.com Innovative Learning Kft. +// All Rights Reserved. See LICENSE file for details. + +import { MessagesMessage } from './messages-message'; + +export class MessageQueueMessage { + messages: Array; +} diff --git a/src/app/message-types/messages-message.ts b/src/app/message-types/messages-message.ts index d8b1d0a..0894522 100644 --- a/src/app/message-types/messages-message.ts +++ b/src/app/message-types/messages-message.ts @@ -1,8 +1,8 @@ // Copyright (C) 2018 Avatao.com Innovative Learning Kft. // All Rights Reserved. See LICENSE file for details. -export class MessagesMessage { - originator: string; - timestamp: Date; +import { MessageMetadata } from './message-metadata'; + +export class MessagesMessage extends MessageMetadata { message: string; } diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index 17fc2ff..ee0c52d 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -9,6 +9,7 @@ import { MessagesMessage } from '../message-types/messages-message'; import { MessagesControlCommand } from '../message-types/messages-control-command'; import { config } from '../config'; import { CommandMessage } from '../message-types/command-message'; +import { MessageQueueMessage } from '../message-types/message-queue-message'; @Component({ selector: 'app-messages', @@ -17,6 +18,7 @@ import { CommandMessage } from '../message-types/command-message'; }) export class MessagesComponent implements OnInit { messages: MessagesMessage[] = []; + messageQueueAttender: MessageQueueAttender; showNextButton: boolean = config.messages.showNextButton; command_handlers = { @@ -27,13 +29,18 @@ export class MessagesComponent implements OnInit { private markdownService: MarkdownService, private websocketService: WebSocketService, private changeDetectorRef: ChangeDetectorRef - ) {} + ) { + this.messageQueueAttender = new MessageQueueAttender(this.messages); + } ngOnInit() { this.websocketService.connect(); this.websocketService.observeKey('message').subscribe( (event) => this.handleMessage(event.data) ); + this.websocketService.observeKey('queueMessages').subscribe( + (event) => this.handleQueueMessage(event.data) + ); this.websocketService.observeKey('messagecontrol').subscribe( (event) => this.command_handlers[event.data.command](event.data) ); @@ -45,6 +52,10 @@ export class MessagesComponent implements OnInit { this.changeDetectorRef.detectChanges(); } + handleQueueMessage(data: MessageQueueMessage) { + this.messageQueueAttender.queueMessages(data.messages); + } + convert(text: string) { return this.markdownService.convertToHtml(text); } @@ -57,3 +68,45 @@ export class MessagesComponent implements OnInit { this.websocketService.sendJSON({key: '', trigger: 'step_next'}); } } + + +class MessageQueueAttender { + private readonly charPerSecond: number; + private lastMessageLength = 0; + private queue: MessagesMessage[] = []; + + constructor(private destArray: Array, wordPerMinute: number = 150) { + const charPerMinute = wordPerMinute * 5; + this.charPerSecond = charPerMinute / 60; + } + + queueMessages(messages: Array) { + this.queue = this.queue.concat(messages); + this.attendQueue(); + } + + private processMessage() { + if (this.queue.length > 0) { + const lastMessage = this.queue.shift(); + this.lastMessageLength = lastMessage.message.length; + this.destArray.push(lastMessage); + } + if (this.queue.length === 0) { + this.lastMessageLength = 0; + } + } + + private attendQueue() { + if (this.queue.length > 0) { + const timeoutSeconds = this.lastMessageLength / this.charPerSecond; + setTimeout( + () => { + this.processMessage(); + this.attendQueue(); + console.log(timeoutSeconds); + }, + timeoutSeconds * 1000 + ); + } + } +} From 736f0eea71798834624ad9d9c689292e4e1e4907 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Mon, 25 Jun 2018 14:18:09 +0200 Subject: [PATCH 03/15] Make message handling logic more decoupled from implementation --- src/app/messages/messages.component.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index ee0c52d..b9e77c7 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -10,6 +10,7 @@ import { MessagesControlCommand } from '../message-types/messages-control-comman import { config } from '../config'; import { CommandMessage } from '../message-types/command-message'; import { MessageQueueMessage } from '../message-types/message-queue-message'; +import { Subject, Observer } from 'rxjs'; @Component({ selector: 'app-messages', @@ -17,6 +18,7 @@ import { MessageQueueMessage } from '../message-types/message-queue-message'; styleUrls: ['./messages.component.scss'] }) export class MessagesComponent implements OnInit { + newMessage: Subject = new Subject(); messages: MessagesMessage[] = []; messageQueueAttender: MessageQueueAttender; showNextButton: boolean = config.messages.showNextButton; @@ -30,13 +32,15 @@ export class MessagesComponent implements OnInit { private websocketService: WebSocketService, private changeDetectorRef: ChangeDetectorRef ) { - this.messageQueueAttender = new MessageQueueAttender(this.messages); + this.messageQueueAttender = new MessageQueueAttender(this.newMessage); } ngOnInit() { + this.newMessage.subscribe(this.handleMessage.bind(this)); + this.websocketService.connect(); this.websocketService.observeKey('message').subscribe( - (event) => this.handleMessage(event.data) + (event) => this.newMessage.next(event.data) ); this.websocketService.observeKey('queueMessages').subscribe( (event) => this.handleQueueMessage(event.data) @@ -75,7 +79,7 @@ class MessageQueueAttender { private lastMessageLength = 0; private queue: MessagesMessage[] = []; - constructor(private destArray: Array, wordPerMinute: number = 150) { + constructor(private messageEmitter: Observer, wordPerMinute: number = 150) { const charPerMinute = wordPerMinute * 5; this.charPerSecond = charPerMinute / 60; } @@ -89,7 +93,7 @@ class MessageQueueAttender { if (this.queue.length > 0) { const lastMessage = this.queue.shift(); this.lastMessageLength = lastMessage.message.length; - this.destArray.push(lastMessage); + this.messageEmitter.next(lastMessage); } if (this.queue.length === 0) { this.lastMessageLength = 0; From 9af0467489031599897651e6a1402c2d09bdca5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Mon, 25 Jun 2018 15:36:06 +0200 Subject: [PATCH 04/15] Implement inflating messages animation --- src/app/messages/messages.component.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 307aeef..91651dd 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -28,6 +28,15 @@ padding: $tiny; font-size: $font-size-base; margin-bottom: $hair; + + animation-name: inflate; + animation-duration: 0.5s; + animation-timing-function: cubic-bezier(0.01, 0.1, 0, 1); +} + +@keyframes inflate { + 0% { transform: scale(0,0); } + 100% { transform: scale(1,1); } } .tfw-grid-message-header { From 09823331d1097729e3c9b3d3af915df996bbc07f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Mon, 25 Jun 2018 16:54:15 +0200 Subject: [PATCH 05/15] Implement poc message in queue notifier (chat writing stuff) --- src/app/messages/messages.component.html | 5 ++++ src/app/messages/messages.component.scss | 32 ++++++++++++++++++++++++ src/app/messages/messages.component.ts | 2 ++ 3 files changed, 39 insertions(+) diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index 0a3b24b..26314d7 100644 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -6,6 +6,11 @@
Instructions
+
+
+
+
+
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 91651dd..59daafd 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -39,6 +39,38 @@ 100% { transform: scale(1,1); } } +.jumping-circle-container { + display: flex; + padding-top: 1.3em; + padding-bottom: 1em; +} + +.jumping-circle { + width: 0.35em; + height: 0.35em; + border-radius: 50%; + background-color: gray; + margin-top: 0.3em; + margin-left: 0.3em; + + animation-name: float; + animation-duration: 1.7s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} + +#jc2 { animation-delay: 0.2s; } +#jc3 { animation-delay: 0.45s; } + +@keyframes float { + 0% { transform: translateY(0em); } + 30% { transform: translateY(-0.5em); } + 60% { transform: translateY(0.2em); } + 80% { transform: translateY(0em); } + 90% { transform: translateY(-0.5em); } + 100% { transform: translateY(0em); } +} + .tfw-grid-message-header { display: grid; grid-template-columns: 1fr 5fr 8fr; diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index b9e77c7..9d9198c 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -19,6 +19,8 @@ import { Subject, Observer } from 'rxjs'; }) export class MessagesComponent implements OnInit { newMessage: Subject = new Subject(); + messageInQueue = true; + messages: MessagesMessage[] = []; messageQueueAttender: MessageQueueAttender; showNextButton: boolean = config.messages.showNextButton; From ee448a32c9cdbfb3dd548630b597a086fb5cfb35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Mon, 25 Jun 2018 17:07:19 +0200 Subject: [PATCH 06/15] Add config.ts option to condigure messageQueue WPM --- src/app/config.ts | 3 ++- src/app/messages/messages.component.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/config.ts b/src/app/config.ts index e5844ab..ee07ebc 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -38,7 +38,8 @@ export const config = { }, messages: { route: 'messages', - showNextButton: false + showNextButton: false, + messageQueueWPM: 150 }, console: { route: 'console', diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index 9d9198c..2e0bea1 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -81,7 +81,7 @@ class MessageQueueAttender { private lastMessageLength = 0; private queue: MessagesMessage[] = []; - constructor(private messageEmitter: Observer, wordPerMinute: number = 150) { + constructor(private messageEmitter: Observer, wordPerMinute: number = config.messages.messageQueueWPM) { const charPerMinute = wordPerMinute * 5; this.charPerSecond = charPerMinute / 60; } From 9908965a07ae9243321aec8d26d50b0046d3d0aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Mon, 25 Jun 2018 17:16:56 +0200 Subject: [PATCH 07/15] Implement chat like "xy is writing..." bubble when messages are queued --- src/app/messages/messages.component.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index 2e0bea1..648186b 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -10,7 +10,7 @@ import { MessagesControlCommand } from '../message-types/messages-control-comman import { config } from '../config'; import { CommandMessage } from '../message-types/command-message'; import { MessageQueueMessage } from '../message-types/message-queue-message'; -import { Subject, Observer } from 'rxjs'; +import { Subject, Observer, BehaviorSubject } from 'rxjs'; @Component({ selector: 'app-messages', @@ -39,6 +39,9 @@ export class MessagesComponent implements OnInit { ngOnInit() { this.newMessage.subscribe(this.handleMessage.bind(this)); + this.messageQueueAttender.messageInQueue.subscribe( + (value) => this.messageInQueue = value + ); this.websocketService.connect(); this.websocketService.observeKey('message').subscribe( @@ -77,6 +80,8 @@ export class MessagesComponent implements OnInit { class MessageQueueAttender { + public messageInQueue = new BehaviorSubject(false); + private readonly charPerSecond: number; private lastMessageLength = 0; private queue: MessagesMessage[] = []; @@ -99,11 +104,13 @@ class MessageQueueAttender { } if (this.queue.length === 0) { this.lastMessageLength = 0; + this.messageInQueue.next(false); } } private attendQueue() { if (this.queue.length > 0) { + this.messageInQueue.next(true); const timeoutSeconds = this.lastMessageLength / this.charPerSecond; setTimeout( () => { From ef4f467457b4ceb5045bd78dbe455fd3641dc291 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Mon, 25 Jun 2018 17:24:20 +0200 Subject: [PATCH 08/15] Rename old handler for easier comprehension --- src/app/messages/messages.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index 648186b..1a9d8fc 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -38,7 +38,7 @@ export class MessagesComponent implements OnInit { } ngOnInit() { - this.newMessage.subscribe(this.handleMessage.bind(this)); + this.newMessage.subscribe(this.writeMessage.bind(this)); this.messageQueueAttender.messageInQueue.subscribe( (value) => this.messageInQueue = value ); @@ -55,7 +55,7 @@ export class MessagesComponent implements OnInit { ); } - handleMessage(data: MessagesMessage) { + writeMessage(data: MessagesMessage) { data.message = this.convert(data.message); this.messages.push(data); this.changeDetectorRef.detectChanges(); From f9ac60b2700794e88bbbff28359ca3684c758f70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Mon, 25 Jun 2018 18:10:25 +0200 Subject: [PATCH 09/15] Make message timestamps optional --- src/app/message-types/message-metadata.ts | 2 +- src/app/messages/messages.component.ts | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/app/message-types/message-metadata.ts b/src/app/message-types/message-metadata.ts index 301764a..02058cf 100644 --- a/src/app/message-types/message-metadata.ts +++ b/src/app/message-types/message-metadata.ts @@ -3,5 +3,5 @@ export class MessageMetadata { originator: string; - timestamp: Date; + timestamp?: Date; } diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index 1a9d8fc..24eff16 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -55,17 +55,24 @@ export class MessagesComponent implements OnInit { ); } - writeMessage(data: MessagesMessage) { - data.message = this.convert(data.message); - this.messages.push(data); + writeMessage(message: MessagesMessage) { + this.transformMessage(message); + this.messages.push(message); this.changeDetectorRef.detectChanges(); } + transformMessage(message: MessagesMessage) { + message.message = this.convertMarkdownToHTML(message.message); + if (!message.timestamp) { + message.timestamp = new Date(); + } + } + handleQueueMessage(data: MessageQueueMessage) { this.messageQueueAttender.queueMessages(data.messages); } - convert(text: string) { + convertMarkdownToHTML(text: string) { return this.markdownService.convertToHtml(text); } From 02f8fc977428e5d75fc697616071721b8f9e2ebe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Tue, 26 Jun 2018 09:37:33 +0200 Subject: [PATCH 10/15] Remove leftover debugging logging --- src/app/messages/messages.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index 24eff16..6ca775b 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -123,7 +123,6 @@ class MessageQueueAttender { () => { this.processMessage(); this.attendQueue(); - console.log(timeoutSeconds); }, timeoutSeconds * 1000 ); From c6f9edc9f79c4fdf346b088991c48bb5a281a64d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Tue, 26 Jun 2018 12:03:25 +0200 Subject: [PATCH 11/15] Add highlight to latest message --- src/app/messages/messages.component.html | 4 +++- src/app/messages/messages.component.scss | 6 ++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index 26314d7..ccde8dc 100644 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -11,7 +11,9 @@
-
+
{{message.originator}}
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 59daafd..3f4e6c8 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -34,6 +34,12 @@ animation-timing-function: cubic-bezier(0.01, 0.1, 0, 1); } +.highlighted-message { + border-style: solid; + border-width: 1px; + border-color: $tao-blue-100; +} + @keyframes inflate { 0% { transform: scale(0,0); } 100% { transform: scale(1,1); } From 8a2518fbd0f7907745b426377660d3885d0f9732 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Tue, 26 Jun 2018 14:13:29 +0200 Subject: [PATCH 12/15] Reverse order of messaging messages --- src/app/dashboard/dashboard.component.html | 6 ++++-- src/app/dashboard/dashboard.component.scss | 5 +++++ src/app/dashboard/dashboard.component.ts | 8 ++++++++ src/app/messages/messages.component.html | 15 +++++++-------- src/app/messages/messages.component.ts | 9 +++++++-- 5 files changed, 31 insertions(+), 12 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 77d23d3..c50353a 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -4,8 +4,10 @@
-
- +
+
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index c6394f2..33d3ede 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -58,6 +58,11 @@ } } + .tfw-messages::-webkit-scrollbar { + width: 0px; + background: transparent; + } + .tfw-ide { background-color: #1e1e1e; // vscode dark theme } diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 6d56a58..71136d5 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -20,6 +20,7 @@ export class DashboardComponent implements OnInit, OnDestroy { deploying = false; deploymentNotificationSubscription: Subscription; @ViewChild('webiframe') webiframe: ElementRef; + @ViewChild('tfwmessages') messages: ElementRef; layout: string = config.dashboard.currentLayout; hideMessages: boolean = config.dashboard.hideMessages; @@ -125,4 +126,11 @@ export class DashboardComponent implements OnInit, OnDestroy { this.selectTerminalMenuItem('console'); } } + + scrollMessagesToBottom(): void { + const element = this.messages.nativeElement; + // This must be done in the Angular event loop to avoid messing up + // change detection (not in the template like ConsoleComponent does) + element.scrollTop = element.scrollHeight; + } } diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index ccde8dc..f4c992b 100644 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -3,17 +3,11 @@
-
Instructions
-
-
-
-
-
+ *ngFor="let message of messages.slice(); let last = last" + [class.highlighted-message]="last">
{{message.originator}}
@@ -21,4 +15,9 @@
+
+
+
+
+
diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index 6ca775b..53a42eb 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -1,7 +1,7 @@ // Copyright (C) 2018 Avatao.com Innovative Learning Kft. // All Rights Reserved. See LICENSE file for details. -import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output } from '@angular/core'; import { MarkdownService } from '../services/markdown.service'; import { WebSocketService } from '../services/websocket.service'; @@ -18,6 +18,7 @@ import { Subject, Observer, BehaviorSubject } from 'rxjs'; styleUrls: ['./messages.component.scss'] }) export class MessagesComponent implements OnInit { + @Output() newMessageEvent: EventEmitter = new EventEmitter(); newMessage: Subject = new Subject(); messageInQueue = true; @@ -38,7 +39,11 @@ export class MessagesComponent implements OnInit { } ngOnInit() { - this.newMessage.subscribe(this.writeMessage.bind(this)); + this.newMessage.subscribe( + (message) => { + this.writeMessage(message); + this.newMessageEvent.emit(); + }); this.messageQueueAttender.messageInQueue.subscribe( (value) => this.messageInQueue = value ); From 958b44e57014ac582a38d33ace4f0ca192f668e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Tue, 26 Jun 2018 14:57:09 +0200 Subject: [PATCH 13/15] Fix next button placement with new messages UI --- src/app/messages/messages.component.html | 10 +++++++--- src/app/messages/messages.component.scss | 14 ++------------ 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index f4c992b..784fc6e 100644 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -2,9 +2,6 @@ All Rights Reserved. See LICENSE file for details. -->
-
-
-
@@ -20,4 +17,11 @@
+
+ +
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 3f4e6c8..3f5965e 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -3,18 +3,8 @@ @import "../../assets/scss/variables.scss"; -.tfw-messages-main { - .tfw-grid-messages-header { - display: grid; - grid-template-columns: 1fr 1fr; - margin-bottom: $small; - - span { - color: $tao-blue-500; - font-weight: 500; - font-size: $font-size-h3; - } - } +.tfw-next-button { + text-align: center; } .tfw-grid-message { From ea5ed41485ee0bb2ecb54cdca088cc4eb6aed5be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Tue, 26 Jun 2018 16:04:09 +0200 Subject: [PATCH 14/15] Update documentation with message queueing stuff --- README.md | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 801fb63..59dd396 100644 --- a/README.md +++ b/README.md @@ -97,12 +97,40 @@ The message format used: "data": { "originator": ..., - "timestamp": ..., "message": ... } } ``` +This component can be used as a simple chatbot as well. + +You can provide a list of messages to queue and they will be automatically displayed one after the other. +There is a wait time between each message so that the user can properly read them. +This wait time is calculated from the length of the last message, and can be configured using the `messages.messageQueueWPM` key in `config.ts`. + +You can queue messages like so: + +``` +{ + "key": "queueMessages", + "data": + { + "messages": + [ + { + "originator": ... + "message": ... + }, + { + "originator": ... + "message": ... + }, + ... + ] + } +} +``` + You can use the `MessageSender` class to send messages from the TFW server or event handlers written in Python. ### Web – customisable component From 633ec0f67f9fffe7d9a63337ade69718e26713e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= Date: Tue, 26 Jun 2018 17:22:44 +0200 Subject: [PATCH 15/15] Make latest message highlight more subtle --- src/app/messages/messages.component.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 3f5965e..9b39263 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -25,9 +25,7 @@ } .highlighted-message { - border-style: solid; - border-width: 1px; - border-color: $tao-blue-100; + box-shadow: 0px 0px 3px 0px rgba($tao-gray-300,0.65); } @keyframes inflate {