From 7073ec7c66f66379e8c4465ec753cbdcdcb12e3b Mon Sep 17 00:00:00 2001
From: daMustermann <julian.neumann@gmail.com>
Date: Sun, 12 Jan 2025 02:26:01 +0100
Subject: [PATCH] Enhance UI: Add toggleable form for adding new items

---
 templates/index.html | 42 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/templates/index.html b/templates/index.html
index e05aac1..22ff587 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -190,7 +190,20 @@ <h1>Inventory</h1>
             {% endif %}
         {% endwith %}
 
-        <h2>Add New Item</h2>
+        <button id="toggleFormBtn" class="btn btn-primary mb-3">
+            <i class="fas fa-plus"></i> Add New Item
+        </button>
+        
+        <div id="itemFormContainer" style="display: none;">
+            <div class="card">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0">Add New Item</h5>
+                    <button type="button" class="close" id="closeForm">
+                        <span>&times;</span>
+                    </button>
+                </div>
+                <div class="card-body">
+
         <form method="POST" enctype="multipart/form-data">
             <div class="form-group">
                 <label for="title">Title:</label>
@@ -227,6 +240,9 @@ <h2>Add New Item</h2>
 
             <button type="submit" class="btn btn-primary">Add Item</button>
         </form>
+        </div>
+    </div>
+</div>
 
         <h2>Current Items</h2>
         {% for item in items.items %}
@@ -287,6 +303,30 @@ <h5 class="card-title">
         </nav>
     </div>
 
+    <script>
+        document.getElementById('toggleFormBtn').addEventListener('click', function() {
+            const form = document.getElementById('itemFormContainer');
+            const btn = this;
+            
+            if (form.style.display === 'none') {
+                form.style.display = 'block';
+                btn.innerHTML = '<i class="fas fa-times"></i> Close Form';
+                btn.classList.replace('btn-primary', 'btn-danger');
+            } else {
+                form.style.display = 'none';
+                btn.innerHTML = '<i class="fas fa-plus"></i> Add New Item';
+                btn.classList.replace('btn-danger', 'btn-primary');
+            }
+        });
+    
+        document.getElementById('closeForm').addEventListener('click', function() {
+            document.getElementById('itemFormContainer').style.display = 'none';
+            const btn = document.getElementById('toggleFormBtn');
+            btn.innerHTML = '<i class="fas fa-plus"></i> Add New Item';
+            btn.classList.replace('btn-danger', 'btn-primary');
+        });
+    </script>
+    
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>