1fdbd2ff45
- Creation of Traicie Vancancy Definition specialist - Allow to invoke non-interaction specialists from withing Evie's mgmt interface (eveai_app) - Improvements to crewai specialized classes - Introduction to json editor for showing specialists arguments and results in a better way - Introduction of more complex pagination (adding extra arguments) by adding a global 'get_pagination_html' - Allow follow-up of ChatSession / Specialist execution - Improvement in logging of Specialists (but needs to be finished)
368 lines
15 KiB
HTML
368 lines
15 KiB
HTML
<!-- Optional JavaScript -->
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/perfect-scrollbar.min.js"></script>
|
|
<script src="{{url_for('static', filename='assets/js/plugins/typedjs.js')}}"></script>
|
|
<script src="{{url_for('static', filename='assets/js/plugins/prism.min.js')}}"></script>
|
|
<script src="{{url_for('static', filename='assets/js/plugins/highlight.min.js')}}"></script>
|
|
<script src="{{url_for('static', filename='assets/js/plugins/parallax.min.js')}}"></script>
|
|
<script src="{{url_for('static', filename='assets/js/plugins/nouislider.min.js')}}"></script>
|
|
<script src="{{url_for('static', filename='assets/js/plugins/anime.min.js')}}"></script>
|
|
<script src="{{url_for('static', filename='assets/js/material-kit-pro.min.js')}}?v=3.0.4 type="text/javascript"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.0/jsoneditor.min.css" rel="stylesheet" type="text/css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.0/jsoneditor.min.js"></script>
|
|
|
|
<script>
|
|
window.EveAI = window.EveAI || {};
|
|
|
|
// Centraal beheer van JSONEditor instanties
|
|
window.EveAI.JsonEditors = {
|
|
instances: {},
|
|
|
|
// Initialiseer een nieuwe JSONEditor
|
|
initialize: function(containerId, data, options = {}) {
|
|
const container = document.getElementById(containerId);
|
|
|
|
if (!container) {
|
|
console.error(`Container with ID ${containerId} not found`);
|
|
return null;
|
|
}
|
|
|
|
if (this.instances[containerId]) {
|
|
console.log(`JSONEditor for ${containerId} already initialized`);
|
|
return this.instances[containerId];
|
|
}
|
|
|
|
// Bepaal of de editor in read-only modus moet worden weergegeven
|
|
const isReadOnly = options.readOnly === true;
|
|
|
|
// Standaard opties
|
|
const defaultOptions = {
|
|
mode: isReadOnly ? 'tree' : 'tree', // Gebruik 'tree' voor read-only om expand/collapse te behouden
|
|
modes: isReadOnly ? ['tree', 'view'] : ['tree', 'code', 'view'], // Voeg 'tree' toe aan read-only modes
|
|
search: true,
|
|
navigationBar: false,
|
|
mainMenuBar: true, // Behoud menubar voor expand/collapse knoppen
|
|
statusBar: !isReadOnly // Verberg alleen statusbar in read-only modus
|
|
};
|
|
|
|
// Als expliciet onEditable=false is ingesteld, zorg ervoor dat de editor read-only is
|
|
if (options.onEditable === false || options.onEditable && typeof options.onEditable === 'function') {
|
|
defaultOptions.onEditable = function() { return false; };
|
|
}
|
|
|
|
// Combineer standaard opties met aangepaste opties
|
|
const editorOptions = {...defaultOptions, ...options};
|
|
|
|
try {
|
|
const editor = new JSONEditor(container, editorOptions, data);
|
|
container.classList.add('jsoneditor-initialized');
|
|
|
|
// Voeg read-only klasse toe indien nodig
|
|
if (isReadOnly) {
|
|
container.classList.add('jsoneditor-readonly-mode');
|
|
} else {
|
|
container.classList.add('jsoneditor-edit-mode');
|
|
}
|
|
|
|
this.instances[containerId] = editor;
|
|
return editor;
|
|
} catch (e) {
|
|
console.error(`Error initializing JSONEditor for ${containerId}:`, e);
|
|
container.innerHTML = `<div class="alert alert-danger p-3">
|
|
<strong>Error loading JSON data:</strong><br>${e.message}
|
|
</div>`;
|
|
return null;
|
|
}
|
|
},
|
|
|
|
// Initialiseer een read-only JSONEditor (handige functie)
|
|
initializeReadOnly: function(containerId, data, additionalOptions = {}) {
|
|
const readOnlyOptions = {
|
|
readOnly: true,
|
|
mode: 'tree', // Gebruik tree mode voor navigatie
|
|
modes: ['tree', 'view'], // Beperk tot tree en view
|
|
expandAll: true, // Alles openklappen bij initialisatie
|
|
onEditable: function() { return false; }
|
|
};
|
|
|
|
// Combineer read-only opties met eventuele aanvullende opties
|
|
const options = {...readOnlyOptions, ...additionalOptions};
|
|
|
|
return this.initialize(containerId, data, options);
|
|
},
|
|
|
|
// Haal een bestaande instantie op of maak een nieuwe aan
|
|
get: function(containerId, data, options = {}) {
|
|
if (this.instances[containerId]) {
|
|
return this.instances[containerId];
|
|
}
|
|
|
|
return this.initialize(containerId, data, options);
|
|
},
|
|
|
|
// Verwijder een instantie
|
|
destroy: function(containerId) {
|
|
if (this.instances[containerId]) {
|
|
this.instances[containerId].destroy();
|
|
delete this.instances[containerId];
|
|
|
|
const container = document.getElementById(containerId);
|
|
if (container) {
|
|
container.classList.remove('jsoneditor-initialized');
|
|
container.classList.remove('jsoneditor-readonly-mode');
|
|
container.classList.remove('jsoneditor-edit-mode');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Zoek en initialiseer standaard JSON editors bij DOMContentLoaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize tooltips
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl)
|
|
});
|
|
|
|
// Initialiseer JSON editors voor tekstgebieden met de klasse 'json-editor'
|
|
document.querySelectorAll('.json-editor').forEach(function(textarea) {
|
|
// Controleer of er een bijbehorende container is
|
|
const containerId = textarea.id + '-editor';
|
|
const container = document.getElementById(containerId);
|
|
|
|
if (container) {
|
|
try {
|
|
// Parse de JSON-data uit het tekstgebied
|
|
const data = textarea.value ? JSON.parse(textarea.value) : {};
|
|
|
|
// Controleer of de editor in read-only modus moet worden getoond
|
|
const isReadOnly = textarea.readOnly || textarea.hasAttribute('readonly') ||
|
|
textarea.classList.contains('readonly');
|
|
|
|
// Bepaal de juiste editor-opties op basis van de read-only status
|
|
const editorOptions = {
|
|
mode: isReadOnly ? 'tree' : 'code', // Gebruik tree voor read-only
|
|
modes: isReadOnly ? ['tree', 'view'] : ['code', 'tree'],
|
|
readOnly: isReadOnly,
|
|
onEditable: function() { return !isReadOnly; },
|
|
onChangeText: isReadOnly ? undefined : function(jsonString) {
|
|
textarea.value = jsonString;
|
|
}
|
|
};
|
|
|
|
// Initialiseer de editor
|
|
const editor = window.EveAI.JsonEditors.initialize(containerId, data, editorOptions);
|
|
|
|
// Voeg validatie toe als het een bewerkbare editor is
|
|
if (!isReadOnly && editor) {
|
|
editor.validate().then(function(errors) {
|
|
if (errors.length) {
|
|
container.style.border = '2px solid red';
|
|
} else {
|
|
container.style.border = '1px solid #ccc';
|
|
}
|
|
});
|
|
}
|
|
} catch (e) {
|
|
console.error('Error parsing initial JSON:', e);
|
|
container.innerHTML = `<div class="alert alert-danger p-3">
|
|
<strong>Error loading JSON data:</strong><br>${e.message}
|
|
</div>`;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Initialiseer JSON editors voor containers met de klasse 'json-viewer' (alleen-lezen)
|
|
document.querySelectorAll('.json-viewer').forEach(function(container) {
|
|
const dataElement = document.getElementById(container.id + '-data');
|
|
|
|
if (dataElement) {
|
|
try {
|
|
// Parse de JSON-data
|
|
const data = dataElement.textContent ? JSON.parse(dataElement.textContent) : {};
|
|
|
|
// Initialiseer een read-only editor met tree-mode voor navigatie
|
|
window.EveAI.JsonEditors.initializeReadOnly(container.id, data);
|
|
} catch (e) {
|
|
console.error('Error parsing JSON for viewer:', e);
|
|
container.innerHTML = `<div class="alert alert-danger p-3">
|
|
<strong>Error loading JSON data:</strong><br>${e.message}
|
|
</div>`;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize tooltips
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl)
|
|
});
|
|
|
|
// Initialize JSON editors
|
|
document.querySelectorAll('.json-editor').forEach(function(textarea) {
|
|
// Create container for editor
|
|
var container = document.getElementById(textarea.id + '-editor');
|
|
|
|
// Initialize the editor
|
|
var editor = new JSONEditor(container, {
|
|
mode: 'code',
|
|
modes: ['code', 'tree'],
|
|
onChangeText: function(jsonString) {
|
|
textarea.value = jsonString;
|
|
}
|
|
});
|
|
|
|
// Set initial value
|
|
try {
|
|
const initialValue = textarea.value ? JSON.parse(textarea.value) : {};
|
|
editor.set(initialValue);
|
|
} catch (e) {
|
|
console.error('Error parsing initial JSON:', e);
|
|
editor.set({});
|
|
}
|
|
|
|
// Add validation indicator
|
|
editor.validate().then(function(errors) {
|
|
if (errors.length) {
|
|
container.style.border = '2px solid red';
|
|
} else {
|
|
container.style.border = '1px solid #ccc';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Get all forms with tabs
|
|
const formsWithTabs = document.querySelectorAll('form');
|
|
|
|
formsWithTabs.forEach(form => {
|
|
// Handle the form's submit event
|
|
form.addEventListener('submit', function(event) {
|
|
const invalidFields = form.querySelectorAll(':invalid');
|
|
|
|
if (invalidFields.length > 0) {
|
|
// Prevent form submission
|
|
event.preventDefault();
|
|
|
|
// Find which tab contains the first invalid field
|
|
const firstInvalidField = invalidFields[0];
|
|
const tabPane = firstInvalidField.closest('.tab-pane');
|
|
|
|
if (tabPane) {
|
|
// Get the tab ID
|
|
const tabId = tabPane.id;
|
|
|
|
// Find and click the corresponding tab button
|
|
const tabButton = document.querySelector(`[data-bs-toggle="tab"][data-bs-target="#${tabId}"]`);
|
|
if (tabButton) {
|
|
const tab = new bootstrap.Tab(tabButton);
|
|
tab.show();
|
|
}
|
|
|
|
// Scroll the invalid field into view and focus it
|
|
firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
firstInvalidField.focus();
|
|
}
|
|
|
|
// Optional: Show a message about validation errors
|
|
const errorCount = invalidFields.length;
|
|
const message = `Please fill in all required fields (${errorCount} ${errorCount === 1 ? 'error' : 'errors'} found)`;
|
|
if (typeof Swal !== 'undefined') {
|
|
// If SweetAlert2 is available
|
|
Swal.fire({
|
|
title: 'Validation Error',
|
|
text: message,
|
|
icon: 'error',
|
|
confirmButtonText: 'OK'
|
|
});
|
|
} else {
|
|
// Fallback to browser alert
|
|
alert(message);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Optional: Real-time validation as user switches tabs
|
|
const tabButtons = document.querySelectorAll('[data-bs-toggle="tab"]');
|
|
tabButtons.forEach(button => {
|
|
button.addEventListener('shown.bs.tab', function() {
|
|
const previousTabPane = document.querySelector(button.getAttribute('data-bs-target'));
|
|
if (previousTabPane) {
|
|
const invalidFields = previousTabPane.querySelectorAll(':invalid');
|
|
if (invalidFields.length > 0) {
|
|
// Add visual indicator to tab
|
|
button.classList.add('has-error');
|
|
} else {
|
|
button.classList.remove('has-error');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.querySelectorAll('textarea[data-handle-enter="true"]').forEach(function(textarea) {
|
|
textarea.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter' && e.shiftKey) {
|
|
e.preventDefault();
|
|
const start = this.selectionStart;
|
|
const end = this.selectionEnd;
|
|
this.value = this.value.substring(0, start) + '\n' + this.value.substring(end);
|
|
this.selectionStart = this.selectionEnd = start + 1;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
function validateTableSelection(formId) {
|
|
const form = document.getElementById(formId);
|
|
const selectedRow = form.querySelector('input[name="selected_row"]:checked');
|
|
if (!selectedRow) {
|
|
alert('Please select a row first');
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
</script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Maak tabelrijen klikbaar (voor tabellen met radio-buttons)
|
|
$(document).on('click', 'table tbody tr', function(e) {
|
|
// Voorkom dat dit gedrag optreedt als er direct op de radio-button of een link wordt geklikt
|
|
if (!$(e.target).is('input[type="radio"], a')) {
|
|
// Vind de radio-button in deze rij
|
|
const radio = $(this).find('input[type="radio"]');
|
|
// Selecteer de radio-button
|
|
radio.prop('checked', true);
|
|
// Voeg visuele feedback toe voor de gebruiker
|
|
$('table tbody tr').removeClass('table-active');
|
|
$(this).addClass('table-active');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.json-editor-container {
|
|
height: 400px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.tooltip {
|
|
position: fixed;
|
|
}
|
|
</style>
|