stuff is working again
This commit is contained in:
144
plugins/plant/templates/plant/card.html
Normal file
144
plugins/plant/templates/plant/card.html
Normal file
@ -0,0 +1,144 @@
|
||||
{% extends 'core_ui/base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">{{ plant.common_name.name }}</h2>
|
||||
<h5 class="card-subtitle mb-3 text-muted">
|
||||
{{ plant.scientific_name.name }}
|
||||
</h5>
|
||||
|
||||
{# ── DESKTOP / TABLET GALLERY ──────────────────────────── #}
|
||||
<div class="d-none d-md-block">
|
||||
{# hero image #}
|
||||
{% set hero = featured or plant.media_items|first %}
|
||||
{% if hero %}
|
||||
<div class="text-center mb-4">
|
||||
<img
|
||||
id="main-image"
|
||||
src="{{ generate_image_url(hero) }}"
|
||||
class="img-fluid"
|
||||
style="max-height:60vh; object-fit:contain;"
|
||||
alt="Image for {{ plant.common_name.name }}"
|
||||
>
|
||||
</div>
|
||||
{% endif %}
|
||||
{# thumbnails #}
|
||||
<div class="d-flex flex-wrap justify-content-center gap-2 mb-3">
|
||||
{% for m in plant.media_items %}
|
||||
<img
|
||||
src="{{ generate_image_url(m) }}"
|
||||
class="img-thumbnail thumb{% if hero and m.id==hero.id %} active{% endif %}"
|
||||
data-url="{{ generate_image_url(m) }}"
|
||||
style="width:clamp(80px,15vw,120px); aspect-ratio:1/1; object-fit:cover; cursor:pointer;"
|
||||
alt="Thumbnail"
|
||||
>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── MOBILE GRID GALLERY ─────────────────────────────── #}
|
||||
<div class="d-block d-md-none">
|
||||
<div class="row row-cols-3 g-2">
|
||||
{% for m in plant.media_items %}
|
||||
<div class="col">
|
||||
<img
|
||||
src="{{ generate_image_url(m) }}"
|
||||
class="img-fluid mobile-thumb"
|
||||
data-url="{{ generate_image_url(m) }}"
|
||||
alt="Image for {{ plant.common_name.name }}"
|
||||
style="aspect-ratio:1/1; object-fit:cover; cursor:pointer;"
|
||||
>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── LIGHTBOX OVERLAY ─────────────────────────────────── #}
|
||||
<div id="lightbox-overlay" class="d-none">
|
||||
<span class="lightbox-close">×</span>
|
||||
<img id="lightbox-image" src="" alt="Zoomed image">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
// Desktop thumbnail swapping
|
||||
document.querySelectorAll('.thumb').forEach(thumb => {
|
||||
thumb.addEventListener('click', () => {
|
||||
const main = document.getElementById('main-image');
|
||||
main.src = thumb.dataset.url;
|
||||
document.querySelectorAll('.thumb.active')
|
||||
.forEach(el => el.classList.remove('active'));
|
||||
thumb.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Lightbox logic for mobile
|
||||
const overlay = document.getElementById('lightbox-overlay');
|
||||
const lbImage = document.getElementById('lightbox-image');
|
||||
const closeBtn = document.querySelector('.lightbox-close');
|
||||
|
||||
document.querySelectorAll('.mobile-thumb').forEach(img => {
|
||||
img.addEventListener('click', () => {
|
||||
lbImage.src = img.dataset.url;
|
||||
overlay.classList.remove('d-none');
|
||||
});
|
||||
});
|
||||
|
||||
// close handlers
|
||||
closeBtn.addEventListener('click', () => {
|
||||
overlay.classList.add('d-none');
|
||||
lbImage.src = '';
|
||||
});
|
||||
overlay.addEventListener('click', e => {
|
||||
if (e.target === overlay) {
|
||||
overlay.classList.add('d-none');
|
||||
lbImage.src = '';
|
||||
}
|
||||
});
|
||||
|
||||
// toggle zoom on lightbox image
|
||||
lbImage.addEventListener('click', () => {
|
||||
lbImage.classList.toggle('zoomed');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Lightbox backdrop */
|
||||
#lightbox-overlay {
|
||||
position: fixed;
|
||||
top:0; left:0; width:100vw; height:100vh;
|
||||
background: rgba(0,0,0,0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1050;
|
||||
}
|
||||
#lightbox-overlay.d-none { display: none; }
|
||||
|
||||
/* Zoomable image */
|
||||
#lightbox-image {
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
cursor: zoom-in;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
#lightbox-image.zoomed {
|
||||
transform: scale(2);
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
/* Close “X” */
|
||||
.lightbox-close {
|
||||
position: absolute;
|
||||
top: 1rem; right: 1rem;
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
z-index: 1060;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@ -1,71 +1,176 @@
|
||||
{% extends 'core_ui/base.html' %}
|
||||
|
||||
{% block title %}
|
||||
{{ plant.common_name.name if plant.common_name else "Unnamed Plant" }} – Nature In Pots
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container my-4">
|
||||
<div class="row gx-4">
|
||||
<div class="col-md-4">
|
||||
{% set featured = plant.featured_media or plant.media|first %}
|
||||
<img
|
||||
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;"
|
||||
>
|
||||
</div>
|
||||
<!-- Prev/Next Navigation -->
|
||||
<div class="d-flex justify-content-between mb-3">
|
||||
{% if prev_uuid %}
|
||||
<a href="{{ url_for('plant.detail', uuid_val=prev_uuid) }}" class="btn btn-outline-primary">← Previous</a>
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
{% if next_uuid %}
|
||||
<a href="{{ url_for('plant.detail', uuid_val=next_uuid) }}" class="btn btn-outline-primary">Next →</a>
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<h2>
|
||||
<div class="card mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h2 class="mb-0">
|
||||
{{ plant.common_name.name if plant.common_name else "Unnamed Plant" }}
|
||||
<small class="text-muted">({{ plant.uuid }})</small>
|
||||
</h2>
|
||||
{% if plant.scientific_name %}
|
||||
<h5 class="text-muted">
|
||||
{{ plant.scientific_name.name }}
|
||||
</h5>
|
||||
{% if current_user.id == plant.owner_id %}
|
||||
<a href="{{ url_for('plant.edit', uuid_val=plant.uuid) }}"
|
||||
class="btn btn-sm btn-outline-secondary">Edit</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">Type</dt>
|
||||
<dd class="col-sm-9">{{ plant.plant_type }}</dd>
|
||||
|
||||
<p class="mt-3">
|
||||
{{ plant.notes or "No description provided." }}
|
||||
</p>
|
||||
<dt class="col-sm-3">Scientific Name</dt>
|
||||
<dd class="col-sm-9">{{ plant.scientific_name.name }}</dd>
|
||||
|
||||
{% if plant.mother_uuid %}
|
||||
<p class="text-muted">
|
||||
Parent:
|
||||
<a href="{{ url_for('plant.detail', uuid_val=plant.mother_uuid) }}">
|
||||
{{ plant.mother_uuid }}
|
||||
</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
<dt class="col-sm-3">Mother UUID</dt>
|
||||
<dd class="col-sm-9">
|
||||
{% if plant.mother_uuid %}
|
||||
<a href="{{ url_for('plant.detail', uuid_val=plant.mother_uuid) }}">
|
||||
{{ plant.mother_uuid }}
|
||||
</a>
|
||||
{% else %}
|
||||
N/A
|
||||
{% endif %}
|
||||
</dd>
|
||||
|
||||
<div class="mt-4">
|
||||
<a
|
||||
href="{{ url_for('plant.edit', uuid_val=plant.uuid) }}"
|
||||
class="btn btn-primary me-2"
|
||||
>Edit</a>
|
||||
<a
|
||||
href="{{ url_for('plant.index') }}"
|
||||
class="btn btn-secondary"
|
||||
>Back to List</a>
|
||||
<dt class="col-sm-3">Notes</dt>
|
||||
<dd class="col-sm-9">{{ plant.notes or '—' }}</dd>
|
||||
</dl>
|
||||
|
||||
<div class="mb-3">
|
||||
<a href="{{ url_for('utility.download_qr', uuid_val=plant.uuid) }}"
|
||||
class="btn btn-primary me-1">Direct QR</a>
|
||||
<a href="{{ url_for('utility.download_qr_card', uuid_val=plant.uuid) }}"
|
||||
class="btn btn-secondary">Card QR</a>
|
||||
</div>
|
||||
|
||||
{% if plant.media %}
|
||||
<h5>Images</h5>
|
||||
<div class="row g-2">
|
||||
{% for m in plant.media %}
|
||||
<div class="col-6 col-md-3">
|
||||
<a href="{{ generate_image_url(m) }}" target="_blank" rel="noopener">
|
||||
<img
|
||||
src="{{ generate_image_url(m) }}"
|
||||
class="img-fluid"
|
||||
style="width:100%; height:150px; object-fit:cover;"
|
||||
alt="{{ m.filename }}"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-muted">No images uploaded yet.</p>
|
||||
{% endif %}
|
||||
|
||||
{% if current_user.id == plant.owner_id %}
|
||||
<hr>
|
||||
<h5>Generate Cuttings</h5>
|
||||
<form
|
||||
method="POST"
|
||||
action="{{ url_for('plant.generate_children', uuid_val=plant.uuid) }}"
|
||||
class="row g-2 align-items-end"
|
||||
>
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="col-auto">
|
||||
<label for="count" class="form-label">Number to generate</label>
|
||||
<input
|
||||
type="number"
|
||||
id="count"
|
||||
name="count"
|
||||
class="form-control"
|
||||
value="1"
|
||||
min="1" max="100"
|
||||
>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="submit" class="btn btn-success">Generate</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% if children %}
|
||||
<hr>
|
||||
<h5>Child Plants</h5>
|
||||
|
||||
{% if children|length > 6 %}
|
||||
<ul class="list-group">
|
||||
{% for c in children %}
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="{{ url_for('plant.detail', uuid_val=c.uuid) }}">
|
||||
{{ c.common_name.name }} <small class="text-muted">({{ c.uuid }})</small>
|
||||
</a>
|
||||
<div>
|
||||
<a href="{{ url_for('utility.download_qr', uuid_val=c.uuid) }}"
|
||||
class="btn btn-sm btn-outline-primary me-1">Direct QR</a>
|
||||
<a href="{{ url_for('utility.download_qr_card', uuid_val=c.uuid) }}"
|
||||
class="btn btn-sm btn-outline-secondary">Card QR</a>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<div class="row g-3">
|
||||
{% for c in children %}
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="d-flex justify-content-center align-items-center p-3">
|
||||
{% if c.media %}
|
||||
{% set first_media = c.media[0] %}
|
||||
<a href="{{ generate_image_url(first_media) }}"
|
||||
target="_blank" rel="noopener">
|
||||
<img
|
||||
src="{{ generate_image_url(first_media) }}"
|
||||
style="width:150px; height:150px; object-fit:cover;"
|
||||
alt="{{ first_media.filename }}"
|
||||
>
|
||||
</a>
|
||||
{% else %}
|
||||
<div style="width:150px; height:150px; background:#f0f0f0;"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">
|
||||
<a href="{{ url_for('plant.detail', uuid_val=c.uuid) }}">
|
||||
{{ c.common_name.name }}
|
||||
</a>
|
||||
</h6>
|
||||
<p class="card-subtitle mb-2 text-muted">
|
||||
<a href="{{ url_for('plant.detail', uuid_val=c.uuid) }}">
|
||||
{{ c.uuid }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<a href="{{ url_for('utility.download_qr', uuid_val=c.uuid) }}"
|
||||
class="btn btn-sm btn-outline-primary me-1">Direct QR</a>
|
||||
<a href="{{ url_for('utility.download_qr_card', uuid_val=c.uuid) }}"
|
||||
class="btn btn-sm btn-outline-secondary">Card QR</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if plant.media|length > (1 if plant.featured_media else 0) %}
|
||||
<hr class="my-4">
|
||||
<h4>Additional Images</h4>
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
{% for img in plant.media if img != featured %}
|
||||
<img
|
||||
src="{{ generate_image_url(img) }}"
|
||||
alt="Plant image"
|
||||
class="img-thumbnail"
|
||||
style="height: 160px; object-fit: cover;"
|
||||
>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<a href="{{ url_for('plant.index') }}" class="btn btn-link">← Back to list</a>
|
||||
{% endblock %}
|
||||
|
||||
@ -72,10 +72,12 @@
|
||||
|
||||
{# ——— Existing Images & Featured Toggle ——— #}
|
||||
<h4>Existing Images</h4>
|
||||
<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
|
||||
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_items %}
|
||||
@ -84,32 +86,43 @@
|
||||
<img
|
||||
id="image-{{ media.id }}"
|
||||
src="{{ url_for('media.media_file',
|
||||
context='plants',
|
||||
context_id=plant.id,
|
||||
filename=media.filename) }}"
|
||||
context='plants',
|
||||
context_id=plant.id,
|
||||
filename=media.filename) }}"
|
||||
class="card-img-top img-fluid"
|
||||
alt="Plant Image"
|
||||
style="object-fit:cover; height:150px;"
|
||||
>
|
||||
<div class="card-body text-center">
|
||||
|
||||
{# Featured radio driven off media.featured #}
|
||||
<div class="form-check mb-2">
|
||||
{# — featured toggle — #}
|
||||
<form
|
||||
action="{{ url_for('media.set_featured_image',
|
||||
context='plants',
|
||||
context_id=plant.id,
|
||||
media_id=media.id) }}"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
>
|
||||
<input
|
||||
class="form-check-input featured-radio"
|
||||
type="radio"
|
||||
name="featured_media"
|
||||
value="{{ media.id }}"
|
||||
{% if media.featured %}checked{% endif %}
|
||||
data-url="{{ url_for('media.set_featured_image',
|
||||
context='plants',
|
||||
context_id=plant.id,
|
||||
media_id=media.id) }}"
|
||||
type="hidden"
|
||||
name="csrf_token"
|
||||
value="{{ form.csrf_token._value() }}"
|
||||
>
|
||||
<label class="form-check-label">Featured</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="featured_media"
|
||||
value="{{ media.id }}"
|
||||
{% if media.featured %}checked{% endif %}
|
||||
onchange="this.form.submit()"
|
||||
>
|
||||
<label class="form-check-label">Featured</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{# Rotate button #}
|
||||
{# — rotate button — #}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary btn-sm rotate-btn"
|
||||
@ -117,66 +130,44 @@
|
||||
data-id="{{ media.id }}"
|
||||
>Rotate</button>
|
||||
|
||||
{# Delete checkbox #}
|
||||
{# — delete checkbox — #}
|
||||
<div class="form-check mt-2">
|
||||
<input
|
||||
class="form-check-input delete-checkbox"
|
||||
type="checkbox"
|
||||
name="delete_ids"
|
||||
value="{{ media.id }}"
|
||||
id="del-{{ media.id }}"
|
||||
>
|
||||
<label class="form-check-label">Delete</label>
|
||||
<label class="form-check-label" for="del-{{ media.id }}">Delete</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</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 %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
const csrfToken = "{{ form.csrf_token._value() }}";
|
||||
<script>
|
||||
const csrfToken = "{{ form.csrf_token._value() }}";
|
||||
|
||||
// Rotate buttons
|
||||
document.querySelectorAll('.rotate-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
fetch(btn.dataset.url, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': csrfToken }
|
||||
})
|
||||
.then(r => {
|
||||
if (!r.ok) throw Error();
|
||||
const img = document.getElementById(`image-${btn.dataset.id}`);
|
||||
img.src = img.src.split('?')[0] + `?v=${Date.now()}`;
|
||||
})
|
||||
.catch(() => alert('Failed to rotate image.'));
|
||||
});
|
||||
// Rotate buttons
|
||||
document.querySelectorAll('.rotate-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
fetch(btn.dataset.url, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': csrfToken }
|
||||
})
|
||||
.then(r => {
|
||||
if (!r.ok) throw Error();
|
||||
const img = document.getElementById(`image-${btn.dataset.id}`);
|
||||
img.src = img.src.split('?')[0] + `?v=${Date.now()}`;
|
||||
})
|
||||
.catch(() => alert('Failed to rotate image.'));
|
||||
});
|
||||
|
||||
// Featured‐radio AJAX
|
||||
document.querySelectorAll('.featured-radio').forEach(radio => {
|
||||
radio.addEventListener('change', () => {
|
||||
fetch(radio.dataset.url, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': csrfToken }
|
||||
})
|
||||
.then(r => {
|
||||
if (!r.ok) throw Error();
|
||||
// uncheck them 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>
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@ -148,17 +148,13 @@
|
||||
data-name="{{ plant.common_name.name|lower }}"
|
||||
data-type="{{ plant.plant_type|lower }}">
|
||||
<div class="card h-100">
|
||||
{% set featured = plant.featured_media %}
|
||||
{# 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) }}">
|
||||
{# pick featured → first media if no explicit featured #}
|
||||
{% set featured = plant.featured_media %}
|
||||
{% if not featured and plant.media %}
|
||||
{% set featured = plant.media[0] %}
|
||||
{% endif %}
|
||||
<img
|
||||
src="{{ generate_image_url(featured) }}"
|
||||
class="card-img-top"
|
||||
|
||||
Reference in New Issue
Block a user