subcategories and editing for tasks

2026-02-10 19:31:57 +01:00
parent b2f26b66bb
commit 6902ff3373
7 changed files with 389 additions and 81 deletions
--- a/templates/edit_activity.html
+++ b/templates/edit_activity.html
@@ -0,0 +1,83 @@
+{% extends "layout.html" %}
+{% block content %}
+<div class="card" style="max-width: 500px; margin: auto;">
+    <h2>Edit Activity: {{ activity.name }}</h2>
+    <form method="POST" onsubmit="prepareSubcategories()">
+        <label>Name</label>
+        <input type="text" name="name" value="{{ activity.name }}" required>
+        
+        <label>Color</label>
+        <input type="color" name="color" value="{{ activity.color }}" style="width:100%; height:40px; border:none; margin-bottom: 1rem;">
+        
+        <label>Subcategories</label>
+        <p style="font-size: 0.8rem; color: #666; margin-top: -10px;">
+            Define specific contexts here (e.g. Boss, Team, Client A)
+        </p>
+        
+        <div style="display: flex; gap: 5px; margin-bottom: 10px;">
+            <input type="text" id="newSubcat" placeholder="New subcategory..." style="margin-bottom: 0;">
+            <button type="button" class="btn" style="background: #27ae60;" onclick="addSubcat()">Add</button>
+        </div>
+
+        <ul id="subcatList" style="list-style: none; padding: 0; margin-bottom: 1rem;">
+            <!-- Items will be injected here -->
+        </ul>
+        
+        <!-- Hidden input to store common separated list for backend -->
+        <input type="hidden" name="subcategories" id="subcatsInput">
+        
+        <div style="display: flex; gap: 10px; margin-top: 20px;">
+            <button type="submit" class="btn">Save Changes</button>
+            <a href="{{ url_for('index') }}" class="btn" style="background: #95a5a6; text-decoration: none;">Cancel</a>
+        </div>
+    </form>
+</div>
+
+<script>
+    // Initial data from server
+    let subcategories = {{ activity.subcategories|default([])|tojson }};
+
+    function renderList() {
+        const list = document.getElementById('subcatList');
+        list.innerHTML = '';
+        subcategories.forEach((item, index) => {
+            const li = document.createElement('li');
+            li.style.background = '#f1f1f1';
+            li.style.margin = '5px 0';
+            li.style.padding = '8px';
+            li.style.borderRadius = '5px';
+            li.style.display = 'flex';
+            li.style.justifyContent = 'space-between';
+            li.style.alignItems = 'center';
+            
+            li.innerHTML = `
+                <span>${item}</span>
+                <span onclick="removeSubcat(${index})" style="cursor: pointer; color: #e74c3c; font-weight: bold; padding: 0 5px;">&times;</span>
+            `;
+            list.appendChild(li);
+        });
+    }
+
+    function addSubcat() {
+        const input = document.getElementById('newSubcat');
+        const val = input.value.trim();
+        if (val) {
+            subcategories.push(val);
+            input.value = '';
+            renderList();
+        }
+    }
+
+    function removeSubcat(index) {
+        subcategories.splice(index, 1);
+        renderList();
+    }
+    
+    function prepareSubcategories() {
+        document.getElementById('subcatsInput').value = subcategories.join(',');
+    }
+
+    // Render initially
+    renderList();
+</script>
+{% endblock %}