aboutsummaryrefslogtreecommitdiff
path: root/views
diff options
context:
space:
mode:
authorPacien TRAN-GIRARD2014-05-15 16:00:45 +0200
committerPacien TRAN-GIRARD2014-05-15 16:00:45 +0200
commitd8bae84fff7977844fa2b57b15b86a831b73aed2 (patch)
treed243a1729f0239421c6454f0b76243b6e1729ce7 /views
parent4f21da45d77211da1aab786bceda8b19f9ccbcbc (diff)
downloadwebcastor-d8bae84fff7977844fa2b57b15b86a831b73aed2.tar.gz
First version
Diffstat (limited to 'views')
-rw-r--r--views/channel.html28
-rw-r--r--views/client.html83
-rw-r--r--views/home.html31
-rw-r--r--views/layout.html11
4 files changed, 153 insertions, 0 deletions
diff --git a/views/channel.html b/views/channel.html
new file mode 100644
index 0000000..a1c13b5
--- /dev/null
+++ b/views/channel.html
@@ -0,0 +1,28 @@
1<h2>Create a channel</h2>
2
3<h3>Channel created with given password</h3>
4
5<form>
6 <label for="channel">Channel ID</label>
7 <input type="text" value="{{channel}}" readonly id="channel">
8 <br>
9 <label for="url">URL</label>
10 <input type="text" value="{{url}}" readonly id="url">
11</form>
12
13<style type="text/css">
14 label {
15 display: inline-block;
16 width: 100px;
17 }
18</style>
19
20<script type="text/javascript">
21 channel.addEventListener("click", function(event) {
22 this.select();
23 });
24
25 url.addEventListener("click", function(event) {
26 this.select();
27 });
28</script>
diff --git a/views/client.html b/views/client.html
new file mode 100644
index 0000000..c322042
--- /dev/null
+++ b/views/client.html
@@ -0,0 +1,83 @@
1<h2>Test client</h2>
2
3<form>
4 <label for="channelField">Channel</label>
5 <input type="text" id="channelField">
6 <label for="passwordField">Password (optional)</label>
7 <input type="password" id="passwordField">
8 <input type="submit" value="Connect" id="connectButton">
9</form>
10<br>
11<form>
12 <label for="messageField">Message</label>
13 <input type="text" disabled id="messageField">
14 <input type="submit" value="Send" disabled id="sendButton">
15</form>
16
17<hr>
18<span>Log</span>
19<pre id="console"></pre>
20
21 <script src="/socket.io/socket.io.js"></script>
22<script type="text/javascript">
23 var console = document.getElementById("console");
24
25 function println(str) {
26 console.innerHTML = str + "\n" + console.innerHTML;
27 }
28
29 function changeControlState(connected) {
30 socketConnected = connected;
31 channelField.disabled = connected;
32 passwordField.disabled = connected;
33 if (connected) {
34 connectButton.value = "Disconnect";
35 } else {
36 connectButton.value = "Connect";
37 }
38
39 messageField.disabled = !connected;
40 sendButton.disabled = !connected;
41 }
42
43 var socket;
44 var socketConnected = false;
45
46 function connectSocket(channel, password) {
47 socket = io.connect("/", {
48 "query" : "channel=" + channel + "&password=" + password,
49 "force new connection" : true
50 });
51
52 socket.on("connect", function() {
53 changeControlState(true);
54 println("connected");
55 });
56
57 socket.on("disconnect", function() {
58 changeControlState(false);
59 println("disconnected");
60 });
61
62 socket.on("message", function(message) {
63 println(message);
64 });
65 }
66
67
68 connectButton.addEventListener("click", function(event) {
69 event.preventDefault();
70 if (socketConnected) {
71 socket.disconnect();
72 } else {
73 connectSocket(channelField.value, passwordField.value);
74 }
75 });
76
77 sendButton.addEventListener("click", function(event) {
78 event.preventDefault();
79 socket.emit("message", messageField.value);
80 messageField.value = "";
81 });
82
83</script> \ No newline at end of file
diff --git a/views/home.html b/views/home.html
new file mode 100644
index 0000000..f6fef09
--- /dev/null
+++ b/views/home.html
@@ -0,0 +1,31 @@
1<h2>Create a channel</h2>
2
3<form method="post" action="/">
4 <label for="passwordField">Password (optional)</label>
5 <input type="password" id="passwordField" name="password">
6 <input type="submit" id="randomButton" value="Generate random password">
7 <input type="submit" value="Create a new channel">
8</form>
9
10<br>
11<hr>
12
13<a href="/client">Test client</a> - <a href="https://github.com/Pacien/Webcastor">Sources</a>
14
15<script type="text/javascript">
16 randomButton.addEventListener("click", function(event) {
17 event.preventDefault();
18
19 var randomPassword = Math.random().toString(36).substr(2, 10);
20
21 passwordField.type = "text";
22 passwordField.value = randomPassword;
23 });
24
25 passwordField.addEventListener("input", function(event) {
26 if (passwordField.value.length <= 1) {
27 passwordField.type = "password";
28 }
29 });
30
31</script>
diff --git a/views/layout.html b/views/layout.html
new file mode 100644
index 0000000..c929bc9
--- /dev/null
+++ b/views/layout.html
@@ -0,0 +1,11 @@
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Webcastor</title>
6 </head>
7 <body>
8 <h1>Webcastor</h1>
9 {{{ yield }}}
10 </body>
11</html> \ No newline at end of file