<!doctype html>
<html lang="en">
    <head>
        <title>UEA Computer Vision - Annotator</title>

        {% include "inline/image_labeller_css.html" %}
        {% include "inline/image_labeller_scripts.html" %}
    </head>

    <body>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            {% if use_websockets %}
                <li class="breadcrumb-item active" aria-current="page">Labelling tool (using websockets)</li>
            {% else %}
                <li class="breadcrumb-item active" aria-current="page">Labelling tool (not using websockets)</li>
            {% endif %}
        </ol>
    </nav>


    {% include "inline/labeller_app.html" %}

    <script>
        // get image descriptor callback function
        {% if use_websockets %}
            var socket = io.connect('http://' + document.domain + ':' + location.port);

            socket.on('get_labels_reply', function(label_header) {
                tool.loadLabels(label_header, null);
            });

            socket.on('set_labels_reply', function(msg) {
                tool.notifyLabelUpdateResponse(msg);
            });

            {% if dextr_available %}
                socket.on('dextr_reply', function(msg) {
                    if (msg.labels !== undefined) {
                        tool.dextrSuccess(msg.labels);
                    }
                });
            {% endif %}

            var get_labels = function(image_id) {
                socket.emit('get_labels', {image_id: image_id});
            };

            // set labels callback function
            var set_labels = function(label_header) {
                socket.emit('set_labels', {label_header: label_header});
            };

            {% if dextr_available %}
                // set labels callback function
                var dextr_request = function(dextr_request) {
                    socket.emit('dextr', dextr_request);
                };
            {% else %}
                var dextr_request = null;
            {% endif %}


        {% else %}
            var get_labels = function(image_id) {
                $.ajax({
                    type: 'GET',
                    url: '/labelling/get_labels/' + image_id,
                    success: function(label_header) {
                        tool.loadLabels(label_header, null);
                    },
                    dataType: 'json'
                });
            };

            // set labels callback function
            var set_labels = function(label_header) {
                var labels_json_str = JSON.stringify(label_header);

                // Create the POST data
                var post_data = {
                    labels: labels_json_str
                };

                $.ajax({
                    type: 'POST',
                    url: '/labelling/set_labels',
                    data: post_data,
                    success: function(msg) {
                        tool.notifyLabelUpdateResponse(msg);
                    },
                    dataType: 'json'
                });
            };

            {% if dextr_available %}
                // set labels callback function
                var dextr_request = function(dextr_request) {
                    // Create the POST data
                    var post_data = {
                        dextr: JSON.stringify(dextr_request)
                    };

                    $.ajax({
                        type: 'POST',
                        url: '/labelling/dextr',
                        data: post_data,
                        success: function(msg) {
                            if (msg.labels !== undefined) {
                                tool.dextrSuccess(msg.labels);
                            }
                        },
                        dataType: 'json'
                    });
                };
            {% else %}
                var dextr_request = null;
            {% endif %}
        {% endif %}

        // Create the labelling tool
        // Give it: label classes, dimensions, image descriptors, initial image ID and the callbacks above
            var tool = new labelling_tool.DjangoLabeller(
                {{ label_class_groups | tojson | safe }},
                {{ tasks | tojson | safe }},
                {{ colour_schemes | tojson | safe }},
                {{ anno_controls | tojson | safe }},
                {{ image_descriptors | tojson | safe }},
                {{ initial_image_index | safe }},
                get_labels,
                set_labels,
                null,
                dextr_request,
                null,
                {{ labelling_tool_config | tojson | safe }}
            );

    </script>

    </body>
</html>