update documents with icon style
This commit is contained in:
parent
6749663730
commit
9399e5b54a
@ -1,22 +1,13 @@
|
||||
<?php
|
||||
include('include/headscript.php');
|
||||
|
||||
// Connessione al database
|
||||
$conn = new mysqli($servername, $username, $password, $database);
|
||||
|
||||
// Recupera l'id utente loggato
|
||||
$iduserlogin = $_SESSION['iduserlogin'];
|
||||
|
||||
// Recupera l'id della casa dall'URL
|
||||
$idhome = isset($_GET['idhome']) ? intval($_GET['idhome']) : 0;
|
||||
|
||||
// Recupera lo slug dalla richiesta
|
||||
$docpage = isset($_GET['slug']) ? $_GET['slug'] : 'legal';
|
||||
|
||||
// Recupera il parametro showOnlyRequired
|
||||
$showOnlyRequired = isset($_GET['showOnlyRequired']) && $_GET['showOnlyRequired'] === 'true';
|
||||
$sectionId = isset($_GET['sectionId']) ? $_GET['sectionId'] : null;
|
||||
|
||||
// Recupera i dettagli della casa (per verifica accesso)
|
||||
$queryHome = $conn->prepare("SELECT * FROM home WHERE idhome = ? AND iduser = ?");
|
||||
$queryHome->bind_param('ii', $idhome, $iduserlogin);
|
||||
$queryHome->execute();
|
||||
@ -28,7 +19,6 @@ if (!$homeData) {
|
||||
die(json_encode(['error' => 'Casa non trovata o accesso non autorizzato']));
|
||||
}
|
||||
|
||||
// Recupera il `page_id` corrispondente allo slug
|
||||
$queryPageId = $conn->prepare("SELECT idpages FROM pages WHERE slug = ?");
|
||||
$queryPageId->bind_param('s', $docpage);
|
||||
$queryPageId->execute();
|
||||
@ -42,7 +32,6 @@ if (!$pageData) {
|
||||
|
||||
$page_id = $pageData['idpages'];
|
||||
|
||||
// Recupera i documenti associati al `page_id`, con le sezioni
|
||||
$sql = "
|
||||
SELECT d.*, s.section_name AS section_name
|
||||
FROM documents d
|
||||
@ -52,10 +41,17 @@ $sql = "
|
||||
if ($showOnlyRequired) {
|
||||
$sql .= " AND d.is_required = 1";
|
||||
}
|
||||
if ($sectionId) {
|
||||
$sql .= " AND md5(s.section_name) = ?";
|
||||
}
|
||||
$sql .= " ORDER BY s.section_name, d.document_name";
|
||||
|
||||
$queryDocuments = $conn->prepare($sql);
|
||||
$queryDocuments->bind_param('i', $page_id);
|
||||
if ($sectionId) {
|
||||
$queryDocuments->bind_param('is', $page_id, $sectionId);
|
||||
} else {
|
||||
$queryDocuments->bind_param('i', $page_id);
|
||||
}
|
||||
$queryDocuments->execute();
|
||||
$resultDocuments = $queryDocuments->get_result();
|
||||
|
||||
@ -65,7 +61,6 @@ while ($row = $resultDocuments->fetch_assoc()) {
|
||||
$documents[$sectionName][] = $row;
|
||||
}
|
||||
|
||||
// Recupera i documenti già caricati per questa casa
|
||||
$queryLoadedDocuments = $conn->prepare("SELECT * FROM doc_storage WHERE idhome = ?");
|
||||
$queryLoadedDocuments->bind_param('i', $idhome);
|
||||
$queryLoadedDocuments->execute();
|
||||
@ -76,7 +71,6 @@ while ($row = $resultLoadedDocuments->fetch_assoc()) {
|
||||
$loadedDocuments[$row['document_id']][] = $row;
|
||||
}
|
||||
|
||||
// Prepara la risposta JSON
|
||||
$response = [
|
||||
'homeName' => $homeData['name'] ?? '',
|
||||
'homeAddress' => ($homeData['address'] ?? '') . ', ' . ($homeData['city'] ?? '') . ' ' . ($homeData['zip'] ?? ''),
|
||||
@ -84,9 +78,6 @@ $response = [
|
||||
'loadedDocuments' => $loadedDocuments
|
||||
];
|
||||
|
||||
// Imposta l'header per indicare JSON
|
||||
header('Content-Type: application/json');
|
||||
|
||||
// Evita output extra
|
||||
echo json_encode($response, JSON_PRETTY_PRINT);
|
||||
exit;
|
||||
|
||||
51
public/userportal/get-sections.php
Normal file
51
public/userportal/get-sections.php
Normal file
@ -0,0 +1,51 @@
|
||||
<?php
|
||||
include('include/headscript.php');
|
||||
|
||||
$conn = new mysqli($servername, $username, $password, $database);
|
||||
$iduserlogin = $_SESSION['iduserlogin'];
|
||||
$idhome = isset($_GET['idhome']) ? intval($_GET['idhome']) : 0;
|
||||
$slug = isset($_GET['slug']) ? $_GET['slug'] : 'legal';
|
||||
|
||||
$queryHome = $conn->prepare("SELECT * FROM home WHERE idhome = ? AND iduser = ?");
|
||||
$queryHome->bind_param('ii', $idhome, $iduserlogin);
|
||||
$queryHome->execute();
|
||||
$resultHome = $queryHome->get_result();
|
||||
$homeData = $resultHome->fetch_assoc();
|
||||
|
||||
if (!$homeData) {
|
||||
header('HTTP/1.1 400 Bad Request');
|
||||
die(json_encode(['error' => 'Casa non trovata o accesso non autorizzato']));
|
||||
}
|
||||
|
||||
$queryPageId = $conn->prepare("SELECT idpages FROM pages WHERE slug = ?");
|
||||
$queryPageId->bind_param('s', $slug);
|
||||
$queryPageId->execute();
|
||||
$resultPageId = $queryPageId->get_result();
|
||||
$pageData = $resultPageId->fetch_assoc();
|
||||
|
||||
if (!$pageData) {
|
||||
header('HTTP/1.1 400 Bad Request');
|
||||
die(json_encode(['error' => 'Pagina non valida']));
|
||||
}
|
||||
|
||||
$page_id = $pageData['idpages'];
|
||||
|
||||
$querySections = $conn->prepare("
|
||||
SELECT DISTINCT s.section_name
|
||||
FROM documents d
|
||||
LEFT JOIN sections s ON d.idsections = s.idsections
|
||||
WHERE d.page_id = ?
|
||||
ORDER BY s.section_name
|
||||
");
|
||||
$querySections->bind_param('i', $page_id);
|
||||
$querySections->execute();
|
||||
$resultSections = $querySections->get_result();
|
||||
|
||||
$sections = [];
|
||||
while ($row = $resultSections->fetch_assoc()) {
|
||||
$sections[] = $row;
|
||||
}
|
||||
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(['sections' => $sections]);
|
||||
exit;
|
||||
@ -4,7 +4,6 @@ if (!isset($idhome) || $idhome <= 0) {
|
||||
die("Errore: ID immobile non valido.");
|
||||
}
|
||||
|
||||
|
||||
// Recupera i dettagli della casa
|
||||
$stmt = $pdo->prepare("SELECT name, address, zip, city, country FROM home WHERE idhome = ? AND iduser = ?");
|
||||
$stmt->execute([$idhome, $iduserlogin]);
|
||||
@ -37,39 +36,69 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
function getCategoryIcon($index)
|
||||
{
|
||||
$icons = [
|
||||
'fas fa-balance-scale', // Icona per categoria 0
|
||||
'fas fa-file-alt', // Icona per categoria 1
|
||||
'fas fa-home', // Icona per categoria 2
|
||||
'fas fa-building', // Icona per categoria 3
|
||||
'fas fa-lock', // Icona per categoria 4
|
||||
];
|
||||
return $icons[$index % count($icons)] ?? 'fas fa-folder';
|
||||
}
|
||||
?>
|
||||
|
||||
<!-- Sezione filtri -->
|
||||
<div class="filter-section mb-4 p-3 bg-light rounded shadow-sm">
|
||||
<div class="filter-section mb-4 p-3 bg-light rounded shadow-sm position-relative">
|
||||
<div class="row align-items-center">
|
||||
<!-- Checkbox "Mostra solo obbligatori" -->
|
||||
<div class="col-12 col-md-3 mb-2 mb-md-0">
|
||||
<div class="form-check form-switch">
|
||||
<!-- Contenitore per le icone delle categorie -->
|
||||
<div class="col-12 mb-3">
|
||||
<div class="category-icons-container">
|
||||
<?php
|
||||
$stmt = $pdo->query("SELECT * FROM pages ORDER BY namepages");
|
||||
$pages = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
foreach ($pages as $index => $page) {
|
||||
$slug = htmlspecialchars($page['slug']);
|
||||
$name = ucfirst(htmlspecialchars($page['namepages']));
|
||||
$iconClass = getCategoryIcon($index);
|
||||
echo "<div class='category-icon' data-slug='{$slug}' data-index='{$index}'>
|
||||
<i class='{$iconClass}'></i>
|
||||
<div class='category-name'>{$name}</div>
|
||||
</div>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<!-- Contenitore per le sotto-icone delle sezioni con preloader -->
|
||||
<div class="section-icons-wrapper position-relative">
|
||||
<div class="section-icons-container" style="display: none;"></div>
|
||||
<div class="preloader" style="display: none;">
|
||||
<div class="preloader-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Campo di ricerca e checkbox -->
|
||||
<div class="col-12">
|
||||
<div class="position-relative mt-3">
|
||||
<label for="documentSearch" class="form-label mb-1 fw-bold">Cerca:</label>
|
||||
<input type="text" id="documentSearch" class="form-control w-100" placeholder="Sezione o documento..." autocomplete="off">
|
||||
<div id="searchResults" class="list-group dropdown-menu show w-100" style="position: absolute; max-height: 200px; overflow-y: auto; z-index: 1000; display: none;"></div>
|
||||
</div>
|
||||
<!-- Checkbox -->
|
||||
<div class="form-check form-switch mt-2">
|
||||
<input class="form-check-input" type="checkbox" id="showOnlyRequired">
|
||||
<label class="form-check-label" for="showOnlyRequired">
|
||||
<i class="fas fa-filter me-1"></i> Solo obbligatori
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dropdown "Seleziona Categoria" -->
|
||||
<div class="col-12 col-md-4 mb-2 mb-md-0">
|
||||
<label for="pageSelectDropdown" class="form-label mb-1 fw-bold">Categoria:</label>
|
||||
<select id="pageSelectDropdown" class="form-control w-100">
|
||||
<?php foreach ($pages as $page) { ?>
|
||||
<option value="<?php echo htmlspecialchars($page['slug']); ?>"
|
||||
<?php echo ($docpage === $page['slug']) ? 'selected' : ''; ?>>
|
||||
<?php echo ucfirst(htmlspecialchars($page['namepages'])); ?>
|
||||
</option>
|
||||
<?php } ?>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Campo di ricerca -->
|
||||
<div class="col-12 col-md-5 mb-2 mb-md-0 position-relative">
|
||||
<label for="documentSearch" class="form-label mb-1 fw-bold">Cerca:</label>
|
||||
<input type="text" id="documentSearch" class="form-control w-100" placeholder="Sezione o documento..." autocomplete="off">
|
||||
<div id="searchResults" class="list-group dropdown-menu show w-100" style="position: absolute; max-height: 200px; overflow-y: auto; z-index: 1000; display: none;"></div>
|
||||
<!-- Preloader per i documenti -->
|
||||
<div class="document-preloader" style="display: none;">
|
||||
<div class="preloader-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenitore per i documenti dinamici -->
|
||||
<div id="documentSections" class="accordion"></div>
|
||||
</div>
|
||||
@ -77,173 +106,6 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Personalizza la riga della sezione */
|
||||
.section-header {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #007bff;
|
||||
color: #007bff;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
padding: 15px 20px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-header:hover {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.section-header i {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.document-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
background-color: #f0f8ff;
|
||||
border: 2px dashed #007bff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.dropzone:hover {
|
||||
background-color: #e6f5ff;
|
||||
}
|
||||
|
||||
.dropzone .dz-message {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.dropzone .dz-message i {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 10px;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.document-list-table th,
|
||||
.document-list-table td {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.section-separator {
|
||||
border-top: 2px solid #ddd;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
background-color: #322999;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
border: 1px solid #007bff;
|
||||
}
|
||||
|
||||
.accordion-button:hover {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.accordion-button i {
|
||||
font-size: 1.5rem;
|
||||
color: #fff562;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.toggle-dropzone {
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.dropzone-container {
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px dashed #007bff;
|
||||
border-radius: 8px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#documentSearch {
|
||||
border-radius: 0.25rem 0 0 0.25rem;
|
||||
}
|
||||
|
||||
#searchResults {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#searchResults .list-group-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#searchResults .list-group-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.input-group {
|
||||
max-width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#pageSelectDropdown,
|
||||
#documentSearch {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Stile per la sezione filtri */
|
||||
.filter-section {
|
||||
background-color: #f8f9fa;
|
||||
@ -253,51 +115,102 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Stile per il checkbox */
|
||||
.form-check.form-switch {
|
||||
/* Stile per il contenitore delle icone delle categorie */
|
||||
.category-icons-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Stile per le icone delle categorie */
|
||||
.category-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
width: 2em;
|
||||
height: 1em;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 80px;
|
||||
max-width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: #007bff;
|
||||
.category-icon:hover,
|
||||
.category-icon.active {
|
||||
border-color: #007bff;
|
||||
background-color: #e6f5ff;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-check-label i {
|
||||
.category-icon i {
|
||||
font-size: 1.5rem;
|
||||
color: #007bff;
|
||||
font-size: 1rem;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-check-label:hover {
|
||||
.category-name {
|
||||
font-size: 0.85rem;
|
||||
color: #333;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
padding: 0 5px;
|
||||
min-height: 2.5em;
|
||||
}
|
||||
|
||||
/* Stile per il contenitore delle sotto-icone delle sezioni */
|
||||
.section-icons-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
background-color: #fff;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 70px;
|
||||
max-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-icon:hover,
|
||||
.section-icon.active {
|
||||
border-color: #0056b3;
|
||||
background-color: #cce5ff;
|
||||
}
|
||||
|
||||
.section-icon i {
|
||||
font-size: 1.2rem;
|
||||
color: #0056b3;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
/* Stile per le etichette dei filtri */
|
||||
.form-label {
|
||||
font-size: 0.9rem;
|
||||
color: #555;
|
||||
/* Mostra sempre il nome della sezione */
|
||||
.section-name {
|
||||
font-size: 0.8rem;
|
||||
color: #333;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
text-align: center;
|
||||
padding: 0 5px;
|
||||
min-height: 2em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Stile per il dropdown e il campo di ricerca */
|
||||
/* Stile per il campo di ricerca */
|
||||
.form-control {
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
@ -326,53 +239,159 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
|
||||
/* Responsive: impila i filtri su schermi piccoli */
|
||||
/* Stile per il titolo del documento */
|
||||
.document-title {
|
||||
font-weight: bold;
|
||||
/* Grassetto per maggiore risalto */
|
||||
font-size: 1.1rem;
|
||||
/* Aumenta leggermente la dimensione */
|
||||
color: #2c3e50;
|
||||
/* Colore scuro per contrasto */
|
||||
}
|
||||
|
||||
/* Stile per il preloader */
|
||||
.preloader,
|
||||
.document-preloader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.preloader-inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 5px solid #f3f3f3;
|
||||
border-top: 5px solid #007bff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 767.98px) {
|
||||
.filter-section {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form-check.form-switch {
|
||||
.category-icons-container,
|
||||
.section-icons-container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
text-align: center;
|
||||
.category-icon,
|
||||
.section-icon {
|
||||
min-width: 70px;
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100% !important;
|
||||
.category-name,
|
||||
.section-name {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.document-title {
|
||||
font-size: 1rem;
|
||||
/* Riduci leggermente su mobile */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Inizializza Select2
|
||||
$("#pageSelectDropdown").select2({
|
||||
placeholder: "Seleziona una categoria...",
|
||||
allowClear: true,
|
||||
theme: "classic",
|
||||
width: 'resolve'
|
||||
});
|
||||
|
||||
// Caricamento iniziale dei documenti per lo slug predefinito
|
||||
let idhome = <?php echo $idhome; ?>;
|
||||
loadDocuments('<?php echo $docpage; ?>');
|
||||
let currentCategory = '<?php echo $docpage; ?>';
|
||||
let currentSection = null;
|
||||
|
||||
// Gestione del cambio del dropdown senza ricaricare la pagina
|
||||
$("#pageSelectDropdown").on("change", function() {
|
||||
const slug = $(this).val();
|
||||
loadDocuments(slug);
|
||||
// Caricamento iniziale: non carichiamo documenti finché non selezioniamo una sezione
|
||||
// loadDocuments(currentCategory); // Rimuoviamo questa chiamata
|
||||
|
||||
// Gestione del clic sulle icone delle categorie
|
||||
$('.category-icon').on('click', function() {
|
||||
const slug = $(this).data('slug');
|
||||
if (currentCategory === slug) return;
|
||||
|
||||
currentCategory = slug;
|
||||
currentSection = null;
|
||||
$('.category-icon').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
$('.section-icons-container').hide().empty();
|
||||
$('#documentSections').empty(); // Svuota i documenti quando selezioni una categoria
|
||||
$('.preloader').show(); // Mostra il preloader
|
||||
loadSections(slug);
|
||||
});
|
||||
|
||||
// Gestione del checkbox "Mostra solo obbligatori"
|
||||
$("#showOnlyRequired").on("change", function() {
|
||||
const slug = $("#pageSelectDropdown").val();
|
||||
loadDocuments(slug);
|
||||
// Gestione del clic sulle icone delle sezioni
|
||||
$(document).on('click', '.section-icon', function() {
|
||||
const sectionId = $(this).data('section-id');
|
||||
const sectionName = $(this).find('.section-name').text(); // Recupera il nome della sezione
|
||||
if (currentSection === sectionId) return;
|
||||
|
||||
currentSection = sectionId;
|
||||
$('.section-icon').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
$('.document-preloader').show(); // Mostra il preloader per i documenti
|
||||
loadDocuments(currentCategory, sectionId, sectionName); // Carica i documenti della sezione
|
||||
});
|
||||
|
||||
// Carica tutti i documenti e le sezioni da tutte le pagine per la ricerca
|
||||
// Gestione del checkbox "Solo obbligatori"
|
||||
$("#showOnlyRequired").on('change', function() {
|
||||
if (currentSection) { // Carica solo se una sezione è selezionata
|
||||
const sectionName = $('.section-icon.active .section-name').text();
|
||||
$('.document-preloader').show(); // Mostra il preloader
|
||||
loadDocuments(currentCategory, currentSection, sectionName);
|
||||
}
|
||||
});
|
||||
|
||||
// Carica le sezioni per una categoria
|
||||
function loadSections(slug) {
|
||||
$.ajax({
|
||||
url: 'get-sections.php',
|
||||
method: 'GET',
|
||||
data: {
|
||||
slug: slug,
|
||||
idhome: idhome
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function(response) {
|
||||
$('.preloader').hide(); // Nascondi il preloader
|
||||
if (response.error) {
|
||||
console.error(response.error);
|
||||
return;
|
||||
}
|
||||
const sections = response.sections || [];
|
||||
let html = '';
|
||||
sections.forEach(section => {
|
||||
html += `<div class='section-icon' data-section-id='${md5(section.section_name)}'>
|
||||
<i class='fas fa-folder'></i>
|
||||
<div class='section-name'>${section.section_name}</div>
|
||||
</div>`;
|
||||
});
|
||||
$('.section-icons-container').html(html).slideDown();
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
$('.preloader').hide(); // Nascondi il preloader in caso di errore
|
||||
console.error('Errore nel caricamento delle sezioni:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Carica tutti i documenti e le sezioni per la ricerca
|
||||
let allDocuments = [];
|
||||
<?php
|
||||
$stmt = $pdo->query("
|
||||
@ -415,19 +434,33 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
});
|
||||
$('#searchResults').html(html).show();
|
||||
|
||||
// Gestione del click sui risultati
|
||||
$('#searchResults .list-group-item').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
const slug = $(this).data('slug');
|
||||
const sectionId = $(this).data('section');
|
||||
|
||||
// Aggiorna il dropdown e carica i documenti
|
||||
$('#pageSelectDropdown').val(slug).trigger('change');
|
||||
loadDocuments(slug, sectionId);
|
||||
currentCategory = slug;
|
||||
currentSection = sectionId;
|
||||
$('.category-icon').removeClass('active');
|
||||
$('.category-icon[data-slug="' + slug + '"]').addClass('active');
|
||||
$('.section-icons-container').hide().empty();
|
||||
$('.preloader').show(); // Mostra il preloader durante la ricerca
|
||||
loadSections(slug);
|
||||
|
||||
// Resetta il campo di ricerca e nasconde i risultati
|
||||
$('#documentSearch').val('');
|
||||
$('#searchResults').hide();
|
||||
|
||||
// Trova il nome della sezione e carica i documenti
|
||||
setTimeout(() => {
|
||||
const sectionElement = $(`.section-icon[data-section-id="${sectionId}"]`);
|
||||
if (sectionElement.length) {
|
||||
$('.section-icon').removeClass('active');
|
||||
sectionElement.addClass('active');
|
||||
const sectionName = sectionElement.find('.section-name').text();
|
||||
$('.document-preloader').show(); // Mostra il preloader
|
||||
loadDocuments(slug, sectionId, sectionName);
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -439,7 +472,7 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
}
|
||||
});
|
||||
|
||||
function loadDocuments(slug, targetSectionId = null) {
|
||||
function loadDocuments(slug, targetSectionId = null, sectionName = null) {
|
||||
const showOnlyRequired = $("#showOnlyRequired").is(":checked");
|
||||
|
||||
$.ajax({
|
||||
@ -448,10 +481,12 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
data: {
|
||||
slug: slug,
|
||||
idhome: idhome,
|
||||
showOnlyRequired: showOnlyRequired // Passa il filtro al backend
|
||||
showOnlyRequired: showOnlyRequired,
|
||||
sectionId: targetSectionId ? targetSectionId : null
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function(response) {
|
||||
$('.document-preloader').hide(); // Nascondi il preloader
|
||||
if (response.error) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
@ -466,35 +501,32 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
const documents = response.documents || {};
|
||||
const loadedDocuments = response.loadedDocuments || {};
|
||||
|
||||
// Aggiorna i dettagli della casa
|
||||
$('.page-title').text(`Documenti per la Casa: ${homeName}`);
|
||||
$('p.mb-0 strong').text(`Indirizzo: ${homeAddress}`);
|
||||
|
||||
// Svuota e ricrea le sezioni dei documenti
|
||||
$('#documentSections').empty();
|
||||
let html = '';
|
||||
let sectionCount = 0;
|
||||
|
||||
for (let sectionName in documents) {
|
||||
for (let sectionKey in documents) {
|
||||
if (sectionCount >= 100) {
|
||||
console.error('Troppi loop nelle sezioni, possibile errore nei dati');
|
||||
break;
|
||||
}
|
||||
sectionCount++;
|
||||
|
||||
// Usa il nome della sezione passato come parametro
|
||||
const displaySectionName = sectionName || sectionKey;
|
||||
|
||||
html += `
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="heading-${md5(sectionName)}">
|
||||
<button class="accordion-button collapsed section-header full-width" type="button" data-toggle="collapse" data-target="#collapse-${md5(sectionName)}" aria-expanded="false" aria-controls="collapse-${md5(sectionName)}">
|
||||
<i class="fas fa-door-open"></i> ${sectionName}
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapse-${md5(sectionName)}" class="accordion-collapse collapse" aria-labelledby="heading-${md5(sectionName)}" data-parent="#documentSections">
|
||||
<h2 class="accordion-header" id="heading-${md5(sectionKey)}"></h2>
|
||||
<div id="collapse-${md5(sectionKey)}" class="accordion-collapse collapse" aria-labelledby="heading-${md5(sectionKey)}" data-parent="#documentSections">
|
||||
<div class="accordion-body">
|
||||
`;
|
||||
|
||||
let docCount = 0;
|
||||
(documents[sectionName] || []).forEach(document => {
|
||||
(documents[sectionKey] || []).forEach(document => {
|
||||
if (docCount >= 100) {
|
||||
console.error('Troppi loop nei documenti, possibile errore nei dati');
|
||||
return;
|
||||
@ -562,7 +594,6 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
}
|
||||
$('#documentSections').html(html);
|
||||
|
||||
// Se c'è un targetSectionId, espandi solo quella sezione
|
||||
if (targetSectionId) {
|
||||
setTimeout(() => {
|
||||
const collapseElement = $(`#collapse-${targetSectionId}`);
|
||||
@ -572,12 +603,6 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
$('html, body').animate({
|
||||
scrollTop: collapseElement.offset().top - 100
|
||||
}, 500);
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'warning',
|
||||
title: 'Attenzione',
|
||||
text: 'La sezione cercata non è stata trovata.'
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
@ -620,7 +645,6 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
let parsedResponse = typeof response === "string" ? JSON.parse(response) : response;
|
||||
|
||||
if (parsedResponse.success) {
|
||||
// Usa document.document_id invece di parsedResponse.documentId
|
||||
updateDocumentTable(document.document_id, parsedResponse);
|
||||
Swal.fire({
|
||||
icon: "success",
|
||||
@ -717,9 +741,8 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
|
||||
if (parsedResponse.success) {
|
||||
$row.remove();
|
||||
// Controlla se la tabella è vuota
|
||||
if ($table.find("tbody tr").length === 0) {
|
||||
$section.empty(); // Rimuove la tabella e il titolo
|
||||
$section.empty();
|
||||
}
|
||||
Swal.fire({
|
||||
icon: "success",
|
||||
@ -758,7 +781,6 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
|
||||
// Funzione per aggiornare dinamicamente la tabella dei documenti
|
||||
function updateDocumentTable(documentId, parsedResponse) {
|
||||
console.log('Aggiornamento tabella per documentId:', documentId, 'con risposta:', parsedResponse); // Debug
|
||||
const sectionId = `#loaded-documents-${documentId}`;
|
||||
const $section = $(sectionId);
|
||||
|
||||
@ -769,8 +791,6 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
|
||||
let $table = $section.find(`#table-${documentId}`);
|
||||
if ($table.length === 0) {
|
||||
// Se la tabella non esiste, crea la sezione e la tabella
|
||||
console.log('Creazione nuova tabella per documentId:', documentId);
|
||||
const tableHtml = `
|
||||
<h6 class="mt-4">Documenti già caricati:</h6>
|
||||
<table class="table table-bordered document-list-table" id="table-${documentId}">
|
||||
@ -791,10 +811,7 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
</table>
|
||||
`;
|
||||
$section.html(tableHtml);
|
||||
console.log('Tabella creata:', $section.html()); // Debug
|
||||
} else {
|
||||
// Se la tabella esiste, aggiungi la nuova riga
|
||||
console.log('Aggiunta riga alla tabella esistente per documentId:', documentId);
|
||||
const row = `
|
||||
<tr>
|
||||
<td><a href="homedocuments/${parsedResponse.fileName}" target="_blank">${parsedResponse.fileName}</a></td>
|
||||
@ -802,7 +819,6 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
<td><button class="btn btn-danger btn-sm delete-document" data-id="${parsedResponse.documentId}" data-file="${parsedResponse.fileName}">Elimina</button></td>
|
||||
</tr>`;
|
||||
$table.find("tbody").append(row);
|
||||
console.log('Riga aggiunta:', row); // Debug
|
||||
}
|
||||
}
|
||||
|
||||
@ -825,9 +841,7 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
let parsedResponse = typeof response === "string" ? JSON.parse(response) : response;
|
||||
|
||||
if (parsedResponse.success) {
|
||||
// Aggiorna dinamicamente la tabella
|
||||
updateDocumentTable(documentId, parsedResponse);
|
||||
// Mostra un messaggio di successo
|
||||
Swal.fire({
|
||||
icon: "success",
|
||||
title: "Caricamento completato",
|
||||
@ -863,6 +877,7 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
};
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
$('.document-preloader').hide(); // Nascondi il preloader in caso di errore
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Errore',
|
||||
|
||||
875
public/userportal/tabs/documenti_condropdown.php
Normal file
875
public/userportal/tabs/documenti_condropdown.php
Normal file
@ -0,0 +1,875 @@
|
||||
<?php
|
||||
// Assicurati che idhome sia passato
|
||||
if (!isset($idhome) || $idhome <= 0) {
|
||||
die("Errore: ID immobile non valido.");
|
||||
}
|
||||
|
||||
|
||||
// Recupera i dettagli della casa
|
||||
$stmt = $pdo->prepare("SELECT name, address, zip, city, country FROM home WHERE idhome = ? AND iduser = ?");
|
||||
$stmt->execute([$idhome, $iduserlogin]);
|
||||
$homeData = $stmt->fetch(PDO::FETCH_ASSOC);
|
||||
|
||||
if (!$homeData) {
|
||||
die("Errore: Casa non trovata o accesso non autorizzato.");
|
||||
}
|
||||
|
||||
// Recupera le pagine disponibili nella tabella 'pages'
|
||||
$stmt = $pdo->query("SELECT * FROM pages ORDER BY namepages");
|
||||
$pages = [];
|
||||
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
|
||||
$pages[] = $row;
|
||||
}
|
||||
|
||||
// Imposta lo slug predefinito
|
||||
$docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
|
||||
?>
|
||||
|
||||
<!-- Contenuto del tab Documenti -->
|
||||
<div class="tab-pane fade show active" id="documenti" role="tabpanel" aria-labelledby="documenti-tab">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<!-- Dettagli della Casa -->
|
||||
<div class="row align-items-center mb-4">
|
||||
<div class="col-sm-8">
|
||||
<h4 class="page-title m-0">Documenti per la Casa: <?php echo htmlspecialchars($homeData['name']); ?></h4>
|
||||
<p class="mb-0"><strong>Indirizzo:</strong> <?php echo htmlspecialchars($homeData['address']) . ', ' . htmlspecialchars($homeData['city']) . ' ' . htmlspecialchars($homeData['zip']); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sezione filtri -->
|
||||
<div class="filter-section mb-4 p-3 bg-light rounded shadow-sm">
|
||||
<div class="row align-items-center">
|
||||
<!-- Checkbox "Mostra solo obbligatori" -->
|
||||
<div class="col-12 col-md-3 mb-2 mb-md-0">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="showOnlyRequired">
|
||||
<label class="form-check-label" for="showOnlyRequired">
|
||||
<i class="fas fa-filter me-1"></i> Solo obbligatori
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dropdown "Seleziona Categoria" -->
|
||||
<div class="col-12 col-md-4 mb-2 mb-md-0">
|
||||
<label for="pageSelectDropdown" class="form-label mb-1 fw-bold">Categoria:</label>
|
||||
<select id="pageSelectDropdown" class="form-control w-100">
|
||||
<?php foreach ($pages as $page) { ?>
|
||||
<option value="<?php echo htmlspecialchars($page['slug']); ?>"
|
||||
<?php echo ($docpage === $page['slug']) ? 'selected' : ''; ?>>
|
||||
<?php echo ucfirst(htmlspecialchars($page['namepages'])); ?>
|
||||
</option>
|
||||
<?php } ?>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Campo di ricerca -->
|
||||
<div class="col-12 col-md-5 mb-2 mb-md-0 position-relative">
|
||||
<label for="documentSearch" class="form-label mb-1 fw-bold">Cerca:</label>
|
||||
<input type="text" id="documentSearch" class="form-control w-100" placeholder="Sezione o documento..." autocomplete="off">
|
||||
<div id="searchResults" class="list-group dropdown-menu show w-100" style="position: absolute; max-height: 200px; overflow-y: auto; z-index: 1000; display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenitore per i documenti dinamici -->
|
||||
<div id="documentSections" class="accordion"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Personalizza la riga della sezione */
|
||||
.section-header {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #007bff;
|
||||
color: #007bff;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
padding: 15px 20px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-header:hover {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.section-header i {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.document-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
background-color: #f0f8ff;
|
||||
border: 2px dashed #007bff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.dropzone:hover {
|
||||
background-color: #e6f5ff;
|
||||
}
|
||||
|
||||
.dropzone .dz-message {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.dropzone .dz-message i {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 10px;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.document-list-table th,
|
||||
.document-list-table td {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.section-separator {
|
||||
border-top: 2px solid #ddd;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
background-color: #322999;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
border: 1px solid #007bff;
|
||||
}
|
||||
|
||||
.accordion-button:hover {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.accordion-button i {
|
||||
font-size: 1.5rem;
|
||||
color: #fff562;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.toggle-dropzone {
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.dropzone-container {
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px dashed #007bff;
|
||||
border-radius: 8px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#documentSearch {
|
||||
border-radius: 0.25rem 0 0 0.25rem;
|
||||
}
|
||||
|
||||
#searchResults {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#searchResults .list-group-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#searchResults .list-group-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.input-group {
|
||||
max-width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#pageSelectDropdown,
|
||||
#documentSearch {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Stile per la sezione filtri */
|
||||
.filter-section {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Stile per il checkbox */
|
||||
.form-check.form-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
width: 2em;
|
||||
height: 1em;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-check-label i {
|
||||
color: #007bff;
|
||||
font-size: 1rem;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.form-check-label:hover {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* Stile per le etichette dei filtri */
|
||||
.form-label {
|
||||
font-size: 0.9rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Stile per il dropdown e il campo di ricerca */
|
||||
.form-control {
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
padding: 8px 12px;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Stile per i risultati della ricerca */
|
||||
#searchResults {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ddd;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#searchResults .list-group-item {
|
||||
font-size: 0.9rem;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
#searchResults .list-group-item:hover {
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
|
||||
/* Responsive: impila i filtri su schermi piccoli */
|
||||
@media (max-width: 767.98px) {
|
||||
.filter-section {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form-check.form-switch {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Inizializza Select2
|
||||
$("#pageSelectDropdown").select2({
|
||||
placeholder: "Seleziona una categoria...",
|
||||
allowClear: true,
|
||||
theme: "classic",
|
||||
width: 'resolve'
|
||||
});
|
||||
|
||||
// Caricamento iniziale dei documenti per lo slug predefinito
|
||||
let idhome = <?php echo $idhome; ?>;
|
||||
loadDocuments('<?php echo $docpage; ?>');
|
||||
|
||||
// Gestione del cambio del dropdown senza ricaricare la pagina
|
||||
$("#pageSelectDropdown").on("change", function() {
|
||||
const slug = $(this).val();
|
||||
loadDocuments(slug);
|
||||
});
|
||||
|
||||
// Gestione del checkbox "Mostra solo obbligatori"
|
||||
$("#showOnlyRequired").on("change", function() {
|
||||
const slug = $("#pageSelectDropdown").val();
|
||||
loadDocuments(slug);
|
||||
});
|
||||
|
||||
// Carica tutti i documenti e le sezioni da tutte le pagine per la ricerca
|
||||
let allDocuments = [];
|
||||
<?php
|
||||
$stmt = $pdo->query("
|
||||
SELECT d.document_id, d.document_name, p.slug, s.section_name
|
||||
FROM documents d
|
||||
LEFT JOIN sections s ON d.idsections = s.idsections
|
||||
LEFT JOIN pages p ON d.page_id = p.idpages
|
||||
ORDER BY s.section_name, d.document_name
|
||||
");
|
||||
while ($doc = $stmt->fetch(PDO::FETCH_ASSOC)) {
|
||||
echo "allDocuments.push({
|
||||
id: '{$doc['document_id']}',
|
||||
name: '" . addslashes(htmlspecialchars($doc['document_name'])) . "',
|
||||
section: '" . addslashes(htmlspecialchars($doc['section_name'])) . "',
|
||||
slug: '" . addslashes(htmlspecialchars($doc['slug'])) . "'
|
||||
});\n";
|
||||
}
|
||||
?>
|
||||
|
||||
// Gestione della ricerca dinamica
|
||||
$('#documentSearch').on('input', function() {
|
||||
const searchTerm = $(this).val().toLowerCase().trim();
|
||||
$('#searchResults').empty().hide();
|
||||
|
||||
if (searchTerm === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
const results = allDocuments.filter(item =>
|
||||
item.name.toLowerCase().includes(searchTerm) ||
|
||||
item.section.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
|
||||
if (results.length > 0) {
|
||||
let html = '';
|
||||
results.forEach(result => {
|
||||
html += `<a href="#" class="list-group-item list-group-item-action" data-slug="${result.slug}" data-section="${md5(result.section)}">
|
||||
${result.name} (Sezione: ${result.section})
|
||||
</a>`;
|
||||
});
|
||||
$('#searchResults').html(html).show();
|
||||
|
||||
// Gestione del click sui risultati
|
||||
$('#searchResults .list-group-item').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
const slug = $(this).data('slug');
|
||||
const sectionId = $(this).data('section');
|
||||
|
||||
// Aggiorna il dropdown e carica i documenti
|
||||
$('#pageSelectDropdown').val(slug).trigger('change');
|
||||
loadDocuments(slug, sectionId);
|
||||
|
||||
// Resetta il campo di ricerca e nasconde i risultati
|
||||
$('#documentSearch').val('');
|
||||
$('#searchResults').hide();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Chiudi i risultati della ricerca se clicchi fuori
|
||||
$(document).on('click', function(e) {
|
||||
if (!$(e.target).closest('.input-group, #searchResults').length) {
|
||||
$('#searchResults').hide();
|
||||
}
|
||||
});
|
||||
|
||||
function loadDocuments(slug, targetSectionId = null) {
|
||||
const showOnlyRequired = $("#showOnlyRequired").is(":checked");
|
||||
|
||||
$.ajax({
|
||||
url: 'get-documents.php',
|
||||
method: 'GET',
|
||||
data: {
|
||||
slug: slug,
|
||||
idhome: idhome,
|
||||
showOnlyRequired: showOnlyRequired // Passa il filtro al backend
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function(response) {
|
||||
if (response.error) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Errore',
|
||||
text: response.error
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const homeName = response.homeName || 'Nome non disponibile';
|
||||
const homeAddress = response.homeAddress || 'Indirizzo non disponibile';
|
||||
const documents = response.documents || {};
|
||||
const loadedDocuments = response.loadedDocuments || {};
|
||||
|
||||
// Aggiorna i dettagli della casa
|
||||
$('.page-title').text(`Documenti per la Casa: ${homeName}`);
|
||||
$('p.mb-0 strong').text(`Indirizzo: ${homeAddress}`);
|
||||
|
||||
// Svuota e ricrea le sezioni dei documenti
|
||||
$('#documentSections').empty();
|
||||
let html = '';
|
||||
let sectionCount = 0;
|
||||
|
||||
for (let sectionName in documents) {
|
||||
if (sectionCount >= 100) {
|
||||
console.error('Troppi loop nelle sezioni, possibile errore nei dati');
|
||||
break;
|
||||
}
|
||||
sectionCount++;
|
||||
|
||||
html += `
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="heading-${md5(sectionName)}">
|
||||
<button class="accordion-button collapsed section-header full-width" type="button" data-toggle="collapse" data-target="#collapse-${md5(sectionName)}" aria-expanded="false" aria-controls="collapse-${md5(sectionName)}">
|
||||
<i class="fas fa-door-open"></i> ${sectionName}
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapse-${md5(sectionName)}" class="accordion-collapse collapse" aria-labelledby="heading-${md5(sectionName)}" data-parent="#documentSections">
|
||||
<div class="accordion-body">
|
||||
`;
|
||||
|
||||
let docCount = 0;
|
||||
(documents[sectionName] || []).forEach(document => {
|
||||
if (docCount >= 100) {
|
||||
console.error('Troppi loop nei documenti, possibile errore nei dati');
|
||||
return;
|
||||
}
|
||||
docCount++;
|
||||
|
||||
html += `
|
||||
<div class="card card-body mb-4">
|
||||
<div class="document-header d-flex justify-content-between align-items-center p-3 mb-3" style="background-color: #e8f5e9; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
|
||||
<div>
|
||||
<span class="document-title fw-bold">${document.document_name || 'Documento senza nome'}</span>
|
||||
${document.is_required ? '<span class="badge bg-danger ms-2" style="font-size: 1rem; padding: 0.5em 0.8em;">Obbligatorio</span>' : ''}
|
||||
${document.max_documents > 0 ? `<span class="badge bg-info ms-2" style="font-size: 1rem; padding: 0.5em 0.8em;">Max: ${document.max_documents}</span>` : ''}
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-primary toggle-dropzone" data-target="#dropzone-${document.document_id}">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropzone-container collapse" id="dropzone-${document.document_id}">
|
||||
<div class="dropzone mb-3" id="dropzone-area-${document.document_id}">
|
||||
<div class="dz-message">
|
||||
<i class="fas fa-cloud-upload-alt"></i><br>
|
||||
Trascina qui i documenti o clicca per caricarli
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
<label class="btn btn-outline-primary btn-sm">
|
||||
<i class="fas fa-camera"></i> Scatta una foto
|
||||
<input type="file" accept="image/*" capture="camera" id="cameraInput-${document.document_id}" class="d-none" onchange="uploadFromCamera(this, '${document.document_id}')">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loaded-documents-section" id="loaded-documents-${document.document_id}">
|
||||
${(loadedDocuments[document.document_id] || []).length > 0 ? `
|
||||
<h6 class="mt-4">Documenti già caricati:</h6>
|
||||
<table class="table table-bordered document-list-table" id="table-${document.document_id}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome Documento</th>
|
||||
<th>Data Caricamento</th>
|
||||
<th>Azioni</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${loadedDocuments[document.document_id].map(doc => `
|
||||
<tr>
|
||||
<td><a href="homedocuments/${doc.filename}" target="_blank">${doc.filename}</a></td>
|
||||
<td>${doc.created_at}</td>
|
||||
<td><button class="btn btn-danger btn-sm delete-document" data-id="${doc.id}" data-file="${doc.filename}">Elimina</button></td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
html += `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
$('#documentSections').html(html);
|
||||
|
||||
// Se c'è un targetSectionId, espandi solo quella sezione
|
||||
if (targetSectionId) {
|
||||
setTimeout(() => {
|
||||
const collapseElement = $(`#collapse-${targetSectionId}`);
|
||||
if (collapseElement.length) {
|
||||
$('.accordion-collapse.collapse').collapse('hide');
|
||||
collapseElement.collapse('show');
|
||||
$('html, body').animate({
|
||||
scrollTop: collapseElement.offset().top - 100
|
||||
}, 500);
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'warning',
|
||||
title: 'Attenzione',
|
||||
text: 'La sezione cercata non è stata trovata.'
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Rinizializza Dropzone per ogni documento
|
||||
for (let sectionName in documents) {
|
||||
(documents[sectionName] || []).forEach(document => {
|
||||
if (!Dropzone.instances.some(dz => dz.element.id === `dropzone-area-${document.document_id}`)) {
|
||||
new Dropzone(`#dropzone-area-${document.document_id}`, {
|
||||
url: "upload-document.php",
|
||||
paramName: "file",
|
||||
maxFiles: document.max_documents || 1,
|
||||
maxFilesize: 5,
|
||||
addRemoveLinks: true,
|
||||
acceptedFiles: "image/*,application/pdf",
|
||||
dictDefaultMessage: "Trascina qui i file o clicca per caricarli",
|
||||
dictRemoveFile: "Rimuovi",
|
||||
previewTemplate: `
|
||||
<div class="dz-preview dz-file-preview">
|
||||
<div class="dz-image"><img data-dz-thumbnail /></div>
|
||||
<div class="dz-details">
|
||||
<div class="dz-filename"><span data-dz-name></span></div>
|
||||
<div class="dz-size"><span data-dz-size></span></div>
|
||||
</div>
|
||||
<div class="dz-progress">
|
||||
<span class="dz-upload" data-dz-uploadprogress></span>
|
||||
</div>
|
||||
<div class="dz-error-message"><span data-dz-errormessage></span></div>
|
||||
<div class="dz-success-mark">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</div>
|
||||
<div class="dz-error-mark">
|
||||
<i class="fas fa-times-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
init: function() {
|
||||
this.on("success", function(file, response) {
|
||||
try {
|
||||
let parsedResponse = typeof response === "string" ? JSON.parse(response) : response;
|
||||
|
||||
if (parsedResponse.success) {
|
||||
// Usa document.document_id invece di parsedResponse.documentId
|
||||
updateDocumentTable(document.document_id, parsedResponse);
|
||||
Swal.fire({
|
||||
icon: "success",
|
||||
title: "Caricamento completato",
|
||||
text: "Il documento è stato caricato con successo.",
|
||||
timer: 1500,
|
||||
showConfirmButton: false
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Errore",
|
||||
text: parsedResponse.message || "Errore nel caricamento",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Errore nel parsing della risposta:", error);
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Errore",
|
||||
text: "Risposta dal server non valida.",
|
||||
});
|
||||
}
|
||||
this.removeFile(file);
|
||||
});
|
||||
|
||||
this.on("error", function(file, errorMessage) {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Errore",
|
||||
text: errorMessage || "Si è verificato un problema.",
|
||||
});
|
||||
this.removeFile(file);
|
||||
});
|
||||
},
|
||||
sending: function(file, xhr, formData) {
|
||||
formData.append("idhome", idhome);
|
||||
formData.append("document_id", document.document_id);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Rinizializza il toggle Dropzone
|
||||
document.querySelectorAll('.toggle-dropzone').forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const target = document.querySelector(this.dataset.target);
|
||||
const icon = this.querySelector('i');
|
||||
|
||||
if (target.classList.contains('show')) {
|
||||
target.classList.remove('show');
|
||||
target.style.display = 'none';
|
||||
icon.classList.remove('fa-minus');
|
||||
icon.classList.add('fa-plus');
|
||||
} else {
|
||||
target.classList.add('show');
|
||||
target.style.display = 'block';
|
||||
icon.classList.remove('fa-plus');
|
||||
icon.classList.add('fa-minus');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Rinizializza la gestione dei documenti eliminati
|
||||
$(document).on("click", ".delete-document", function() {
|
||||
const documentId = $(this).data("id");
|
||||
const fileName = $(this).data("file");
|
||||
const $row = $(this).closest("tr");
|
||||
const $table = $row.closest("table");
|
||||
const $section = $table.closest('.loaded-documents-section');
|
||||
|
||||
Swal.fire({
|
||||
title: "Sei sicuro?",
|
||||
text: "Questa azione eliminerà il documento in modo permanente.",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#d33",
|
||||
cancelButtonColor: "#3085d6",
|
||||
confirmButtonText: "Sì, elimina",
|
||||
cancelButtonText: "Annulla",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
$.ajax({
|
||||
url: "delete-document.php",
|
||||
type: "POST",
|
||||
data: {
|
||||
document_id: documentId,
|
||||
file_name: fileName,
|
||||
},
|
||||
success: function(response) {
|
||||
try {
|
||||
const parsedResponse = typeof response === "string" ? JSON.parse(response) : response;
|
||||
|
||||
if (parsedResponse.success) {
|
||||
$row.remove();
|
||||
// Controlla se la tabella è vuota
|
||||
if ($table.find("tbody tr").length === 0) {
|
||||
$section.empty(); // Rimuove la tabella e il titolo
|
||||
}
|
||||
Swal.fire({
|
||||
icon: "success",
|
||||
title: "Eliminato",
|
||||
text: "Documento eliminato con successo.",
|
||||
timer: 1500,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Errore",
|
||||
text: parsedResponse.message || "Impossibile eliminare il documento.",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Errore durante l'eliminazione:", error);
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Errore",
|
||||
text: "Risposta dal server non valida.",
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Errore",
|
||||
text: "Si è verificato un problema con la richiesta.",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Funzione per aggiornare dinamicamente la tabella dei documenti
|
||||
function updateDocumentTable(documentId, parsedResponse) {
|
||||
console.log('Aggiornamento tabella per documentId:', documentId, 'con risposta:', parsedResponse); // Debug
|
||||
const sectionId = `#loaded-documents-${documentId}`;
|
||||
const $section = $(sectionId);
|
||||
|
||||
if (!$section.length) {
|
||||
console.error('Sezione non trovata per documentId:', documentId);
|
||||
return;
|
||||
}
|
||||
|
||||
let $table = $section.find(`#table-${documentId}`);
|
||||
if ($table.length === 0) {
|
||||
// Se la tabella non esiste, crea la sezione e la tabella
|
||||
console.log('Creazione nuova tabella per documentId:', documentId);
|
||||
const tableHtml = `
|
||||
<h6 class="mt-4">Documenti già caricati:</h6>
|
||||
<table class="table table-bordered document-list-table" id="table-${documentId}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome Documento</th>
|
||||
<th>Data Caricamento</th>
|
||||
<th>Azioni</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="homedocuments/${parsedResponse.fileName}" target="_blank">${parsedResponse.fileName}</a></td>
|
||||
<td>${parsedResponse.uploadDate}</td>
|
||||
<td><button class="btn btn-danger btn-sm delete-document" data-id="${parsedResponse.documentId}" data-file="${parsedResponse.fileName}">Elimina</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
$section.html(tableHtml);
|
||||
console.log('Tabella creata:', $section.html()); // Debug
|
||||
} else {
|
||||
// Se la tabella esiste, aggiungi la nuova riga
|
||||
console.log('Aggiunta riga alla tabella esistente per documentId:', documentId);
|
||||
const row = `
|
||||
<tr>
|
||||
<td><a href="homedocuments/${parsedResponse.fileName}" target="_blank">${parsedResponse.fileName}</a></td>
|
||||
<td>${parsedResponse.uploadDate}</td>
|
||||
<td><button class="btn btn-danger btn-sm delete-document" data-id="${parsedResponse.documentId}" data-file="${parsedResponse.fileName}">Elimina</button></td>
|
||||
</tr>`;
|
||||
$table.find("tbody").append(row);
|
||||
console.log('Riga aggiunta:', row); // Debug
|
||||
}
|
||||
}
|
||||
|
||||
// Funzione per caricare un file dalla fotocamera
|
||||
window.uploadFromCamera = function(input, documentId) {
|
||||
if (input.files && input.files[0]) {
|
||||
let formData = new FormData();
|
||||
formData.append("file", input.files[0]);
|
||||
formData.append("idhome", idhome);
|
||||
formData.append("document_id", documentId);
|
||||
|
||||
$.ajax({
|
||||
url: "upload-document.php",
|
||||
type: "POST",
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function(response) {
|
||||
try {
|
||||
let parsedResponse = typeof response === "string" ? JSON.parse(response) : response;
|
||||
|
||||
if (parsedResponse.success) {
|
||||
// Aggiorna dinamicamente la tabella
|
||||
updateDocumentTable(documentId, parsedResponse);
|
||||
// Mostra un messaggio di successo
|
||||
Swal.fire({
|
||||
icon: "success",
|
||||
title: "Caricamento completato",
|
||||
text: "La foto è stata caricata con successo.",
|
||||
timer: 1500,
|
||||
showConfirmButton: false
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Errore",
|
||||
text: parsedResponse.message || "Errore nel caricamento",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Errore nel parsing della risposta:", error);
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Errore",
|
||||
text: "Risposta dal server non valida.",
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Errore",
|
||||
text: "Si è verificato un problema con il caricamento.",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Errore',
|
||||
text: 'Impossibile caricare i documenti: ' + error
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user