Initial commit: Frühstückskonten Verwaltung Web-App

views/withdraw.ejs

@@ -0,0 +1,75 @@
+<%- include('layout', { title: 'Betrag abbuchen - ' + account.name }) %>
+
+<% override body %>
+    <h2>Betrag abbuchen für: <%= account.name %></h2>
+    
+    <p>Aktueller Kontostand: <strong><%= account.balance.toFixed(2) %> €</strong></p>
+    
+    <% if (error) { %>
+        <div class="error">
+            <% if (error === 'insufficient_funds') { %>
+                Nicht genügend Guthaben auf dem Konto!
+            <% else if (error === 'invalid_amount') { %>
+                Bitte einen gültigen Betrag eingeben!
+            <% else if (error === 'invalid_item') { %>
+                Ungültiger Artikel ausgewählt!
+            <% else { %>
+                <%= error %>
+            <% } %>
+        </div>
+    <% } %>
+    
+    <form action="/accounts/<%= account.id %>/withdraw" method="POST">
+        <div class="form-section">
+            <h3>Option 1: Artikel auswählen</h3>
+            <div class="form-group">
+                <label for="itemId">Artikel:</label>
+                <select id="itemId" name="itemId">
+                    <option value="">-- Artikel auswählen --</option>
+                    <% items.forEach(item => { %>
+                        <option value="<%= item.id %>">
+                            <%= item.name %> (<%= item.price.toFixed(2) %> €)
+                            <% if (item.description) { %>
+                                - <%= item.description %>
+                            <% } %>
+                        </option>
+                    <% }); %>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="description">Bemerkung (optional):</label>
+                <input type="text" id="description" name="description">
+            </div>
+        </div>
+        
+        <div class="form-section">
+            <h3>Option 2: Manueller Betrag</h3>
+            <div class="form-group">
+                <label for="customAmount">Betrag (€):</label>
+                <input type="number" id="customAmount" name="customAmount" step="0.01" min="0.01">
+            </div>
+            <div class="form-group">
+                <label for="description2">Beschreibung (optional):</label>
+                <input type="text" id="description2" name="description">
+            </div>
+        </div>
+        
+        <button type="submit" class="btn">Abbuchen</button>
+        <a href="/accounts/<%= account.id %>", class="btn secondary">Abbrechen</a>
+    </form>
+    
+    <script>
+        // Ensure only one option is used at a time
+        document.querySelector('select[name="itemId"]').addEventListener('change', function() {
+            if (this.value) {
+                document.getElementById('customAmount').value = '';
+            }
+        });
+        
+        document.getElementById('customAmount').addEventListener('input', function() {
+            if (this.value) {
+                document.querySelector('select[name="itemId"]').value = '';
+            }
+        });
+    </script>
+<% end %>