pbp_com/templates/adzone/ad_index.html

{% extends "admin/base.html" %}

{% block extrahead %}{{ block.super }}
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" />
    <script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script type="text/javascript">

	$(document).ready( function() {
        $.ajaxSetup({
             beforeSend: function(xhr, settings) {
                 function getCookie(name) {
                     var cookieValue = null;
                     if (document.cookie && document.cookie != '') {
                         var cookies = document.cookie.split(';');
                         for (var i = 0; i < cookies.length; i++) {
                             var cookie = jQuery.trim(cookies[i]);
                             // Does this cookie string begin with the name we want?
                         if (cookie.substring(0, name.length + 1) == (name + '=')) {
                             cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                             break;
                         }
                     }
                 }
                 return cookieValue;
                 }
                 if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                     // Only send the token to relative URLs i.e. locally.
                     xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                 }
             }
        });

		$( '#filtersubmit' ).click( function() {
			console.log('Filter clicked');
			$.post("{% url adzone_xhr_ads_detail_table format='json' %}", {
				start: $( '#start' ).val(),
				end: $( '#end' ).val()
			},
			function(data) {
                $('#ad_table').find("tr:gt(0)").remove();
                var table_obj = $('#ad_table');
                $.each(data, function(index, item){
                    console.log(item)
                    var table_row = $('<tr>', {id: item.title});
                    var title = $('<td>', {html: item[0]});
                    var impressions = $('<td>', {html: item[1]});
                    var clicks = $('<td>', {html: item[2]});
                    table_row.append(title);
                    table_row.append(impressions);
                    table_row.append(clicks);
                    table_obj.append(table_row);
                })
			});
		});

	});

</script>

{% endblock %}
{% block title %}Ads | Penobscot Bay Press {% endblock %}

{% block content %}
{% load markup typogrify humanize adzone_tags %}

<div id="ad-index">
    <h2>Ad overview</h2>
    <p>The intial ads metrics displayed are for all `enabled` ads for all time.  Use the date filters to narrow down the time period.</p>

    <table class="ad_table" id="ad_table">
        <caption align="top">
            <div class="filterform">
                <label>From:</label><input class="dates" id="start" type="text"/>
                <label>To:</label><input class="dates" id="end" type="text"/>
                <input id="filtersubmit" type="submit" value="Filter" />
            </div>
        </caption>
        <caption align="top"><h3><strong>Impressions</strong></h3></caption>
        <tr><th>Ad Name</th><th>Impressions</th><th>Clicks</th><th></th></tr>
        {% if ads %}
            {% for ad in ads %}
            <tr>
                {% get_ad_stats for ad as stats %}
                <td>{{ad}}</td>
                {% for stat in stats %}<td>{{stat}}</td>{% endfor %}
            </tr>
            {% endfor %}
        {% else %}
            {% for ad_obj in ad_list %}
            <tr>
                {% for item in ad_obj %}<td>{{item}}</td>{% endfor %}
            </tr>
            {% endfor %}
        {% endif %}
    </table>
</div>

<script type="text/javascript">
    $(function() {
        $("#end").datepicker({ dateFormat: 'yy-mm-dd', defaultDate: -8}).datepicker('setDate', -8);
        $("#start").datepicker({ dateFormat: 'yy-mm-dd'}).datepicker('setDate', -1);
    });
 </script>
{% endblock %}