corrade-http-templates – Diff between revs 52 and 61

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