corrade-http-templates

Subversion Repositories:
Compare Path: Rev
With Path: Rev
?path1? @ 63  →  ?path2? @ 64
/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>