Implement service to monitor backend FSM state

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { WebSocketService } from './websocket.service';
+import { FSMUpdateService } from './fsmupdate.service';
 
 @Component({
   selector: 'app-root',
@@ -9,10 +10,11 @@ import { WebSocketService } from './websocket.service';
 export class AppComponent implements OnInit {
   title = 'app';
 
-  constructor(private webSocketService: WebSocketService) {}
+  constructor(private webSocketService: WebSocketService, private fsmUpdateService: FSMUpdateService) {}
 
   ngOnInit() {
     this.webSocketService.connect();
     this.webSocketService.send('reset', '');
+    this.fsmUpdateService.init();
   }
 }

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { LogsComponent } from './logs/logs.component';
 import { TestButtonComponent } from './test-button/test-button.component';
 import { WebSocketService } from './websocket.service';
 import { TerminalComponent } from './terminal/terminal.component';
+import { FSMUpdateService } from './fsmupdate.service';
 
 
 @NgModule({
@@ -38,7 +39,8 @@ import { TerminalComponent } from './terminal/terminal.component';
   providers: [
     MarkdownService,
     WebSocketService,
-    TerminadoService
+    TerminadoService,
+    FSMUpdateService
   ],
   bootstrap: [
     AppComponent

src/app/fsmupdate.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { WebSocketService } from './websocket.service';
+
+
+class FSMUpdate {
+  current_state: string;
+  valid_transitions: object;
+}
+
+
+@Injectable()
+export class FSMUpdateService {
+  public current_state: string;
+  public valid_transitions: object;
+
+  constructor(private websocketservice: WebSocketService) {}
+
+  public init(): void {
+    this.websocketservice.observeAnchor<FSMUpdate>('FSMUpdate').subscribe((event) => {
+      this.current_state = event.data.current_state;
+      this.valid_transitions = event.data.valid_transitions;
+    });
+  }
+
+}