This commit is contained in:
2025-06-27 17:43:50 -05:00
parent 00fd49c79b
commit 13d56066ab
22 changed files with 1500 additions and 497 deletions

View File

@ -40,44 +40,74 @@ def inject_image_helper():
@bp.route('/', methods=['GET'])
@login_required
def index():
plants = (
# ── 1) Read query-params ───────────────────────────────────────────
page = request.args.get('page', 1, type=int)
per_page = request.args.get(
'per_page',
current_app.config.get('PLANTS_PER_PAGE', 12),
type=int
)
view_mode = request.args.get('view', 'grid', type=str) # 'grid' or 'list'
q = request.args.get('q', '', type=str).strip()
type_filter= request.args.get('type', '', type=str).strip().lower()
# ── 2) Build base SQLAlchemy query ────────────────────────────────
qry = (
Plant.query
.options(joinedload(Plant.media_items))
.filter_by(owner_id=current_user.id)
.order_by(Plant.id.desc())
.all()
.options(joinedload(Plant.media_items))
.filter_by(owner_id=current_user.id)
)
user_plants_count = Plant.query.filter_by(owner_id=current_user.id).count()
user_images_count = Media.query.filter_by(uploader_id=current_user.id).count()
total_plants_count = Plant.query.count()
total_images_count = Media.query.count()
# ── 3) Optional name search ───────────────────────────────────────
if q:
qry = qry.join(PlantCommonName).filter(
PlantCommonName.name.ilike(f'%{q}%')
)
# ── 4) Optional type filter ───────────────────────────────────────
if type_filter:
qry = qry.filter(Plant.plant_type.ilike(type_filter))
# ── 5) Apply ordering + paginate ─────────────────────────────────
pagination = (
qry.order_by(Plant.id.desc())
.paginate(page=page, per_page=per_page, error_out=False)
)
plants = pagination.items
# ── 6) Gather stats and distinct types as before ─────────────────
stats = {
'user_plants': Plant.query.filter_by(owner_id=current_user.id).count(),
'user_images': Media.query.filter_by(uploader_id=current_user.id).count(),
'total_plants': Plant.query.count(),
'total_images': Media.query.count(),
}
plant_types = [
pt[0]
for pt in (
db.session.query(Plant.plant_type)
.filter_by(owner_id=current_user.id)
.distinct()
.all()
row[0]
for row in (
db.session
.query(Plant.plant_type)
.filter_by(owner_id=current_user.id)
.distinct()
.all()
)
]
stats = {
'user_plants': user_plants_count,
'user_images': user_images_count,
'total_plants': total_plants_count,
'total_images': total_images_count,
}
# ── 7) Render, passing both pagination AND per-page items ─────────
return render_template(
'plant/index.html',
plants=plants,
plant_types=plant_types,
stats=stats,
plants = plants,
pagination = pagination,
view_mode = view_mode,
q = q,
type_filter = type_filter,
per_page = per_page,
plant_types = plant_types,
stats = stats
)
@bp.route('/', methods=['GET', 'POST'])
@bp.route('/create', methods=['GET', 'POST'])
@login_required
def create():
form = PlantForm()

View File

@ -14,7 +14,114 @@
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Stats container (desktop only, collapsed by default) -->
<h2 class="mb-4">View Entries</h2>
{# ── Import / Export, Stats, Filters & View Toggle ─────────────────────── #}
<div class="mb-3 d-flex flex-wrap justify-content-between align-items-center">
<!-- Left: import/export & stats toggle -->
<div class="d-flex align-items-center mb-2">
<button class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#importModal">
Import CSV
</button>
<a href="{{ url_for('utility.export_data') }}" class="btn btn-secondary me-2">
Export My Data
</a>
<button
class="btn btn-secondary me-2 d-inline-block d-md-none"
data-bs-toggle="modal"
data-bs-target="#statsModal">
Stats
</button>
<button
class="btn btn-secondary me-2 d-none d-md-inline-block"
data-bs-toggle="collapse"
data-bs-target="#statsBox"
aria-expanded="false"
aria-controls="statsBox"
id="statsToggle">
Stats <i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Right: filter form + view toggle -->
<form
method="get"
action="{{ url_for('plant.index') }}"
class="d-flex flex-wrap align-items-center mb-2"
>
<div class="input-group me-2" style="min-width:200px;">
<span class="input-group-text">Search</span>
<input
type="search"
name="q"
value="{{ q }}"
class="form-control"
placeholder="by name…"
/>
</div>
<select
name="type"
class="form-select me-2"
style="min-width:140px;"
onchange="this.form.submit()"
>
<option value="">All Types</option>
{% for t in plant_types %}
<option
value="{{ t|lower }}"
{% if t|lower == type_filter %}selected{% endif %}
>{{ t }}</option>
{% endfor %}
</select>
<select
name="per_page"
class="form-select me-2"
style="min-width:140px;"
onchange="this.form.submit()"
>
{% for size in [6,12,18,24] %}
<option value="{{ size }}" {% if per_page == size %}selected{% endif %}>
{{ size }} per page
</option>
{% endfor %}
</select>
{# keep the current view so Apply doesnt reset it #}
<input type="hidden" name="view" value="{{ view_mode }}" />
<button type="submit" class="btn btn-primary me-2">Apply</button>
<div class="btn-group" role="group" aria-label="View mode">
<a
href="{{ url_for('plant.index',
page=pagination.page,
per_page=per_page,
q=q,
type=type_filter,
view='grid'
) }}"
class="btn btn-outline-secondary {% if view_mode=='grid' %}active{% endif %}"
title="Card View"
><i class="bi bi-grid-3x3-gap-fill"></i></a>
<a
href="{{ url_for('plant.index',
page=pagination.page,
per_page=per_page,
q=q,
type=type_filter,
view='list'
) }}"
class="btn btn-outline-secondary {% if view_mode=='list' %}active{% endif %}"
title="List View"
><i class="bi bi-list-ul"></i></a>
</div>
</form>
</div>
<!-- Stats container (desktop only) -->
<div class="collapse mb-3" id="statsBox">
<div class="d-none d-md-block p-3 bg-light border rounded">
<h5 class="text-center">Statistics</h5>
@ -95,214 +202,168 @@
</div>
</div>
<h2>View Entries</h2>
<!-- Import / Export & Filter bar -->
<div class="mb-3 d-flex flex-wrap justify-content-between align-items-center">
<div class="mb-2 d-flex align-items-center">
<button class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#importModal">
Import CSV
</button>
<a href="{{ url_for('utility.export_data') }}" class="btn btn-secondary me-2">Export My Data</a>
<button
class="btn btn-secondary me-2 d-inline-block d-md-none"
data-bs-toggle="modal"
data-bs-target="#statsModal">
Stats
</button>
<button
class="btn btn-secondary me-2 d-none d-md-inline-block"
data-bs-toggle="collapse"
data-bs-target="#statsBox"
aria-expanded="false"
aria-controls="statsBox"
id="statsToggle">
Stats <i class="bi bi-chevron-down"></i>
</button>
</div>
<div class="d-flex flex-wrap flex-md-nowrap align-items-center">
<div class="input-group me-2 mb-2 mb-md-0" style="min-width:200px;">
<span class="input-group-text">Search</span>
<input id="searchInput" type="text" class="form-control" placeholder="by name…">
</div>
<select id="typeFilter" class="form-select me-2 mb-2 mb-md-0" style="min-width:140px;">
<option value="">All Types</option>
{% for t in plant_types %}
<option value="{{ t|lower }}">{{ t }}</option>
{% endfor %}
</select>
<select id="pageSizeSelect" class="form-select me-2 mb-2 mb-md-0" style="min-width:140px;">
{% for size in [6,12,18,24] %}
<option value="{{ size }}" {% if size == 12 %}selected{% endif %}>
{{ size }} per page
</option>
{% endfor %}
</select>
</div>
</div>
<!-- Plant cards -->
<div class="row row-cols-1 row-cols-lg-3 g-3" id="plantContainer">
{% for plant in plants %}
<div class="col plant-card"
data-name="{{ plant.common_name.name|lower }}"
data-type="{{ plant.plant_type|lower }}">
<div class="card h-100">
{# Determine featured image: first any marked featured, else first media #}
{% set featured = plant.media|selectattr('featured')|first %}
{% if not featured and plant.media %}
{% set featured = plant.media[0] %}
{% endif %}
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}">
<img
src="{{ generate_image_url(featured) }}"
class="card-img-top"
style="height:200px;object-fit:cover;"
alt="Image for {{ plant.common_name.name }}">
</a>
<div class="card-body d-flex flex-column">
<h5 class="card-title">
{# ── Results (list vs grid) ──────────────────────────────────────────── #}
{% if view_mode=='list' %}
<div class="list-group">
{% for plant in plants %}
<div class="list-group-item py-3">
<div class="row align-items-center">
<div class="col-auto">
{%- set f = (plant.media_items|selectattr('featured')|first)
or (plant.media_items|first) -%}
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}">
{{ plant.common_name.name }}
<img
src="{{ generate_image_url(f) }}"
class="img-thumbnail"
style="width:80px;height:80px;object-fit:cover;"
alt="Image for {{ plant.common_name.name }}"
>
</a>
</h5>
<h6 class="text-muted">{{ plant.uuid }}</h6>
<p class="mb-1"><strong>Type:</strong> {{ plant.plant_type }}</p>
<p class="mb-1"><strong>Scientific Name:</strong> {{ plant.scientific_name.name }}</p>
{% if plant.mother_uuid %}
<p class="mb-1">
<strong>Mother:</strong>
<a href="{{ url_for('plant.detail', uuid_val=plant.mother_uuid) }}">
{{ plant.mother_uuid }}
</div>
<div class="col">
<h5 class="mb-1">
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}">
{{ plant.common_name.name }}
</a>
</p>
{% endif %}
<div class="mt-auto">
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}"
class="btn btn-sm btn-primary me-1">View</a>
<a href="{{ url_for('plant.edit', uuid_val=plant.uuid) }}"
class="btn btn-sm btn-secondary me-1">Edit</a>
<a href="{{ url_for('utility.download_qr', uuid_val=plant.uuid) }}"
class="btn btn-sm btn-outline-primary me-1">Direct QR</a>
<a href="{{ url_for('utility.download_qr_card', uuid_val=plant.uuid) }}"
class="btn btn-sm btn-outline-secondary">Card QR</a>
</h5>
<small class="text-muted">{{ plant.uuid }}</small>
<div class="mt-1">
<span class="badge bg-secondary">{{ plant.plant_type }}</span>
</div>
</div>
<div class="col-auto text-nowrap">
<a
href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}"
class="btn btn-sm btn-primary me-1"
>View</a>
<a
href="{{ url_for('plant.edit', uuid_val=plant.uuid) }}"
class="btn btn-sm btn-secondary"
>Edit</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% else %}
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
{% for plant in plants %}
<div class="col">
<div class="card h-100">
{%- set f = (plant.media_items|selectattr('featured')|first)
or (plant.media_items|first) -%}
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}">
<img
src="{{ generate_image_url(f) }}"
class="card-img-top"
style="height:200px;object-fit:cover;"
alt="Image for {{ plant.common_name.name }}"
>
</a>
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-1">
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}">
{{ plant.common_name.name }}
</a>
</h5>
<small class="text-muted mb-2">{{ plant.uuid }}</small>
<div class="mt-auto">
<a
href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}"
class="btn btn-sm btn-primary me-1"
>View</a>
<a
href="{{ url_for('plant.edit', uuid_val=plant.uuid) }}"
class="btn btn-sm btn-secondary"
>Edit</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
<!-- pagination controls -->
<nav aria-label="Page navigation" class="mt-4 mb-5">
<ul class="pagination justify-content-center" id="pagination"></ul>
{# ── Pagination ─────────────────────────────────────────────────────── #}
<nav aria-label="Page navigation" class="mt-4">
<ul class="pagination justify-content-center">
<li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
<a
class="page-link"
href="{{ url_for('plant.index',
page=1,
per_page=per_page,
q=q,
type=type_filter,
view=view_mode
) }}"
>« First</a>
</li>
<li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
<a
class="page-link"
href="{{ url_for('plant.index',
page=pagination.prev_num or 1,
per_page=per_page,
q=q,
type=type_filter,
view=view_mode
) }}"
> Prev</a>
</li>
{% set total = pagination.pages %}
{% set curr = pagination.page %}
{% set w = 3 %}
{% for p in range(1, total+1) %}
{% if p <= w or p > total-w or (p >= curr-1 and p <= curr+1) %}
<li class="page-item {% if p==curr %}active{% endif %}">
<a
class="page-link"
href="{{ url_for('plant.index',
page=p,
per_page=per_page,
q=q,
type=type_filter,
view=view_mode
) }}"
>{{ p }}</a>
</li>
{% elif p == w+1 or p == total-w %}
<li class="page-item disabled"><span class="page-link"></span></li>
{% endif %}
{% endfor %}
<li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
<a
class="page-link"
href="{{ url_for('plant.index',
page=pagination.next_num or total,
per_page=per_page,
q=q,
type=type_filter,
view=view_mode
) }}"
>Next </a>
</li>
<li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
<a
class="page-link"
href="{{ url_for('plant.index',
page=total,
per_page=per_page,
q=q,
type=type_filter,
view=view_mode
) }}"
>Last »</a>
</li>
</ul>
</nav>
{% endblock %}
<!-- client-side filtering & pagination script -->
<script>
(function() {
const searchInput = document.getElementById('searchInput');
const typeFilter = document.getElementById('typeFilter');
const pageSizeSelect = document.getElementById('pageSizeSelect');
const container = document.getElementById('plantContainer');
const pagination = document.getElementById('pagination');
const cards = Array.from(container.querySelectorAll('.plant-card'));
let currentPage = 1;
let pageSize = parseInt(pageSizeSelect.value, 10);
function filterAndPaginate() {
const q = searchInput.value.trim().toLowerCase();
const type = typeFilter.value;
const filtered = cards.filter(card => {
return card.dataset.name.includes(q) &&
(!type || card.dataset.type === type);
});
const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
if (currentPage > totalPages) currentPage = totalPages;
cards.forEach(c => c.style.display = 'none');
const start = (currentPage - 1) * pageSize;
filtered.slice(start, start + pageSize)
.forEach(c => c.style.display = '');
pagination.innerHTML = '';
// Prev button
const prevLi = document.createElement('li');
prevLi.className = 'page-item' + (currentPage === 1 ? ' disabled' : '');
prevLi.innerHTML = `<a class="page-link" href="#">Prev</a>`;
prevLi.onclick = e => {
e.preventDefault();
if (currentPage > 1) { currentPage--; filterAndPaginate(); }
};
pagination.appendChild(prevLi);
// Page numbers
if (totalPages <= 5) {
for (let i = 1; i <= totalPages; i++) {
const li = document.createElement('li');
li.className = 'page-item' + (i === currentPage ? ' active' : '');
li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
li.onclick = e => {
e.preventDefault();
currentPage = i;
filterAndPaginate();
};
pagination.appendChild(li);
}
} else {
[1,2,3].forEach(n => {
const li = document.createElement('li');
li.className = 'page-item' + (n === currentPage ? ' active' : '');
li.innerHTML = `<a class="page-link" href="#">${n}</a>`;
li.onclick = e => {
e.preventDefault();
currentPage = n;
filterAndPaginate();
};
pagination.appendChild(li);
});
const ell = document.createElement('li');
ell.className = 'page-item disabled';
ell.innerHTML = `<span class="page-link">…</span>`;
pagination.appendChild(ell);
const lastLi = document.createElement('li');
lastLi.className = 'page-item' + (totalPages === currentPage ? ' active' : '');
lastLi.innerHTML = `<a class="page-link" href="#">${totalPages}</a>`;
lastLi.onclick = e => {
e.preventDefault();
currentPage = totalPages;
filterAndPaginate();
};
pagination.appendChild(lastLi);
}
// Next button
const nextLi = document.createElement('li');
nextLi.className = 'page-item' + (currentPage === totalPages ? ' disabled' : '');
nextLi.innerHTML = `<a class="page-link" href="#">Next</a>`;
nextLi.onclick = e => {
e.preventDefault();
if (currentPage < totalPages) { currentPage++; filterAndPaginate(); }
};
pagination.appendChild(nextLi);
}
// Initialize and bind events
filterAndPaginate();
searchInput.addEventListener('input', () => { currentPage = 1; filterAndPaginate(); });
typeFilter.addEventListener('change', () => { currentPage = 1; filterAndPaginate(); });
pageSizeSelect.addEventListener('change',() => {
pageSize = parseInt(pageSizeSelect.value, 10);
currentPage = 1; filterAndPaginate();
});
})();
</script>
{% block scripts %}
{{ super() }}
<script>
// Toggle chevron icon on desktop collapse
const statsBox = document.getElementById('statsBox');