IDS-Viet/data-comparison
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
4a8d3d294b
data-comparison/templates/index.html

582 lines
22 KiB
HTML
Raw Normal View History

first push
2025-08-20 07:03:31 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KST vs Coordi Data Comparison</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1400px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.file-section {
background: #f8f9fa;
padding: 20px;
border-radius: 6px;
margin-bottom: 20px;
}
.file-input {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
input[type="text"], input[type="file"] {
flex: 1;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="file"] {
padding: 6px 8px;
}
button {
padding: 8px 16px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
button:disabled {
background: #6c757d;
cursor: not-allowed;
}
.loading {
text-align: center;
color: #666;
font-style: italic;
}
.tabs {
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
}
.tab {
display: inline-block;
padding: 10px 20px;
background: #f8f9fa;
border: 1px solid #ddd;
border-bottom: none;
cursor: pointer;
margin-right: 5px;
border-radius: 4px 4px 0 0;
}
.tab.active {
background: white;
border-bottom: 2px solid white;
margin-bottom: -2px;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.summary-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.summary-card {
background: #f8f9fa;
padding: 15px;
border-radius: 6px;
border-left: 4px solid #007bff;
}
.summary-card h3 {
margin-top: 0;
add final logic v120250820
2025-08-20 08:55:21 +00:00
margin-bottom: 15px;
first push
2025-08-20 07:03:31 +00:00
color: #333;
add final logic v120250820
2025-08-20 08:55:21 +00:00
font-size: 1.1em;
}
.summary-card p {
margin: 8px 0;
color: #555;
}
.summary-card span {
font-weight: bold;
color: #007bff;
first push
2025-08-20 07:03:31 +00:00
}
.count-badge {
display: inline-block;
background: #007bff;
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.9em;
margin-left: 10px;
}
.reconciliation {
background: #d4edda;
border: 1px solid #c3e6cb;
padding: 15px;
border-radius: 6px;
margin-top: 15px;
}
.reconciliation.mismatch {
background: #f8d7da;
border-color: #f5c6cb;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f8f9fa;
font-weight: bold;
}
tr:hover {
background-color: #f5f5f5;
}
.error {
background: #f8d7da;
color: #721c24;
padding: 15px;
border-radius: 6px;
margin: 10px 0;
}
.success {
background: #d4edda;
color: #155724;
padding: 15px;
border-radius: 6px;
margin: 10px 0;
}
.table-container {
max-height: 500px;
overflow-y: auto;
border: 1px solid #ddd;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>KST vs Coordi Data Comparison Tool</h1>
<div class="file-section">
<div class="file-input">
<label for="filePath">Excel File Path:</label>
<input type="text" id="filePath" value="data/sample-data.xlsx" placeholder="Enter file path">
<button onclick="analyzeData()" id="analyzeBtn">Analyze Data</button>
</div>
<div class="file-input" style="margin-top: 10px;">
<label>Or Upload File:</label>
<input type="file" id="fileUpload" accept=".xlsx,.xls" onchange="handleFileUpload()">
<button onclick="uploadAndAnalyze()" id="uploadBtn" disabled>Upload & Analyze</button>
</div>
<div class="file-input" style="margin-top: 10px;">
<label for="sheetFilter">Sheet Filter:</label>
<select id="sheetFilter" onchange="filterBySheet()" disabled>
fix logic
2025-08-20 08:38:04 +00:00
<!-- Options will be populated dynamically -->
first push
2025-08-20 07:03:31 +00:00
</select>
</div>
<div id="status"></div>
</div>
<div id="results" style="display: none;">
<div class="tabs">
<div class="tab active" onclick="showTab('summary')">Summary</div>
<div class="tab" onclick="showTab('different')">Different</div>
</div>
<div id="summary" class="tab-content active">
add final logic v120250820
2025-08-20 08:55:21 +00:00
<!-- Summary Cards Section -->
<div class="summary-grid">
<div class="summary-card">
<h3>📊 Sheet Summary</h3>
<p><strong>Current Sheet:</strong> <span id="current-sheet-name">-</span></p>
<p><strong>Matched Items:</strong> <span id="summary-matched-count">0</span> (Same in both KST and Coordi)</p>
<p><strong>Different Items:</strong> <span id="summary-different-count">0</span> (Total tasks excluding matched items)</p>
</div>
<div class="summary-card">
<h3>🔍 Breakdown</h3>
<p><strong>KST Only:</strong> <span id="summary-kst-only">0</span></p>
<p><strong>Coordi Only:</strong> <span id="summary-coordi-only">0</span></p>
<p><strong>Duplicates:</strong> <span id="summary-duplicates">0</span></p>
</div>
</div>
first push
2025-08-20 07:03:31 +00:00
<h3>Matched Items (Same in both KST and Coordi) <span id="matched-count-display" class="count-badge">0</span></h3>
<div class="table-container">
<table>
<thead>
<tr>
<th>Korean Title</th>
<th>Episode</th>
<th>Sheet</th>
<th>Row</th>
</tr>
</thead>
<tbody id="summary-table">
</tbody>
</table>
</div>
</div>
<div id="different" class="tab-content">
<h3>Different Items <span id="different-count-display" class="count-badge">0</span></h3>
<div class="table-container">
<table>
<thead>
<tr>
<th>KST Data</th>
<th>Coordi Data</th>
<th>Reason</th>
</tr>
</thead>
<tbody id="different-table">
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
function showTab(tabName) {
// Hide all tab contents
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
// Remove active class from all tabs
document.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('active');
});
// Show selected tab content
document.getElementById(tabName).classList.add('active');
// Add active class to clicked tab
event.target.classList.add('active');
}
function analyzeData() {
const filePath = document.getElementById('filePath').value;
const sheetFilter = document.getElementById('sheetFilter').value;
const statusDiv = document.getElementById('status');
const analyzeBtn = document.getElementById('analyzeBtn');
if (!filePath.trim()) {
statusDiv.innerHTML = '<div class="error">Please enter a file path</div>';
return;
}
// Show loading state
statusDiv.innerHTML = '<div class="loading">Analyzing data...</div>';
analyzeBtn.disabled = true;
analyzeBtn.textContent = 'Analyzing...';
// Make API call
fetch('/analyze', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
file_path: filePath,
fix logic
2025-08-20 08:38:04 +00:00
sheet_filter: sheetFilter
first push
2025-08-20 07:03:31 +00:00
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
statusDiv.innerHTML = '<div class="success">Analysis complete!</div>';
updateResults(data.results);
updateSheetFilter(data.results.sheet_names, data.results.current_sheet_filter);
document.getElementById('results').style.display = 'block';
} else {
statusDiv.innerHTML = `<div class="error">Error: ${data.error}</div>`;
}
})
.catch(error => {
statusDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
})
.finally(() => {
analyzeBtn.disabled = false;
analyzeBtn.textContent = 'Analyze Data';
});
}
function updateSheetFilter(sheetNames, currentFilter) {
const select = document.getElementById('sheetFilter');
fix logic
2025-08-20 08:38:04 +00:00
select.innerHTML = '';
first push
2025-08-20 07:03:31 +00:00
fix logic
2025-08-20 08:38:04 +00:00
sheetNames.forEach((sheetName, index) => {
first push
2025-08-20 07:03:31 +00:00
const option = document.createElement('option');
option.value = sheetName;
option.textContent = sheetName;
fix logic
2025-08-20 08:38:04 +00:00
// Select the first sheet by default, or the current filter if specified
if (sheetName === currentFilter || (!currentFilter && index === 0)) {
first push
2025-08-20 07:03:31 +00:00
option.selected = true;
}
select.appendChild(option);
});
select.disabled = false;
}
function filterBySheet() {
// Re-analyze with the selected sheet filter
analyzeData();
}
function handleFileUpload() {
const fileInput = document.getElementById('fileUpload');
const uploadBtn = document.getElementById('uploadBtn');
if (fileInput.files.length > 0) {
uploadBtn.disabled = false;
uploadBtn.textContent = 'Upload & Analyze';
} else {
uploadBtn.disabled = true;
}
}
function uploadAndAnalyze() {
const fileInput = document.getElementById('fileUpload');
const statusDiv = document.getElementById('status');
const uploadBtn = document.getElementById('uploadBtn');
if (fileInput.files.length === 0) {
statusDiv.innerHTML = '<div class="error">Please select a file to upload</div>';
return;
}
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
// Show uploading state
statusDiv.innerHTML = '<div class="loading">Uploading and analyzing file...</div>';
uploadBtn.disabled = true;
uploadBtn.textContent = 'Uploading...';
// Upload file
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
// File uploaded successfully, now analyze it
document.getElementById('filePath').value = data.file_path;
statusDiv.innerHTML = '<div class="loading">File uploaded! Analyzing data...</div>';
fix logic
2025-08-21 03:22:19 +00:00
// Analyze the uploaded file (use default sheet for new uploads)
const sheetFilter = null; // Always use default (first sheet) for new uploads
first push
2025-08-20 07:03:31 +00:00
return fetch('/analyze', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
file_path: data.file_path,
fix logic
2025-08-20 08:38:04 +00:00
sheet_filter: sheetFilter
first push
2025-08-20 07:03:31 +00:00
})
});
} else {
throw new Error(data.error);
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
statusDiv.innerHTML = '<div class="success">File uploaded and analyzed successfully!</div>';
updateResults(data.results);
updateSheetFilter(data.results.sheet_names, data.results.current_sheet_filter);
document.getElementById('results').style.display = 'block';
} else {
statusDiv.innerHTML = `<div class="error">Analysis error: ${data.error}</div>`;
}
})
.catch(error => {
statusDiv.innerHTML = `<div class="error">Upload error: ${error.message}</div>`;
})
.finally(() => {
uploadBtn.disabled = false;
uploadBtn.textContent = 'Upload & Analyze';
handleFileUpload(); // Reset button state based on file selection
});
}
function updateResults(results) {
// Update count displays
document.getElementById('matched-count-display').textContent = results.matched_items_count.toLocaleString();
fix logic
2025-08-20 08:38:04 +00:00
// Count all different items including duplicates and mixed duplicates
first push
2025-08-20 07:03:31 +00:00
const totalDifferent = results.mismatches.kst_only_count + results.mismatches.coordi_only_count +
fix logic
2025-08-20 08:38:04 +00:00
results.mismatches.kst_duplicates_count + results.mismatches.coordi_duplicates_count +
(results.mismatches.mixed_duplicates_count || 0);
first push
2025-08-20 07:03:31 +00:00
document.getElementById('different-count-display').textContent = totalDifferent.toLocaleString();
add final logic v120250820
2025-08-20 08:55:21 +00:00
// Update summary section
document.getElementById('current-sheet-name').textContent = results.current_sheet_filter;
document.getElementById('summary-matched-count').textContent = results.matched_items_count.toLocaleString();
document.getElementById('summary-different-count').textContent = totalDifferent.toLocaleString();
document.getElementById('summary-kst-only').textContent = results.mismatches.kst_only_count.toLocaleString();
document.getElementById('summary-coordi-only').textContent = results.mismatches.coordi_only_count.toLocaleString();
// Calculate total duplicates (KST + Coordi + Mixed)
const totalDuplicates = results.mismatches.kst_duplicates_count + results.mismatches.coordi_duplicates_count +
(results.mismatches.mixed_duplicates_count || 0);
document.getElementById('summary-duplicates').textContent = totalDuplicates.toLocaleString();
first push
2025-08-20 07:03:31 +00:00
// Update Summary tab (matched items)
updateSummaryTable(results.matched_data);
// Update Different tab
updateDifferentTable(results.mismatch_details);
}
function updateSummaryTable(matchedData) {
const tbody = document.getElementById('summary-table');
tbody.innerHTML = '';
// Sort by Korean title + episode
const sortedData = [...matchedData].sort((a, b) => {
const titleCompare = a.title.localeCompare(b.title, 'ko');
if (titleCompare !== 0) return titleCompare;
// Try to sort episodes numerically
const aEp = parseFloat(a.episode) || 0;
const bEp = parseFloat(b.episode) || 0;
return aEp - bEp;
});
sortedData.forEach(item => {
const row = tbody.insertRow();
row.insertCell(0).textContent = item.title;
row.insertCell(1).textContent = item.episode;
row.insertCell(2).textContent = item.sheet;
row.insertCell(3).textContent = item.row_index ? item.row_index + 1 : item.row;
});
}
function updateDifferentTable(mismatchDetails) {
const tbody = document.getElementById('different-table');
tbody.innerHTML = '';
const allDifferences = [];
fix logic
2025-08-20 08:38:04 +00:00
// Add KST-only items (no special highlighting)
first push
2025-08-20 07:03:31 +00:00
mismatchDetails.kst_only.forEach(item => {
allDifferences.push({
kstData: `${item.title} - Episode ${item.episode}`,
coordiData: '',
reason: 'Only appears in KST',
sortTitle: item.title,
compare data logic
2025-08-20 07:58:30 +00:00
sortEpisode: parseFloat(item.episode) || 0,
fix logic
2025-08-20 08:38:04 +00:00
highlightType: 'none'
first push
2025-08-20 07:03:31 +00:00
});
});
fix logic
2025-08-20 08:38:04 +00:00
// Add Coordi-only items (no special highlighting)
first push
2025-08-20 07:03:31 +00:00
mismatchDetails.coordi_only.forEach(item => {
allDifferences.push({
kstData: '',
coordiData: `${item.title} - Episode ${item.episode}`,
reason: 'Only appears in Coordi',
sortTitle: item.title,
compare data logic
2025-08-20 07:58:30 +00:00
sortEpisode: parseFloat(item.episode) || 0,
fix logic
2025-08-20 08:38:04 +00:00
highlightType: 'none'
first push
2025-08-20 07:03:31 +00:00
});
});
fix logic
2025-08-20 08:38:04 +00:00
// Add KST duplicates (red highlighting)
mismatchDetails.kst_duplicates.forEach(item => {
allDifferences.push({
kstData: `${item.title} - Episode ${item.episode}`,
coordiData: '',
reason: 'Duplicate entry in KST data',
sortTitle: item.title,
sortEpisode: parseFloat(item.episode) || 0,
highlightType: 'red'
});
});
// Add Coordi duplicates (red highlighting)
mismatchDetails.coordi_duplicates.forEach(item => {
allDifferences.push({
kstData: '',
coordiData: `${item.title} - Episode ${item.episode}`,
reason: 'Duplicate entry in Coordi data',
sortTitle: item.title,
sortEpisode: parseFloat(item.episode) || 0,
highlightType: 'red'
});
});
// Add mixed duplicates (yellow highlighting)
if (mismatchDetails.mixed_duplicates) {
mismatchDetails.mixed_duplicates.forEach(item => {
allDifferences.push({
kstData: item.duplicate_side === 'KST' ? `${item.title} - Episode ${item.episode}` : `${item.title} - Episode ${item.episode}`,
coordiData: item.duplicate_side === 'COORDI' ? `${item.title} - Episode ${item.episode}` : `${item.title} - Episode ${item.episode}`,
reason: item.reason,
sortTitle: item.title,
sortEpisode: parseFloat(item.episode) || 0,
highlightType: 'yellow'
});
});
}
first push
2025-08-20 07:03:31 +00:00
// Sort by Korean title + episode
allDifferences.sort((a, b) => {
const titleCompare = a.sortTitle.localeCompare(b.sortTitle, 'ko');
if (titleCompare !== 0) return titleCompare;
return a.sortEpisode - b.sortEpisode;
});
compare data logic
2025-08-20 07:58:30 +00:00
// Populate table with highlighting
first push
2025-08-20 07:03:31 +00:00
allDifferences.forEach(diff => {
const row = tbody.insertRow();
row.insertCell(0).textContent = diff.kstData;
row.insertCell(1).textContent = diff.coordiData;
row.insertCell(2).textContent = diff.reason;
compare data logic
2025-08-20 07:58:30 +00:00
fix logic
2025-08-20 08:38:04 +00:00
// Apply highlighting based on type
if (diff.highlightType === 'red') {
row.style.backgroundColor = '#f8d7da'; // Light red
row.title = 'Pure duplicate entry';
} else if (diff.highlightType === 'yellow') {
compare data logic
2025-08-20 07:58:30 +00:00
row.style.backgroundColor = '#fff3cd'; // Light yellow
fix logic
2025-08-20 08:38:04 +00:00
row.title = 'Item exists in both datasets but has duplicates on one side';
compare data logic
2025-08-20 07:58:30 +00:00
}
first push
2025-08-20 07:03:31 +00:00
});
}
// Auto-analyze on page load with default file
window.onload = function() {
analyzeData();
};
</script>
</body>
</html>
Reference in New Issue Copy Permalink