logbook search
This commit is contained in:
@@ -1,19 +1,29 @@
|
||||
{% extends "layout.html" %}
|
||||
{% block content %}
|
||||
<h2>Logbook</h2>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
|
||||
<h2 style="margin: 0;">Logbook</h2>
|
||||
</div>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div style="margin-bottom: 2rem;">
|
||||
<input type="text" id="logSearchInput" placeholder="Search logbook (Activity, Subcategory, Notes)..." onkeyup="filterLog()"
|
||||
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>
|
||||
|
||||
{% if not log %}
|
||||
<p>No activities recorded yet.</p>
|
||||
{% else %}
|
||||
<div id="logbook-container">
|
||||
{% for entry in log %}
|
||||
<!-- Wrapped whole card in a link to the detail view -->
|
||||
<a href="{{ url_for('log_entry_detail', entry_id=entry._id) }}" style="text-decoration: none; color: inherit; display: block;">
|
||||
<a href="{{ url_for('log_entry_detail', entry_id=entry._id) }}" class="log-entry-item" style="text-decoration: none; color: inherit; display: block;">
|
||||
<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;">
|
||||
<h3 style="margin: 0;" class="entry-title">
|
||||
{{ 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;">
|
||||
<span class="entry-subcat" style="font-size: 0.8rem; background: #eee; padding: 2px 8px; border-radius: 10px; color: #555; vertical-align: middle;">
|
||||
{{ entry.subcategory }}
|
||||
</span>
|
||||
{% endif %}
|
||||
@@ -22,7 +32,10 @@
|
||||
{{ entry.start_time.strftime('%Y-%m-%d %H:%M') }} - {{ entry.end_time.strftime('%H:%M') }}
|
||||
</small>
|
||||
{% if entry.note %}
|
||||
<p style="margin: 5px 0; font-style: italic; color: #555;">"{{ entry.note }}"</p>
|
||||
<p class="entry-note" style="margin: 5px 0; font-style: italic; color: #555;">"{{ entry.note }}"</p>
|
||||
{% else %}
|
||||
<!-- Hidden span for consistent JS selection if note empty -->
|
||||
<span class="entry-note" style="display:none;"></span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="font-weight: bold; font-size: 1.2rem;">
|
||||
@@ -43,8 +56,30 @@
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
function filterLog() {
|
||||
const input = document.getElementById('logSearchInput');
|
||||
const filter = input.value.toLowerCase();
|
||||
const items = document.getElementsByClassName('log-entry-item');
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const title = items[i].querySelector('.entry-title').textContent || "";
|
||||
const note = items[i].querySelector('.entry-note').textContent || "";
|
||||
// Combine text content for searching
|
||||
const textValue = (title + " " + note).toLowerCase();
|
||||
|
||||
if (textValue.indexOf(filter) > -1) {
|
||||
items[i].style.display = "";
|
||||
} else {
|
||||
items[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Small hover effect to indicate clickability */
|
||||
a .card:hover {
|
||||
|
||||
Reference in New Issue
Block a user