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

static/js/receipt_upload.js

@@ -1,85 +1,105 @@
-let receiptToastShown = false;
+window.receiptToastShown = window.receiptToastShown || false;
 
-document.addEventListener("DOMContentLoaded", function () {
-  const form = document.getElementById("receiptForm");
-  const input = document.getElementById("receiptInput");
-  const gallery = document.getElementById("receiptGallery");
-  const progressContainer = document.getElementById("progressContainer");
-  const progressBar = document.getElementById("progressBar");
+if (!window.receiptUploaderInitialized) {
+  document.addEventListener("DOMContentLoaded", function () {
+    const form = document.getElementById("receiptForm");
+    const input = document.getElementById("receiptInput");
+    const gallery = document.getElementById("receiptGallery");
+    const progressContainer = document.getElementById("progressContainer");
+    const progressBar = document.getElementById("progressBar");
+    const fileLabel = document.getElementById("fileLabel");
 
-  if (!form || !input || !gallery) return;
+    if (!form || !input || !gallery) return;
 
-  form.addEventListener("submit", function (e) {
-    e.preventDefault();
-
-    const file = input.files[0];
-    if (!file) {
-      showToast("Nie wybrano pliku!", "warning");
-      return;
+    // Zmiana labela po wyborze pliku
+    if (input && fileLabel) {
+      input.addEventListener("change", function () {
+        if (input.files.length > 0) {
+          fileLabel.textContent = input.files[0].name;
+        } else {
+          fileLabel.textContent = "Wybierz zdjęcie paragonu";
+        }
+      });
     }
 
-    const formData = new FormData();
-    formData.append("receipt", file);
+    form.addEventListener("submit", function (e) {
+      e.preventDefault();
 
-    const xhr = new XMLHttpRequest();
-    xhr.open("POST", form.action, true);
-    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
-
-    xhr.upload.onprogress = function (e) {
-      if (e.lengthComputable) {
-        const percent = Math.round((e.loaded / e.total) * 100);
-        progressBar.style.width = percent + "%";
-        progressBar.textContent = percent + "%";
+      const file = input.files[0];
+      if (!file) {
+        showToast("Nie wybrano pliku!", "warning");
+        return;
       }
-    };
 
-    xhr.onloadstart = function () {
-      progressContainer.style.display = "block";
-      progressBar.style.width = "0%";
-      progressBar.textContent = "0%";
-    };
+      const formData = new FormData();
+      formData.append("receipt", file);
 
-    xhr.onloadend = function () {
-      progressContainer.style.display = "none";
-      progressBar.style.width = "0%";
-      progressBar.textContent = "";
-      input.value = "";
-    };
+      const xhr = new XMLHttpRequest();
+      xhr.open("POST", form.action, true);
+      xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
 
-    xhr.onreadystatechange = function () {
-      if (xhr.readyState === XMLHttpRequest.DONE) {
-        if (xhr.status === 200) {
-          const res = JSON.parse(xhr.responseText);
-          if (res.success && res.url) {
+      xhr.upload.onprogress = function (e) {
+        if (e.lengthComputable) {
+          const percent = Math.round((e.loaded / e.total) * 100);
+          progressBar.style.width = percent + "%";
+          progressBar.textContent = percent + "%";
+        }
+      };
 
-            fetch(window.location.href)
-              .then(response => response.text())
-              .then(html => {
-                const parser = new DOMParser();
-                const doc = parser.parseFromString(html, "text/html");
-                const newGallery = doc.getElementById("receiptGallery");
-                if (newGallery) {
+      xhr.onloadstart = function () {
+        progressContainer.style.display = "block";
+        progressBar.style.width = "0%";
+        progressBar.textContent = "0%";
+      };
+
+      xhr.onloadend = function () {
+        progressContainer.style.display = "none";
+        progressBar.style.width = "0%";
+        progressBar.textContent = "";
+        input.value = "";
+
+        if (fileLabel) {
+          fileLabel.textContent = "Wybierz zdjęcie paragonu";
+        }
+      };
+
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+          if (xhr.status === 200) {
+            const res = JSON.parse(xhr.responseText);
+            if (res.success && res.url) {
+              fetch(window.location.href)
+                .then(response => response.text())
+                .then(html => {
+                  const parser = new DOMParser();
+                  const doc = parser.parseFromString(html, "text/html");
+                  const newGallery = doc.getElementById("receiptGallery");
+                  if (newGallery) {
                     gallery.innerHTML = newGallery.innerHTML;
 
-                    if (!receiptToastShown) {
-                        showToast("Wgrano paragon", "success");
-                        receiptToastShown = true;
-                    }
-                    socket.emit("receipt_uploaded", {
-                        list_id: LIST_ID,
-                        url: res.url
-                    });    
-                }
-              });
-          } else {
-            showToast(res.message || "Błąd podczas wgrywania.", "danger");
-          }
-        } else {
-          showToast("Błąd serwera. Spróbuj ponownie.", "danger");
-        }
-      }
-    };
+                    lightbox.destroy();
+                    lightbox = GLightbox({
+                      selector: '.glightbox'
+                    });
 
-    xhr.send(formData);
+                    if (!window.receiptToastShown) {
+                      showToast("Wgrano paragon", "success");
+                      window.receiptToastShown = true;
+                    }
+                  }
+                });
+            } else {
+              showToast(res.message || "Błąd podczas wgrywania.", "danger");
+            }
+          } else {
+            showToast("Błąd serwera. Spróbuj ponownie.", "danger");
+          }
+        }
+      };
+
+      xhr.send(formData);
+    });
   });
-});
+
+  window.receiptUploaderInitialized = true;
+}

static/js/sockets.js

@@ -78,6 +78,7 @@ socket.on('user_list', function(data) {
 });
 
 socket.on('receipt_added', function (data) {
+    
   const gallery = document.getElementById("receiptGallery");
   if (!gallery) return;
 
@@ -93,15 +94,15 @@ socket.on('receipt_added', function (data) {
     const col = document.createElement("div");
     col.className = "col-6 col-md-4 col-lg-3 text-center";
     col.innerHTML = `
-      <a href="${data.url}" data-lightbox="receipt" data-title="Paragon">
+      <a href="${data.url}" class="glightbox" data-gallery="receipt-gallery">
         <img src="${data.url}" class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
       </a>
     `;
     gallery.appendChild(col);
+    lightbox.reload();
   }
 });
 
-
 socket.on('full_list', function (data) {
   const itemsContainer = document.getElementById('items');
 

static/lib/css/lightbox.min.css

@@ -1 +0,0 @@
-.lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-outerContainer:after{content:"";display:table;clear:both}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{content:"";display:table;clear:both}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}