static/js/functions.js

@@ -19,7 +19,7 @@ function updateItemState(itemId, isChecked) {
   applyHidePurchased();
 }
 
-function updateProgressBar() {
+/* function updateProgressBar() {
   const items = document.querySelectorAll('#items li');
   const total = items.length;
   const purchased = Array.from(items).filter(li => li.classList.contains('bg-success')).length;
@@ -31,6 +31,48 @@ function updateProgressBar() {
     progressBar.setAttribute('aria-valuenow', percent);
     progressBar.textContent = `${percent}%`;
   }
+} */
+
+function updateProgressBar() {
+  const items = document.querySelectorAll('#items li');
+  const total = items.length;
+  const purchased = Array.from(items).filter(li => li.classList.contains('bg-success')).length;
+  const percent = total > 0 ? Math.round((purchased / total) * 100) : 0;
+
+  // Pasek postępu
+  const progressBar = document.getElementById('progress-bar');
+  if (progressBar) {
+    progressBar.style.width = `${percent}%`;
+    progressBar.setAttribute('aria-valuenow', percent);
+    progressBar.textContent = percent > 0 ? `${percent}%` : ''; // opcjonalnie
+  }
+
+  // Label na pasku postępu
+  const progressLabel = document.getElementById('progress-label');
+  if (progressLabel) {
+    progressLabel.textContent = `${percent}%`;
+    if (percent === 0) {
+      progressLabel.style.display = 'inline';
+    } else {
+      progressLabel.style.display = 'none';
+    }
+    // Kolor tekstu labela
+    if (percent < 50) {
+      progressLabel.classList.remove('text-dark');
+      progressLabel.classList.add('text-white');
+    } else {
+      progressLabel.classList.remove('text-white');
+      progressLabel.classList.add('text-dark');
+    }
+  }
+
+  // Nagłówek
+  const purchasedCount = document.getElementById('purchased-count');
+  if (purchasedCount) purchasedCount.textContent = purchased;
+  const totalCount = document.getElementById('total-count');
+  if (totalCount) totalCount.textContent = total;
+  const percentValue = document.getElementById('percent-value');
+  if (percentValue) percentValue.textContent = percent;
 }
 
 function addItem(listId) {
@@ -92,16 +134,14 @@ function submitExpense(listId) {
 }
 
 function copyLink(link) {
-  // Najpierw sprawdź Web Share API (działa na większości urządzeń mobilnych)
   if (navigator.share) {
     navigator.share({
       title: 'Udostępnij link',
-      text: 'Sprawdź ten link:',
+      text: 'Link do listy::',
       url: link
     }).then(() => {
       showToast('Link udostępniony!');
     }).catch((err) => {
-      // Użytkownik anulował lub wystąpił błąd – próbujemy dalej
       tryClipboard(link);
     });
     return;

templates/list.html

@@ -50,11 +50,13 @@ Lista: <strong>{{ list.title }}</strong>
 
 <!-- Progress bar (dynamic) -->
 <h5 id="progress-title" class="mb-2">
-  📊 Postęp listy — {{ purchased_count }}/{{ total_count }} kupionych ({{ percent|round(0) }}%)
+  📊 Postęp listy —
+  <span id="purchased-count">{{ purchased_count }}</span>/
+  <span id="total-count">{{ total_count }}</span> kupionych
+  (<span id="percent-value">{{ percent|round(0) }}</span>%)
 </h5>
 
 <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"
@@ -62,7 +64,7 @@ Lista: <strong>{{ list.title }}</strong>
        aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
   </div>
 
-  <span class="progress-label small fw-bold
+  <span id="progress-label" class="progress-label small fw-bold
                {% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
       {{ percent|round(0) }}%
   </span>