Update index.html
This commit is contained in:
+89
-7
@@ -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';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user