{% extends "otree/BaseAdmin.html" %}
{% load otree_tags floppyforms %}

{% block title %}
    {{ room.display_name }}
{% endblock %}

{% block content %}

    <h3>Create a new session</h3>

    {% include "otree/includes/CreateSessionForm.html" %}

    <hr/>
    <h3 id="participants_waiting_count">Participants Ready (0)</h3>
    <button class="btn" type="button" data-toggle="collapse" data-target="#participants_waiting_container">Expand/Collapse ID List</button>
    <div id="participants_waiting_container" class="collapse">
        <ul id="participants_waiting_list"></ul>
    </div>

    {% if has_expected_participant_list %}
    <h3 id="participants_not_waiting_count">Participants Not Present (0)</h3>
    <button class="btn" type="button" data-toggle="collapse" data-target="#participants_not_waiting_container">Expand/Collapse ID List</button>
    <div id="participants_not_waiting_container" class="collapse">
        <ul id="participants_not_waiting_list"></ul>
    </div>
    {% endif %}

    <hr/>

    {% include "otree/includes/RoomParticipantLinks.html" %}

{% endblock %}


{% block internal_scripts %}
    {{ block.super }}
    <!-- this is an HTML file rather than JavaScript static file because context variables need to be passed to it -->
<script type="text/javascript">
$(document).ready(function () {

    var socket;

    initWebSocket();

    function initWebSocket() {

        var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
        var ws_path = ws_scheme + '://' + window.location.host + "{{ view.socket_url|safe }}";
        socket = new ReconnectingWebSocket(ws_path);
        socket.onmessage = function (e) {
            var data = JSON.parse(e.data);

            // Handle errors
            if (data.error) {
                $("#error-notice").show();
                return;
            }

            var participants_waiting_list = document.getElementById("participants_waiting_list");
            var participants_not_waiting_list = document.getElementById("participants_not_waiting_list");
            var participants_waiting_count = document.getElementById("participants_waiting_count");
            var participants_not_waiting_count = document.getElementById("participants_not_waiting_count");

            var status = data["status"];
            if (status == "load_participant_lists") {
                var participantsPresent = data["participants_present"];
                createUL(participantsPresent, participants_waiting_list);
                if (participants_not_waiting_list != null) {
                    var participantsNotPresent = data["participants_not_present"];
                    createUL(participantsNotPresent, participants_not_waiting_list);
                }
            } else {
                var participantName = data["participant"];
                var current_element = document.getElementById(participantName);

                if (status == "add_participant") {
                    if (participants_not_waiting_list != null) {
                        participants_not_waiting_list.removeChild(current_element);
                    }
                    participants_waiting_list.appendChild(createListElement(participantName));
                } else if (status == "remove_participant") {
                    participants_waiting_list.removeChild(current_element);
                    if (participants_not_waiting_list != null) {
                        participants_not_waiting_list.appendChild(current_element);
                    }
                } else {
                    return;
                }
            }

            participants_waiting_count.innerHTML = "Participants Ready (" + participants_waiting_list.childElementCount + ")";
            participants_not_waiting_count.innerHTML = "Participants Not Present (" + participants_not_waiting_list.childElementCount + ")";
        };
        socket.onopen = function () {
            console.log('WebSocket connected');
        };
        socket.onclose = function () {
            console.log('WebSocket disconnected');
        };
    }

    function createUL(array, parentElement) {
        for (var i = 0; i < array.length; i++) {
            var item = createListElement(array[i]);
            parentElement.appendChild(item);
        }
    }

    function createListElement(text) {
        var item = document.createElement('li');
        item.id = text;
        item.appendChild(document.createTextNode(text));
        return item;
    }

});
</script>
{% endblock %}