templates/operacje/wydatki.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Operacje - Wydatki{% endblock %}
  5. {% block body %}
  6. <div class="container-fluid pt-4 px-4">
  7.     <div class="row">
  8.         <div class="col-12">
  9.             <div class="bg-secondary rounded p-4">
  10.                 <div class="d-flex justify-content-between align-items-center mb-3">
  11.                     <h4 class="mb-4">
  12.                         <i class="fa fa-arrow-up btn-outline-primary"></i>
  13.                         <i class="fa fa-coins btn-outline-primary"></i> &nbsp;
  14.                         Operacje - Wydatki
  15.                     </h4>
  16.                     <a href="{{ path('operacje_wydatki_new') }}" class="btn btn-primary">Dodaj nowy Wydatek</a>
  17.                 </div>
  18.                 <!-- Wybór roku i miesiąca -->
  19.                 <div class="row mb-4">
  20.                     <div class="col-md-4">
  21.                         <form method="get" class="form-inline">
  22.                             <div class="input-group">
  23.                                 <select name="rok" id="rok" class="form-select" style="width: auto;" onchange="this.form.submit()">
  24.                                     {% for rok in dostepneLata %}
  25.                                         <option value="{{ rok }}" {{ rok == wybranyRok ? 'selected' : '' }}>{{ rok }}</option>
  26.                                     {% endfor %}
  27.                                 </select> &nbsp;
  28.                                 <select name="miesiac" id="miesiac" class="form-select" style="width: auto;" onchange="this.form.submit()">
  29.                                     {% set miesiace = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'] %}
  30.                                     {% for i in 1..12 %}
  31.                                         <option value="{{ i }}" {{ i == wybranyMiesiac ? 'selected' : '' }}>{{ miesiace[i-1] }}</option>
  32.                                     {% endfor %}
  33.                                 </select>
  34.                             </div>
  35.                         </form>
  36.                     </div>
  37.                 </div>
  40.                 <!-- Tabela z operacjami -->
  41.                 <div class="table-responsive">
  42.                     <table id="sortTable" class="table display">
  43.                         <thead>
  44.                         <tr class="text-white">
  45.                             <th>#</th>
  46.                             <th class="sort text-end filtr">Data</th>
  47.                             <th class="sort text-end filtr">Kategoria</th>
  48.                             <th class="sort text-end filtr">Nazwa</th>
  49.                             <th class="text-end sort filtr">Opis</th>
  50.                             <th class="text-end sort filtr">Kto</th>
  51.                             <th class="sort text-end filtr">Kwota</th>
  52.                             <th class="text-end">Akcje</th>
  53.                         </tr>
  54.                         </thead>
  55.                         <tbody>
  56.                         {% for rozchod in rozchodyZOperacjami %}
  57.                             <tr>
  58.                                 <td>{{ loop.index }}</td>
  59.                                 <td class="text-end">{{ rozchod.data_operacji|date('Y-m-d') }}</td>
  60.                                 <td class="text-end"><p class="text-warning">{{ rozchod.kategoria_nazwa ?? 'Brak kategorii' }}</p></td>
  61.                                 <td class="text-end"><p class="text-info">{{ rozchod.nazwa }}</p></td>
  62.                                 <td class="text-end" style="width: 20%">{{ rozchod.opis ?? '-' }}</td>
  63.                                 <td class="text-end">{{ rozchod.kto ?? '-' }}</td>
  64.                                 <td class="text-end">{{ rozchod.kwota|number_format(2, ',', ' ') }} zł</td>
  65.                                 <td class="text-end">
  66.                                     <a class="btn btn-sm btn-info" href="{{ path('operacje_wydatki_edit', {'id': rozchod.operacja_id}) }}">Edytuj</a>
  67.                                     <a class="btn btn-sm btn-primary" href="#" onclick="confirmDelete('{{ path('operacje_wydatki_delete', {'id': rozchod.operacja_id})  }}', {{ rozchod.operacja_id }})">
  68.                                         Usuń
  69.                                     </a>
  70.                                     {# Dodaj ukryty formularz POST #}
  71.                                     <form id="delete-form{{ rozchod.operacja_id }}" action="{{ path('operacje_wydatki_delete', {'id': rozchod.operacja_id}) }}" method="post" style="display: none;">
  72.                                         <input type="hidden" name="_method" value="POST">
  73.                                         <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ rozchod.operacja_id) }}">
  74.                                     </form>
  76.                                     {#                                        <a href="{{ path('operacje_rozchody_edit', {'id': rozchod.operacja_id}) }}" class="btn btn-sm btn-outline-primary me-1" title="Edytuj">#}
  77.                                     {#                                            <i class="bi bi-pencil"></i>#}
  78.                                     {#                                        </a>#}
  79.                                     {#                                        <form method="post" action="{{ path('operacje_rozchody_delete', {'id': rozchod.operacja_id}) }}" class="d-inline" onsubmit="return confirm('Czy na pewno chcesz usunąć ten przychód?');">#}
  80.                                     {#                                            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ rozchod.operacja_id) }}">#}
  81.                                     {#                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Usuń">#}
  82.                                     {#                                                <i class="bi bi-trash"></i>#}
  83.                                     {#                                            </button>#}
  84.                                     {#                                        </form>#}
  85.                                 </td>
  86.                             </tr>
  87.                         {% else %}
  88.                             <tr>
  89.                                 <td colspan="8" class="text-center">Brak operacji dla wybranego okresu</td>
  90.                             </tr>
  91.                         {% endfor %}
  92.                         </tbody>
  93.                         <tfoot>
  94.                         <tr>
  95.                             <th></th>
  96.                             <th></th>
  97.                             <th></th>
  98.                             <th></th>
  99.                             <th></th>
  100.                             <th></th>
  101.                             <th></th>
  102.                             <th></th>
  103.                         </tr>
  104.                         </tfoot>
  105.                     </table>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.     </div>
  110. </div>
  111.                 <div class="container-fluid pt-4 px-4">
  112.                     <div class="row">
  114.                         <div class="col-12">
  115.                             <div class="bg-secondary rounded p-3">
  116.                                 <div class="d-flex justify-content-between align-items-center">
  117.                                     <h4 class="mb-0">Podsumowanie</h4>
  118.                                     <div>
  119.                                         <span class="me-4">Suma: <strong id="totalSum" class="text-success">0.00 zł</strong></span>
  120.                                         <span>Liczba rekordów: <strong id="recordCount">0</strong></span>
  121.                                     </div>
  122.                                 </div>
  123.                             </div>
  124.                         </div>
  126.                     </div>
  127.                 </div>
  129. {% endblock %}
  131. {% block javascripts %}
  132.     {{ parent() }}
  133.     <script src="https://cdn.datatables.net/plug-ins/1.10.25/api/sum().js"></script>
  134.     <script>
  135.         function formatCurrency(value) {
  136.             // Konwertuj na liczbę, formatuj z dwoma miejscami po przecinku
  137.             const num = parseFloat(value).toFixed(2);
  138.             // Podziel na część całkowitą i ułamkową
  139.             const parts = num.toString().split('.');
  140.             // Dodaj spacje jako separatory tysięcy
  141.             parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
  142.             // Połącz części, zamieniając kropkę na przecinek
  143.             return parts.join(',');
  144.         }
  146.         function updateSummary() {
  147.             const table = $('#sortTable').DataTable();
  148.             let sum = 0;
  150.             // Iteruj przez widoczne wiersze
  151.             table.rows({search: 'applied'}).every(function () {
  152.                 const rowData = this.data();
  153.                 // Pobierz wartość z kolumny kwoty (indeks 6, licząc od 0)
  154.                 const kwotaText = rowData[6].toString().trim();
  155.                 // Zamień polski format liczby na format JavaScript
  156.                 const kwota = parseFloat(
  157.                     kwotaText
  158.                         .replace(/\s/g, '')  // Usuń spacje (tysiące)
  159.                         .replace(',', '.')   // Zamień przecinek na kropkę
  160.                         .replace(/[^\d.-]/g, '') // Zostaw tylko cyfry, kropkę i minus
  161.                 ) || 0;
  163.                 sum += kwota;
  164.             });
  166.             const recordCount = table.rows({search: 'applied'}).count();
  168.             $('#totalSum').text(formatCurrency(sum) + ' zł');
  169.             $('#recordCount').text(recordCount);
  170.         }
  172.         // Pobierz instancję DataTable
  173.         const table = $('#sortTable').DataTable();
  175.         const recordCount = table.rows({search: 'applied'}).count();
  177.         if (recordCount === 0) {
  178.             // Jeśli nie ma danych, zaktualizuj podsumowanie zerami
  179.             $('#totalSum').text('0,00 zł');
  180.             $('#recordCount').text('0');
  181.         } else {
  183.             // Zaktualizuj ustawienia DataTable
  184.             table.order([[1, 'desc']]).draw();
  186.             // Dodajemy nasze funkcje do wywołania po narysowaniu tabeli
  187.             table.on('draw', function () {
  188.                 updateSummary();
  189.             });
  191.             // Inicjalne wywołanie podsumowania
  192.             updateSummary();
  194.             // Aktualizuj podsumowanie przy wyszukiwaniu
  195.             $('.dataTables_filter input').on('keyup', function () {
  196.                 setTimeout(updateSummary, 300);
  197.             });
  199.             // Aktualizuj podsumowanie przy zmianie strony
  200.             $('.dataTables_paginate a').on('click', function () {
  201.                 setTimeout(updateSummary, 100);
  202.             });
  203.         }
  205.     </script>
  206. {% endblock %}