corrade-http-templates – Blame information for rev 52

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