summaryrefslogtreecommitdiff
path: root/cmd/dolmetschctld/web-static/socket.html
blob: f1156c7c121f96501572b8665d17e305b2200e86 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE HTML>
<html>
  <head>
    <title>dolmetschctl Websocket Testclient</title>
    <meta charset="utf-8">
    <style type="text/css">
      body {
        background-color: #555;
      }

      div.data {
        background-color: white;
        border: 1px solid;
        padding: 1em;
        font-family: monospace;
        margin-top: 1em;
        margin-bottom: 1em;
      }

      td {
        text-align: right;
      }
    </style>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
      function Controller(url) {
        this.sock = new WebSocket(url);
        this.sock_onmessage = function (event) {
          data = JSON.parse(event.data)
          if(data.type == 'languages') {
            sel = $('#selectlang');
            sel.empty();
            for (var i=0; i < data.languages.length; i++) {
              sel.append('<option>' + data.languages[i] + '</option>')
            }
          } else {
            $('#rawmsg').text(event.data);
          }
          $('#buttonstate').removeAttr('disabled','disabled');
          $('#buttonlang').removeAttr('disabled','disabled');
        }
        this.sock.onmessage = this.sock_onmessage.bind(this);

        this.sock_onopen = function() {
          this.send({ command: "languages" });
          this.send({ command: "subscribe" });
          $('#buttonstate').removeAttr('disabled','disabled');
          $('#buttonlang').removeAttr('disabled','disabled');
        }
        this.sock.onopen = this.sock_onopen.bind(this);

        this.send = function(req){
          $('#rawmsg').text("");
          this.sock.send(JSON.stringify(req));
        }
      }

      var ctrl = new Controller("ws://localhost:8234/api/v1/socket");

      function state() {
        ctrl.send({ command: "state" });
      }

      function set_language() {
        ctrl.send({ command: "language", arguments: [ $('#selectlang').val() ] });
      }

      function init() {
        $('#buttonstate').attr('disabled','disabled')
        $('#buttonslang').attr('disabled','disabled')
      }
    </script>
  </head>
  <body onload="init()">

    <h1>dolmetschctl Websocket Testclient</h1>

    <div>
      <button id="buttonstate" onclick="state()">get state</button>
      <button id="buttonlang" onclick="set_language()">set language</button>
      <select id="selectlang"></select>
      <div id="rawmsg" class="data"></div>
    </div>

  </body>
</html>