/**
* 命令对话框模块，处理添加和编辑命令功能
* @type {module}
*/
import { XmlUtils } from './xml-utils.js';
export class CommandDialog {
/**
* 显示添加命令对话框
* @param {HTMLElement} parentElement - 父元素，用于挂载对话框
* @param {Element} commandListElement - XML 命令列表元素
* @param {Document} xmlDoc - XML文档
* @param {Function} onSuccess - 成功回调函数
*/
static showAddDialog(parentElement, commandListElement, xmlDoc, onSuccess) {
// 创建模态框
const modal = document.createElement('div');
modal.className = 'modal';
modal.id = 'addCommandModal';
modal.innerHTML = `
`;
// 添加到父元素
parentElement.appendChild(modal);
// 事件处理
const closeBtn = modal.querySelector('.close');
const cancelBtn = modal.querySelector('#cancelAddCommand');
const confirmBtn = modal.querySelector('#confirmAddCommand');
const nameInput = modal.querySelector('#commandName');
const callInput = modal.querySelector('#commandCall');
const descInput = modal.querySelector('#commandDescription');
const closeModal = () => {
if (parentElement.contains(modal)) {
parentElement.removeChild(modal);
}
};
closeBtn.addEventListener('click', closeModal);
cancelBtn.addEventListener('click', closeModal);
confirmBtn.addEventListener('click', () => {
const name = nameInput.value.trim();
const call = callInput.value.trim();
const description = descInput.value.trim();
if (!name) {
alert('指令名称不能为空');
return;
}
try {
// 创建新命令元素
const newCommand = xmlDoc.createElement('Command');
newCommand.setAttribute('Name', name);
newCommand.setAttribute('Call', call);
newCommand.setAttribute('Description', description || `${name}描述`);
// 添加到命令列表
commandListElement.appendChild(newCommand);
// 调用成功回调
if (onSuccess) {
onSuccess();
}
closeModal();
} catch (error) {
console.error('添加指令失败:', error);
alert('添加指令失败: ' + error.message);
}
});
// 点击模态窗口外部关闭
modal.addEventListener('click', (event) => {
if (event.target === modal) {
closeModal();
}
});
}
/**
* 显示编辑命令对话框
* @param {HTMLElement} parentElement - 父元素，用于挂载对话框
* @param {Element} commandElement - 要编辑的命令元素
* @param {number} index - 命令索引
* @param {Function} onSuccess - 成功回调函数
*/
static showEditDialog(parentElement, commandElement, index, onSuccess) {
// 获取当前命令属性
const name = commandElement.getAttribute('Name') || '';
const call = commandElement.getAttribute('Call') || '';
const description = commandElement.getAttribute('Description') || '';
// 创建模态框
const modal = document.createElement('div');
modal.className = 'modal';
modal.id = 'editCommandModal';
modal.innerHTML = `
`;
// 添加到父元素
parentElement.appendChild(modal);
// 事件处理
const closeBtn = modal.querySelector('.close');
const cancelBtn = modal.querySelector('#cancelEditCommand');
const confirmBtn = modal.querySelector('#confirmEditCommand');
const nameInput = modal.querySelector('#commandName');
const callInput = modal.querySelector('#commandCall');
const descInput = modal.querySelector('#commandDescription');
const closeModal = () => {
if (parentElement.contains(modal)) {
parentElement.removeChild(modal);
}
};
closeBtn.addEventListener('click', closeModal);
cancelBtn.addEventListener('click', closeModal);
confirmBtn.addEventListener('click', () => {
const newName = nameInput.value.trim();
const newCall = callInput.value.trim();
const newDescription = descInput.value.trim();
if (!newName) {
alert('指令名称不能为空');
return;
}
try {
// 更新命令属性
commandElement.setAttribute('Name', newName);
commandElement.setAttribute('Call', newCall);
commandElement.setAttribute('Description', newDescription || `${newName}描述`);
// 调用成功回调
if (onSuccess) {
onSuccess();
}
closeModal();
} catch (error) {
console.error('编辑指令失败:', error);
alert('编辑指令失败: ' + error.message);
}
});
// 点击模态窗口外部关闭
modal.addEventListener('click', (event) => {
if (event.target === modal) {
closeModal();
}
});
}
/**
* 显示新建配置对话框
* @param {Function} onConfirm - 确认回调函数，参数为文件名
*/
static showNewConfigDialog(onConfirm) {
// 创建模态框
const modal = document.createElement('div');
modal.className = 'modal';
modal.id = 'newConfigModal';
modal.innerHTML = `
`;
document.body.appendChild(modal);
const closeBtn = modal.querySelector('.close');
const cancelBtn = modal.querySelector('#cancelBtn');
const confirmBtn = modal.querySelector('#confirmBtn');
const fileNameInput = modal.querySelector('#newFileName');
const closeModal = () => {
document.body.removeChild(modal);
};
closeBtn.addEventListener('click', closeModal);
cancelBtn.addEventListener('click', closeModal);
confirmBtn.addEventListener('click', async () => {
let fileName = fileNameInput.value.trim();
if (!fileName) {
alert('请输入文件名');
return;
}
// 确保文件名以.scfg结尾
if (!fileName.toLowerCase().endsWith('.scfg')) {
fileName += '.scfg';
}
closeModal();
// 调用确认回调
if (onConfirm) {
onConfirm(fileName);
}
});
// 处理回车键
fileNameInput.addEventListener('keyup', (e) => {
if (e.key === 'Enter') {
confirmBtn.click();
}
});
// 打开后聚焦输入框
setTimeout(() => {
fileNameInput.focus();
}, 100);
}
/**
* 显示另存为对话框
* @param {string} currentFileName - 当前文件名
* @param {Function} onConfirm - 确认回调函数，参数为文件名
*/
static showSaveAsDialog(currentFileName, onConfirm) {
// 创建模态框
const modal = document.createElement('div');
modal.className = 'modal';
modal.id = 'saveAsModal';
modal.innerHTML = `
`;
document.body.appendChild(modal);
const closeBtn = modal.querySelector('.close');
const cancelBtn = modal.querySelector('#cancelBtn');
const confirmBtn = modal.querySelector('#confirmBtn');
const fileNameInput = modal.querySelector('#saveAsFileName');
// 填充当前文件名
if (currentFileName) {
const fileName = currentFileName.split('/').pop();
fileNameInput.value = fileName;
}
const closeModal = () => {
document.body.removeChild(modal);
};
closeBtn.addEventListener('click', closeModal);
cancelBtn.addEventListener('click', closeModal);
confirmBtn.addEventListener('click', () => {
let fileName = fileNameInput.value.trim();
if (!fileName) {
alert('请输入文件名');
return;
}
// 确保文件名以.scfg结尾
if (!fileName.toLowerCase().endsWith('.scfg')) {
fileName += '.scfg';
}
closeModal();
// 调用确认回调
if (onConfirm) {
onConfirm(fileName);
}
});
// 处理回车键
fileNameInput.addEventListener('keyup', (e) => {
if (e.key === 'Enter') {
confirmBtn.click();
}
});
// 打开后聚焦输入框
setTimeout(() => {
fileNameInput.focus();
fileNameInput.select(); // 全选文本，方便修改
}, 100);
}
}