829 lines
28 KiB
JavaScript
829 lines
28 KiB
JavaScript
const { ipcRenderer } = require('electron');
|
|
const path = require('path');
|
|
|
|
// --- STATE ---
|
|
let currentBundle = null;
|
|
|
|
// --- DOM ELEMENTS ---
|
|
// Views
|
|
const welcomeScreen = document.getElementById('welcome-screen');
|
|
const bundleView = document.getElementById('bundle-view');
|
|
const createBundleForm = document.getElementById('create-bundle-form'); // This will be a modal later
|
|
|
|
// Sidebar buttons
|
|
const openBundleBtn = document.getElementById('open-bundle-btn');
|
|
const createBundleBtn = document.getElementById('create-bundle-btn');
|
|
|
|
// Bundle action buttons
|
|
const signBundleBtn = document.getElementById('sign-bundle-btn');
|
|
const validateBundleBtn = document.getElementById('validate-bundle-btn');
|
|
// Fill button removed - Fill tab is now always visible
|
|
const clearBundleBtn = document.getElementById('clear-bundle-btn');
|
|
const saveMetadataBtn = document.getElementById('save-metadata-btn');
|
|
|
|
// Save options modal elements
|
|
const saveOptionsModal = document.getElementById('save-options-modal');
|
|
const overwriteBundleBtn = document.getElementById('overwrite-bundle-btn');
|
|
const saveAsNewBtn = document.getElementById('save-as-new-btn');
|
|
|
|
// Fill tab elements
|
|
const fillTabLink = document.getElementById('fill-tab-link');
|
|
const loadFillableTargetsBtn = document.getElementById('load-fillable-targets-btn');
|
|
const fillLoading = document.getElementById('fill-loading');
|
|
const fillPluginsTables = document.getElementById('fill-plugins-tables');
|
|
const fillNoTargets = document.getElementById('fill-no-targets');
|
|
const fillTargetsContent = document.getElementById('fill-targets-content');
|
|
const selectAllTargetsBtn = document.getElementById('select-all-targets');
|
|
const deselectAllTargetsBtn = document.getElementById('deselect-all-targets');
|
|
const startFillProcessBtn = document.getElementById('start-fill-process');
|
|
const fillProgressContainer = document.getElementById('fill-progress-container');
|
|
const fillProgressContent = document.getElementById('fill-progress-content');
|
|
|
|
// Bundle display
|
|
const bundleTitle = document.getElementById('bundle-title');
|
|
const manifestDetails = document.getElementById('manifest-details');
|
|
const pluginsList = document.getElementById('plugins-list');
|
|
const validationResults = document.getElementById('validation-results');
|
|
|
|
// Tabs
|
|
const tabLinks = document.querySelectorAll('.tab-link');
|
|
const tabPanes = document.querySelectorAll('.tab-pane');
|
|
const validationTabLink = document.querySelector('button[data-tab="validation-tab"]');
|
|
|
|
// Modal
|
|
const modal = document.getElementById('modal');
|
|
const modalTitle = document.getElementById('modal-title');
|
|
const modalMessage = document.getElementById('modal-message');
|
|
const modalCloseBtn = document.getElementById('modal-close-btn');
|
|
|
|
// Spinner
|
|
const spinner = document.getElementById('spinner');
|
|
|
|
// Fill Modal elements
|
|
const fillModal = document.getElementById('fill-modal');
|
|
const closeFillModalButton = document.querySelector('.close-fill-modal-button');
|
|
const fillModalTitle = document.getElementById('fill-modal-title');
|
|
const fillModalBody = document.getElementById('fill-modal-body');
|
|
const fillTargetsList = document.getElementById('fill-targets-list');
|
|
const startFillButton = document.getElementById('start-fill-button');
|
|
const fillProgressView = document.getElementById('fill-progress-view');
|
|
const fillProgressList = document.getElementById('fill-progress-list');
|
|
|
|
let currentBundlePath = null;
|
|
let hasUnsavedChanges = false;
|
|
let originalMetadata = {};
|
|
|
|
// --- INITIALIZATION ---
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
// Set initial view
|
|
showView('welcome-screen');
|
|
|
|
// Set initial theme
|
|
const isDarkMode = await ipcRenderer.invoke('get-dark-mode');
|
|
document.body.classList.toggle('dark-mode', isDarkMode);
|
|
|
|
// Setup event listeners
|
|
setupEventListeners();
|
|
});
|
|
|
|
// --- EVENT LISTENERS ---
|
|
function setupEventListeners() {
|
|
// Theme updates
|
|
ipcRenderer.on('theme-updated', (event, { shouldUseDarkColors }) => {
|
|
document.body.classList.toggle('dark-mode', shouldUseDarkColors);
|
|
});
|
|
|
|
// Sidebar navigation
|
|
openBundleBtn.addEventListener('click', handleOpenBundle);
|
|
createBundleBtn.addEventListener('click', () => {
|
|
// TODO: Replace with modal
|
|
showView('create-bundle-form');
|
|
showModal('Not Implemented', 'The create bundle form will be moved to a modal dialog.');
|
|
});
|
|
|
|
// Tab navigation
|
|
tabLinks.forEach(link => {
|
|
link.addEventListener('click', () => switchTab(link.dataset.tab));
|
|
});
|
|
|
|
// Modal close button
|
|
modalCloseBtn.addEventListener('click', hideModal);
|
|
|
|
// Bundle actions
|
|
signBundleBtn.addEventListener('click', handleSignBundle);
|
|
validateBundleBtn.addEventListener('click', handleValidateBundle);
|
|
clearBundleBtn.addEventListener('click', handleClearBundle);
|
|
saveMetadataBtn.addEventListener('click', showSaveOptionsModal);
|
|
overwriteBundleBtn.addEventListener('click', () => handleSaveMetadata(false));
|
|
saveAsNewBtn.addEventListener('click', () => handleSaveMetadata(true));
|
|
|
|
// Load fillable targets button
|
|
loadFillableTargetsBtn.addEventListener('click', async () => {
|
|
await loadFillableTargets();
|
|
});
|
|
// Load fillable targets for the Fill tab
|
|
async function loadFillableTargets() {
|
|
console.log('loadFillableTargets called, currentBundlePath:', currentBundlePath);
|
|
|
|
// Check if required DOM elements exist
|
|
if (!fillNoTargets || !fillTargetsContent || !fillLoading) {
|
|
console.error('Fill tab DOM elements not found');
|
|
showModal('Error', 'Fill tab interface not properly initialized.');
|
|
return;
|
|
}
|
|
|
|
if (!currentBundlePath) {
|
|
console.log('No bundle path, showing no targets message');
|
|
hideAllFillStates();
|
|
fillNoTargets.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Show loading state
|
|
hideAllFillStates();
|
|
fillLoading.classList.remove('hidden');
|
|
loadFillableTargetsBtn.disabled = true;
|
|
|
|
console.log('Calling get-fillable-targets...');
|
|
const result = await ipcRenderer.invoke('get-fillable-targets', currentBundlePath);
|
|
console.log('get-fillable-targets result:', result);
|
|
|
|
if (!result.success) {
|
|
console.log('get-fillable-targets failed:', result.error);
|
|
hideAllFillStates();
|
|
showModal('Error', `Failed to load fillable targets: ${result.error}`);
|
|
return;
|
|
}
|
|
|
|
const targets = result.data;
|
|
console.log('Fillable targets:', targets);
|
|
|
|
hideAllFillStates();
|
|
|
|
if (!targets || Object.keys(targets).length === 0) {
|
|
console.log('No fillable targets found');
|
|
fillNoTargets.classList.remove('hidden');
|
|
} else {
|
|
console.log('Populating fillable targets table');
|
|
fillTargetsContent.classList.remove('hidden');
|
|
populateFillTargetsTable(targets);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error in loadFillableTargets:', error);
|
|
hideAllFillStates();
|
|
showModal('Error', `Error loading fillable targets: ${error.message}`);
|
|
} finally {
|
|
loadFillableTargetsBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
// Helper function to hide all fill tab states
|
|
function hideAllFillStates() {
|
|
fillLoading.classList.add('hidden');
|
|
fillNoTargets.classList.add('hidden');
|
|
fillTargetsContent.classList.add('hidden');
|
|
}
|
|
|
|
// Old modal code removed - now using tab-based interface
|
|
|
|
// Create modern table-based interface for fillable targets
|
|
function populateFillTargetsTable(plugins) {
|
|
fillPluginsTables.innerHTML = '';
|
|
|
|
for (const [pluginName, targets] of Object.entries(plugins)) {
|
|
if (targets.length > 0) {
|
|
// Create plugin table container
|
|
const pluginTable = document.createElement('div');
|
|
pluginTable.className = 'fill-plugin-table';
|
|
|
|
// Plugin header
|
|
const pluginHeader = document.createElement('div');
|
|
pluginHeader.className = 'fill-plugin-header';
|
|
pluginHeader.textContent = `${pluginName} (${targets.length} target${targets.length > 1 ? 's' : ''})`;
|
|
pluginTable.appendChild(pluginHeader);
|
|
|
|
// Create table
|
|
const table = document.createElement('table');
|
|
table.className = 'fill-targets-table';
|
|
|
|
// Table header
|
|
const thead = document.createElement('thead');
|
|
thead.innerHTML = `
|
|
<tr>
|
|
<th style="width: 50px;">
|
|
<input type="checkbox" class="plugin-select-all" data-plugin="${pluginName}" checked>
|
|
</th>
|
|
<th>Target Platform</th>
|
|
<th>Architecture</th>
|
|
<th>Type</th>
|
|
<th>Compiler</th>
|
|
</tr>
|
|
`;
|
|
table.appendChild(thead);
|
|
|
|
// Table body
|
|
const tbody = document.createElement('tbody');
|
|
targets.forEach(target => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>
|
|
<input type="checkbox" class="fill-target-checkbox"
|
|
data-plugin="${pluginName}"
|
|
data-target='${JSON.stringify(target)}'
|
|
checked>
|
|
</td>
|
|
<td><strong>${target.triplet}</strong></td>
|
|
<td>${target.arch}</td>
|
|
<td><span class="target-type ${target.type}">${target.type}</span></td>
|
|
<td>${target.details?.compiler || 'N/A'} ${target.details?.compiler_version || ''}</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
table.appendChild(tbody);
|
|
|
|
pluginTable.appendChild(table);
|
|
fillPluginsTables.appendChild(pluginTable);
|
|
}
|
|
}
|
|
|
|
// Add event listeners for select all functionality
|
|
setupFillTargetEventListeners();
|
|
}
|
|
|
|
// Setup event listeners for Fill tab functionality
|
|
function setupFillTargetEventListeners() {
|
|
// Plugin-level select all checkboxes
|
|
document.querySelectorAll('.plugin-select-all').forEach(checkbox => {
|
|
checkbox.addEventListener('change', (e) => {
|
|
const pluginName = e.target.dataset.plugin;
|
|
const pluginCheckboxes = document.querySelectorAll(`.fill-target-checkbox[data-plugin="${pluginName}"]`);
|
|
pluginCheckboxes.forEach(cb => cb.checked = e.target.checked);
|
|
});
|
|
});
|
|
|
|
// Global select/deselect all buttons
|
|
selectAllTargetsBtn.addEventListener('click', () => {
|
|
document.querySelectorAll('.fill-target-checkbox, .plugin-select-all').forEach(cb => cb.checked = true);
|
|
});
|
|
|
|
deselectAllTargetsBtn.addEventListener('click', () => {
|
|
document.querySelectorAll('.fill-target-checkbox, .plugin-select-all').forEach(cb => cb.checked = false);
|
|
});
|
|
|
|
// Start fill process button
|
|
startFillProcessBtn.addEventListener('click', async () => {
|
|
const selectedTargets = {};
|
|
const checkboxes = document.querySelectorAll('.fill-target-checkbox:checked');
|
|
|
|
if (checkboxes.length === 0) {
|
|
showModal('Info', 'No targets selected to fill.');
|
|
return;
|
|
}
|
|
|
|
checkboxes.forEach(cb => {
|
|
const pluginName = cb.dataset.plugin;
|
|
const target = JSON.parse(cb.dataset.target);
|
|
if (!selectedTargets[pluginName]) {
|
|
selectedTargets[pluginName] = [];
|
|
}
|
|
selectedTargets[pluginName].push(target);
|
|
});
|
|
|
|
// Hide target selection and show progress
|
|
fillTargetsContent.classList.add('hidden');
|
|
fillProgressContainer.classList.remove('hidden');
|
|
populateFillProgress(selectedTargets);
|
|
|
|
const result = await ipcRenderer.invoke('fill-bundle', {
|
|
bundlePath: currentBundlePath,
|
|
targetsToBuild: selectedTargets
|
|
});
|
|
|
|
if (!result.success) {
|
|
const errorItem = document.createElement('div');
|
|
errorItem.className = 'progress-item';
|
|
errorItem.innerHTML = `
|
|
<span class="progress-status failure">Error</span>
|
|
<span>Fill process failed: ${result.error}</span>
|
|
`;
|
|
fillProgressContent.appendChild(errorItem);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Create progress display for fill process
|
|
function populateFillProgress(selectedTargets) {
|
|
fillProgressContent.innerHTML = '';
|
|
|
|
for (const [pluginName, targets] of Object.entries(selectedTargets)) {
|
|
targets.forEach(target => {
|
|
const progressItem = document.createElement('div');
|
|
progressItem.className = 'progress-item';
|
|
progressItem.id = `progress-${pluginName}-${target.triplet}`;
|
|
progressItem.innerHTML = `
|
|
<span class="progress-status building">Building</span>
|
|
<span>${pluginName} - ${target.triplet}</span>
|
|
`;
|
|
fillProgressContent.appendChild(progressItem);
|
|
});
|
|
}
|
|
}
|
|
|
|
// Handle progress updates from backend
|
|
ipcRenderer.on('fill-bundle-progress', (event, progress) => {
|
|
if (typeof progress === 'object' && progress.status) {
|
|
const { status, plugin, target } = progress;
|
|
const progressItem = document.getElementById(`progress-${plugin}-${target}`);
|
|
if (progressItem) {
|
|
const statusSpan = progressItem.querySelector('.progress-status');
|
|
statusSpan.className = `progress-status ${status}`;
|
|
statusSpan.textContent = status.charAt(0).toUpperCase() + status.slice(1);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- VIEW AND UI LOGIC ---
|
|
function showView(viewId) {
|
|
[welcomeScreen, bundleView, createBundleForm].forEach(view => {
|
|
view.classList.toggle('hidden', view.id !== viewId);
|
|
});
|
|
}
|
|
|
|
function switchTab(tabId) {
|
|
tabPanes.forEach(pane => {
|
|
pane.classList.toggle('active', pane.id === tabId);
|
|
});
|
|
tabLinks.forEach(link => {
|
|
link.classList.toggle('active', link.dataset.tab === tabId);
|
|
});
|
|
}
|
|
|
|
function showSpinner() {
|
|
spinner.classList.remove('hidden');
|
|
}
|
|
|
|
function hideSpinner() {
|
|
spinner.classList.add('hidden');
|
|
}
|
|
|
|
function showModal(title, message, type = 'info') {
|
|
modalTitle.textContent = title;
|
|
modalMessage.innerHTML = message; // Use innerHTML to allow for formatted messages
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
function hideModal() {
|
|
modal.classList.add('hidden');
|
|
}
|
|
|
|
// --- BUNDLE ACTIONS HANDLERS ---
|
|
async function handleOpenBundle() {
|
|
const bundlePath = await ipcRenderer.invoke('select-file');
|
|
if (!bundlePath) return;
|
|
|
|
showSpinner();
|
|
showModal('Opening...', `Opening bundle: ${path.basename(bundlePath)}`);
|
|
const result = await ipcRenderer.invoke('open-bundle', bundlePath);
|
|
hideSpinner();
|
|
|
|
if (result.success) {
|
|
currentBundle = result;
|
|
currentBundlePath = bundlePath;
|
|
displayBundleInfo(result.report);
|
|
showView('bundle-view');
|
|
hideModal();
|
|
} else {
|
|
showModal('Error Opening Bundle', `Failed to open bundle: ${result ? result.error : 'Unknown error'}`);
|
|
}
|
|
}
|
|
|
|
async function handleSignBundle() {
|
|
if (!currentBundlePath) return;
|
|
|
|
showSpinner();
|
|
const signResult = await ipcRenderer.invoke('sign-bundle', currentBundlePath);
|
|
hideSpinner();
|
|
|
|
if (signResult.success) {
|
|
showModal('Success', 'Bundle signed successfully. Reloading...');
|
|
await reloadCurrentBundle();
|
|
hideModal();
|
|
} else {
|
|
showModal('Sign Error', `Failed to sign bundle: ${signResult.error}`);
|
|
}
|
|
}
|
|
|
|
async function handleValidateBundle() {
|
|
if (!currentBundlePath) return;
|
|
|
|
showSpinner();
|
|
const result = await ipcRenderer.invoke('validate-bundle', currentBundlePath);
|
|
hideSpinner();
|
|
|
|
if (result.success) {
|
|
// With the new JSON architecture, validation data is directly in result
|
|
const errors = result.errors || [];
|
|
const warnings = result.warnings || [];
|
|
const validationIssues = errors.concat(warnings);
|
|
|
|
if (validationIssues.length > 0) {
|
|
validationResults.textContent = validationIssues.join('\n');
|
|
validationTabLink.classList.remove('hidden');
|
|
} else {
|
|
validationResults.textContent = 'Bundle is valid.';
|
|
validationTabLink.classList.add('hidden');
|
|
}
|
|
|
|
// Switch to the validation tab to show the results
|
|
switchTab('validation-tab');
|
|
|
|
// Show summary in modal
|
|
const summary = result.summary || { errors: errors.length, warnings: warnings.length };
|
|
const message = `Validation finished with ${summary.errors} errors and ${summary.warnings} warnings.`;
|
|
showModal('Validation Complete', message);
|
|
|
|
} else {
|
|
showModal('Validation Error', `Failed to validate bundle: ${result.error}`);
|
|
}
|
|
}
|
|
|
|
async function handleClearBundle() {
|
|
if (!currentBundlePath) return;
|
|
|
|
showSpinner();
|
|
const result = await ipcRenderer.invoke('clear-bundle', currentBundlePath);
|
|
hideSpinner();
|
|
|
|
if (result.success) {
|
|
showModal('Success', 'All binaries have been cleared. Reloading...');
|
|
await reloadCurrentBundle();
|
|
hideModal();
|
|
} else {
|
|
showModal('Clear Error', `Failed to clear binaries: ${result.error}`);
|
|
}
|
|
}
|
|
|
|
async function handleFillBundle() {
|
|
if (!currentBundle) return showModal('Action Canceled', 'Please open a bundle first.');
|
|
|
|
showSpinner();
|
|
showModal('Filling Bundle...', 'Adding local binaries to bundle.');
|
|
const result = await ipcRenderer.invoke('fill-bundle', currentBundle.bundlePath);
|
|
hideSpinner();
|
|
|
|
if (result.success) {
|
|
showModal('Success', 'Binaries filled successfully. Reloading...');
|
|
await reloadCurrentBundle();
|
|
hideModal();
|
|
} else {
|
|
showModal('Fill Error', `Failed to fill bundle: ${result.error}`);
|
|
}
|
|
}
|
|
|
|
// --- DATA DISPLAY ---
|
|
async function reloadCurrentBundle() {
|
|
if (!currentBundle) return;
|
|
const reloadResult = await ipcRenderer.invoke('open-bundle', currentBundle.bundlePath);
|
|
if (reloadResult.success) {
|
|
currentBundle = reloadResult;
|
|
displayBundleInfo(reloadResult.report);
|
|
} else {
|
|
showModal('Reload Error', `Failed to reload bundle details: ${reloadResult.error}`);
|
|
}
|
|
}
|
|
|
|
function displayBundleInfo(report) {
|
|
if (!report) {
|
|
showModal('Display Error', 'Could not load bundle information.');
|
|
return;
|
|
}
|
|
|
|
const { manifest, signature, validation, plugins } = report;
|
|
|
|
// Store original metadata for comparison
|
|
originalMetadata = {
|
|
bundleVersion: manifest.bundleVersion || '',
|
|
bundleAuthor: manifest.bundleAuthor || '',
|
|
bundleComment: manifest.bundleComment || ''
|
|
};
|
|
hasUnsavedChanges = false;
|
|
updateSaveButtonVisibility();
|
|
|
|
// Set bundle title
|
|
bundleTitle.textContent = manifest.bundleName || 'Untitled Bundle';
|
|
|
|
// --- Overview Tab ---
|
|
const trustStatus = signature.status || 'UNSIGNED';
|
|
const trustColorClass = {
|
|
'TRUSTED': 'trusted',
|
|
'UNTRUSTED': 'untrusted',
|
|
'INVALID': 'untrusted',
|
|
'TAMPERED': 'untrusted',
|
|
'UNSIGNED': 'unsigned',
|
|
'ERROR': 'untrusted',
|
|
'UNSUPPORTED': 'warning'
|
|
}[trustStatus] || 'unsigned';
|
|
|
|
manifestDetails.innerHTML = `
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Trust Status</h3>
|
|
<div class="trust-indicator-container">
|
|
<div class="trust-indicator ${trustColorClass}"></div>
|
|
<span>${trustStatus}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header"><h3>Manifest Details</h3></div>
|
|
<div class="card-content">
|
|
${createEditableField('Version', 'bundleVersion', manifest.bundleVersion || 'N/A')}
|
|
${createEditableField('Author', 'bundleAuthor', manifest.bundleAuthor || 'N/A')}
|
|
<p><strong>Bundled On:</strong> ${manifest.bundledOn || 'N/A'}</p>
|
|
${createEditableField('Comment', 'bundleComment', manifest.bundleComment || 'N/A')}
|
|
${manifest.bundleAuthorKeyFingerprint ? `<p><strong>Author Key:</strong> ${manifest.bundleAuthorKeyFingerprint}</p>` : ''}
|
|
${manifest.bundleSignature ? `<p><strong>Signature:</strong> <span class="signature">${manifest.bundleSignature}</span></p>` : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Add event listeners for edit functionality
|
|
setupEditableFieldListeners();
|
|
|
|
// --- Plugins Tab ---
|
|
pluginsList.innerHTML = '';
|
|
if (plugins && Object.keys(plugins).length > 0) {
|
|
Object.entries(plugins).forEach(([pluginName, pluginData]) => {
|
|
const binariesInfo = pluginData.binaries.map(b => {
|
|
const compatClass = b.is_compatible ? 'compatible' : 'incompatible';
|
|
const compatText = b.is_compatible ? 'Compatible' : 'Incompatible';
|
|
const platformTriplet = b.platform && b.platform.triplet ? `(${b.platform.triplet})` : '';
|
|
return `<li class="binary-info ${compatClass}"><strong>${b.path}</strong> ${platformTriplet} - ${compatText}</li>`;
|
|
}).join('');
|
|
|
|
const pluginCard = document.createElement('div');
|
|
pluginCard.className = 'card';
|
|
pluginCard.innerHTML = `
|
|
<div class="card-header"><h4>${pluginName}</h4></div>
|
|
<div class="card-content">
|
|
<p><strong>Source:</strong> ${pluginData.sdist_path}</p>
|
|
<p><strong>Binaries:</strong></p>
|
|
<ul>${binariesInfo.length > 0 ? binariesInfo : '<li>No binaries found.</li>'}</ul>
|
|
</div>
|
|
`;
|
|
pluginsList.appendChild(pluginCard);
|
|
});
|
|
} else {
|
|
pluginsList.innerHTML = '<div class="card"><div class="card-content"><p>No plugins found in this bundle.</p></div></div>';
|
|
}
|
|
|
|
// --- Validation Tab ---
|
|
const validationIssues = validation.errors.concat(validation.warnings);
|
|
if (validationIssues.length > 0) {
|
|
validationResults.textContent = validationIssues.join('\n');
|
|
validationTabLink.classList.remove('hidden');
|
|
} else {
|
|
validationResults.textContent = 'Bundle is valid.';
|
|
validationTabLink.classList.add('hidden');
|
|
}
|
|
|
|
// Temporarily disabled to fix bundle opening hang
|
|
// TODO: Re-enable after debugging fillable targets functionality
|
|
// loadFillableTargets().catch(error => {
|
|
// console.error('Failed to load fillable targets:', error);
|
|
// // Don't block bundle opening if fill targets fail to load
|
|
// });
|
|
|
|
// Reset to overview tab by default
|
|
switchTab('overview-tab');
|
|
}
|
|
|
|
// Helper function to create editable fields with pencil icons
|
|
function createEditableField(label, fieldName, value) {
|
|
const displayValue = value === 'N/A' ? '' : value;
|
|
return `
|
|
<p class="editable-field">
|
|
<strong>${label}:</strong>
|
|
<span class="field-display" data-field="${fieldName}">${value}</span>
|
|
<span class="field-edit hidden" data-field="${fieldName}">
|
|
<input type="text" class="field-input" data-field="${fieldName}" value="${displayValue}">
|
|
</span>
|
|
<button class="edit-icon" data-field="${fieldName}" title="Edit ${label}">✏️</button>
|
|
</p>
|
|
`;
|
|
}
|
|
|
|
// Setup event listeners for editable fields
|
|
function setupEditableFieldListeners() {
|
|
const editIcons = document.querySelectorAll('.edit-icon');
|
|
const fieldInputs = document.querySelectorAll('.field-input');
|
|
|
|
editIcons.forEach(icon => {
|
|
icon.addEventListener('click', (e) => {
|
|
const fieldName = e.target.dataset.field;
|
|
toggleFieldEdit(fieldName, true);
|
|
});
|
|
});
|
|
|
|
fieldInputs.forEach(input => {
|
|
input.addEventListener('blur', (e) => {
|
|
const fieldName = e.target.dataset.field;
|
|
saveFieldEdit(fieldName);
|
|
});
|
|
|
|
input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') {
|
|
const fieldName = e.target.dataset.field;
|
|
saveFieldEdit(fieldName);
|
|
} else if (e.key === 'Escape') {
|
|
const fieldName = e.target.dataset.field;
|
|
cancelFieldEdit(fieldName);
|
|
}
|
|
});
|
|
|
|
input.addEventListener('input', () => {
|
|
checkForChanges();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Toggle between display and edit mode for a field
|
|
function toggleFieldEdit(fieldName, editMode) {
|
|
const displaySpan = document.querySelector(`.field-display[data-field="${fieldName}"]`);
|
|
const editSpan = document.querySelector(`.field-edit[data-field="${fieldName}"]`);
|
|
const input = document.querySelector(`.field-input[data-field="${fieldName}"]`);
|
|
const icon = document.querySelector(`.edit-icon[data-field="${fieldName}"]`);
|
|
|
|
if (editMode) {
|
|
displaySpan.classList.add('hidden');
|
|
editSpan.classList.remove('hidden');
|
|
icon.textContent = '✅';
|
|
icon.title = 'Save';
|
|
input.focus();
|
|
input.select();
|
|
} else {
|
|
displaySpan.classList.remove('hidden');
|
|
editSpan.classList.add('hidden');
|
|
icon.textContent = '✏️';
|
|
icon.title = `Edit ${fieldName}`;
|
|
}
|
|
}
|
|
|
|
// Save field edit and update display
|
|
function saveFieldEdit(fieldName) {
|
|
const input = document.querySelector(`.field-input[data-field="${fieldName}"]`);
|
|
const displaySpan = document.querySelector(`.field-display[data-field="${fieldName}"]`);
|
|
|
|
const newValue = input.value.trim();
|
|
const displayValue = newValue || 'N/A';
|
|
|
|
displaySpan.textContent = displayValue;
|
|
toggleFieldEdit(fieldName, false);
|
|
checkForChanges();
|
|
}
|
|
|
|
// Cancel field edit and restore original value
|
|
function cancelFieldEdit(fieldName) {
|
|
const input = document.querySelector(`.field-input[data-field="${fieldName}"]`);
|
|
const originalValue = originalMetadata[fieldName] || '';
|
|
|
|
input.value = originalValue;
|
|
toggleFieldEdit(fieldName, false);
|
|
}
|
|
|
|
// Check if any fields have been modified
|
|
function checkForChanges() {
|
|
const inputs = document.querySelectorAll('.field-input');
|
|
let hasChanges = false;
|
|
|
|
inputs.forEach(input => {
|
|
const fieldName = input.dataset.field;
|
|
const currentValue = input.value.trim();
|
|
const originalValue = originalMetadata[fieldName] || '';
|
|
|
|
if (currentValue !== originalValue) {
|
|
hasChanges = true;
|
|
}
|
|
});
|
|
|
|
hasUnsavedChanges = hasChanges;
|
|
updateSaveButtonVisibility();
|
|
}
|
|
|
|
// Show/hide save button based on changes
|
|
function updateSaveButtonVisibility() {
|
|
if (hasUnsavedChanges) {
|
|
saveMetadataBtn.classList.remove('hidden');
|
|
} else {
|
|
saveMetadataBtn.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Show save options modal
|
|
function showSaveOptionsModal() {
|
|
if (!currentBundlePath || !hasUnsavedChanges) return;
|
|
saveOptionsModal.classList.remove('hidden');
|
|
}
|
|
|
|
// Hide save options modal
|
|
function hideSaveOptionsModal() {
|
|
saveOptionsModal.classList.add('hidden');
|
|
}
|
|
|
|
// Handle save metadata with option for save as new
|
|
async function handleSaveMetadata(saveAsNew = false) {
|
|
if (!currentBundlePath || !hasUnsavedChanges) return;
|
|
|
|
// Hide the modal first
|
|
hideSaveOptionsModal();
|
|
|
|
const inputs = document.querySelectorAll('.field-input');
|
|
const updatedMetadata = {};
|
|
|
|
inputs.forEach(input => {
|
|
const fieldName = input.dataset.field;
|
|
const value = input.value.trim();
|
|
if (value !== originalMetadata[fieldName]) {
|
|
// Convert camelCase to snake_case for backend
|
|
const backendFieldName = fieldName.replace(/([A-Z])/g, '_$1').toLowerCase();
|
|
updatedMetadata[backendFieldName] = value;
|
|
}
|
|
});
|
|
|
|
if (Object.keys(updatedMetadata).length === 0) {
|
|
hasUnsavedChanges = false;
|
|
updateSaveButtonVisibility();
|
|
return;
|
|
}
|
|
|
|
let targetPath = currentBundlePath;
|
|
|
|
if (saveAsNew) {
|
|
// Show file save dialog for new bundle
|
|
const result = await ipcRenderer.invoke('show-save-dialog', {
|
|
defaultPath: currentBundlePath.replace('.fbundle', '_edited.fbundle'),
|
|
filters: [{ name: 'Bundle Files', extensions: ['fbundle'] }]
|
|
});
|
|
|
|
if (result.canceled) {
|
|
return; // User canceled the save dialog
|
|
}
|
|
|
|
targetPath = result.filePath;
|
|
|
|
// Copy the original bundle to the new location first
|
|
try {
|
|
await ipcRenderer.invoke('copy-file', {
|
|
source: currentBundlePath,
|
|
destination: targetPath
|
|
});
|
|
} catch (error) {
|
|
showModal('Copy Error', `Failed to copy bundle: ${error.message}`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
showSpinner();
|
|
const result = await ipcRenderer.invoke('edit-bundle', {
|
|
bundlePath: targetPath,
|
|
updatedManifest: updatedMetadata
|
|
});
|
|
hideSpinner();
|
|
|
|
if (result.success) {
|
|
// Update original metadata to reflect saved changes
|
|
Object.keys(updatedMetadata).forEach(backendKey => {
|
|
const frontendKey = backendKey.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
|
|
originalMetadata[frontendKey] = updatedMetadata[backendKey];
|
|
});
|
|
|
|
hasUnsavedChanges = false;
|
|
updateSaveButtonVisibility();
|
|
|
|
if (saveAsNew) {
|
|
showModal('Success', `New bundle created successfully at: ${targetPath}`);
|
|
// Open the new bundle
|
|
currentBundlePath = targetPath;
|
|
await reloadCurrentBundle();
|
|
} else {
|
|
showModal('Success', 'Metadata updated successfully!');
|
|
// Reload current bundle to reflect changes
|
|
await reloadCurrentBundle();
|
|
}
|
|
} else {
|
|
showModal('Save Error', `Failed to save metadata: ${result.error}`);
|
|
}
|
|
}
|
|
|
|
// Helper function to reload current bundle
|
|
async function reloadCurrentBundle() {
|
|
if (!currentBundlePath) return;
|
|
|
|
const result = await ipcRenderer.invoke('open-bundle', currentBundlePath);
|
|
if (result.success) {
|
|
displayBundleInfo(result.report);
|
|
}
|
|
}
|