Update index.html

This commit is contained in:
oliver
2026-09-03 10:24:27 -03:00
parent 5325256f6f
commit 9814ed4d84
+89 -7
View File
@@ -346,6 +346,37 @@
color: var(--danger);
}
.cell-remark.remark-nok {
color: var(--danger);
font-weight: 600;
}
.cell-remark.remark-danger {
color: var(--danger);
}
.cell-remark.remark-success {
color: var(--success);
}
.recheck-checkbox {
width: 1.25rem;
height: 1.25rem;
cursor: pointer;
accent-color: var(--primary);
border: 2px solid var(--border);
border-radius: 4px;
}
.recheck-checkbox:checked {
background-color: var(--primary);
border-color: var(--primary);
}
.recheck-checkbox:hover {
border-color: var(--primary);
}
/* Filter Dropdown */
.filter-dropdown {
position: absolute;
@@ -608,11 +639,21 @@
<i class="fas fa-arrow-down"></i>
</div>
</th>
<th>
Recheck
<div class="filter-indicator" onclick="toggleFilter('recheck')">
<i class="fas fa-filter"></i>
</div>
<div class="sort-indicator" onclick="sortTable('recheck')">
<i class="fas fa-arrow-up"></i>
<i class="fas fa-arrow-down"></i>
</div>
</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td colspan="6" class="loading">
<td colspan="7" class="loading">
<div class="spinner"></div>
<span>Loading data...</span>
</td>
@@ -795,7 +836,7 @@
if (data.length === 0) {
tableBody.innerHTML = `
<tr>
<td colspan="6" class="empty-state">
<td colspan="7" class="empty-state">
<i class="fas fa-search"></i>
<p>No orders found matching your filters</p>
</td>
@@ -823,9 +864,15 @@
<td>
<div class="cell-remark ${getRemarkClass(item.Remark)}">
<i class="fas ${getRemarkIcon(item.Remark)}"></i>
${item.Remark}
${item.Remark || 'N/A'}
</div>
</td>
<td>
<input type="checkbox"
class="recheck-checkbox"
${item.recheck ? 'checked' : ''}
onchange="handleRecheck('${item.Order_ID}', this.checked)">
</td>
</tr>
`).join('');
}
@@ -840,21 +887,56 @@
}
function getRemarkClass(remark) {
if (remark === null || remark === undefined) return 'danger';
if (remark === null || remark === undefined) return '';
const str = String(remark);
if (str.includes('found')) return 'danger';
if (str.includes('valid') || str.includes('OK')) return 'success';
if (str.includes('NOK')) return 'remark-nok';
if (str.includes('found')) return 'remark-danger';
if (str.includes('valid') || str.includes('OK')) return 'remark-success';
return '';
}
function getRemarkIcon(remark) {
if (remark === null || remark === undefined) return 'fa-exclamation-triangle';
if (remark === null || remark === undefined) return 'fa-file-alt';
const str = String(remark);
if (str.includes('NOK')) return 'fa-times-circle';
if (str.includes('found')) return 'fa-exclamation-triangle';
if (str.includes('valid') || str.includes('OK')) return 'fa-check-circle';
return 'fa-file-alt';
}
async function handleRecheck(orderId, isChecked) {
console.group('%c Recheck', 'background: #6366f1; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;');
console.log('%c Order ID:', 'font-weight: bold;', orderId);
console.log('%c Status:', isChecked ? 'color: #10b981' : 'color: #94a3b8', isChecked ? 'Checked' : 'Unchecked');
try {
const response = await fetch('https://n8n.finorbrands.com/webhook/61f89d5c-8474-4045-b52c-50ee608435c0', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...(apiCredentials ? {
'Authorization': `Basic ${btoa(`${apiCredentials.username}:${apiCredentials.password}`)}`
} : {})
},
body: JSON.stringify({
Order_ID: orderId,
recheck: isChecked
})
});
if (response.ok) {
console.log('%c Success:', 'color: #10b981; font-weight: bold;', 'Recheck status updated');
} else {
console.error('%c Error:', 'background: #ef4444; color: white; padding: 4px 8px; border-radius: 4px;', response.status, response.statusText);
}
console.groupEnd();
} catch (error) {
console.error('%c Request Error:', 'background: #ef4444; color: white; padding: 4px 8px; border-radius: 4px;', error.message);
console.groupEnd();
}
}
function sortTable(column) {
const direction = currentSort.column === column && currentSort.direction === 'asc' ? 'desc' : 'asc';