statistics-page.ts

import * as m from 'mithril';
import Page from "../page/page";
import * as Stomp from 'stompjs';
import * as SockJS from 'sockjs-client';

var vm = {
  value: m.prop('')
};

const StatisticsPage = {

  controller({state, actions}) {

    document.title = "Statistics page";

    const projectUid = m.route.param('projectUid');

    var stompClient = null;

    function setConnected(connected: boolean) {

    };

    function connect() {
      var socket = new SockJS('/ws');
      stompClient = Stomp.over(<WebSocket>socket);
      stompClient.connect({
            login: '',
            passcode: ''
          },
          function(frame) {
            setConnected(true);
            stompClient.subscribe('/topic/metrics/' + projectUid, metricsResult => {
              //console.log("Received:" + metricsResult.body);
              //showResult(JSON.parse(metricsResult.body).metrics);
              showResult(metricsResult.body);
            });
          });
    }

    function disconnect() {
      stompClient.disconnect();
      setConnected(false);
      console.log("Disconnected");
    }


    function showResult(message: string) {
      vm.value(message);
      m.redraw();

      /*var response = document.getElementById('metricsResponse');
       var p = document.createElement('p');
       p.style.wordWrap = 'break-word';
       p.appendChild(document.createTextNode(message));
       response.appendChild(p);*/

      //var elem = document.createElement("div").setAttribute("id", "metrics-plot");
    };

    connect();

    return {
      state: state,
      actions: actions,
      onunload: disconnect
    };

  },
  
  view({state, actions, onunload}) {
    return m("div", m.component(Page, {
      state: state,
      actions: actions,
      content:
          m('.statistics-page', [
            m('div', 'Statistics page'),
            m('div', [
              m('p', {id: "metricsResponse"}),
              m("div", vm.value())
            ])
          ])
    }));
  }
  
};

export default StatisticsPage;