corrade-http-templates – Rev 30

Subversion Repositories:
Rev:
<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Corrade Group Chat Template</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Group Chat Relay using Corrade">
    <meta name="author" content="Wizardry and Steamworks">
    <link rel="icon" href="../../favicon.ico">

    <!-- Bootstrap core CSS -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="css/style.css?v=1.1"> -->
</head>

<body>
        <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">
                                <div id="controls">
                                        <div class="input-group">
                                                <input class="form-control" id="name" maxlength="8" type="text" value="Someone" required>
                        <span class="input-group-addon">@</span>
                        <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>
                </form>
        </div>
    
    <!-- Include jQuery -->
    <script src="bower_components//jquery/dist/jquery.min.js"></script>
    <!-- Include Bootstrap Validator -->
    <script src="bower_components/bootstrap-validator/js/validator.js"></script>
    <script>
    $(document).ready(function () {
        function sendGroupMessage() {
            // Hide the controls.
            $("#controls").animate({ opacity: 'hide' }, 'slow');
            // 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()
                }
            }).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: 'show' }, 'slow');
            });
        }
        // 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);
            });
        }());
        // 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();
        });
        // Subscribe to pressing enter with the message input box selected.
        $("#message").keypress(function(e) {
            if (e.which == 13) {
                sendGroupMessage();
                return false;
            }
        });
    });
    </script>
</body>
</html>