society-self-service/sstreasury/jinja2/sstreasury/budget_list.html

{% extends 'sstreasury/base.html' %}

{#
    Society Self-Service
    Copyright © 2018–2023  Yingtong Li (RunasSudo)
    Copyright © 2023  MUMUS Inc.

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
#}

{% block title %}Your budgets{% endblock %}

{% macro listbudgets(budgets) %}
	<table class="ui selectable celled table">
		<thead>
			<tr>
				<th class="eleven wide">Name</th>
				<th class="four wide">Status</th>
				<th class="one wide">View</th>
			</tr>
		</thea	d>
		<tbody>
			{% for revision in budgets %}
				<tr>
					<td class="selectable"><a href="{{ url('budget_view', kwargs={'id': revision.budget.id}) }}">{{ revision.name }}</a></td>
					<td class="selectable"><a href="{{ url('budget_view', kwargs={'id': revision.budget.id}) }}">{{ revision.get_state_display() }}</a></td>
					<td>
						<a href="{{ url('budget_view', kwargs={'id': revision.budget.id}) }}" class="ui tiny primary icon button"><i class="eye icon"></i></a>
					</td>
				</tr>
			{% endfor %}
		</tbody>
	</table>
{% endmacro %}

{% block maincontent %}
	<h1>Your budgets</h1>
	
	<form class="ui form" method="GET">
		<div class="fields">
			<div class="seven wide field">
				<label>State</label>
				<select class="ui dropdown" name="state">
					<option value="all"{% if request.GET.get('state', 'all') == 'all' %} selected{% endif %}>All states</option>
					{% for state in import('sstreasury.models').BudgetState %}
						<option value="{{ state._value_ }}"{% if request.GET.get('state', 'all') == state._value_|string %} selected{% endif %}>{{ state.description }}</option>
					{% endfor %}
				</select>
			</div>
			<div class="four wide field">
				<label>Cost centre</label>
				<select class="ui dropdown" name="cost_centre">
					<option value="all"{% if request.GET.get('cost_centre', 'all') == 'all' %} selected{% endif %}>All cost centres</option>
					{% for cost_centre in settings.BUDGET_COST_CENTRES %}
						<option value="{{ cost_centre }}"{% if request.GET.get('cost_centre', 'all') == cost_centre %} selected{% endif %}>{{ cost_centre }}</option>
					{% endfor %}
				</select>
			</div>
			<div class="two wide field">
				<label>Year</label>
				<input name="year" value="{{ request.GET.get('year', '') }}">
			</div>
			<div class="three wide field">
				<label>&nbsp;</label>
				<button type="submit" class="ui primary labeled icon button" style="width:100%"><i class="filter icon"></i>Filter</button>
			</div>
		</div>
	</form>
	
	{% if not budgets_action and not budgets_open and not budgets_closed %}
		<p>There are no budgets matching the selected criteria. To create a budget, click <a href="{{ url('budget_new') }}">Create new budget</a>.</p>
	{% endif %}
	
	{% if budgets_action %}
		<h2>Budgets requiring action</h2>
		
		{{ listbudgets(budgets_action) }}
	{% endif %}
	
	{% if budgets_open %}
		<h2>Open budgets</h2>
		
		{{ listbudgets(budgets_open) }}
	{% endif %}
	
	{% if budgets_closed %}
		<h2>Closed budgets</h2>
		
		{{ listbudgets(budgets_closed) }}
	{% endif %}
	
	<div style="text-align:center;padding-top:1em">
		<div class="ui pagination menu">
			{% if page.has_previous() %}
				<a class="item" href="?page={{ page.previous_page_number() }}&state={{ request.GET.get('state', 'all') }}&cost_centre={{ request.GET.get('cost_centre', 'all') }}&year={{ request.GET.get('year', '') }}">&lsaquo; Prev</a>
			{% endif %}
			<a class="active item">Page {{ page.number }} of {{ page.paginator.num_pages }}</a>
			{% if page.has_next() %}
				<a class="item" href="?page={{ page.next_page_number() }}&state={{ request.GET.get('state', 'all') }}&cost_centre={{ request.GET.get('cost_centre', 'all') }}&year={{ request.GET.get('year', '') }}">Next &rsaquo;</a>
			{% endif %}
		</div>
	</div>
	
	{% if yearly_totals %}
		<h2>Yearly totals</h2>
		<canvas id="chartYearlyTotals"></canvas>
	{% endif %}
{% endblock %}

{% block head %}
	{{ super() }}
{% endblock %}

{% block script %}
	{{ super() }}
	
	<script>
		$('.ui.dropdown').dropdown();
	</script>
	
	{% if yearly_totals %}
		<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.js" integrity="sha256-5dsP1lVzcWPn5aOwu+zs+G+TqAu9oT8NUNM0C4n3H+4=" crossorigin="anonymous"></script>
		<script>
			const yearlyTotalsData = JSON.parse({{ import('json').dumps(import('json').dumps(yearly_totals))|safe }});
			
			new Chart(document.getElementById('chartYearlyTotals'), {
				type: 'bar',
				data: {
					labels: yearlyTotalsData.map(x => x[0]),
					datasets: [{
						label: {{ import('json').dumps(import('json').dumps(request.GET.get('cost_centre', 'all')))|safe }},
						data: yearlyTotalsData.map(x => x[1]),
						backgroundColor: yearlyTotalsData.map(x => x[1] >= 0 ? '#36a2eb' : '#ff6384')
					}]
				},
				options: {
					indexAxis: 'y',
					scales: {
						x: {
							beginAtZero: true
						}
					},
					plugins: {
						legend: {
							display: false
						},
						tooltip: {
							callbacks: {
								label: i => '$' + i.parsed.x.toFixed(2)
							}
						}
					}
				},
			});
		</script>
	{% endif %}
{% endblock %}