Move angular services to separate directory

src/app/services/fsmupdate.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { WebSocketService } from './websocket.service';
+
+import { FSMUpdate } from './fsmupdate';
+
+@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;
+    });
+  }
+
+}

src/app/services/fsmupdate.ts

@@ -0,0 +1,4 @@
+export class FSMUpdate {
+  current_state: string;
+  valid_transitions: object;
+}

src/app/services/markdown.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { Converter } from 'showdown';
+
+@Injectable()
+export class MarkdownService {
+  private converter: Converter;
+  constructor() {
+    this.converter = new Converter();
+  }
+
+  convertToHtml(text: string) {
+    return this.converter.makeHtml(text);
+  }
+}

src/app/services/terminado.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { Terminal } from 'xterm';
+import * as fit from 'xterm/lib/addons/fit/fit';
+import * as terminado from 'xterm/lib/addons/terminado/terminado';
+
+@Injectable()
+export class TerminadoService {
+  xterm: Terminal;
+  ws: WebSocket;
+
+  constructor() {
+    Terminal.applyAddon(fit);
+    Terminal.applyAddon(terminado);
+    this.xterm = new Terminal();
+    const wsproto = (location.protocol === 'https:') ? 'wss://' : 'ws://';
+    this.ws = new WebSocket(wsproto + window.location.host + '/terminal');
+  }
+
+  attach(element: HTMLElement) {
+    this.ws.onopen = () => {
+      (<any>this.xterm).terminadoAttach(this.ws);
+      this.xterm.open(element);
+      this.fit();
+      this.xterm.blur();
+    };
+  }
+
+  detach() {
+    (<any>this.xterm).terminadoDetach(this.ws);
+    this.xterm.destroy();
+    this.ws.close();
+  }
+
+  fit() {
+    (<any>this.xterm).fit();
+  }
+}

src/app/services/websocket.service.ts

@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core';
+import { QueueingSubject } from 'queueing-subject';
+import { Observable } from 'rxjs/Observable';
+import websocketConnect from 'rxjs-websockets';
+import { filter, map, share } from 'rxjs/operators';
+import { WSMessage } from './wsmessage';
+
+
+function jsonWebsocketConnect(url: string, input: Observable<object>, protocols?: string | string[]) {
+  const jsonInput = input.pipe(map(message => JSON.stringify(message)));
+  const { connectionStatus, messages } = websocketConnect(url, jsonInput, protocols);
+  const jsonMessages = messages.pipe(map(message => JSON.parse(message)));
+  return { connectionStatus, messages: jsonMessages };
+}
+
+@Injectable()
+export class WebSocketService {
+  private uplink: QueueingSubject<object>;
+  public downlink: Observable<WSMessage<undefined>>;
+
+  constructor() {
+
+  }
+
+  public connect() {
+    if (this.downlink) {
+      return;
+    }
+
+    // Using share() causes a single WebSocket to be created when the first
+    // observer subscribes. This socket is shared with subsequent observers
+    // and closed when the observer count falls to zero.
+    const wsproto = (location.protocol === 'https:') ? 'wss://' : 'ws://';
+    this.downlink = jsonWebsocketConnect(
+      wsproto + window.location.host + '/ws',
+      this.uplink = new QueueingSubject<object>()
+    ).messages.pipe(
+        map(message => <WSMessage<undefined>> message),
+        share()
+      );
+    console.log('ws connected');
+  }
+
+  public observeAnchor<T>(anchor: string): Observable<WSMessage<T>> {
+    return this.downlink.pipe(filter(message => message.anchor === anchor));
+  }
+
+  public send(anchor: string, data: any): void {
+    // If the WebSocket is not connected then the QueueingSubject will ensure
+    // that messages are queued and delivered when the WebSocket reconnects.
+    // A regular Subject can be used to discard messages sent when the WebSocket
+    // is disconnected.
+    this.uplink.next({
+      'anchor': anchor,
+      'data': data
+    });
+  }
+}

src/app/services/wsmessage.ts

@@ -0,0 +1,4 @@
+export class WSMessage<T> {
+  anchor: string;
+  data: T;  // TODO: sane annotation
+}