98 lines
3.3 KiB
HTML
98 lines
3.3 KiB
HTML
{% extends "expenses/base.html" %}
|
||
|
||
{% load l10n %}
|
||
|
||
{% block title %}
|
||
Objetivos
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<h1>Objetivos</h1>
|
||
|
||
<div class="section-actions">
|
||
<a class="btn btn-primary" href="{% url 'goal_create' %}">➕ Nuevo objetivo</a>
|
||
</div>
|
||
|
||
<form method="get" class="filters">
|
||
<div class="filters-main">
|
||
<label class="sr-only" for="filterKind">Tipo</label>
|
||
<select name="kind" id="filterKind" onchange="this.form.submit()">
|
||
<option value="">Todos los tipos</option>
|
||
{% for value, label in kind_choices %}
|
||
<option value="{{ value }}" {% if selected_kind == value %}selected{% endif %}>
|
||
{{ label }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
|
||
<button type="submit" class="btn btn-primary">Filtrar</button>
|
||
<a href="{% url 'goal_list' %}" class="btn btn-secondary">Limpiar</a>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Nombre</th>
|
||
<th>Tipo</th>
|
||
<th>Progreso</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for goal in goals %}
|
||
<tr>
|
||
<td>{{ goal.name }}</td>
|
||
<td>
|
||
{{ goal.get_kind_display }}
|
||
{% if goal.kind == "budget" %}
|
||
<small>({{ goal.get_period_display|lower }})</small>
|
||
{% endif %}
|
||
</td>
|
||
<td>
|
||
<div class="progress-container">
|
||
<span class="progress-label">
|
||
{{ goal.progress|floatformat:1 }}€ / {{ goal.target_amount|floatformat:1 }}€
|
||
</span>
|
||
<div class="progress-bar"
|
||
role="progressbar"
|
||
aria-valuemin="0"
|
||
aria-valuemax="100"
|
||
aria-valuenow="{{ goal.percentage|unlocalize }}"
|
||
aria-label="Progreso de {{ goal.name }}"
|
||
aria-valuetext="{{ goal.progress|floatformat:1 }}€ de {{ goal.target_amount|floatformat:1 }}€ ({{ goal.percentage|floatformat:1 }}%)">
|
||
<div class="progress-fill {{ goal.progress_state }}"
|
||
style="width: {{ goal.bar_width|unlocalize }}%"></div>
|
||
</div>
|
||
<span class="progress-label">
|
||
{{ goal.percentage|floatformat:1 }}%
|
||
</span>
|
||
{% if goal.is_exceeded %}
|
||
<span class="badge badge-inactive">Excedido</span>
|
||
{% endif %}
|
||
</div>
|
||
</td>
|
||
|
||
<td class="table-actions">
|
||
<a href="{% url 'goal_edit' goal.id %}">Editar</a>
|
||
{% if goal.accepts_links %}
|
||
<a href="{% url 'goal_links' goal.id %}">Vincular</a>
|
||
{% endif %}
|
||
<a href="{% url 'goal_delete' goal.id %}" class="danger">Eliminar</a>
|
||
</td>
|
||
</tr>
|
||
{% empty %}
|
||
<tr>
|
||
<td colspan="4" class="empty-state">
|
||
<p>No hay objetivos</p>
|
||
<a href="{% url 'goal_create' %}">Añade el primero</a>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{% endblock %}
|