228 lines
7.8 KiB
PHP
228 lines
7.8 KiB
PHP
<?php
|
|
// photos_popup.php
|
|
include('include/headscript.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;
|
|
|
|
$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/';
|
|
|
|
// Genera l'URL per il QR code
|
|
$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
|
|
$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>
|
|
<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; ?>
|
|
<?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>
|
|
</div>
|
|
|
|
<style>
|
|
.photo-item {
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.photo-item:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
#dropArea.highlight {
|
|
border-color: #28a745;
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
/* Stile per il modale dell'immagine ingrandita */
|
|
.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;
|
|
}
|
|
|
|
/* Stili per il loader */
|
|
.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;
|
|
}
|
|
</style>
|