lilfade/natureinpots_community
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more, view and edit broken

Browse Source
This commit is contained in:
Bryson Shepard
2025-06-11 05:23:52 -05:00
parent 38cf4d962d
commit e7a0f5b1be
38 changed files with 1008 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
plugins/plant/templates/plant/index.html
View File

@ -1,129 +1,176 @@
{# plugins/plant/templates/plant/index.html #}
{% extends 'core_ui/base.html' %}
{% block title %}Plant List – Nature In Pots{% endblock %}
{% block content %}
<div class="container my-4">
<!-- Stats Section (responsive 2-col ↔ 1-col) -->
<div class="mb-4 p-3 bg-light border rounded">
<h5>Statistics</h5>
<div class="row row-cols-1 row-cols-md-2 g-3 mt-3 text-center">
<div class="col">
<div class="d-flex align-items-center justify-content-center">
<i class="bi bi-seedling fs-3 text-success me-3"></i>
<div>
<div class="small text-muted">Your plants</div>
<div class="fw-bold">{{ stats.user_plants }}</div>
</div>
</div>
</div>
<div class="col">
<div class="d-flex align-items-center justify-content-center">
<i class="bi bi-image fs-3 text-primary me-3"></i>
<div>
<div class="small text-muted">Your images</div>
<div class="fw-bold">{{ stats.user_images }}</div>
</div>
</div>
</div>
<div class="col">
<div class="d-flex align-items-center justify-content-center">
<i class="bi bi-tree fs-3 text-success me-3"></i>
<div>
<div class="small text-muted">Total plants</div>
<div class="fw-bold">{{ stats.total_plants }}</div>
</div>
</div>
</div>
<div class="col">
<div class="d-flex align-items-center justify-content-center">
<i class="bi bi-images fs-3 text-primary me-3"></i>
<div>
<div class="small text-muted">Total images</div>
<div class="fw-bold">{{ stats.total_images }}</div>
</div>
</div>
</div>
<div class="container mt-4">
<!-- Header + Add button -->
<div class="d-flex justify-content-between align-items-center mb-3">
<h1>My Plants</h1>
<a href="{{ url_for('plant.create') }}" class="btn btn-primary">
+ Add New Plant
</a>
</div>
<!-- Stats Panel -->
<div class="card mb-4">
<div class="card-header">
<a data-bs-toggle="collapse" href="#statsBox" aria-expanded="false">
Stats &nbsp;<i class="bi bi-chevron-down"></i>
</a>
</div>
<div class="collapse" id="statsBox">
<ul class="list-group list-group-flush">
{% for label, count in stats.items() %}
<li class="list-group-item d-flex justify-content-between">
<span>{{ label.replace('_',' ').title() }}</span>
<span>{{ count }}</span>
</li>
{% endfor %}
</ul>
</div>
</div>
<h1 class="mb-4">Plant List</h1>
<!-- Search & Add -->
<div class="mb-3 d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2">
<div>
<a href="{{ url_for('plant.create') }}" class="btn btn-success">Add New Plant</a>
<!-- 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">
<a href="{{ url_for('utility.upload') }}" class="btn btn-primary me-2">
Import CSV
</a>
<a href="{{ url_for('utility.export_data') }}" class="btn btn-secondary me-2">
Export My Data
</a>
</div>
<div class="input-group" style="max-width:300px; width:100%;">
<span class="input-group-text">Search</span>
<input id="searchInput" type="text" class="form-control" placeholder="by name…">
<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.replace('_',' ').title() }}</option>
{% endfor %}
</select>
<select id="pageSizeSelect" class="form-select 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>
{% if plants %}
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4" id="plantContainer">
{% for plant in plants %}
<div class="col plant-card" data-name="{{ plant.common_name.name|lower if plant.common_name else '' }}">
<div class="card h-100">
{# pick the featured media entry, or fall back to first item #}
{% set featured = plant.media
|selectattr('id','equalto', plant.featured_media_id)
|first %}
{% if not featured and plant.media %}
{% set featured = plant.media|first %}
{% endif %}
<!-- Plant Cards Container -->
<div class="row row-cols-1 row-cols-md-3 g-4" 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">
{% if featured %}
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}">
<img
src="{{ generate_image_url(featured.file_url) }}"
class="card-img-top"
style="height:200px;object-fit:cover;"
alt="Image for {{ plant.common_name.name if plant.common_name else 'Plant' }}">
</a>
{% else %}
{% if plant.media %}
{% set featured = plant.media|selectattr('featured')|first or plant.media[0] %}
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}">
<img
src="https://placehold.co/300x200"
src="{{ url_for('media.media_file', filename=featured.file_url) }}"
class="card-img-top"
style="height:200px;object-fit:cover;"
alt="No image available">
{% endif %}
style="height:200px; object-fit:cover;"
alt="{{ plant.common_name.name }}"
>
</a>
{% else %}
<!-- Placeholder when no media -->
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}">
<img
src="{{ generate_image_url(None) }}"
class="card-img-top"
style="height:200px; object-fit:cover;"
alt="Placeholder for {{ plant.common_name.name }}"
>
</a>
{% endif %}
<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 if plant.common_name else 'Untitled' }}
</a>
</h5>
<h6 class="text-muted small">{{ plant.uuid }}</h6>
<p class="mb-1"><strong>Type:</strong> {{ plant.plant_type }}</p>
<p class="mb-2"><strong>Scientific:</strong>
{{ plant.scientific_name.name if plant.scientific_name else '–' }}
</p>
<div class="mt-auto d-flex flex-wrap gap-1">
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}"
class="btn btn-sm btn-primary">View</a>
<a href="{{ url_for('plant.edit', uuid_val=plant.uuid) }}"
class="btn btn-sm btn-secondary">Edit</a>
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">{{ plant.common_name.name }}</h5>
<p class="card-text">{{ plant.plant_type.replace('_',' ').title() }}</p>
<div class="mt-auto">
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}"
class="btn btn-sm btn-outline-primary">View</a>
<a href="{{ url_for('plant.edit', uuid_val=plant.uuid) }}"
class="btn btn-sm btn-outline-secondary">Edit</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p>No plants found yet. <a href="{{ url_for('plant.create') }}">Add one now.</a></p>
{% endif %}
</div>
{% endfor %}
</div>
<!-- Pagination Controls -->
<nav aria-label="Page navigation" class="mt-4">
<ul class="pagination justify-content-center" id="pagination"></ul>
</nav>
</div>
<!-- Client-side filtering & pagination script -->
<script>
// client-side filtering
document.getElementById('searchInput').addEventListener('input', function() {
const q = this.value.trim().toLowerCase();
document.querySelectorAll('#plantContainer .plant-card').forEach(card => {
card.style.display = card.dataset.name.includes(q) ? '' : 'none';
(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(c => {
return c.dataset.name.includes(q) &&
(!type || c.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 = '';
const makeLi = (label, page, disabled) => {
const li = document.createElement('li');
li.className = 'page-item' + (disabled ? ' disabled' : '') + (page === currentPage ? ' active' : '');
li.innerHTML = `<a class="page-link" href="#">${label}</a>`;
if (!disabled) {
li.onclick = e => { e.preventDefault(); currentPage = page; filterAndPaginate(); };
}
return li;
};
pagination.appendChild(makeLi('Prev', Math.max(1, currentPage-1), currentPage===1));
for (let i = 1; i <= Math.min(5, totalPages); i++) {
pagination.appendChild(makeLi(i, i, false));
}
if (totalPages > 5) {
const ell = document.createElement('li');
ell.className = 'page-item disabled';
ell.innerHTML = `<span class="page-link">…</span>`;
pagination.appendChild(ell);
pagination.appendChild(makeLi(totalPages, totalPages, false));
}
pagination.appendChild(makeLi('Next', Math.min(totalPages, currentPage+1), currentPage===totalPages));
}
[searchInput, typeFilter].forEach(el => el.addEventListener('input', () => { currentPage = 1; filterAndPaginate(); }));
pageSizeSelect.addEventListener('change', () => {
pageSize = parseInt(pageSizeSelect.value, 10);
currentPage = 1;
filterAndPaginate();
});
filterAndPaginate();
})();
</script>
{% endblock %}