/groupChat/groupChat.html |
@@ -1,6 +1,7 @@ |
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
<title>Corrade Group Chat Template</title> |
|
@@ -18,40 +19,40 @@ |
|
<body> |
<!-- Group chat container. --> |
<div class="container"> |
<form role="form" data-toggle="validator"> |
<div class="form-group"> |
<textarea class="form-control" id="chat" readonly="readonly" rows="12"></textarea> |
</div> |
<div class="form-group row"> |
<!-- Controls --> |
<div id="controls"> |
<div class="col-xs-3"> |
<div class="input-group"> |
<span class="input-group-addon"> |
<label for="name">Name</label> |
</span> |
<input class="form-control" id="name" maxlength="8" type="text" value="Someone" required> |
</div> |
<form role="form" data-toggle="validator"> |
<div class="row with-margin"> |
<div class="col-lg-12"> |
<div class="form-group"> |
<div class="input-group input-group-lg"> |
<textarea class="form-control" id="chat" readonly="readonly" rows="12" |
style="height:100%;"></textarea> |
</div> |
<div class="col-lg-1"> |
<div class="input-group"> |
<span class="input-group-addon"> |
<label for="message">Message</label> |
</div> |
<div id="controls"> |
<div class="form-group"> |
<div class="input-group input-group-lg"> |
<div class="input-group-prepend"> |
<span class="input-group-text" id="">Name</span> |
</div> |
<input type="text" class="form-control input-lg" id="name" placeholder="Your name..."> |
</div><!-- /input-group --> |
</div> |
<div class="form-group"> |
<div class="input-group input-group-lg"> |
<div class="input-group-prepend"> |
<span class="input-group-text" id="">Message</span> |
</div> |
<input type="text" class="form-control input-lg" id="message" placeholder="Your message..."> |
<span class="input-group-btn"> |
<button class="btn btn-default btn-lg" type="submit" id="send">Send</button> |
</span> |
<div class="input-group col-xs-12"> |
<input class="form-control" id="message" type="text" required> |
<span class="input-group-btn"> |
<button class="btn btn-default" id="send" type="submit">Send</button> |
</span> |
</div> |
</div> |
</div> |
</div> |
</div> |
</form> |
</div> |
|
</div> |
</div><!-- /.col-lg-6 --> |
</div><!-- /.row --> |
</form> |
|
<!-- Include jQuery --> |
<script src="node_modules/jquery/dist/jquery.min.js"></script> |
<!-- Include Bootstrap and Validator --> |
@@ -60,70 +61,71 @@ |
<!-- Include Velocity --> |
<script src="node_modules/velocity-animate/velocity.min.js"></script> |
<script> |
$(document).ready(function () { |
function sendGroupMessage(token) { |
// Hide the controls. |
$("#controls").animate( |
{ |
opacity: 0 |
}, |
{ |
duration: 1000, |
easing: "linear" |
} |
); |
// Make the POST request to the PHP script and pass the values of the fields. |
$.ajax({ |
type: 'post', |
url: "sendGroupMessage.php", |
data: { |
name: $("#name").val(), |
message: $("#message").val(), |
token: token |
} |
}).done(function(data) { |
// If any error occurred, display it. |
if(data) |
alert(data); |
// When the data returns, clear the message box and show the controls. |
$('#message').val(""); |
$(document).ready(function () { |
function sendGroupMessage(token) { |
// Hide the controls. |
$("#controls").animate( |
{ |
opacity: 1 |
}, |
{ |
duration: 1000, |
{ |
opacity: 0 |
}, |
{ |
duration: 1000, |
easing: "linear" |
} |
); |
}); |
} |
|
// Polls the chatlog every second for changes. |
(function retrieveMessages() { |
$.get("chat.log?t=" + Math.random(), function(data) { |
$("#chat").html(data); |
$("#chat").scrollTop($("#chat")[0].scrollHeight); |
setTimeout(retrieveMessages, 1000); |
}); |
}()); |
|
$.get('session.php').then((token) => { |
// When the send button is pressed, then call the sendGroupMessage function to |
// send the message to the PHP script, which then send the message to Corrade. |
$("#send").click(function(e){ |
sendGroupMessage(token); |
}); |
|
// Subscribe to pressing enter with the message input box selected. |
$("#message").keypress(function(e) { |
if (e.which == 13) { |
// Make the POST request to the PHP script and pass the values of the fields. |
$.ajax({ |
type: 'post', |
url: "sendGroupMessage.php", |
data: { |
name: $("#name").val(), |
message: $("#message").val(), |
token: token |
} |
}).done(function (data) { |
// If any error occurred, display it. |
if (data) |
alert(data); |
// When the data returns, clear the message box and show the controls. |
$('#message').val(""); |
$("#controls").animate( |
{ |
opacity: 1 |
}, |
{ |
duration: 1000, |
easing: "linear" |
} |
); |
}); |
} |
|
// Polls the chatlog every second for changes. |
(function retrieveMessages() { |
$.get("chat.log?t=" + Math.random(), function (data) { |
$("#chat").html(data); |
$("#chat").scrollTop($("#chat")[0].scrollHeight); |
setTimeout(retrieveMessages, 1000); |
}); |
}()); |
|
$.get('session.php').then((token) => { |
// When the send button is pressed, then call the sendGroupMessage function to |
// send the message to the PHP script, which then send the message to Corrade. |
$("#send").click(function (e) { |
sendGroupMessage(token); |
return false; |
} |
}); |
|
// Subscribe to pressing enter with the message input box selected. |
$("#message").keypress(function (e) { |
if (e.which == 13) { |
sendGroupMessage(token); |
return false; |
} |
}); |
}); |
}); |
}); |
</script> |
</body> |
</html> |
|
</html> |