From 804b80bbf5371383320b0db8f00ed0976f68307e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?=
 <mateusz.gruszczynski@firma.interia.pl>
Date: Fri, 18 Jul 2025 10:45:51 +0200
Subject: [PATCH] nowa funckcja i male zmiany w js

---
 app.py                       | 15 +++++++++++
 static/js/confirm_delete.js  | 20 +++++++++++++++
 static/js/live.js            | 13 +++++++++-
 templates/edit_my_list.html  | 49 +++++++++++++++++++++++++++++++++---
 templates/user_expenses.html |  2 +-
 5 files changed, 94 insertions(+), 5 deletions(-)
 create mode 100644 static/js/confirm_delete.js

diff --git a/app.py b/app.py
index 0a338ed..51d8e95 100644
--- a/app.py
+++ b/app.py
@@ -610,6 +610,21 @@ def edit_my_list(list_id):
     return render_template("edit_my_list.html", list=l)
 
 
+@app.route("/delete_user_list/<int:list_id>", methods=["POST"])
+@login_required
+def delete_user_list(list_id):
+    l = db.session.get(ShoppingList, list_id)
+    if l is None or l.owner_id != current_user.id:
+        abort(403)
+    delete_receipts_for_list(list_id)
+    Item.query.filter_by(list_id=list_id).delete()
+    Expense.query.filter_by(list_id=list_id).delete()
+    db.session.delete(l)
+    db.session.commit()
+    flash("Lista została usunięta", "success")
+    return redirect(url_for("main_page"))
+
+
 @app.route("/toggle_visibility/<int:list_id>", methods=["GET", "POST"])
 @login_required
 def toggle_visibility(list_id):
diff --git a/static/js/confirm_delete.js b/static/js/confirm_delete.js
new file mode 100644
index 0000000..edb0a69
--- /dev/null
+++ b/static/js/confirm_delete.js
@@ -0,0 +1,20 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const input = document.getElementById('confirm-delete-input');
+    const button = document.getElementById('confirm-delete-btn');
+    let timer = null;
+
+    input.addEventListener('input', function () {
+        button.disabled = true;
+        if (timer) clearTimeout(timer);
+
+        if (input.value.trim().toLowerCase() === 'usuń') {
+            timer = setTimeout(() => {
+                button.disabled = false;
+            }, 2000);
+        }
+    });
+
+    button.addEventListener('click', function () {
+        document.getElementById('delete-form').submit();
+    });
+});
\ No newline at end of file
diff --git a/static/js/live.js b/static/js/live.js
index 9cc05c3..40be454 100644
--- a/static/js/live.js
+++ b/static/js/live.js
@@ -155,8 +155,19 @@ function setupList(listId, username) {
     </div>
   `;
 
-    document.getElementById('items').prepend(li);
+    // góra listy  
+    //document.getElementById('items').prepend(li);
+
+    // dół listy
+    document.getElementById('items').appendChild(li);
     toggleEmptyPlaceholder();
+
+    setTimeout(() => {
+      if (window.LIST_ID) {
+        socket.emit('request_full_list', { list_id: window.LIST_ID });
+      }
+    }, 15000);
+
   });
 
   socket.on('item_deleted', data => {
diff --git a/templates/edit_my_list.html b/templates/edit_my_list.html
index 62892b3..1adf2b9 100644
--- a/templates/edit_my_list.html
+++ b/templates/edit_my_list.html
@@ -1,7 +1,8 @@
 {% extends 'base.html' %}
-{% block content %}
 
+{% block content %}
 <h2>Edytuj listę: <strong>{{ list.title }}</strong></h2>
+
 <form method="post">
   <div class="mb-3">
     <label for="title" class="form-label">Nazwa listy</label>
@@ -40,9 +41,51 @@
     <label class="form-check-label" for="is_archived">Zarchiwizowana</label>
   </div>
 
-  <button type="submit" class="btn btn-success">Zapisz</button>
-  <a href="{{ url_for('main_page') }}" class="btn btn-secondary">Anuluj</a>
+  <div class="btn-group mt-4" role="group">
+    <button type="submit" class="btn btn-outline-success">Zapisz</button>
+    <a href="{{ url_for('main_page') }}" class="btn btn-outline-light">Anuluj</a>
+  </div>
+
 </form>
 
+<hr class="my-3">
+<!-- Trigger przycisk -->
+<div class="btn-group mt-4" role="group">
+  <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
+    🗑️ Usuń tę listę
+  </button>
+</div>
 
+<!-- MODAL -->
+<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content bg-dark border-danger text-white">
+      <div class="modal-header">
+        <h5 class="modal-title text-danger" id="deleteModalLabel">Potwierdź usunięcie</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+      </div>
+      <div class="modal-body">
+        <p>Aby usunąć listę <strong>{{ list.title }}</strong>, wpisz <code>usuń</code> i poczekaj 2 sekundy:</p>
+        <input type="text" id="confirm-delete-input" class="form-control bg-dark text-white border-warning"
+          placeholder="usuń">
+      </div>
+      <div class="modal-footer justify-content-between">
+        <div class="btn-group" role="group">
+          <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Anuluj</button>
+          <button id="confirm-delete-btn" class="btn btn-outline-danger" disabled>🗑️ Usuń</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<form id="delete-form" method="post" action="{{ url_for('delete_list', list_id=list.id) }}"></form>
+
+
+<!-- Hidden delete form -->
+<form id="delete-form" method="post" action="{{ url_for('delete_user_list', list_id=list.id) }}"></form>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static_bp.serve_js', filename='confirm_delete.js') }}"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/user_expenses.html b/templates/user_expenses.html
index d3ebb1a..ad103fe 100644
--- a/templates/user_expenses.html
+++ b/templates/user_expenses.html
@@ -3,7 +3,7 @@
 
 {% block content %}
 <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
-  <h2 class="mb-2">📊 Statystyki wydatków</h2>
+  <h2 class="mb-2">Statystyki wydatków</h2>
   <a href="{{ url_for('main_page') }}" class="btn btn-outline-secondary">← Powrót</a>
 </div>