added collage, fixed parts marker color, added ri number
This commit is contained in:
parent
1303cff9fd
commit
0749032fbc
@ -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: Thu, 04 Sep 2025 12:59:20 GMT
|
||||
<
|
||||
* Connection #0 to host 93.43.5.102 left intact
|
||||
|
||||
@ -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.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1Njk5Nzk2MCwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.zHug3m3GFz-uMMbRXi70DlHNfw0Islrxyy5vdJ7RKtA]
|
||||
* [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.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1Njk5Nzk2MCwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.zHug3m3GFz-uMMbRXi70DlHNfw0Islrxyy5vdJ7RKtA
|
||||
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: Thu, 04 Sep 2025 12:59:23 GMT
|
||||
<
|
||||
* Connection #0 to host 93.43.5.102 left intact
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -948,6 +948,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
|
||||
</div>
|
||||
<?php include('jsinclude.php'); ?>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
|
||||
<script src="photos.js"></script>
|
||||
<script src="parts.js"></script>
|
||||
<script src="tracking.js"></script>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -692,6 +692,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
|
||||
</div>
|
||||
<?php include('jsinclude.php'); ?>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
|
||||
<script src="photos.js"></script>
|
||||
<script src="parts.js"></script>
|
||||
<script src="tracking.js"></script>
|
||||
|
||||
@ -9,28 +9,35 @@
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6>Elenco Parti</h6>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||
<h6 style="margin: 0; white-space: nowrap;">Elenco Parti</h6>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<input type="checkbox" id="showMixParts" name="showMixParts" style="margin-right: 5px;">
|
||||
<label for="showMixParts" style="font-size: 0.9rem; margin-right: 10px;">Mix</label>
|
||||
<button type="button" class="btn btn-info btn-sm" id="renumberPartsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rinumera Parti</button>
|
||||
</div>
|
||||
</div>
|
||||
<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,7 +57,8 @@
|
||||
</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-danger btn-sm" id="removeAnnotationsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rimuovi Annotazioni</button>
|
||||
<button type="button" class="btn btn-danger btn-sm" id="removeAnnotationsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rimuovi Descrizioni</button>
|
||||
<button type="button" class="btn btn-warning btn-sm" id="undoMarkerBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Undo Marker</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>
|
||||
</div>
|
||||
@ -99,12 +107,21 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
#partsList .list-group-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
#partsList input[type="color"] {
|
||||
width: 30px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.draggable-description {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
@ -121,8 +138,6 @@
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: rgba(255, 0, 0, 0.5);
|
||||
border: 1px solid #ff0000;
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
@ -146,23 +161,32 @@
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* ნორმალური Save ღილაკი */
|
||||
/* Normale Save button */
|
||||
#savePhotoBtn {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* დაუმახსოვრებელი ცვლილებები */
|
||||
/* Unsaved changes */
|
||||
#savePhotoBtn.unsaved {
|
||||
background-color: #dc3545 !important; /* წითელი */
|
||||
background-color: #dc3545 !important;
|
||||
/* Rosso */
|
||||
border-color: #dc3545 !important;
|
||||
color: white !important;
|
||||
animation: pulse 1.2s infinite;
|
||||
}
|
||||
|
||||
/* ლამაზი პულსაცია */
|
||||
/* Animazione pulsante */
|
||||
@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>
|
||||
@ -2,7 +2,7 @@ $(document).ready(function () {
|
||||
console.log("parts.js caricato correttamente");
|
||||
|
||||
// ===================
|
||||
// GLOBAL STATE (NEW)
|
||||
// GLOBAL STATE
|
||||
// ===================
|
||||
let photoData = {
|
||||
naturalWidth: 0,
|
||||
@ -12,13 +12,13 @@ $(document).ready(function () {
|
||||
scale: 1,
|
||||
};
|
||||
|
||||
// markers keyed by photo src => [{ partNumber, x, y } using NATURAL coords]
|
||||
let photoMarkers = {};
|
||||
// annotations keyed by photo src
|
||||
let photoAnnotations = {};
|
||||
// colors keyed by part number
|
||||
let partColors = {};
|
||||
|
||||
// selection & descriptions
|
||||
// selection
|
||||
let selectedPartNumber = null;
|
||||
let descriptionPosition = {x: 10, y: 10}; // NATURAL coords
|
||||
let hasDescriptions = false;
|
||||
|
||||
// ===================
|
||||
// POPUP HANDLING
|
||||
@ -33,8 +33,14 @@ $(document).ready(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);
|
||||
@ -76,19 +82,25 @@ $(document).ready(function () {
|
||||
$.ajax({
|
||||
url: "load_photo.php",
|
||||
method: "GET",
|
||||
data: {iddatadb: iddatadb},
|
||||
data: { iddatadb: iddatadb },
|
||||
success: function (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.");
|
||||
}
|
||||
} else {
|
||||
alert(response.message || "Errore nel caricamento della foto.");
|
||||
alert(
|
||||
response.message ||
|
||||
"Errore nel caricamento della foto.",
|
||||
);
|
||||
}
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
@ -103,8 +115,9 @@ $(document).ready(function () {
|
||||
|
||||
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}`);
|
||||
@ -135,41 +148,47 @@ $(document).ready(function () {
|
||||
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);
|
||||
updateDescriptions();
|
||||
});
|
||||
}
|
||||
|
||||
@ -178,6 +197,7 @@ $(document).ready(function () {
|
||||
// ===================
|
||||
function addNewRow(nextPartNumber, isMix = false) {
|
||||
const description = isMix ? "Mix" : "";
|
||||
const defaultColor = isMix ? "#0000ff" : "#ff0000";
|
||||
const newRow = `
|
||||
<tr data-part-id="">
|
||||
<td><input type="number" class="form-control form-control-sm part-number" value="${nextPartNumber || 1}" style="width: 80px;"></td>
|
||||
@ -192,22 +212,28 @@ $(document).ready(function () {
|
||||
</tr>`;
|
||||
$("#partsTableBody").append(newRow);
|
||||
updateRowButtons();
|
||||
// Initialize color for the new part
|
||||
const partNumber = nextPartNumber || 1;
|
||||
partColors[partNumber] = defaultColor;
|
||||
}
|
||||
|
||||
function updateRowButtons() {
|
||||
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 +242,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();
|
||||
@ -228,29 +256,39 @@ $(document).ready(function () {
|
||||
e.preventDefault();
|
||||
const $row = $(this).closest("tr");
|
||||
const partId = $row.data("part-id");
|
||||
const partNumber = $row.find(".part-number").val();
|
||||
|
||||
if (partId !== "new" && partId !== undefined && partId !== null) {
|
||||
$.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) {
|
||||
$row.remove();
|
||||
delete partColors[partNumber];
|
||||
updateRowButtons();
|
||||
updatePartsList();
|
||||
clearCanvasMarkers();
|
||||
clearCanvasMarkers(false); // Preserve descriptions
|
||||
} else {
|
||||
alert("Errore nell'eliminazione: " + response.message);
|
||||
}
|
||||
},
|
||||
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 {
|
||||
$row.remove();
|
||||
delete partColors[partNumber];
|
||||
updateRowButtons();
|
||||
updatePartsList();
|
||||
}
|
||||
@ -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);
|
||||
@ -312,16 +348,28 @@ $(document).ready(function () {
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("change", ".part-color", function () {
|
||||
const partNumber = $(this).closest("li").data("part-number");
|
||||
const partColor = $(this).val();
|
||||
partColors[partNumber] = partColor;
|
||||
updateMarkers();
|
||||
markUnsaved();
|
||||
});
|
||||
|
||||
function loadExistingParts(iddatadb) {
|
||||
$.ajax({
|
||||
url: "load_parts.php",
|
||||
method: "GET",
|
||||
data: {iddatadb: iddatadb},
|
||||
data: { iddatadb: iddatadb },
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
$("#partsTableBody").empty();
|
||||
if (response.parts.length > 0) {
|
||||
response.parts.forEach((part) => {
|
||||
const defaultColor =
|
||||
part.part_description.startsWith("Mix")
|
||||
? "#0000ff"
|
||||
: "#ff0000";
|
||||
const newRow = `
|
||||
<tr data-part-id="${part.id}">
|
||||
<td><input type="number" class="form-control form-control-sm part-number" value="${part.part_number}" style="width: 80px;"></td>
|
||||
@ -335,6 +383,7 @@ $(document).ready(function () {
|
||||
</td>
|
||||
</tr>`;
|
||||
$("#partsTableBody").append(newRow);
|
||||
partColors[part.part_number] = defaultColor;
|
||||
});
|
||||
} else {
|
||||
addNewRow(1);
|
||||
@ -342,7 +391,10 @@ $(document).ready(function () {
|
||||
updateRowButtons();
|
||||
updatePartsList();
|
||||
} else {
|
||||
alert("Errore nel caricamento delle parti: " + response.message);
|
||||
alert(
|
||||
"Errore nel caricamento delle parti: " +
|
||||
response.message,
|
||||
);
|
||||
addNewRow(1);
|
||||
}
|
||||
},
|
||||
@ -354,27 +406,138 @@ $(document).ready(function () {
|
||||
}
|
||||
|
||||
function updatePartsList() {
|
||||
const showMixParts = $("#showMixParts").is(":checked");
|
||||
$("#partsList").empty();
|
||||
$("#partsTableBody tr").each(function () {
|
||||
const partNumber = $(this).find(".part-number").val();
|
||||
const partDescription = $(this).find(".part-description").val();
|
||||
if (partNumber && partDescription && !partDescription.startsWith("Mix")) {
|
||||
const partColor =
|
||||
partColors[partNumber] ||
|
||||
(partDescription.startsWith("Mix") ? "#0000ff" : "#ff0000");
|
||||
if (
|
||||
partNumber &&
|
||||
partDescription &&
|
||||
(showMixParts || !partDescription.startsWith("Mix"))
|
||||
) {
|
||||
const listItem = `
|
||||
<li class="list-group-item" data-part-number="${partNumber}">
|
||||
${partNumber} - ${partDescription}
|
||||
<button type="button" class="btn btn-success btn-sm add-to-mix-btn" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<button type="button" class="btn btn-success btn-sm add-to-mix-btn" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
|
||||
<input type="color" class="part-color" value="${partColor}" style="margin-left: 5px;">
|
||||
</div>
|
||||
</li>`;
|
||||
$("#partsList").append(listItem);
|
||||
}
|
||||
});
|
||||
updateMarkers();
|
||||
}
|
||||
|
||||
function renumberParts() {
|
||||
const $rows = $("#partsTableBody tr");
|
||||
const iddatadb = $("#partsModal").data("iddatadb");
|
||||
let newPartColors = {};
|
||||
|
||||
// Raccogli tutte le righe con i loro dati attuali
|
||||
let partsData = $rows
|
||||
.map(function (index) {
|
||||
const $row = $(this);
|
||||
const partNumber = $row.find(".part-number").val();
|
||||
const partDescription = $row.find(".part-description").val();
|
||||
const partId = $row.data("part-id");
|
||||
return { partNumber, partDescription, partId };
|
||||
})
|
||||
.get();
|
||||
|
||||
// Rinumera in modo sequenziale
|
||||
partsData.forEach((part, index) => {
|
||||
const newNumber = index + 1;
|
||||
newPartColors[newNumber] = partColors[part.partNumber] || "#ff0000";
|
||||
part.partNumber = newNumber;
|
||||
});
|
||||
|
||||
// Aggiorna i valori nella tabella
|
||||
$rows.each(function (index) {
|
||||
const $row = $(this);
|
||||
$row.find(".part-number").val(index + 1);
|
||||
});
|
||||
|
||||
// Aggiorna partColors
|
||||
partColors = newPartColors;
|
||||
|
||||
// Aggiorna i marker nelle annotazioni
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
if (photoAnnotations[currentPhoto]) {
|
||||
photoAnnotations[currentPhoto].markers.forEach((marker) => {
|
||||
const oldPartNumber = marker.partNumber;
|
||||
const newPartNumber = partsData.find(
|
||||
(p) => p.partNumber == oldPartNumber,
|
||||
)?.partNumber;
|
||||
if (newPartNumber) {
|
||||
marker.partNumber = newPartNumber;
|
||||
marker.color = partColors[newPartNumber];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Salva le modifiche nel database
|
||||
const partsToSave = partsData.map((part) => ({
|
||||
id: part.partId || null,
|
||||
part_number: part.partNumber,
|
||||
part_description: part.partDescription,
|
||||
mix: part.partDescription.startsWith("Mix") ? "Y" : "N",
|
||||
}));
|
||||
|
||||
$.ajax({
|
||||
url: "save_parts.php",
|
||||
method: "POST",
|
||||
data: JSON.stringify({
|
||||
iddatadb: iddatadb,
|
||||
parts: partsToSave,
|
||||
}),
|
||||
contentType: "application/json",
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
$rows.each(function (index) {
|
||||
const $row = $(this);
|
||||
if (response.part_ids && response.part_ids[index]) {
|
||||
$row.attr("data-part-id", response.part_ids[index]);
|
||||
$row.data("part-id", response.part_ids[index]);
|
||||
}
|
||||
const $saveStatus = $row.find(".save-status");
|
||||
const $saveLoading = $row.find(".save-loading");
|
||||
$saveLoading.hide();
|
||||
$saveStatus.show();
|
||||
setTimeout(() => $saveStatus.hide(), 2000);
|
||||
});
|
||||
updatePartsList();
|
||||
updateMarkers();
|
||||
updateDescriptions();
|
||||
markUnsaved();
|
||||
} else {
|
||||
alert(
|
||||
"Errore nel salvataggio delle parti: " +
|
||||
response.message,
|
||||
);
|
||||
}
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
alert("Errore nel salvataggio delle parti: " + error);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
$(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'.");
|
||||
@ -398,11 +561,22 @@ $(document).ready(function () {
|
||||
});
|
||||
|
||||
$("#partsList").on("click", "li", function (e) {
|
||||
if ($(e.target).hasClass("add-to-mix-btn")) return;
|
||||
if (
|
||||
$(e.target).hasClass("add-to-mix-btn") ||
|
||||
$(e.target).hasClass("part-color")
|
||||
)
|
||||
return;
|
||||
selectedPartNumber = $(this).data("part-number");
|
||||
$(this).addClass("active").siblings().removeClass("active");
|
||||
});
|
||||
|
||||
$("#showMixParts").on("change", function () {
|
||||
updatePartsList();
|
||||
});
|
||||
|
||||
$("#renumberPartsBtn").on("click", function () {
|
||||
renumberParts();
|
||||
});
|
||||
// ===================
|
||||
// MARKERS & DESCRIPTIONS
|
||||
// ===================
|
||||
@ -420,18 +594,35 @@ $(document).ready(function () {
|
||||
const y = clickY / photoData.scale;
|
||||
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
if (!photoMarkers[currentPhoto]) photoMarkers[currentPhoto] = [];
|
||||
if (!photoAnnotations[currentPhoto]) {
|
||||
photoAnnotations[currentPhoto] = {
|
||||
markers: [],
|
||||
hasDescriptions: false,
|
||||
descriptionPosition: { x: 10, y: 10 },
|
||||
};
|
||||
}
|
||||
|
||||
const existingMarker = photoMarkers[currentPhoto].find(m => m.partNumber == selectedPartNumber);
|
||||
const partColor = partColors[selectedPartNumber] || "#ff0000";
|
||||
|
||||
const existingMarker = photoAnnotations[currentPhoto].markers.find(
|
||||
(m) => m.partNumber == selectedPartNumber,
|
||||
);
|
||||
if (existingMarker) {
|
||||
existingMarker.x = x;
|
||||
existingMarker.y = y;
|
||||
existingMarker.color = partColor;
|
||||
} else {
|
||||
photoMarkers[currentPhoto].push({partNumber: selectedPartNumber, x, y});
|
||||
photoAnnotations[currentPhoto].markers.push({
|
||||
partNumber: selectedPartNumber,
|
||||
x,
|
||||
y,
|
||||
color: partColor,
|
||||
});
|
||||
}
|
||||
|
||||
updateMarkers();
|
||||
if (hasDescriptions) drawDescriptions(descriptionPosition.x, descriptionPosition.y);
|
||||
updateDescriptions();
|
||||
markUnsaved();
|
||||
|
||||
selectedPartNumber = null;
|
||||
$("#partsList li").removeClass("active");
|
||||
@ -441,17 +632,41 @@ $(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] || [];
|
||||
const annotations = photoAnnotations[currentPhoto] || {
|
||||
markers: [],
|
||||
hasDescriptions: false,
|
||||
descriptionPosition: { x: 10, y: 10 },
|
||||
};
|
||||
const markers = annotations.markers;
|
||||
const showMixParts = $("#showMixParts").is(":checked");
|
||||
|
||||
markers.forEach((marker) => {
|
||||
const partRow = $("#partsTableBody tr").filter(function () {
|
||||
return $(this).find(".part-number").val() == marker.partNumber;
|
||||
});
|
||||
const partDescription = partRow.find(".part-description").val();
|
||||
if (
|
||||
!showMixParts &&
|
||||
partDescription &&
|
||||
partDescription.startsWith("Mix")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const scaledX = marker.x * photoData.scale;
|
||||
const scaledY = marker.y * photoData.scale;
|
||||
const markerColor =
|
||||
marker.color || partColors[marker.partNumber] || "#ff0000";
|
||||
|
||||
const $marker = $(`<div class="draggable-marker">${marker.partNumber}</div>`).css({
|
||||
const $marker = $(
|
||||
`<div class="draggable-marker" style="background: ${markerColor}; border: 1px solid ${markerColor}; color: #ffffff;">${marker.partNumber}</div>`,
|
||||
).css({
|
||||
left: scaledX - 8 + "px",
|
||||
top: scaledY - 8 + "px",
|
||||
});
|
||||
@ -488,15 +703,21 @@ $(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;
|
||||
markUnsaved();
|
||||
} else {
|
||||
// draggable description panel
|
||||
descriptionPosition.x = (currentX + 5) / photoData.scale;
|
||||
descriptionPosition.y = (currentY + 5) / photoData.scale;
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
if (photoAnnotations[currentPhoto]) {
|
||||
photoAnnotations[currentPhoto].descriptionPosition.x =
|
||||
(currentX + 5) / photoData.scale;
|
||||
photoAnnotations[currentPhoto].descriptionPosition.y =
|
||||
(currentY + 5) / photoData.scale;
|
||||
markUnsaved();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -508,39 +729,65 @@ $(document).ready(function () {
|
||||
});
|
||||
}
|
||||
|
||||
function drawDescriptions(x, y) {
|
||||
function updateDescriptions() {
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
const annotations = photoAnnotations[currentPhoto] || {
|
||||
markers: [],
|
||||
hasDescriptions: false,
|
||||
descriptionPosition: { x: 10, y: 10 },
|
||||
};
|
||||
const showMixParts = $("#showMixParts").is(":checked");
|
||||
|
||||
const descriptionList = $("#descriptionList");
|
||||
descriptionList.empty();
|
||||
|
||||
if (!annotations.hasDescriptions) {
|
||||
descriptionList.css("display", "none");
|
||||
return;
|
||||
}
|
||||
|
||||
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")) {
|
||||
if (
|
||||
partNumber &&
|
||||
partDescription &&
|
||||
(showMixParts || !partDescription.startsWith("Mix"))
|
||||
) {
|
||||
partsList.push(`${partNumber} ${partDescription}`);
|
||||
}
|
||||
});
|
||||
|
||||
const descriptionList = $("#descriptionList");
|
||||
descriptionList.empty();
|
||||
descriptionList.css({
|
||||
display: "block",
|
||||
top: y * photoData.scale + "px",
|
||||
left: x * photoData.scale + "px",
|
||||
top: annotations.descriptionPosition.y * photoData.scale + "px",
|
||||
left: annotations.descriptionPosition.x * photoData.scale + "px",
|
||||
});
|
||||
partsList.forEach((part) => descriptionList.append(`<div>${part}</div>`));
|
||||
partsList.forEach((part) =>
|
||||
descriptionList.append(`<div>${part}</div>`),
|
||||
);
|
||||
|
||||
updateMarkers();
|
||||
}
|
||||
|
||||
function clearCanvasMarkers() {
|
||||
function clearCanvasMarkers(clearDescriptions = true) {
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
photoMarkers[currentPhoto] = [];
|
||||
hasDescriptions = false;
|
||||
$("#descriptionList").css("display", "none");
|
||||
if (clearDescriptions) {
|
||||
if (photoAnnotations[currentPhoto]) {
|
||||
photoAnnotations[currentPhoto].hasDescriptions = false;
|
||||
photoAnnotations[currentPhoto].descriptionPosition = {
|
||||
x: 10,
|
||||
y: 10,
|
||||
};
|
||||
}
|
||||
$("#descriptionList").css("display", "none");
|
||||
}
|
||||
$("#markerContainer").empty();
|
||||
|
||||
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`;
|
||||
@ -551,22 +798,49 @@ $(document).ready(function () {
|
||||
if (img[0].naturalWidth) {
|
||||
ctx.drawImage(img.get(0), 0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
markUnsaved();
|
||||
updateMarkers();
|
||||
}
|
||||
|
||||
function undoLastMarker() {
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
if (
|
||||
photoAnnotations[currentPhoto] &&
|
||||
photoAnnotations[currentPhoto].markers.length > 0
|
||||
) {
|
||||
photoAnnotations[currentPhoto].markers.pop();
|
||||
updateMarkers();
|
||||
updateDescriptions();
|
||||
markUnsaved();
|
||||
}
|
||||
}
|
||||
|
||||
$("#addDescriptionsBtn").on("click", function () {
|
||||
hasDescriptions = true;
|
||||
descriptionPosition = {x: 10, y: 10};
|
||||
drawDescriptions(descriptionPosition.x, descriptionPosition.y);
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
if (!photoAnnotations[currentPhoto]) {
|
||||
photoAnnotations[currentPhoto] = {
|
||||
markers: [],
|
||||
hasDescriptions: false,
|
||||
descriptionPosition: { x: 10, y: 10 },
|
||||
};
|
||||
}
|
||||
photoAnnotations[currentPhoto].hasDescriptions = true;
|
||||
updateDescriptions();
|
||||
makeDraggable($("#descriptionList"));
|
||||
markUnsaved();
|
||||
});
|
||||
|
||||
$("#removeAnnotationsBtn").on("click", function () {
|
||||
clearCanvasMarkers();
|
||||
clearCanvasMarkers(true); // Remove only descriptions
|
||||
});
|
||||
|
||||
$("#undoMarkerBtn").on("click", function () {
|
||||
undoLastMarker();
|
||||
});
|
||||
|
||||
let unsavedChanges = false;
|
||||
|
||||
// --- helper functions ---
|
||||
// --- helper functions ---
|
||||
function markUnsaved() {
|
||||
if (!unsavedChanges) {
|
||||
unsavedChanges = true;
|
||||
@ -579,18 +853,13 @@ $(document).ready(function () {
|
||||
$("#savePhotoBtn").removeClass("unsaved").text("Salva Foto con Nome");
|
||||
}
|
||||
|
||||
// --- 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,94 +867,99 @@ $(document).ready(function () {
|
||||
}
|
||||
});
|
||||
|
||||
// --- SAVE BUTTON ---
|
||||
// --- SAVE BUTTON ---
|
||||
$("#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}`);
|
||||
}
|
||||
});
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
const annotations = photoAnnotations[currentPhoto] || {
|
||||
markers: [],
|
||||
hasDescriptions: false,
|
||||
descriptionPosition: { x: 10, y: 10 },
|
||||
};
|
||||
const showMixParts = $("#showMixParts").is(":checked");
|
||||
|
||||
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);
|
||||
if (annotations.hasDescriptions) {
|
||||
const partsList = [];
|
||||
$("#partsTableBody tr").each(function () {
|
||||
const partNumber = $(this).find(".part-number").val();
|
||||
const partDescription = $(this).find(".part-description").val();
|
||||
if (
|
||||
partNumber &&
|
||||
partDescription &&
|
||||
(showMixParts || !partDescription.startsWith("Mix"))
|
||||
) {
|
||||
partsList.push(`${partNumber} ${partDescription}`);
|
||||
}
|
||||
});
|
||||
|
||||
if (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 = annotations.descriptionPosition.x;
|
||||
const y = annotations.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) => {
|
||||
ctx.fillText(part, x + 15, y + 35 + index * textHeight);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Markers
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
const markers = photoMarkers[currentPhoto] || [];
|
||||
const markers = annotations.markers;
|
||||
markers.forEach((marker) => {
|
||||
const x = marker.x; // already NATURAL coords
|
||||
const partRow = $("#partsTableBody tr").filter(function () {
|
||||
return $(this).find(".part-number").val() == marker.partNumber;
|
||||
});
|
||||
const partDescription = partRow.find(".part-description").val();
|
||||
if (
|
||||
!showMixParts &&
|
||||
partDescription &&
|
||||
partDescription.startsWith("Mix")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const x = marker.x;
|
||||
const y = marker.y;
|
||||
const radius = Math.max(5, Math.round(naturalWidth * 0.025));
|
||||
const fontSize = Math.max(8, Math.round(radius * 0.9));
|
||||
const markerColor =
|
||||
marker.color || partColors[marker.partNumber] || "#ff0000";
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = "rgba(255,0,0,0.85)";
|
||||
ctx.fillStyle = markerColor; // Use the stored color
|
||||
ctx.fill();
|
||||
|
||||
ctx.lineWidth = 3;
|
||||
ctx.strokeStyle = "#ffffff";
|
||||
ctx.strokeStyle = markerColor; // Use the same color for the border
|
||||
ctx.stroke();
|
||||
|
||||
ctx.fillStyle = "#ffffff";
|
||||
@ -700,7 +974,10 @@ $(document).ready(function () {
|
||||
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]);
|
||||
const newName = prompt(
|
||||
"Inserisci il nome del file (senza estensione):",
|
||||
defaultName.split(".png")[0],
|
||||
);
|
||||
|
||||
if (newName) {
|
||||
const finalName = newName + "_" + timestamp + ".png";
|
||||
@ -710,16 +987,17 @@ $(document).ready(function () {
|
||||
data: {
|
||||
dataURL: dataURL,
|
||||
filename: finalName,
|
||||
iddatadb: iddatadb
|
||||
iddatadb: iddatadb,
|
||||
},
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
alert("Foto salvata con successo: " + response.file_path);
|
||||
alert(
|
||||
"Foto salvata con successo: " + response.file_path,
|
||||
);
|
||||
$("#samplePhoto").attr("src", response.file_path);
|
||||
loadPhoto(iddatadb);
|
||||
clearCanvasMarkers();
|
||||
|
||||
clearUnsaved(); // ✅ reset unsaved status
|
||||
clearCanvasMarkers(false); // Preserve descriptions
|
||||
clearUnsaved();
|
||||
} else {
|
||||
alert("Errore: " + response.message);
|
||||
}
|
||||
|
||||
@ -187,6 +187,54 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
}
|
||||
|
||||
// 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);
|
||||
try {
|
||||
const response = await fetch("upload_photo.php", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
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";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Funzione per attaccare gli event listener al contenuto del popup
|
||||
function attachPhotoEventListeners(iddatadb) {
|
||||
const dropArea = document.getElementById("dropArea");
|
||||
@ -332,6 +380,162 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
// Inizializza la gestione della webcam
|
||||
setupWebcam(iddatadb);
|
||||
|
||||
// Gestione bottone Crea Collage
|
||||
const createCollageBtn = document.getElementById("createCollageBtn");
|
||||
if (createCollageBtn) {
|
||||
createCollageBtn.addEventListener("click", () => {
|
||||
console.log("Apertura modale collage");
|
||||
document.getElementById("collageModal").style.display = "block";
|
||||
initCollageCanvas();
|
||||
});
|
||||
}
|
||||
|
||||
// Chiusura modale collage
|
||||
const closeCollageBtn = document.querySelector(".close-collage");
|
||||
if (closeCollageBtn) {
|
||||
closeCollageBtn.addEventListener("click", () => {
|
||||
console.log("Chiusura modale collage");
|
||||
document.getElementById("collageModal").style.display = "none";
|
||||
});
|
||||
}
|
||||
|
||||
// Inizializza canvas con Fabric.js
|
||||
let canvas;
|
||||
function initCollageCanvas() {
|
||||
if (typeof fabric === "undefined") {
|
||||
console.error("Fabric.js non è caricato!");
|
||||
alert(
|
||||
"Errore: Fabric.js non è disponibile. Controlla la connessione al CDN.",
|
||||
);
|
||||
return;
|
||||
}
|
||||
canvas = new fabric.Canvas("collageCanvas", {
|
||||
backgroundColor: "#fff",
|
||||
selection: true,
|
||||
});
|
||||
// Abilita ridimensionamento e trascinamento
|
||||
canvas.on("object:modified", () => canvas.renderAll());
|
||||
}
|
||||
|
||||
// Aggiungi foto selezionate al canvas
|
||||
const addToCanvasBtn = document.getElementById("addToCanvasBtn");
|
||||
if (addToCanvasBtn) {
|
||||
addToCanvasBtn.addEventListener("click", () => {
|
||||
const checkboxes = document.querySelectorAll(
|
||||
".photo-checkbox:checked",
|
||||
);
|
||||
if (checkboxes.length === 0) {
|
||||
alert("Seleziona almeno una foto!");
|
||||
return;
|
||||
}
|
||||
checkboxes.forEach((cb) => {
|
||||
const imgPath = cb.getAttribute("data-path");
|
||||
fabric.Image.fromURL(imgPath, (img) => {
|
||||
img.set({
|
||||
left: Math.random() * 600, // Posizione random iniziale
|
||||
top: Math.random() * 400,
|
||||
scaleX: 0.5, // Scala iniziale
|
||||
scaleY: 0.5,
|
||||
hasControls: true, // Abilita resize/rotate
|
||||
hasBorders: true,
|
||||
});
|
||||
canvas.add(img);
|
||||
canvas.renderAll();
|
||||
});
|
||||
});
|
||||
// Deseleziona checkbox dopo aggiunta
|
||||
checkboxes.forEach((cb) => (cb.checked = false));
|
||||
});
|
||||
}
|
||||
|
||||
// Salva collage
|
||||
const saveCollageBtn = document.getElementById("saveCollageBtn");
|
||||
if (saveCollageBtn) {
|
||||
saveCollageBtn.addEventListener("click", async () => {
|
||||
if (canvas.getObjects().length === 0) {
|
||||
alert("Il canvas è vuoto! Aggiungi almeno una foto.");
|
||||
return;
|
||||
}
|
||||
const dataURL = canvas.toDataURL({
|
||||
format: "jpeg",
|
||||
quality: 0.8,
|
||||
});
|
||||
const blob = await (await fetch(dataURL)).blob();
|
||||
const file = new File([blob], `collage_${Date.now()}.jpg`, {
|
||||
type: "image/jpeg",
|
||||
});
|
||||
|
||||
// Upload come nuova foto
|
||||
await handleFiles([file], iddatadb);
|
||||
// Chiudi modale e ricarica popup
|
||||
document.getElementById("collageModal").style.display = "none";
|
||||
loadPopupContent(iddatadb);
|
||||
});
|
||||
}
|
||||
|
||||
// Pulisci canvas
|
||||
const clearCanvasBtn = document.getElementById("clearCanvasBtn");
|
||||
if (clearCanvasBtn) {
|
||||
clearCanvasBtn.addEventListener("click", () => {
|
||||
canvas.clear();
|
||||
canvas.setBackgroundColor("#fff");
|
||||
canvas.renderAll();
|
||||
});
|
||||
}
|
||||
|
||||
// Gestione livelli delle immagini
|
||||
const bringToFrontBtn = document.getElementById("bringToFrontBtn");
|
||||
if (bringToFrontBtn) {
|
||||
bringToFrontBtn.addEventListener("click", () => {
|
||||
const activeObject = canvas.getActiveObject();
|
||||
if (activeObject) {
|
||||
canvas.bringToFront(activeObject);
|
||||
canvas.renderAll();
|
||||
} else {
|
||||
alert("Seleziona un'immagine sul canvas!");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const sendToBackBtn = document.getElementById("sendToBackBtn");
|
||||
if (sendToBackBtn) {
|
||||
sendToBackBtn.addEventListener("click", () => {
|
||||
const activeObject = canvas.getActiveObject();
|
||||
if (activeObject) {
|
||||
canvas.sendToBack(activeObject);
|
||||
canvas.renderAll();
|
||||
} else {
|
||||
alert("Seleziona un'immagine sul canvas!");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const bringForwardBtn = document.getElementById("bringForwardBtn");
|
||||
if (bringForwardBtn) {
|
||||
bringForwardBtn.addEventListener("click", () => {
|
||||
const activeObject = canvas.getActiveObject();
|
||||
if (activeObject) {
|
||||
canvas.bringForward(activeObject);
|
||||
canvas.renderAll();
|
||||
} else {
|
||||
alert("Seleziona un'immagine sul canvas!");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const sendBackwardBtn = document.getElementById("sendBackwardBtn");
|
||||
if (sendBackwardBtn) {
|
||||
sendBackwardBtn.addEventListener("click", () => {
|
||||
const activeObject = canvas.getActiveObject();
|
||||
if (activeObject) {
|
||||
canvas.sendBackwards(activeObject);
|
||||
canvas.renderAll();
|
||||
} else {
|
||||
alert("Seleziona un'immagine sul canvas!");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Assicurati che il loader sia nascosto all'apertura del popup
|
||||
const loader = document.getElementById("loader");
|
||||
if (loader) {
|
||||
@ -340,54 +544,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
try {
|
||||
const response = await fetch("upload_photo.php", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
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";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Gestione del pulsante Photos
|
||||
const photosButtons = document.querySelectorAll(".photos-btn");
|
||||
const photosModal = document.getElementById("photosModal");
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<?php
|
||||
// photos_popup.php
|
||||
include('include/headscript.php');
|
||||
// Includi Fabric.js solo per questa pagina
|
||||
?>
|
||||
|
||||
<?php
|
||||
// Includi l'autoloader di Composer
|
||||
require_once __DIR__ . '/../../vendor/autoload.php';
|
||||
|
||||
@ -116,7 +120,6 @@ $result->saveToFile($qrCodeFile);
|
||||
<input type="file" id="photoInput" multiple accept="image/*" style="display: none;">
|
||||
</div>
|
||||
<!-- Area per la webcam -->
|
||||
<!-- Area per la webcam -->
|
||||
<div id="webcamArea" style="display: none; text-align: center; margin-bottom: 20px;">
|
||||
<p>Webcam Preview</p>
|
||||
<select id="webcamSelect" style="margin-bottom: 10px; padding: 5px;">
|
||||
@ -128,7 +131,8 @@ $result->saveToFile($qrCodeFile);
|
||||
<button id="closeWebcamBtn" style="padding: 10px 20px; background: #dc3545; color: white; border: none; cursor: pointer;">Close Webcam</button>
|
||||
</div>
|
||||
</div>
|
||||
<button id="openWebcamBtn" style="padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; margin-bottom: 20px;">Take Photo with Webcam</button> <!-- Elenco delle foto -->
|
||||
<button id="openWebcamBtn" style="padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; margin-bottom: 20px;">Take Photo with Webcam</button>
|
||||
<!-- Elenco delle foto -->
|
||||
<div id="photosList">
|
||||
<?php if (empty($photos)): ?>
|
||||
<p>No Photos present.</p>
|
||||
@ -156,6 +160,8 @@ $result->saveToFile($qrCodeFile);
|
||||
</button>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<!-- Bottone Crea Collage -->
|
||||
<button id="createCollageBtn" style="padding: 10px 20px; background: #ffc107; color: white; border: none; cursor: pointer; margin-top: 20px;">Crea Collage</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
@ -164,6 +170,40 @@ $result->saveToFile($qrCodeFile);
|
||||
<span class="image-modal-close">×</span>
|
||||
<img id="enlargedImage" class="image-modal-content" src="" alt="Immagine ingrandita">
|
||||
</div>
|
||||
|
||||
<!-- Nuovo modale per collage -->
|
||||
<div id="collageModal" class="modal" style="display: none; position: fixed; z-index: 1002; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8);">
|
||||
<div class="modal-content" style="background: white; margin: 5% auto; padding: 20px; width: 80%; max-width: 1200px; position: relative;">
|
||||
<span class="close-collage" style="position: absolute; top: 10px; right: 20px; font-size: 30px; cursor: pointer;">×</span>
|
||||
<h3>Crea Collage</h3>
|
||||
|
||||
<!-- Lista foto selezionabili -->
|
||||
<div id="collagePhotoList" style="max-height: 200px; overflow-y: auto; margin-bottom: 20px;">
|
||||
<?php foreach ($photos as $photo): ?>
|
||||
<div style="display: inline-block; margin: 10px;">
|
||||
<input type="checkbox" class="photo-checkbox" data-path="../photostrf/<?= htmlspecialchars($photo['file_path']) ?>">
|
||||
<img src="../photostrf/<?= htmlspecialchars($photo['file_path']) ?>" alt="" style="width: 80px; height: 80px;">
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<!-- Bottone per aggiungere selezionate al canvas -->
|
||||
<button id="addToCanvasBtn">Aggiungi Selezionate al Canvas</button>
|
||||
|
||||
<!-- Canvas per editing -->
|
||||
<canvas id="collageCanvas" width="800" height="600" style="border: 1px solid #ccc; margin-top: 20px;"></canvas>
|
||||
|
||||
<!-- Bottoni azioni -->
|
||||
<div style="margin-top: 20px;">
|
||||
<button id="saveCollageBtn">Salva Collage</button>
|
||||
<button id="clearCanvasBtn">Pulisci Canvas</button>
|
||||
<button id="bringToFrontBtn" title="Porta in primo piano">In Alto</button>
|
||||
<button id="sendToBackBtn" title="Manda in fondo">In Fondo</button>
|
||||
<button id="bringForwardBtn" title="Sposta avanti di un livello">Avanti</button>
|
||||
<button id="sendBackwardBtn" title="Sposta indietro di un livello">Indietro</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user