- Change TRAICIE_VACANCY_DEFINTION_SPECIALIST to TRAICIE_ROLE_DEFINITION_SPECIALIST

- Introduce new vanilla-jsoneditor iso older jsoneditor (for viewing a.o. ChatSessions)
- Introduce use of npm to install required javascript libraries
- update Material-kit-pro
- Introduce new top bar to show session defaults, remove old navbar buttons
- Correct Task & Tools editor
This commit is contained in:
Josako
2025-05-27 17:37:32 +02:00
parent 1fdbd2ff45
commit 5123de55cc
1041 changed files with 4480 additions and 292099 deletions

View File

@@ -1,204 +1,15 @@
<!-- 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>
# dist/main.js contains all used javascript libraries
<script src="{{url_for('static', filename='dist/main.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')}}"></script>
<script>
window.EveAI = window.EveAI || {};
{% include 'eveai_json_editor.html' %}
// 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
@@ -207,38 +18,8 @@ document.addEventListener('DOMContentLoaded', function() {
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';
}
});
});
// De JSON editor initialisatie is hierboven al samengevoegd.
// Deze dubbele DOMContentLoaded listener en .json-editor initialisatie kan verwijderd worden.
});
</script>
<script>
@@ -364,4 +145,31 @@ $(document).ready(function() {
.tooltip {
position: fixed;
}
/* Voeg CSS toe voor vanilla-jsoneditor */
/* Je kunt het thema aanpassen of de standaardstijlen gebruiken */
/* @import 'vanilla-jsoneditor/themes/jse-theme-dark.css'; */
/* Of importeer de basisstijlen */
/* @import 'vanilla-jsoneditor/dist/vanilla-jsoneditor.css'; */
/* Als je de CSS via een link tag wilt toevoegen: */
/* <link href="path/to/vanilla-jsoneditor.min.css" rel="stylesheet"> */
/* <link href="path/to/jse-theme-dark.css" rel="stylesheet"> (optioneel thema) */
/* Zorg ervoor dat de container de juiste hoogte heeft, de editor neemt de hoogte van de container over */
.json-viewer, .json-editor-container /* Pas dit aan je HTML structuur aan indien nodig */ {
height: 300px; /* Of de gewenste hoogte */
width: 100%;
}
/* Voeg styling toe om de vanilla-jsoneditor eruit te laten zien als de oude, indien gewenst */
.jsoneditor-readonly-mode .jse-main-menu,
.jsoneditor-readonly-mode .jse-status-bar {
/* Verberg menu en statusbalk in read-only modus indien gewenst */
/* display: none; */
}
.jse-read-only {
/* Standaard read-only styling van vanilla-jsoneditor */
}
</style>