Implement frontend API to manipulate next button visibility

src/app/messages/messages.component.html

@@ -1,7 +1,7 @@
 <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 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 class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
     <div class="tfw-grid-message-header">

src/app/messages/messages.component.ts

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