croper do paragonów

app.py

@@ -1975,6 +1975,26 @@ def demote_user(user_id):
     flash(f"Użytkownik {user.username} został zdegradowany.", "success")
     return redirect(url_for("list_users"))
 
+@app.route("/admin/crop_receipt", methods=["POST"])
+@login_required
+@admin_required
+def crop_receipt():
+    receipt_id = request.form.get("receipt_id")
+    file = request.files.get("cropped_image")
+
+    if not receipt_id or not file:
+        return jsonify(success=False, error="Brak danych")
+
+    receipt = Receipt.query.get_or_404(receipt_id)
+    filepath = os.path.join(app.config["UPLOAD_FOLDER"], receipt.filename)
+
+    try:
+        image = Image.open(file).convert("RGB")
+        image.save(filepath, format="WEBP", quality=100)
+        return jsonify(success=True)
+    except Exception as e:
+        return jsonify(success=False, error=str(e))
+
 
 @app.route("/healthcheck")
 def healthcheck():

static/js/receipt_crop.js

@@ -0,0 +1,63 @@
+let cropper;
+let currentReceiptId;
+
+document.addEventListener("DOMContentLoaded", function () {
+    const cropModal = document.getElementById("cropModal");
+    const cropImage = document.getElementById("cropImage");
+
+    cropModal.addEventListener("shown.bs.modal", function (event) {
+        const button = event.relatedTarget;
+        const imgSrc = button.getAttribute("data-img-src");
+        currentReceiptId = button.getAttribute("data-receipt-id");
+
+        const image = document.getElementById("cropImage");
+        image.src = imgSrc;
+
+        if (cropper) {
+            cropper.destroy();
+            cropper = null;
+        }
+
+        image.onload = () => {
+            cropper = new Cropper(image, {
+                viewMode: 1,
+                autoCropArea: 1,
+                responsive: true,
+                background: false,
+                zoomable: true,
+                movable: true,
+                dragMode: 'move',
+                minContainerHeight: 400,
+                minContainerWidth: 400,
+            });
+        };
+    });
+
+    // zapisz przycięty
+    document.getElementById("saveCrop").addEventListener("click", function () {
+        if (!cropper) return;
+
+        cropper.getCroppedCanvas().toBlob(function (blob) {
+            const formData = new FormData();
+            formData.append("receipt_id", currentReceiptId);
+            formData.append("cropped_image", blob);
+
+            fetch("/admin/crop_receipt", {
+                method: "POST",
+                body: formData,
+            })
+                .then((res) => res.json())
+                .then((data) => {
+                    if (data.success) {
+                        location.reload();
+                    } else {
+                        alert("❌ Błąd: " + data.error || "Nieznany");
+                    }
+                })
+                .catch((err) => {
+                    alert("❌ Błąd sieci");
+                    console.error(err);
+                });
+        }, "image/webp");
+    });
+});

static/lib/css/cropper.min.css

@@ -0,0 +1,9 @@
+/*!
+ * Cropper.js v1.6.2
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2024-04-21T07:43:02.731Z
+ */.cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}

templates/admin/receipts.html

@@ -30,15 +30,18 @@
             {% endif %}
             <a href="{{ url_for('rotate_receipt', receipt_id=r.id) }}"
               class="btn btn-sm btn-outline-warning w-100 mb-2">🔄 Obróć o 90°</a>
+            <a href="#" class="btn btn-sm btn-outline-secondary w-100 mb-2" data-bs-toggle="modal"
+              data-bs-target="#cropModal" data-img-src="{{ url_for('uploaded_file', filename=r.filename) }}"
+              data-receipt-id="{{ r.id }}">✂️ Przytnij</a>
             <a href="{{ url_for('rename_receipt', receipt_id=r.id) }}" class="btn btn-sm btn-outline-info w-100 mb-2">✏️
               Zmień nazwę</a>
             {% if not r.file_hash %}
             <a href="{{ url_for('generate_receipt_hash', receipt_id=r.id) }}"
               class="btn btn-sm btn-outline-secondary w-100 mb-2">🔐 Generuj hash</a>
             {% endif %}
-            <a href="{{ url_for('delete_receipt', receipt_id=r.id) }}" class="btn btn-sm btn-outline-danger w-100">🗑️
+            <a href="{{ url_for('delete_receipt', receipt_id=r.id) }}"
+              class="btn btn-sm btn-outline-danger w-100 mb-2">🗑️
               Usuń</a>
-
             <a href="{{ url_for('edit_list', list_id=r.list_id) }}" class="btn btn-sm btn-outline-light w-100 mb-2">✏️
               Edytuj listę #{{ r.list_id }}</a>
           </div>
@@ -55,4 +58,27 @@
     {% endif %}
   </div>
 </div>
+
+<div class="modal fade" id="cropModal" tabindex="-1" aria-labelledby="cropModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-xl modal-dialog-centered">
+    <div class="modal-content bg-dark text-white">
+      <div class="modal-header">
+        <h5 class="modal-title">✂️ Przycinanie paragonu</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body p-0" style="max-height: 85vh; overflow: auto;">
+        <img id="cropImage" style="width: 100%; height: auto;">
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
+        <button class="btn btn-success" id="saveCrop">Zapisz</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% block scripts %}
+<script src="{{ url_for('static_bp.serve_js', filename='receipt_crop.js') }}"></script>
+{% endblock %}
+
 {% endblock %}

templates/base.html

@@ -11,6 +11,9 @@
   <link href="{{ url_for('static_bp.serve_css_lib', filename='glightbox.min.css') }}" rel="stylesheet">
   {% endif %}
   <link href="{{ url_for('static_bp.serve_css_lib', filename='bootstrap.min.css') }}" rel="stylesheet">
+  {% if '/admin/' in request.path %}
+  <link href="{{ url_for('static_bp.serve_css_lib', filename='cropper.min.css') }}" rel="stylesheet">
+  {% endif %}
 </head>
 
 <body class="bg-dark text-white">
@@ -88,6 +91,11 @@
       selector: '.glightbox'
     });
   </script>
+
+  {% if '/admin/' in request.path %}
+  <script src="{{ url_for('static_bp.serve_js_lib', filename='cropper.min.js') }}"></script>
+  {% endif %}
+
   {% endif %}
 
   {% block scripts %}{% endblock %}