solocla/zibo-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added drag and photos

Browse Source
This commit is contained in:
Claudio
2025-11-22 13:35:12 +01:00
parent eeb1d0d5de
commit 8edccbdfef
21 changed files with 2006 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/userarea/production_line_view.php
+372 -89
View File
@@ -4,7 +4,7 @@ $db = DBHandlerSelect::getInstance();
$pdo = $db->getConnection();
// --- LISTE LINEE ---
$linee = $pdo->query("SELECT id, name FROM production_lines ORDER BY line_number")->fetchAll();
$linee = $pdo->query("SELECT id, name, color FROM production_lines ORDER BY line_number")->fetchAll();
// --- STATUS DINAMICI ---
$statusProgrammato = $pdo->query("SELECT id, nome, badge_color, line_color FROM production_status WHERE id = 6 LIMIT 1")->fetch();
@@ -174,14 +174,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['save_final_data']))
exit;
}
// --- AJAX: carica record giorno successivo ---
if (!empty($_GET['ajax_next'])) {
// --- AJAX: carica record ---
if (!empty($_GET['ajax'])) {
$date = $_GET['date'] ?? date('Y-m-d');
$lineRaw = $_GET['line'] ?? '';
$lineArray = $lineRaw !== '' ? explode(',', $lineRaw) : [];
$sql = "SELECT
p.*,
m.nome AS matrice,
@@ -210,94 +209,73 @@ if (!empty($_GET['ajax'])) {
':pausa' => $statusPausaId
];
try {
$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$records = $stmt->fetchAll();
} catch (PDOException $e) {
echo '<div class="no-records">Errore database.</div>';
exit;
$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$recordsNext = $stmt->fetchAll();
if (empty($recordsNext)) {
exit; // ritorna vuoto
}
foreach ($recordsNext as $r) {
include __DIR__ . "/render_production_card.php";
}
exit;
}
// --- AJAX PRINCIPALE: carica i record della data selezionata ---
if (!empty($_GET['ajax'])) {
$date = $_GET['date'] ?? date('Y-m-d');
$lineRaw = $_GET['line'] ?? '';
$lineArray = $lineRaw !== '' ? explode(',', $lineRaw) : [];
$sql = "SELECT
p.*,
m.nome AS matrice,
ms.nome AS mescola,
l.name AS linea,
c.nome AS cliente,
s.nome AS status_nome,
s.badge_color,
s.line_color,
p.tempo_totale_produzione
FROM productiondata p
LEFT JOIN matrice m ON p.idmatrice = m.id
LEFT JOIN mescole ms ON p.idmescola = ms.id
LEFT JOIN production_lines l ON p.id_linea = l.id
LEFT JOIN clients c ON p.id_cliente = c.id
LEFT JOIN production_status s ON p.id_status = s.id
WHERE p.data_produzione = :date
AND p.id_status IN (:programmato, :produzione, :pausa)"
. (!empty($lineArray) ? " AND p.id_linea IN (" . implode(',', array_map('intval', $lineArray)) . ")" : "")
. " ORDER BY l.line_number, p.Data";
$params = [
':date' => $date,
':programmato' => $statusProgrammatoId,
':produzione' => $statusProduzioneId,
':pausa' => $statusPausaId
];
$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$records = $stmt->fetchAll();
if (empty($records)) {
echo '<div class="no-records">
<i class="bi bi-inbox"></i>
<div>Nessuna produzione programmata, in corso o in pausa</div>
</div>';
exit;
}
foreach ($records as $r) {
$isInProduction = $r['id_status'] == $statusProduzioneId;
$isPaused = $r['id_status'] == $statusPausaId;
$dataZibo = ($r['data_zibo'] && $r['data_zibo'] !== '0000-00-00') ? date('d/m/Y', strtotime($r['data_zibo'])) : '-';
$dataCliente = ($r['data_cliente'] && $r['data_cliente'] !== '0000-00-00') ? date('d/m/Y', strtotime($r['data_cliente'])) : '-';
$totalSeconds = (int)($r['tempo_totale_produzione'] ?? 0);
$startTime = ($isInProduction || $isPaused) && !empty($r['data_avvio']) && $r['data_avvio'] !== '0000-00-00 00:00:00'
? strtotime($r['data_avvio'] . ' UTC')
: strtotime($r['Data'] . ' UTC');
$badgeColor = $r['badge_color'] ?? '#6c757d';
$lineColor = $r['line_color'] ?? '#e9ecef';
$statusNome = $r['status_nome'];
?>
<div class="record-card <?= $isInProduction || $isPaused ? 'in-production expanded' : 'programmed' ?>"
data-id="<?= $r['id'] ?>"
data-total-seconds="<?= $totalSeconds ?>"
data-kgsp="<?= htmlspecialchars($r['kg_sp']) ?>"
data-metri="<?= htmlspecialchars($r['metri']) ?>"
style="--line-bg: <?= $lineColor ?>; --badge-bg: <?= $badgeColor ?>;">
<!-- RIGA VISIBILE -->
<div class="record-summary">
<div class="summary-grid">
<div><strong>Linea</strong> <span><?= htmlspecialchars($r['linea']) ?></span></div>
<div><strong>Matrice</strong> <span><?= htmlspecialchars($r['matrice']) ?></span></div>
<div><strong>Mescola</strong> <span><?= htmlspecialchars($r['mescola']) ?></span></div>
<div><strong>Cliente</strong> <span><?= htmlspecialchars($r['cliente'] ?? '-') ?></span></div>
<div><strong>Zibo</strong> <span><?= $dataZibo ?></span></div>
<div><strong>Data Cl.</strong> <span><?= $dataCliente ?></span></div>
<div><strong>Metri</strong> <span><?= number_format($r['metri'], 2) ?></span></div>
<div><strong>Ore</strong> <span><?= number_format($r['ore_previste'], 1) ?></span></div>
</div>
<div class="status-badge" style="background: var(--badge-bg);">
<?= strtoupper($statusNome) ?>
<?php if ($isInProduction || $isPaused): ?>
<i class="bi bi-chevron-down expand-arrow"></i>
<?php endif; ?>
</div>
</div>
<!-- RIGA ESPANSA -->
<div class="record-expanded">
<?php if ($isInProduction || $isPaused): ?>
<div class="timer-display" data-start="<?= $startTime ?>">
<span class="timer">00:00:00</span>
</div>
<!-- Teorici invisibili per modale finale -->
<span data-field="kg_sp" style="display:none;"><?= $r['kg_sp'] ?></span>
<span data-field="metri" style="display:none;"><?= $r['metri'] ?></span>
<div class="action-buttons">
<?php if ($isInProduction): ?>
<button class="action-btn pause-btn" data-id="<?= $r['id'] ?>">PAUSA</button>
<button class="action-btn stop-btn" data-id="<?= $r['id'] ?>">STOP</button>
<?php elseif ($isPaused): ?>
<button class="action-btn resume-btn" data-id="<?= $r['id'] ?>">RIPRENDI</button>
<button class="action-btn stop-btn" data-id="<?= $r['id'] ?>">STOP</button>
<?php endif; ?>
</div>
<?php else: ?>
<button class="action-btn start-btn" data-id="<?= $r['id'] ?>">AVVIA PRODUZIONE</button>
<?php endif; ?>
</div>
</div>
<?php
include __DIR__ . "/render_production_card.php";
}
exit;
}
?>
<!doctype html>
@@ -617,6 +595,22 @@ if (!empty($_GET['ajax'])) {
animation: slideUp 0.25s ease-out;
}
/* MODALE GRANDE PER PREVIEW FOTO */
.preview-large {
width: 95% !important;
max-width: 1200px !important;
max-height: 90vh !important;
padding: 0 !important;
background: black !important;
position: relative;
border-radius: 12px !important;
display: flex;
justify-content: center;
align-items: center;
}
/* animazione dolce */
@keyframes slideUp {
from {
@@ -667,17 +661,28 @@ if (!empty($_GET['ajax'])) {
color: white;
}
.line-btn {
flex: 0 0 150px;
padding: 0.8rem 0;
font-size: 1.4rem;
font-weight: 700;
border-radius: 0.8rem;
border: none;
cursor: pointer;
transition: 0.2s;
color: white;
}
.line-btn.active {
background: #dc2626;
/* rosso */
background: var(--line-color);
}
.line-btn.inactive {
background: #cbd5e1;
/* grigio */
color: #475569;
background: #cbd5e1 !important;
color: #475569 !important;
}
/* Modale più grande e ottimizzata */
.modal-content.final-wide {
width: 95%;
@@ -729,6 +734,11 @@ if (!empty($_GET['ajax'])) {
border: 1px solid #cbd5e1;
margin-bottom: 1rem;
}
#imagePreviewModal .modal-content {
max-width: 1200px !important;
width: 95% !important;
}
</style>
</head>
@@ -758,9 +768,11 @@ if (!empty($_GET['ajax'])) {
<?php foreach ($linee as $l): ?>
<button
class="line-btn active"
data-line="<?= $l['id'] ?>">
data-line="<?= $l['id'] ?>"
style="--line-color: <?= htmlspecialchars($l['color']) ?>;">
<?= htmlspecialchars($l['name']) ?>
</button>
<?php endforeach; ?>
</div>
@@ -809,6 +821,10 @@ if (!empty($_GET['ajax'])) {
</div>
</div>
<!-- Modal foto -->
<?php include __DIR__ . "/components/photo_modal.php"; ?>
<!-- Modal dati fine produzione -->
<div id="finalDataModal" class="modal">
<div class="modal-content final-wide">
@@ -868,6 +884,128 @@ if (!empty($_GET['ajax'])) {
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on("mousedown", function(e) {
// 🔥 Se clicco sulla X, non chiudere altri modali
if ($(e.target).attr("id") === "previewCloseX") {
return;
}
// --- Se il PREVIEW è aperto ---
if ($("#imagePreviewModal").hasClass("active")) {
// click fuori → chiudi SOLO il preview
if ($(e.target).closest("#imagePreviewModal .modal-content").length === 0) {
$("#imagePreviewModal").removeClass("active");
}
return; // 🔥 BLOCCA la chiusura del photoModal
}
// --- Se è aperto solo il PHOTO MODAL ---
if ($("#photoModal").hasClass("active")) {
if ($(e.target).closest("#photoModal .modal-content").length === 0) {
$("#photoModal").removeClass("active");
}
}
});
function showPhotoSuccess() {
$("#photoMessageError").hide();
$("#photoMessageSuccess").fadeIn(150);
setTimeout(() => {
$("#photoMessageSuccess").fadeOut(200);
}, 2000);
}
function showPhotoError(msg) {
$("#photoMessageSuccess").hide();
$("#photoMessageError").text("⚠️ " + msg).fadeIn(150);
}
function loadPhotoGallery(productionId, type) {
$("#photoGallery").html('<div style="color:#64748b;">Caricamento foto...</div>');
$.getJSON("get_photos.php", {
production_id: productionId,
photo_type: type
}, function(r) {
if (!r.success) {
$("#photoGallery").html(
'<div style="color:#b91c1c;">Errore nel caricamento delle foto.</div>'
);
return;
}
const photos = r.photos || [];
if (photos.length === 0) {
$("#photoGallery").html(
'<div style="color:#64748b;">Nessuna foto registrata per questa tipologia.</div>'
);
return;
}
let html = "";
photos.forEach(p => {
const aiLabel = p.ai_processed == 1 ? ' (AI✔)' : '';
html += `
<div style="width:90px; text-align:center; font-size:0.7rem;">
<div class="photo-thumb"
data-full="photos/${p.filename}"
style="width:90px; height:70px; border-radius:8px; overflow:hidden; border:1px solid #e2e8f0; margin-bottom:4px; cursor:pointer;">
<img src="photos/${p.filename}"
alt="photo"
style="width:100%; height:100%; object-fit:cover;">
</div>
<div style="color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
#${p.id}${aiLabel}
</div>
</div>
`;
});
$("#photoGallery").html(html);
}).fail(function() {
$("#photoGallery").html(
'<div style="color:#b91c1c;">Errore di connessione nel caricamento delle foto.</div>'
);
});
}
// APRI PREVIEW — evento CLICK (non mousedown)
$(document).on("click", ".photo-thumb", function(e) {
e.stopPropagation(); // evita che il click chiuda subito il modale
const fullImage = $(this).data("full");
$("#previewImage").attr("src", fullImage);
$("#imagePreviewModal").addClass("active");
});
// chiusura preview con X
$("#previewCloseX").on("click", function(e) {
e.preventDefault();
e.stopImmediatePropagation(); // 🔥 blocca davvero tutto
$("#imagePreviewModal").removeClass("active");
});
// chiusura modale principale (upload foto)
$("#photoModalCloseX").on("click", function() {
$("#photoModal").removeClass("active");
});
</script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<?php include('jsinclude.php'); ?>
<script>
@@ -940,10 +1078,105 @@ if (!empty($_GET['ajax'])) {
date: isoDate,
line: line
}, function(html) {
$('#recordsContainer').html(html);
// Il primo HTML (oggi / data selezionata)
let htmlOggi = html;
// Ora carichiamo DOMANI
const dateObj = new Date(isoDate);
dateObj.setDate(dateObj.getDate() + 1);
const tomorrow = dateObj.toISOString().split('T')[0];
$.get('', {
ajax_next: 1,
date: tomorrow,
line: line
}, function(htmlNext) {
let titoloNext = `
<div style="margin:20px 0; font-size:1.4rem; font-weight:700; color:#1e40af;">
Programmazione giorno successivo (${formatItalianDate(tomorrow)})
</div>
`;
$('#recordsContainer').html(
htmlOggi +
(htmlNext.trim() !== '' ? titoloNext + htmlNext : '')
);
startAllTimers();
setupEventHandlers();
});
startAllTimers();
setupEventHandlers();
$(document).on("click", ".photo-btn", function(e) {
e.stopPropagation();
const type = $(this).data("type");
const production = $(this).data("production");
$("#photoType").val(type);
$("#photoProductionId").val(production);
let titles = {
lotto_mescola: "Foto Lotto Mescola",
parametri_macchina: "Foto Parametri Macchina",
problema: "Foto Problema di Produzione"
};
$("#photoModalTitle").text(titles[type] || "Carica Foto");
$("#photoModalSubtitle").text("Produzione ID: " + production);
// pulisci messaggi
$("#photoMessageSuccess").hide();
$("#photoMessageError").hide();
// carica galleria foto esistenti per questo record + tipologia
loadPhotoGallery(production, type);
$("#photoModal").addClass("active");
});
$("#photoCancel").on("click", () => {
$("#photoModal").removeClass("active");
});
// --- SUBMIT FORM FOTO ---
$("#photoForm").off("submit").on("submit", function(e) {
e.preventDefault();
let formData = new FormData(this);
$.ajax({
url: "upload_photo.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function(r) {
if (r.success) {
// conferma + refresh galleria
showPhotoSuccess();
loadPhotoGallery(
$("#photoProductionId").val(),
$("#photoType").val()
);
} else {
showPhotoError(r.message || "Errore durante il caricamento della foto.");
}
},
error: function() {
showPhotoError("Errore di comunicazione con il server.");
}
});
});
$('.record-card.in-production').each(function() {
const $card = $(this);
const $expanded = $card.find('.record-expanded');
@@ -1009,6 +1242,20 @@ if (!empty($_GET['ajax'])) {
});
}
// --- CONVERT DATE ---
function formatItalianDate(isoDate) {
const months = [
"gennaio", "febbraio", "marzo", "aprile", "maggio", "giugno",
"luglio", "agosto", "settembre", "ottobre", "novembre", "dicembre"
];
const d = new Date(isoDate);
const day = d.getDate();
const month = months[d.getMonth()];
const year = d.getFullYear();
return `${day} ${month} ${year}`;
}
// --- MODALE UNIFICATA PER TUTTE LE AZIONI ---
function showReasonModal(action, id) {
$('#reasonModal').addClass('active');
@@ -1234,6 +1481,42 @@ if (!empty($_GET['ajax'])) {
});
</script>
<!-- MODALE PER PREVIEW IMMAGINE -->
<div id="imagePreviewModal" class="modal">
<div class="modal-content preview-large">
<!-- X per chiudere -->
<button id="previewCloseX"
style="
position:absolute;
top:10px;
right:15px;
font-size:2rem;
color:white;
background:none;
border:none;
cursor:pointer;
z-index:9999; /* 🔥 aggiungi questo */
">
&times;
</button>
<img id="previewImage"
src=""
style="
max-width: 95%;
max-height: 85vh;
width: auto;
height: auto;
display: block;
margin: auto;
border-radius: 6px;
">
</div>
</div>
</body>
</html>