corrade-http-templates – Blame information for rev 64
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
37 | office | 1 | <!DOCTYPE html> |
2 | eva | 2 | |
3 | <html lang="en"> |
||
64 | office | 4 | |
2 | eva | 5 | <head> |
27 | office | 6 | <title>Corrade Group Chat Template</title> |
7 | |||
8 | <meta charset="utf-8"> |
||
9 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||
10 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
||
2 | eva | 11 | <meta name="description" content="Group Chat Relay using Corrade"> |
12 | <meta name="author" content="Wizardry and Steamworks"> |
||
46 | office | 13 | <link rel="icon" href="favicon.ico"> |
4 | eva | 14 | |
27 | office | 15 | <!-- Bootstrap core CSS --> |
61 | office | 16 | <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> |
35 | office | 17 | <link rel="stylesheet" href="css/style.css?v=1.3"> |
28 | office | 18 | </head> |
19 | |||
20 | <body> |
||
33 | office | 21 | <!-- Group chat container. --> |
64 | office | 22 | <form role="form" data-toggle="validator"> |
23 | <div class="row with-margin"> |
||
24 | <div class="col-lg-12"> |
||
25 | <div class="form-group"> |
||
26 | <div class="input-group input-group-lg"> |
||
27 | <textarea class="form-control" id="chat" readonly="readonly" rows="12" |
||
28 | style="height:100%;"></textarea> |
||
33 | office | 29 | </div> |
64 | office | 30 | </div> |
31 | <div id="controls"> |
||
32 | <div class="form-group"> |
||
33 | <div class="input-group input-group-lg"> |
||
34 | <div class="input-group-prepend"> |
||
35 | <span class="input-group-text" id="">Name</span> |
||
36 | </div> |
||
37 | <input type="text" class="form-control input-lg" id="name" placeholder="Your name..."> |
||
38 | </div><!-- /input-group --> |
||
39 | </div> |
||
40 | <div class="form-group"> |
||
41 | <div class="input-group input-group-lg"> |
||
42 | <div class="input-group-prepend"> |
||
43 | <span class="input-group-text" id="">Message</span> |
||
44 | </div> |
||
45 | <input type="text" class="form-control input-lg" id="message" placeholder="Your message..."> |
||
46 | <span class="input-group-btn"> |
||
47 | <button class="btn btn-default btn-lg" type="submit" id="send">Send</button> |
||
33 | office | 48 | </span> |
49 | </div> |
||
50 | </div> |
||
64 | office | 51 | </div> |
52 | </div><!-- /.col-lg-6 --> |
||
53 | </div><!-- /.row --> |
||
54 | </form> |
||
55 | |||
30 | office | 56 | <!-- Include jQuery --> |
61 | office | 57 | <script src="node_modules/jquery/dist/jquery.min.js"></script> |
58 | <!-- Include Bootstrap and Validator --> |
||
59 | <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> |
||
60 | <script src="node_modules/bootstrap-validator/js/validator.js"></script> |
||
32 | office | 61 | <!-- Include Velocity --> |
61 | office | 62 | <script src="node_modules/velocity-animate/velocity.min.js"></script> |
30 | office | 63 | <script> |
64 | office | 64 | $(document).ready(function () { |
65 | function sendGroupMessage(token) { |
||
66 | // Hide the controls. |
||
32 | office | 67 | $("#controls").animate( |
64 | office | 68 | { |
69 | opacity: 0 |
||
70 | }, |
||
71 | { |
||
72 | duration: 1000, |
||
32 | office | 73 | easing: "linear" |
74 | } |
||
75 | ); |
||
64 | office | 76 | // Make the POST request to the PHP script and pass the values of the fields. |
77 | $.ajax({ |
||
78 | type: 'post', |
||
79 | url: "sendGroupMessage.php", |
||
80 | data: { |
||
81 | name: $("#name").val(), |
||
82 | message: $("#message").val(), |
||
83 | token: token |
||
84 | } |
||
85 | }).done(function (data) { |
||
86 | // If any error occurred, display it. |
||
87 | if (data) |
||
88 | alert(data); |
||
89 | // When the data returns, clear the message box and show the controls. |
||
90 | $('#message').val(""); |
||
91 | $("#controls").animate( |
||
92 | { |
||
93 | opacity: 1 |
||
94 | }, |
||
95 | { |
||
96 | duration: 1000, |
||
97 | easing: "linear" |
||
98 | } |
||
99 | ); |
||
100 | }); |
||
101 | } |
||
102 | |||
103 | // Polls the chatlog every second for changes. |
||
104 | (function retrieveMessages() { |
||
105 | $.get("chat.log?t=" + Math.random(), function (data) { |
||
106 | $("#chat").html(data); |
||
107 | $("#chat").scrollTop($("#chat")[0].scrollHeight); |
||
108 | setTimeout(retrieveMessages, 1000); |
||
109 | }); |
||
110 | }()); |
||
111 | |||
112 | $.get('session.php').then((token) => { |
||
113 | // When the send button is pressed, then call the sendGroupMessage function to |
||
114 | // send the message to the PHP script, which then send the message to Corrade. |
||
115 | $("#send").click(function (e) { |
||
52 | office | 116 | sendGroupMessage(token); |
64 | office | 117 | }); |
118 | |||
119 | // Subscribe to pressing enter with the message input box selected. |
||
120 | $("#message").keypress(function (e) { |
||
121 | if (e.which == 13) { |
||
122 | sendGroupMessage(token); |
||
123 | return false; |
||
124 | } |
||
125 | }); |
||
52 | office | 126 | }); |
2 | eva | 127 | }); |
128 | </script> |
||
129 | </body> |
||
64 | office | 130 | |
131 | </html> |