{% extends "layout.html" %}

{% block content %}

<ol class="breadcrumb">
    <li><a href="{{ url_for('account_view') }}">Account</a></li>
    <li><a href="{{ url_for('subscription_view', subscription_id=subscription_id) }}">{{subscription_id}}</a></li>
    <li><a href="{{ url_for('resourcegroup_view', subscription_id=subscription_id, resource_group_name=resource_group_name) }}">{{resource_group_name}}</a></li>
    <li><a href="{{ url_for('storageaccount_view', subscription_id=subscription_id, resource_group_name=resource_group_name, account_name=account_name) }}">{{account_name}}</a></li>
    <li class="active">{{model.table_name}}</li>
</ol>

<h3>Entities</h3>
<table class="table table-striped table-condensed" id="entitiesTable">
    <thead>
        <tr>
            <th>Partition Key</th>
            <th>Row Key</th>
            <th>Timestamp</th>
            {% for field in model.custom_fields %}
            <th>{{field}}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for entity in model.entities %}
        <tr>
            <td data-field-name="PartitionKey">{{entity.PartitionKey}}</td>
            <td data-field-name="RowKey">{{entity.RowKey}}</td>
            <td data-field-name="Timestamp">{{entity.Timestamp}}</td>
            {% for field in model.custom_fields %}
            <td data-field-name="{{field}}">{{getattr(entity, field, '')}}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>

{% if hasattr(model.entities, 'x_ms_continuation') %}
<button
    class="btn"
    id="loadmore"
    data-subscription-id="{{subscription_id}}"
    data-resource-group-name="{{resource_group_name}}"
    data-account-name="{{account_name}}"
    data-table-name="{{model.table_name}}"
    data-next-partition-key="{{model.entities.x_ms_continuation['NextPartitionKey']}}"
    data-next-row-key="{{model.entities.x_ms_continuation['NextRowKey']}}"
    data-field-names="{{model.custom_fields}}"
>Load More</button>
{% endif %}

{% endblock %}

{% block scripts %}
<script>
$(function () {
    $("button#loadmore").click(function () {
        var $loadmore = $("#loadmore");
        ajax_data = {
            subscriptionid: $loadmore.data("subscription-id"),
            resourceGroupName: $loadmore.data("resource-group-name"),
            accountName: $loadmore.data("account-name"),
            tableName: $loadmore.data("table-name"),
            nextPartitionKey: $loadmore.data("next-partition-key"),
            nextRowKey: $loadmore.data("next-row-key"),
        };
        $.ajax({
            type: "GET",
            url: "/getmoretableentities",
            data: ajax_data,
            success: function (result) {
                var $tableBody = $('#entitiesTable').find("tbody");

                // Update the next partition/row key, and hide if there are no more
                $loadmore.data("next-partition-key", result.nextPartitionKey);
                $loadmore.data("next-row-key", result.nextRowKey);
                if (result.nextPartitionKey === null || result.nextRowKey === null) {
                    $loadmore.hide();
                }

                // Clone the last row and update each of its cells to the
                // matching field on the entity.
                // Note that if the entity has fields that are not represented
                // by a column in the table, they won't be displayed.
                // A potential way of solving this could be to dynamically add
                // a column to every row in the table when we encounter a new
                // field.
                for (var i = 0; i < result.entities.length; i++) {
                    var entity = result.entities[i];
                    var $trLast = $tableBody.find("tr:last");
                    var $trLastClone = $trLast.clone();
                    $trLastClone.find('td').each(function () {
                        var field = $(this).data("field-name");
                        var val = entity[field];
                        if (val !== undefined) {
                            $(this).text(val.toString());
                        } else {
                            $(this).text("");
                        }
                    })
                    $trLast.after($trLastClone);
                }
            },
            error: function () {
                alert("failure to get more entities");
            }
        });
    });
});
</script>
{% endblock %}
