corrade-http-templates – Rev 64

Subversion Repositories:
Rev:
<!DOCTYPE html>

<html lang="en">

<head>
    <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="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css?v=1.3">
</head>

<body>
    <!-- Group chat container. -->
    <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>
                <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>
                    </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 -->
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="node_modules/bootstrap-validator/js/validator.js"></script>
    <!-- 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("");
                    $("#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);
                });

                // 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>
Generated by GNU Enscript 1.6.5.90.