ilia-gurielidze-autstand/MonitorProgress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started refactring

Browse Source
This commit is contained in:
root 2025-04-09 19:19:08 +00:00
parent 322d662011
commit a3be6dd6b9
4 changed files with 804 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

864
app.py
View File

File diff suppressed because it is too large Load Diff

1
cloned_repos/mtn6 Submodule

@ -0,0 +1 @@
Subproject commit 456de12cca56c09bc1881660b163ac3b5dff593a

37
config.json Normal file
View File

@ -0,0 +1,37 @@
{
"check_interval_seconds": 60,
"projects": {
"mtn6": {
"name": "Mountain Top 6 (MTN6)",
"repo_url": "http://192.168.5.191:3000/LCI/MTN6",
"repo_dir": "./cloned_repos/mtn6",
"branch": "main",
"manifest_csv": "./manifests/MTN6 Equipment Manifest REV6(Conveyor List).csv",
"scada_views_dir": "MTN6_SCADA/com.inductiveautomation.perspective/views/Detailed-Views",
"drawing_texts_dir": "./extracted_texts/mtn6",
"pdf_source_dir": "./pdfs/mtn6",
"csv_cols": {
"alias": "Alias",
"panel": "Control Panel",
"eq_type": "Equipment Type",
"conv_type": "Type of Conveyor"
}
},
"another_project": {
"name": "Another Example Project",
"repo_url": "http://example.com/git/another_project.git",
"repo_dir": "./cloned_repos/another",
"branch": "develop",
"manifest_csv": "./manifests/another_manifest.csv",
"scada_views_dir": "perspective/views/Area51",
"drawing_texts_dir": "./extracted_texts/another",
"pdf_source_dir": null,
"csv_cols": {
"alias": "DeviceTag",
"panel": "Cabinet ID",
"eq_type": "Description",
"conv_type": "Category"
}
}
}
}

335
templates/index.html
View File

@ -52,11 +52,29 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<!-- Added Navigation --> <!-- Project Selector -->
<nav class="nav nav-pills"> <div class="row mb-3 align-items-center">
<a class="nav-link active" aria-current="page" href="/">SCADA Progress</a> <div class="col-auto">
<a class="nav-link" href="/drawings">Drawing Progress</a> <label for="projectSelector" class="col-form-label">Project:</label>
<a class="nav-link" href="/conflicts">Conflicts</a> </div>
<div class="col-auto">
<select class="form-select" id="projectSelector">
{% if projects %}
{% for project in projects %}
<option value="{{ project.id }}">{{ project.name }}</option>
{% endfor %}
{% else %}
<option value="" disabled>No projects configured</option>
{% endif %}
</select>
</div>
</div>
<!-- Navigation Tabs -->
<nav class="nav nav-pills mb-3">
<a class="nav-link active" data-target-section="scada" href="#">SCADA Progress</a>
<a class="nav-link" data-target-section="drawings" href="#">Drawing Progress</a>
<a class="nav-link" data-target-section="conflicts" href="#">Conflicts</a>
</nav> </nav>
<!-- SCADA Content Section --> <!-- SCADA Content Section -->
@ -111,7 +129,7 @@
<!-- Status Bar --> <!-- Status Bar -->
<div class="status-bar"> <div class="status-bar">
<span id="status-message">Initializing...</span> | Last Commit: <span id="last-commit">N/A</span> <span id="status-project"></span> <span id="status-message">Initializing...</span> | Last Commit: <span id="last-commit">N/A</span>
</div> </div>
<!-- Bootstrap Modal for Details --> <!-- Bootstrap Modal for Details -->
@ -149,12 +167,28 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
// --- Global State Variables --- // --- Global State Variables ---
let chartInstancesScada = {}; // Separate instances for SCADA let chartInstancesScada = {};
let chartInstancesDrawing = {}; // Separate instances for Drawing let chartInstancesDrawing = {};
let progressDetailsData = {}; // Stores the raw data from SSE (shared) let progressDetailsData = {}; // Stores the raw data from SSE for the current project
let previousCommitHash = null; // Single hash for the whole page let previousCommitHash = null;
let detailsModalInstance = null; let detailsModalInstance = null;
let currentVisibleSection = 'scada'; // Track visible section: 'scada', 'drawing', 'conflicts' let currentVisibleSection = 'scada';
let currentProjectId = null; // Added
let eventSource = null; // Added: Holds the current SSE connection
// --- DOM Elements ---
const projectSelector = document.getElementById('projectSelector');
const statusMessageElement = document.getElementById('status-message');
const statusProjectElement = document.getElementById('status-project');
const lastCommitElement = document.getElementById('last-commit');
const scadaPanelsContainer = document.getElementById('scada-panels-progress');
const drawingPanelsContainer = document.getElementById('drawing-panels-progress');
const conflictsPanelContainer = document.getElementById('panels-conflicts');
const overallScadaCanvas = document.getElementById('overall-scada-chart-canvas');
const overallDrawingCanvas = document.getElementById('overall-drawing-chart-canvas');
const overallScadaText = document.getElementById('overall-scada-text');
const overallDrawingText = document.getElementById('overall-drawing-text');
const conflictCountBadge = document.getElementById('conflict-count');
// --- Chart Configurations --- // --- Chart Configurations ---
const scadaChartLabels = ['Found in SCADA', 'Not Found in SCADA']; const scadaChartLabels = ['Found in SCADA', 'Not Found in SCADA'];
@ -197,32 +231,64 @@
} }
} }
// --- UI Reset Function --- NEW
function resetUIForNewProject() {
console.log(`Resetting UI for project: ${currentProjectId}`);
// Clear status bar
statusMessageElement.textContent = 'Loading data...';
lastCommitElement.textContent = 'N/A';
statusProjectElement.textContent = projectSelector.options[projectSelector.selectedIndex]?.text || '' ;
// Clear overall text
overallScadaText.textContent = 'Found in SCADA: 0/0 (0%)';
overallDrawingText.textContent = 'Found in Drawing: 0/0 (0%)';
// Clear panel containers
scadaPanelsContainer.innerHTML = '<p>Loading panel data...</p>';
drawingPanelsContainer.innerHTML = '<p>Loading panel data...</p>';
conflictsPanelContainer.innerHTML = '<p>Loading conflict data...</p>';
if (conflictCountBadge) conflictCountBadge.textContent = '0';
// Destroy existing charts
Object.values(chartInstancesScada).forEach(chart => chart.destroy());
Object.values(chartInstancesDrawing).forEach(chart => chart.destroy());
chartInstancesScada = {};
chartInstancesDrawing = {};
// Reset shared data (important!)
progressDetailsData = {};
previousCommitHash = null;
// Ensure the correct section is displayed (default to SCADA)
showSection('scada'); // Will also update nav pills
}
// --- Core UI Update Functions (One for each section) --- // --- Core UI Update Functions (One for each section) ---
function updateUIScadaCore(data) { function updateUIScadaCore(data) {
console.log("Running core SCADA UI redraw logic for commit:", data.last_commit); console.log("Running core SCADA UI redraw logic for commit:", data.last_commit);
progressDetailsData = data.progress; // Update shared raw data progressDetailsData = data.progress || {}; // Use empty object if progress is missing
// --- Overall SCADA Chart --- // --- Overall SCADA Chart ---
const overallData = progressDetailsData.overall; const overallData = progressDetailsData.overall || {};
const overallTotal = overallData.total_csv; const overallTotal = overallData.total_csv || 0;
const overallFoundScada = overallData.found_both + overallData.found_scada_only; const overallFoundScada = (overallData.found_both || 0) + (overallData.found_scada_only || 0);
const overallNotFoundScada = overallData.found_drawing_only + overallData.missing_both; const overallNotFoundScada = (overallData.found_drawing_only || 0) + (overallData.missing_both || 0);
const overallPercentageFound = overallTotal > 0 ? ((overallFoundScada / overallTotal) * 100).toFixed(1) : 0; const overallPercentageFound = overallTotal > 0 ? ((overallFoundScada / overallTotal) * 100).toFixed(1) : 0;
const overallChartCounts = [overallFoundScada, overallNotFoundScada]; const overallChartCounts = [overallFoundScada, overallNotFoundScada];
document.getElementById('overall-scada-text').textContent = `Found in SCADA: ${overallFoundScada}/${overallTotal} (${overallPercentageFound}%)`; overallScadaText.textContent = `Found in SCADA: ${overallFoundScada}/${overallTotal} (${overallPercentageFound}%)`;
// --- Only update/create chart if section is visible --- // --- Only update/create chart if section is visible ---
const isSectionVisible = (currentVisibleSection === 'scada'); const isSectionVisible = (currentVisibleSection === 'scada');
if (isSectionVisible) { if (isSectionVisible && overallScadaCanvas) {
const overallScadaCanvas = document.getElementById('overall-scada-chart-canvas');
if (chartInstancesScada['overall']) { if (chartInstancesScada['overall']) {
if (JSON.stringify(chartInstancesScada['overall'].data.datasets[0].data) !== JSON.stringify(overallChartCounts)) { if (JSON.stringify(chartInstancesScada['overall'].data.datasets[0].data) !== JSON.stringify(overallChartCounts)) {
chartInstancesScada['overall'].data.datasets[0].data = overallChartCounts; chartInstancesScada['overall'].data.datasets[0].data = overallChartCounts;
chartInstancesScada['overall'].update('none'); chartInstancesScada['overall'].update('none');
} }
} else if (overallScadaCanvas) { } else {
console.log("Creating overall SCADA chart (visible)."); console.log("Creating overall SCADA chart (visible).");
const ctxOverall = overallScadaCanvas.getContext('2d'); const ctxOverall = overallScadaCanvas.getContext('2d');
chartInstancesScada['overall'] = new Chart(ctxOverall, createChartConfig(overallChartCounts, overallTotal, 'scada', 'overall')); chartInstancesScada['overall'] = new Chart(ctxOverall, createChartConfig(overallChartCounts, overallTotal, 'scada', 'overall'));
@ -237,37 +303,35 @@
} }
// --- SCADA Panel Charts --- // --- SCADA Panel Charts ---
const panelsContainer = document.getElementById('scada-panels-progress');
const panelsData = progressDetailsData.panels || {}; const panelsData = progressDetailsData.panels || {};
updatePanelCharts(panelsContainer, panelsData, chartInstancesScada, 'scada'); updatePanelCharts(scadaPanelsContainer, panelsData, chartInstancesScada, 'scada');
console.log("Finished SCADA UI core redraw."); console.log("Finished SCADA UI core redraw.");
} }
function updateUIDrawingCore(data) { function updateUIDrawingCore(data) {
console.log("Running core Drawing UI redraw logic for commit:", data.last_commit); console.log("Running core Drawing UI redraw logic for commit:", data.last_commit);
progressDetailsData = data.progress; // Update shared raw data progressDetailsData = data.progress || {}; // Use empty object
// --- Overall Drawing Chart --- // --- Overall Drawing Chart ---
const overallData = progressDetailsData.overall; const overallData = progressDetailsData.overall || {};
const overallTotal = overallData.total_csv; const overallTotal = overallData.total_csv || 0;
const overallFoundDrawing = overallData.found_both + overallData.found_drawing_only; const overallFoundDrawing = (overallData.found_both || 0) + (overallData.found_drawing_only || 0);
const overallNotFoundDrawing = overallData.found_scada_only + overallData.missing_both; const overallNotFoundDrawing = (overallData.found_scada_only || 0) + (overallData.missing_both || 0);
const overallPercentageFound = overallTotal > 0 ? ((overallFoundDrawing / overallTotal) * 100).toFixed(1) : 0; const overallPercentageFound = overallTotal > 0 ? ((overallFoundDrawing / overallTotal) * 100).toFixed(1) : 0;
const overallChartCounts = [overallFoundDrawing, overallNotFoundDrawing]; const overallChartCounts = [overallFoundDrawing, overallNotFoundDrawing];
document.getElementById('overall-drawing-text').textContent = `Found in Drawing: ${overallFoundDrawing}/${overallTotal} (${overallPercentageFound}%)`; overallDrawingText.textContent = `Found in Drawing: ${overallFoundDrawing}/${overallTotal} (${overallPercentageFound}%)`;
// --- Only update/create chart if section is visible --- // --- Only update/create chart if section is visible ---
const isSectionVisible = (currentVisibleSection === 'drawings'); const isSectionVisible = (currentVisibleSection === 'drawings');
if (isSectionVisible) { if (isSectionVisible && overallDrawingCanvas) {
const overallDrawingCanvas = document.getElementById('overall-drawing-chart-canvas');
if (chartInstancesDrawing['overall']) { if (chartInstancesDrawing['overall']) {
if (JSON.stringify(chartInstancesDrawing['overall'].data.datasets[0].data) !== JSON.stringify(overallChartCounts)) { if (JSON.stringify(chartInstancesDrawing['overall'].data.datasets[0].data) !== JSON.stringify(overallChartCounts)) {
chartInstancesDrawing['overall'].data.datasets[0].data = overallChartCounts; chartInstancesDrawing['overall'].data.datasets[0].data = overallChartCounts;
chartInstancesDrawing['overall'].update('none'); chartInstancesDrawing['overall'].update('none');
} }
} else if (overallDrawingCanvas) { } else {
console.log("Creating overall drawing chart (visible)."); console.log("Creating overall drawing chart (visible).");
const ctxOverall = overallDrawingCanvas.getContext('2d'); const ctxOverall = overallDrawingCanvas.getContext('2d');
chartInstancesDrawing['overall'] = new Chart(ctxOverall, createChartConfig(overallChartCounts, overallTotal, 'drawing', 'overall')); chartInstancesDrawing['overall'] = new Chart(ctxOverall, createChartConfig(overallChartCounts, overallTotal, 'drawing', 'overall'));
@ -282,27 +346,25 @@
} }
// --- Drawing Panel Charts (call updatePanelCharts, which also checks visibility/destroys) --- // --- Drawing Panel Charts (call updatePanelCharts, which also checks visibility/destroys) ---
const panelsContainer = document.getElementById('drawing-panels-progress');
const panelsData = progressDetailsData.panels || {}; const panelsData = progressDetailsData.panels || {};
console.log(`[updateUIDrawingCore] Found drawing panels container:`, panelsContainer ? panelsContainer.id : 'Not Found'); // Added Log console.log(`[updateUIDrawingCore] Found drawing panels container:`, panelsContainer ? panelsContainer.id : 'Not Found'); // Added Log
updatePanelCharts(panelsContainer, panelsData, chartInstancesDrawing, 'drawings'); // Changed context to plural 'drawings' updatePanelCharts(drawingPanelsContainer, panelsData, chartInstancesDrawing, 'drawings'); // Changed context to plural 'drawings'
console.log("Finished Drawing UI core redraw."); console.log("Finished Drawing UI core redraw.");
} }
function updateUIConflictsCore(data) { function updateUIConflictsCore(data) {
console.log("Running core Conflicts UI redraw logic for commit:", data.last_commit); console.log("Running core Conflicts UI redraw logic for commit:", data.last_commit);
progressDetailsData = data.progress; // Update shared raw data progressDetailsData = data.progress || {}; // Use empty object
const panelsContainer = document.getElementById('panels-conflicts'); conflictsPanelContainer.innerHTML = ''; // Clear previous
panelsContainer.innerHTML = ''; // Clear previous
const panelsData = progressDetailsData.panels; const panelsData = progressDetailsData.panels || {};
let totalConflicts = 0; let totalConflicts = 0;
let panelsWithConflicts = 0; let panelsWithConflicts = 0;
if (!panelsData || Object.keys(panelsData).length === 0) { if (Object.keys(panelsData).length === 0) {
panelsContainer.innerHTML = '<p class="text-center fst-italic">No panel data available yet.</p>'; conflictsPanelContainer.innerHTML = '<p class="text-center fst-italic">No panel data available yet.</p>';
} else { } else {
const sortedPanels = Object.keys(panelsData).sort(); const sortedPanels = Object.keys(panelsData).sort();
sortedPanels.forEach(panelName => { sortedPanels.forEach(panelName => {
@ -315,7 +377,7 @@
const panelHeader = document.createElement('h4'); const panelHeader = document.createElement('h4');
panelHeader.className = 'mt-4 mb-2'; panelHeader.className = 'mt-4 mb-2';
panelHeader.textContent = `${panelName} (${conflictsList.length} conflicts)`; panelHeader.textContent = `${panelName} (${conflictsList.length} conflicts)`;
panelsContainer.appendChild(panelHeader); conflictsPanelContainer.appendChild(panelHeader);
const table = document.createElement('table'); const table = document.createElement('table');
table.className = 'table table-sm table-striped table-hover table-bordered'; table.className = 'table table-sm table-striped table-hover table-bordered';
@ -332,24 +394,27 @@
row.insertCell().textContent = item.equipment_type || 'N/A'; row.insertCell().textContent = item.equipment_type || 'N/A';
row.insertCell().textContent = item.conveyor_type || 'N/A'; row.insertCell().textContent = item.conveyor_type || 'N/A';
}); });
panelsContainer.appendChild(table); conflictsPanelContainer.appendChild(table);
} }
}); });
if (panelsWithConflicts === 0) { if (panelsWithConflicts === 0) {
panelsContainer.innerHTML = '<p class="text-center fst-italic">No conflicts found across all panels.</p>'; conflictsPanelContainer.innerHTML = '<p class="text-center fst-italic">No conflicts found across all panels.</p>';
} }
} }
// Update total count badge // Update total count badge
const countBadge = document.getElementById('conflict-count'); if (conflictCountBadge) {
if (countBadge) { conflictCountBadge.textContent = totalConflicts;
countBadge.textContent = totalConflicts; conflictCountBadge.style.display = totalConflicts > 0 ? 'inline-block' : 'none';
countBadge.style.display = totalConflicts > 0 ? 'inline-block' : 'none';
} }
console.log("Finished Conflicts UI core redraw."); console.log("Finished Conflicts UI core redraw.");
} }
// --- Generic Panel Chart Update Logic --- // --- Generic Panel Chart Update Logic ---
function updatePanelCharts(panelsContainer, panelsData, chartInstances, context) { // context: 'scada' or 'drawing' function updatePanelCharts(panelsContainer, panelsData, chartInstances, context) { // context: 'scada' or 'drawing'
if (!panelsContainer) {
console.error(`[updatePanelCharts] Invalid container provided for context: ${context}`);
return;
}
const incomingPanelNames = new Set(Object.keys(panelsData).sort()); const incomingPanelNames = new Set(Object.keys(panelsData).sort());
const existingInstanceNames = new Set(Object.keys(chartInstances).filter(k => k !== 'overall')); const existingInstanceNames = new Set(Object.keys(chartInstances).filter(k => k !== 'overall'));
@ -374,44 +439,56 @@
incomingPanelNames.forEach(panelName => { incomingPanelNames.forEach(panelName => {
const panel = panelsData[panelName]; const panel = panelsData[panelName];
const panelTotal = panel.total; const panelTotal = panel.total || 0;
let panelChartCounts; let panelChartCounts;
if (context === 'scada') { if (context === 'scada') {
panelChartCounts = [panel.found_both + panel.found_scada_only, panel.found_drawing_only + panel.missing_both]; panelChartCounts = [(panel.found_both || 0) + (panel.found_scada_only || 0), (panel.found_drawing_only || 0) + (panel.missing_both || 0)];
} else { // drawing } else { // drawing
panelChartCounts = [panel.found_both + panel.found_drawing_only, panel.found_scada_only + panel.missing_both]; panelChartCounts = [(panel.found_both || 0) + (panel.found_drawing_only || 0), (panel.found_scada_only || 0) + (panel.missing_both || 0)];
} }
// --- Only update/create chart if section is visible --- // --- Only update/create chart if section is visible ---
if (isSectionVisible) { if (isSectionVisible) {
let canvas = document.getElementById(`chart-${context}-${panelName}`);
let chartContainer = document.getElementById(`chart-container-${context}-${panelName}`);
if (chartInstances[panelName]) { if (chartInstances[panelName]) {
// Update existing chart if data changed
if (JSON.stringify(chartInstances[panelName].data.datasets[0].data) !== JSON.stringify(panelChartCounts)) { if (JSON.stringify(chartInstances[panelName].data.datasets[0].data) !== JSON.stringify(panelChartCounts)) {
console.log(`Updating ${context} chart data for panel (visible): ${panelName}`);
chartInstances[panelName].data.datasets[0].data = panelChartCounts; chartInstances[panelName].data.datasets[0].data = panelChartCounts;
chartInstances[panelName].update('none'); chartInstances[panelName].update('none');
} }
} else { } else {
let canvas = document.getElementById(`chart-${context}-${panelName}`); // Use context in ID // Create new chart instance and potentially elements
if (canvas) { if (!chartContainer) {
console.log(`Recreating ${context} chart instance for panel (visible): ${panelName}`);
const ctx = canvas.getContext('2d');
chartInstances[panelName] = new Chart(ctx, createChartConfig(panelChartCounts, panelTotal, context, panelName));
} else {
console.log(`Creating new ${context} panel elements and chart (visible) for: ${panelName}`); console.log(`Creating new ${context} panel elements and chart (visible) for: ${panelName}`);
const chartContainer = document.createElement('div'); chartContainer = document.createElement('div');
chartContainer.id = `chart-container-${context}-${panelName}`; // Use context in ID chartContainer.id = `chart-container-${context}-${panelName}`;
chartContainer.className = 'chart-container'; chartContainer.className = 'chart-container';
const label = document.createElement('span'); const label = document.createElement('span');
label.className = 'chart-label'; label.textContent = panelName; label.className = 'chart-label';
canvas = document.createElement('canvas'); // Reassign canvas variable label.textContent = panelName;
canvas.id = `chart-${context}-${panelName}`; // Use context in ID canvas = document.createElement('canvas');
canvas.id = `chart-${context}-${panelName}`;
canvas.className = 'panel-chart-canvas'; canvas.className = 'panel-chart-canvas';
chartContainer.appendChild(label); chartContainer.appendChild(label);
chartContainer.appendChild(canvas); chartContainer.appendChild(canvas);
// Added Log before append panelsContainer.appendChild(chartContainer);
console.log(`[updatePanelCharts] Appending chartContainer (${chartContainer.id}) to panelsContainer (${panelsContainer ? panelsContainer.id : 'null'})`); } else if (!canvas) {
panelsContainer.appendChild(chartContainer); // Append to the main panels progress div console.warn(`Container for ${context}-${panelName} exists, but canvas is missing. Recreating canvas.`);
canvas = document.createElement('canvas');
canvas.id = `chart-${context}-${panelName}`;
canvas.className = 'panel-chart-canvas';
chartContainer.appendChild(canvas); // Append to existing container
}
if (canvas) {
console.log(`Creating new ${context} chart instance for panel (visible): ${panelName}`);
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
chartInstances[panelName] = new Chart(ctx, createChartConfig(panelChartCounts, panelTotal, context, panelName)); chartInstances[panelName] = new Chart(ctx, createChartConfig(panelChartCounts, panelTotal, context, panelName));
} else {
console.error(`Failed to get or create canvas for ${context}-${panelName}`);
} }
} }
} }
@ -424,14 +501,15 @@
} }
existingInstanceNames.forEach(panelName => { existingInstanceNames.forEach(panelName => {
if (!incomingPanelNames.has(panelName)) { const shouldRemove = !incomingPanelNames.has(panelName) || !isSectionVisible;
console.log(`Removing ${context} panel elements and chart for: ${panelName}`); if (shouldRemove) {
// Ensure chart is destroyed before removing element const reason = !isSectionVisible ? 'section hidden' : 'data removed';
console.log(`Removing ${context} panel elements and chart for: ${panelName} (Reason: ${reason})`);
if (chartInstances[panelName]) { if (chartInstances[panelName]) {
chartInstances[panelName].destroy(); chartInstances[panelName].destroy();
delete chartInstances[panelName]; delete chartInstances[panelName];
} }
const chartElement = document.getElementById(`chart-container-${context}-${panelName}`); // Use context const chartElement = document.getElementById(`chart-container-${context}-${panelName}`);
if (chartElement) { if (chartElement) {
chartElement.remove(); chartElement.remove();
} }
@ -445,6 +523,9 @@
const colors = context === 'scada' ? scadaChartColors : drawingChartColors; const colors = context === 'scada' ? scadaChartColors : drawingChartColors;
const datasetLabel = context === 'scada' ? 'SCADA Match' : 'Drawing Match'; const datasetLabel = context === 'scada' ? 'SCADA Match' : 'Drawing Match';
// Get the actual total count for percentage calculation
const chartTotal = (identifier === 'overall' && progressDetailsData.overall) ? (progressDetailsData.overall.total_csv || 0) : total;
return { return {
type: 'pie', type: 'pie',
data: { data: {
@ -469,10 +550,7 @@
if (label) label += ': '; if (label) label += ': ';
const value = ctxTooltip.parsed; const value = ctxTooltip.parsed;
if (value !== null) label += value; if (value !== null) label += value;
// Use overallTotal for overall chart, panelTotal otherwise (How to get panelTotal here? Needs rethinking) if (chartTotal > 0) {
// Workaround: Don't show percentage on panel tooltips for now
const chartTotal = (identifier === 'overall' && progressDetailsData.overall) ? progressDetailsData.overall.total_csv : null;
if (chartTotal && chartTotal > 0) {
label += ` (${((value / chartTotal) * 100).toFixed(1)}%)`; label += ` (${((value / chartTotal) * 100).toFixed(1)}%)`;
} }
return label; return label;
@ -486,11 +564,12 @@
// --- Wrapper function called by debouncer (Handles all sections) --- // --- Wrapper function called by debouncer (Handles all sections) ---
function processUpdate(data) { function processUpdate(data) {
console.log("Processing update for commit:", data.last_commit); console.log(`Processing update for project ${currentProjectId}, commit:`, data.last_commit);
// Always update status bar and commit hash text immediately // Always update status bar immediately
document.getElementById('status-message').textContent = data.status; statusMessageElement.textContent = data.status || 'Status unavailable';
document.getElementById('last-commit').textContent = data.last_commit || 'N/A'; lastCommitElement.textContent = data.last_commit || 'N/A';
statusProjectElement.textContent = projectSelector.options[projectSelector.selectedIndex]?.text || '' ;
// *** Strict Check: Only proceed if commit hash has changed *** // *** Strict Check: Only proceed if commit hash has changed ***
if (data.last_commit && data.last_commit !== previousCommitHash) { if (data.last_commit && data.last_commit !== previousCommitHash) {
@ -521,10 +600,10 @@
: (context === 'scada' ? 'Not Found in SCADA' : 'Not Found in Drawing'); : (context === 'scada' ? 'Not Found in SCADA' : 'Not Found in Drawing');
if (identifier === '__overall__') { if (identifier === '__overall__') {
sourceData = progressDetailsData.overall; sourceData = progressDetailsData?.overall;
panelNameDisplay = "Overall"; panelNameDisplay = "Overall";
} else { } else {
sourceData = progressDetailsData.panels ? progressDetailsData.panels[identifier] : null; sourceData = progressDetailsData?.panels?.[identifier];
panelNameDisplay = identifier; panelNameDisplay = identifier;
} }
@ -581,7 +660,7 @@
// --- Trigger update for the now-visible section --- // --- Trigger update for the now-visible section ---
// The update function will check visibility internally before drawing charts. // The update function will check visibility internally before drawing charts.
if (progressDetailsData && Object.keys(progressDetailsData).length > 0) { if (progressDetailsData && Object.keys(progressDetailsData).length > 0) {
const updateData = { progress: progressDetailsData }; // Pass existing data const updateData = { progress: progressDetailsData, last_commit: previousCommitHash }; // Pass existing data
console.log(`Calling update function for now-visible section: ${sectionId}`); console.log(`Calling update function for now-visible section: ${sectionId}`);
// Use setTimeout to ensure DOM update (display: block) is processed first // Use setTimeout to ensure DOM update (display: block) is processed first
if (sectionId === 'scada') { if (sectionId === 'scada') {
@ -636,26 +715,92 @@
showSection('scada'); showSection('scada');
}); });
// --- Connect to SSE stream (Single connection) --- // --- SSE Connection Handling --- NEW/MODIFIED
console.log("Initializing SSE connection..."); function connectSSE(projectId) {
const eventSource = new EventSource("/stream"); if (!projectId) {
console.error("No project ID provided for SSE connection.");
eventSource.onmessage = function(event) { statusMessageElement.textContent = 'No project selected.';
try { return;
const data = JSON.parse(event.data);
debouncedProcessUpdate(data); // Call the single debounced processor
} catch (error) {
console.error("Error parsing SSE data:", error);
document.getElementById('status-message').textContent = 'Error processing update from server.';
} }
};
eventSource.onerror = function(err) { // Close existing connection if open
console.error("EventSource failed:", err); if (eventSource) {
document.getElementById('status-message').textContent = 'Connection to server lost. Retrying...'; console.log(`Closing previous SSE connection for project ${currentProjectId}`);
}; eventSource.close();
eventSource = null;
}
console.log("SSE handler set up."); currentProjectId = projectId;
console.log(`Initializing SSE connection for project: ${projectId}...`);
resetUIForNewProject(); // Reset UI elements before connecting
const url = `/stream/${projectId}`;
eventSource = new EventSource(url);
eventSource.onopen = function() {
console.log(`SSE connection opened successfully for ${projectId} at ${url}`);
statusMessageElement.textContent = 'Connected, waiting for data...';
};
eventSource.onmessage = function(event) {
try {
const data = JSON.parse(event.data);
debouncedProcessUpdate(data); // Call the debounced processor
} catch (error) {
console.error("Error parsing SSE data:", error, "Data:", event.data);
statusMessageElement.textContent = 'Error processing update from server.';
}
};
eventSource.onerror = function(err) {
console.error(`EventSource failed for ${projectId}:`, err);
statusMessageElement.textContent = 'Connection to server lost or error. Retrying...';
// EventSource attempts reconnection automatically, but we might want
// to implement custom backoff or notification logic here.
// If the error is fatal (e.g., 404), we might want to stop retrying.
if (eventSource.readyState === EventSource.CLOSED) {
console.log(`SSE connection permanently closed for ${projectId}.`);
// Maybe disable UI or show persistent error?
}
};
console.log(`SSE handler set up for ${projectId}.`);
}
// --- Initialization --- MODIFIED
document.addEventListener('DOMContentLoaded', () => {
console.log("DOM Loaded, setting up...");
// Setup Navigation Tabs
document.querySelectorAll('.nav-link[data-target-section]').forEach(link => {
link.addEventListener('click', (event) => {
event.preventDefault(); // Prevent page reload/hash change
const sectionId = link.getAttribute('data-target-section');
showSection(sectionId);
});
});
// Setup Project Selector
if (projectSelector) {
projectSelector.addEventListener('change', (event) => {
const selectedProjectId = event.target.value;
console.log("Project selection changed to:", selectedProjectId);
connectSSE(selectedProjectId);
});
// Initial Connection
const initialProjectId = projectSelector.value; // Get value of the pre-selected option
if (initialProjectId) {
connectSSE(initialProjectId);
} else {
console.warn("No initial project selected or no projects available.");
statusMessageElement.textContent = 'Please select a project.';
}
} else {
console.error("Project selector element not found.");
statusMessageElement.textContent = 'Error: Project selector missing.';
}
});
</script> </script>
</body> </body>