gru/lista_zakupowa_live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

rozbudowa wykresow o kategorie i usuniecie dupliakcji kodu z apnelu admina

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-08-01 11:31:17 +02:00
parent 2df64bbe2e
commit cfae8571de
11 changed files with 358 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
templates/admin/admin_panel.html
View File

@@ -118,10 +118,10 @@
</tbody>
</table>
<button type="button" class="btn btn-outline-primary w-100 mt-3" data-bs-toggle="modal"
data-bs-target="#expensesChartModal" id="loadExpensesBtn">
<a href="{{ url_for('expenses') }}#chartTab" class="btn btn-outline-info">
📊 Pokaż wykres wydatków
</button>
</a>
</div>
</div>
</div>
@@ -219,52 +219,13 @@
</div>
</div>
<div class="modal fade" id="expensesChartModal" tabindex="-1" aria-labelledby="expensesChartModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content bg-dark text-white rounded">
<div class="modal-header border-0">
<div>
<h5 class="modal-title m-0" id="expensesChartModalLabel">📊 Wydatki</h5>
<small id="chartRangeLabel" class="text-muted">Widok: miesięczne</small>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
</div>
<div class="modal-body pt-0">
<div class="d-flex flex-wrap gap-2 mb-3">
<button class="btn btn-outline-light btn-sm range-btn active" data-range="monthly">📅 Miesięczne</button>
<button class="btn btn-outline-light btn-sm range-btn" data-range="quarterly">📊 Kwartalne</button>
<button class="btn btn-outline-light btn-sm range-btn" data-range="halfyearly">🗓️ Półroczne</button>
<button class="btn btn-outline-light btn-sm range-btn" data-range="yearly">📆 Roczne</button>
</div>
<div class="input-group input-group-sm mb-3 w-100" style="max-width: 570px;">
<span class="input-group-text bg-secondary text-white border-secondary">Od</span>
<input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="startDate">
<span class="input-group-text bg-secondary text-white border-secondary">Do</span>
<input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="endDate">
<button class="btn btn-outline-success" id="customRangeBtn">Pokaż dane z zakresu 📅</button>
</div>
<div class="bg-dark rounded p-2">
<canvas id="expensesChart" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
{% block scripts %}
<script src="{{ url_for('static_bp.serve_js_lib', filename='chart.js') }}"></script>
<script>
document.getElementById('select-all').addEventListener('click', function () {
const checkboxes = document.querySelectorAll('input[name="list_ids"]');
checkboxes.forEach(cb => cb.checked = this.checked);
});
</script>
<script src="{{ url_for('static_bp.serve_js', filename='expenses.js') }}"></script>
{% endblock %}
<div class="info-bar-fixed">

2
templates/base.html
View File

@@ -49,7 +49,7 @@
{% if current_user.is_admin %}
<a href="{{ url_for('admin_panel') }}" class="btn btn-outline-light btn-sm">⚙️</a>
{% endif %}
<a href="{{ url_for('user_expenses') }}" class="btn btn-outline-light btn-sm">📊</a>
<a href="{{ url_for('expenses') }}" class="btn btn-outline-light btn-sm">📊</a>
<a href="{{ url_for('logout') }}" class="btn btn-outline-light btn-sm">🚪</a>
{% else %}
<a href="{{ url_for('login') }}" class="btn btn-outline-light btn-sm">🔑 Zaloguj</a>

70
templates/user_expenses.html → templates/expenses.html
View File

@@ -16,30 +16,32 @@
</div>
</div>
<!-- Przyciski kategorii -->
<div class="d-flex flex-wrap gap-2 mb-3 justify-content-center">
<a href="{{ url_for('user_expenses') }}"
class="btn btn-sm {% if not selected_category %}btn-success{% else %}btn-outline-light{% endif %}">
<button type="button"
class="btn btn-sm category-filter {% if not selected_category %}btn-success{% else %}btn-outline-light{% endif %}"
data-category-id="">
🌐 Wszystkie
</a>
</button>
{% for cat in categories %}
<a href="{{ url_for('user_expenses', category_id=cat.id) }}"
class="btn btn-sm {% if selected_category == cat.id %}btn-success{% else %}btn-outline-light{% endif %}">
<button type="button"
class="btn btn-sm category-filter {% if selected_category == cat.id %}btn-success{% else %}btn-outline-light{% endif %}"
data-category-id="{{ cat.id }}">
{{ cat.name }}
</a>
</button>
{% endfor %}
</div>
<div class="card bg-dark text-white mb-5">
<div class="card-body">
<ul class="nav nav-tabs mb-3" id="expenseTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="lists-tab" data-bs-toggle="tab" data-bs-target="#listsTab" type="button"
role="tab">
📚 Listy
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="chart-tab" data-bs-toggle="tab" data-bs-target="#chartTab" type="button"
role="tab">
@@ -49,22 +51,20 @@
</ul>
<div class="tab-content" id="expenseTabsContent">
<!-- LISTY -->
<!-- LISTY -->
<div class="tab-pane fade show active" id="listsTab" role="tabpanel">
<div class="card bg-dark text-white mb-4">
<div class="card-body">
<div class="d-flex flex-wrap gap-2 mb-3 justify-content-center">
<button class="btn btn-outline-light btn-sm range-btn" data-range="day">🗓️ Dzień</button>
<button class="btn btn-outline-light btn-sm range-btn" data-range="week">📆 Tydzień</button>
<button class="btn btn-outline-light btn-sm range-btn active" data-range="month">📅 Miesiąc</button>
<button class="btn btn-outline-light btn-sm range-btn" data-range="year">📈 Rok</button>
<button class="btn btn-outline-light btn-sm range-btn" data-range="all">🌐 Wszystko</button>
<div class="btn-group btn-group-sm" role="group">
<button class="btn btn-outline-light range-btn" data-range="day">🗓️ Dzień</button>
<button class="btn btn-outline-light range-btn" data-range="week">📆 Tydzień</button>
<button class="btn btn-outline-light range-btn active" data-range="month">📅 Miesiąc</button>
<button class="btn btn-outline-light range-btn" data-range="year">📈 Rok</button>
<button class="btn btn-outline-light range-btn" data-range="all">🌐 Wszystko</button>
</div>
</div>
<div class="d-flex justify-content-center mb-3">
<div class="input-group input-group-sm w-100" style="max-width: 570px;">
<span class="input-group-text bg-secondary text-white border-secondary">Od</span>
@@ -75,6 +75,7 @@
<button class="btn btn-outline-success" id="applyCustomRange">📊 Zastosuj zakres</button>
</div>
</div>
<div class="d-flex justify-content-center mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="onlyWithExpenses">
@@ -89,6 +90,8 @@
✅ Zaznacz wszystkie
</button>
</div>
<!-- Tabela list z możliwością filtrowania -->
<div class="table-responsive">
<table class="table table-dark table-striped align-middle sortable">
<thead>
@@ -104,8 +107,7 @@
<tr data-date="{{ list.created_at.strftime('%Y-%m-%d') }}"
data-week="{{ list.created_at.isocalendar()[0] }}-{{ '%02d' % list.created_at.isocalendar()[1] }}"
data-month="{{ list.created_at.strftime('%Y-%m') }}" data-year="{{ list.created_at.year }}"
data-categories="{{ ','.join(list.categories | map('string')) }}">
data-categories="{% if list.categories %}{{ ','.join(list.categories | map('string')) }}{% else %}{% endif %}">
<td>
<input type="checkbox" class="form-check-input list-checkbox"
@@ -114,7 +116,6 @@
<td>
<strong>{{ list.title }}</strong>
<br><small class="text-small">👤 {{ list.owner_username or '?' }}</small>
</td>
<td>{{ list.created_at.strftime('%Y-%m-%d') }}</td>
<td>{{ '%.2f'|format(list.total_expense) }}</td>
@@ -123,6 +124,7 @@
</tbody>
</table>
</div>
<hr>
<h5 class="text-success mt-3">💰 Suma zaznaczonych: <span id="listsTotal">0.00 PLN</span></h5>
</div>
@@ -133,25 +135,26 @@
<div class="tab-pane fade" id="chartTab" role="tabpanel">
<div class="card bg-dark text-white mb-4">
<div class="card-body">
<button class="btn btn-outline-light w-100 py-2 mb-2 d-flex align-items-center justify-content-center gap-2"
id="toggleCategorySplit">
🎨 Pokaż podział na kategorie
</button>
<p id="chartRangeLabel" class="fw-bold mb-3">Widok: miesięczne</p>
<canvas id="expensesChart" height="120"></canvas>
</div>
</div>
<div class="d-flex flex-wrap gap-2 mb-3 justify-content-center">
<button class="btn btn-outline-light btn-sm range-btn active" data-range="monthly">📅 Miesięczne</button>
<button class="btn btn-outline-light btn-sm range-btn" data-range="quarterly">📊 Kwartalne</button>
<button class="btn btn-outline-light btn-sm range-btn" data-range="halfyearly">🗓️ Półroczne</button>
<button class="btn btn-outline-light btn-sm range-btn" data-range="yearly">📈 Roczne</button>
<div class="btn-group btn-group-sm" role="group">
<button class="btn btn-outline-light range-btn active" data-range="last30days">🗓️ Ostatnie 30 dni</button>
<button class="btn btn-outline-light range-btn" data-range="currentmonth">📅 Bieżący miesiąc</button>
<button class="btn btn-outline-light range-btn" data-range="monthly">📆 Miesięczne</button>
<button class="btn btn-outline-light range-btn" data-range="quarterly">📊 Kwartalne</button>
<button class="btn btn-outline-light range-btn" data-range="halfyearly">🗓️ Półroczne</button>
<button class="btn btn-outline-light range-btn" data-range="yearly">📈 Roczne</button>
</div>
</div>
<!-- Picker daty w formie input-group -->
<div class="d-flex justify-content-center mb-4">
<div class="input-group input-group-sm w-100" style="max-width: 570px;">
<span class="input-group-text bg-secondary text-white border-secondary">Od</span>
@@ -161,19 +164,16 @@
<button class="btn btn-outline-success" id="customRangeBtn">📊 Pokaż dane z zakresu</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static_bp.serve_js_lib', filename='chart.js') }}"></script>
<script src="{{ url_for('static_bp.serve_js', filename='user_expenses.js') }}"></script>
<script src="{{ url_for('static_bp.serve_js', filename='user_expense_lists.js') }}"></script>
<script src="{{ url_for('static_bp.serve_js', filename='user_expense_category.js') }}"></script>
<script src="{{ url_for('static_bp.serve_js', filename='expense_chart.js') }}"></script>
<script src="{{ url_for('static_bp.serve_js', filename='expense_table.js') }}"></script>
<script src="{{ url_for('static_bp.serve_js', filename='expense_tab.js') }}"></script>
{% endblock %}