zmiany ux i nowe funckje

2025-07-10 13:03:33 +02:00
parent 40fa601bbe
commit f36739aa40
11 changed files with 317 additions and 77 deletions
--- a/templates/admin/receipts.html
+++ b/templates/admin/receipts.html
@@ -33,7 +33,7 @@
 </div>

 {% if not image_files %}
-  <div class="alert alert-info" role="alert">
+  <div class="alert alert-info text-center" role="alert">
    Nie wgrano paragonów.
  </div>
 {% endif %}
--- a/templates/list.html
+++ b/templates/list.html
@@ -53,12 +53,19 @@ Lista: <strong>{{ list.title }}</strong>
  📊 Postęp listy — {{ purchased_count }}/{{ total_count }} kupionych ({{ percent|round(0) }}%)
 </h5>

-<div class="progress progress-dark">
-  <div id="progress-bar" class="progress-bar bg-warning text-dark fw-bold" role="progressbar"
-      style="width: {{ percent }}%;" aria-valuenow="{{ percent }}"
-      aria-valuemin="0" aria-valuemax="100">
-    {{ percent|round(0) }}%
+<div class="progress progress-dark position-relative">
+  {# właściwy pasek postępu #}
+  <div id="progress-bar"
+       class="progress-bar bg-warning text-dark"
+       role="progressbar"
+       style="width: {{ percent }}%;"
+       aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
  </div>
+
+  <span class="progress-label small fw-bold
+               {% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
+      {{ percent|round(0) }}%
+  </span>
 </div>

 {% if total_expense > 0 %}
@@ -66,7 +73,7 @@ Lista: <strong>{{ list.title }}</strong>
    💸 Łącznie wydano: {{ '%.2f'|format(total_expense) }} PLN
  </div>
 {% else %}
-  <div id="total-expense2" class="text-success fw-bold mb-3" style="display: none;">
+  <div id="total-expense2" class="text-success fw-bold mb-3">
    💸 Łącznie wydano: 0.00 PLN
  </div>
 {% endif %}
@@ -97,6 +104,11 @@ Lista: <strong>{{ list.title }}</strong>
    </button>
  </div>
 </li>
+  {% else %}
+    <li id="empty-placeholder"
+        class="list-group-item bg-dark text-secondary text-center w-100">
+        Brak produktów w tej liście.
+    </li>
  {% endfor %}
 </ul>

@@ -118,10 +130,11 @@ Lista: <strong>{{ list.title }}</strong>
 {% endif %}

 {% set receipt_pattern = 'list_' ~ list.id %}
-{% if receipt_files %}
-  <hr>
-  <h5 class="mt-4">📸 Paragony dodane do tej listy</h5>
-  <div class="row g-3 mt-2">
+<hr>
+<h5 class="mt-4">📸 Paragony dodane do tej listy</h5>
+
+<div class="row g-3 mt-2" id="receiptGallery">
+  {% if receipt_files %}
    {% for file in receipt_files %}
      <div class="col-6 col-md-4 col-lg-3 text-center">
        <a href="{{ url_for('uploaded_file', filename=file) }}" data-lightbox="receipt" data-title="Paragon">
@@ -129,11 +142,12 @@ Lista: <strong>{{ list.title }}</strong>
        </a>
      </div>
    {% endfor %}
-  </div>
-{% else %}
-  <hr>
-  <p><span class="badge bg-secondary">Brak wgranych paragonów do tej listy.</span></p>
-{% endif %}
+  {% else %}
+    <div class="alert alert-info text-center w-100" role="alert">
+      Brak wgranych paragonów do tej listy.
+    </div>
+  {% endif %}
+</div>

 <div class="modal fade" id="massAddModal" tabindex="-1" aria-labelledby="massAddModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
@@ -158,6 +172,7 @@ Lista: <strong>{{ list.title }}</strong>
 <script>
  setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
 </script>
+<script src="{{ url_for('static_bp.serve_js', filename='receipt_upload.js') }}"></script>
 {% endblock %}

 {% endblock %}
--- a/templates/list_share.html
+++ b/templates/list_share.html
@@ -37,7 +37,12 @@
      {% if list.is_archived %}disabled{% else %}onclick="openNoteModal(event, {{ item.id }})"{% endif %}>
      📝
    </button>
-  </li>
+</li>
+  {% else %}
+    <li id="empty-placeholder"
+        class="list-group-item bg-dark text-secondary text-center w-100">
+        Brak produktów w tej liście.
+    </li>
  {% endfor %}
 </ul>

@@ -64,9 +69,11 @@
 </button>
 <div class="collapse" id="receiptSection">
 {% set receipt_pattern = 'list_' ~ list.id %}
-{% if receipt_files %}
-  <h5 class="mt-4">📸 Paragony dodane do tej listy</h5>
-  <div class="row g-3 mt-2">
+
+<h5 class="mt-4">📸 Paragony dodane do tej listy</h5>
+
+<div class="row g-3 mt-2" id="receiptGallery">
+  {% if receipt_files %}
    {% for file in receipt_files %}
      <div class="col-6 col-md-4 col-lg-3 text-center">
        <a href="{{ url_for('uploaded_file', filename=file) }}" data-lightbox="receipt" data-title="Paragon">
@@ -74,21 +81,27 @@
        </a>
      </div>
    {% endfor %}
-  </div>
-{% else %}
-  <p><span class="badge bg-secondary">Brak wgranych paragonów do tej listy.</span></p>
-{% endif %}
+  {% else %}
+    <div class="alert alert-info text-center w-100" role="alert">
+      Brak wgranych paragonów do tej listy.
+    </div>
+  {% endif %}
+</div>

 {% if not list.is_archived %}
  <hr>
  <h5>📤 Dodaj zdjęcie paragonu</h5>
-  <form action="{{ url_for('upload_receipt', list_id=list.id) }}" method="post" enctype="multipart/form-data">
+  <form id="receiptForm" action="{{ url_for('upload_receipt', list_id=list.id) }}" method="post" enctype="multipart/form-data">
    <div class="input-group mb-2">
-      <input type="file" name="receipt" accept="image/*" capture="environment" class="form-control bg-dark text-white border-secondary custom-file-input" id="receiptInput">
+      <input type="file" name="receipt" accept="image/*" capture="environment" class="form-control bg-dark text-white border-secondary" id="receiptInput">
      <button type="submit" class="btn btn-success rounded-end">➕ Wgraj</button>
    </div>
+    <div id="progressContainer" class="progress mb-2" style="height: 20px; display: none;">
+      <div id="progressBar" class="progress-bar bg-success fw-bold" role="progressbar" style="width: 0%;">0%</div>
+    </div>
  </form>
 {% endif %}
+
 </div>

 <!-- Modal notatki -->
@@ -116,6 +129,7 @@
 <script src="{{ url_for('static_bp.serve_js', filename='notes.js') }}"></script>
 <script src="{{ url_for('static_bp.serve_js', filename='clickable_row.js') }}"></script>
 <script src="{{ url_for('static_bp.serve_js', filename='receipt_section.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='receipt_upload.js') }}"></script>
 <script>
  setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
 </script>
--- a/templates/main.html
+++ b/templates/main.html
@@ -65,13 +65,19 @@
            {% endif %}
          </div>
          </div>
-          <div class="progress progress-dark progress-thin mt-2">
-            <div class="progress-bar bg-warning text-dark fw-bold small" role="progressbar" style="width: {{ percent }}%;" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
-              Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
-              {% if l.total_expense > 0 %}
-                — 💸 {{ '%.2f'|format(l.total_expense) }} PLN
-              {% endif %}
-            </div>
+          <div class="progress progress-dark progress-thin mt-2 position-relative">
+          <div class="progress-bar bg-warning text-dark" 
+              role="progressbar"
+              style="width: {{ percent }}%;"
+              aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
+          </div>              
+          <span class="progress-label small fw-bold 
+                      {% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
+                  Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
+                  {% if l.total_expense > 0 %}
+                    — 💸 {{ '%.2f'|format(l.total_expense) }} PLN
+                  {% endif %}
+              </span>
          </div>
        </li>
      {% endfor %}
@@ -93,19 +99,25 @@
          <span class="fw-bold">{{ l.title }} (Autor: {{ l.owner.username }})</span>
          <a href="/guest-list/{{ l.id }}" class="btn btn-sm btn-outline-light">📄 Otwórz</a>
        </div>
-        <div class="progress progress-dark progress-thin mt-2">
-          <div class="progress-bar bg-warning text-dark fw-bold small" role="progressbar" style="width: {{ percent }}%" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
-            Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
-            {% if l.total_expense > 0 %}
-              — 💸 {{ '%.2f'|format(l.total_expense) }} PLN
-            {% endif %}
-          </div>
-        </div>
-      </li>
-    {% endfor %}
+          <div class="progress progress-dark progress-thin mt-2 position-relative">
+          <div class="progress-bar bg-warning text-dark" 
+              role="progressbar"
+              style="width: {{ percent }}%;"
+              aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
+          </div>              
+          <span class="progress-label small fw-bold 
+                      {% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
+                  Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
+                  {% if l.total_expense > 0 %}
+                    — 💸 {{ '%.2f'|format(l.total_expense) }} PLN
+                  {% endif %}
+              </span>
+            </div>
+        </li>
+      {% endfor %}
  </ul>
 {% else %}
-  <p><span class="badge bg-secondary">Brak dostępnych list publicznych do wyświetlenia.</span></p>
+  <p><span class="badge rounded-pill bg-secondary opacity-75">Brak dostępnych list publicznych do wyświetlenia</span></p>
 {% endif %}

 <div class="modal fade" id="archivedModal" tabindex="-1" aria-labelledby="archivedModalLabel" aria-hidden="true">
@@ -126,7 +138,9 @@
            {% endfor %}
          </ul>
        {% else %}
-          <p><span class="badge bg-secondary">Nie masz żadnych zarchiwizowanych list.</span></p>
+          <div class="alert alert-info text-center" role="alert">
+            Nie masz żadnych zarchiwizowanych list.
+          </div>
        {% endif %}
      </div>
      <div class="modal-footer">