366 lines
14 KiB
PHP
366 lines
14 KiB
PHP
<?php
|
|
// photos_popup.php
|
|
include('include/headscript.php');
|
|
// Includi Fabric.js solo per questa pagina
|
|
?>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
|
|
|
|
<?php
|
|
// Includi l'autoloader di Composer
|
|
require_once __DIR__ . '/../../vendor/autoload.php';
|
|
|
|
use Endroid\QrCode\Color\Color;
|
|
use Endroid\QrCode\Encoding\Encoding;
|
|
use Endroid\QrCode\ErrorCorrectionLevel;
|
|
use Endroid\QrCode\QrCode;
|
|
use Endroid\QrCode\RoundBlockSizeMode;
|
|
use Endroid\QrCode\Writer\PngWriter;
|
|
|
|
// Carica le variabili d'ambiente
|
|
try {
|
|
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/../../');
|
|
$dotenv->load();
|
|
} catch (Exception $e) {
|
|
error_log("Errore nel caricamento del file .env: " . $e->getMessage());
|
|
echo json_encode(['error' => 'Errore nel caricamento del file di configurazione']);
|
|
exit;
|
|
}
|
|
|
|
// Verifica che BASE_URL sia definito
|
|
if (!isset($_ENV['BASE_URL'])) {
|
|
error_log("Errore: la variabile BASE_URL non è definita nel file .env");
|
|
echo json_encode(['error' => 'Variabile BASE_URL non definita']);
|
|
exit;
|
|
}
|
|
|
|
$db = DBHandlerSelect::getInstance();
|
|
$pdo = $db->getConnection();
|
|
|
|
// Verifica che l'iddatadb sia stato passato
|
|
if (!isset($_GET['iddatadb']) || empty($_GET['iddatadb'])) {
|
|
echo json_encode(['error' => 'ID riga non fornito']);
|
|
exit;
|
|
}
|
|
|
|
$iddatadb = intval($_GET['iddatadb']);
|
|
|
|
// Recupera i dettagli della riga (idriga e sample_code)
|
|
$stmt = $pdo->prepare("SELECT iddatadb, sample_code FROM datadb WHERE iddatadb = ?");
|
|
$stmt->execute([$iddatadb]);
|
|
$row = $stmt->fetch(PDO::FETCH_ASSOC);
|
|
|
|
if (!$row) {
|
|
echo json_encode(['error' => 'Riga non trovata']);
|
|
exit;
|
|
}
|
|
|
|
$idriga = $row['iddatadb'];
|
|
$sampleCode = $row['sample_code'] ?? 'Non disponibile';
|
|
|
|
// Recupera le foto associate alla riga
|
|
$stmt = $pdo->prepare("SELECT id, file_path, file_name, description, uploaded_at FROM datadb_photos WHERE iddatadb = ? ORDER BY uploaded_at DESC");
|
|
$stmt->execute([$iddatadb]);
|
|
$photos = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
|
|
// Definisci il percorso base per le foto
|
|
$photoBasePath = '../photostrf/';
|
|
|
|
// Usa la variabile d'ambiente BASE_URL
|
|
$baseUrl = rtrim($_ENV['BASE_URL'], '/'); // Rimuove eventuali slash finali
|
|
$uploadUrl = $baseUrl . "/upload_photos_mobile.php?iddatadb=" . $iddatadb;
|
|
|
|
// Genera il QR code con endroid/qr-code 6.0.6
|
|
$qrCodeDir = '../photostrf/qrcodes/';
|
|
if (!is_dir($qrCodeDir)) {
|
|
mkdir($qrCodeDir, 0755, true);
|
|
}
|
|
$qrCodeFile = $qrCodeDir . "qrcode_{$iddatadb}.png";
|
|
|
|
$writer = new PngWriter();
|
|
|
|
// Crea il QR code usando il costruttore
|
|
$qrCode = new QrCode(
|
|
data: $uploadUrl,
|
|
encoding: new Encoding('UTF-8'),
|
|
errorCorrectionLevel: ErrorCorrectionLevel::Low,
|
|
size: 150,
|
|
margin: 10,
|
|
roundBlockSizeMode: RoundBlockSizeMode::Margin,
|
|
foregroundColor: new Color(0, 0, 0),
|
|
backgroundColor: new Color(255, 255, 255)
|
|
);
|
|
|
|
$result = $writer->write($qrCode);
|
|
$result->saveToFile($qrCodeFile);
|
|
?>
|
|
|
|
<div class="popup-content">
|
|
<div id="loader" class="loader" style="display: none;">
|
|
<div style="text-align: center; color: white;">
|
|
<i class="fas fa-spinner fa-spin" style="font-size: 40px;"></i>
|
|
<p>Caricamento in corso...</p>
|
|
</div>
|
|
</div>
|
|
<h3>Manage Photos</h3>
|
|
<p><strong>ID Row:</strong> <?= htmlspecialchars($idriga) ?></p>
|
|
<p><strong>Sample Code:</strong> <?= htmlspecialchars($sampleCode) ?></p>
|
|
|
|
<!-- QR Code per il caricamento da mobile -->
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|
<p>Scan the QR Code with the mobile to take photo with camera:</p>
|
|
<img src="../photostrf/qrcodes/qrcode_<?= $iddatadb ?>.png" alt="QR Code" style="max-width: 150px;">
|
|
<p style="margin-top: 10px;">
|
|
<a href="<?= htmlspecialchars($uploadUrl) ?>" target="_blank"><?= htmlspecialchars($uploadUrl) ?></a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Area drag-and-drop per il caricamento delle foto -->
|
|
<div id="dropArea" style="border: 2px dashed #ccc; padding: 20px; text-align: center; margin-bottom: 20px;">
|
|
<p>Drag the photo here or click to select</p>
|
|
<input type="file" id="photoInput" multiple accept="image/*" style="display: none;">
|
|
</div>
|
|
<!-- 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;">
|
|
<option value="">Select a webcam</option>
|
|
</select>
|
|
<video id="webcamVideo" autoplay playsinline style="max-width: 100%; max-height: 300px;"></video>
|
|
<div style="margin-top: 10px;">
|
|
<button id="captureBtn" style="padding: 10px 20px; background: #28a745; color: white; border: none; cursor: pointer;">Capture Photo</button>
|
|
<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 -->
|
|
<div id="photosList">
|
|
<?php if (empty($photos)): ?>
|
|
<p>No Photos present.</p>
|
|
<?php else: ?>
|
|
<?php foreach ($photos as $photo): ?>
|
|
<?php
|
|
$filePath = $photoBasePath . $photo['file_path'];
|
|
$fileExists = file_exists($filePath);
|
|
?>
|
|
<div class="photo-item" data-photo-id="<?= $photo['id'] ?>" style="display: flex; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px;">
|
|
<div style="flex: 1;">
|
|
<?php if ($fileExists): ?>
|
|
<img src="../photostrf/<?= htmlspecialchars($photo['file_path']) ?>" alt="<?= htmlspecialchars($photo['file_name']) ?>" class="thumbnail" style="max-width: 100px; max-height: 100px; margin-right: 10px; cursor: pointer;">
|
|
<?php else: ?>
|
|
<p style="color: red;">[File non trovato]</p>
|
|
<?php endif; ?>
|
|
<p style="margin: 0;">
|
|
<strong>Nome:</strong> <?= htmlspecialchars($photo['file_name']) ?><br>
|
|
<strong>Caricata il:</strong> <?= htmlspecialchars($photo['uploaded_at']) ?><br>
|
|
<strong>Descrizione:</strong> <?= htmlspecialchars($photo['description'] ?? 'Nessuna descrizione') ?>
|
|
</p>
|
|
</div>
|
|
<button class="delete-photo-btn" data-photo-id="<?= $photo['id'] ?>" style="background: none; border: none; color: #dc3545; cursor: pointer;">
|
|
<i class="fas fa-trash"></i>
|
|
</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>
|
|
|
|
<!-- Modale per l'immagine ingrandita -->
|
|
<div id="imageModal" class="image-modal" style="display: none;">
|
|
<span class="image-modal-close">×</span>
|
|
<img id="enlargedImage" class="image-modal-content" src="" alt="Immagine ingrandita">
|
|
</div>
|
|
|
|
<!-- 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; font-weight: bold; color: #333; cursor: pointer; z-index: 1003; background: #fff; padding: 5px 10px; border-radius: 50%;">×</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="960" height="720" style="border: 1px solid #ccc; margin-top: 20px;"></canvas>
|
|
|
|
<!-- Pannello dei livelli -->
|
|
<div id="layersPanel" style="width: 120px; max-height: 600px; overflow-y: auto; background: #f8f9fa; padding: 10px; position: absolute; right: 0; top: 60px;">
|
|
<h4 style="margin: 0 0 10px 0; font-size: 16px;">Livelli</h4>
|
|
<ul id="layersList" style="list-style: none; padding: 0;"></ul>
|
|
</div>
|
|
|
|
<!-- Bottoni azioni -->
|
|
<div style="margin-top: 20px; display: flex; flex-wrap: wrap; gap: 5px;">
|
|
<button id="saveCollageBtn" title="Salva il collage"><i class="fas fa-save"></i></button>
|
|
<button id="bringToFrontBtn" title="Porta in primo piano"><i class="fas fa-arrow-up"></i></button>
|
|
<button id="sendToBackBtn" title="Manda in fondo"><i class="fas fa-arrow-down"></i></button>
|
|
<button id="bringForwardBtn" title="Sposta avanti di un livello"><i class="fas fa-arrow-circle-up"></i></button>
|
|
<button id="sendBackwardBtn" title="Sposta indietro di un livello"><i class="fas fa-arrow-circle-down"></i></button>
|
|
<button id="cropImageBtn" title="Ritaglia immagine selezionata" disabled><i class="fas fa-crop"></i></button>
|
|
<button id="applyCropBtn" title="Applica ritaglio" disabled><i class="fas fa-crop"></i> Applica</button>
|
|
<button id="cancelCropBtn" title="Annulla ritaglio" disabled><i class="fas fa-crop"></i> Annulla</button>
|
|
<button id="removeBackgroundBtn" title="Rimuovi sfondo immagine selezionata" disabled><i class="fas fa-eraser"></i> Rimuovi Sfondo</button>
|
|
<button id="removeImageBtn" title="Rimuovi immagine selezionata" disabled><i class="fas fa-trash-alt"></i> Rimuovi</button>
|
|
<button id="undoBtn" title="Annulla ultima azione" disabled><i class="fas fa-undo"></i></button>
|
|
<p id="backgroundRemovalInstruction" style="display: none; color: #007bff;">Clicca sull'immagine per selezionare il colore dello sfondo da rimuovere</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.photo-item {
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.photo-item:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
#dropArea.highlight {
|
|
border-color: #28a745;
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.image-modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1001;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.image-modal-content {
|
|
margin: auto;
|
|
display: block;
|
|
max-width: 90%;
|
|
max-height: 90vh;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.image-modal-close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 35px;
|
|
color: #fff;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.image-modal-close:hover,
|
|
.image-modal-close:focus {
|
|
color: #bbb;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.loader {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 1002;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.loader .fa-spinner {
|
|
font-size: 40px;
|
|
color: white;
|
|
}
|
|
|
|
.loader p {
|
|
margin-top: 10px;
|
|
font-size: 16px;
|
|
color: white;
|
|
}
|
|
|
|
/* Stile per i pulsanti del modale collage */
|
|
#collageModal button {
|
|
padding: 8px 12px;
|
|
margin: 5px;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#saveCollageBtn {
|
|
background: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
#bringToFrontBtn,
|
|
#sendToBackBtn,
|
|
#bringForwardBtn,
|
|
#sendBackwardBtn {
|
|
background: #007bff;
|
|
color: white;
|
|
padding: 8px;
|
|
}
|
|
|
|
#cropImageBtn,
|
|
#applyCropBtn,
|
|
#cancelCropBtn,
|
|
#removeBackgroundBtn,
|
|
#removeImageBtn,
|
|
#undoBtn {
|
|
background: #ffc107;
|
|
color: white;
|
|
}
|
|
|
|
#collageModal button:disabled {
|
|
background: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
#collageModal button i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Stile per il pannello dei livelli */
|
|
#layersPanel {
|
|
z-index: 1002;
|
|
}
|
|
|
|
#layersPanel li {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#layersPanel img {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 2px solid #ccc;
|
|
cursor: pointer;
|
|
object-fit: cover;
|
|
}
|
|
|
|
#layersPanel img:hover {
|
|
border-color: #007bff;
|
|
}
|
|
</style>
|