-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
168 lines (156 loc) · 9.24 KB
/
index.html
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html>
<head>
<title>AnyCable Playground</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
function IsIE() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ||
window.location.href.indexOf('forceIE') > -1;
}
function loadAnyCable () {
var isIE = IsIE();
src = "./build/anycable.es6.js";
if (isIE) {
src = "./build/anycable.es5.js";
}
var script = document.createElement('script');
script.src = src;
document.head.appendChild(script);
}
loadAnyCable();
if (IsIE()) {
// Hide SVGs from the DOM, they look ugly in IE
document.addEventListener("DOMContentLoaded", function() {
var elements = document.querySelectorAll("svg");
var elementsArray = Array.prototype.slice.call(elements);
elementsArray.forEach(function(element) {
element.style.display = "none";
});
var left = document.querySelector(".main > div:first-child");
var right = document.querySelector(".main > div:nth-child(2)");
left.style.width = "49%";
left.style.display = "inline-block";
left.style.verticalAlign = "top";
right.style.width = "49%";
right.style.display = "inline-block";
});
}
</script>
<script src="./former.js"></script>
</head>
<body>
<div class="relative h-full min-h-screen w-full overflow-hidden bg-gray-50 p-6 sm:py-12">
<div class="main flex flex-row">
<div id="controls" class="w-1/2">
<h1 class="mb-2 text-xl font-bold uppercase">AnyCable playground</h1>
<form action="#" id="connect">
<div class="mb-2 flex w-full flex-row items-baseline">
<label class="mr-2 font-bold text-blue-700">URL:</label>
<input type="text" name="url" placeholder="Cable URL" value="ws://localhost:8080/cable" class="focus:shadow-outline w-full appearance-none rounded border px-2 py-1 leading-tight text-gray-700 focus:outline-none" />
</div>
<div class="mb-2 flex w-full flex-row items-baseline">
<label class="mr-2 font-bold text-blue-700">Transports:</label>
<div class="flex flex-row items-baseline">
<input checked name="transports.ws" type="checkbox" value="1" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-700 focus:ring-2 focus:ring-blue-600" />
<label class="ml-1">
WebSockets
</label>
<input name="transports.lp" type="checkbox" value="1" class="ml-2 h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-700 focus:ring-2 focus:ring-blue-600" />
<label class="ml-1">
Long polling
</label>
<!--
<input id="transports.sse" type="checkbox" value="1" class="ml-2 h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-700 focus:ring-2 focus:ring-blue-600" />
<label class="ml-1">
SSE
</label> -->
</div>
</div>
<div class="mb-2 flex w-full flex-row items-baseline">
<label class="mr-2 font-bold text-blue-700">Protocol:</label>
<div class="relative inline-block w-64 grow">
<select name="protocol" class="focus:shadow-outline w-full appearance-none rounded border px-2 py-1 leading-tight text-gray-700 focus:outline-none">
<option value="actioncable-v1-json">actioncable-v1-json</option>
<option value="actioncable-v1-ext-json">actioncable-v1-ext-json</option>
<option value="actioncable-v1-msgpack">actioncable-v1-msgpack</option>
<option value="actioncable-v1-ext-msgpack">actioncable-v1-ext-msgpack</option>
<option value="actioncable-v1-protobuf">actioncable-v1-protobuf</option>
<option value="actioncable-v1-ext-protobuf">actioncable-v1-ext-protobuf</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
</div>
</div>
</div>
<div data-protocol-actioncable-v1-ext-json data-protocol-actioncable-v1-ext-msgpack data-protocol-actioncable-v1-ext-protobuf style="display: none;" class="mb-2 flex w-full flex-row items-center">
<div class="flex flex-row items-center">
<label class="mr-2 font-bold text-blue-700">Initial streams history since:</label>
<div class="relative inline-block w-64 grow">
<select name="protocolOptions.historyTimestamp" class="focus:shadow-outline w-full appearance-none rounded border px-2 py-1 leading-tight text-gray-700 focus:outline-none">
<option value="">none</option>
<option value="1m">1 min ago</option>
<option value="5m">5 min ago</option>
<option value="10m">10 min ago</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
</div>
</div>
</div>
<div class="flex flex-row items-center ml-2">
<label for="protocolOptions.pongs" class="cursor-pointer">
Pongs
</label>
<input name="protocolOptions.pongs" type="checkbox" value="true" class="ml-1 h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-blue-700 focus:ring-2 focus:ring-blue-600" />
</div>
</div>
<div class="mb-2 flex w-full flex-row items-baseline">
<label class="mr-2 font-bold text-blue-700">Log level:</label>
<div class="relative inline-block w-64 grow">
<select name="logLevel" class="focus:shadow-outline w-full appearance-none rounded border px-2 py-1 leading-tight text-gray-700 focus:outline-none">
<option name="debug">debug</option>
<option name="info">info</option>
<option name="warn">warn</option>
<option name="error">error</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
</div>
</div>
</div>
<input type="submit" value="Connect + Subscribe" class="focus:shadow-outline w-full rounded bg-blue-700 px-2 py-1 font-bold text-white hover:bg-blue-500 focus:outline-none"/>
<p class="my-1 w-full text-sm italic text-gray-500">Connect and subscribe to BenchmarkChannel that implements #echo and #broadcast commands.</p>
</form>
<div class="mb-2 w-full">
<h2 class="mb-1 mt-2 text-lg font-semibold uppercase">Actions</h2>
<p class="mb-1 w-full text-sm italic text-gray-500">Type message below to send it via #echo or #broadcast action.</p>
<textarea id="content" class="w-full rounded border border-gray-200"> </textarea>
<div class="mb-2 flex w-full flex-row justify-between">
<button id="echoBtn" type="submit" class="focus:shadow-outline mr-2 grow rounded border border-blue-700 bg-white px-2 py-1 font-bold text-blue-700 hover:bg-gray-100 focus:outline-none">Echo</button>
<button id="broadcastBtn" type="submit" class="focus:shadow-outline ml-2 w-1/3 grow rounded border border-blue-700 bg-white px-2 py-1 font-bold text-blue-700 hover:bg-gray-100 focus:outline-none">Broadcast</button>
</div>
</div>
<button id="disconnectButton" class="focus:shadow-outline w-full rounded border border-red-700 bg-red-700 px-2 py-1 font-bold text-white hover:bg-red-500 focus:outline-none" type="button">Disconnect</button>
</div>
<div class="box-content w-1/2 pl-2">
<div class="flex flex-row align-baseline justify-between">
<h2 class="mb-2 text-center text-xl">Logs</h2>
<div class="flex flex-row h-4 items-baseline">
<input checked id="autoscroll" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-700 focus:ring-2 focus:ring-blue-600" />
<label class="text-blue-700 ml-1">
Auto-scroll
</label>
</div>
</div>
<div class="h-5/6 max-h-screen w-full overflow-y-scroll rounded border border-gray-100 bg-white font-mono" id="logs"></div>
</div>
</div>
</div>
<script src="./index.js"></script>
</html>