change link and color table

This commit is contained in:
2025-07-09 16:45:31 +02:00
parent 7d0824d01f
commit 4c4c6e3153
21 changed files with 9102 additions and 194 deletions
+271 -59
View File
@@ -152,6 +152,44 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
<?php include('cssinclude.php'); ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2Lw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
/* Colori pastello per input/select */
input.auto-input,
select.auto-input {
background-color: #d4edda;
/* Verde pastello */
}
input.manual-input,
select.manual-input {
background-color: #fff3cd;
/* Giallino pastello */
}
input.required-input,
select.required-input {
background-color: #f8d7da;
/* Rossino chiaro */
}
/* Stili base per input/select */
input,
select {
width: 100%;
box-sizing: border-box;
border: 1px solid #ced4da;
border-radius: 4px;
padding: 5px;
font-size: 14px;
}
/* Mantieni leggibilità del testo */
input,
select {
color: #333;
/* Colore scuro per contrasto */
}
/* Stili esistenti rimangono invariati */
.grid-container {
overflow-x: auto;
max-width: 100%;
@@ -214,16 +252,6 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
flex: 0 0 500px !important;
}
.grid-cell input,
.grid-cell select {
width: 100%;
box-sizing: border-box;
border: 1px solid #ced4da;
border-radius: 4px;
padding: 5px;
font-size: 14px;
}
.resizer {
width: 5px;
height: 100%;
@@ -379,7 +407,8 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
<?php include('include/topbar.php'); ?>
<div class="page-wrapper">
<div class="page-content">
<?php include('top_stat_widget.php'); ?>
<?php //include('top_stat_widget.php');
?>
<div class="card radius-10">
<div class="card-header">
<div class="d-flex align-items-center">
@@ -402,15 +431,26 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
foreach ($fixedColumns as $col) {
echo "<div class='grid-cell' style='flex: 0 0 150px;'></div>";
}
// Campi automatici (is_manual = 0)
// Campi automatici (is_manual = 0) - Solo SceltaMultipla ha campo e propagazione
$autoIndex = 0;
foreach ($allMappings as $mapping) {
if (!$mapping['is_manual']) {
echo "<div class='grid-cell' style='flex: 0 0 150px;'></div>";
$inputClass = 'auto-input';
if ($mapping['is_required']) $inputClass .= ' required-input';
if ($mapping['data_type'] === 'SceltaMultipla') {
echo "<div class='grid-cell' style='flex: 0 0 150px;'>";
echo "<select class='custom-field dropdown-select $inputClass' data-column='auto_$autoIndex' data-field-id='{$mapping['field_id']}' " . ($mapping['is_required'] ? 'required' : '') . ">";
echo "<option value=''>Seleziona...</option>";
echo "</select>";
echo "<button type='button' class='propagate-btn' data-column='auto_$autoIndex'><i class='fas fa-arrow-down'></i></button>";
echo "</div>";
} else {
echo "<div class='grid-cell' style='flex: 0 0 150px;'></div>"; // Nessun input per altri tipi
}
$autoIndex++;
}
}
// Campi manuali (is_manual = 1) con propagate-btn
// Campi manuali (is_manual = 1) con propagate-btn - Rimane invariato
$manualIndex = 0;
foreach ($allMappings as $mapping) {
if ($mapping['is_manual']) {
@@ -418,18 +458,20 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
if ($mapping['data_type'] === 'DATE' && $mapping['manual_default'] === 'today') {
$fieldValue = date('Y-m-d');
}
$requiredAttr = $mapping['is_required'] ? 'required' : '';
$inputClass = 'manual-input';
if ($mapping['is_required']) $inputClass .= ' required-input';
echo "<div class='grid-cell' style='flex: 0 0 150px;'>";
if ($mapping['data_type'] === 'SceltaMultipla') {
echo "<select class='custom-field dropdown-select' data-column='manual_$manualIndex' data-field-id='{$mapping['field_id']}' $requiredAttr>";
echo "<select class='custom-field dropdown-select $inputClass' data-column='manual_$manualIndex' data-field-id='{$mapping['field_id']}' " . ($mapping['is_required'] ? 'required' : '') . ">";
echo "<option value=''>Seleziona...</option>";
echo "</select>";
echo "<button type='button' class='propagate-btn' data-column='manual_$manualIndex'><i class='fas fa-arrow-down'></i></button>";
} elseif ($mapping['data_type'] === 'DATE') {
echo "<input type='date' class='custom-field' data-column='manual_$manualIndex' value='" . htmlspecialchars($fieldValue) . "' $requiredAttr>";
echo "<input type='date' class='custom-field $inputClass' data-column='manual_$manualIndex' value='" . htmlspecialchars($fieldValue) . "' " . ($mapping['is_required'] ? 'required' : '') . ">";
} elseif ($mapping['data_type'] === 'INT') {
echo "<input type='number' class='custom-field' data-column='manual_$manualIndex' value='" . htmlspecialchars($fieldValue) . "' $requiredAttr>";
echo "<input type='number' class='custom-field $inputClass' data-column='manual_$manualIndex' value='" . htmlspecialchars($fieldValue) . "' " . ($mapping['is_required'] ? 'required' : '') . ">";
} else {
echo "<input type='text' class='custom-field' data-column='manual_$manualIndex' value='" . htmlspecialchars($fieldValue) . "' $requiredAttr>";
echo "<input type='text' class='custom-field $inputClass' data-column='manual_$manualIndex' value='" . htmlspecialchars($fieldValue) . "' " . ($mapping['is_required'] ? 'required' : '') . ">";
}
echo "<button type='button' class='propagate-btn' data-column='manual_$manualIndex'><i class='fas fa-arrow-down'></i></button>";
echo "</div>";
@@ -515,19 +557,19 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
$detail = reset($detail) ?: ['field_value' => $mapping['manual_default']];
$fieldValue = $detail['field_value'] ?? $mapping['manual_default'] ?? '';
$requiredClass = ($mapping['is_required'] && (is_null($fieldValue) || $fieldValue === '')) ? 'missing-required' : '';
$requiredAttr = $mapping['is_required'] ? 'required' : '';
$inputClass = 'auto-input';
if ($mapping['is_required']) $inputClass .= ' required-input';
echo "<div class='grid-cell editable-cell $requiredClass' data-col='auto_$autoIndex' data-row='$index' data-index='$cellIndex' style='flex: 0 0 150px;'>";
if ($mapping['data_type'] === 'SceltaMultipla') {
echo "<select name='rows[$index][details][{$mapping['id']}][field_value]' class='cell-input dropdown-select' data-mapping-id='{$mapping['id']}' data-field-id='{$mapping['field_id']}' $requiredAttr>";
echo "<select name='rows[$index][details][{$mapping['id']}][field_value]' class='cell-input dropdown-select $inputClass' data-mapping-id='{$mapping['id']}' data-field-id='{$mapping['field_id']}' " . ($mapping['is_required'] ? 'required' : '') . ">";
echo "<option value=''>Seleziona...</option>";
// Placeholder, i valori saranno popolati via AJAX
echo "</select>";
} elseif ($mapping['data_type'] === 'DATE') {
echo "<input type='date' name='rows[$index][details][{$mapping['id']}][field_value]' value='" . htmlspecialchars($fieldValue) . "' class='cell-input' $requiredAttr>";
echo "<input type='date' name='rows[$index][details][{$mapping['id']}][field_value]' value='" . htmlspecialchars($fieldValue) . "' class='cell-input $inputClass' " . ($mapping['is_required'] ? 'required' : '') . ">";
} elseif ($mapping['data_type'] === 'INT') {
echo "<input type='number' name='rows[$index][details][{$mapping['id']}][field_value]' value='" . htmlspecialchars($fieldValue) . "' class='cell-input' $requiredAttr>";
echo "<input type='number' name='rows[$index][details][{$mapping['id']}][field_value]' value='" . htmlspecialchars($fieldValue) . "' class='cell-input $inputClass' " . ($mapping['is_required'] ? 'required' : '') . ">";
} else {
echo "<input type='text' name='rows[$index][details][{$mapping['id']}][field_value]' value='" . htmlspecialchars($fieldValue) . "' class='cell-input' $requiredAttr>";
echo "<input type='text' name='rows[$index][details][{$mapping['id']}][field_value]' value='" . htmlspecialchars($fieldValue) . "' class='cell-input $inputClass' " . ($mapping['is_required'] ? 'required' : '') . ">";
}
echo "</div>";
$cellIndex++;
@@ -544,19 +586,19 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
$fieldValue = date('Y-m-d');
}
$requiredClass = ($mapping['is_required'] && (is_null($fieldValue) || $fieldValue === '')) ? 'missing-required' : '';
$requiredAttr = $mapping['is_required'] ? 'required' : '';
$inputClass = 'manual-input';
if ($mapping['is_required']) $inputClass .= ' required-input';
echo "<div class='grid-cell editable-cell $requiredClass' data-col='manual_$manualIndex' data-row='$index' data-index='$cellIndex' style='flex: 0 0 150px;'>";
if ($mapping['data_type'] === 'SceltaMultipla') {
echo "<select name='rows[$index][details][{$mapping['id']}][field_value]' class='cell-input dropdown-select' data-mapping-id='{$mapping['id']}' data-field-id='{$mapping['field_id']}' $requiredAttr>";
echo "<select name='rows[$index][details][{$mapping['id']}][field_value]' class='cell-input dropdown-select $inputClass' data-mapping-id='{$mapping['id']}' data-field-id='{$mapping['field_id']}' " . ($mapping['is_required'] ? 'required' : '') . ">";
echo "<option value=''>Seleziona...</option>";
// Placeholder, i valori saranno popolati via AJAX
echo "</select>";
} elseif ($mapping['data_type'] === 'DATE') {
echo "<input type='date' name='rows[$index][details][{$mapping['id']}][field_value]' value='" . htmlspecialchars($fieldValue) . "' class='cell-input' $requiredAttr>";
echo "<input type='date' name='rows[$index][details][{$mapping['id']}][field_value]' value='" . htmlspecialchars($fieldValue) . "' class='cell-input $inputClass' " . ($mapping['is_required'] ? 'required' : '') . ">";
} elseif ($mapping['data_type'] === 'INT') {
echo "<input type='number' name='rows[$index][details][{$mapping['id']}][field_value]' value='" . htmlspecialchars($fieldValue) . "' class='cell-input' $requiredAttr>";
echo "<input type='number' name='rows[$index][details][{$mapping['id']}][field_value]' value='" . htmlspecialchars($fieldValue) . "' class='cell-input $inputClass' " . ($mapping['is_required'] ? 'required' : '') . ">";
} else {
echo "<input type='text' name='rows[$index][details][{$mapping['id']}][field_value]' value='" . htmlspecialchars($fieldValue) . "' class='cell-input' $requiredAttr>";
echo "<input type='text' name='rows[$index][details][{$mapping['id']}][field_value]' value='" . htmlspecialchars($fieldValue) . "' class='cell-input $inputClass' " . ($mapping['is_required'] ? 'required' : '') . ">";
}
echo "</div>";
$cellIndex++;
@@ -714,41 +756,52 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
});
});
</script>
<!-- script dropdonw senza overlay -->
<script>
document.addEventListener("DOMContentLoaded", function() {
// Oggetto per memorizzare i dati delle tendine recuperati
const dropdownData = {};
async function populateDropdowns() {
const dropdowns = document.querySelectorAll('.dropdown-select');
for (const dropdown of dropdowns) {
const fieldId = dropdown.getAttribute('data-field-id');
if (!fieldId) {
console.warn('Nessun field_id trovato per il dropdown:', dropdown);
continue;
}
try {
const response = await fetch(`get_customfield_values.php?field_id=${fieldId}`);
const data = await response.json();
if (data.error) {
console.error('Errore per field_id', fieldId, ':', data.error);
dropdown.innerHTML = '<option value="">Errore nel caricamento</option>';
continue;
if (dropdowns.length === 0) return;
// Recupera i dati solo per i field_id univoci
const uniqueFieldIds = [...new Set(Array.from(dropdowns).map(d => d.getAttribute('data-field-id')))].filter(fieldId => fieldId);
for (const fieldId of uniqueFieldIds) {
if (!dropdownData[fieldId]) {
try {
const response = await fetch(`get_customfield_values.php?field_id=${fieldId}`);
const data = await response.json();
if (data.error) {
console.error('Errore per field_id', fieldId, ':', data.error);
continue;
}
dropdownData[fieldId] = data.CustomFieldsValues || [];
} catch (error) {
console.error('Errore nel fetch per field_id', fieldId, ':', error);
}
// Pulisci opzioni esistenti
dropdown.innerHTML = '<option value="">Seleziona...</option>';
// Aggiungi opzioni dai dati ricevuti
if (data.CustomFieldsValues) {
data.CustomFieldsValues.forEach(value => {
const option = document.createElement('option');
option.value = value.IdCustomFieldsValue;
option.textContent = value.Valore;
if (dropdown.value === option.value) option.selected = true;
dropdown.appendChild(option);
});
}
} catch (error) {
console.error('Errore nel fetch per field_id', fieldId, ':', error);
dropdown.innerHTML = '<option value="">Errore nel caricamento</option>';
}
}
// Popola tutti i dropdown con i dati recuperati
dropdowns.forEach(dropdown => {
const fieldId = dropdown.getAttribute('data-field-id');
if (!fieldId || !dropdownData[fieldId]) {
dropdown.innerHTML = '<option value="">Errore nel caricamento</option>';
return;
}
// Pulisci opzioni esistenti
dropdown.innerHTML = '<option value="">Seleziona...</option>';
dropdownData[fieldId].forEach(value => {
const option = document.createElement('option');
option.value = value.IdCustomFieldsValue;
option.textContent = value.Valore;
if (dropdown.value === option.value) option.selected = true;
dropdown.appendChild(option);
});
});
}
// Esegui al caricamento della pagina
@@ -760,8 +813,167 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
setTimeout(populateDropdowns, 100); // Ritardo per garantire che il DOM sia aggiornato
});
});
// Gestione della propagazione per mantenere i valori sincronizzati
const propagateButtons = document.querySelectorAll('.propagate-btn');
propagateButtons.forEach(button => {
button.addEventListener('click', function() {
const columnIndex = this.getAttribute('data-column').replace('manual_', '');
const input = this.previousElementSibling;
const value = input.value;
const gridTopCells = document.querySelector('.grid-top').querySelectorAll('.grid-cell');
const targetTopIndex = Array.from(gridTopCells).findIndex(cell =>
cell.querySelector('.propagate-btn') === button
);
if (targetTopIndex !== -1) {
const rows = document.querySelectorAll('.grid-row');
rows.forEach(row => {
const cells = row.querySelectorAll('.grid-cell');
if (cells.length > targetTopIndex) {
const targetInput = cells[targetTopIndex].querySelector('select.dropdown-select');
if (targetInput) {
targetInput.value = value;
// Aggiorna visivamente il dropdown
const event = new Event('change');
targetInput.dispatchEvent(event);
}
}
});
}
});
});
});
</script>
<!-- dropdown with overlay -->
<!--
<script>
document.addEventListener("DOMContentLoaded", function() {
// Crea un overlay di caricamento
const loadingOverlay = document.createElement('div');
loadingOverlay.id = 'loading-overlay';
loadingOverlay.style.cssText = `
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
justify-content: center;
align-items: center;
`;
const loadingMessage = document.createElement('div');
loadingMessage.style.cssText = `
color: white;
font-size: 24px;
padding: 20px;
background: #333;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
`;
loadingMessage.textContent = 'Loading Dropdown Options...';
loadingOverlay.appendChild(loadingMessage);
document.body.appendChild(loadingOverlay);
// Funzione originale populateDropdowns
async function populateDropdowns() {
const dropdowns = document.querySelectorAll('.dropdown-select');
if (dropdowns.length === 0) return;
const dropdownData = {};
// Recupera i dati solo per i field_id univoci
const uniqueFieldIds = [...new Set(Array.from(dropdowns).map(d => d.getAttribute('data-field-id')))].filter(fieldId => fieldId);
for (const fieldId of uniqueFieldIds) {
if (!dropdownData[fieldId]) {
try {
const response = await fetch(`get_customfield_values.php?field_id=${fieldId}`);
const data = await response.json();
if (data.error) {
console.error('Errore per field_id', fieldId, ':', data.error);
continue;
}
dropdownData[fieldId] = data.CustomFieldsValues || [];
} catch (error) {
console.error('Errore nel fetch per field_id', fieldId, ':', error);
}
}
}
// Popola tutti i dropdown con i dati recuperati
dropdowns.forEach(dropdown => {
const fieldId = dropdown.getAttribute('data-field-id');
if (!fieldId || !dropdownData[fieldId]) {
dropdown.innerHTML = '<option value="">Errore nel caricamento</option>';
return;
}
dropdown.innerHTML = '<option value="">Seleziona...</option>';
dropdownData[fieldId].forEach(value => {
const option = document.createElement('option');
option.value = value.IdCustomFieldsValue;
option.textContent = value.Valore;
if (dropdown.value === option.value) option.selected = true;
dropdown.appendChild(option);
});
});
}
// Esegui al caricamento della pagina con l'overlay
async function loadDropdownsWithOverlay() {
console.log('Inizio caricamento tendine');
loadingOverlay.style.display = 'flex';
await new Promise(resolve => setTimeout(resolve, 500)); // Minimo 500ms di visibilità
await populateDropdowns();
console.log('Caricamento tendine completato');
loadingOverlay.style.display = 'none';
}
// Esegui il caricamento iniziale
loadDropdownsWithOverlay();
// Rielabora i dropdown quando si aggiunge una nuova riga
document.querySelectorAll('.save-btn').forEach(btn => {
btn.addEventListener('click', function() {
setTimeout(loadDropdownsWithOverlay, 100);
});
});
// Gestione della propagazione
const propagateButtons = document.querySelectorAll('.propagate-btn');
propagateButtons.forEach(button => {
button.addEventListener('click', function() {
const columnIndex = this.getAttribute('data-column').replace('manual_', '');
const input = this.previousElementSibling;
const value = input.value;
const gridTopCells = document.querySelector('.grid-top').querySelectorAll('.grid-cell');
const targetTopIndex = Array.from(gridTopCells).findIndex(cell =>
cell.querySelector('.propagate-btn') === button
);
if (targetTopIndex !== -1) {
const rows = document.querySelectorAll('.grid-row');
rows.forEach(row => {
const cells = row.querySelectorAll('.grid-cell');
if (cells.length > targetTopIndex) {
const targetInput = cells[targetTopIndex].querySelector('select.dropdown-select');
if (targetInput) {
targetInput.value = value;
const event = new Event('change');
targetInput.dispatchEvent(event);
}
}
});
}
});
});
});
</script>
-->
</body>
</html>