mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-09-18 08:19:58 +00:00
Code Issues Releases Wiki Activity

Reverse order of messaging messages

Browse Source
This commit is contained in:
Kristóf Tóth
2018-06-26 14:13:29 +02:00
parent c6f9edc9f7
commit 8a2518fbd0
5 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/messages/messages.component.html
View File

@@ -3,17 +3,11 @@
<div class="tfw-messages-main">
<div class="tfw-grid-messages-header">
<div class="tao-grid-top-left"><span>Instructions</span></div>
<div class="tao-grid-center-right"><button *ngIf="showNextButton" (click)="stepFSM()" class="tao-btn-rainbow">Next</button></div>
</div>
<div *ngIf="messageInQueue" class="tfw-grid-message jumping-circle-container">
<div class="jumping-circle" id="jc1"></div>
<div class="jumping-circle" id="jc2"></div>
<div class="jumping-circle" id="jc3"></div>
</div>
<div class="tfw-grid-message"
*ngFor="let message of messages.slice().reverse(); let first = first"
[class.highlighted-message]="first">
*ngFor="let message of messages.slice(); let last = last"
[class.highlighted-message]="last">
<div class="tfw-grid-message-header">
<img class="tao-grid-center-left" src="images/avataobot.svg"/>
<div class="tao-grid-center-left originator">{{message.originator}}</div>
@@ -21,4 +15,9 @@
</div>
<div [innerHtml]="message.message"></div>
</div>
<div *ngIf="messageInQueue" class="tfw-grid-message jumping-circle-container">
<div class="jumping-circle" id="jc1"></div>
<div class="jumping-circle" id="jc2"></div>
<div class="jumping-circle" id="jc3"></div>
</div>
</div>

9
src/app/messages/messages.component.ts
View File

@@ -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<any> = new EventEmitter();
newMessage: Subject<MessagesMessage> = new Subject<MessagesMessage>();
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
);