subcategories and editing for tasks

templates/dashboard.html

@@ -1,15 +1,20 @@
 {% extends "layout.html" %}
 {% block content %}
     <!-- Active Timer Section -->
-    {% if current_entry %}
-    <div class="card active-section">
-        <h3 style="text-align: center; color: {{ current_entry.activity_color }}">
-            Currently Tracking: {{ current_entry.activity_name }}
+    <div class="card active-section" id="activeSection" style="{% if not current_entry %}display:none;{% endif %}">
+        <h3 id="activeName" style="text-align: center; color: {{ current_entry.activity_color if current_entry else '#333' }}">
+            Currently Tracking: {{ current_entry.activity_name if current_entry else '' }}
         </h3>
         
-        {% if current_entry.note %}
-            <p style="text-align: center; color: #666; font-style: italic;">"{{ current_entry.note }}"</p>
-        {% endif %}
+        <div id="activeSubcatContainer" style="text-align: center; {% if not current_entry or not current_entry.subcategory %}display:none;{% endif %} margin: 0 auto 10px; display: table;">
+            <div id="activeSubcatDisplay" style="background: #eee; padding: 2px 10px; border-radius: 10px;">
+                {{ current_entry.subcategory if current_entry else '' }}
+            </div>
+        </div>
+        
+        <p id="activeNote" style="text-align: center; color: #666; font-style: italic; {% if not current_entry or not current_entry.note %}display:none;{% endif %}">
+            "{{ current_entry.note if current_entry else '' }}"
+        </p>
 
         <div class="timer-display" id="timer">00:00:00</div>
         
@@ -33,56 +38,58 @@
         <form action="{{ url_for('stop_timer') }}" method="POST" style="text-align: center;">
             <button type="submit" class="btn btn-danger" style="font-size: 1.2rem; width: 100%;">Stop Activity</button>
         </form>
+    </div>
 
-        <script>
-            // Timer Logic
-            const startTime = new Date("{{ current_entry.start_time }}").getTime();
+    <!-- Script for Timer -->
+    <script>
+        let startTime = {% if current_entry %}{{ current_entry.start_time.timestamp() * 1000 }}{% else %}null{% endif %};
+        let timerInterval;
+
+        function updateTimer() {
+            if (!startTime) return;
+            const now = new Date().getTime();
+            const diff = now - startTime;
             
-            function updateTimer() {
-                const now = new Date().getTime();
-                const diff = now - startTime;
-                
-                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-                const seconds = Math.floor((diff % (1000 * 60)) / 1000);
-                
-                document.getElementById("timer").innerHTML = 
+            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+            
+            const timerEl = document.getElementById("timer");
+            if (timerEl) {
+                timerEl.innerHTML = 
                     (hours < 10 ? "0" + hours : hours) + ":" +
                     (minutes < 10 ? "0" + minutes : minutes) + ":" +
                     (seconds < 10 ? "0" + seconds : seconds);
             }
-            setInterval(updateTimer, 1000);
-            updateTimer(); // run immediately
+        }
 
-            // AJAX for Tasks
-            function toggleTask(taskId, checkbox) {
-                const formData = new FormData();
-                formData.append('task_id', taskId);
-                formData.append('is_checked', checkbox.checked);
+        if (startTime) {
+            timerInterval = setInterval(updateTimer, 1000);
+            updateTimer(); 
+        }
+    </script>
+    <!-- End Script -->
 
-                fetch('/complete_task', { method: 'POST', body: formData })
-                .then(r => r.json())
-                .then(data => {
-                    const label = checkbox.nextElementSibling;
-                    if(checkbox.checked) {
-                        label.style.textDecoration = "line-through";
-                    } else {
-                        label.style.textDecoration = "none";
-                    }
-                });
-            }
-        </script>
-    </div>
-    {% endif %}
 
     <!-- Start Activity Section -->
-    <div class="activity-grid">
+    <div class="activity-grid" style="margin-top: 2rem;">
         {% for act in activities %}
-            <!-- Clicking opens a small modal or submits form directly. Let's do a form with a prompt for note -->
-            <div class="activity-card" 
-                 style="background-color: {{ act.color }}"
-                 onclick="startActivity('{{ act._id }}', '{{ act.name }}')">
-                <span>{{ act.name }}</span>
+            <div style="position: relative;">
+                <div class="activity-card" 
+                     style="background-color: {{ act.color }}"
+                     data-name="{{ act.name }}"
+                     data-id="{{ act._id }}"
+                     data-color="{{ act.color }}"
+                     data-subcategories='{{ act.subcategories|default([])|tojson }}'
+                     onclick="startActivityImmediate(this)">
+                    <span>{{ act.name }}</span>
+                </div>
+                <!-- Small Edit Link -->
+                <a href="{{ url_for('edit_activity', activity_id=act._id) }}" 
+                   style="position: absolute; top: 5px; right: 5px; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.8rem; padding: 5px;"
+                   title="Edit Activity">
+                    Edit
+                </a>
             </div>
         {% endfor %}
         
@@ -93,19 +100,89 @@
     </div>
 
     <!-- Hidden Form for Starting Activity with Note -->
-    <form id="startForm" method="POST" style="display:none;">
-        <input type="hidden" name="note" id="startNote">
-    </form>
+    
+    <!-- Custom Start Modal -->
+    <div id="startModal" style="display:none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;">
+        <div class="card" style="width: 90%; max-width: 400px;">
+            <h3 id="modalTitle">Activity Started</h3>
+            
+            <form id="startForm" action="{{ url_for('update_active_entry') }}" method="POST">
+                
+                <div id="subcategoryContainer" style="display: none; margin-bottom: 1rem;">
+                    <label>Subcategory / Context</label>
+                    <select name="subcategory" id="modalSubcatSelect" style="width: 100%; padding: 0.5rem;">
+                        <option value="">-- None --</option>
+                    </select>
+                </div>
+
+                <label>Note (Optional)</label>
+                <input type="text" name="note" placeholder="What are you working on?" autocomplete="off">
+                
+                <div style="margin-top: 1rem; display: flex; justify-content: space-between;">
+                    <!-- Cancel just closes modal, timer keeps running -->
+                    <button type="button" class="btn" style="background: #95a5a6;" onclick="document.getElementById('startModal').style.display='none'">Skip</button>
+                    <button type="submit" class="btn" style="background: #27ae60;">Update Details</button>
+                </div>
+            </form>
+        </div>
+    </div>
 
     <script>
-        function startActivity(id, name) {
-            let note = prompt("Start " + name + "?\nAdd a note (optional):");
-            if (note === null) return; // Cancelled
+        function startActivityImmediate(element) {
+            const id = element.getAttribute('data-id');
+            const name = element.getAttribute('data-name');
+            const color = element.getAttribute('data-color');
+            const subcats = JSON.parse(element.getAttribute('data-subcategories') || '[]');
             
-            let form = document.getElementById('startForm');
-            form.action = "/toggle_timer/" + id;
-            document.getElementById('startNote').value = note;
-            form.submit();
+            // 1. Start Background Timer
+            fetch('/start_timer_bg/' + id, { method: 'POST' })
+            .then(res => res.json())
+            .then(data => {
+                if(data.status === 'success') {
+                    // 2. Start Local Timer UI
+                    startTime = new Date(data.start_time).getTime();
+                    clearInterval(timerInterval);
+                    timerInterval = setInterval(updateTimer, 1000);
+                    updateTimer();
+
+                    // Update UI State
+                    document.getElementById('activeSection').style.display = 'block';
+                    document.getElementById('activeName').innerText = "Currently Tracking: " + name;
+                    document.getElementById('activeName').style.color = color;
+                    
+                    // Reset Note/Subcat display
+                    document.getElementById('activeNote').style.display = 'none';
+                    document.getElementById('activeSubcatContainer').style.display = 'none';
+
+                    // 3. Open Modal for Details
+                    openDetailsModal(name, subcats);
+                }
+            });
+        }
+
+        function openDetailsModal(name, subcats) {
+            document.getElementById('modalTitle').innerText = name + " Started";
+            
+            // Setup Subcategories
+            const subcatContainer = document.getElementById('subcategoryContainer');
+            const select = document.getElementById('modalSubcatSelect');
+            select.innerHTML = '<option value="">-- None --</option>'; 
+            
+            if (subcats && subcats.length > 0) {
+                subcatContainer.style.display = 'block';
+                subcats.forEach(sc => {
+                    const opt = document.createElement('option');
+                    opt.value = sc;
+                    opt.innerText = sc;
+                    select.appendChild(opt);
+                });
+            } else {
+                subcatContainer.style.display = 'none';
+            }
+            
+            // Show Modal
+            document.getElementById('startModal').style.display = 'flex';
+            document.querySelector('#startForm input[name="note"]').focus();
         }
     </script>
 

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 %}

templates/logbook.html

@@ -10,7 +10,14 @@
             <div class="card" style="border-left: 5px solid {{ entry.activity.color }}; transition: transform 0.1s;">
                 <div style="display: flex; justify-content: space-between; align-items: center;">
                     <div>
-                        <h3 style="margin: 0;">{{ entry.activity.name }}</h3>
+                        <h3 style="margin: 0;">
+                            {{ entry.activity.name }}
+                            {% if entry.subcategory %}
+                                <span style="font-size: 0.8rem; background: #eee; padding: 2px 8px; border-radius: 10px; color: #555; vertical-align: middle;">
+                                    {{ entry.subcategory }}
+                                </span>
+                            {% endif %}
+                        </h3>
                         <small style="color: #666;">
                             {{ entry.start_time.strftime('%Y-%m-%d %H:%M') }} - {{ entry.end_time.strftime('%H:%M') }}
                         </small>

templates/logbook_detail.html

@@ -3,11 +3,16 @@
 <div class="card" style="border-left: 5px solid {{ entry.activity.color }};">
     <div style="display: flex; justify-content: space-between; align-items: start;">
         <div>
-            <h2>{{ entry.activity.name }}</h2>
+            <h2>
+                {{ entry.activity.name }}
+                {% if entry.subcategory %}
+                <span style="font-size: 0.8rem; background: #eee; padding: 2px 8px; border-radius: 10px; color: #555; vertical-align: middle;">
+                    {{ entry.subcategory }}
+                </span>
+                {% endif %}
+            </h2>
             <p style="color: #666;">
-                {{ entry.start_time.strftime('%A, %d. %B %Y') }}<br>
-                {{ entry.start_time.strftime('%H:%M') }} 
-                {% if entry.end_time %} - {{ entry.end_time.strftime('%H:%M') }} {% endif %}
+                {{ entry.start_time.strftime('%A, %d. %B %Y') }}
             </p>
         </div>
         <div style="text-align: right;">
@@ -18,13 +23,36 @@
 </div>
 
 <div class="card">
-    <h3>Session Notes</h3>
+    <h3>Edit Entry</h3>
     <form method="POST">
-        <textarea name="note" rows="4" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-family: inherit;">{{ entry.note }}</textarea>
-        <div style="margin-top: 10px; text-align: right;">
-            <button type="submit" class="btn">Update Note</button>
+        <input type="hidden" name="action" value="update">
+        
+        <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
+            <div style="flex: 1;">
+                <label>Start Time</label>
+                <input type="datetime-local" name="start_time" value="{{ entry.start_time.strftime('%Y-%m-%dT%H:%M') }}" required>
+            </div>
+            <div style="flex: 1;">
+                <label>End Time</label>
+                <!-- If currently running (end_time is None), prevent editing end time or handle appropriately. Usually logbook is for past entries. -->
+                <input type="datetime-local" name="end_time" value="{{ entry.end_time.strftime('%Y-%m-%dT%H:%M') if entry.end_time else '' }}">
+            </div>
+        </div>
+
+        <label>Note</label>
+        <textarea name="note" rows="3" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-family: inherit;">{{ entry.note }}</textarea>
+        
+        <div style="margin-top: 10px; display: flex; justify-content: space-between;">
+            <button type="submit" class="btn">Save Changes</button>
         </div>
     </form>
+    
+    <div style="border-top: 1px solid #eee; margin-top: 2rem; padding-top: 1rem;">
+        <form method="POST" onsubmit="return confirm('Are you sure you want to delete this entry? This action cannot be undone.');">
+            <input type="hidden" name="action" value="delete">
+            <button type="submit" class="btn btn-danger">Delete Entry</button>
+        </form>
+    </div>
 </div>
 
 <div class="card">
@@ -36,7 +64,7 @@
         {% for task in tasks %}
             <li style="border-bottom: 1px solid #eee; padding: 15px 0; display: flex; align-items: center;">
                 <span style="margin-right: 15px; font-size: 1.2rem;">
-                    {% if task.status == 'completed' %}✅{% else %}⬜{% endif %}
+                    {% if task.status == 'completed' %}Done{% else %}Open{% endif %}
                 </span>
                 <div style="flex-grow: 1;">
                     <a href="{{ url_for('task_detail', task_id=task._id) }}" style="font-weight: bold; display: block; font-size: 1.1rem;">{{ task.name }}</a>

templates/task_detail.html

@@ -15,7 +15,7 @@
             <form action="{{ url_for('toggle_timer', activity_id=task.activity_id) }}" method="POST" style="margin-top: 10px;">
                 <input type="hidden" name="note" value="{{ task.name }}">
                 <button type="submit" class="btn" style="background: #27ae60;">
-                    ▶ Start Timer for this Task
+                    Start Timer
                 </button>
             </form>
             {% else %}

templates/tasks.html

@@ -55,7 +55,7 @@
                                     <!-- Automatically use the task name as the session note -->
                                     <input type="hidden" name="note" value="{{ task.name }}">
                                     <button type="submit" class="btn" style="padding: 2px 8px; font-size: 0.8rem; background: #27ae60;" title="Start Timer for this Task">
-                                        ▶ Start
+                                        Start
                                     </button>
                                 </form>
                                 {% endif %}