added controller for QR photo upload and inserted route for it. added functional for multiple photo upload.
This commit is contained in:
@@ -14,13 +14,18 @@ if (!$iddatadb) {
|
||||
}
|
||||
|
||||
try {
|
||||
$stmt = $pdo->prepare("SELECT file_path FROM datadb_photos WHERE iddatadb = :iddatadb LIMIT 1");
|
||||
// Adjust the query to select all photo paths for the given iddatadb
|
||||
$stmt = $pdo->prepare("SELECT file_path FROM datadb_photos WHERE iddatadb = :iddatadb");
|
||||
$stmt->execute([':iddatadb' => $iddatadb]);
|
||||
$photo = $stmt->fetch(PDO::FETCH_ASSOC);
|
||||
$photos = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
|
||||
if ($photo && $photo['file_path']) {
|
||||
$fullPath = '../photostrf/' . $photo['file_path']; // Assumi che le foto siano nella cartella photostrf
|
||||
echo json_encode(['success' => true, 'file_path' => $fullPath]);
|
||||
if ($photos && count($photos) > 0) {
|
||||
// Prepare an array of full file paths
|
||||
$photoPaths = array_map(function($photo) {
|
||||
return '../photostrf/' . $photo['file_path']; // Assuming the photos are stored in the "photostrf" folder
|
||||
}, $photos);
|
||||
|
||||
echo json_encode(['success' => true, 'photos' => $photoPaths]); // Return an array of photo paths
|
||||
} else {
|
||||
echo json_encode(['success' => false, 'message' => 'Nessuna foto trovata']);
|
||||
}
|
||||
|
||||
@@ -13,29 +13,32 @@
|
||||
<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>
|
||||
<div class="col-md-6">
|
||||
<h6>Foto del Campione</h6>
|
||||
<div id="photoSelectorContainer" style="display: none;">
|
||||
<!-- Dropdown or buttons for photo selection will appear here -->
|
||||
</div>
|
||||
<div style="position: relative; width: 100%; min-height: 400px;">
|
||||
<img id="samplePhoto" src="" alt="Foto del campione" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute; top: 0; left: 0;">
|
||||
<canvas id="photoCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>
|
||||
@@ -142,4 +145,4 @@
|
||||
padding: 0.1rem 0.3rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+58
-28
@@ -61,35 +61,19 @@ $(document).ready(function () {
|
||||
method: "GET",
|
||||
data: { iddatadb: iddatadb },
|
||||
success: function (response) {
|
||||
if (response.success && response.file_path) {
|
||||
const img = $("#samplePhoto");
|
||||
img.attr("src", response.file_path);
|
||||
img.on("load", function () {
|
||||
const container = img.parent();
|
||||
const canvas = document.getElementById("photoCanvas");
|
||||
const containerWidth = container.width();
|
||||
const containerHeight = container.height();
|
||||
const scaleX = containerWidth / img[0].naturalWidth;
|
||||
const scaleY = containerHeight / img[0].naturalHeight;
|
||||
const scale = Math.min(scaleX, scaleY);
|
||||
canvas.width = img[0].naturalWidth * scale;
|
||||
canvas.height = img[0].naturalHeight * scale;
|
||||
canvas.style.width = `${containerWidth}px`;
|
||||
canvas.style.height = `${containerHeight}px`;
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(
|
||||
img.get(0),
|
||||
0,
|
||||
0,
|
||||
canvas.width,
|
||||
canvas.height,
|
||||
);
|
||||
updateMarkers();
|
||||
});
|
||||
if (response.success) {
|
||||
if (response.photos && response.photos.length > 1) {
|
||||
// Multiple photos available, create a selector
|
||||
showPhotoSelector(response.photos);
|
||||
} else if (response.photos && response.photos.length === 1) {
|
||||
// Only one photo, load it directly
|
||||
loadSinglePhoto(response.photos[0]);
|
||||
} else {
|
||||
$("#samplePhoto").attr("src", "");
|
||||
alert("Nessuna foto trovata per questo TRF.");
|
||||
}
|
||||
} else {
|
||||
$("#samplePhoto").attr("src", "");
|
||||
alert("Nessuna foto trovata per questo TRF.");
|
||||
alert(response.message || "Errore nel caricamento della foto.");
|
||||
}
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
@@ -98,6 +82,52 @@ $(document).ready(function () {
|
||||
});
|
||||
}
|
||||
|
||||
function showPhotoSelector(photos) {
|
||||
const selectorContainer = $("#photoSelectorContainer"); // A div to hold the photo selector
|
||||
selectorContainer.empty(); // Clear any previous options
|
||||
|
||||
// Create a dropdown or buttons to select a photo
|
||||
const selector = $('<select id="photoSelector"></select>');
|
||||
photos.forEach((photo, index) => {
|
||||
const option = $('<option></option>').val(photo).text(`Photo ${index + 1}`);
|
||||
selector.append(option);
|
||||
});
|
||||
|
||||
selector.on("change", function () {
|
||||
const selectedPhoto = $(this).val();
|
||||
loadSinglePhoto(selectedPhoto);
|
||||
});
|
||||
|
||||
selectorContainer.append(selector);
|
||||
selectorContainer.show(); // Make sure the selector is visible
|
||||
}
|
||||
|
||||
function loadSinglePhoto(photoPath) {
|
||||
const img = $("#samplePhoto");
|
||||
img.attr("src", photoPath);
|
||||
|
||||
img.on("load", function () {
|
||||
const container = img.parent();
|
||||
const canvas = document.getElementById("photoCanvas");
|
||||
const containerWidth = container.width();
|
||||
const containerHeight = container.height();
|
||||
const scaleX = containerWidth / img[0].naturalWidth;
|
||||
const scaleY = containerHeight / img[0].naturalHeight;
|
||||
const scale = Math.min(scaleX, scaleY);
|
||||
|
||||
canvas.width = img[0].naturalWidth * scale;
|
||||
canvas.height = img[0].naturalHeight * scale;
|
||||
canvas.style.width = `${containerWidth}px`;
|
||||
canvas.style.height = `${containerHeight}px`;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img.get(0), 0, 0, canvas.width, canvas.height);
|
||||
|
||||
updateMarkers();
|
||||
});
|
||||
}
|
||||
|
||||
function addNewRow(nextPartNumber, isMix = false) {
|
||||
const description = isMix ? "Mix" : "";
|
||||
const newRow = `
|
||||
|
||||
@@ -44,7 +44,7 @@ $photos = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
$photoBasePath = '../photostrf/';
|
||||
|
||||
// Genera l'URL per il QR code
|
||||
$baseUrl = "http://localhost/trf_certest/public/userarea/"; // Sostituisci con il tuo dominio
|
||||
$baseUrl = "http://localhost:8000/userarea/"; // Sostituisci con il tuo dominio
|
||||
$uploadUrl = $baseUrl . "upload_photos_mobile.php?iddatadb=" . $iddatadb;
|
||||
|
||||
// Genera il QR code con endroid/qr-code 6.0.6
|
||||
@@ -224,4 +224,4 @@ $result->saveToFile($qrCodeFile);
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -142,4 +142,4 @@ $sampleCode = $row['sample_code'] ?? 'Non disponibile';
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user