91 lines
3.1 KiB
HTML
91 lines
3.1 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="p-4 max-w-6xl mx-auto">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h1 class="text-xl font-bold">Curate</h1>
|
|
<button id="done-btn" class="btn btn-primary btn-sm" onclick="done()">
|
|
Curate done →
|
|
</button>
|
|
</div>
|
|
{% for day, photos in photos_by_day.items() %}
|
|
<div class="day-group mb-6">
|
|
<h2 class="sticky top-16 bg-base-200 py-1 text-sm font-semibold opacity-70">{{ day }}</h2>
|
|
<div class="flex flex-wrap gap-2 mt-2" id="day-{{ day }}">
|
|
{% for photo in photos %}
|
|
<div class="photo-card relative w-32 h-32 rounded-lg overflow-hidden border-4
|
|
{% if photo.tag == 'story' %}border-info{% else %}border-success{% endif %}"
|
|
data-asset-id="{{ photo.id }}">
|
|
<img src="/proxy/thumb/{{ photo.id }}" class="w-full h-full object-cover" alt="">
|
|
<div class="absolute top-1 left-1 flex gap-1">
|
|
<button class="retag-btn btn btn-xs btn-ghost bg-black/40 text-white"
|
|
onclick="retag('{{ album_id }}', '{{ photo.id }}', this.closest('.photo-card'))">
|
|
{% if photo.tag == 'journal' %}→S{% else %}→J{% endif %}
|
|
</button>
|
|
<button class="remove-btn btn btn-xs btn-ghost bg-black/40 text-white"
|
|
onclick="removeFn('{{ album_id }}', '{{ photo.id }}', this.closest('.photo-card'))">
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.3/Sortable.min.js"></script>
|
|
<script>
|
|
document.querySelectorAll('[id^="day-"]').forEach(function(el) {
|
|
var albumId = new URLSearchParams(location.search).get('album_id');
|
|
Sortable.create(el, {
|
|
onEnd: function(e) {
|
|
reorder(albumId, e.to);
|
|
}
|
|
});
|
|
});
|
|
|
|
async function removeFn(albumId, assetId, el) {
|
|
await fetch('/curate/remove', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({album_id: albumId, asset_id: assetId})
|
|
});
|
|
el.remove();
|
|
}
|
|
|
|
async function retag(albumId, assetId, el) {
|
|
await fetch('/curate/retag', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({album_id: albumId, asset_id: assetId})
|
|
});
|
|
el.classList.toggle('border-info');
|
|
el.classList.toggle('border-success');
|
|
}
|
|
|
|
async function reorder(albumId, container) {
|
|
var ids = Array.from(container.querySelectorAll('.photo-card')).map(function(e) {
|
|
return e.dataset.assetId;
|
|
});
|
|
await fetch('/curate/reorder', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({album_id: albumId, ordered_ids: ids})
|
|
});
|
|
}
|
|
|
|
async function done() {
|
|
var albumId = new URLSearchParams(location.search).get('album_id');
|
|
var res = await fetch('/curate/done', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({album_id: albumId})
|
|
});
|
|
var data = await res.json();
|
|
if (data.redirect) window.location = data.redirect;
|
|
}
|
|
</script>
|
|
{% endblock %}
|