index.html 4.54 KB
Newer Older
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
<head>
  
<script src="./jquery-ui-1.10.1.custom/js/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.1.custom/js/jquery-ui-1.10.1.custom.js" type="text/javascript" charset="utf-8"></script>

<script src="mousetrap.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="jquery-ui-1.10.1.custom/css/base/jquery.ui.theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="jquery-ui-1.10.1.custom/css/base/jquery.ui.button.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="jquery-ui-1.10.1.custom/css/base/jquery.ui.resizable.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="jquery-ui-1.10.1.custom/css/base/jquery.ui.accordion.css" type="text/css" media="screen" title="no title" charset="utf-8">

<title>Traj Server</title>

<style>
.highlightedRow { background-color: #dedede; }
body { font-family:Helvetica, sans-serif; background-color:#ededed; }
ul { list-style:none; margin:0; padding:0;}
h3 { font-size:1em; display:inline; color:#333; margin-right:3em; margin-left:1em;}

h1 { font-size:1.2em;}
td { font-size:.6em; }

.infoTable td { border:none !important; }
.infoTable td { font-size:.8em !important; }
.infoTable tr td:first-child { text-align: right; white-space: nowrap !important; width:25%; font-color:#666; font-weight:bold;}
.infoTable tr td:last-child { width:75%; padding-left: 2em; text-align:left !important;  }

table { border-collapse:collapse; width: 100%; table-layout:fixed; }
#monitorTable, #serverTable, #clientsTable, th { border: 1px solid #666;}

table thead th { font-size:.8em; }

th { white-space: nowrap !important; margin: 0; padding: 5px; font-weight:normal; font-size: .8em; background:#999; color:#fff;}
.ui-widget{font-size:.7em;}
thead tr { width: 100%; }
tbody { height: 2em;}
#clientsTableBody tr td, #monitorTableBody tr td { text-align: center; border-right:1px solid #666; border-top:1px solid #666; font-size:.9em; overflow:hidden; }

#serverTableBody td { border-right:1px solid #666; border-top:1px solid #666; }

#serverTableBody td:last-child, #serverTableBody td:nth-child(2) { text-align: center; vertical-align: top; }

#monitorTable, #serverTable, #clientsTable { border:1px solid #666; margin-bottom:1.5em; }
#clientsTable tbody, #serverTable tbody { font-size:.85em; }
#monitorTable tbody { font-size:.75em;}

#newServerTable { text-align:left ; }

input[type="text"] { width: 90%; }

.interfaceHeader { line-height:1.75em !important;}
</style>
</head>
<body>
  <div id='servers'>
    <div class="ui-widget-header ui-corner-all interfaceHeader">
      <h3>Servers</h3> 
     <!-- <button id="newButton">New Server</button>
      <button id="deleteButton">Remove Selected Server</button>   -->       
    </div>
    <table id='serverTable'>
      <thead>
        <tr>
        <th width='80%'>server info</th><th width='10%'>append client id</th><th width='10%'>monitor</th>
        </tr>
      </thead>
      <tbody id="serverTableBody">
      </tbody>
    </table>
  </div>


  <div style="height:245px ; text-align: center; diplay: block; margin:auto;">
    
    <div id='target-qrcode'></div> 
  <div id='target-url' style="text-align: center; font-size:2em; margin:auto;"></div> 

  </div>


  
  <div id='clients'>
    <div class="ui-widget-header ui-corner-all interfaceHeader">
      <h3>Clients</h3>
    </div>
    <table id='clientsTable'>
      <thead>
        <tr>
        <th>id #</th><th>ip address</th><th>connected to</th><th>interface</th><th>monitor</th>
        </tr>
      </thead>
      <tbody id="clientsTableBody">
      </tbody>
    </table>
  </div>
  
  <div id='monitor'>
    <div class="ui-widget-header ui-corner-all interfaceHeader">
      <h3>Monitor</h3>
      <button id="clearMonitorButton">Clear</button>
    </div>
    <table id='monitorTable'>
      <thead>
        <tr>
        <th width='10%'>server</th><th width='10%'>client id</th><th width='15%'>address / type</th><th width='15%'>typetags / channel</th><th width='50%'>values</th>
        </tr>
      </thead>
      <tbody id="monitorTableBody">
      </tbody>
    </table>
  </div>
  <input type="file" nwfile style='display:none' id='fileButton'/>
  <input type="file" nwsaveas style='display:none' id='saveFileButton'/>
  
  <script>
  if(typeof global.interface === 'undefined') {
    var s = $('<script src="server.js" type="text/javascript" charset="utf-8">');
    $('head').append(s);
  }else{
    // page reloaded, remove all servers
    global.interface.removeAllServers();
  }
  </script>
  
</body>
</html>