broke currently
This commit is contained in:
@ -1,4 +1,3 @@
|
||||
{# plugins/plant/templates/plant/detail.html #}
|
||||
{% extends 'core_ui/base.html' %}
|
||||
|
||||
{% block title %}
|
||||
@ -9,10 +8,9 @@
|
||||
<div class="container my-4">
|
||||
<div class="row gx-4">
|
||||
<div class="col-md-4">
|
||||
{# determine featured or fallback to first media item #}
|
||||
{% set featured = plant.featured_media or plant.media|first %}
|
||||
<img
|
||||
src="{{ generate_image_url(featured.file_url if featured else None) }}"
|
||||
src="{{ generate_image_url(featured) }}"
|
||||
alt="Image of {{ plant.common_name.name if plant.common_name else 'Plant' }}"
|
||||
class="img-fluid rounded shadow-sm"
|
||||
style="object-fit: cover; width: 100%; height: auto;"
|
||||
@ -61,7 +59,7 @@
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
{% for img in plant.media if img != featured %}
|
||||
<img
|
||||
src="{{ generate_image_url(img.file_url) }}"
|
||||
src="{{ generate_image_url(img) }}"
|
||||
alt="Plant image"
|
||||
class="img-thumbnail"
|
||||
style="height: 160px; object-fit: cover;"
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
<div class="container mt-4">
|
||||
<h2>Edit Plant</h2>
|
||||
|
||||
{# ─── Main plant‐data form ──────────────────────────────────────────── #}
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
@ -13,37 +12,38 @@
|
||||
{{ form.plant_type.label(class="form-label") }}
|
||||
{{ form.plant_type(class="form-select") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.common_name.label(class="form-label") }}
|
||||
{{ form.common_name(class="form-select") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.scientific_name.label(class="form-label") }}
|
||||
{{ form.scientific_name(class="form-select") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.mother_uuid.label(class="form-label") }}
|
||||
{{ form.mother_uuid(class="form-select") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.custom_slug.label(class="form-label") }}
|
||||
{{ form.custom_slug(class="form-control") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.vendor_name.label(class="form-label") }}
|
||||
{{ form.vendor_name(class="form-control") }}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{{ form.price.label(class="form-label") }}
|
||||
{{ form.price(class="form-control") }}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{{ form.notes.label(class="form-label") }}
|
||||
{{ form.notes(class="form-control", rows=4) }}
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
{{ form.data_verified(class="form-check-input") }}
|
||||
{{ form.data_verified.label(class="form-check-label") }}
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
{{ form.is_active(class="form-check-input") }}
|
||||
{{ form.is_active.label(class="form-check-label") }}
|
||||
@ -54,74 +54,121 @@
|
||||
|
||||
<hr>
|
||||
|
||||
{# ─── Upload new image ─────────────────────────────────────────────── #}
|
||||
<h4>Upload Image</h4>
|
||||
<form
|
||||
method="POST"
|
||||
action="{{ url_for('plant.upload_image', uuid_val=plant.uuid) }}"
|
||||
action="{{ url_for('media.add_media', plant_uuid=plant.uuid) }}"
|
||||
enctype="multipart/form-data"
|
||||
class="mb-4"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="csrf_token"
|
||||
value="{{ csrf_token() }}"
|
||||
>
|
||||
{{ form.csrf_token }}
|
||||
<div class="input-group">
|
||||
<input type="file" name="file" class="form-control" required>
|
||||
<button class="btn btn-secondary" type="submit">Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{# ─── Existing images ──────────────────────────────────────────────── #}
|
||||
<h4>Existing Images</h4>
|
||||
<div class="row">
|
||||
{% for media in plant.media %}
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="card h-100">
|
||||
<img
|
||||
src="{{ generate_image_url(media.file_url) }}"
|
||||
class="card-img-top img-fluid"
|
||||
alt="Plant Image"
|
||||
style="object-fit:cover; height:150px;"
|
||||
>
|
||||
<div class="card-body text-center">
|
||||
{% if plant.featured_media_id == media.id %}
|
||||
<span class="badge bg-success mb-2">Featured</span>
|
||||
{% else %}
|
||||
<form
|
||||
method="POST"
|
||||
action="{{ url_for('plant.set_featured_image', uuid_val=plant.uuid, media_id=media.id) }}"
|
||||
class="mb-2"
|
||||
>
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button class="btn btn-outline-primary btn-sm">Set Featured</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
<form method="POST" id="delete-images-form"
|
||||
action="{{ url_for('media.bulk_delete_media', plant_uuid=plant.uuid) }}"
|
||||
onsubmit="return confirm('Are you sure you want to delete selected images?');">
|
||||
{{ form.csrf_token }}
|
||||
<div class="row">
|
||||
{% for media in plant.media %}
|
||||
<div class="col-md-3 mb-4">
|
||||
<div class="card h-100">
|
||||
<img
|
||||
id="image-{{ media.id }}"
|
||||
src="{{ generate_image_url(media) }}"
|
||||
class="card-img-top img-fluid"
|
||||
alt="Plant Image"
|
||||
style="object-fit:cover; height:150px;"
|
||||
>
|
||||
<div class="card-body text-center">
|
||||
|
||||
<div class="form-check mb-2">
|
||||
<input
|
||||
class="form-check-input featured-radio"
|
||||
type="radio"
|
||||
name="featured_media"
|
||||
value="{{ media.id }}"
|
||||
{% if plant.featured_media_id == media.id %} checked {% endif %}
|
||||
data-url="{{ url_for('media.set_featured_image',
|
||||
context='plant',
|
||||
context_id=plant.id,
|
||||
media_id=media.id) }}"
|
||||
>
|
||||
<label class="form-check-label">Featured</label>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-1">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary btn-sm rotate-btn"
|
||||
data-url="{{ url_for('media.rotate_media', media_id=media.id) }}"
|
||||
data-id="{{ media.id }}"
|
||||
>Rotate</button>
|
||||
|
||||
<div class="form-check mt-2">
|
||||
<input class="form-check-input delete-checkbox"
|
||||
type="checkbox"
|
||||
name="delete_ids"
|
||||
value="{{ media.id }}">
|
||||
<label class="form-check-label">Delete</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-1">
|
||||
<form
|
||||
method="POST"
|
||||
action="{{ url_for('plant.rotate_image', uuid_val=plant.uuid, media_id=media.id) }}"
|
||||
>
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button class="btn btn-outline-secondary btn-sm">Rotate</button>
|
||||
</form>
|
||||
<form
|
||||
method="POST"
|
||||
action="{{ url_for('plant.delete_image', uuid_val=plant.uuid, media_id=media.id) }}"
|
||||
onsubmit="return confirm('Delete this image?');"
|
||||
>
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button class="btn btn-outline-danger btn-sm">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-muted">No images uploaded yet.</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-muted">No images uploaded yet.</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-danger mt-2">Delete Selected Images</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
const csrfToken = "{{ form.csrf_token._value() }}";
|
||||
|
||||
// Rotate
|
||||
document.querySelectorAll('.rotate-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const url = btn.dataset.url;
|
||||
const id = btn.dataset.id;
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': csrfToken }
|
||||
})
|
||||
.then(r => {
|
||||
if (!r.ok) throw Error();
|
||||
const img = document.getElementById(`image-${id}`);
|
||||
img.src = img.src.split('?')[0] + `?v=${Date.now()}`;
|
||||
})
|
||||
.catch(() => alert('Failed to rotate image.'));
|
||||
});
|
||||
});
|
||||
|
||||
// Feature
|
||||
document.querySelectorAll('.featured-radio').forEach(radio => {
|
||||
radio.addEventListener('change', () => {
|
||||
const url = radio.dataset.url;
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': csrfToken }
|
||||
})
|
||||
.then(r => {
|
||||
if (!r.ok) throw Error();
|
||||
// uncheck all, then check this one
|
||||
document.querySelectorAll('.featured-radio').forEach(r => r.checked = false);
|
||||
radio.checked = true;
|
||||
})
|
||||
.catch(() => alert('Could not set featured image.'));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,43 +1,124 @@
|
||||
{% extends 'core_ui/base.html' %}
|
||||
{% block title %}View Entries – Nature In Pots{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<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>
|
||||
<!-- BETA NOTICE -->
|
||||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<strong>Heads up!</strong> We’re in alpha, do not share the main system for the time being as this is not on a reliable host.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<strong>Heads up!</strong> We’re in alpha – expect occasional hiccups, use the zip backup.
|
||||
<br /><strong>Also</strong>, QR codes work but generation will change more soon to be more user friendly.
|
||||
<br /><strong>Update</strong>, QR Card is public, direct is private. Do not use this for sharing currently please.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<!-- Stats Panel -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<a data-bs-toggle="collapse" href="#statsBox" aria-expanded="false">
|
||||
Stats <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>
|
||||
<!-- Stats container (desktop only, collapsed by default) -->
|
||||
<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>
|
||||
<div class="row row-cols-1 row-cols-md-2 g-3 mt-3">
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<i class="bi bi-flower3 fs-2 text-success mb-2"></i>
|
||||
<div class="small text-muted">Your plants</div>
|
||||
<div class="fw-bold fs-4">{{ stats.user_plants }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<i class="bi bi-file-earmark-image fs-2 text-primary mb-2"></i>
|
||||
<div class="small text-muted">Your images</div>
|
||||
<div class="fw-bold fs-4">{{ stats.user_images }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<i class="bi bi-tree fs-2 text-success mb-2"></i>
|
||||
<div class="small text-muted">Total plants</div>
|
||||
<div class="fw-bold fs-4">{{ stats.total_plants }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<i class="bi bi-images fs-2 text-primary mb-2"></i>
|
||||
<div class="small text-muted">Total images</div>
|
||||
<div class="fw-bold fs-4">{{ stats.total_images }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import/Export & Filter bar -->
|
||||
<!-- Stats Modal (for mobile) -->
|
||||
<div class="modal fade" id="statsModal" tabindex="-1" aria-labelledby="statsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="statsModalLabel">Statistics</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row row-cols-1 row-cols-2 g-3">
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<i class="bi bi-flower3 fs-2 text-success mb-2"></i>
|
||||
<div class="small text-muted">Your plants</div>
|
||||
<div class="fw-bold fs-4">{{ stats.user_plants }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<i class="bi bi-file-earmark-image fs-2 text-primary mb-2"></i>
|
||||
<div class="small text-muted">Your images</div>
|
||||
<div class="fw-bold fs-4">{{ stats.user_images }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<i class="bi bi-tree fs-2 text-success mb-2"></i>
|
||||
<div class="small text-muted">Total plants</div>
|
||||
<div class="fw-bold fs-4">{{ stats.total_plants }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<i class="bi bi-images fs-2 text-primary mb-2"></i>
|
||||
<div class="small text-muted">Total images</div>
|
||||
<div class="fw-bold fs-4">{{ stats.total_images }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<a href="{{ url_for('utility.upload') }}" class="btn btn-primary me-2">
|
||||
<button class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#importModal">
|
||||
Import CSV
|
||||
</a>
|
||||
<a href="{{ url_for('utility.export_data') }}" class="btn btn-secondary me-2">
|
||||
Export My Data
|
||||
</a>
|
||||
</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;">
|
||||
@ -47,10 +128,10 @@
|
||||
<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>
|
||||
<option value="{{ t|lower }}">{{ t }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<select id="pageSizeSelect" class="form-select mb-2 mb-md-0" style="min-width:140px;">
|
||||
<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
|
||||
@ -60,44 +141,52 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plant Cards Container -->
|
||||
<div class="row row-cols-1 row-cols-md-3 g-4" id="plantContainer">
|
||||
<!-- 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">
|
||||
|
||||
{% 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="{{ url_for('media.media_file', filename=featured.file_url) }}"
|
||||
class="card-img-top"
|
||||
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>
|
||||
{% set featured = plant.featured_media %}
|
||||
{% 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">{{ plant.common_name.name }}</h5>
|
||||
<p class="card-text">{{ plant.plant_type.replace('_',' ').title() }}</p>
|
||||
<h5 class="card-title">
|
||||
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}">
|
||||
{{ 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 }}
|
||||
</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-auto">
|
||||
<a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}"
|
||||
class="btn btn-sm btn-outline-primary">View</a>
|
||||
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-outline-secondary">Edit</a>
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -105,72 +194,123 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
<nav aria-label="Page navigation" class="mt-4">
|
||||
<!-- pagination controls -->
|
||||
<nav aria-label="Page navigation" class="mt-4 mb-5">
|
||||
<ul class="pagination justify-content-center" id="pagination"></ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- 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);
|
||||
<!-- 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(c => {
|
||||
return c.dataset.name.includes(q) &&
|
||||
(!type || c.dataset.type === type);
|
||||
});
|
||||
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;
|
||||
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 = '');
|
||||
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(); };
|
||||
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);
|
||||
}
|
||||
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));
|
||||
}
|
||||
// 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>
|
||||
|
||||
[searchInput, typeFilter].forEach(el => el.addEventListener('input', () => { currentPage = 1; filterAndPaginate(); }));
|
||||
pageSizeSelect.addEventListener('change', () => {
|
||||
pageSize = parseInt(pageSizeSelect.value, 10);
|
||||
currentPage = 1;
|
||||
filterAndPaginate();
|
||||
});
|
||||
|
||||
filterAndPaginate();
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
// Toggle chevron icon on desktop collapse
|
||||
const statsBox = document.getElementById('statsBox');
|
||||
statsBox.addEventListener('shown.bs.collapse', () => {
|
||||
document.querySelector('#statsToggle i')
|
||||
.classList.replace('bi-chevron-down','bi-chevron-up');
|
||||
});
|
||||
statsBox.addEventListener('hidden.bs.collapse', () => {
|
||||
document.querySelector('#statsToggle i')
|
||||
.classList.replace('bi-chevron-up','bi-chevron-down');
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user