ninegate/src/ninegate-1.0/src/Cadoles/WebsocketBundle/Resources/views/Chat/client.html.twig

{% extends '@CadolesCore/base.html.twig' %}

{% block localstyle %}
    {% if framed %}
        {% if border %}
            #page-wrapper {
                padding: 5px 25px 10px 15px;
                background: transparent;
            }
        {% else %}
            #page-wrapper {
                padding: 5px 25px 0px 15px;
                background: transparent;
            }
        {% endif %}
    {% else %}
        #page-wrapper { padding-top:20px; padding-bottom:30px; }
    {% endif %}

    .message {
        padding:10px;
        margin-top: 5px;
        background-color: #{{ colorbodyback }};
        color: #{{ colorbodyfont }};
    }
    .msgavatar {
        float:left;
        height:40px;
        text-align: center;
    }
    .msgdiv {
        float:left;
        padding-left:10px;
    }
    .msgtitle {
        line-height: 12px;
        margin-bottom: 10px;
    }
    #cke_1_bottom{ display:none }
{% endblock %}

{% block pagewrapper %}
    {{ form_start(form) }}
        <div class='row'>
            {{ form_widget(form.message) }}
            <a id="sendbtn" class="btn btn-success" style="margin-top:5px; width:100%; margin-bottom:15px">Envoyer</a>
        </div>
        
    {{ form_end(form) }}

    <div class="mychat">
        {% for message in messages %}
            <div id='message-{{message.id}}'  class='message row'>
                <div class='msgavatar'>
                    <img id='user_avatar_img' src='/{{ alias }}/uploads/avatar/{{message.user.avatar}}' class='avatar'><br>
                    {% if fgmanager or message.user == app.user %}
                        <i class='delmessage fa fa-trash fa-fw' data-id='{{message.id}}' style='cursor: pointer;'></i>
                    {% endif %}
                </div>
                <div class='msgdiv'>
                    <div class='msgtitle'>
                        {{message.user.lastname}} {{message.user.firstname}}<br>
                        <small>{{message.submitdate|date('d/m/Y H:i')}}</small>
                    </div>
                    <div class='msgtopic'>{{message.topic | raw}}</div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}

{% block localexternalscript %}
    <script src="/{{alias}}/bundles/goswebsocket/js/vendor/autobahn.min.js"></script>
    <script src="/{{alias}}/bundles/goswebsocket/js/gos_web_socket_client.js"></script>
{% endblock %}

{% block localjavascript %}
	$(document).ready(function(){
        var dateoptions = {weekday: "long", year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute:  "2-digit" };


        {% if websocket_activate and app.user %}
            var _WS_URI = "wss://{{ gos_web_socket_server_host }}:{{ gos_web_socket_server_port }}";

            var webSocket = WS.connect(_WS_URI);

            webSocket.on("socket/connect", function (session) {              
                //the callback function in "subscribe" is called everytime an event is published in that channel.
                session.subscribe("websocket/channel/{{groupid}}", function (uri, payload) {
                    if(payload.msg) {
                        html ="<div id='message-"+payload.msg.id+"' class='message row'>";
                        html+="<div class='msgavatar'>";
                        html+="<img id='user_avatar_img' src='/{{ alias }}/uploads/avatar/"+payload.msg.avatar+"' class='avatar'><br>";
                        if(payload.msg.userid=={{app.user.id}} || '{{ fgmanager }}'=='1') {
                            html+="<i class='delmessage fa fa-trash fa-fw' data-id='"+payload.msg.id+"' style='cursor: pointer;'></i>";
                        }
                        html+="</div>";
                        html+="<div class='msgdiv'>"
                        html+="<div class='msgtitle'>"+payload.msg.lastname+"<br><small>"+new Date(payload.msg.submitdate.date).toLocaleDateString("fr-FR", dateoptions)+"</small></div>";
                        html+="<div class='msgtopic'>"+payload.msg.message+"</div>";
                        html+="</div>";
                        html+="</div>";
                        $(".mychat").prepend(html);

                        //console.log("Received message by "+payload.msg.userid+" = ",payload.msg);
                    }

                    if(payload.log) {
                        console.log("Received message", payload.log);
                    }

                    if(payload.del) {
                        $("#message-"+payload.del).remove();
                    }

                    if(payload.alert) {
                        alert(payload.alert);
                    }
                });

                $( "#sendbtn" ).click(function() {
                    var data = CKEDITOR.instances["chat_message"].getData();
                    if(data) {
                        event={mykey: "{{userkey}}", type: "add", message: data};
                        session.publish("websocket/channel/{{groupid}}", event);  
                        CKEDITOR.instances["chat_message"].setData('');

                        event={type: "add", group:{{groupid}}};
                        parent.parent.counter(event);                        
                    }
                });

                $(document).on('click', '.delmessage', function(){
                    id=$(this).data("id");
                    event={mykey: "{{userkey}}", type: "del", id: id};
                    session.publish("websocket/channel/{{groupid}}", event);  


                });
            })     
        {% endif %}   
	});

{% endblock %}