812 lines
32 KiB
JavaScript
812 lines
32 KiB
JavaScript
// Reusable Firmware Upload Component
|
|
class FirmwareUploadComponent extends Component {
|
|
constructor(container, viewModel, eventBus) {
|
|
super(container, viewModel, eventBus);
|
|
|
|
logger.debug('FirmwareUploadComponent: Constructor called');
|
|
logger.debug('FirmwareUploadComponent: Container:', container);
|
|
logger.debug('FirmwareUploadComponent: Container ID:', container?.id);
|
|
|
|
// Initialize overlay dialog
|
|
this.overlayDialog = null;
|
|
}
|
|
|
|
setupEventListeners() {
|
|
// Setup firmware file input
|
|
const firmwareFile = this.findElement('#firmware-file');
|
|
if (firmwareFile) {
|
|
this.addEventListener(firmwareFile, 'change', this.handleFileSelect.bind(this));
|
|
}
|
|
|
|
// Setup deploy button
|
|
const deployBtn = this.findElement('#deploy-btn');
|
|
if (deployBtn) {
|
|
this.addEventListener(deployBtn, 'click', this.handleDeploy.bind(this));
|
|
}
|
|
|
|
// Setup WebSocket listener for real-time firmware upload status
|
|
this.setupWebSocketListeners();
|
|
}
|
|
|
|
setupViewModelListeners() {
|
|
this.subscribeToProperty('selectedFile', () => {
|
|
this.updateFileInfo();
|
|
this.updateDeployButton();
|
|
});
|
|
this.subscribeToProperty('isUploading', this.updateUploadState.bind(this));
|
|
this.subscribeToProperty('uploadProgress', this.updateUploadProgress.bind(this));
|
|
this.subscribeToProperty('uploadResults', this.updateUploadResults.bind(this));
|
|
}
|
|
|
|
setupWebSocketListeners() {
|
|
// Listen for real-time firmware upload status updates
|
|
window.wsClient.on('firmwareUploadStatus', (data) => {
|
|
this.handleFirmwareUploadStatus(data);
|
|
});
|
|
}
|
|
|
|
handleFirmwareUploadStatus(data) {
|
|
const { nodeIp, status, filename, fileSize, timestamp } = data;
|
|
|
|
logger.debug('FirmwareUploadComponent: Firmware upload status received:', { nodeIp, status, filename });
|
|
|
|
// Check if there's currently an upload in progress
|
|
const isUploading = this.viewModel.get('isUploading');
|
|
if (!isUploading) {
|
|
logger.debug('FirmwareUploadComponent: No active upload, ignoring status update');
|
|
return;
|
|
}
|
|
|
|
// Find the target node item for this node
|
|
const targetNodeItem = this.findElement(`[data-node-ip="${nodeIp}"]`);
|
|
if (!targetNodeItem) {
|
|
logger.debug('FirmwareUploadComponent: No target node item found for node:', nodeIp);
|
|
return;
|
|
}
|
|
|
|
// Update the status display based on the received status
|
|
const statusElement = targetNodeItem.querySelector('.status-indicator');
|
|
|
|
if (statusElement) {
|
|
let displayStatus = status;
|
|
let statusClass = '';
|
|
|
|
logger.debug(`FirmwareUploadComponent: Updating status for node ${nodeIp}: ${status} -> ${displayStatus}`);
|
|
|
|
switch (status) {
|
|
case 'uploading':
|
|
displayStatus = 'Uploading...';
|
|
statusClass = 'uploading';
|
|
break;
|
|
case 'completed':
|
|
displayStatus = 'Completed';
|
|
statusClass = 'success';
|
|
logger.debug(`FirmwareUploadComponent: Node ${nodeIp} marked as completed`);
|
|
break;
|
|
case 'failed':
|
|
displayStatus = 'Failed';
|
|
statusClass = 'error';
|
|
break;
|
|
default:
|
|
displayStatus = status;
|
|
break;
|
|
}
|
|
|
|
statusElement.textContent = displayStatus;
|
|
statusElement.className = `status-indicator ${statusClass}`;
|
|
}
|
|
|
|
// Update overall progress if we have multiple nodes
|
|
this.updateOverallProgressFromStatus();
|
|
|
|
// Check if all uploads are complete and finalize results
|
|
this.checkAndFinalizeUploadResults();
|
|
}
|
|
|
|
updateOverallProgressFromStatus() {
|
|
const targetNodeItems = Array.from(this.findAllElements('.target-node-item'));
|
|
if (targetNodeItems.length <= 1) {
|
|
return; // Only update for multi-node uploads
|
|
}
|
|
|
|
let completedCount = 0;
|
|
let failedCount = 0;
|
|
let uploadingCount = 0;
|
|
|
|
targetNodeItems.forEach(item => {
|
|
const statusElement = item.querySelector('.status-indicator');
|
|
if (statusElement) {
|
|
const status = statusElement.textContent;
|
|
if (status === 'Completed') {
|
|
completedCount++;
|
|
} else if (status === 'Failed') {
|
|
failedCount++;
|
|
} else if (status === 'Uploading...') {
|
|
uploadingCount++;
|
|
}
|
|
}
|
|
});
|
|
|
|
const totalNodes = targetNodeItems.length;
|
|
const successfulUploads = completedCount;
|
|
const successPercentage = Math.round((successfulUploads / totalNodes) * 100);
|
|
|
|
// Update overall progress bar
|
|
const progressBar = this.findElement('#overall-progress-bar');
|
|
const progressText = this.findElement('.progress-text');
|
|
|
|
if (progressBar && progressText) {
|
|
progressBar.style.width = `${successPercentage}%`;
|
|
|
|
// Update progress bar color based on completion
|
|
if (successPercentage === 100) {
|
|
progressBar.style.backgroundColor = '#4ade80';
|
|
} else if (successPercentage > 50) {
|
|
progressBar.style.backgroundColor = '#60a5fa';
|
|
} else {
|
|
progressBar.style.backgroundColor = '#fbbf24';
|
|
}
|
|
|
|
progressText.textContent = `${successfulUploads}/${totalNodes} Successful (${successPercentage}%)`;
|
|
}
|
|
|
|
// Update progress summary
|
|
const progressSummary = this.findElement('#progress-summary');
|
|
if (progressSummary) {
|
|
if (failedCount > 0) {
|
|
progressSummary.innerHTML = `<span>${window.icon('warning', { width: 14, height: 14 })} Upload in progress... (${uploadingCount} uploading, ${failedCount} failed)</span>`;
|
|
} else if (uploadingCount > 0) {
|
|
progressSummary.innerHTML = `<span>${window.icon('info', { width: 14, height: 14 })} Upload in progress... (${uploadingCount} uploading)</span>`;
|
|
} else if (completedCount === totalNodes) {
|
|
progressSummary.innerHTML = `<span>${window.icon('success', { width: 14, height: 14 })} All uploads completed successfully at ${new Date().toLocaleTimeString()}</span>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
checkAndFinalizeUploadResults() {
|
|
const targetNodeItems = Array.from(this.findAllElements('.target-node-item'));
|
|
if (targetNodeItems.length === 0) return;
|
|
|
|
// Check if all uploads are complete (either completed or failed)
|
|
let allComplete = true;
|
|
let hasAnyCompleted = false;
|
|
let hasAnyFailed = false;
|
|
let uploadingCount = 0;
|
|
|
|
const statuses = [];
|
|
targetNodeItems.forEach(item => {
|
|
const statusElement = item.querySelector('.status-indicator');
|
|
if (statusElement) {
|
|
const status = statusElement.textContent;
|
|
statuses.push(status);
|
|
|
|
if (status !== 'Completed' && status !== 'Failed') {
|
|
allComplete = false;
|
|
if (status === 'Uploading...') {
|
|
uploadingCount++;
|
|
}
|
|
}
|
|
if (status === 'Completed') {
|
|
hasAnyCompleted = true;
|
|
}
|
|
if (status === 'Failed') {
|
|
hasAnyFailed = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
logger.debug('FirmwareUploadComponent: Upload status check:', {
|
|
totalItems: targetNodeItems.length,
|
|
allComplete,
|
|
uploadingCount,
|
|
hasAnyCompleted,
|
|
hasAnyFailed,
|
|
statuses
|
|
});
|
|
|
|
// If all uploads are complete, finalize the results
|
|
if (allComplete) {
|
|
logger.debug('FirmwareUploadComponent: All firmware uploads complete, finalizing results');
|
|
|
|
// Generate results based on current status
|
|
const results = targetNodeItems.map(item => {
|
|
const nodeIp = item.getAttribute('data-node-ip');
|
|
const nodeName = item.querySelector('.node-name')?.textContent || nodeIp;
|
|
const statusElement = item.querySelector('.status-indicator');
|
|
const status = statusElement?.textContent || 'Unknown';
|
|
|
|
return {
|
|
nodeIp: nodeIp,
|
|
hostname: nodeName,
|
|
success: status === 'Completed',
|
|
error: status === 'Failed' ? 'Upload failed' : undefined,
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
});
|
|
|
|
// Update the header and summary to show final results
|
|
this.displayUploadResults(results);
|
|
|
|
// Hide the progress overlay since upload is complete
|
|
this.hideProgressOverlay();
|
|
|
|
// Now that all uploads are truly complete (confirmed via websocket), mark upload as complete
|
|
this.viewModel.completeUpload();
|
|
|
|
// Reset upload state after a short delay to allow user to see results and re-enable deploy button
|
|
setTimeout(() => {
|
|
this.viewModel.resetUploadState();
|
|
logger.debug('FirmwareUploadComponent: Upload state reset, deploy button should be re-enabled');
|
|
}, 5000);
|
|
} else if (uploadingCount > 0) {
|
|
logger.debug(`FirmwareUploadComponent: ${uploadingCount} uploads still in progress, not finalizing yet`);
|
|
} else {
|
|
logger.debug('FirmwareUploadComponent: Some uploads may have unknown status, but not finalizing yet');
|
|
}
|
|
}
|
|
|
|
mount() {
|
|
super.mount();
|
|
|
|
logger.debug('FirmwareUploadComponent: Mounting...');
|
|
|
|
// Initialize overlay dialog
|
|
this.initializeOverlayDialog();
|
|
|
|
// Initialize UI state
|
|
this.updateFileInfo();
|
|
this.updateDeployButton();
|
|
|
|
logger.debug('FirmwareUploadComponent: Mounted successfully');
|
|
}
|
|
|
|
render() {
|
|
// Initial render is handled by the HTML template
|
|
this.updateDeployButton();
|
|
}
|
|
|
|
initializeOverlayDialog() {
|
|
// Create overlay container if it doesn't exist
|
|
let overlayContainer = document.getElementById('firmware-upload-overlay-dialog');
|
|
if (!overlayContainer) {
|
|
overlayContainer = document.createElement('div');
|
|
overlayContainer.id = 'firmware-upload-overlay-dialog';
|
|
overlayContainer.className = 'overlay-dialog';
|
|
document.body.appendChild(overlayContainer);
|
|
}
|
|
|
|
// Create and initialize the overlay dialog component
|
|
if (!this.overlayDialog) {
|
|
const overlayVM = new ViewModel();
|
|
this.overlayDialog = new OverlayDialogComponent(overlayContainer, overlayVM, this.eventBus);
|
|
this.overlayDialog.mount();
|
|
}
|
|
}
|
|
|
|
showConfirmationDialog(options) {
|
|
if (!this.overlayDialog) {
|
|
this.initializeOverlayDialog();
|
|
}
|
|
|
|
this.overlayDialog.show(options);
|
|
}
|
|
|
|
handleFileSelect(event) {
|
|
const file = event.target.files[0];
|
|
this.viewModel.setSelectedFile(file);
|
|
}
|
|
|
|
async handleDeploy() {
|
|
const file = this.viewModel.get('selectedFile');
|
|
const targetNodes = this.viewModel.get('targetNodes');
|
|
|
|
if (!file) {
|
|
this.showConfirmationDialog({
|
|
title: 'No File Selected',
|
|
message: 'Please select a firmware file first.',
|
|
confirmText: 'OK',
|
|
cancelText: null,
|
|
onConfirm: () => {},
|
|
onCancel: null
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!targetNodes || targetNodes.length === 0) {
|
|
this.showConfirmationDialog({
|
|
title: 'No Target Nodes',
|
|
message: 'No target nodes available for firmware update.',
|
|
confirmText: 'OK',
|
|
cancelText: null,
|
|
onConfirm: () => {},
|
|
onCancel: null
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Show confirmation dialog for deployment
|
|
this.showDeploymentConfirmation(file, targetNodes);
|
|
}
|
|
|
|
showDeploymentConfirmation(file, targetNodes) {
|
|
const title = 'Deploy Firmware';
|
|
const message = `Upload firmware "${file.name}" to ${targetNodes.length} node(s)?<br><br>Target nodes:<br>${targetNodes.map(n => `• ${n.hostname || n.ip} (${n.ip})`).join('<br>')}<br><br>This will update the firmware on all selected nodes.`;
|
|
|
|
this.showConfirmationDialog({
|
|
title: title,
|
|
message: message,
|
|
confirmText: 'Deploy',
|
|
cancelText: 'Cancel',
|
|
onConfirm: () => this.performDeployment(file, targetNodes),
|
|
onCancel: () => {}
|
|
});
|
|
}
|
|
|
|
async performDeployment(file, targetNodes) {
|
|
try {
|
|
this.viewModel.startUpload();
|
|
|
|
// Show progress overlay to block UI interactions
|
|
this.showProgressOverlay();
|
|
|
|
// Show upload progress area
|
|
this.showUploadProgress(file, targetNodes);
|
|
|
|
// Start batch upload
|
|
const results = await this.performBatchUpload(file, targetNodes);
|
|
|
|
// NOTE: Don't display results or reset state here!
|
|
// The upload state should remain active until websocket confirms completion
|
|
// Status updates and finalization happen via websocket messages in checkAndFinalizeUploadResults()
|
|
logger.debug('FirmwareUploadComponent: Firmware upload HTTP requests completed, waiting for websocket status updates');
|
|
|
|
} catch (error) {
|
|
logger.error('FirmwareUploadComponent: Firmware deployment failed:', error);
|
|
this.showConfirmationDialog({
|
|
title: 'Deployment Failed',
|
|
message: `Deployment failed: ${error.message}`,
|
|
confirmText: 'OK',
|
|
cancelText: null,
|
|
onConfirm: () => {},
|
|
onCancel: null
|
|
});
|
|
// Only complete upload on error
|
|
this.viewModel.completeUpload();
|
|
this.hideProgressOverlay();
|
|
}
|
|
}
|
|
|
|
async performBatchUpload(file, nodes) {
|
|
const results = [];
|
|
const totalNodes = nodes.length;
|
|
let successfulUploads = 0;
|
|
|
|
// Initialize all nodes as uploading first
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
const node = nodes[i];
|
|
const nodeIp = node.ip;
|
|
this.updateNodeProgress(i + 1, totalNodes, nodeIp, 'Uploading...');
|
|
}
|
|
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
const node = nodes[i];
|
|
const nodeIp = node.ip;
|
|
|
|
try {
|
|
// Upload to this node (HTTP call just initiates the upload)
|
|
const result = await this.performSingleUpload(file, nodeIp);
|
|
|
|
// Don't immediately mark as completed - wait for websocket status
|
|
logger.debug(`FirmwareUploadComponent: Firmware upload initiated for node ${nodeIp}, waiting for completion status via websocket`);
|
|
results.push(result);
|
|
|
|
} catch (error) {
|
|
logger.error(`FirmwareUploadComponent: Failed to upload to node ${nodeIp}:`, error);
|
|
const errorResult = {
|
|
nodeIp: nodeIp,
|
|
hostname: node.hostname || nodeIp,
|
|
success: false,
|
|
error: error.message,
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
results.push(errorResult);
|
|
|
|
// For HTTP errors, we can immediately mark as failed since the upload didn't start
|
|
this.updateNodeProgress(i + 1, totalNodes, nodeIp, 'Failed');
|
|
}
|
|
|
|
// Small delay between uploads
|
|
if (i < nodes.length - 1) {
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
}
|
|
}
|
|
|
|
return results;
|
|
}
|
|
|
|
async performSingleUpload(file, nodeIp) {
|
|
try {
|
|
const result = await window.apiClient.uploadFirmware(file, nodeIp);
|
|
|
|
// IMPORTANT: This HTTP response is just an acknowledgment that the gateway received the file
|
|
// The actual firmware processing happens asynchronously on the device
|
|
// Status updates will come via WebSocket messages, NOT from this HTTP response
|
|
logger.debug(`FirmwareUploadComponent: HTTP acknowledgment received for ${nodeIp}:`, result);
|
|
logger.debug(`FirmwareUploadComponent: This does NOT mean upload is complete - waiting for WebSocket status updates`);
|
|
|
|
return {
|
|
nodeIp: nodeIp,
|
|
hostname: nodeIp,
|
|
httpAcknowledged: true, // Changed from 'success' to make it clear this is just HTTP ack
|
|
result: result,
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
|
|
} catch (error) {
|
|
throw new Error(`Upload to ${nodeIp} failed: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
showUploadProgress(file, nodes) {
|
|
// Update the target nodes section header to show upload progress
|
|
const targetNodesSection = this.findElement('.target-nodes-section');
|
|
if (targetNodesSection) {
|
|
const h3 = targetNodesSection.querySelector('h3');
|
|
if (h3) {
|
|
h3.innerHTML = `
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px; vertical-align: -2px;">
|
|
<path d="M12 16V4"/>
|
|
<path d="M8 8l4-4 4 4"/>
|
|
<path d="M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2"/>
|
|
</svg>
|
|
Firmware Upload Progress (${nodes.length} nodes)
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Add progress info to the firmware-progress-container
|
|
const container = this.findElement('#firmware-progress-container');
|
|
if (container) {
|
|
const progressHTML = `
|
|
<div class="upload-progress-info">
|
|
<div class="overall-progress">
|
|
<div class="progress-bar-container">
|
|
<div class="progress-bar" id="overall-progress-bar" style="width: 0%; background-color: #fbbf24;"></div>
|
|
</div>
|
|
<span class="progress-text">0/${nodes.length} Successful (0%)</span>
|
|
</div>
|
|
<div class="progress-summary" id="progress-summary">
|
|
<span>Status: Upload in progress...</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.innerHTML = progressHTML;
|
|
}
|
|
|
|
// Update existing target nodes to show upload status
|
|
this.updateTargetNodesForUpload(nodes);
|
|
}
|
|
|
|
updateTargetNodesForUpload(nodes) {
|
|
const targetNodesList = this.findElement('.target-nodes-list');
|
|
if (!targetNodesList) return;
|
|
|
|
// Update each target node item to show upload status
|
|
targetNodesList.innerHTML = nodes.map(node => `
|
|
<div class="target-node-item" data-node-ip="${node.ip}">
|
|
<div class="node-info">
|
|
<span class="node-name">${node.hostname || node.ip}</span>
|
|
<span class="node-ip">${node.ip}</span>
|
|
</div>
|
|
<div class="node-status">
|
|
<span class="status-indicator uploading">Uploading...</span>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
updateNodeProgress(current, total, nodeIp, status) {
|
|
const targetNodeItem = this.findElement(`[data-node-ip="${nodeIp}"]`);
|
|
if (targetNodeItem) {
|
|
const statusElement = targetNodeItem.querySelector('.status-indicator');
|
|
|
|
if (statusElement) {
|
|
statusElement.textContent = status;
|
|
|
|
// Update status-specific styling
|
|
statusElement.className = 'status-indicator';
|
|
if (status === 'Completed') {
|
|
statusElement.classList.add('success');
|
|
} else if (status === 'Failed') {
|
|
statusElement.classList.add('error');
|
|
} else if (status === 'Uploading...') {
|
|
statusElement.classList.add('uploading');
|
|
} else if (status === 'Pending...') {
|
|
statusElement.classList.add('pending');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
updateOverallProgress(successfulUploads, totalNodes) {
|
|
const progressBar = this.findElement('#overall-progress-bar');
|
|
const progressText = this.findElement('.progress-text');
|
|
|
|
if (progressBar && progressText) {
|
|
const successPercentage = Math.round((successfulUploads / totalNodes) * 100);
|
|
progressBar.style.width = `${successPercentage}%`;
|
|
progressText.textContent = `${successfulUploads}/${totalNodes} Successful (${successPercentage}%)`;
|
|
|
|
// Update progress bar color based on completion
|
|
if (successPercentage === 100) {
|
|
progressBar.style.backgroundColor = '#4ade80';
|
|
} else if (successPercentage > 50) {
|
|
progressBar.style.backgroundColor = '#60a5fa';
|
|
} else {
|
|
progressBar.style.backgroundColor = '#fbbf24';
|
|
}
|
|
|
|
// NOTE: Don't update progress summary here for single-node uploads
|
|
// The summary should only be updated via websocket status updates
|
|
// This prevents premature "completed successfully" messages
|
|
}
|
|
}
|
|
|
|
displayUploadResults(results) {
|
|
const progressHeader = this.findElement('.progress-header h3');
|
|
const progressSummary = this.findElement('#progress-summary');
|
|
|
|
if (progressHeader && progressSummary) {
|
|
const successCount = results.filter(r => r.success).length;
|
|
const totalCount = results.length;
|
|
const successRate = Math.round((successCount / totalCount) * 100);
|
|
|
|
if (totalCount === 1) {
|
|
// Single node upload
|
|
if (successCount === 1) {
|
|
progressHeader.textContent = `Firmware Upload Complete`;
|
|
progressSummary.innerHTML = `<span>${window.icon('success', { width: 14, height: 14 })} Upload to ${results[0].hostname || results[0].nodeIp} completed successfully at ${new Date().toLocaleTimeString()}</span>`;
|
|
} else {
|
|
progressHeader.textContent = `Firmware Upload Failed`;
|
|
progressSummary.innerHTML = `<span>${window.icon('error', { width: 14, height: 14 })} Upload to ${results[0].hostname || results[0].nodeIp} failed at ${new Date().toLocaleTimeString()}</span>`;
|
|
}
|
|
} else if (successCount === totalCount) {
|
|
// Multi-node upload - all successful
|
|
progressHeader.textContent = `Firmware Upload Complete (${successCount}/${totalCount} Successful)`;
|
|
progressSummary.innerHTML = `<span>${window.icon('success', { width: 14, height: 14 })} All uploads completed successfully at ${new Date().toLocaleTimeString()}</span>`;
|
|
} else {
|
|
// Multi-node upload - some failed
|
|
progressHeader.textContent = `Firmware Upload Results (${successCount}/${totalCount} Successful)`;
|
|
progressSummary.innerHTML = `<span>${window.icon('warning', { width: 14, height: 14 })} Upload completed with ${totalCount - successCount} failure(s) at ${new Date().toLocaleTimeString()}</span>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
updateFileInfo() {
|
|
const file = this.viewModel.get('selectedFile');
|
|
const fileInfo = this.findElement('#file-info');
|
|
|
|
if (file) {
|
|
fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)}KB)`;
|
|
fileInfo.classList.add('has-file');
|
|
} else {
|
|
fileInfo.textContent = 'No file selected';
|
|
fileInfo.classList.remove('has-file');
|
|
}
|
|
|
|
this.updateDeployButton();
|
|
}
|
|
|
|
updateDeployButton() {
|
|
const deployBtn = this.findElement('#deploy-btn');
|
|
if (deployBtn) {
|
|
const file = this.viewModel.get('selectedFile');
|
|
const targetNodes = this.viewModel.get('targetNodes');
|
|
const isUploading = this.viewModel.get('isUploading');
|
|
|
|
deployBtn.disabled = !file || !targetNodes || targetNodes.length === 0 || isUploading;
|
|
}
|
|
}
|
|
|
|
updateUploadState() {
|
|
const isUploading = this.viewModel.get('isUploading');
|
|
const deployBtn = this.findElement('#deploy-btn');
|
|
|
|
if (deployBtn) {
|
|
deployBtn.disabled = isUploading;
|
|
if (isUploading) {
|
|
deployBtn.classList.add('loading');
|
|
// Update button text while keeping the SVG icon
|
|
const iconSvg = deployBtn.querySelector('svg');
|
|
deployBtn.innerHTML = '';
|
|
if (iconSvg) {
|
|
deployBtn.appendChild(iconSvg);
|
|
}
|
|
deployBtn.appendChild(document.createTextNode(' Deploying...'));
|
|
} else {
|
|
deployBtn.classList.remove('loading');
|
|
// Restore original button content with SVG icon
|
|
deployBtn.innerHTML = `
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="margin-right:6px; vertical-align: -2px;">
|
|
<path d="M12 16V4"/>
|
|
<path d="M8 8l4-4 4 4"/>
|
|
<path d="M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2"/>
|
|
</svg>
|
|
Deploy
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
|
|
updateUploadProgress() {
|
|
// This will be implemented when we add upload progress tracking
|
|
}
|
|
|
|
updateUploadResults() {
|
|
// This will be implemented when we add upload results display
|
|
}
|
|
|
|
showProgressOverlay() {
|
|
// Create overlay element that only covers the left side (main content area)
|
|
const overlay = document.createElement('div');
|
|
overlay.id = 'firmware-upload-overlay';
|
|
overlay.className = 'firmware-upload-overlay';
|
|
overlay.innerHTML = `
|
|
<div class="overlay-content">
|
|
<div class="overlay-spinner">
|
|
<svg class="spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
</svg>
|
|
</div>
|
|
<div class="overlay-text">Firmware upload in progress...</div>
|
|
<div class="overlay-subtext">Check the drawer for detailed progress</div>
|
|
</div>
|
|
`;
|
|
|
|
// Add to body
|
|
document.body.appendChild(overlay);
|
|
|
|
// Check if drawer is open and adjust overlay accordingly
|
|
const drawer = document.querySelector('.details-drawer');
|
|
if (drawer && drawer.classList.contains('open')) {
|
|
overlay.classList.add('drawer-open');
|
|
}
|
|
|
|
// Block ESC key during upload
|
|
this.blockEscapeKey();
|
|
|
|
// Block drawer close button during upload
|
|
this.blockDrawerCloseButton();
|
|
|
|
// Block choose file button during upload
|
|
this.blockChooseFileButton();
|
|
|
|
|
|
// Store reference for cleanup
|
|
this.progressOverlay = overlay;
|
|
}
|
|
|
|
blockDrawerCloseButton() {
|
|
// Find the drawer close button
|
|
const closeButton = document.querySelector('.drawer-close');
|
|
if (closeButton) {
|
|
// Store original state
|
|
this.originalCloseButtonDisabled = closeButton.disabled;
|
|
this.originalCloseButtonStyle = closeButton.style.cssText;
|
|
|
|
// Disable the close button
|
|
closeButton.disabled = true;
|
|
closeButton.style.opacity = '0.5';
|
|
closeButton.style.cursor = 'not-allowed';
|
|
closeButton.style.pointerEvents = 'none';
|
|
|
|
// Add visual indicator that it's disabled
|
|
closeButton.title = 'Cannot close during firmware upload';
|
|
}
|
|
}
|
|
|
|
unblockDrawerCloseButton() {
|
|
// Restore the drawer close button
|
|
const closeButton = document.querySelector('.drawer-close');
|
|
if (closeButton) {
|
|
// Restore original state
|
|
closeButton.disabled = this.originalCloseButtonDisabled || false;
|
|
closeButton.style.cssText = this.originalCloseButtonStyle || '';
|
|
closeButton.title = 'Close';
|
|
}
|
|
}
|
|
|
|
blockChooseFileButton() {
|
|
// Find the choose file button
|
|
const chooseFileButton = document.querySelector('.upload-btn-compact');
|
|
if (chooseFileButton) {
|
|
// Store original state
|
|
this.originalChooseFileButtonDisabled = chooseFileButton.disabled;
|
|
this.originalChooseFileButtonStyle = chooseFileButton.style.cssText;
|
|
|
|
// Disable the choose file button
|
|
chooseFileButton.disabled = true;
|
|
chooseFileButton.style.opacity = '0.5';
|
|
chooseFileButton.style.cursor = 'not-allowed';
|
|
chooseFileButton.style.pointerEvents = 'none';
|
|
|
|
// Add visual indicator that it's disabled
|
|
chooseFileButton.title = 'Cannot change file during upload';
|
|
}
|
|
}
|
|
|
|
unblockChooseFileButton() {
|
|
// Restore the choose file button
|
|
const chooseFileButton = document.querySelector('.upload-btn-compact');
|
|
if (chooseFileButton) {
|
|
// Restore original state
|
|
chooseFileButton.disabled = this.originalChooseFileButtonDisabled || false;
|
|
chooseFileButton.style.cssText = this.originalChooseFileButtonStyle || '';
|
|
chooseFileButton.title = 'Choose File';
|
|
}
|
|
}
|
|
|
|
hideTargetNodesSection() {
|
|
// Find the target nodes section
|
|
const targetNodesSection = document.querySelector('.target-nodes-section');
|
|
if (targetNodesSection) {
|
|
// Store original state
|
|
this.originalTargetNodesSectionDisplay = targetNodesSection.style.display;
|
|
|
|
// Hide the target nodes section
|
|
targetNodesSection.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
showTargetNodesSection() {
|
|
// Restore the target nodes section
|
|
const targetNodesSection = document.querySelector('.target-nodes-section');
|
|
if (targetNodesSection) {
|
|
// Restore original state
|
|
targetNodesSection.style.display = this.originalTargetNodesSectionDisplay || '';
|
|
}
|
|
}
|
|
|
|
blockEscapeKey() {
|
|
// Create a keydown event listener that prevents ESC from closing the drawer
|
|
this.escapeKeyHandler = (event) => {
|
|
if (event.key === 'Escape') {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
event.stopImmediatePropagation();
|
|
return false;
|
|
}
|
|
};
|
|
|
|
// Add the event listener with capture=true to intercept before drawer's handler
|
|
document.addEventListener('keydown', this.escapeKeyHandler, true);
|
|
}
|
|
|
|
unblockEscapeKey() {
|
|
// Remove the ESC key blocker
|
|
if (this.escapeKeyHandler) {
|
|
document.removeEventListener('keydown', this.escapeKeyHandler, true);
|
|
this.escapeKeyHandler = null;
|
|
}
|
|
}
|
|
|
|
hideProgressOverlay() {
|
|
if (this.progressOverlay) {
|
|
this.progressOverlay.remove();
|
|
this.progressOverlay = null;
|
|
}
|
|
|
|
// Unblock ESC key
|
|
this.unblockEscapeKey();
|
|
|
|
// Unblock drawer close button
|
|
this.unblockDrawerCloseButton();
|
|
|
|
// Unblock choose file button
|
|
this.unblockChooseFileButton();
|
|
|
|
}
|
|
}
|
|
|
|
window.FirmwareUploadComponent = FirmwareUploadComponent;
|