corrade-http-templates – Blame information for rev 64

Subversion Repositories:
Rev:
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>