Compare commits

...

1 Commits

Author SHA1 Message Date
6a652af086 trial remove.bg 2025-08-29 16:30:29 +02:00
6 changed files with 419 additions and 247 deletions

View File

@ -31,6 +31,6 @@ Content-Length: 51
< strict-transport-security: max-age=2592000
< x-powered-by: ASP.NET
< x-content-type-options: nosniff
< date: Fri, 29 Aug 2025 13:36:31 GMT
< date: Fri, 29 Aug 2025 14:28:29 GMT
<
* Connection #0 to host 93.43.5.102 left intact

View File

@ -15,11 +15,11 @@
* [HTTP/2] [1] [:scheme: https]
* [HTTP/2] [1] [:authority: 93.43.5.102]
* [HTTP/2] [1] [:path: /limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues]
* [HTTP/2] [1] [authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NjQ4MTc5MSwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.066odH6XJ_XK1D_w6xYBCXncA6Hx1AgFqsanfvKULyk]
* [HTTP/2] [1] [authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NjQ4NDkwOSwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.VPLdAAvg-D2ReaPr7erRrgX70RQsySvuBXN284HFQ74]
* [HTTP/2] [1] [accept: application/json]
> GET /limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues HTTP/2
Host: 93.43.5.102
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NjQ4MTc5MSwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.066odH6XJ_XK1D_w6xYBCXncA6Hx1AgFqsanfvKULyk
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NjQ4NDkwOSwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.VPLdAAvg-D2ReaPr7erRrgX70RQsySvuBXN284HFQ74
Accept: application/json
< HTTP/2 200
@ -30,6 +30,6 @@ Accept: application/json
< odata-version: 4.0
< x-powered-by: ASP.NET
< x-content-type-options: nosniff
< date: Fri, 29 Aug 2025 13:36:33 GMT
< date: Fri, 29 Aug 2025 14:28:33 GMT
<
* Connection #0 to host 93.43.5.102 left intact

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,3 @@
<!-- Modal -->
<div class="modal fade" id="partsModal" tabindex="-1" aria-labelledby="partsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" style="max-width: 80% !important; width: 80% !important;">
<div class="modal-content">
@ -13,24 +12,24 @@
<ul id="partsList" class="list-group"></ul>
<table class="table table-striped table-sm mt-3" id="partsTable">
<thead>
<tr>
<th>Num. Parte</th>
<th>Descrizione Parte</th>
<th>Azioni</th>
</tr>
<tr>
<th>Num. Parte</th>
<th>Descrizione Parte</th>
<th>Azioni</th>
</tr>
</thead>
<tbody id="partsTableBody">
<tr data-part-id="new">
<td><input type="number" class="form-control form-control-sm part-number" value="1" style="width: 80px;"></td>
<td><input type="text" class="form-control form-control-sm part-description" placeholder="Inserisci descrizione" style="width: 100%;"></td>
<td>
<button type="button" class="btn btn-success btn-sm add-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
<button type="button" class="btn btn-primary btn-sm add-mix-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;">M</button>
<button type="button" class="btn btn-danger btn-sm remove-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem; display: none;"><i class="fas fa-trash fa-xs"></i></button>
<span class="save-status text-success" style="display: none; margin-left: 5px;"><i class="fas fa-check fa-xs"></i></span>
<span class="save-loading text-warning" style="display: none; margin-left: 5px;"><i class="fas fa-spinner fa-spin fa-xs"></i></span>
</td>
</tr>
<tr data-part-id="new">
<td><input type="number" class="form-control form-control-sm part-number" value="1" style="width: 80px;"></td>
<td><input type="text" class="form-control form-control-sm part-description" placeholder="Inserisci descrizione" style="width: 100%;"></td>
<td>
<button type="button" class="btn btn-success btn-sm add-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
<button type="button" class="btn btn-primary btn-sm add-mix-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;">M</button>
<button type="button" class="btn btn-danger btn-sm remove-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem; display: none;"><i class="fas fa-trash fa-xs"></i></button>
<span class="save-status text-success" style="display: none; margin-left: 5px;"><i class="fas fa-check fa-xs"></i></span>
<span class="save-loading text-warning" style="display: none; margin-left: 5px;"><i class="fas fa-spinner fa-spin fa-xs"></i></span>
</td>
</tr>
</tbody>
</table>
</div>
@ -50,6 +49,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" id="addDescriptionsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Aggiungi Lista Descrizioni</button>
<button type="button" class="btn btn-warning btn-sm" id="removeBackgroundBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rimuovi Sfondo</button>
<button type="button" class="btn btn-danger btn-sm" id="removeAnnotationsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rimuovi Annotazioni</button>
<button type="button" class="btn btn-success btn-sm" id="savePhotoBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Salva Foto con Nome</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Chiudi</button>
@ -146,23 +146,31 @@
font-size: 0.8rem;
}
/* ნორმალური Save ღილაკი */
/* Normale Save button */
#savePhotoBtn {
transition: all 0.3s ease-in-out;
}
/* დაუმახსოვრებელი ცვლილებები */
/* Modifiche non salvate */
#savePhotoBtn.unsaved {
background-color: #dc3545 !important; /* წითელი */
background-color: #dc3545 !important;
border-color: #dc3545 !important;
color: white !important;
animation: pulse 1.2s infinite;
}
/* ლამაზი პულსაცია */
/* Animazione di pulsazione */
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
70% { box-shadow: 0 0 10px 15px rgba(220, 53, 69, 0); }
100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
0% {
box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
}
70% {
box-shadow: 0 0 10px 15px rgba(220, 53, 69, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
}
}
</style>
</style>

View File

@ -2,7 +2,12 @@ $(document).ready(function () {
console.log("parts.js caricato correttamente");
// ===================
// GLOBAL STATE (NEW)
// CONFIGURAZIONE API Remove.bg
// ===================
const REMOVE_BG_API_KEY = "E85XGT5heTBUtWsf9zMLM7cg"; // Sostituisci con la tua chiave API
// ===================
// GLOBAL STATE
// ===================
let photoData = {
naturalWidth: 0,
@ -12,29 +17,36 @@ $(document).ready(function () {
scale: 1,
};
// markers keyed by photo src => [{ partNumber, x, y } using NATURAL coords]
let photoMarkers = {};
// selection & descriptions
let selectedPartNumber = null;
let descriptionPosition = {x: 10, y: 10}; // NATURAL coords
let descriptionPosition = { x: 10, y: 10 };
let hasDescriptions = false;
// Verifica inizializzazione del pulsante
console.log(
"Verifica pulsante #removeBackgroundBtn:",
$("#removeBackgroundBtn").length,
);
// ===================
// POPUP HANDLING
// ===================
const partsButtons = document.querySelectorAll(".parts-btn");
const partsModal = document.getElementById("partsModal");
const closeBtn = document.querySelector("#partsModal .close-btn");
const overlay = document.querySelector(".overlay");
partsButtons.forEach((button) => {
button.addEventListener("click", function () {
console.log("Pulsante Parts cliccato");
const iddatadb = $(this).data("iddatadb");
const rowIndex = $(this).data("row");
const importRef = $("table tbody tr").eq(rowIndex).find("td").eq(1).text();
const description = $("table tbody tr").eq(rowIndex).find("td").eq(2).text() || "Sconosciuto";
const importRef = $("table tbody tr")
.eq(rowIndex)
.find("td")
.eq(1)
.text();
const description =
$("table tbody tr").eq(rowIndex).find("td").eq(2).text() ||
"Sconosciuto";
$("#trfHeader").text(`${iddatadb} - ${importRef} - ${description}`);
$("#partsModal").data("iddatadb", iddatadb);
@ -45,66 +57,62 @@ $(document).ready(function () {
if (partsModal) {
const modal = new bootstrap.Modal(partsModal);
modal.show();
console.log("Modale aperto");
} else {
console.error("Modal Parts non trovato");
}
});
});
if (closeBtn) {
closeBtn.addEventListener("click", function () {
partsModal.style.display = "none";
overlay.style.display = "none";
document.body.style.pointerEvents = "auto";
});
}
if (partsModal) {
window.addEventListener("click", function (event) {
if (event.target === partsModal) {
partsModal.style.display = "none";
overlay.style.display = "none";
document.body.style.pointerEvents = "auto";
}
});
}
// ===================
// PHOTO LOADERS
// ===================
function loadPhoto(iddatadb) {
console.log("Caricamento foto per iddatadb:", iddatadb);
$.ajax({
url: "load_photo.php",
method: "GET",
data: {iddatadb: iddatadb},
data: { iddatadb: iddatadb },
success: function (response) {
console.log("Risposta load_photo.php:", response);
if (response.success) {
if (response.photos && response.photos.length > 1) {
showPhotoSelector(response.photos);
} else if (response.photos && response.photos.length === 1) {
} else if (
response.photos &&
response.photos.length === 1
) {
loadSinglePhoto(response.photos[0]);
} else {
$("#samplePhoto").attr("src", "");
alert("Nessuna foto trovata per questo TRF.");
console.log("Nessuna foto trovata");
}
} else {
alert(response.message || "Errore nel caricamento della foto.");
alert(
response.message ||
"Errore nel caricamento della foto.",
);
console.error("Errore load_photo.php:", response.message);
}
},
error: function (xhr, status, error) {
alert("Errore nel caricamento della foto: " + error);
console.error("Errore AJAX load_photo.php:", error, xhr.status);
},
});
}
function showPhotoSelector(photos) {
console.log("Mostra selettore foto:", photos);
const selectorContainer = $("#photoSelectorContainer");
selectorContainer.empty();
const selector = $('<select id="photoSelector"></select>');
photos.forEach((photo, index) => {
const option = $('<option></option>').val(photo).text(`Photo ${index + 1}`);
// display option with photo name if available
const option = $("<option></option>")
.val(photo)
.text(`Photo ${index + 1}`);
if (photo.includes("/")) {
const photoName = photo.split("/").pop();
option.text(`Photo ${index + 1} - ${photoName}`);
@ -127,49 +135,67 @@ $(document).ready(function () {
}
function loadSinglePhoto(photoPath) {
console.log("Caricamento singola foto:", photoPath);
const img = $("#samplePhoto");
img.off("load"); // avoid stacking multiple handlers
img.off("load");
img.attr("src", photoPath);
img.on("load", function () {
console.log(
"Immagine caricata, dimensioni naturali:",
img[0].naturalWidth,
img[0].naturalHeight,
);
const canvas = document.getElementById("photoCanvas");
const ctx = canvas.getContext("2d");
// Real image size
const naturalWidth = img[0].naturalWidth;
const naturalHeight = img[0].naturalHeight;
// Compute scale to FIT inside its parent without distorting aspect ratio
const parent = $(canvas).parent();
const maxW = parent.width();
const maxH = parent.height();
const scale = Math.min(maxW / naturalWidth, maxH / naturalHeight);
// Display size on screen
const displayWidth = Math.max(1, Math.round(naturalWidth * scale));
const displayHeight = Math.max(1, Math.round(naturalHeight * scale));
const displayHeight = Math.max(
1,
Math.round(naturalHeight * scale),
);
// Save globally
photoData = {naturalWidth, naturalHeight, displayWidth, displayHeight, scale};
photoData = {
naturalWidth,
naturalHeight,
displayWidth,
displayHeight,
scale,
};
// Canvas in REAL size (so saving uses natural coords 1:1)
canvas.width = naturalWidth;
canvas.height = naturalHeight;
// Visual size on screen
canvas.style.width = `${displayWidth}px`;
canvas.style.height = `${displayHeight}px`;
// Also size/align the overlay containers to match the canvas
$("#markerContainer").css({width: `${displayWidth}px`, height: `${displayHeight}px`});
$("#descriptionList").css({maxWidth: `${Math.max(200, Math.round(displayWidth * 0.35))}px`});
$("#markerContainer").css({
width: `${displayWidth}px`,
height: `${displayHeight}px`,
});
$("#descriptionList").css({
maxWidth: `${Math.max(200, Math.round(displayWidth * 0.35))}px`,
});
// Draw fresh image at full resolution
ctx.clearRect(0, 0, naturalWidth, naturalHeight);
ctx.drawImage(img.get(0), 0, 0, naturalWidth, naturalHeight);
updateMarkers();
if (hasDescriptions) drawDescriptions(descriptionPosition.x, descriptionPosition.y);
if (hasDescriptions)
drawDescriptions(descriptionPosition.x, descriptionPosition.y);
});
img.on("error", function () {
console.error("Errore caricamento immagine:", photoPath);
alert("Errore nel caricamento dell'immagine.");
});
}
@ -198,16 +224,19 @@ $(document).ready(function () {
const rowCount = $("#partsTableBody tr").length;
$("#partsTableBody tr").each(function () {
const $removeBtn = $(this).find(".remove-row");
if (rowCount > 1) $removeBtn.show(); else $removeBtn.hide();
if (rowCount > 1) $removeBtn.show();
else $removeBtn.hide();
});
}
$(document).on("click", ".add-row", function (e) {
e.preventDefault();
const maxPartNumber = Math.max(
...$("#partsTableBody tr").map(function () {
return parseInt($(this).find(".part-number").val()) || 0;
}).get(),
...$("#partsTableBody tr")
.map(function () {
return parseInt($(this).find(".part-number").val()) || 0;
})
.get(),
);
addNewRow(maxPartNumber + 1);
updatePartsList();
@ -216,9 +245,11 @@ $(document).ready(function () {
$(document).on("click", ".add-mix-row", function (e) {
e.preventDefault();
const maxPartNumber = Math.max(
...$("#partsTableBody tr").map(function () {
return parseInt($(this).find(".part-number").val()) || 0;
}).get(),
...$("#partsTableBody tr")
.map(function () {
return parseInt($(this).find(".part-number").val()) || 0;
})
.get(),
);
addNewRow(maxPartNumber + 1, true);
updatePartsList();
@ -233,7 +264,7 @@ $(document).ready(function () {
$.ajax({
url: "delete_part.php",
method: "POST",
data: JSON.stringify({part_id: partId}),
data: JSON.stringify({ part_id: partId }),
contentType: "application/json",
success: function (response) {
if (response.success) {
@ -246,7 +277,14 @@ $(document).ready(function () {
}
},
error: function (xhr, status, error) {
alert("Errore nell'eliminazione: " + error + ". Stato: " + xhr.status + " - " + xhr.responseText);
alert(
"Errore nell'eliminazione: " +
error +
". Stato: " +
xhr.status +
" - " +
xhr.responseText,
);
},
});
} else {
@ -266,7 +304,6 @@ $(document).ready(function () {
const iddatadb = $("#partsModal").data("iddatadb");
const isMix = partDescription.startsWith("Mix") ? "Y" : "N";
// არსებული part-id row-დან (თუ უკვე არსებობს)
const partId = $row.data("part-id") || null;
if (partDescription && iddatadb) {
@ -280,7 +317,7 @@ $(document).ready(function () {
iddatadb: iddatadb,
parts: [
{
id: partId, // გავგზავნე part-ის ID (თუ არის)
id: partId,
part_number: partNumber,
part_description: partDescription,
mix: isMix,
@ -293,7 +330,6 @@ $(document).ready(function () {
$saveLoading.hide();
$saveStatus.show();
updatePartsList();
// თუ ახალია, backend-მა მოგვცა ახალი ID
if (response.part_id) {
$row.attr("data-part-id", response.part_id);
$row.data("part-id", response.part_id);
@ -313,11 +349,13 @@ $(document).ready(function () {
});
function loadExistingParts(iddatadb) {
console.log("Caricamento parti esistenti per iddatadb:", iddatadb);
$.ajax({
url: "load_parts.php",
method: "GET",
data: {iddatadb: iddatadb},
data: { iddatadb: iddatadb },
success: function (response) {
console.log("Risposta load_parts.php:", response);
if (response.success) {
$("#partsTableBody").empty();
if (response.parts.length > 0) {
@ -342,12 +380,17 @@ $(document).ready(function () {
updateRowButtons();
updatePartsList();
} else {
alert("Errore nel caricamento delle parti: " + response.message);
alert(
"Errore nel caricamento delle parti: " +
response.message,
);
console.error("Errore load_parts.php:", response.message);
addNewRow(1);
}
},
error: function (xhr, status, error) {
alert("Errore nel caricamento delle parti: " + error);
console.error("Errore AJAX load_parts.php:", error, xhr.status);
addNewRow(1);
},
});
@ -358,7 +401,11 @@ $(document).ready(function () {
$("#partsTableBody tr").each(function () {
const partNumber = $(this).find(".part-number").val();
const partDescription = $(this).find(".part-description").val();
if (partNumber && partDescription && !partDescription.startsWith("Mix")) {
if (
partNumber &&
partDescription &&
!partDescription.startsWith("Mix")
) {
const listItem = `
<li class="list-group-item" data-part-number="${partNumber}">
${partNumber} - ${partDescription}
@ -372,9 +419,14 @@ $(document).ready(function () {
$(document).on("click", ".add-to-mix-btn", function () {
const $listItem = $(this).closest("li");
const partDescription = $listItem.text().split(" - ")[1].trim();
const $mixRow = $("#partsTableBody tr").filter(function () {
return $(this).find(".part-description").val().startsWith("Mix");
}).last();
const $mixRow = $("#partsTableBody tr")
.filter(function () {
return $(this)
.find(".part-description")
.val()
.startsWith("Mix");
})
.last();
if ($mixRow.length === 0) {
alert("Crea prima una riga Mix usando il pulsante 'M'.");
@ -416,22 +468,29 @@ $(document).ready(function () {
const clickX = e.clientX - rect.left;
const clickY = e.clientY - rect.top;
const x = clickX / photoData.scale; // convert to NATURAL coords
const x = clickX / photoData.scale;
const y = clickY / photoData.scale;
const currentPhoto = $("#samplePhoto").attr("src");
if (!photoMarkers[currentPhoto]) photoMarkers[currentPhoto] = [];
const existingMarker = photoMarkers[currentPhoto].find(m => m.partNumber == selectedPartNumber);
const existingMarker = photoMarkers[currentPhoto].find(
(m) => m.partNumber == selectedPartNumber,
);
if (existingMarker) {
existingMarker.x = x;
existingMarker.y = y;
} else {
photoMarkers[currentPhoto].push({partNumber: selectedPartNumber, x, y});
photoMarkers[currentPhoto].push({
partNumber: selectedPartNumber,
x,
y,
});
}
updateMarkers();
if (hasDescriptions) drawDescriptions(descriptionPosition.x, descriptionPosition.y);
if (hasDescriptions)
drawDescriptions(descriptionPosition.x, descriptionPosition.y);
selectedPartNumber = null;
$("#partsList li").removeClass("active");
@ -441,8 +500,10 @@ $(document).ready(function () {
const markerContainer = $("#markerContainer");
markerContainer.empty();
// keep overlay sized to canvas display
markerContainer.css({width: `${photoData.displayWidth}px`, height: `${photoData.displayHeight}px`});
markerContainer.css({
width: `${photoData.displayWidth}px`,
height: `${photoData.displayHeight}px`,
});
const currentPhoto = $("#samplePhoto").attr("src");
const markers = photoMarkers[currentPhoto] || [];
@ -451,7 +512,9 @@ $(document).ready(function () {
const scaledX = marker.x * photoData.scale;
const scaledY = marker.y * photoData.scale;
const $marker = $(`<div class="draggable-marker">${marker.partNumber}</div>`).css({
const $marker = $(
`<div class="draggable-marker">${marker.partNumber}</div>`,
).css({
left: scaledX - 8 + "px",
top: scaledY - 8 + "px",
});
@ -488,13 +551,12 @@ $(document).ready(function () {
currentX = Math.max(0, Math.min(currentX, maxX));
currentY = Math.max(0, Math.min(currentY, maxY));
$element.css({left: currentX + "px", top: currentY + "px"});
$element.css({ left: currentX + "px", top: currentY + "px" });
if (item && item.partNumber) {
item.x = (currentX + 8) / photoData.scale;
item.y = (currentY + 8) / photoData.scale;
} else {
// draggable description panel
descriptionPosition.x = (currentX + 5) / photoData.scale;
descriptionPosition.y = (currentY + 5) / photoData.scale;
}
@ -513,7 +575,11 @@ $(document).ready(function () {
$("#partsTableBody tr").each(function () {
const partNumber = $(this).find(".part-number").val();
const partDescription = $(this).find(".part-description").val();
if (partNumber && partDescription && !partDescription.startsWith("Mix")) {
if (
partNumber &&
partDescription &&
!partDescription.startsWith("Mix")
) {
partsList.push(`${partNumber} ${partDescription}`);
}
});
@ -525,7 +591,9 @@ $(document).ready(function () {
top: y * photoData.scale + "px",
left: x * photoData.scale + "px",
});
partsList.forEach((part) => descriptionList.append(`<div>${part}</div>`));
partsList.forEach((part) =>
descriptionList.append(`<div>${part}</div>`),
);
updateMarkers();
}
@ -540,7 +608,6 @@ $(document).ready(function () {
const canvas = document.getElementById("photoCanvas");
const ctx = canvas.getContext("2d");
// reset canvas to current image (keeps proportions)
canvas.width = photoData.naturalWidth;
canvas.height = photoData.naturalHeight;
canvas.style.width = `${photoData.displayWidth}px`;
@ -554,43 +621,156 @@ $(document).ready(function () {
}
$("#addDescriptionsBtn").on("click", function () {
console.log("Aggiungi descrizioni cliccato");
hasDescriptions = true;
descriptionPosition = {x: 10, y: 10};
descriptionPosition = { x: 10, y: 10 };
drawDescriptions(descriptionPosition.x, descriptionPosition.y);
makeDraggable($("#descriptionList"));
});
$("#removeAnnotationsBtn").on("click", function () {
console.log("Rimuovi annotazioni cliccato");
clearCanvasMarkers();
});
// ===================
// REMOVE BACKGROUND (Remove.bg)
// ===================
$("#removeBackgroundBtn").on("click", function () {
console.log("Pulsante Rimuovi Sfondo cliccato");
if (
!REMOVE_BG_API_KEY ||
REMOVE_BG_API_KEY === "INSERISCI_LA_TUA_CHIAVE_API"
) {
alert(
"Chiave API di Remove.bg non configurata. Inserisci una chiave valida.",
);
console.error("Chiave API non valida");
return;
}
const currentPhoto = $("#samplePhoto")[0];
if (!currentPhoto.src) {
alert("Nessuna foto selezionata.");
console.error("Nessuna immagine in #samplePhoto");
return;
}
console.log("Immagine corrente:", currentPhoto.src);
// Salva marker e descrizioni
const currentPhotoKey = currentPhoto.src;
const markers = photoMarkers[currentPhotoKey] || [];
const descPos = { ...descriptionPosition };
const hasDesc = hasDescriptions;
// Mostra spinner
$("#removeBackgroundBtn")
.html('<i class="fas fa-spinner fa-spin"></i> Elaborazione...')
.prop("disabled", true);
// Controlla se l'immagine è un URL pubblico o un dataURL
const formData = new FormData();
if (currentPhoto.src.startsWith("data:")) {
// Converti dataURL in blob
console.log("Immagine è un dataURL, conversione in blob...");
fetch(currentPhoto.src)
.then((res) => res.blob())
.then((blob) => {
formData.append("image_file", blob, "image.png");
formData.append("size", "auto");
sendRemoveBgRequest(formData, markers, descPos, hasDesc);
})
.catch((err) => {
console.error("Errore conversione dataURL in blob:", err);
alert("Errore nella conversione dell'immagine.");
$("#removeBackgroundBtn")
.html("Rimuovi Sfondo")
.prop("disabled", false);
});
} else {
// Usa URL pubblico
console.log("Immagine è un URL, invio diretto...");
formData.append("image_url", currentPhoto.src);
formData.append("size", "auto");
sendRemoveBgRequest(formData, markers, descPos, hasDesc);
}
});
function sendRemoveBgRequest(formData, markers, descPos, hasDesc) {
console.log("Invio richiesta a Remove.bg...");
$.ajax({
url: "https://api.remove.bg/v1.0/removebg",
method: "POST",
headers: {
"X-Api-Key": REMOVE_BG_API_KEY,
},
data: formData,
processData: false,
contentType: false,
success: function (response) {
console.log("Risposta Remove.bg ricevuta:", response);
// Ripristina il pulsante
$("#removeBackgroundBtn")
.html("Rimuovi Sfondo")
.prop("disabled", false);
// Imposta l'immagine senza sfondo
const dataURL =
"data:image/png;base64," + response.data.result_b64;
$("#samplePhoto").attr("src", dataURL);
// Ripristina marker e descrizioni
photoMarkers[dataURL] = markers;
descriptionPosition = descPos;
hasDescriptions = hasDesc;
loadSinglePhoto(dataURL);
markUnsaved();
},
error: function (xhr) {
console.error(
"Errore API Remove.bg:",
xhr.status,
xhr.responseText,
);
alert(
"Errore nella rimozione dello sfondo: " +
(xhr.responseJSON?.errors?.[0]?.title ||
xhr.statusText),
);
$("#removeBackgroundBtn")
.html("Rimuovi Sfondo")
.prop("disabled", false);
},
});
}
let unsavedChanges = false;
// --- helper functions ---
// --- helper functions ---
function markUnsaved() {
if (!unsavedChanges) {
unsavedChanges = true;
$("#savePhotoBtn").addClass("unsaved").text("⚠️ Salva Modifiche");
console.log("Modifiche non salvate segnate");
}
}
function clearUnsaved() {
unsavedChanges = false;
$("#savePhotoBtn").removeClass("unsaved").text("Salva Foto con Nome");
console.log("Modifiche salvate, stato ripristinato");
}
// --- event listeners ---
// როცა ვცვლით input-ს ცხრილში
// --- event listeners ---
$(document).on("input change", "#partsTableBody input", markUnsaved);
// როცა ვამატებთ/ვშლით რიგს
$(document).on("click", ".add-row, .add-mix-row, .remove-row", markUnsaved);
// თუ გაქვს draggable marker ან description list
$(document).on("markerChanged descriptionChanged", markUnsaved);
// --- modal close protection ---
$('#partsModal').on('hide.bs.modal', function (e) {
// --- modal close protection ---
$("#partsModal").on("hide.bs.modal", function (e) {
if (unsavedChanges) {
if (!confirm("Hai modifiche non salvate. Vuoi davvero uscire?")) {
e.preventDefault();
@ -598,147 +778,20 @@ $(document).ready(function () {
}
});
// --- SAVE BUTTON ---
// --- SAVE BUTTON (disabilitato per ora) ---
$("#savePhotoBtn").on("click", function () {
const canvas = document.getElementById("photoCanvas");
const ctx = canvas.getContext("2d");
const img = $("#samplePhoto");
// Ensure canvas is real size
const naturalWidth = img.get(0).naturalWidth;
const naturalHeight = img.get(0).naturalHeight;
canvas.width = naturalWidth;
canvas.height = naturalHeight;
// Redraw base image
ctx.drawImage(img.get(0), 0, 0, naturalWidth, naturalHeight);
// Descriptions box
const partsList = [];
$("#partsTableBody tr").each(function () {
const partNumber = $(this).find(".part-number").val();
const partDescription = $(this).find(".part-description").val();
if (partNumber && partDescription && !partDescription.startsWith("Mix")) {
partsList.push(`${partNumber} ${partDescription}`);
}
});
if (hasDescriptions && partsList.length > 0) {
const fontSize = Math.round(naturalWidth * 0.02);
ctx.font = fontSize + "px Arial";
const textHeight = fontSize + 8;
const boxWidth = Math.round(naturalWidth * 0.28);
const boxHeight = partsList.length * textHeight + 25;
const x = descriptionPosition.x;
const y = descriptionPosition.y;
// ჩრდილი
ctx.save();
ctx.shadowColor = "rgba(0,0,0,0.3)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
// ლამაზი ბექგრაუნდი
ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
ctx.beginPath();
ctx.roundRect(x, y, boxWidth, boxHeight, 12);
ctx.fill();
ctx.restore();
// ტექსტი
ctx.fillStyle = "#111111";
partsList.forEach((part, index) => {
const domWidth = $("#samplePhoto").width();
const domHeight = $("#samplePhoto").height();
// NATURAL ზომა (ფაილის რეალური ზომა)
const naturalWidth = photoData.naturalWidth;
const naturalHeight = photoData.naturalHeight;
// მასშტაბები
const scaleX = naturalWidth / domWidth;
const scaleY = naturalHeight / domHeight;
// გადაყვანილი კოორდინატები
const x = descriptionPosition.x * scaleX;
const y = descriptionPosition.y * scaleY;
ctx.fillText(part, x + 15, y + 35 + index * textHeight);
});
}
// Markers
const currentPhoto = $("#samplePhoto").attr("src");
const markers = photoMarkers[currentPhoto] || [];
markers.forEach((marker) => {
const x = marker.x; // already NATURAL coords
const y = marker.y;
const radius = Math.max(5, Math.round(naturalWidth * 0.025));
const fontSize = Math.max(8, Math.round(radius * 0.9));
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fillStyle = "rgba(255,0,0,0.85)";
ctx.fill();
ctx.lineWidth = 3;
ctx.strokeStyle = "#ffffff";
ctx.stroke();
ctx.fillStyle = "#ffffff";
ctx.font = `bold ${fontSize}px Arial`;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(marker.partNumber || "", x, y);
});
const dataURL = canvas.toDataURL("image/png");
const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
const iddatadb = $("#partsModal").data("iddatadb");
const defaultName = `photo_${iddatadb}_${timestamp}.png`;
const newName = prompt("Inserisci il nome del file (senza estensione):", defaultName.split(".png")[0]);
if (newName) {
const finalName = newName + "_" + timestamp + ".png";
$.ajax({
url: "save_annotated_photo.php",
method: "POST",
data: {
dataURL: dataURL,
filename: finalName,
iddatadb: iddatadb
},
success: function (response) {
if (response.success) {
alert("Foto salvata con successo: " + response.file_path);
$("#samplePhoto").attr("src", response.file_path);
loadPhoto(iddatadb);
clearCanvasMarkers();
clearUnsaved(); // ✅ reset unsaved status
} else {
alert("Errore: " + response.message);
}
},
error: function (xhr, status, error) {
alert("Errore Ajax: " + error);
},
});
}
alert("Funzionalità di salvataggio non implementata per ora.");
console.log("Pulsante Salva Foto cliccato");
});
// ===================
// DEBUG HOVER LOGS
// ===================
$(document).on("mouseenter", "tr", function () {
// console.log("Mouse entrato su riga");
console.log("Mouse entrato su riga");
});
$(document).on("mouseleave", "tr", function () {
// console.log("Mouse uscito da riga");
console.log("Mouse uscito da riga");
});
});

View File

@ -0,0 +1,55 @@
<?php
header('Content-Type: application/json');
$photo_path = $_POST['photo_path'] ?? '';
$iddatadb = $_POST['iddatadb'] ?? '';
if (empty($photo_path) || empty($iddatadb)) {
echo json_encode(['success' => false, 'message' => 'Parametri mancanti']);
exit;
}
// Verifica che il file esista
$full_path = realpath($photo_path);
if (!$full_path || !file_exists($full_path)) {
echo json_encode(['success' => false, 'message' => 'File non trovato']);
exit;
}
// Configurazione Remove.bg API
$api_key = 'YOUR_API_KEY'; // Inserisci la tua chiave API di Remove.bg
$api_url = 'https://api.remove.bg/v1.0/removebg';
// Preparazione della richiesta
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $api_url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, [
'image_file' => new CURLFile($full_path),
'size' => 'auto',
]);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'X-Api-Key: ' . $api_key
]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
// Esecuzione della richiesta
$response = curl_exec($ch);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($http_code !== 200) {
echo json_encode(['success' => false, 'message' => 'Errore API Remove.bg']);
exit;
}
// Salva l'immagine senza sfondo
$timestamp = date('YmdHis');
$new_filename = "no_bg_photo_{$iddatadb}_{$timestamp}.png";
$new_filepath = "uploads/{$new_filename}"; // Assumi una directory Uploads/
file_put_contents($new_filepath, $response);
// Aggiorna il database o il sistema di file con il nuovo percorso
// Qui potresti aggiungere logica per aggiornare il database con il nuovo percorso
echo json_encode(['success' => true, 'new_photo_path' => $new_filepath]);