820 lines
36 KiB
JavaScript
820 lines
36 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const config = window.tvChannelApp || {};
|
|
const state = {
|
|
filters: { limit: 50, page: 1 },
|
|
sort: { field: 'upper_ch_ref', direction: 'ASC' },
|
|
selectedIds: new Set(),
|
|
currentRows: [],
|
|
currentDetail: null,
|
|
options: {},
|
|
lastListPayload: null,
|
|
auditFilters: { page: 1, limit: 20 },
|
|
analyticsLoaded: false,
|
|
auditLoaded: false,
|
|
historyLoaded: false,
|
|
currentHistoryId: null,
|
|
};
|
|
|
|
const elements = {
|
|
filtersForm: document.getElementById('filtersForm'),
|
|
resetFiltersBtn: document.getElementById('resetFiltersBtn'),
|
|
channelsTableBody: document.getElementById('channelsTableBody'),
|
|
resultCounter: document.getElementById('resultCounter'),
|
|
pageMeta: document.getElementById('pageMeta'),
|
|
prevPageBtn: document.getElementById('prevPageBtn'),
|
|
nextPageBtn: document.getElementById('nextPageBtn'),
|
|
selectPageBtn: document.getElementById('selectPageBtn'),
|
|
selectAllPageCheckbox: document.getElementById('selectAllPageCheckbox'),
|
|
bulkEditBtn: document.getElementById('bulkEditBtn'),
|
|
selectionBar: document.getElementById('selectionBar'),
|
|
selectionCount: document.getElementById('selectionCount'),
|
|
selectionBulkBtn: document.getElementById('selectionBulkBtn'),
|
|
clearSelectionBtn: document.getElementById('clearSelectionBtn'),
|
|
activeFilterChips: document.getElementById('activeFilterChips'),
|
|
detailPanel: document.getElementById('detailPanel'),
|
|
detailForm: document.getElementById('detailForm'),
|
|
detailLoadingState: document.getElementById('detailLoadingState'),
|
|
detailChannelId: document.getElementById('detailChannelId'),
|
|
detailEditableSection: document.getElementById('detailEditableSection'),
|
|
editableFieldsContainer: document.getElementById('editableFieldsContainer'),
|
|
lockedFieldsContainer: document.getElementById('lockedFieldsContainer'),
|
|
bulkEditForm: document.getElementById('bulkEditForm'),
|
|
bulkEditFieldsContainer: document.getElementById('bulkEditFieldsContainer'),
|
|
bulkSelectionSummary: document.getElementById('bulkSelectionSummary'),
|
|
analyticsOverview: document.getElementById('analyticsOverview'),
|
|
analyticsBreakdowns: document.getElementById('analyticsBreakdowns'),
|
|
historyLead: document.getElementById('historyLead'),
|
|
historySummary: document.getElementById('historySummary'),
|
|
historyTimeline: document.getElementById('historyTimeline'),
|
|
refreshHistoryBtn: document.getElementById('refreshHistoryBtn'),
|
|
auditUserFilter: document.getElementById('auditUserFilter'),
|
|
auditFieldFilter: document.getElementById('auditFieldFilter'),
|
|
auditDateFrom: document.getElementById('auditDateFrom'),
|
|
auditDateTo: document.getElementById('auditDateTo'),
|
|
applyAuditFiltersBtn: document.getElementById('applyAuditFiltersBtn'),
|
|
auditTableBody: document.getElementById('auditTableBody'),
|
|
heroTotalChannels: document.getElementById('heroTotalChannels'),
|
|
heroActiveChannels: document.getElementById('heroActiveChannels'),
|
|
heroManualChannels: document.getElementById('heroManualChannels'),
|
|
heroTotalHits: document.getElementById('heroTotalHits'),
|
|
toastContainer: document.getElementById('toastContainer'),
|
|
};
|
|
|
|
const detailOffcanvas = elements.detailPanel ? bootstrap.Offcanvas.getOrCreateInstance(elements.detailPanel) : null;
|
|
const bulkModal = document.getElementById('bulkEditModal') ? bootstrap.Modal.getOrCreateInstance(document.getElementById('bulkEditModal')) : null;
|
|
|
|
const labels = {
|
|
upper_ch_ref: 'Upper channel ref',
|
|
country_iso: 'Country ISO',
|
|
sat_ref: 'Satellite ref',
|
|
genre: 'Genre',
|
|
type: 'Type',
|
|
groupe: 'Group',
|
|
region: 'Region',
|
|
langue: 'Language',
|
|
resolution: 'Resolution',
|
|
active: 'Active',
|
|
sat_in: 'Sat in',
|
|
sat_out: 'Sat out',
|
|
sat_update: 'Sat update',
|
|
country_client: 'Country client',
|
|
sat_tpinfo: 'Transponder',
|
|
idtype: 'Id type',
|
|
six_id: 'six_id',
|
|
sid: 'sid',
|
|
onid: 'onid',
|
|
tid: 'tid',
|
|
sat_ch_client_upper: 'Client channel',
|
|
sat_client: 'Client bouquet',
|
|
counting: 'Counting',
|
|
lastview: 'Last view',
|
|
manually_edited: 'Manual edit',
|
|
manually_edited_at: 'Manual edit date'
|
|
};
|
|
|
|
const editableFields = config.detailFields?.editable || [];
|
|
const lockedFields = config.detailFields?.locked || [];
|
|
const selectOptionsFields = ['sat_ref', 'country_iso', 'genre', 'resolution', 'langue', 'region', 'groupe'];
|
|
|
|
const formatValue = (value) => {
|
|
if (value === null || value === undefined || value === '') return '—';
|
|
return String(value);
|
|
};
|
|
|
|
const escapeHtml = (value) => String(value ?? '')
|
|
.replaceAll('&', '&')
|
|
.replaceAll('<', '<')
|
|
.replaceAll('>', '>')
|
|
.replaceAll('"', '"')
|
|
.replaceAll("'", ''');
|
|
|
|
const notify = (message, tone = 'dark') => {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'toast align-items-center text-bg-light border-0';
|
|
wrapper.setAttribute('role', 'alert');
|
|
wrapper.setAttribute('aria-live', 'assertive');
|
|
wrapper.setAttribute('aria-atomic', 'true');
|
|
wrapper.innerHTML = `
|
|
<div class="d-flex">
|
|
<div class="toast-body"><strong class="text-${tone}">${escapeHtml(message)}</strong></div>
|
|
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>`;
|
|
elements.toastContainer.appendChild(wrapper);
|
|
const toast = bootstrap.Toast.getOrCreateInstance(wrapper, { delay: 2600 });
|
|
wrapper.addEventListener('hidden.bs.toast', () => wrapper.remove());
|
|
toast.show();
|
|
};
|
|
|
|
const buildQueryString = (params) => {
|
|
const query = new URLSearchParams();
|
|
Object.entries(params).forEach(([key, value]) => {
|
|
if (value === undefined || value === null || value === '') return;
|
|
query.set(key, value);
|
|
});
|
|
return query.toString();
|
|
};
|
|
|
|
const syncFilterForm = () => {
|
|
Object.entries(state.filters).forEach(([key, value]) => {
|
|
const input = elements.filtersForm?.elements.namedItem(key);
|
|
if (input) input.value = value;
|
|
});
|
|
};
|
|
|
|
const renderFilterOptions = (options) => {
|
|
state.options = options || {};
|
|
const mappings = {
|
|
sat_ref: document.getElementById('satRefFilter'),
|
|
country_iso: document.getElementById('countryFilter'),
|
|
genre: document.getElementById('genreFilter'),
|
|
resolution: document.getElementById('resolutionFilter'),
|
|
};
|
|
|
|
Object.entries(mappings).forEach(([field, select]) => {
|
|
if (!select) return;
|
|
const currentValue = state.filters[field] || '';
|
|
const list = state.options[field] || [];
|
|
select.innerHTML = `<option value="">${escapeHtml(select.options[0]?.textContent || 'All')}</option>` +
|
|
list.map(item => `<option value="${escapeHtml(item)}">${escapeHtml(item)}</option>`).join('');
|
|
select.value = currentValue;
|
|
});
|
|
};
|
|
|
|
const renderFilterChips = () => {
|
|
const ignored = new Set(['page', 'limit']);
|
|
const chips = Object.entries(state.filters)
|
|
.filter(([key, value]) => !ignored.has(key) && value !== undefined && value !== null && value !== '')
|
|
.map(([key, value]) => `<span class="filter-chip">${escapeHtml(key)}: ${escapeHtml(value)}</span>`);
|
|
elements.activeFilterChips.innerHTML = chips.join('');
|
|
};
|
|
|
|
const updateSelectionUI = () => {
|
|
const count = state.selectedIds.size;
|
|
elements.selectionCount.textContent = String(count);
|
|
elements.selectionBar.classList.toggle('d-none', count === 0);
|
|
elements.bulkEditBtn.disabled = count === 0;
|
|
elements.selectionBulkBtn.disabled = count === 0;
|
|
elements.bulkEditBtn.textContent = `Bulk edit (${count})`;
|
|
elements.bulkSelectionSummary.textContent = String(count);
|
|
|
|
const currentPageIds = state.currentRows.map(row => String(row.id));
|
|
const allSelected = currentPageIds.length > 0 && currentPageIds.every(id => state.selectedIds.has(id));
|
|
elements.selectAllPageCheckbox.checked = allSelected;
|
|
};
|
|
|
|
const rowClasses = (row) => {
|
|
const classes = ['channel-row'];
|
|
if (Number(row.manually_edited) === 1) classes.push('row-manual');
|
|
if (state.selectedIds.has(String(row.id))) classes.push('row-selected');
|
|
return classes.join(' ');
|
|
};
|
|
|
|
const renderChannels = (payload) => {
|
|
const { data, pagination } = payload;
|
|
state.lastListPayload = payload;
|
|
state.currentRows = data;
|
|
renderFilterOptions(payload.options || {});
|
|
renderFilterChips();
|
|
|
|
if (!data.length) {
|
|
elements.channelsTableBody.innerHTML = '<tr><td colspan="26" class="empty-state-cell">No channels match the current filters.</td></tr>';
|
|
} else {
|
|
elements.channelsTableBody.innerHTML = data.map(row => `
|
|
<tr class="${rowClasses(row)}" data-row-id="${row.id}">
|
|
<td class="sticky-col checkbox-col"><input class="form-check-input row-checkbox" type="checkbox" data-row-id="${row.id}" ${state.selectedIds.has(String(row.id)) ? 'checked' : ''} aria-label="Select row ${escapeHtml(row.upper_ch_ref)}"></td>
|
|
<td><strong>${escapeHtml(formatValue(row.upper_ch_ref))}</strong></td>
|
|
<td>${escapeHtml(formatValue(row.country_iso))}</td>
|
|
<td>${escapeHtml(formatValue(row.country_client))}</td>
|
|
<td>${escapeHtml(formatValue(row.sat_ref))}</td>
|
|
<td>${escapeHtml(formatValue(row.sat_tpinfo))}</td>
|
|
<td>${escapeHtml(formatValue(row.genre))}</td>
|
|
<td><span class="channel-pill">${escapeHtml(formatValue(row.type))}</span></td>
|
|
<td>${escapeHtml(formatValue(row.resolution))}</td>
|
|
<td>${escapeHtml(formatValue(row.langue))}</td>
|
|
<td>${escapeHtml(formatValue(row.region))}</td>
|
|
<td>${escapeHtml(formatValue(row.groupe))}</td>
|
|
<td>${escapeHtml(formatValue(row.active))}</td>
|
|
<td>${escapeHtml(formatValue(row.idtype))}</td>
|
|
<td class="sys-col">${escapeHtml(formatValue(row.six_id))}</td>
|
|
<td class="sys-col">${escapeHtml(formatValue(row.sid))}</td>
|
|
<td class="sys-col">${escapeHtml(formatValue(row.onid))}</td>
|
|
<td class="sys-col">${escapeHtml(formatValue(row.tid))}</td>
|
|
<td>${escapeHtml(formatValue(row.sat_in))}</td>
|
|
<td>${escapeHtml(formatValue(row.sat_out))}</td>
|
|
<td>${escapeHtml(formatValue(row.sat_update))}</td>
|
|
<td class="sys-col">${escapeHtml(formatValue(row.sat_ch_client_upper))}</td>
|
|
<td class="sys-col">${escapeHtml(formatValue(row.sat_client))}</td>
|
|
<td class="sys-col">${escapeHtml(formatValue(row.counting))}</td>
|
|
<td class="sys-col">${escapeHtml(formatValue(row.lastview))}</td>
|
|
<td>${escapeHtml(formatValue(row.manually_edited_at))}</td>
|
|
</tr>`).join('');
|
|
}
|
|
|
|
const start = pagination.total === 0 ? 0 : ((pagination.page - 1) * pagination.limit) + 1;
|
|
const end = Math.min(pagination.total, pagination.page * pagination.limit);
|
|
elements.resultCounter.textContent = `${pagination.total} result(s) · showing ${start}-${end}`;
|
|
elements.pageMeta.textContent = `Page ${pagination.page} of ${pagination.pages}`;
|
|
elements.prevPageBtn.disabled = pagination.page <= 1;
|
|
elements.nextPageBtn.disabled = pagination.page >= pagination.pages;
|
|
updateSelectionUI();
|
|
};
|
|
|
|
const fetchChannels = async () => {
|
|
elements.resultCounter.textContent = 'Loading channels…';
|
|
const query = buildQueryString({ ...state.filters, sort: state.sort.field, direction: state.sort.direction });
|
|
const response = await fetch(`${config.apiBase}?${query}`, { headers: { 'Accept': 'application/json' } });
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Unable to fetch channels.');
|
|
renderChannels(result.data);
|
|
};
|
|
|
|
const renderDetailForm = (channel) => {
|
|
state.currentDetail = channel;
|
|
elements.detailChannelId.value = channel.id;
|
|
elements.detailLoadingState.classList.add('d-none');
|
|
elements.detailEditableSection.classList.remove('d-none');
|
|
|
|
const buildInput = (field, value) => {
|
|
const label = labels[field] || field;
|
|
if (field === 'active') {
|
|
return `
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="field_${field}">${escapeHtml(label)}</label>
|
|
<select class="form-select" id="field_${field}" name="${field}">
|
|
<option value="1" ${String(value) === '1' ? 'selected' : ''}>1</option>
|
|
<option value="0" ${String(value) === '0' ? 'selected' : ''}>0</option>
|
|
</select>
|
|
</div>`;
|
|
}
|
|
if (field === 'type') {
|
|
return `
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="field_${field}">${escapeHtml(label)}</label>
|
|
<select class="form-select" id="field_${field}" name="${field}">
|
|
<option value="free" ${String(value) === 'free' ? 'selected' : ''}>free</option>
|
|
<option value="payed" ${String(value) === 'payed' ? 'selected' : ''}>payed</option>
|
|
</select>
|
|
</div>`;
|
|
}
|
|
if (selectOptionsFields.includes(field)) {
|
|
const opts = state.options[field] || [];
|
|
return `
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="field_${field}">${escapeHtml(label)}</label>
|
|
<select class="form-select" id="field_${field}" name="${field}">
|
|
<option value="">Select</option>
|
|
${opts.map(item => `<option value="${escapeHtml(item)}" ${String(value || '') === String(item) ? 'selected' : ''}>${escapeHtml(item)}</option>`).join('')}
|
|
</select>
|
|
</div>`;
|
|
}
|
|
if (['sat_in', 'sat_out', 'sat_update'].includes(field)) {
|
|
return `
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="field_${field}">${escapeHtml(label)}</label>
|
|
<input class="form-control" id="field_${field}" name="${field}" type="date" value="${escapeHtml(value || '')}">
|
|
</div>`;
|
|
}
|
|
return `
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="field_${field}">${escapeHtml(label)}</label>
|
|
<input class="form-control" id="field_${field}" name="${field}" type="text" value="${escapeHtml(value || '')}">
|
|
</div>`;
|
|
};
|
|
|
|
elements.editableFieldsContainer.innerHTML = editableFields.map(field => buildInput(field, channel[field])).join('');
|
|
elements.lockedFieldsContainer.innerHTML = lockedFields.map(field => `
|
|
<div class="col-sm-6">
|
|
<div class="locked-card sys-field">
|
|
<div class="d-flex justify-content-between gap-2">
|
|
<div class="locked-label">${escapeHtml(labels[field] || field)}</div>
|
|
<span class="lock-icon">🔒</span>
|
|
</div>
|
|
<div class="locked-value">${escapeHtml(formatValue(channel[field]))}</div>
|
|
</div>
|
|
</div>`).join('');
|
|
};
|
|
|
|
const fetchDetail = async (id) => {
|
|
elements.detailLoadingState.textContent = 'Loading channel detail…';
|
|
elements.detailLoadingState.classList.remove('d-none');
|
|
elements.detailEditableSection.classList.add('d-none');
|
|
detailOffcanvas.show();
|
|
const response = await fetch(`${config.apiBase}?id=${encodeURIComponent(id)}`);
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Unable to load detail.');
|
|
state.options = { ...state.options, ...(result.meta?.options || {}) };
|
|
renderDetailForm(result.data);
|
|
state.currentHistoryId = Number(result.data.id);
|
|
state.historyLoaded = false;
|
|
try {
|
|
await fetchHistory(result.data.id, { silent: true });
|
|
} catch (error) {
|
|
renderHistoryEmpty(error.message);
|
|
}
|
|
};
|
|
|
|
const payloadFromForm = (form, fields) => {
|
|
const payload = {};
|
|
fields.forEach(field => {
|
|
const input = form.elements.namedItem(field);
|
|
if (!input) return;
|
|
payload[field] = input.value;
|
|
});
|
|
return payload;
|
|
};
|
|
|
|
const renderBulkForm = () => {
|
|
elements.bulkEditFieldsContainer.innerHTML = editableFields.map(field => {
|
|
const label = labels[field] || field;
|
|
let control = '';
|
|
if (field === 'active') {
|
|
control = `
|
|
<select class="form-select bulk-control" name="${field}" disabled>
|
|
<option value="1">1</option>
|
|
<option value="0">0</option>
|
|
</select>`;
|
|
} else if (field === 'type') {
|
|
control = `
|
|
<select class="form-select bulk-control" name="${field}" disabled>
|
|
<option value="free">free</option>
|
|
<option value="payed">payed</option>
|
|
</select>`;
|
|
} else if (selectOptionsFields.includes(field)) {
|
|
const opts = state.options[field] || [];
|
|
control = `
|
|
<select class="form-select bulk-control" name="${field}" disabled>
|
|
<option value="">Select</option>
|
|
${opts.map(item => `<option value="${escapeHtml(item)}">${escapeHtml(item)}</option>`).join('')}
|
|
</select>`;
|
|
} else if (['sat_in', 'sat_out', 'sat_update'].includes(field)) {
|
|
control = `<input class="form-control bulk-control" name="${field}" type="date" disabled>`;
|
|
} else {
|
|
control = `<input class="form-control bulk-control" name="${field}" type="text" disabled>`;
|
|
}
|
|
return `
|
|
<div class="col-md-6">
|
|
<div class="bulk-field-card" data-field-card="${field}">
|
|
<div class="form-check">
|
|
<input class="form-check-input bulk-enable" type="checkbox" value="${field}" id="bulk_enable_${field}">
|
|
<label class="form-check-label fw-semibold" for="bulk_enable_${field}">${escapeHtml(label)}</label>
|
|
</div>
|
|
${control}
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
};
|
|
|
|
const fetchAnalytics = async () => {
|
|
const response = await fetch(`${config.apiBase}?stats=1`);
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Unable to load analytics.');
|
|
const stats = result.data;
|
|
const overview = [
|
|
['Total channels', stats.overview.total_channels],
|
|
['Active', stats.overview.active_channels],
|
|
['Manually edited', stats.overview.manually_edited_channels],
|
|
['Total hits', Number(stats.overview.total_hits).toLocaleString()],
|
|
];
|
|
elements.analyticsOverview.innerHTML = overview.map(([label, value]) => `
|
|
<div class="col-sm-6 col-xl-3"><div class="analytics-card"><div class="metric-label">${escapeHtml(label)}</div><div class="metric-value">${escapeHtml(value)}</div></div></div>`).join('');
|
|
|
|
elements.heroTotalChannels.textContent = stats.overview.total_channels;
|
|
elements.heroActiveChannels.textContent = stats.overview.active_channels;
|
|
elements.heroManualChannels.textContent = stats.overview.manually_edited_channels;
|
|
elements.heroTotalHits.textContent = Number(stats.overview.total_hits).toLocaleString();
|
|
|
|
elements.analyticsBreakdowns.innerHTML = Object.entries(stats.breakdowns).map(([dimension, rows]) => {
|
|
const max = Math.max(...rows.map(item => Number(item.total)), 1);
|
|
const bars = rows.map(item => `
|
|
<div class="analytics-bar-row">
|
|
<div class="analytics-bar-top"><span>${escapeHtml(item.label)}</span><strong>${escapeHtml(item.total)}</strong></div>
|
|
<div class="analytics-bar-track"><div class="analytics-bar-fill" style="width:${(Number(item.total) / max) * 100}%"></div></div>
|
|
</div>`).join('');
|
|
return `
|
|
<div class="col-lg-6">
|
|
<div class="analytics-card h-100">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h3 class="section-title mb-0 text-capitalize">${escapeHtml(dimension.replaceAll('_', ' '))}</h3>
|
|
<span class="small text-muted">Top distribution</span>
|
|
</div>
|
|
<div class="analytics-bars">${bars}</div>
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
};
|
|
|
|
const renderHistoryEmpty = (message) => {
|
|
elements.historyLead.textContent = message;
|
|
elements.historySummary.innerHTML = '<div class="col-12"><div class="analytics-card"><div class="small text-muted">No channel selected yet.</div></div></div>';
|
|
elements.historyTimeline.innerHTML = `<div class="analytics-card"><div class="small text-muted">${escapeHtml(message)}</div></div>`;
|
|
};
|
|
|
|
const renderHistory = (payload) => {
|
|
const versions = payload.versions || [];
|
|
if (!versions.length) {
|
|
renderHistoryEmpty('No history entries were found for this channel.');
|
|
return;
|
|
}
|
|
|
|
const currentVersion = versions.find(version => Number(version.is_current) === 1 || version.is_current === true) || versions[versions.length - 1];
|
|
const firstVersion = versions[0];
|
|
elements.historyLead.textContent = `Showing ${versions.length} version(s) for ${currentVersion.upper_ch_ref || 'selected channel'} (current row #${currentVersion.id}).`;
|
|
|
|
const summaryCards = [
|
|
['Selected row', `#${payload.selected_id}`],
|
|
['First version', firstVersion.date_in || `#${firstVersion.id}`],
|
|
['Latest version', `#${payload.latest_id}`],
|
|
['Total versions', String(payload.total_versions || versions.length)],
|
|
];
|
|
|
|
elements.historySummary.innerHTML = summaryCards.map(([label, value]) => `
|
|
<div class="col-sm-6 col-xl-3">
|
|
<div class="analytics-card h-100">
|
|
<div class="metric-label">${escapeHtml(label)}</div>
|
|
<div class="metric-value history-metric-value">${escapeHtml(value)}</div>
|
|
</div>
|
|
</div>`).join('');
|
|
|
|
elements.historyTimeline.innerHTML = versions.map(version => {
|
|
const statusClass = version.is_current ? 'history-status-current' : 'history-status-closed';
|
|
const statusLabel = version.is_current ? 'Current' : 'Closed';
|
|
const changeList = (version.changes || []).length
|
|
? version.changes.map(change => `
|
|
<div class="history-change">
|
|
<span class="history-change-field">${escapeHtml(labels[change.field_name] || change.field_name)}</span>
|
|
<span class="audit-old">${escapeHtml(formatValue(change.old_value))}</span>
|
|
<span aria-hidden="true">→</span>
|
|
<span class="audit-new">${escapeHtml(formatValue(change.new_value))}</span>
|
|
<span class="history-change-meta">${escapeHtml(formatValue(change.user_id))} · ${escapeHtml(formatValue(change.changed_at))}</span>
|
|
</div>`).join('')
|
|
: '<div class="small text-muted">Initial imported/current row snapshot with no manual field changes recorded for this version.</div>';
|
|
|
|
return `
|
|
<article class="history-card ${version.is_current ? 'is-current' : ''}">
|
|
<div class="history-card-top">
|
|
<div>
|
|
<div class="d-flex flex-wrap gap-2 align-items-center mb-2">
|
|
<span class="history-version-pill">Version ${escapeHtml(version.version_number)}</span>
|
|
<span class="history-status-pill ${statusClass}">${statusLabel}</span>
|
|
<span class="small text-muted">Row #${escapeHtml(version.id)}</span>
|
|
</div>
|
|
<h3 class="history-card-title">${escapeHtml(formatValue(version.upper_ch_ref))}</h3>
|
|
<div class="small text-muted">${escapeHtml(formatValue(version.sat_ref))} · ${escapeHtml(formatValue(version.country_iso))} · ${escapeHtml(formatValue(version.genre))}</div>
|
|
</div>
|
|
<div class="history-date-block">
|
|
<div><strong>Date in:</strong> ${escapeHtml(formatValue(version.date_in))}</div>
|
|
<div><strong>Date out:</strong> ${escapeHtml(formatValue(version.date_out))}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="history-meta-grid">
|
|
<div><span class="history-meta-label">Type</span><strong>${escapeHtml(formatValue(version.type))}</strong></div>
|
|
<div><span class="history-meta-label">Resolution</span><strong>${escapeHtml(formatValue(version.resolution))}</strong></div>
|
|
<div><span class="history-meta-label">Active</span><strong>${escapeHtml(formatValue(version.active))}</strong></div>
|
|
<div><span class="history-meta-label">sat_out</span><strong>${escapeHtml(formatValue(version.sat_out))}</strong></div>
|
|
</div>
|
|
|
|
<div class="history-changes-block">
|
|
<div class="section-subtitle mb-2">Field changes for this version</div>
|
|
<div class="history-changes-list">${changeList}</div>
|
|
</div>
|
|
</article>`;
|
|
}).join('');
|
|
};
|
|
|
|
const fetchHistory = async (id, options = {}) => {
|
|
const { silent = false } = options;
|
|
if (!id) {
|
|
state.historyLoaded = false;
|
|
state.currentHistoryId = null;
|
|
renderHistoryEmpty('Click a row in Dataset to load its previous and current versions.');
|
|
return;
|
|
}
|
|
|
|
if (!silent) {
|
|
elements.historyLead.textContent = `Loading history for row #${id}…`;
|
|
elements.historyTimeline.innerHTML = '<div class="analytics-card"><div class="small text-muted">Loading history…</div></div>';
|
|
}
|
|
|
|
const response = await fetch(`${config.apiBase}?history_for=${encodeURIComponent(id)}`);
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Unable to load history.');
|
|
|
|
state.currentHistoryId = Number(id);
|
|
state.historyLoaded = true;
|
|
renderHistory(result.data);
|
|
};
|
|
|
|
const fetchAuditLog = async () => {
|
|
elements.auditTableBody.innerHTML = '<tr><td colspan="5" class="empty-state-cell">Loading audit log…</td></tr>';
|
|
const params = {
|
|
page: state.auditFilters.page,
|
|
limit: state.auditFilters.limit,
|
|
user_id: elements.auditUserFilter.value,
|
|
field_name: elements.auditFieldFilter.value,
|
|
date_from: elements.auditDateFrom.value,
|
|
date_to: elements.auditDateTo.value,
|
|
};
|
|
const response = await fetch(`${config.auditApi}?${buildQueryString(params)}`);
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Unable to load audit log.');
|
|
const { data, filters } = result.data;
|
|
|
|
const fillSelect = (select, items, currentValue) => {
|
|
if (!select.dataset.loaded) {
|
|
const first = select.options[0]?.outerHTML || '<option value="">All</option>';
|
|
select.innerHTML = first + items.map(item => `<option value="${escapeHtml(item)}">${escapeHtml(item)}</option>`).join('');
|
|
select.dataset.loaded = 'true';
|
|
}
|
|
select.value = currentValue || '';
|
|
};
|
|
|
|
fillSelect(elements.auditUserFilter, filters.users || [], params.user_id);
|
|
fillSelect(elements.auditFieldFilter, filters.fields || [], params.field_name);
|
|
|
|
if (!data.length) {
|
|
elements.auditTableBody.innerHTML = '<tr><td colspan="5" class="empty-state-cell">No audit entries for the current filters.</td></tr>';
|
|
return;
|
|
}
|
|
|
|
elements.auditTableBody.innerHTML = data.map(item => `
|
|
<tr>
|
|
<td>${escapeHtml(formatValue(item.changed_at))}</td>
|
|
<td>${escapeHtml(formatValue(item.user_id))}</td>
|
|
<td>
|
|
<div class="fw-semibold">${escapeHtml(formatValue(item.upper_ch_ref))}</div>
|
|
<div class="small text-muted">#${escapeHtml(item.channel_id)} · ${escapeHtml(formatValue(item.sat_ref))}</div>
|
|
</td>
|
|
<td>${escapeHtml(formatValue(item.field_name))}</td>
|
|
<td>
|
|
<div class="audit-change">
|
|
<span class="audit-old">${escapeHtml(formatValue(item.old_value))}</span>
|
|
<span aria-hidden="true">→</span>
|
|
<span class="audit-new">${escapeHtml(formatValue(item.new_value))}</span>
|
|
</div>
|
|
</td>
|
|
</tr>`).join('');
|
|
};
|
|
|
|
const refreshAll = async () => {
|
|
try {
|
|
await fetchChannels();
|
|
if (!state.analyticsLoaded) {
|
|
await fetchAnalytics();
|
|
state.analyticsLoaded = true;
|
|
}
|
|
} catch (error) {
|
|
elements.channelsTableBody.innerHTML = `<tr><td colspan="26" class="empty-state-cell">${escapeHtml(error.message)}</td></tr>`;
|
|
notify(error.message, 'danger');
|
|
}
|
|
};
|
|
|
|
elements.filtersForm?.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
const formData = new FormData(elements.filtersForm);
|
|
state.filters = { limit: 50, page: 1 };
|
|
for (const [key, value] of formData.entries()) {
|
|
if (String(value).trim() !== '') state.filters[key] = String(value).trim();
|
|
}
|
|
await refreshAll();
|
|
});
|
|
|
|
elements.resetFiltersBtn?.addEventListener('click', async () => {
|
|
state.filters = { limit: 50, page: 1 };
|
|
elements.filtersForm.reset();
|
|
syncFilterForm();
|
|
await refreshAll();
|
|
notify('Filters reset to default active view.');
|
|
});
|
|
|
|
elements.prevPageBtn?.addEventListener('click', async () => {
|
|
if ((state.filters.page || 1) <= 1) return;
|
|
state.filters.page = (state.filters.page || 1) - 1;
|
|
await refreshAll();
|
|
});
|
|
|
|
elements.nextPageBtn?.addEventListener('click', async () => {
|
|
state.filters.page = (state.filters.page || 1) + 1;
|
|
await refreshAll();
|
|
});
|
|
|
|
elements.selectAllPageCheckbox?.addEventListener('change', (event) => {
|
|
const checked = event.target.checked;
|
|
state.currentRows.forEach(row => {
|
|
const id = String(row.id);
|
|
if (checked) state.selectedIds.add(id);
|
|
else state.selectedIds.delete(id);
|
|
});
|
|
if (state.lastListPayload) renderChannels(state.lastListPayload);
|
|
});
|
|
|
|
elements.selectPageBtn?.addEventListener('click', () => {
|
|
state.currentRows.forEach(row => state.selectedIds.add(String(row.id)));
|
|
document.querySelectorAll('.row-checkbox').forEach(box => { box.checked = true; });
|
|
updateSelectionUI();
|
|
document.querySelectorAll('tr[data-row-id]').forEach(row => row.classList.add('row-selected'));
|
|
notify('Current page selected.');
|
|
});
|
|
|
|
elements.clearSelectionBtn?.addEventListener('click', () => {
|
|
state.selectedIds.clear();
|
|
document.querySelectorAll('.row-checkbox').forEach(box => { box.checked = false; });
|
|
document.querySelectorAll('tr[data-row-id]').forEach(row => row.classList.remove('row-selected'));
|
|
updateSelectionUI();
|
|
});
|
|
|
|
document.querySelectorAll('.channel-table thead th[data-sort]').forEach(th => {
|
|
th.addEventListener('click', async () => {
|
|
const field = th.dataset.sort;
|
|
if (state.sort.field === field) {
|
|
state.sort.direction = state.sort.direction === 'ASC' ? 'DESC' : 'ASC';
|
|
} else {
|
|
state.sort.field = field;
|
|
state.sort.direction = 'ASC';
|
|
}
|
|
await refreshAll();
|
|
});
|
|
});
|
|
|
|
elements.channelsTableBody?.addEventListener('click', async (event) => {
|
|
const checkbox = event.target.closest('.row-checkbox');
|
|
if (checkbox) {
|
|
const id = String(checkbox.dataset.rowId);
|
|
if (checkbox.checked) state.selectedIds.add(id); else state.selectedIds.delete(id);
|
|
const rowEl = checkbox.closest('tr');
|
|
rowEl?.classList.toggle('row-selected', checkbox.checked);
|
|
updateSelectionUI();
|
|
return;
|
|
}
|
|
|
|
const row = event.target.closest('tr[data-row-id]');
|
|
if (!row) return;
|
|
try {
|
|
await fetchDetail(row.dataset.rowId);
|
|
} catch (error) {
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
elements.detailForm?.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
const id = elements.detailChannelId.value;
|
|
const fields = payloadFromForm(elements.detailForm, editableFields);
|
|
try {
|
|
const response = await fetch(`${config.apiBase}?id=${encodeURIComponent(id)}`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
|
body: JSON.stringify({ fields })
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Unable to save changes.');
|
|
detailOffcanvas.hide();
|
|
notify(`Saved ${result.data.changed_fields.length || 0} field(s).`);
|
|
state.auditLoaded = false;
|
|
state.historyLoaded = false;
|
|
state.currentHistoryId = Number(result.data?.channel?.id || id);
|
|
try {
|
|
await fetchHistory(state.currentHistoryId, { silent: true });
|
|
} catch (historyError) {
|
|
renderHistoryEmpty(historyError.message);
|
|
}
|
|
await refreshAll();
|
|
} catch (error) {
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
document.getElementById('bulkEditModal')?.addEventListener('show.bs.modal', () => {
|
|
renderBulkForm();
|
|
elements.bulkSelectionSummary.textContent = String(state.selectedIds.size);
|
|
});
|
|
|
|
elements.bulkEditFieldsContainer?.addEventListener('change', (event) => {
|
|
const toggle = event.target.closest('.bulk-enable');
|
|
if (!toggle) return;
|
|
const card = document.querySelector(`[data-field-card="${toggle.value}"]`);
|
|
const control = card?.querySelector('.bulk-control');
|
|
if (control) control.disabled = !toggle.checked;
|
|
card?.classList.toggle('is-enabled', toggle.checked);
|
|
});
|
|
|
|
elements.bulkEditForm?.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
if (state.selectedIds.size === 0) {
|
|
notify('Select at least one row before bulk editing.', 'danger');
|
|
return;
|
|
}
|
|
|
|
const enabledFields = [...document.querySelectorAll('.bulk-enable:checked')];
|
|
if (enabledFields.length === 0) {
|
|
notify('Check at least one field to apply.', 'danger');
|
|
return;
|
|
}
|
|
|
|
const fields = {};
|
|
enabledFields.forEach(toggle => {
|
|
const control = document.querySelector(`[data-field-card="${toggle.value}"] .bulk-control`);
|
|
fields[toggle.value] = control ? control.value : '';
|
|
});
|
|
|
|
try {
|
|
const response = await fetch(`${config.apiBase}?bulk=1`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
|
body: JSON.stringify({ ids: [...state.selectedIds].map(Number), fields })
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Bulk update failed.');
|
|
bulkModal.hide();
|
|
state.selectedIds.clear();
|
|
notify(`Bulk update applied to ${result.data.updated_count} row(s).`);
|
|
state.auditLoaded = false;
|
|
state.historyLoaded = false;
|
|
state.currentHistoryId = null;
|
|
renderHistoryEmpty('Bulk edit finished. Select one row in Dataset to inspect its version chain.');
|
|
await refreshAll();
|
|
} catch (error) {
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
document.querySelector('[data-bs-target="#analytics-panel"]')?.addEventListener('shown.bs.tab', async () => {
|
|
try {
|
|
await fetchAnalytics();
|
|
state.analyticsLoaded = true;
|
|
} catch (error) {
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
document.querySelector('[data-bs-target="#history-panel"]')?.addEventListener('shown.bs.tab', async () => {
|
|
if (!state.currentHistoryId) {
|
|
renderHistoryEmpty('Click a row in Dataset to load its previous and current versions.');
|
|
return;
|
|
}
|
|
if (state.historyLoaded) return;
|
|
try {
|
|
await fetchHistory(state.currentHistoryId);
|
|
} catch (error) {
|
|
renderHistoryEmpty(error.message);
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
document.querySelector('[data-bs-target="#audit-panel"]')?.addEventListener('shown.bs.tab', async () => {
|
|
if (state.auditLoaded) return;
|
|
try {
|
|
await fetchAuditLog();
|
|
state.auditLoaded = true;
|
|
} catch (error) {
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
elements.refreshHistoryBtn?.addEventListener('click', async () => {
|
|
if (!state.currentHistoryId) {
|
|
renderHistoryEmpty('Click a row in Dataset to load its previous and current versions.');
|
|
return;
|
|
}
|
|
try {
|
|
await fetchHistory(state.currentHistoryId);
|
|
} catch (error) {
|
|
renderHistoryEmpty(error.message);
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
elements.applyAuditFiltersBtn?.addEventListener('click', async () => {
|
|
try {
|
|
await fetchAuditLog();
|
|
state.auditLoaded = true;
|
|
} catch (error) {
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
syncFilterForm();
|
|
renderHistoryEmpty('Click a row in Dataset to load its previous and current versions.');
|
|
refreshAll();
|
|
});
|