{% extends 'hqwebapp/centered.html' %}
{% load i18n %}
{% load hq_shared_tags %}
{% load hqstyle_tags %}

{% block js %}{{ block.super }}
    <script type="text/javascript" src="{% static 'hqwebapp/js/lib/knockout.mapping.js' %}"></script>
    <script type="text/javascript" src="{% static 'hqwebapp/js/knockout-bindings.js' %}"></script>
{% endblock %}

{% block js-inline %}{{ block.super }}
    <script type="text/javascript">
        $(function(){
            var view_model = function() {
                var self = this;
                self.limit = ko.observable();
                self.date_range = ko.observable({{ mapping.couch_date_range }});
                self.run_date_range = ko.observable({{ mapping.couch_date_range }});
                self.total = ko.observable();
                self.current = ko.observable();

                self.execute = function(element) {
                    {% if domain %}
                        {% url sql_mappings_run domain mapping.get_id as run_url%}
                    {% else %}
                        {% url sql_mappings_run mapping.get_id as run_url%}
                    {% endif %}
                    var url = '{{ run_url }}';
                    url += '?limit=' + self.limit()
                    url += '&date_range=' + self.run_date_range()
                    $.get(url, function(response) {
                        self.progress_url = response.redirect;
                        $('#run_mapping').modal('hide');
                        $(".bar").width('0%');
                        $('#run_progress').modal('show');
                        window.setTimeout( self.updateProgress, 1000 );
                    })
                }

                self.updateProgress = function() {
                    if (self.progress_url) {
                        $.get(self.progress_url, function(response) {
                            console.log(response);
                            if (response === 'SUCCESS'){
                                self.resetProgress();
                                self.showMessage('{% trans "Data extract success." %}', 'success')
                            } else if (response === 'PENDING') {
                                window.setTimeout( self.updateProgress, 1000 );
                            } else if (response.error) {
                                self.resetProgress();
                                self.showMessage(response.error, 'error');
                            } else {
                                $('#loading').hide();
                                $('#progress').show();
                                self.total(response.total);
                                self.current(response.current);
                                var width = Math.round(response.current * 100 / response.total) + '%';
                                $(".bar").width(width);
                                window.setTimeout( self.updateProgress, 1000 );
                            }
                        }).fail(function(){
                            self.resetProgress();
                            self.showMessage('{% trans "An unknown error occurred." %}');
                        });
                    }
                }

                self.resetProgress = function() {
                    $('#loading').show();
                    $('#progress').hide();
                    $('#run_progress').modal('hide');
                }

                self.clearData = function() {
                    $('.hq-loading').show();
                    $.post('{% url sql_mappings_clear domain mapping.get_id%}', function(data) {
                        $('.hq-loading').hide();
                        self.showMessage(data.message, data.status);
                    }).fail(function() {
                        $('.hq-loading').hide();
                        self.showMessage('{% trans "Unable to clear data due to an error." %}', 'error');
                    });
                }

                self.showMessage = function(text, style) {
                    $('#message p').text(text);
                    $('#message').attr('class', 'alert alert-'+style);
                    $('#message').show();
                    $('html,body').scrollTop(0);
                }
            };
            ko.applyBindings(new view_model());
        });
    </script>
{% endblock %}

{% block centered-content %}
    <div id="message" class="alert hide">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <p></p>
    </div>
    <h3>{% blocktrans with name=mapping.name%}Results from running '{{ name  }}' mapping{% endblocktrans %}
        <div class="btn-toolbar pull-right">
            <div class="btn-group">
                {% if domain %}
                    {% url sql_mappings_test domain mapping.get_id as test_url%}
                    {% url sql_mappings_edit domain mapping.get_id as edit_url%}
                    {% url sql_mappings_list domain as list_url%}
                {% else %}
                    {% url sql_mappings_test mapping.get_id as test_url%}
                    {% url sql_mappings_edit mapping.get_id as edit_url%}
                    {% url sql_mappings_list as list_url%}
                {% endif %}
                <div class="btn-group">
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    {% trans "Test again" %}
                    <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="{{ test_url }}?limit=100">100 {% trans rows %}</a></li>
                        <li><a href="{{ test_url }}?limit=250">250 {% trans rows %}</a></li>
                        <li><a href="{{ test_url }}?limit=500">500 {% trans rows %}</a></li>
                        <li><a href="{{ test_url }}?limit=1000">1000 {% trans rows %}</a></li>
                    </ul>
                </div>
                <a class="btn" href="{{ edit_url }}">
                    {% if mapping.auto_generated %}
                        <i class="icon-file-alt"></i>
                        {% trans "View" %}
                    {% else %}
                        <i class="icon-edit"></i>
                        {% trans "Edit" %}
                    {% endif  %}
                </a>
                <a class="btn" href="{{ list_url }}">{% trans "Back" %}</a>
            </div>
            <div class="btn-group">
                <a class="btn btn-success {% if errors %}disabled{% endif %}" href="#run_mapping" role="button" {% if not errors %}data-toggle="modal"{% endif %}>
                    <i class="icon-play"></i>
                    {% trans "Run" %}
                </a>
                <a class="btn btn-danger" href="#clear_data" role="button" data-toggle="modal">
                    <i class="icon-remove icon-white"></i>
                    {% trans "Clear existing data" %}
                </a>
            </div>
        </div>
    </h3>
    {% if errors %}
    <div class="alert alert-error">
        <h5>{% trans "Some problems were found with the mapping that would prevent it from being run." %}</h5>
        <ul>
        {% for error in errors %}
            <li>{{ error }}</li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}
    {% if warnings %}
    <div class="alert alert-warning">
        <h5>{% trans "Warnings" %}</h5>
        <ul>
        {% for warning in warnings %}
            <li>{{ warning }}</li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}
    <ul>
        <li>{% blocktrans with processed=rows_processed matched=rows_with_value%}Rows processed: {{ processed }} ({{ matched }} matched a value column {% endblocktrans %})</li>
        <li>{% trans "Table name:" %} {{ data.table_name }}</li>
    </ul>

    <table class="table table-bordered">
        <thead>
            <tr>
                {% for c in data.columns %}
                <th>{{ c }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in data.rows %}
            <tr>
                {% for cell in row %}
                <td>{{ cell }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <div id="run_mapping" class="modal hide fade">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>{% trans "Run mapping" %}: "{{ mapping.name }}"?</h3>
        </div>
        <form name="execute_mapping" data-bind="submit: execute">
            <div class="modal-body">
                <div class="control-group">
                    <label class="control-label" for="id_limit">
                        {% trans "Limit rows processed" %}
                    </label>

                    <div class="controls">
                        <input type="text" name="limit" id="id_limit" data-bind="value: limit">
                    </div>
                </div>
                <div class="control-group" data-bind="visible: date_range() > 0">
                    <label class="control-label" for="id_date_range">
                        {% trans "Limit date range" %}
                    </label>

                    <div class="controls">
                        <input type="text" name="date_range" id="id_date_range" data-bind="value: run_date_range">
                    </div>
                </div>
                <p>{% trans "Are you sure you want to execute this mapping?" %}</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" type="submit"><i class="icon-play icon-white"></i> {% trans "Run" %}</button>
                <a href="#" class="btn" data-dismiss="modal">{% trans "Close" %}</a>
            </div>
        </form>
    </div>

    <div id="run_progress" class="modal hide fade">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>{% blocktrans with name=mapping.name%}Running "{{ name }}" extract{% endblocktrans %}</h3>
        </div>
        <div class="modal-body">
            <div id="loading">
            <img src="/static/hqwebapp/img/ajax-loader.gif" alt="loading indicator">
                {% trans "Waiting for job to start" %}
            </div>
            <div id="progress" style="display: none">
                <div class="progress progress-striped">
                    <div class="bar" style="width: 0%;"></div>
                </div>
                <span data-bind="text: current"></span> of <span data-bind="text: total"></span> rows processed
            </div>
        </div>
    </div>

    <div id="clear_data" class="modal hide fade">
        <div class="modal-header alert-error">
            <a class="close" data-dismiss="modal">×</a>
              <h4>{% trans "Clear existing data" %}</h4>
        </div>
        <div class="modal-body">
            <p>
            {% blocktrans with table_name=mapping.table_name %}
                This will delete the mapping table '<strong>{{ table_name }}</strong>'.
            {% endblocktrans %}
            </p>

            <p>{% blocktrans %}
                The table will be re-created next time the mapping is run.
                Until then any reports that query the table will not run.
            {% endblocktrans %}</p>
        </div>
        <div class="modal-footer">
            <a class="btn btn-warning" data-dismiss="modal" data-bind="click: clearData">{% trans "Clear data" %}</a>
            <a href="#" class="btn" data-dismiss="modal">{% trans "Close" %}</a>
        </div>
    </div>

    <div class="hq-loading" style="display: none">
        <img src="/static/hqwebapp/img/ajax-loader.gif" alt="loading indicator">
        <h6>{% trans "Clearing data" %}</h6>
    </div>
{% endblock %}