wymiana lightbox, usunięcie jquery, zmiana na glightbox poprawa js i emitowanie wgrania z endpointy uploadu

This commit is contained in:
Mateusz Gruszczyński
2025-07-10 16:40:15 +02:00
parent f36739aa40
commit d8d1010aa4
15 changed files with 126 additions and 109 deletions

View File

@@ -8,7 +8,7 @@
<link href="{{ url_for('static_bp.serve_css', filename='style.css') }}" rel="stylesheet">
<link href="{{ url_for('static_bp.serve_css_lib', filename='bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static_bp.serve_css_lib', filename='lightbox.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static_bp.serve_css_lib', filename='glightbox.min.css') }}" rel="stylesheet">
</head>
<body class="bg-dark text-white">
@@ -67,8 +67,7 @@
{% endwith %}
});
</script>
<script src="{{ url_for('static_bp.serve_js_lib', filename='jquery-3.6.0.min.js') }}"></script>
<script src="{{ url_for('static_bp.serve_js_lib', filename='lightbox.min.js') }}"></script>
<script src="{{ url_for('static_bp.serve_js_lib', filename='glightbox.min.js') }}"></script>
<script src="{{ url_for('static_bp.serve_js_lib', filename='bootstrap.bundle.min.js') }}"></script>
<script src="{{ url_for('static_bp.serve_js_lib', filename='socket.io.min.js') }}"></script>
{% if request.endpoint != 'system_auth' %}
@@ -77,6 +76,12 @@
<script src="{{ url_for('static_bp.serve_js', filename='sockets.js') }}"></script>
{% endif %}
<script src="{{ url_for('static_bp.serve_js', filename='toasts.js') }}"></script>
<script>
let lightbox = GLightbox({
selector: '.glightbox'
});
</script>
{% block scripts %}{% endblock %}
</body>

View File

@@ -137,7 +137,7 @@ Lista: <strong>{{ list.title }}</strong>
{% if receipt_files %}
{% for file in receipt_files %}
<div class="col-6 col-md-4 col-lg-3 text-center">
<a href="{{ url_for('uploaded_file', filename=file) }}" data-lightbox="receipt" data-title="Paragon">
<a href="{{ url_for('uploaded_file', filename=file) }}" class="glightbox" data-gallery="receipt-gallery">
<img src="{{ url_for('uploaded_file', filename=file) }}" class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
</a>
</div>
@@ -149,6 +149,7 @@ Lista: <strong>{{ list.title }}</strong>
{% endif %}
</div>
<div class="modal fade" id="massAddModal" tabindex="-1" aria-labelledby="massAddModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content bg-dark text-white">

View File

@@ -76,7 +76,7 @@
{% if receipt_files %}
{% for file in receipt_files %}
<div class="col-6 col-md-4 col-lg-3 text-center">
<a href="{{ url_for('uploaded_file', filename=file) }}" data-lightbox="receipt" data-title="Paragon">
<a href="{{ url_for('uploaded_file', filename=file) }}" class="glightbox" data-gallery="receipt-gallery">
<img src="{{ url_for('uploaded_file', filename=file) }}" class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
</a>
</div>
@@ -91,12 +91,13 @@
{% if not list.is_archived %}
<hr>
<h5>📤 Dodaj zdjęcie paragonu</h5>
<form id="receiptForm" action="{{ url_for('upload_receipt', list_id=list.id) }}" method="post" enctype="multipart/form-data">
<div class="input-group mb-2">
<input type="file" name="receipt" accept="image/*" capture="environment" class="form-control bg-dark text-white border-secondary" id="receiptInput">
<button type="submit" class="btn btn-success rounded-end"> Wgraj</button>
</div>
<div id="progressContainer" class="progress mb-2" style="height: 20px; display: none;">
<form id="receiptForm" action="{{ url_for('upload_receipt', list_id=list.id) }}" method="post" enctype="multipart/form-data" class="text-center">
<label for="receiptInput" class="btn btn-outline-light w-100 py-3 mb-2 d-flex align-items-center justify-content-center gap-2">
<i class="bi bi-upload"></i> 📸 <span id="fileLabel">Wybierz zdjęcie paragonu</span>
</label>
<input type="file" name="receipt" accept="image/*" capture="environment" class="d-none" id="receiptInput">
<button type="submit" class="btn btn-success w-100 mb-2"> Wgraj paragon</button>
<div id="progressContainer" class="progress" style="height: 20px; display: none;">
<div id="progressBar" class="progress-bar bg-success fw-bold" role="progressbar" style="width: 0%;">0%</div>
</div>
</form>
@@ -133,6 +134,7 @@
<script>
setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
</script>
{% endblock %}
{% endblock %}