solocla/trf_certest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mix part and loader

Browse Source
This commit is contained in:
Claudio
2025-07-30 15:43:14 +02:00
parent b3f19be47d
commit 6d66c5cf97
60 changed files with 3973 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/userarea/photos.js
+142 -3
View File
@@ -21,6 +21,89 @@ document.addEventListener("DOMContentLoaded", function () {
}
}
// Funzione per gestire la webcam
function setupWebcam(iddatadb) {
const openWebcamBtn = document.getElementById("openWebcamBtn");
const webcamArea = document.getElementById("webcamArea");
const webcamVideo = document.getElementById("webcamVideo");
const captureBtn = document.getElementById("captureBtn");
const closeWebcamBtn = document.getElementById("closeWebcamBtn");
let stream = null;
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
console.warn("La webcam non è supportata dal browser.");
if (openWebcamBtn) openWebcamBtn.style.display = "none";
return;
}
if (
!openWebcamBtn ||
!webcamArea ||
!webcamVideo ||
!captureBtn ||
!closeWebcamBtn
) {
console.error("Elementi webcam mancanti");
return;
}
// Apri la webcam
openWebcamBtn.addEventListener("click", async () => {
try {
stream = await navigator.mediaDevices.getUserMedia({
video: true,
});
webcamVideo.srcObject = stream;
webcamArea.style.display = "block";
openWebcamBtn.style.display = "none";
dropArea.style.display = "none";
} catch (error) {
alert("Errore nell'accesso alla webcam: " + error.message);
}
});
// Cattura la foto
captureBtn.addEventListener("click", () => {
const canvas = document.createElement("canvas");
canvas.width = webcamVideo.videoWidth;
canvas.height = webcamVideo.videoHeight;
canvas
.getContext("2d")
.drawImage(webcamVideo, 0, 0, canvas.width, canvas.height);
// Converti l'immagine in un file
canvas.toBlob(async (blob) => {
const file = new File(
[blob],
`webcam_photo_${Date.now()}.jpg`,
{ type: "image/jpeg" },
);
const loader = document.getElementById("loader");
if (loader) {
console.log("Mostro loader per upload webcam");
loader.style.display = "flex";
}
await handleFiles([file], iddatadb);
closeWebcam();
}, "image/jpeg");
});
// Chiudi la webcam
closeWebcamBtn.addEventListener("click", () => {
closeWebcam();
});
function closeWebcam() {
if (stream) {
stream.getTracks().forEach((track) => track.stop());
webcamVideo.srcObject = null;
webcamArea.style.display = "none";
openWebcamBtn.style.display = "block";
dropArea.style.display = "block";
}
}
}
// Funzione per attaccare gli event listener al contenuto del popup
function attachPhotoEventListeners(iddatadb) {
const dropArea = document.getElementById("dropArea");
@@ -67,17 +150,35 @@ document.addEventListener("DOMContentLoaded", function () {
dropArea.addEventListener(
"drop",
(e) => {
console.log("Evento drop attivato");
const files = e.dataTransfer.files;
handleFiles(files, iddatadb);
if (files.length > 0) {
handleFiles(files, iddatadb);
}
},
false,
);
dropArea.addEventListener("click", () => photoInput.click(), false);
dropArea.addEventListener(
"click",
() => {
console.log("Click su dropArea, apro input file");
photoInput.click();
},
false,
);
photoInput.addEventListener(
"change",
() => handleFiles(photoInput.files, iddatadb),
(e) => {
console.log("Evento change su photoInput");
const files = e.target.files;
if (files.length > 0) {
handleFiles(files, iddatadb);
}
// Resetta l'input per consentire il caricamento dello stesso file
e.target.value = "";
},
false,
);
@@ -116,6 +217,7 @@ document.addEventListener("DOMContentLoaded", function () {
// Gestione ingrandimento immagini
document.querySelectorAll(".thumbnail").forEach((img) => {
img.addEventListener("click", function () {
console.log("Click su thumbnail, apro modale immagine");
const enlargedImage = document.getElementById("enlargedImage");
enlargedImage.src = this.src;
document.getElementById("imageModal").style.display = "block";
@@ -126,6 +228,7 @@ document.addEventListener("DOMContentLoaded", function () {
const imageCloseBtn = document.querySelector(".image-modal-close");
if (imageCloseBtn) {
imageCloseBtn.addEventListener("click", () => {
console.log("Chiusura modale immagine");
document.getElementById("imageModal").style.display = "none";
});
}
@@ -133,18 +236,46 @@ document.addEventListener("DOMContentLoaded", function () {
.getElementById("imageModal")
.addEventListener("click", function (event) {
if (event.target === this) {
console.log(
"Chiusura modale immagine cliccando sullo sfondo",
);
this.style.display = "none";
}
});
// Inizializza la gestione della webcam
setupWebcam(iddatadb);
// Assicurati che il loader sia nascosto all'apertura del popup
const loader = document.getElementById("loader");
if (loader) {
console.log("Nascondo loader all'apertura del popup");
loader.style.display = "none";
}
}
// Funzione per gestire il caricamento dei file
async function handleFiles(files, iddatadb) {
const loader = document.getElementById("loader");
if (!loader) {
console.error("Elemento loader non trovato");
return;
}
if (!files || files.length === 0) {
console.warn("Nessun file da caricare");
return;
}
for (const file of files) {
if (!file.type.startsWith("image/")) {
alert("Per favore, carica solo immagini!");
continue;
}
console.log("Inizio upload del file:", file.name);
loader.style.display = "flex";
const formData = new FormData();
formData.append("photo", file);
formData.append("iddatadb", iddatadb);
@@ -155,12 +286,18 @@ document.addEventListener("DOMContentLoaded", function () {
});
const result = await response.json();
if (result.success) {
console.log(
"Upload completato con successo, ricarico popup",
);
loadPopupContent(iddatadb);
} else {
alert("Errore durante il caricamento: " + result.message);
}
} catch (error) {
alert("Errore durante il caricamento: " + error.message);
} finally {
console.log("Nascondo loader dopo upload");
loader.style.display = "none";
}
}
}
@@ -185,6 +322,7 @@ document.addEventListener("DOMContentLoaded", function () {
});
closeBtn.addEventListener("click", function () {
console.log("Chiusura modale photos");
photosModal.style.display = "none";
document.querySelector(".overlay").style.display = "none";
document.body.style.pointerEvents = "auto";
@@ -192,6 +330,7 @@ document.addEventListener("DOMContentLoaded", function () {
window.addEventListener("click", function (event) {
if (event.target === photosModal) {
console.log("Chiusura modale photos cliccando sullo sfondo");
photosModal.style.display = "none";
document.querySelector(".overlay").style.display = "none";
document.body.style.pointerEvents = "auto";