3d.lehrstun.de/templates/admin_software_bild.html

{% extends "base.html" %}
{% block title %}Bild: {{ karte.titel }} — Admin{% endblock %}

{% block content %}
<p><a href="{{ url_for('admin.software_bearbeiten', karte_id=karte.id) }}">&larr; Zurueck zur Karte</a></p>

<div class="card">
    <h1>Bild fuer: {{ karte.titel }}</h1>
    <p style="color: var(--text-light); font-size: 0.9rem;">
        Slug: <code>{{ karte.slug }}</code> &middot; Kategorie: {{ karte.kategorie }}
    </p>
</div>

<!-- Paste-Bereich -->
<div class="card" id="paste-bereich">
    <h2>1. Screenshot einfuegen</h2>
    <p style="color: var(--text-light); margin-bottom: 1rem;">
        Kopiere ein Bild in die Zwischenablage (z.B. Screenshot mit Snipping Tool)
        und druecke <kbd style="background:#eee;padding:0.2rem 0.5rem;border-radius:4px;border:1px solid #ccc;">Strg+V</kbd>
        hier auf der Seite. Oder waehle eine Datei aus.
    </p>

    <div id="drop-zone" style="border: 3px dashed var(--border); border-radius: 12px; padding: 3rem;
        text-align: center; cursor: pointer; transition: border-color 0.2s; background: #fafafa;">
        <p style="font-size: 1.2rem; color: var(--text-light);">Strg+V zum Einfuegen</p>
        <p style="font-size: 0.85rem; color: var(--text-light);">oder klicken um Datei auszuwaehlen</p>
        <input type="file" id="datei-input" accept="image/*" style="display: none;">
    </div>
</div>

<!-- Crop-Bereich (anfangs versteckt) -->
<div class="card" id="crop-bereich" style="display: none;">
    <h2>2. Ausschnitt waehlen</h2>
    <p style="color: var(--text-light); margin-bottom: 1rem;">
        Ziehe das Quadrat auf den gewuenschten Bildausschnitt. Ecken zum Vergroessern/Verkleinern ziehen.
    </p>

    <div style="display: flex; gap: 2rem; flex-wrap: wrap;">
        <!-- Quellbild mit Crop-Overlay -->
        <div style="flex: 1; min-width: 300px;">
            <div id="crop-container" style="position: relative; display: inline-block; max-width: 100%; cursor: crosshair;">
                <canvas id="quell-canvas" style="max-width: 100%; display: block;"></canvas>
                <div id="crop-box" style="position: absolute; border: 3px solid var(--primary);
                    background: rgba(0,151,157,0.1); cursor: move; display: none;">
                    <div class="resize-handle" data-pos="tl" style="position:absolute;top:-6px;left:-6px;width:12px;height:12px;background:var(--primary);border-radius:50%;cursor:nw-resize;"></div>
                    <div class="resize-handle" data-pos="tr" style="position:absolute;top:-6px;right:-6px;width:12px;height:12px;background:var(--primary);border-radius:50%;cursor:ne-resize;"></div>
                    <div class="resize-handle" data-pos="bl" style="position:absolute;bottom:-6px;left:-6px;width:12px;height:12px;background:var(--primary);border-radius:50%;cursor:sw-resize;"></div>
                    <div class="resize-handle" data-pos="br" style="position:absolute;bottom:-6px;right:-6px;width:12px;height:12px;background:var(--primary);border-radius:50%;cursor:se-resize;"></div>
                </div>
            </div>
        </div>

        <!-- Vorschau -->
        <div style="min-width: 200px; text-align: center;">
            <h3>Vorschau</h3>
            <canvas id="vorschau-canvas" width="200" height="200"
                style="border: 1px solid var(--border); border-radius: 8px; background: #f0f0f0;"></canvas>
        </div>
    </div>

    <div style="margin-top: 1.5rem; display: flex; gap: 1rem;">
        <button onclick="speichern()" class="btn btn-primary" id="speichern-btn"
            style="padding: 0.8rem 2rem; font-size: 1rem;">Bild speichern</button>
        <button onclick="zuruecksetzen()" class="btn btn-secondary">Neues Bild</button>
    </div>
</div>

<!-- Erfolg -->
<div class="card" id="erfolg-bereich" style="display: none; border-left: 4px solid var(--success);">
    <h2 style="color: var(--success);">Bild gespeichert!</h2>
    <p>Das Bild fuer <strong>{{ karte.titel }}</strong> wurde erfolgreich gespeichert.</p>
    <div style="margin-top: 1rem;">
        <a href="{{ url_for('admin.software_bearbeiten', karte_id=karte.id) }}" class="btn btn-primary">Zurueck zur Karte</a>
        <a href="{{ url_for('admin.software_liste') }}" class="btn btn-secondary">Alle Karten</a>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
var quellCanvas = document.getElementById('quell-canvas');
var quellCtx = quellCanvas.getContext('2d');
var vorschauCanvas = document.getElementById('vorschau-canvas');
var vorschauCtx = vorschauCanvas.getContext('2d');
var cropBox = document.getElementById('crop-box');
var cropContainer = document.getElementById('crop-container');

var originalBild = null;
var skalierung = 1;

var crop = { x: 0, y: 0, size: 100 };
var dragging = false;
var resizing = false;
var resizePos = '';
var startX, startY, startCropX, startCropY, startCropSize;

function bildLaden(quelle) {
    var img = new Image();
    img.onload = function() {
        originalBild = img;
        var maxBreite = 600;
        skalierung = Math.min(1, maxBreite / img.width);
        quellCanvas.width = img.width * skalierung;
        quellCanvas.height = img.height * skalierung;
        quellCtx.drawImage(img, 0, 0, quellCanvas.width, quellCanvas.height);

        var minSeite = Math.min(quellCanvas.width, quellCanvas.height);
        crop.size = Math.round(minSeite * 0.6);
        crop.x = Math.round((quellCanvas.width - crop.size) / 2);
        crop.y = Math.round((quellCanvas.height - crop.size) / 2);

        cropBoxAktualisieren();
        cropBox.style.display = 'block';
        vorschauAktualisieren();

        document.getElementById('paste-bereich').style.display = 'none';
        document.getElementById('crop-bereich').style.display = 'block';
    };
    img.src = quelle;
}

document.addEventListener('paste', function(e) {
    if (originalBild) return;
    var items = e.clipboardData.items;
    for (var i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') >= 0) {
            var blob = items[i].getAsFile();
            var reader = new FileReader();
            reader.onload = function(ev) { bildLaden(ev.target.result); };
            reader.readAsDataURL(blob);
            e.preventDefault();
            return;
        }
    }
});

var dropZone = document.getElementById('drop-zone');
var dateiInput = document.getElementById('datei-input');

dropZone.addEventListener('click', function() { dateiInput.click(); });
dateiInput.addEventListener('change', function() {
    if (this.files[0]) {
        var reader = new FileReader();
        reader.onload = function(ev) { bildLaden(ev.target.result); };
        reader.readAsDataURL(this.files[0]);
    }
});

dropZone.addEventListener('dragover', function(e) {
    e.preventDefault();
    this.style.borderColor = 'var(--primary)';
    this.style.background = '#EBF5FB';
});
dropZone.addEventListener('dragleave', function() {
    this.style.borderColor = 'var(--border)';
    this.style.background = '#fafafa';
});
dropZone.addEventListener('drop', function(e) {
    e.preventDefault();
    this.style.borderColor = 'var(--border)';
    this.style.background = '#fafafa';
    if (e.dataTransfer.files[0] && e.dataTransfer.files[0].type.indexOf('image') >= 0) {
        var reader = new FileReader();
        reader.onload = function(ev) { bildLaden(ev.target.result); };
        reader.readAsDataURL(e.dataTransfer.files[0]);
    }
});

function cropBoxAktualisieren() {
    cropBox.style.left = crop.x + 'px';
    cropBox.style.top = crop.y + 'px';
    cropBox.style.width = crop.size + 'px';
    cropBox.style.height = crop.size + 'px';
}

function vorschauAktualisieren() {
    if (!originalBild) return;
    var sx = crop.x / skalierung;
    var sy = crop.y / skalierung;
    var ss = crop.size / skalierung;
    vorschauCtx.clearRect(0, 0, 200, 200);
    vorschauCtx.drawImage(originalBild, sx, sy, ss, ss, 0, 0, 200, 200);
}

function begrenzen() {
    var maxX = quellCanvas.width - crop.size;
    var maxY = quellCanvas.height - crop.size;
    crop.x = Math.max(0, Math.min(crop.x, maxX));
    crop.y = Math.max(0, Math.min(crop.y, maxY));
    crop.size = Math.max(30, Math.min(crop.size,
        Math.min(quellCanvas.width - crop.x, quellCanvas.height - crop.y)));
}

cropContainer.addEventListener('mousedown', function(e) {
    if (!originalBild) return;
    var rect = quellCanvas.getBoundingClientRect();
    var mx = e.clientX - rect.left;
    var my = e.clientY - rect.top;

    var handle = e.target.closest('.resize-handle');
    if (handle) {
        resizing = true;
        resizePos = handle.dataset.pos;
        startX = e.clientX;
        startY = e.clientY;
        startCropX = crop.x;
        startCropY = crop.y;
        startCropSize = crop.size;
        e.preventDefault();
        return;
    }

    if (mx >= crop.x && mx <= crop.x + crop.size &&
        my >= crop.y && my <= crop.y + crop.size) {
        dragging = true;
        startX = e.clientX;
        startY = e.clientY;
        startCropX = crop.x;
        startCropY = crop.y;
        e.preventDefault();
    }
});

document.addEventListener('mousemove', function(e) {
    if (dragging) {
        var dx = e.clientX - startX;
        var dy = e.clientY - startY;
        crop.x = startCropX + dx;
        crop.y = startCropY + dy;
        begrenzen();
        cropBoxAktualisieren();
        vorschauAktualisieren();
    }
    if (resizing) {
        var dx = e.clientX - startX;
        var dy = e.clientY - startY;

        if (resizePos === 'br') {
            var delta = Math.max(dx, dy);
            crop.size = Math.max(30, startCropSize + delta);
        } else if (resizePos === 'tl') {
            var delta = Math.min(dx, dy);
            crop.x = startCropX + delta;
            crop.y = startCropY + delta;
            crop.size = startCropSize - delta;
        } else if (resizePos === 'tr') {
            var delta = Math.max(dx, -dy);
            crop.y = startCropY - delta;
            crop.size = startCropSize + delta;
        } else if (resizePos === 'bl') {
            var delta = Math.max(-dx, dy);
            crop.x = startCropX - delta;
            crop.size = startCropSize + delta;
        }

        crop.size = Math.max(30, crop.size);
        begrenzen();
        cropBoxAktualisieren();
        vorschauAktualisieren();
    }
});

document.addEventListener('mouseup', function() {
    dragging = false;
    resizing = false;
});

// Touch-Events fuer mobile/Tablet
cropContainer.addEventListener('touchstart', function(e) {
    if (!originalBild) return;
    var touch = e.touches[0];
    var rect = quellCanvas.getBoundingClientRect();
    var mx = touch.clientX - rect.left;
    var my = touch.clientY - rect.top;

    if (mx >= crop.x && mx <= crop.x + crop.size &&
        my >= crop.y && my <= crop.y + crop.size) {
        dragging = true;
        startX = touch.clientX;
        startY = touch.clientY;
        startCropX = crop.x;
        startCropY = crop.y;
        e.preventDefault();
    }
}, {passive: false});

document.addEventListener('touchmove', function(e) {
    if (dragging) {
        var touch = e.touches[0];
        var dx = touch.clientX - startX;
        var dy = touch.clientY - startY;
        crop.x = startCropX + dx;
        crop.y = startCropY + dy;
        begrenzen();
        cropBoxAktualisieren();
        vorschauAktualisieren();
        e.preventDefault();
    }
}, {passive: false});

document.addEventListener('touchend', function() {
    dragging = false;
});

function speichern() {
    if (!originalBild) return;
    var btn = document.getElementById('speichern-btn');
    btn.disabled = true;
    btn.textContent = 'Speichern...';

    // 400x400 quadratisch, JPEG 85% Qualitaet
    var exportCanvas = document.createElement('canvas');
    exportCanvas.width = 400;
    exportCanvas.height = 400;
    var ctx = exportCanvas.getContext('2d');
    var sx = crop.x / skalierung;
    var sy = crop.y / skalierung;
    var ss = crop.size / skalierung;
    ctx.drawImage(originalBild, sx, sy, ss, ss, 0, 0, 400, 400);

    var dataUrl = exportCanvas.toDataURL('image/jpeg', 0.85);

    fetch('{{ url_for("admin.software_bild", karte_id=karte.id) }}', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({bild_base64: dataUrl})
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.error) {
            alert('Fehler: ' + data.error);
            btn.disabled = false;
            btn.textContent = 'Bild speichern';
        } else {
            document.getElementById('crop-bereich').style.display = 'none';
            document.getElementById('erfolg-bereich').style.display = 'block';
        }
    })
    .catch(function() {
        alert('Verbindungsfehler');
        btn.disabled = false;
        btn.textContent = 'Bild speichern';
    });
}

function zuruecksetzen() {
    originalBild = null;
    cropBox.style.display = 'none';
    vorschauCtx.clearRect(0, 0, 200, 200);
    document.getElementById('crop-bereich').style.display = 'none';
    document.getElementById('paste-bereich').style.display = 'block';
}
</script>
{% endblock %}