Filter and navigate usage by financial year

Right now we tell people that the usage page is for the current
financial year. This is a lie – it’s for all time.

So this commit calls through to the API to get the stats for (by
default) the current financial year.

We already do this for the monthly breakdown, this just does the same
thing for the yearly totals.

It also adds navigation to show the data for other financial years:
- previous so you can go back and see your usage and verify that the
  bill you’re about to pay is correct
- next so that you can check what your SMS allowance is going to be
  before you actually get into it
This commit is contained in:
Chris Hill-Scott
2017-01-25 15:59:06 +00:00
parent 8b2ea28111
commit 2a502753a4
8 changed files with 112 additions and 75 deletions

View File

@@ -1,5 +1,6 @@
{% from "components/big-number.html" import big_number %}
{% from "components/table.html" import list_table, field, hidden_field_heading, row_heading, text_field %}
{% from "components/pill.html" import pill %}
{% extends "withnav_template.html" %}
@@ -9,15 +10,10 @@
{% block maincolumn_content %}
<div class='grid-row'>
<div class='column-half'>
<h2 class='heading-large'>Usage</h2>
</div>
<div class='column-half'>
<div class='align-with-heading-copy'>
Financial year {{ year }} to {{ year + 1 }}
</div>
</div>
<h2 class='heading-large'>Usage</h2>
<div class="bottom-gutter">
{{ pill('Year', years, selected_year, big_number_args={'smallest': True}) }}
</div>
<div class='grid-row'>
@@ -63,45 +59,51 @@
</div>
</div>
<div class="dashboard-table body-copy-table">
{% call(month, row_index) list_table(
months,
caption="Total spend",
caption_visible=False,
empty_message='',
field_headings=[
'By month',
hidden_field_heading('Cost'),
],
field_headings_visible=True
) %}
{% call row_heading() %}
{{ month.name }}
{% if months %}
<div class="dashboard-table body-copy-table">
{% call(month, row_index) list_table(
months,
caption="Total spend",
caption_visible=False,
empty_message='',
field_headings=[
'By month',
hidden_field_heading('Cost'),
],
field_headings_visible=True
) %}
{% call row_heading() %}
{{ month.name }}
{% endcall %}
{% call field(align='left') %}
{{ big_number(
sms_rate * month.paid,
currency="£",
smallest=True
) }}
<ul>
{% if month.free %}
<li class="tabular-numbers">{{ "{:,}".format(month.free) }} free text messages</li>
{% endif %}
{% if month.paid %}
<li class="tabular-numbers">{{ "{:,}".format(month.paid) }} text messages at
{{- ' {:.2f}p'.format(sms_rate * 100) }}</li>
{% endif %}
{% if not (month.free or month.paid) %}
<li aria-hidden="true"></li>
{% endif %}
</ul>
{% endcall %}
{% endcall %}
{% call field(align='left') %}
{{ big_number(
sms_rate * month.paid,
currency="£",
smallest=True
) }}
<ul>
{% if month.free %}
<li class="tabular-numbers">{{ "{:,}".format(month.free) }} free text messages</li>
{% endif %}
{% if month.paid %}
<li class="tabular-numbers">{{ "{:,}".format(month.paid) }} text messages at
{{- ' {:.2f}p'.format(sms_rate * 100) }}</li>
{% endif %}
{% if not (month.free or month.paid) %}
<li aria-hidden="true"></li>
{% endif %}
</ul>
{% endcall %}
{% endcall %}
</div>
</div>
{% endif %}
<div class="grid-row">
<div class="column-half">&nbsp;</div>
<div class="column-half">
<p class="align-with-heading-copy">
Financial year ends 31 March.
</p>
</div>
<div class="column-half">
<p class="align-with-heading-copy">
What counts as 1 text message?<br />