From 2e2f2d66d6c81f642178979a7797a54cb3d6ec4a Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Fri, 2 Oct 2026 19:54:34 +1000
Subject: [PATCH] Add drag-and-drop page organiser template

---
 app/templates/instructions/organise.html | 468 +++++++++++++++++++++++
 1 file changed, 468 insertions(+)
 create mode 100644 app/templates/instructions/organise.html

diff --git a/app/templates/instructions/organise.html b/app/templates/instructions/organise.html
new file mode 100644
index 0000000..d49adf3
--- /dev/null
+++ b/app/templates/instructions/organise.html
@@ -0,0 +1,468 @@
+{% extends "base.html" %}
+
+{# Page organiser for image instructions.
+   Created by: Jess Rogerson (yelling commands at Claude.AI) #}
+
+{% block title %}Organise Pages - {{ set.set_number }}: {{ set.set_name }}{% endblock %}
+
+{% block content %}
+<style>
+    .organiser-toolbar {
+        position: sticky;
+        top: 0;
+        z-index: 200;
+        background-color: #1a1a1a;
+        color: #fff;
+        padding: 15px 20px;
+        border-radius: 8px 8px 0 0;
+    }
+
+    .organiser-body {
+        background-color: #f1f1f1;
+        border-radius: 0 0 8px 8px;
+        padding: 20px;
+        min-height: 50vh;
+    }
+
+    .page-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
+        gap: 16px;
+    }
+
+    .page-tile {
+        background: #fff;
+        border: 2px solid #d7d7d7;
+        border-radius: 6px;
+        overflow: hidden;
+        position: relative;
+        cursor: grab;
+    }
+
+    .page-tile:focus-visible {
+        outline: 3px solid #0d6efd;
+        outline-offset: 2px;
+    }
+
+    .page-tile.dragging {
+        opacity: .4;
+    }
+
+    .page-tile.drop-before {
+        border-left-color: #0d6efd;
+        box-shadow: inset 4px 0 0 #0d6efd;
+    }
+
+    .page-tile.drop-after {
+        border-right-color: #0d6efd;
+        box-shadow: inset -4px 0 0 #0d6efd;
+    }
+
+    .page-tile .thumb {
+        width: 100%;
+        aspect-ratio: 3 / 4;
+        object-fit: contain;
+        background: #fafafa;
+        display: block;
+    }
+
+    .page-tile .tile-foot {
+        padding: 6px 8px;
+        border-top: 1px solid #eee;
+    }
+
+    .page-tile .file-name {
+        font-size: .72rem;
+        color: #666;
+        word-break: break-all;
+        line-height: 1.2;
+        display: block;
+    }
+
+    .seq-badge {
+        position: absolute;
+        top: 6px;
+        left: 6px;
+        background: rgba(0, 0, 0, .78);
+        color: #fff;
+        border-radius: 14px;
+        padding: 2px 11px;
+        font-weight: 700;
+        font-size: .82rem;
+    }
+
+    .hint-badge {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        background: rgba(255, 255, 255, .92);
+        border: 1px solid #ccc;
+        border-radius: 14px;
+        padding: 1px 8px;
+        font-size: .7rem;
+        color: #555;
+    }
+
+    .tile-buttons {
+        display: flex;
+        gap: 4px;
+        margin-top: 4px;
+    }
+
+    .tile-buttons .btn {
+        padding: 1px 6px;
+        font-size: .72rem;
+        line-height: 1.4;
+    }
+
+    .jump-input {
+        width: 100%;
+        font-size: .75rem;
+        padding: 1px 4px;
+    }
+
+    .save-bar {
+        position: fixed;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: #1a1a1a;
+        color: #fff;
+        padding: 12px 24px;
+        border-radius: 40px;
+        box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
+        z-index: 1000;
+        display: none;
+        align-items: center;
+        gap: 14px;
+    }
+
+    .save-bar.visible {
+        display: flex;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .page-tile { transition: none; }
+    }
+</style>
+
+<div class="organiser-toolbar">
+    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
+        <div>
+            <h5 class="mb-0">
+                <i class="bi bi-arrows-move"></i> Organise pages
+            </h5>
+            <small class="text-muted">
+                {{ set.set_number }}: {{ set.set_name }} &middot;
+                <span id="pageCount">{{ pages|length }}</span> pages
+            </small>
+        </div>
+        <div class="d-flex flex-wrap gap-2 align-items-center">
+            <select class="form-select form-select-sm" id="sortStrategy" style="width: auto;">
+                {% for value, label in strategies %}
+                    <option value="{{ value }}">{{ label }}</option>
+                {% endfor %}
+            </select>
+            <button class="btn btn-sm btn-warning" id="autoSortBtn">
+                <i class="bi bi-sort-numeric-down"></i> Sort
+            </button>
+            <button class="btn btn-sm btn-outline-light" id="reverseBtn">
+                <i class="bi bi-arrow-down-up"></i> Reverse
+            </button>
+            <button class="btn btn-sm btn-outline-light" id="renumberBtn">
+                <i class="bi bi-123"></i> Renumber
+            </button>
+            <a href="{{ url_for('instructions.image_viewer', set_id=set.id) }}"
+               class="btn btn-sm btn-outline-light">
+                <i class="bi bi-book"></i> Preview
+            </a>
+            <a href="{{ url_for('sets.view_set', set_id=set.id) }}"
+               class="btn btn-sm btn-outline-light">
+                <i class="bi bi-x-lg"></i> Close
+            </a>
+        </div>
+    </div>
+</div>
+
+<div class="organiser-body">
+    {% if not audit.is_clean %}
+        <div class="alert alert-warning py-2">
+            <i class="bi bi-exclamation-triangle"></i>
+            Numbering needs a tidy-up:
+            {% if audit.duplicates %}
+                duplicates at {{ audit.duplicates|join(', ') }}.
+            {% endif %}
+            {% if audit.gaps %}
+                missing {{ audit.gaps|join(', ') }}.
+            {% endif %}
+            {% if audit.unnumbered %}
+                {{ audit.unnumbered }} with no number.
+            {% endif %}
+            Renumber fixes all of it without moving anything.
+        </div>
+    {% endif %}
+
+    <p class="text-muted small">
+        Drag a page onto another to drop it there, or type a position in the box
+        under any page and press Enter. Keyboard: tab to a page, then use the
+        arrow buttons. Nothing is written until you save.
+    </p>
+
+    <div class="page-grid" id="pageGrid">
+        {% for page in pages %}
+            <div class="page-tile" draggable="true" tabindex="0"
+                 data-id="{{ page.id }}"
+                 data-name="{{ page.file_name }}">
+                <span class="seq-badge">{{ loop.index }}</span>
+                {% if page_hints.get(page.id) %}
+                    <span class="hint-badge" title="Number found in the filename">
+                        #{{ page_hints[page.id] }}
+                    </span>
+                {% endif %}
+                <img class="thumb" loading="lazy"
+                     alt="Page {{ loop.index }}"
+                     src="/static/uploads/{{ (page.thumbnail_path or page.file_path).replace('\\', '/') }}">
+                <div class="tile-foot">
+                    <span class="file-name" title="{{ page.file_name }}">{{ page.file_name }}</span>
+                    <div class="tile-buttons">
+                        <button type="button" class="btn btn-outline-secondary move-left"
+                                title="Move earlier">&larr;</button>
+                        <button type="button" class="btn btn-outline-secondary move-right"
+                                title="Move later">&rarr;</button>
+                        <input type="number" min="1" class="jump-input" draggable="false"
+                               placeholder="#" aria-label="Move to position">
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+</div>
+
+<div class="save-bar" id="saveBar">
+    <span id="saveStatus">Order changed</span>
+    <button class="btn btn-success btn-sm" id="saveBtn">
+        <i class="bi bi-check-lg"></i> Save order
+    </button>
+    <button class="btn btn-outline-light btn-sm" id="revertBtn">
+        Discard changes
+    </button>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+(function () {
+    const grid = document.getElementById('pageGrid');
+    const saveBar = document.getElementById('saveBar');
+    const saveStatus = document.getElementById('saveStatus');
+    let leavingOnPurpose = false;
+
+    const urls = {
+        reorder: "{{ url_for('instructions.reorder', set_id=set.id) }}",
+        autoSort: "{{ url_for('instructions.auto_sort', set_id=set.id) }}",
+        renumber: "{{ url_for('instructions.renumber', set_id=set.id) }}"
+    };
+
+    const savedOrder = tiles().map(t => t.dataset.id);
+    let dragged = null;
+
+    function tiles() {
+        return Array.from(grid.querySelectorAll('.page-tile'));
+    }
+
+    function currentOrder() {
+        return tiles().map(t => t.dataset.id);
+    }
+
+    function isDirty() {
+        const now = currentOrder();
+        return now.length !== savedOrder.length ||
+               now.some((id, i) => id !== savedOrder[i]);
+    }
+
+    function refresh() {
+        tiles().forEach((tile, index) => {
+            tile.querySelector('.seq-badge').textContent = index + 1;
+            tile.querySelector('.thumb').alt = 'Page ' + (index + 1);
+        });
+        saveBar.classList.toggle('visible', isDirty());
+        saveStatus.textContent = 'Order changed';
+    }
+
+    function moveTile(tile, newIndex) {
+        const all = tiles();
+        const clamped = Math.max(0, Math.min(newIndex, all.length - 1));
+        const reference = all.filter(t => t !== tile)[clamped];
+        if (reference) {
+            grid.insertBefore(tile, reference);
+        } else {
+            grid.appendChild(tile);
+        }
+        refresh();
+    }
+
+    // A draggable parent stops some browsers letting you click into the
+    // position box, so the tile stops being draggable while it has focus.
+    grid.addEventListener('focusin', function (e) {
+        if (e.target.classList.contains('jump-input')) {
+            e.target.closest('.page-tile').draggable = false;
+        }
+    });
+
+    grid.addEventListener('focusout', function (e) {
+        if (e.target.classList.contains('jump-input')) {
+            e.target.closest('.page-tile').draggable = true;
+        }
+    });
+
+    // --- drag and drop (desktop) -------------------------------------------
+
+    grid.addEventListener('dragstart', function (e) {
+        const tile = e.target.closest('.page-tile');
+        if (!tile) return;
+        dragged = tile;
+        tile.classList.add('dragging');
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', tile.dataset.id);
+    });
+
+    grid.addEventListener('dragend', function () {
+        if (dragged) dragged.classList.remove('dragging');
+        tiles().forEach(t => t.classList.remove('drop-before', 'drop-after'));
+        dragged = null;
+    });
+
+    grid.addEventListener('dragover', function (e) {
+        const tile = e.target.closest('.page-tile');
+        if (!tile || !dragged || tile === dragged) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+
+        const box = tile.getBoundingClientRect();
+        const before = (e.clientX - box.left) < box.width / 2;
+        tiles().forEach(t => t.classList.remove('drop-before', 'drop-after'));
+        tile.classList.add(before ? 'drop-before' : 'drop-after');
+    });
+
+    grid.addEventListener('drop', function (e) {
+        const tile = e.target.closest('.page-tile');
+        if (!tile || !dragged || tile === dragged) return;
+        e.preventDefault();
+
+        const box = tile.getBoundingClientRect();
+        const before = (e.clientX - box.left) < box.width / 2;
+        grid.insertBefore(dragged, before ? tile : tile.nextSibling);
+
+        tiles().forEach(t => t.classList.remove('drop-before', 'drop-after'));
+        refresh();
+    });
+
+    // --- buttons and the position box (touch and keyboard) -----------------
+
+    grid.addEventListener('click', function (e) {
+        const tile = e.target.closest('.page-tile');
+        if (!tile) return;
+        const index = tiles().indexOf(tile);
+
+        if (e.target.closest('.move-left')) {
+            moveTile(tile, index - 1);
+            tile.focus();
+        } else if (e.target.closest('.move-right')) {
+            moveTile(tile, index + 1);
+            tile.focus();
+        }
+    });
+
+    grid.addEventListener('keydown', function (e) {
+        if (e.target.classList.contains('jump-input')) {
+            if (e.key !== 'Enter') return;
+            e.preventDefault();
+            const tile = e.target.closest('.page-tile');
+            const wanted = parseInt(e.target.value, 10);
+            if (!isNaN(wanted)) {
+                moveTile(tile, wanted - 1);
+                e.target.value = '';
+                tile.focus();
+            }
+            return;
+        }
+
+        const tile = e.target.closest('.page-tile');
+        if (!tile) return;
+        const index = tiles().indexOf(tile);
+
+        if (e.key === 'ArrowLeft' && e.shiftKey) {
+            e.preventDefault();
+            moveTile(tile, index - 1);
+            tile.focus();
+        } else if (e.key === 'ArrowRight' && e.shiftKey) {
+            e.preventDefault();
+            moveTile(tile, index + 1);
+            tile.focus();
+        }
+    });
+
+    // --- server calls ------------------------------------------------------
+
+    function post(url, body, button) {
+        if (button) button.disabled = true;
+        return fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body || {})
+        }).then(function (response) {
+            return response.json().then(function (data) {
+                if (!response.ok) throw new Error(data.error || 'Request failed');
+                return data;
+            });
+        }).catch(function (error) {
+            alert(error.message);
+            throw error;
+        }).finally(function () {
+            if (button) button.disabled = false;
+        });
+    }
+
+    document.getElementById('saveBtn').addEventListener('click', function () {
+        const button = this;
+        saveStatus.textContent = 'Saving...';
+        post(urls.reorder, { order: currentOrder() }, button).then(function () {
+            savedOrder.length = 0;
+            currentOrder().forEach(id => savedOrder.push(id));
+            saveStatus.textContent = 'Saved';
+            saveBar.classList.remove('visible');
+        }).catch(function () {
+            saveStatus.textContent = 'Not saved';
+        });
+    });
+
+    document.getElementById('revertBtn').addEventListener('click', function () {
+        leavingOnPurpose = true;
+        window.location.reload();
+    });
+
+    document.getElementById('autoSortBtn').addEventListener('click', function () {
+        const strategy = document.getElementById('sortStrategy').value;
+        post(urls.autoSort, { strategy: strategy }, this)
+            .then(function () { leavingOnPurpose = true; window.location.reload(); });
+    });
+
+    document.getElementById('reverseBtn').addEventListener('click', function () {
+        post(urls.autoSort, { strategy: 'reverse' }, this)
+            .then(function () { leavingOnPurpose = true; window.location.reload(); });
+    });
+
+    document.getElementById('renumberBtn').addEventListener('click', function () {
+        post(urls.renumber, {}, this)
+            .then(function () { leavingOnPurpose = true; window.location.reload(); });
+    });
+
+    window.addEventListener('beforeunload', function (e) {
+        if (isDirty() && !leavingOnPurpose) {
+            e.preventDefault();
+            e.returnValue = '';
+        }
+    });
+})();
+</script>
+{% endblock %}