496 lines
21 KiB
HTML
496 lines
21 KiB
HTML
{% extends 'base.html' %}
|
|
{% from "macros.html" import render_field, render_selectable_table %}
|
|
|
|
{% block title %}Edit Specialist{% endblock %}
|
|
|
|
{% block content_title %}Edit Specialist{% endblock %}
|
|
{% block content_description %}Edit a Specialist and its components{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid px-0">
|
|
<div class="row">
|
|
<!-- Main Specialist Editor -->
|
|
<div class="col-12" id="mainEditorSection">
|
|
<form method="post" id="specialistForm">
|
|
{{ form.hidden_tag() }}
|
|
{% set disabled_fields = ['type', 'type_version'] %}
|
|
{% set exclude_fields = [] %}
|
|
|
|
<!-- Nav Tabs -->
|
|
<div class="row mt-5">
|
|
<div class="col-lg-12">
|
|
<div class="nav-wrapper position-relative end-0">
|
|
<ul class="nav nav-pills nav-fill p-1" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#general-tab" role="tab">
|
|
General
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#configuration-tab" role="tab">
|
|
Configuration
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#agents-tab" role="tab">
|
|
Agents
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#tasks-tab" role="tab">
|
|
Tasks
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#tools-tab" role="tab">
|
|
Tools
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link mb-0 px-0 py-1 d-none" id="editor-tab-link" data-bs-toggle="tab" href="#editor-tab" role="tab">
|
|
Editor
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tab-content tab-space">
|
|
<!-- General Tab -->
|
|
<div class="tab-pane fade" id="general-tab" role="tabpanel">
|
|
<!-- Render Static Fields -->
|
|
{% for field in form.get_static_fields() %}
|
|
{{ render_field(field, disabled_fields, exclude_fields) }}
|
|
{% endfor %}
|
|
|
|
<!-- Overview Section -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="specialist-overview" id="specialist-svg">
|
|
<img src="{{ svg_path }}" alt="Specialist Overview" class="w-100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Tab -->
|
|
<div class="tab-pane fade show active" id="configuration-tab" role="tabpanel">
|
|
{% for collection_name, fields in form.get_dynamic_fields().items() %}
|
|
{% if fields|length > 0 %}
|
|
<h4 class="mt-4">{{ collection_name }}</h4>
|
|
{% endif %}
|
|
{% for field in fields %}
|
|
{{ render_field(field, disabled_fields, exclude_fields) }}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Agents Tab -->
|
|
<div class="tab-pane fade" id="agents-tab" role="tabpanel">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{{ render_selectable_table(
|
|
headers=["Agent ID", "Name", "Type", "Type Version"],
|
|
rows=agent_rows if agent_rows else [],
|
|
selectable=True,
|
|
id="agentsTable",
|
|
is_component_selector=True
|
|
) }}
|
|
<div class="form-group mt-3">
|
|
<button type="button" class="btn btn-primary edit-component"
|
|
data-component-type="agent"
|
|
data-edit-url="{{ prefixed_url_for('interaction_bp.edit_agent', agent_id=0) }}">Edit Agent
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tasks Tab -->
|
|
<div class="tab-pane fade" id="tasks-tab" role="tabpanel">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{{ render_selectable_table(
|
|
headers=["Task ID", "Name", "Type", "Type Version"],
|
|
rows=task_rows if task_rows else [],
|
|
selectable=True,
|
|
id="tasksTable",
|
|
is_component_selector=True
|
|
) }}
|
|
<div class="form-group mt-3">
|
|
<button type="button" class="btn btn-primary edit-component"
|
|
data-component-type="task"
|
|
data-edit-url="{{ prefixed_url_for('interaction_bp.edit_task', task_id=0) }}">Edit Task
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tools Tab -->
|
|
<div class="tab-pane fade" id="tools-tab" role="tabpanel">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{{ render_selectable_table(
|
|
headers=["Tool ID", "Name", "Type", "Type Version"],
|
|
rows=tool_rows if tool_rows else [],
|
|
selectable=True,
|
|
id="toolsTable",
|
|
is_component_selector=True
|
|
) }}
|
|
<div class="form-group mt-3">
|
|
<button type="button" class="btn btn-primary edit-component"
|
|
data-component-type="tool"
|
|
data-edit-url="{{ prefixed_url_for('interaction_bp.edit_tool', tool_id=0) }}">Edit Tool
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Editor Tab -->
|
|
<div class="tab-pane fade" id="editor-tab" role="tabpanel">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0" id="editorTitle"></h5>
|
|
</div>
|
|
<div class="card-body" id="editorContent">
|
|
<!-- Component editor will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary mt-4">Save Specialist</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const editorTab = document.getElementById('editor-tab');
|
|
const editorTabLink = document.getElementById('editor-tab-link');
|
|
const editorTitle = document.getElementById('editorTitle');
|
|
const editorContent = document.getElementById('editorContent');
|
|
let previousTab = null;
|
|
|
|
// Add color classes to the tabs
|
|
const agentsTabLink = document.querySelector('[href="#agents-tab"]');
|
|
const tasksTabLink = document.querySelector('[href="#tasks-tab"]');
|
|
const toolsTabLink = document.querySelector('[href="#tools-tab"]');
|
|
|
|
agentsTabLink.classList.add('component-agent');
|
|
tasksTabLink.classList.add('component-task');
|
|
toolsTabLink.classList.add('component-tool');
|
|
|
|
// Add background colors to the tab panes
|
|
const agentsTab = document.getElementById('agents-tab');
|
|
const tasksTab = document.getElementById('tasks-tab');
|
|
const toolsTab = document.getElementById('tools-tab');
|
|
|
|
agentsTab.classList.add('component-agent-bg');
|
|
tasksTab.classList.add('component-task-bg');
|
|
toolsTab.classList.add('component-tool-bg');
|
|
|
|
// Ensure component selectors don't interfere with form submission
|
|
const form = document.getElementById('specialistForm');
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
// Remove component selectors from form validation
|
|
const componentSelectors = form.querySelectorAll('input[data-component-selector]');
|
|
componentSelectors.forEach(selector => {
|
|
selector.removeAttribute('required');
|
|
});
|
|
});
|
|
|
|
// Get all tab links except the editor tab
|
|
const tabLinks = Array.from(document.querySelectorAll('.nav-link')).filter(link => link.id !== 'editor-tab-link');
|
|
|
|
// Function to toggle other tabs' disabled state
|
|
function toggleOtherTabs(disable) {
|
|
tabLinks.forEach(link => {
|
|
if (disable) {
|
|
link.classList.add('disabled');
|
|
} else {
|
|
link.classList.remove('disabled');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Function to toggle main form elements
|
|
const mainSubmitButton = document.querySelector('#specialistForm > .btn-primary');
|
|
|
|
function toggleMainFormElements(disable) {
|
|
// Toggle tabs
|
|
document.querySelectorAll('.nav-link').forEach(link => {
|
|
if (link.id !== 'editor-tab-link') {
|
|
if (disable) {
|
|
link.classList.add('disabled');
|
|
} else {
|
|
link.classList.remove('disabled');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Toggle main submit button
|
|
if (mainSubmitButton) {
|
|
mainSubmitButton.disabled = disable;
|
|
}
|
|
}
|
|
|
|
// Handle edit buttons
|
|
document.querySelectorAll('.edit-component').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const componentType = this.dataset.componentType;
|
|
const form = this.closest('form');
|
|
const selectedRow = form.querySelector('input[type="radio"]:checked');
|
|
|
|
console.log("I'm in the custom click event listener!")
|
|
|
|
if (!selectedRow) {
|
|
alert('Please select a component to edit');
|
|
return;
|
|
}
|
|
|
|
const valueMatch = selectedRow.value.match(/'value':\s*(\d+)/);
|
|
const selectedId = valueMatch ? valueMatch[1] : null;
|
|
|
|
if (!selectedId) {
|
|
console.error('Could not extract ID from value:', selectedRow.value);
|
|
alert('Error: Could not determine component ID');
|
|
return;
|
|
}
|
|
|
|
// Make AJAX call to get component editor
|
|
const urlTemplate = this.dataset.editUrl.replace('/0', `/${selectedId}`);
|
|
fetch(urlTemplate, {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
return response.text();
|
|
})
|
|
.then(html => {
|
|
// Store the current active tab
|
|
previousTab = document.querySelector('.nav-link.active');
|
|
|
|
// Update editor content
|
|
editorTitle.textContent = `Edit ${componentType.charAt(0).toUpperCase() + componentType.slice(1)}`;
|
|
editorContent.innerHTML = html;
|
|
|
|
// Apply the appropriate color class to the editor tab
|
|
editorTabLink.classList.remove('component-agent', 'component-task', 'component-tool');
|
|
editorTab.classList.remove('component-agent-bg', 'component-task-bg', 'component-tool-bg');
|
|
|
|
editorTabLink.classList.add(`component-${componentType}`);
|
|
editorTab.classList.add(`component-${componentType}-bg`);
|
|
|
|
// Disable other tabs & main form elements
|
|
toggleOtherTabs(true);
|
|
toggleMainFormElements(true)
|
|
|
|
// Show editor tab and switch to it
|
|
editorTabLink.classList.remove('d-none');
|
|
editorTabLink.click();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching editor:', error);
|
|
alert('Error loading editor. Please try again.');
|
|
});
|
|
});
|
|
|
|
// Clean up color classes when returning from editor
|
|
editorTabLink.addEventListener('hide.bs.tab', function() {
|
|
editorTabLink.classList.remove('component-agent', 'component-task', 'component-tool');
|
|
editorTab.classList.remove('component-agent-bg', 'component-task-bg', 'component-tool-bg');
|
|
});
|
|
});
|
|
|
|
// Handle component editor form submissions
|
|
editorContent.addEventListener('click', function(e) {
|
|
if (e.target && e.target.classList.contains('component-submit')) {
|
|
e.preventDefault();
|
|
console.log('Submit button clicked');
|
|
|
|
// Get all form fields from the editor content
|
|
const formData = new FormData();
|
|
editorContent.querySelectorAll('input, textarea, select').forEach(field => {
|
|
if (field.type === 'checkbox') {
|
|
formData.append(field.name, field.checked ? 'y' : 'n');
|
|
} else {
|
|
formData.append(field.name, field.value);
|
|
}
|
|
});
|
|
|
|
// Add CSRF token
|
|
const csrfToken = document.querySelector('input[name="csrf_token"]').value;
|
|
formData.append('csrf_token', csrfToken);
|
|
|
|
// Get the component ID from the current state
|
|
const selectedRow = document.querySelector('input[name="selected_row"]:checked');
|
|
const componentData = JSON.parse(selectedRow.value.replace(/'/g, '"'));
|
|
const componentId = componentData.value;
|
|
|
|
// Determine the component type (agent, task, or tool)
|
|
const componentType = editorTabLink.classList.contains('component-agent') ? 'agent' :
|
|
editorTabLink.classList.contains('component-task') ? 'task' : 'tool';
|
|
|
|
// Submit the data
|
|
fetch(`interaction/${componentType}/${componentId}/save`, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Handle success - reload the page
|
|
location.reload();
|
|
} else {
|
|
// Handle error
|
|
alert(data.message || 'Error saving component');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Error saving component');
|
|
});
|
|
}
|
|
});
|
|
|
|
// Handle case when editor tab is hidden
|
|
editorTabLink.addEventListener('hide.bs.tab', function() {
|
|
// Re-enable all tabs & main form elements
|
|
toggleOtherTabs(false);
|
|
toggleMainFormElements(false)
|
|
|
|
// Remove color classes
|
|
editorTabLink.classList.remove('component-agent', 'component-task', 'component-tool');
|
|
editorTab.classList.remove('component-agent-bg', 'component-task-bg', 'component-tool-bg');
|
|
});
|
|
|
|
// Function to handle canceling edit
|
|
function cancelEdit() {
|
|
// Re-enable all tabs & main form elements
|
|
toggleOtherTabs(false);
|
|
toggleMainFormElements()
|
|
|
|
// Return to previous tab
|
|
if (previousTab) {
|
|
previousTab.click();
|
|
}
|
|
|
|
// Hide the editor tab
|
|
editorTabLink.classList.add('d-none');
|
|
}
|
|
|
|
// Handle cancel button in editor
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target && e.target.id === 'cancelEdit') {
|
|
// Get the previously active tab (stored before switching to editor)
|
|
const previousTab = document.querySelector('[href="#configuration-tab"]'); // default to configuration tab
|
|
|
|
cancelEdit()
|
|
|
|
// Hide the editor tab
|
|
document.getElementById('editor-tab-link').classList.add('d-none');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.tab-pane .card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.nav-link.component-agent,
|
|
.nav-link.component-task,
|
|
.nav-link.component-tool {
|
|
color: white !important;
|
|
}
|
|
|
|
/* Add new CSS for normal tabs */
|
|
.nav-link {
|
|
color: #344767 !important; /* Default dark color */
|
|
}
|
|
|
|
/* Style for active tabs */
|
|
.nav-link.active {
|
|
background-color: #5e72e4 !important; /* Primary blue color */
|
|
color: white !important;
|
|
font-weight: 600;
|
|
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Style for disabled tabs */
|
|
.nav-link.disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.component-agent {
|
|
background-color: #9c27b0 !important; /* Purple */
|
|
color: white !important;
|
|
}
|
|
|
|
.component-task {
|
|
background-color: #ff9800 !important; /* Orange */
|
|
color: white !important;
|
|
}
|
|
|
|
.component-tool {
|
|
background-color: #009688 !important; /* Teal */
|
|
color: white !important;
|
|
}
|
|
|
|
/* Lighter background versions for the tab content */
|
|
.tab-pane.component-agent-bg {
|
|
background-color: rgba(156, 39, 176, 0.2); /* Light purple */
|
|
}
|
|
|
|
.tab-pane.component-task-bg {
|
|
background-color: rgba(255, 152, 0, 0.2); /* Light orange */
|
|
}
|
|
|
|
.tab-pane.component-tool-bg {
|
|
background-color: rgba(0, 150, 136, 0.2); /* Light teal */
|
|
}
|
|
|
|
/* Add some padding to the tab content */
|
|
.tab-pane {
|
|
padding: 15px;
|
|
border-radius: 0.5rem;
|
|
}
|
|
.specialist-overview {
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 200px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.specialist-overview svg {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 400px; /* Adjust as needed */
|
|
}
|
|
</style>
|
|
{% endblock %}
|