132 lines
4.7 KiB
JavaScript
132 lines
4.7 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// Initialize CodeMirror editor
|
|
const editor = CodeMirror.fromTextArea(document.getElementById('scriptInput'), {
|
|
mode: 'javascript',
|
|
lineNumbers: true,
|
|
theme: 'default',
|
|
indentUnit: 4,
|
|
tabSize: 4,
|
|
lineWrapping: true,
|
|
autoCloseBrackets: true,
|
|
matchBrackets: true
|
|
});
|
|
|
|
// Get DOM elements
|
|
const runScriptBtn = document.getElementById('runScriptBtn');
|
|
const loadExampleBtn = document.getElementById('loadExampleBtn');
|
|
const modelSelect = document.getElementById('modelSelect');
|
|
const outputArea = document.getElementById('outputArea');
|
|
const toastContainer = document.querySelector('.toast-container');
|
|
|
|
// Function to show toast notifications
|
|
function showToast(message, type = 'error') {
|
|
const toastId = 'toast-' + Date.now();
|
|
const bgClass = type === 'error' ? 'bg-danger' : (type === 'warning' ? 'bg-warning' : 'bg-info');
|
|
const headerText = type === 'error' ? 'Error' : (type === 'warning' ? 'Warning' : 'Info');
|
|
|
|
// Create the toast element
|
|
const toastDiv = document.createElement('div');
|
|
toastDiv.className = 'toast mb-3';
|
|
toastDiv.id = toastId;
|
|
toastDiv.setAttribute('role', 'alert');
|
|
toastDiv.setAttribute('aria-live', 'assertive');
|
|
toastDiv.setAttribute('aria-atomic', 'true');
|
|
|
|
toastDiv.innerHTML = `
|
|
<div class="toast-header ${bgClass} text-white">
|
|
<strong class="me-auto">${headerText}</strong>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body">
|
|
${message}
|
|
</div>
|
|
`;
|
|
|
|
// Add to container
|
|
toastContainer.appendChild(toastDiv);
|
|
|
|
// Initialize and show the toast
|
|
const toast = new bootstrap.Toast(toastDiv, {
|
|
autohide: true,
|
|
delay: 10000
|
|
});
|
|
toast.show();
|
|
|
|
// Remove the toast element after it's hidden
|
|
toastDiv.addEventListener('hidden.bs.toast', () => {
|
|
toastDiv.remove();
|
|
});
|
|
}
|
|
|
|
// Function to run the script
|
|
async function runScript() {
|
|
const script = editor.getValue();
|
|
const modelType = modelSelect.value;
|
|
|
|
if (!script.trim()) {
|
|
showToast('Please enter a script to run.');
|
|
return;
|
|
}
|
|
|
|
outputArea.textContent = 'Running script...';
|
|
|
|
try {
|
|
const response = await fetch('/api/execute', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
script,
|
|
model_type: modelType
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
outputArea.textContent = result.output || 'Script executed successfully with no output.';
|
|
} else {
|
|
outputArea.textContent = result.output || 'Script execution failed.';
|
|
showToast(result.error || 'Script execution failed.', 'error');
|
|
}
|
|
} catch (error) {
|
|
outputArea.textContent = 'Script execution failed. See error details.';
|
|
showToast(`Error: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// Function to load example script
|
|
async function loadExample() {
|
|
const modelType = modelSelect.value;
|
|
|
|
try {
|
|
const response = await fetch(`/api/example/${modelType}`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Server returned ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
const exampleScript = await response.text();
|
|
|
|
editor.setValue(exampleScript);
|
|
outputArea.textContent = `Loaded ${modelType} example script. Click "Run Script" to execute.`;
|
|
} catch (error) {
|
|
// Don't show error in output area, use toast instead
|
|
showToast(`Failed to load ${modelType} example: ${error.message}`, 'error');
|
|
|
|
// Clear the editor if it was a new load (not if there was already content)
|
|
if (!editor.getValue().trim()) {
|
|
editor.setValue('// Write your Rhai script here');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Event listeners
|
|
runScriptBtn.addEventListener('click', runScript);
|
|
loadExampleBtn.addEventListener('click', loadExample);
|
|
|
|
// Load default example on page load
|
|
loadExample();
|
|
});
|