zibo-dashboard/public/userarea/tablet-dashboard.php
2025-10-24 21:45:33 +02:00

422 lines
17 KiB
PHP

<?php include('include/headscript.php'); ?>
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/images/favicon-32x32.png" type="image/png" />
<?php include('cssinclude.php'); ?>
<title>Dati di Produzione - <?= htmlspecialchars($titlewebsite, ENT_QUOTES, 'UTF-8'); ?></title>
<!-- jQuery deve venire PRIMA di tutto -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap (se già incluso puoi rimuoverlo) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Select2 con tema Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<style>
body {
font-size: 1.05rem;
background: linear-gradient(135deg, #f2f6f9, #e6eef5);
-webkit-tap-highlight-color: transparent;
}
.page-content {
padding: 0.8rem;
}
.form-container {
background: #ffffff;
border-radius: 16px;
padding: 1.6rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
margin-bottom: 1.8rem;
}
.form-container h5 {
font-weight: 600;
margin-bottom: 1.3rem;
color: #2b3e50;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
}
label {
display: block;
font-weight: 500;
margin-bottom: 6px;
color: #333;
font-size: 0.95rem;
}
input,
select,
textarea {
width: 100%;
border: 1px solid #ccd4db;
border-radius: 10px;
padding: 12px;
font-size: 1.05rem;
background-color: #fff;
}
input[type="date"],
input[type="time"] {
background-color: #eaf3ff;
border-color: #b6d4fe;
}
input[type="number"] {
background-color: #f7f9fb;
}
textarea {
background-color: #f2fff2;
}
.form-check {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
}
.form-check-input {
width: 1.6rem;
height: 1.6rem;
accent-color: #0d6efd;
}
.submit-row {
text-align: center;
margin-top: 1.3rem;
}
.btn-submit {
background: linear-gradient(90deg, #007bff, #00a2ff);
border: none;
color: #fff;
font-size: 1.3rem;
border-radius: 12px;
padding: 14px 45px;
width: 100%;
max-width: 280px;
box-shadow: 0 5px 12px rgba(0, 123, 255, 0.35);
transition: all 0.2s ease;
}
.btn-submit:hover {
background: linear-gradient(90deg, #005dc9, #008cff);
transform: scale(1.02);
}
/* SELECT2 */
.select2-container--bootstrap-5 .select2-selection {
min-height: 56px;
padding: 10px 14px;
font-size: 1.05rem;
border-radius: 10px;
}
.select2-dropdown {
font-size: 1.05rem;
border-radius: 10px;
}
/* TABELLA */
.table-container {
background: #ffffff;
border-radius: 16px;
padding: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.badge-status {
display: inline-block;
padding: 6px 10px;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
}
.badge-yes {
background-color: #d1f5e1;
color: #128346;
}
.badge-no {
background-color: #ececec;
color: #555;
}
</style>
</head>
<body>
<div class="wrapper">
<?php include('include/navbar.php'); ?>
<?php include('include/topbar.php'); ?>
<div class="page-wrapper">
<div class="page-content">
<?php // include('top_stat_widget.php');
?>
<div class="card radius-10">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Dati di Produzione</h5>
</div>
<div class="card-body">
<!-- FORM -->
<div class="form-container">
<h5>Aggiungi Nuovo Record di Produzione</h5>
<form id="addRecordForm" action="save_production.php" method="POST">
<div class="form-grid">
<div>
<label for="data">Data</label>
<input type="date" id="data" name="data" required>
</div>
<div>
<label for="idmatrice">Matrice</label>
<select id="idmatrice" name="idmatrice" class="form-select" required>
<option value="">Cerca o seleziona...</option>
<?php
$db = DBHandlerSelect::getInstance();
$pdo = $db->getConnection();
$stmt = $pdo->query("SELECT id, nome FROM matrice ORDER BY nome ASC");
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo "<option value='{$row['id']}'>" . htmlspecialchars($row['nome']) . "</option>";
}
?>
</select>
</div>
<div>
<label for="idmescola">Mescola</label>
<select id="idmescola" name="idmescola" class="form-select" required>
<option value="">Cerca o seleziona...</option>
<?php
$stmt = $pdo->query("SELECT id, nome FROM mescole ORDER BY nome ASC");
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo "<option value='{$row['id']}'>" . htmlspecialchars($row['nome']) . "</option>";
}
?>
</select>
</div>
<div>
<label for="hour">Ora Inizio</label>
<input type="time" id="hour" name="hour" required>
</div>
<div>
<label for="hourprod">Ora Fine</label>
<input type="time" id="hourprod" name="hourprod" required>
</div>
<div>
<label for="kgprod">Kg Prodotti</label>
<input type="number" id="kgprod" name="kgprod" step="0.01" required>
</div>
<div>
<label for="mtprod">Metri Prodotti</label>
<input type="number" id="mtprod" name="mtprod" step="0.01" required>
</div>
<div>
<label for="scarto">Scarto (Kg)</label>
<input type="number" id="scarto" name="scarto" step="0.01" required>
</div>
<div class="form-check">
<input type="checkbox" id="fermomacchina" name="fermomacchina" class="form-check-input">
<label for="fermomacchina">Fermo Macchina</label>
</div>
<div style="grid-column: 1 / -1;">
<label for="note">Note</label>
<textarea id="note" name="note" rows="3" placeholder="Aggiungi eventuali note..."></textarea>
</div>
</div>
<div class="submit-row">
<button type="submit" class="btn btn-submit">💾 Salva Record</button>
</div>
</form>
</div>
<!-- TABELLA -->
<h6 class="text-center mt-4 mb-3 fw-semibold">Riepilogo Produzione di Oggi</h6>
<div class="table-container">
<div class="table-responsive" style="max-height: 65vh;">
<table class="table align-middle text-center">
<thead>
<tr>
<th>Data</th>
<th>Matrice</th>
<th>Mescola</th>
<th>Fermo</th>
<th>Inizio</th>
<th>Fine</th>
<th>Kg</th>
<th>Mt</th>
<th>Scarto</th>
<th>Note</th>
</tr>
</thead>
<tbody id="productionTable">
<?php
$sql = "SELECT p.id, p.Data, m.nome AS matrice_nome, ms.nome AS mescola_nome,
p.fermomacchina, p.note, p.hour, p.hourprod, p.kgprod, p.mtprod, p.scarto
FROM productiondata p
JOIN matrice m ON p.idmatrice = m.id
JOIN mescole ms ON p.idmescola = ms.id
WHERE DATE(p.Data) = CURDATE()
ORDER BY p.hour ASC";
$stmt = $pdo->query($sql);
if ($stmt->rowCount() === 0) {
echo "<tr><td colspan='10' class='text-muted'>Nessun record trovato per oggi</td></tr>";
} else {
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$dataFormat = date("d/m/Y", strtotime($row['Data']));
$hourStart = date("H:i", strtotime($row['hour']));
$hourEnd = date("H:i", strtotime($row['hourprod']));
$badge = $row['fermomacchina']
? "<span class='badge-status badge-yes'>Sì</span>"
: "<span class='badge-status badge-no'>No</span>";
$notePreview = !empty($row['note'])
? "<button class='btn btn-sm btn-outline-primary view-note' data-note='" . htmlspecialchars($row['note'], ENT_QUOTES) . "'>📝</button>"
: "-";
echo "<tr>
<td>{$dataFormat}</td>
<td>" . htmlspecialchars($row['matrice_nome']) . "</td>
<td>" . htmlspecialchars($row['mescola_nome']) . "</td>
<td>{$badge}</td>
<td>{$hourStart}</td>
<td>{$hourEnd}</td>
<td>" . htmlspecialchars($row['kgprod']) . "</td>
<td>" . htmlspecialchars($row['mtprod']) . "</td>
<td>" . htmlspecialchars($row['scarto']) . "</td>
<td>{$notePreview}</td>
</tr>";
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include('include/footer.php'); ?>
</div>
<?php include('jsinclude.php'); ?>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.full.min.js"></script>
<script>
// Attiva Select2
document.addEventListener("DOMContentLoaded", function() {
if (typeof $.fn.select2 === "undefined") {
console.error("⚠️ Select2 non caricato correttamente!");
} else {
$('#idmatrice, #idmescola').select2({
theme: 'bootstrap-5',
placeholder: 'Cerca o seleziona...',
allowClear: true,
width: '100%',
dropdownAutoWidth: true,
language: {
noResults: function() {
return "Nessun risultato trovato";
}
}
});
console.log("✅ Select2 inizializzato correttamente!");
}
});
// Apri calendario/ora cliccando ovunque
document.querySelectorAll('input[type="date"], input[type="time"]').forEach(el => {
el.parentElement.addEventListener('click', () => el.showPicker && el.showPicker());
});
// Salvataggio con SweetAlert2
document.getElementById("addRecordForm").addEventListener("submit", e => {
e.preventDefault();
const formData = new FormData(e.target);
fetch("save_production.php", {
method: "POST",
body: formData
})
.then(r => r.json())
.then(data => {
if (data.success) {
Swal.fire({
icon: "success",
title: "Record salvato!",
text: "I dati di produzione sono stati aggiunti con successo.",
confirmButtonText: "OK",
confirmButtonColor: "#3085d6",
background: "#f9fbfd"
}).then(() => location.reload());
} else {
Swal.fire({
icon: "error",
title: "Errore",
text: data.message || "Si è verificato un problema durante il salvataggio.",
confirmButtonText: "Chiudi",
confirmButtonColor: "#d33"
});
}
})
.catch(() => {
Swal.fire({
icon: "warning",
title: "Errore di connessione",
text: "Impossibile contattare il server. Riprova più tardi.",
confirmButtonText: "OK",
confirmButtonColor: "#f39c12"
});
});
});
// Visualizza le note
document.querySelectorAll('.view-note').forEach(btn => {
btn.addEventListener('click', () => {
const noteText = btn.getAttribute('data-note');
Swal.fire({
title: "Note di Produzione",
html: `<div style='text-align:left;font-size:1.1rem;'>${noteText}</div>`,
icon: "info",
width: "90%",
confirmButtonText: "Chiudi",
confirmButtonColor: "#3085d6"
});
});
});
</script>
</body>
</html>