mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-01-15 21:31:56 +00:00
Code Issues Releases Wiki Activity

Implement frontend API to manipulate next button visibility

Browse Source
This commit is contained in:
Kristóf Tóth 2018-03-14 18:06:37 +01:00
parent caf14f49ed
commit 82f1ed17e9
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<div class="tfw-messages-main"> <div class="tfw-messages-main">
<div class="tfw-grid-messages-header"> <div class="tfw-grid-messages-header">
<div class="tao-grid-top-left"><span>Instructions</span></div> <div class="tao-grid-top-left"><span>Instructions</span></div>
<div class="tao-grid-center-right"><button class="tao-btn-rainbow">Next</button></div> <div class="tao-grid-center-right"><button *ngIf="showNextButton" class="tao-btn-rainbow">Next</button></div>
</div> </div>
<div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()"> <div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
<div class="tfw-grid-message-header"> <div class="tfw-grid-message-header">

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

@ -3,6 +3,7 @@ import { MarkdownService } from '../services/markdown.service';
import { WebSocketService } from '../services/websocket.service'; import { WebSocketService } from '../services/websocket.service';
import { Message } from './message'; import { Message } from './message';
import { MessageControl } from './messagecontrol';
@Component({ @Component({
selector: 'app-messages', selector: 'app-messages',
@ -11,6 +12,9 @@ import { Message } from './message';
}) })
export class MessagesComponent implements OnInit { export class MessagesComponent implements OnInit {
messages: Message[] = []; messages: Message[] = [];
showNextButton = false;
command_handlers = {'showbutton': this.showButton.bind(this)};
constructor( constructor(
private markdownService: MarkdownService, private markdownService: MarkdownService,
private websocketService: WebSocketService, private websocketService: WebSocketService,
@ -21,6 +25,10 @@ export class MessagesComponent implements OnInit {
return this.markdownService.convertToHtml(text); return this.markdownService.convertToHtml(text);
} }
showButton(data: MessageControl) {
this.showNextButton = data.next_visibility;
}
ngOnInit() { ngOnInit() {
this.websocketService.connect(); this.websocketService.connect();
this.websocketService.observeKey<Message>('message').subscribe( this.websocketService.observeKey<Message>('message').subscribe(
@ -28,7 +36,10 @@ export class MessagesComponent implements OnInit {
this.messages.push(event.data); this.messages.push(event.data);
event.data.message = this.convert(event.data.message); event.data.message = this.convert(event.data.message);
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
} });
); this.websocketService.observeKey<MessageControl>('messagecontrol').subscribe(
(event) => {
this.command_handlers[event.data.command](event.data);
});
} }
} }