logbook search
This commit is contained in:
@@ -8,15 +8,21 @@
|
||||
<button class="btn" onclick="openTaskModal()">+ New Task</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<input type="text" id="taskSearchInput" placeholder="Search tasks..." onkeyup="applyFilters()"
|
||||
style="background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%23999%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: 10px center; background-size: 16px; padding-left: 36px;">
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div style="border-bottom: 1px solid var(--border-dim); margin-bottom: 2rem; padding-bottom: 0.5rem; display: flex; gap: 20px;">
|
||||
<div class="filter-tab active" id="filter-open" onclick="setFilter('open')" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-primary);">
|
||||
<div class="filter-tab active" id="filter-open" onclick="setFilter('open')" data-filter="open" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-primary);">
|
||||
Open
|
||||
</div>
|
||||
<div class="filter-tab" id="filter-today" onclick="setFilter('today')" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary);">
|
||||
<div class="filter-tab" id="filter-today" onclick="setFilter('today')" data-filter="today" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary);">
|
||||
Due Today
|
||||
</div>
|
||||
<div class="filter-tab" id="filter-completed" onclick="setFilter('completed')" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary);">
|
||||
<div class="filter-tab" id="filter-completed" onclick="setFilter('completed')" data-filter="completed" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary);">
|
||||
Completed
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,38 +47,37 @@
|
||||
title="Add task to {{ act.name }}">+</button>
|
||||
</div>
|
||||
|
||||
{% if act_tasks %}
|
||||
<ul style="list-style: none; padding: 0; margin-top: 0;">
|
||||
{% for task in act_tasks %}
|
||||
<!-- Inline Task Row -->
|
||||
<li class="task-item-row"
|
||||
data-due-date="{{ task.due_date.strftime('%Y-%m-%d') if task.due_date else '' }}"
|
||||
data-status="{{ task.status }}"
|
||||
style="padding: 8px 0; border-bottom: 1px solid var(--border-dim); display: flex; justify-content: space-between; align-items: center;">
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 10px; overflow: hidden;">
|
||||
<a href="{{ url_for('task_detail', task_id=task._id) }}" style="text-decoration: none; color: var(--text-primary); font-weight: 500; {% if task.status == 'completed' %}text-decoration: line-through; color: var(--text-secondary);{% endif %}">
|
||||
{{ task.name }}
|
||||
</a>
|
||||
{% if task.due_date %}
|
||||
<span style="font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-input); padding: 2px 6px; border-radius: 4px;">
|
||||
{{ task.due_date.strftime('%d. %b %H:%M') }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<form action="{{ url_for('toggle_timer', activity_id=task.activity_id) }}" method="POST" style="margin: 0;">
|
||||
<input type="hidden" name="note" value="{{ task.name }}">
|
||||
<button type="submit" title="Start Timer" style="background: none; border: 1px solid var(--border-dim); cursor: pointer; border-radius: 4px; padding: 2px 6px; color: var(--text-secondary); font-size: 0.8rem;">
|
||||
▶
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
<!-- Always render the UL, just empty if no tasks initially -->
|
||||
<ul style="list-style: none; padding: 0; margin-top: 0;">
|
||||
{% for task in act_tasks %}
|
||||
<!-- Inline Task Row -->
|
||||
<li class="task-item-row"
|
||||
data-due-date="{{ task.due_date.strftime('%Y-%m-%d') if task.due_date else '' }}"
|
||||
data-status="{{ task.status }}"
|
||||
style="padding: 8px 0; border-bottom: 1px solid var(--border-dim); display: flex; justify-content: space-between; align-items: center;">
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 10px; overflow: hidden;">
|
||||
<a href="{{ url_for('task_detail', task_id=task._id) }}" class="task-name-link" style="text-decoration: none; color: var(--text-primary); font-weight: 500; {% if task.status == 'completed' %}text-decoration: line-through; color: var(--text-secondary);{% endif %}">
|
||||
{{ task.name }}
|
||||
</a>
|
||||
{% if task.due_date %}
|
||||
<span style="font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-input); padding: 2px 6px; border-radius: 4px;">
|
||||
{{ task.due_date.strftime('%d. %b %H:%M') }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<form action="{{ url_for('toggle_timer', activity_id=task.activity_id) }}" method="POST" style="margin: 0;">
|
||||
<input type="hidden" name="note" value="{{ task.name }}">
|
||||
<button type="submit" title="Start Timer" style="background: none; border: 1px solid var(--border-dim); cursor: pointer; border-radius: 4px; padding: 2px 6px; color: var(--text-secondary); font-size: 0.8rem;">
|
||||
▶
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
@@ -204,7 +209,11 @@
|
||||
});
|
||||
|
||||
// Filtering Logic
|
||||
let currentFilterType = 'open';
|
||||
|
||||
function setFilter(type) {
|
||||
currentFilterType = type;
|
||||
|
||||
document.querySelectorAll('.filter-tab').forEach(el => {
|
||||
el.style.color = 'var(--text-secondary)';
|
||||
el.classList.remove('active');
|
||||
@@ -212,28 +221,37 @@
|
||||
document.getElementById('filter-' + type).style.color = 'var(--text-primary)';
|
||||
document.getElementById('filter-' + type).classList.add('active');
|
||||
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
const searchVal = document.getElementById('taskSearchInput').value.toLowerCase();
|
||||
const taskItems = document.querySelectorAll('.task-item-row');
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
|
||||
taskItems.forEach(item => {
|
||||
const status = item.getAttribute('data-status');
|
||||
const dateStr = item.getAttribute('data-due-date');
|
||||
const name = item.querySelector('.task-name-link').innerText.toLowerCase();
|
||||
|
||||
let show = false;
|
||||
|
||||
if (type === 'open') {
|
||||
// 1. Check Tabs
|
||||
if (currentFilterType === 'open') {
|
||||
if (status !== 'completed') show = true;
|
||||
} else if (type === 'today') {
|
||||
// Open tasks due today
|
||||
} else if (currentFilterType === 'today') {
|
||||
if (status !== 'completed' && dateStr && dateStr.startsWith(today)) show = true;
|
||||
} else if (type === 'completed') {
|
||||
} else if (currentFilterType === 'completed') {
|
||||
if (status === 'completed') show = true;
|
||||
}
|
||||
|
||||
// 2. Check Search
|
||||
if (show && searchVal) {
|
||||
if (!name.includes(searchVal)) show = false;
|
||||
}
|
||||
|
||||
item.style.display = show ? 'flex' : 'none';
|
||||
});
|
||||
|
||||
// Removed the group hiding logic block here to ensure Activity headers always stay visible
|
||||
}
|
||||
|
||||
// Initialize filter
|
||||
|
||||
Reference in New Issue
Block a user