- Specialist Tuning now in a separate editor
- typeBadge formatter completed
This commit is contained in:
Josako
@@ -2,5 +2,5 @@
|
||||
"dist/chat-client.js": "dist/chat-client.f7134231.js",
|
||||
"dist/chat-client.css": "dist/chat-client.99e10656.css",
|
||||
"dist/main.js": "dist/main.6a617099.js",
|
||||
"dist/main.css": "dist/main.06893f70.css"
|
||||
"dist/main.css": "dist/main.7182aac3.css"
|
||||
}
|
||||
30
eveai_app/static/assets/css/eveai-content-viewer.css
Normal file
30
eveai_app/static/assets/css/eveai-content-viewer.css
Normal file
@@ -0,0 +1,30 @@
|
||||
/* Content Viewer specific styles */
|
||||
|
||||
/* Ensure markdown text aligns left by default */
|
||||
#content-document-viewer .markdown-body,
|
||||
.markdown-body {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Make the viewer pane scrollable with a responsive max height */
|
||||
#content-document-viewer {
|
||||
max-height: 60vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Optional readability improvements */
|
||||
#content-document-viewer .markdown-body {
|
||||
line-height: 1.6;
|
||||
}
|
||||
#content-document-viewer .markdown-body pre,
|
||||
#content-document-viewer .markdown-body code {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Keep the viewer header visible while scrolling */
|
||||
#content-viewer-section .card-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: var(--bs-body-bg, #fff);
|
||||
}
|
||||
@@ -313,5 +313,21 @@ input[type="radio"] {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* Custom badge background colors for type badges (agent/task/tool) */
|
||||
.bg-purple {
|
||||
background-color: #6f42c1 !important; /* Bootstrap purple */
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.bg-orange {
|
||||
background-color: #fd7e14 !important; /* Bootstrap orange */
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.bg-teal {
|
||||
background-color: #20c997 !important; /* Bootstrap teal */
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
597
eveai_app/static/assets/css/nucleo-icons.css
Normal file
597
eveai_app/static/assets/css/nucleo-icons.css
Normal file
@@ -0,0 +1,597 @@
|
||||
/*--------------------------------
|
||||
|
||||
hermes-dashboard-icons Web Font - built using nucleoapp.com
|
||||
License - nucleoapp.com/license/
|
||||
|
||||
-------------------------------- */
|
||||
@font-face {
|
||||
font-family: 'NucleoIcons';
|
||||
src: url('../fonts/nucleo-icons.eot');
|
||||
src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype'), url('../fonts/nucleo-icons.svg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
base class definition
|
||||
-------------------------*/
|
||||
.ni {
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 NucleoIcons;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
change icon size
|
||||
-------------------------*/
|
||||
.ni-lg {
|
||||
font-size: 1.33333333em;
|
||||
line-height: 0.75em;
|
||||
vertical-align: -15%;
|
||||
}
|
||||
|
||||
.ni-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.ni-3x {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.ni-4x {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.ni-5x {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
/*----------------------------------
|
||||
add a square/circle background
|
||||
-----------------------------------*/
|
||||
.ni.square,
|
||||
.ni.circle {
|
||||
padding: 0.33333333em;
|
||||
vertical-align: -16%;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.ni.circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
list icons
|
||||
-------------------------*/
|
||||
.ni-ul {
|
||||
padding-left: 0;
|
||||
margin-left: 2.14285714em;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.ni-ul>li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ni-ul>li>.ni {
|
||||
position: absolute;
|
||||
left: -1.57142857em;
|
||||
top: 0.14285714em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ni-ul>li>.ni.lg {
|
||||
top: 0;
|
||||
left: -1.35714286em;
|
||||
}
|
||||
|
||||
.ni-ul>li>.ni.circle,
|
||||
.ni-ul>li>.ni.square {
|
||||
top: -0.19047619em;
|
||||
left: -1.9047619em;
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
spinning icons
|
||||
-------------------------*/
|
||||
.ni.spin {
|
||||
-webkit-animation: nc-spin 2s infinite linear;
|
||||
-moz-animation: nc-spin 2s infinite linear;
|
||||
animation: nc-spin 2s infinite linear;
|
||||
}
|
||||
|
||||
@-webkit-keyframes nc-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes nc-spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nc-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
rotated/flipped icons
|
||||
-------------------------*/
|
||||
.ni.rotate-90 {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.ni.rotate-180 {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.ni.rotate-270 {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
||||
-webkit-transform: rotate(270deg);
|
||||
-moz-transform: rotate(270deg);
|
||||
-ms-transform: rotate(270deg);
|
||||
-o-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.ni.flip-y {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
|
||||
-webkit-transform: scale(-1, 1);
|
||||
-moz-transform: scale(-1, 1);
|
||||
-ms-transform: scale(-1, 1);
|
||||
-o-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.ni.flip-x {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
-webkit-transform: scale(1, -1);
|
||||
-moz-transform: scale(1, -1);
|
||||
-ms-transform: scale(1, -1);
|
||||
-o-transform: scale(1, -1);
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
font icons
|
||||
-------------------------*/
|
||||
|
||||
.ni-active-40::before {
|
||||
content: "\ea02";
|
||||
}
|
||||
|
||||
.ni-air-baloon::before {
|
||||
content: "\ea03";
|
||||
}
|
||||
|
||||
.ni-album-2::before {
|
||||
content: "\ea04";
|
||||
}
|
||||
|
||||
.ni-align-center::before {
|
||||
content: "\ea05";
|
||||
}
|
||||
|
||||
.ni-align-left-2::before {
|
||||
content: "\ea06";
|
||||
}
|
||||
|
||||
.ni-ambulance::before {
|
||||
content: "\ea07";
|
||||
}
|
||||
|
||||
.ni-app::before {
|
||||
content: "\ea08";
|
||||
}
|
||||
|
||||
.ni-archive-2::before {
|
||||
content: "\ea09";
|
||||
}
|
||||
|
||||
.ni-atom::before {
|
||||
content: "\ea0a";
|
||||
}
|
||||
|
||||
.ni-badge::before {
|
||||
content: "\ea0b";
|
||||
}
|
||||
|
||||
.ni-bag-17::before {
|
||||
content: "\ea0c";
|
||||
}
|
||||
|
||||
.ni-basket::before {
|
||||
content: "\ea0d";
|
||||
}
|
||||
|
||||
.ni-bell-55::before {
|
||||
content: "\ea0e";
|
||||
}
|
||||
|
||||
.ni-bold-down::before {
|
||||
content: "\ea0f";
|
||||
}
|
||||
|
||||
.ni-bold-left::before {
|
||||
content: "\ea10";
|
||||
}
|
||||
|
||||
.ni-bold-right::before {
|
||||
content: "\ea11";
|
||||
}
|
||||
|
||||
.ni-bold-up::before {
|
||||
content: "\ea12";
|
||||
}
|
||||
|
||||
.ni-bold::before {
|
||||
content: "\ea13";
|
||||
}
|
||||
|
||||
.ni-book-bookmark::before {
|
||||
content: "\ea14";
|
||||
}
|
||||
|
||||
.ni-books::before {
|
||||
content: "\ea15";
|
||||
}
|
||||
|
||||
.ni-box-2::before {
|
||||
content: "\ea16";
|
||||
}
|
||||
|
||||
.ni-briefcase-24::before {
|
||||
content: "\ea17";
|
||||
}
|
||||
|
||||
.ni-building::before {
|
||||
content: "\ea18";
|
||||
}
|
||||
|
||||
.ni-bulb-61::before {
|
||||
content: "\ea19";
|
||||
}
|
||||
|
||||
.ni-bullet-list-67::before {
|
||||
content: "\ea1a";
|
||||
}
|
||||
|
||||
.ni-bus-front-12::before {
|
||||
content: "\ea1b";
|
||||
}
|
||||
|
||||
.ni-button-pause::before {
|
||||
content: "\ea1c";
|
||||
}
|
||||
|
||||
.ni-button-play::before {
|
||||
content: "\ea1d";
|
||||
}
|
||||
|
||||
.ni-button-power::before {
|
||||
content: "\ea1e";
|
||||
}
|
||||
|
||||
.ni-calendar-grid-58::before {
|
||||
content: "\ea1f";
|
||||
}
|
||||
|
||||
.ni-camera-compact::before {
|
||||
content: "\ea20";
|
||||
}
|
||||
|
||||
.ni-caps-small::before {
|
||||
content: "\ea21";
|
||||
}
|
||||
|
||||
.ni-cart::before {
|
||||
content: "\ea22";
|
||||
}
|
||||
|
||||
.ni-chart-bar-32::before {
|
||||
content: "\ea23";
|
||||
}
|
||||
|
||||
.ni-chart-pie-35::before {
|
||||
content: "\ea24";
|
||||
}
|
||||
|
||||
.ni-chat-round::before {
|
||||
content: "\ea25";
|
||||
}
|
||||
|
||||
.ni-check-bold::before {
|
||||
content: "\ea26";
|
||||
}
|
||||
|
||||
.ni-circle-08::before {
|
||||
content: "\ea27";
|
||||
}
|
||||
|
||||
.ni-cloud-download-95::before {
|
||||
content: "\ea28";
|
||||
}
|
||||
|
||||
.ni-cloud-upload-96::before {
|
||||
content: "\ea29";
|
||||
}
|
||||
|
||||
.ni-compass-04::before {
|
||||
content: "\ea2a";
|
||||
}
|
||||
|
||||
.ni-controller::before {
|
||||
content: "\ea2b";
|
||||
}
|
||||
|
||||
.ni-credit-card::before {
|
||||
content: "\ea2c";
|
||||
}
|
||||
|
||||
.ni-curved-next::before {
|
||||
content: "\ea2d";
|
||||
}
|
||||
|
||||
.ni-delivery-fast::before {
|
||||
content: "\ea2e";
|
||||
}
|
||||
|
||||
.ni-diamond::before {
|
||||
content: "\ea2f";
|
||||
}
|
||||
|
||||
.ni-email-83::before {
|
||||
content: "\ea30";
|
||||
}
|
||||
|
||||
.ni-fat-add::before {
|
||||
content: "\ea31";
|
||||
}
|
||||
|
||||
.ni-fat-delete::before {
|
||||
content: "\ea32";
|
||||
}
|
||||
|
||||
.ni-fat-remove::before {
|
||||
content: "\ea33";
|
||||
}
|
||||
|
||||
.ni-favourite-28::before {
|
||||
content: "\ea34";
|
||||
}
|
||||
|
||||
.ni-folder-17::before {
|
||||
content: "\ea35";
|
||||
}
|
||||
|
||||
.ni-glasses-2::before {
|
||||
content: "\ea36";
|
||||
}
|
||||
|
||||
.ni-hat-3::before {
|
||||
content: "\ea37";
|
||||
}
|
||||
|
||||
.ni-headphones::before {
|
||||
content: "\ea38";
|
||||
}
|
||||
|
||||
.ni-html5::before {
|
||||
content: "\ea39";
|
||||
}
|
||||
|
||||
.ni-istanbul::before {
|
||||
content: "\ea3a";
|
||||
}
|
||||
|
||||
.ni-key-25::before {
|
||||
content: "\ea3b";
|
||||
}
|
||||
|
||||
.ni-laptop::before {
|
||||
content: "\ea3c";
|
||||
}
|
||||
|
||||
.ni-like-2::before {
|
||||
content: "\ea3d";
|
||||
}
|
||||
|
||||
.ni-lock-circle-open::before {
|
||||
content: "\ea3e";
|
||||
}
|
||||
|
||||
.ni-map-big::before {
|
||||
content: "\ea3f";
|
||||
}
|
||||
|
||||
.ni-mobile-button::before {
|
||||
content: "\ea40";
|
||||
}
|
||||
|
||||
.ni-money-coins::before {
|
||||
content: "\ea41";
|
||||
}
|
||||
|
||||
.ni-note-03::before {
|
||||
content: "\ea42";
|
||||
}
|
||||
|
||||
.ni-notification-70::before {
|
||||
content: "\ea43";
|
||||
}
|
||||
|
||||
.ni-palette::before {
|
||||
content: "\ea44";
|
||||
}
|
||||
|
||||
.ni-paper-diploma::before {
|
||||
content: "\ea45";
|
||||
}
|
||||
|
||||
.ni-pin-3::before {
|
||||
content: "\ea46";
|
||||
}
|
||||
|
||||
.ni-planet::before {
|
||||
content: "\ea47";
|
||||
}
|
||||
|
||||
.ni-ruler-pencil::before {
|
||||
content: "\ea48";
|
||||
}
|
||||
|
||||
.ni-satisfied::before {
|
||||
content: "\ea49";
|
||||
}
|
||||
|
||||
.ni-scissors::before {
|
||||
content: "\ea4a";
|
||||
}
|
||||
|
||||
.ni-send::before {
|
||||
content: "\ea4b";
|
||||
}
|
||||
|
||||
.ni-settings-gear-65::before {
|
||||
content: "\ea4c";
|
||||
}
|
||||
|
||||
.ni-settings::before {
|
||||
content: "\ea4d";
|
||||
}
|
||||
|
||||
.ni-single-02::before {
|
||||
content: "\ea4e";
|
||||
}
|
||||
|
||||
.ni-single-copy-04::before {
|
||||
content: "\ea4f";
|
||||
}
|
||||
|
||||
.ni-sound-wave::before {
|
||||
content: "\ea50";
|
||||
}
|
||||
|
||||
.ni-spaceship::before {
|
||||
content: "\ea51";
|
||||
}
|
||||
|
||||
.ni-square-pin::before {
|
||||
content: "\ea52";
|
||||
}
|
||||
|
||||
.ni-support-16::before {
|
||||
content: "\ea53";
|
||||
}
|
||||
|
||||
.ni-tablet-button::before {
|
||||
content: "\ea54";
|
||||
}
|
||||
|
||||
.ni-tag::before {
|
||||
content: "\ea55";
|
||||
}
|
||||
|
||||
.ni-tie-bow::before {
|
||||
content: "\ea56";
|
||||
}
|
||||
|
||||
.ni-time-alarm::before {
|
||||
content: "\ea57";
|
||||
}
|
||||
|
||||
.ni-trophy::before {
|
||||
content: "\ea58";
|
||||
}
|
||||
|
||||
.ni-tv-2::before {
|
||||
content: "\ea59";
|
||||
}
|
||||
|
||||
.ni-umbrella-13::before {
|
||||
content: "\ea5a";
|
||||
}
|
||||
|
||||
.ni-user-run::before {
|
||||
content: "\ea5b";
|
||||
}
|
||||
|
||||
.ni-vector::before {
|
||||
content: "\ea5c";
|
||||
}
|
||||
|
||||
.ni-watch-time::before {
|
||||
content: "\ea5d";
|
||||
}
|
||||
|
||||
.ni-world::before {
|
||||
content: "\ea5e";
|
||||
}
|
||||
|
||||
.ni-zoom-split-in::before {
|
||||
content: "\ea5f";
|
||||
}
|
||||
|
||||
.ni-collection::before {
|
||||
content: "\ea60";
|
||||
}
|
||||
|
||||
.ni-image::before {
|
||||
content: "\ea61";
|
||||
}
|
||||
|
||||
.ni-shop::before {
|
||||
content: "\ea62";
|
||||
}
|
||||
|
||||
.ni-ungroup::before {
|
||||
content: "\ea63";
|
||||
}
|
||||
|
||||
.ni-world-2::before {
|
||||
content: "\ea64";
|
||||
}
|
||||
|
||||
.ni-ui-04::before {
|
||||
content: "\ea65";
|
||||
}
|
||||
|
||||
|
||||
/* all icon font classes list here */
|
||||
135
eveai_app/static/assets/css/nucleo-svg.css
Normal file
135
eveai_app/static/assets/css/nucleo-svg.css
Normal file
@@ -0,0 +1,135 @@
|
||||
/* Generated using nucleoapp.com */
|
||||
/* --------------------------------
|
||||
|
||||
Icon colors
|
||||
|
||||
-------------------------------- */
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
/* icon primary color */
|
||||
color: #111111;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.icon use {
|
||||
/* icon secondary color - fill */
|
||||
fill: #7ea6f6;
|
||||
}
|
||||
|
||||
.icon.icon-outline use {
|
||||
/* icon secondary color - stroke */
|
||||
stroke: #7ea6f6;
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
|
||||
Change icon size
|
||||
|
||||
-------------------------------- */
|
||||
|
||||
.icon-xs {
|
||||
height: 0.5em;
|
||||
width: 0.5em;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
height: 0.8em;
|
||||
width: 0.8em;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
height: 1.6em;
|
||||
width: 1.6em;
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
|
||||
Align icon and text
|
||||
|
||||
-------------------------------- */
|
||||
|
||||
.icon-text-aligner {
|
||||
/* add this class to parent element that contains icon + text */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-text-aligner .icon {
|
||||
color: inherit;
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
.icon-text-aligner .icon use {
|
||||
color: inherit;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.icon-text-aligner .icon.icon-outline use {
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
|
||||
Icon reset values - used to enable color customizations
|
||||
|
||||
-------------------------------- */
|
||||
|
||||
.icon {
|
||||
fill: currentColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.icon.icon-outline {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
.icon use {
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.icon.icon-outline use {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
|
||||
Stroke effects - Nucleo outline icons
|
||||
|
||||
- 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes)
|
||||
- 24px, 32px icons -> up to 2px stroke
|
||||
- 48px, 64px icons -> up to 4px stroke
|
||||
|
||||
-------------------------------- */
|
||||
|
||||
.icon-outline.icon-stroke-1 {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.icon-outline.icon-stroke-2 {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.icon-outline.icon-stroke-3 {
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.icon-outline.icon-stroke-4 {
|
||||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
.icon-outline.icon-stroke-1 use,
|
||||
.icon-outline.icon-stroke-3 use {
|
||||
-webkit-transform: translateX(0.5px) translateY(0.5px);
|
||||
-moz-transform: translateX(0.5px) translateY(0.5px);
|
||||
-ms-transform: translateX(0.5px) translateY(0.5px);
|
||||
-o-transform: translateX(0.5px) translateY(0.5px);
|
||||
transform: translateX(0.5px) translateY(0.5px);
|
||||
}
|
||||
@@ -363,50 +363,67 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Zoek buttons in de volledige formulier context (niet alleen de container)
|
||||
const form = document.getElementById(`${containerId}-form`) || document.querySelector('form');
|
||||
const buttons = form ? form.querySelectorAll('button[onclick*="handleListViewAction"]') :
|
||||
document.querySelectorAll('button[onclick*="handleListViewAction"]');
|
||||
// Zoek buttons zo dicht mogelijk bij de tabel met gegeven containerId
|
||||
// 1. Probeer eerst een expliciet formulier met id="<table_id>-form"
|
||||
let scopeEl = document.getElementById(`${containerId}-form`);
|
||||
|
||||
// 2. Zo niet, gebruik de dichtstbijzijnde .container rond de tabel zelf
|
||||
if (!scopeEl) {
|
||||
const tableEl = document.getElementById(containerId);
|
||||
if (tableEl) {
|
||||
scopeEl = tableEl.closest('.container') || tableEl.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Als er nog steeds geen scope is, val dan terug op de hele document-body
|
||||
const buttons = (scopeEl || document.body)
|
||||
.querySelectorAll('button[onclick*="handleListViewAction"]');
|
||||
|
||||
console.log(`Updating buttons voor ${containerId}, ${buttons.length} buttons gevonden, selectedRow:`, instance.selectedRow);
|
||||
|
||||
buttons.forEach(button => {
|
||||
// Parse the onclick attribute to get the action value and requiresSelection parameter
|
||||
const onclickAttr = button.getAttribute('onclick');
|
||||
const match = onclickAttr.match(/handleListViewAction\('([^']+)',\s*(true|false)\)/i);
|
||||
if (match) {
|
||||
const actionValue = match[1];
|
||||
const requiresSelection = match[2].toLowerCase() === 'true';
|
||||
const onclickAttr = button.getAttribute('onclick') || '';
|
||||
console.log('ListView _updateActionButtons: inspect button onclickAttr =', onclickAttr);
|
||||
|
||||
// Direct toepassen van requiresSelection-check
|
||||
if (requiresSelection) {
|
||||
// Controleer of er een geselecteerde rij is
|
||||
const isDisabled = !instance.selectedRow;
|
||||
button.disabled = isDisabled;
|
||||
// Robuustere regex: sta spaties toe en zowel enkele als dubbele quotes
|
||||
const match = onclickAttr.match(/handleListViewAction\s*\(\s*['"]([^'"\\]+)['"]\s*,\s*(true|false)/i);
|
||||
if (!match) {
|
||||
console.warn('ListView _updateActionButtons: geen match gevonden voor handleListViewAction-pattern op deze button');
|
||||
return;
|
||||
}
|
||||
|
||||
// Voeg/verwijder disabled class voor styling
|
||||
if (isDisabled) {
|
||||
button.classList.add('disabled');
|
||||
} else {
|
||||
button.classList.remove('disabled');
|
||||
}
|
||||
const actionValue = match[1];
|
||||
const requiresSelection = match[2].toLowerCase() === 'true';
|
||||
|
||||
console.log(`Button ${actionValue} updated: disabled=${isDisabled}`);
|
||||
// Direct toepassen van requiresSelection-check
|
||||
if (requiresSelection) {
|
||||
// Controleer of er een geselecteerde rij is
|
||||
const isDisabled = !instance.selectedRow;
|
||||
button.disabled = isDisabled;
|
||||
|
||||
// Voeg/verwijder disabled class voor styling
|
||||
if (isDisabled) {
|
||||
button.classList.add('disabled');
|
||||
} else {
|
||||
button.classList.remove('disabled');
|
||||
}
|
||||
|
||||
// Backup check op basis van actions in config (voor achterwaartse compatibiliteit)
|
||||
const action = instance.config.actions.find(a => a.value === actionValue);
|
||||
if (action && action.requiresSelection === true && !requiresSelection) {
|
||||
// Ook controleren op basis van action config
|
||||
const isDisabled = !instance.selectedRow;
|
||||
button.disabled = isDisabled;
|
||||
console.log(`Button ${actionValue} updated: disabled=${isDisabled}`);
|
||||
}
|
||||
|
||||
// Voeg/verwijder disabled class voor styling
|
||||
if (isDisabled) {
|
||||
button.classList.add('disabled');
|
||||
} else {
|
||||
button.classList.remove('disabled');
|
||||
}
|
||||
// Backup check op basis van actions in config (voor achterwaartse compatibiliteit)
|
||||
const action = instance.config.actions.find(a => a.value === actionValue);
|
||||
if (action && action.requiresSelection === true && !requiresSelection) {
|
||||
// Ook controleren op basis van action config
|
||||
const isDisabled = !instance.selectedRow;
|
||||
button.disabled = isDisabled;
|
||||
|
||||
// Voeg/verwijder disabled class voor styling
|
||||
if (isDisabled) {
|
||||
button.classList.add('disabled');
|
||||
} else {
|
||||
button.classList.remove('disabled');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{% block title %}Edit Specialist{% endblock %}
|
||||
|
||||
{% block content_title %}Edit Specialist{% endblock %}
|
||||
{% block content_description %}Edit a Specialist and its components{% endblock %}
|
||||
{% block content_description %}Edit a Specialist{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid px-0">
|
||||
@@ -31,11 +31,6 @@
|
||||
Configuration
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#components-tab" role="tab">
|
||||
Components
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -48,17 +43,17 @@
|
||||
{% 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 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 -->
|
||||
@@ -72,29 +67,6 @@
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Components Tab (Unified list view) -->
|
||||
<div class="tab-pane fade" id="components-tab" role="tabpanel">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="container">
|
||||
<input type="hidden" id="{{ components_table_id }}-selected-row" name="selected_row" value="">
|
||||
<input type="hidden" id="{{ components_table_id }}-action" name="action" value="">
|
||||
<div id="{{ components_table_id }}" class="tabulator-list-view"></div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<button type="button"
|
||||
data-table-id="{{ components_table_id }}"
|
||||
onclick="handleListViewAction('edit_component', true, event)"
|
||||
class="btn btn-primary requires-selection" disabled>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -105,299 +77,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Component Editor Modal (intentionally placed outside the main form to avoid nested forms) -->
|
||||
<div class="modal fade" id="componentModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="componentModalLabel">Edit Component</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="componentModalBody">
|
||||
<!-- Partial form will be injected here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script src="{{ url_for('static', filename='assets/js/eveai-list-view.js') }}"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const componentModalEl = document.getElementById('componentModal');
|
||||
const componentModalBody = document.getElementById('componentModalBody');
|
||||
const componentModalLabel = document.getElementById('componentModalLabel');
|
||||
let componentModal;
|
||||
|
||||
// Initialize the combined components list using EveAI.ListView
|
||||
function initComponentsList() {
|
||||
function tryInit() {
|
||||
if (window.EveAI && window.EveAI.ListView && typeof window.EveAI.ListView.initialize === 'function') {
|
||||
const cfg = {
|
||||
data: {{ components_data | tojson }},
|
||||
columns: {{ components_columns | tojson }},
|
||||
initialSort: {{ components_initial_sort | tojson }},
|
||||
index: {{ components_index | tojson }},
|
||||
actions: {{ components_actions | tojson }},
|
||||
tableHeight: {{ components_table_height|default(600) }},
|
||||
selectable: true
|
||||
};
|
||||
// Resolve string formatters (e.g., 'typeBadge') to functions before initializing Tabulator
|
||||
if (window.EveAI && window.EveAI.ListView && window.EveAI.ListView.formatters && Array.isArray(cfg.columns)) {
|
||||
cfg.columns = cfg.columns.map(col => {
|
||||
if (typeof col.formatter === 'string' && window.EveAI.ListView.formatters[col.formatter]) {
|
||||
return { ...col, formatter: window.EveAI.ListView.formatters[col.formatter] };
|
||||
}
|
||||
return col;
|
||||
});
|
||||
}
|
||||
const table = window.EveAI.ListView.initialize('{{ components_table_id }}', cfg);
|
||||
// Expose for quick debugging
|
||||
window.__componentsTable = table;
|
||||
|
||||
// Fallback: ensure instance registry is populated even if the module didn't store it yet
|
||||
window.EveAI.ListView.instances = window.EveAI.ListView.instances || {};
|
||||
if (!window.EveAI.ListView.instances['{{ components_table_id }}'] && table) {
|
||||
window.EveAI.ListView.instances['{{ components_table_id }}'] = {
|
||||
table: table,
|
||||
config: cfg,
|
||||
selectedRow: null
|
||||
};
|
||||
}
|
||||
// Ensure single-click selects exactly one row (defensive)
|
||||
if (table && typeof table.on === 'function') {
|
||||
try {
|
||||
table.on('rowClick', function(e, row){ row.getTable().deselectRow(); row.select(); });
|
||||
table.on('cellClick', function(e, cell){ const r = cell.getRow(); r.getTable().deselectRow(); r.select(); });
|
||||
table.on('rowSelectionChanged', function(data, rows){
|
||||
const inst = window.EveAI.ListView.instances['{{ components_table_id }}'];
|
||||
if (inst) { inst.selectedRow = rows.length ? rows[0].getData() : null; }
|
||||
if (typeof window.EveAI.ListView.updateActionButtons === 'function') {
|
||||
window.EveAI.ListView.updateActionButtons('{{ components_table_id }}');
|
||||
}
|
||||
});
|
||||
} catch (err) { console.warn('Could not attach selection handlers:', err); }
|
||||
}
|
||||
|
||||
// Register embedded action handler for this table
|
||||
window.EveAI.ListView.embeddedHandlers = window.EveAI.ListView.embeddedHandlers || {};
|
||||
window.EveAI.ListView.embeddedHandlers['{{ components_table_id }}'] = function(action, row, tableId){
|
||||
if (action !== 'edit_component' || !row) return;
|
||||
const id = row.id;
|
||||
const type = row.type_name; // 'agent' | 'task' | 'tool'
|
||||
|
||||
// Build edit URL from server-side templates with placeholder 0
|
||||
const editUrls = {
|
||||
agent: "{{ prefixed_url_for('interaction_bp.edit_agent', agent_id=0) }}",
|
||||
task: "{{ prefixed_url_for('interaction_bp.edit_task', task_id=0) }}",
|
||||
tool: "{{ prefixed_url_for('interaction_bp.edit_tool', tool_id=0) }}",
|
||||
};
|
||||
const url = (editUrls[type] || '').replace('/0', `/${id}`);
|
||||
fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
|
||||
.then(resp => { if (!resp.ok) throw new Error(`HTTP ${resp.status}`); return resp.text(); })
|
||||
.then(html => {
|
||||
componentModalBody.innerHTML = html;
|
||||
componentModalLabel.textContent = `Edit ${type.charAt(0).toUpperCase()+type.slice(1)}`;
|
||||
componentModalEl.dataset.componentType = type;
|
||||
componentModalEl.dataset.componentId = id;
|
||||
|
||||
// Helper to open modal once Bootstrap is available
|
||||
function openModal() {
|
||||
try {
|
||||
if (!componentModal) componentModal = new bootstrap.Modal(componentModalEl);
|
||||
componentModal.show();
|
||||
} catch (e) {
|
||||
console.error('Failed to open Bootstrap modal:', e);
|
||||
alert('Kan de editor niet openen (Bootstrap modal ontbreekt).');
|
||||
}
|
||||
}
|
||||
|
||||
if (window.bootstrap && typeof bootstrap.Modal === 'function') {
|
||||
openModal();
|
||||
} else {
|
||||
// Fallback: laad Bootstrap bundle dynamisch en open daarna
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js';
|
||||
script.onload = () => openModal();
|
||||
script.onerror = () => {
|
||||
console.error('Kon Bootstrap bundle niet laden');
|
||||
alert('Kan de editor niet openen omdat Bootstrap JS ontbreekt.');
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error loading editor:', err);
|
||||
alert('Error loading editor. Please try again.');
|
||||
});
|
||||
};
|
||||
} else {
|
||||
setTimeout(tryInit, 100);
|
||||
}
|
||||
}
|
||||
tryInit();
|
||||
}
|
||||
|
||||
initComponentsList();
|
||||
|
||||
// Note: we removed the modal footer submit button. The partial provides its own buttons.
|
||||
// Submissions are intercepted via the submit listener on componentModalBody below.
|
||||
|
||||
// Refresh the components list data after a successful save
|
||||
function refreshComponentsData() {
|
||||
const url = "{{ prefixed_url_for('interaction_bp.specialist_components_data', specialist_id=specialist_id) }}";
|
||||
fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
|
||||
.then(resp => resp.json())
|
||||
.then(payload => {
|
||||
const instance = window.EveAI.ListView.instances['{{ components_table_id }}'];
|
||||
if (instance && instance.table && Array.isArray(payload.data)) {
|
||||
instance.table.setData(payload.data);
|
||||
}
|
||||
})
|
||||
.catch(err => console.error('Failed to refresh components data', err));
|
||||
}
|
||||
|
||||
// Intercept native form submit events within the modal (handles Enter key too)
|
||||
componentModalBody.addEventListener('submit', function(e) {
|
||||
const formEl = e.target.closest('#componentEditForm');
|
||||
if (!formEl) return; // Not our form
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(formEl);
|
||||
|
||||
const componentType = componentModalEl.dataset.componentType;
|
||||
const componentId = componentModalEl.dataset.componentId;
|
||||
|
||||
// Build robust, prefix-aware absolute save URL from server-side templates
|
||||
const saveUrls = {
|
||||
agent: "{{ prefixed_url_for('interaction_bp.save_agent', agent_id=0) }}",
|
||||
task: "{{ prefixed_url_for('interaction_bp.save_task', task_id=0) }}",
|
||||
tool: "{{ prefixed_url_for('interaction_bp.save_tool', tool_id=0) }}",
|
||||
};
|
||||
const urlTemplate = saveUrls[componentType];
|
||||
const saveUrl = urlTemplate.replace('/0', `/${componentId}`);
|
||||
|
||||
fetch(saveUrl, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||||
})
|
||||
.then(async resp => {
|
||||
const ct = resp.headers.get('Content-Type') || '';
|
||||
if (resp.ok) {
|
||||
// Expect JSON success
|
||||
let data = null;
|
||||
try { data = await resp.json(); } catch (_) {}
|
||||
if (data && data.success) {
|
||||
componentModal.hide();
|
||||
refreshComponentsData();
|
||||
return;
|
||||
}
|
||||
throw new Error(data && data.message ? data.message : 'Save failed');
|
||||
}
|
||||
// For validation errors (400), server returns HTML partial -> replace modal body
|
||||
if (resp.status === 400 && ct.includes('text/html')) {
|
||||
const html = await resp.text();
|
||||
componentModalBody.innerHTML = html;
|
||||
return;
|
||||
}
|
||||
// Other errors
|
||||
let message = 'Save failed';
|
||||
if (ct.includes('application/json')) {
|
||||
try {
|
||||
const data = await resp.json();
|
||||
if (data && data.message) message = data.message;
|
||||
} catch (_) {}
|
||||
}
|
||||
throw new Error(message + ` (HTTP ${resp.status})`);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error saving component:', err);
|
||||
alert(err.message || 'Error saving component');
|
||||
});
|
||||
});
|
||||
});
|
||||
</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 %}
|
||||
|
||||
257
eveai_app/templates/interaction/tune_specialist.html
Normal file
257
eveai_app/templates/interaction/tune_specialist.html
Normal file
@@ -0,0 +1,257 @@
|
||||
{% extends 'base.html' %}
|
||||
{% from "macros.html" import render_field, render_selectable_table %}
|
||||
|
||||
{% block title %}Tune Specialist{% endblock %}
|
||||
|
||||
{% block content_title %}Tune Specialist{% endblock %}
|
||||
{% block content_description %}Edit agents, tasks and tools for specialist <b>{{ specialist.name }}</b> (ID: {{ specialist.id }}) <br>
|
||||
({{ specialist.type }} - {{ specialist.type_version }}){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid px-0">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mt-3 mb-3">
|
||||
<div>
|
||||
<a href="{{ prefixed_url_for('interaction_bp.specialists', for_redirect=True) }}" class="btn btn-outline-secondary btn-sm">Back to Specialists</a>
|
||||
<a href="{{ prefixed_url_for('interaction_bp.edit_specialist', specialist_id=specialist.id, for_redirect=True) }}" class="btn btn-outline-primary btn-sm">Edit Specialist Metadata</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Components</h6>
|
||||
{# Gebruik de generieke EveAI list view template zodat we dezelfde
|
||||
Tabulator + EveAI.ListView infrastructuur hergebruiken als elders.
|
||||
We mappen hier de component-variabelen naar de namen die
|
||||
eveai_list_view.html verwacht. #}
|
||||
{% with
|
||||
title=components_title,
|
||||
description=components_description,
|
||||
data=components_data,
|
||||
columns=components_columns,
|
||||
actions=components_actions,
|
||||
initial_sort=components_initial_sort,
|
||||
table_id=components_table_id,
|
||||
table_height=components_table_height
|
||||
%}
|
||||
{% include 'eveai_list_view.html' %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Component Editor Modal (intentionally placed outside the main content to avoid nested forms) -->
|
||||
<div class="modal fade" id="componentModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="componentModalLabel">Edit Component</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="componentModalBody">
|
||||
<!-- Partial form will be injected here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const componentModalEl = document.getElementById('componentModal');
|
||||
const componentModalBody = document.getElementById('componentModalBody');
|
||||
const componentModalLabel = document.getElementById('componentModalLabel');
|
||||
let componentModal;
|
||||
|
||||
const tableId = '{{ components_table_id }}';
|
||||
|
||||
// Initialiseer de specialist components tabel via de generieke EveAI.ListView
|
||||
function initializeComponentsTable(retriesLeft = 50) {
|
||||
if (!window.EveAI || !window.EveAI.ListView || !window.EveAI.ListView.initialize) {
|
||||
if (retriesLeft <= 0) {
|
||||
console.error('EveAI.ListView.initialize niet beschikbaar voor components tabel');
|
||||
return;
|
||||
}
|
||||
return setTimeout(() => initializeComponentsTable(retriesLeft - 1), 100);
|
||||
}
|
||||
|
||||
// Bouw dezelfde configuratie op als in list_view.html, maar dan voor de components
|
||||
const tableConfig = {
|
||||
data: {{ components_data | tojson }},
|
||||
columns: {{ components_columns | tojson }},
|
||||
initialSort: {{ components_initial_sort | tojson }},
|
||||
actions: {{ components_actions | tojson }},
|
||||
tableHeight: {{ components_table_height|default(600) }},
|
||||
selectable: true
|
||||
};
|
||||
|
||||
const tabulatorTable = window.EveAI.ListView.initialize(tableId, tableConfig);
|
||||
if (!tabulatorTable) {
|
||||
console.error('Kon de Tabulator tabel voor specialist components niet initialiseren');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Specialist components Tabulator tabel succesvol geïnitialiseerd');
|
||||
}
|
||||
|
||||
// Registreer de pagina-specifieke embedded handler voor de actie 'edit_component'
|
||||
function registerEmbeddedHandler(retriesLeft = 50) {
|
||||
if (!window.EveAI || !window.EveAI.ListView || !window.EveAI.ListView.instances) {
|
||||
if (retriesLeft <= 0) {
|
||||
console.error('EveAI.ListView.instances niet beschikbaar voor components tabel');
|
||||
return;
|
||||
}
|
||||
return setTimeout(() => registerEmbeddedHandler(retriesLeft - 1), 100);
|
||||
}
|
||||
|
||||
const instances = window.EveAI.ListView.instances;
|
||||
if (!instances[tableId] || !instances[tableId].table) {
|
||||
if (retriesLeft <= 0) {
|
||||
console.error(`Geen EveAI.ListView instance gevonden voor tabel ${tableId}`);
|
||||
return;
|
||||
}
|
||||
return setTimeout(() => registerEmbeddedHandler(retriesLeft - 1), 100);
|
||||
}
|
||||
|
||||
window.EveAI.ListView.embeddedHandlers = window.EveAI.ListView.embeddedHandlers || {};
|
||||
|
||||
window.EveAI.ListView.embeddedHandlers[tableId] = function(action, row, tId) {
|
||||
if (action !== 'edit_component' || !row) return;
|
||||
const id = row.id;
|
||||
const type = row.type_name; // 'agent' | 'task' | 'tool'
|
||||
|
||||
// Build edit URL from server-side templates with placeholder 0
|
||||
const editUrls = {
|
||||
agent: "{{ prefixed_url_for('interaction_bp.edit_agent', agent_id=0) }}",
|
||||
task: "{{ prefixed_url_for('interaction_bp.edit_task', task_id=0) }}",
|
||||
tool: "{{ prefixed_url_for('interaction_bp.edit_tool', tool_id=0) }}",
|
||||
};
|
||||
const url = (editUrls[type] || '').replace('/0', `/${id}`);
|
||||
fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
|
||||
.then(resp => { if (!resp.ok) throw new Error(`HTTP ${resp.status}`); return resp.text(); })
|
||||
.then(html => {
|
||||
componentModalBody.innerHTML = html;
|
||||
componentModalLabel.textContent = `Edit ${type.charAt(0).toUpperCase()+type.slice(1)}`;
|
||||
componentModalEl.dataset.componentType = type;
|
||||
componentModalEl.dataset.componentId = id;
|
||||
|
||||
// Helper om modal te openen zodra Bootstrap beschikbaar is
|
||||
function openModal() {
|
||||
try {
|
||||
if (!componentModal) componentModal = new bootstrap.Modal(componentModalEl);
|
||||
componentModal.show();
|
||||
} catch (e) {
|
||||
console.error('Failed to open Bootstrap modal:', e);
|
||||
alert('Kan de editor niet openen (Bootstrap modal ontbreekt).');
|
||||
}
|
||||
}
|
||||
|
||||
if (window.bootstrap && typeof bootstrap.Modal === 'function') {
|
||||
openModal();
|
||||
} else {
|
||||
// Fallback: laad Bootstrap bundle dynamisch en open daarna
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js';
|
||||
script.onload = () => openModal();
|
||||
script.onerror = () => {
|
||||
console.error('Kon Bootstrap bundle niet laden');
|
||||
alert('Kan de editor niet openen omdat Bootstrap JS ontbreekt.');
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error loading editor:', err);
|
||||
alert('Error loading editor. Please try again.');
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Eerst de tabel initialiseren, daarna de embedded handler registreren
|
||||
initializeComponentsTable();
|
||||
registerEmbeddedHandler();
|
||||
|
||||
// Refresh de components list data na een succesvolle save
|
||||
function refreshComponentsData() {
|
||||
const url = "{{ prefixed_url_for('interaction_bp.specialist_components_data', specialist_id=specialist_id) }}";
|
||||
fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
|
||||
.then(resp => resp.json())
|
||||
.then(payload => {
|
||||
if (!window.EveAI || !window.EveAI.ListView || !window.EveAI.ListView.instances) return;
|
||||
const instance = window.EveAI.ListView.instances[tableId];
|
||||
if (instance && instance.table && Array.isArray(payload.data)) {
|
||||
instance.table.setData(payload.data);
|
||||
}
|
||||
})
|
||||
.catch(err => console.error('Failed to refresh components data', err));
|
||||
}
|
||||
|
||||
// Intercepteer form submits binnen de modal (ook Enter-key)
|
||||
componentModalBody.addEventListener('submit', function(e) {
|
||||
const formEl = e.target.closest('#componentEditForm');
|
||||
if (!formEl) return; // Niet ons form
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(formEl);
|
||||
|
||||
const componentType = componentModalEl.dataset.componentType;
|
||||
const componentId = componentModalEl.dataset.componentId;
|
||||
|
||||
// Bouw prefix-bewuste absolute save URL op basis van server-side templates
|
||||
const saveUrls = {
|
||||
agent: "{{ prefixed_url_for('interaction_bp.save_agent', agent_id=0) }}",
|
||||
task: "{{ prefixed_url_for('interaction_bp.save_task', task_id=0) }}",
|
||||
tool: "{{ prefixed_url_for('interaction_bp.save_tool', tool_id=0) }}",
|
||||
};
|
||||
const urlTemplate = saveUrls[componentType];
|
||||
const saveUrl = urlTemplate.replace('/0', `/${componentId}`);
|
||||
|
||||
fetch(saveUrl, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||||
})
|
||||
.then(async resp => {
|
||||
const ct = resp.headers.get('Content-Type') || '';
|
||||
if (resp.ok) {
|
||||
// Verwacht JSON succes
|
||||
let data = null;
|
||||
try { data = await resp.json(); } catch (_) {}
|
||||
if (data && data.success) {
|
||||
if (componentModal) {
|
||||
componentModal.hide();
|
||||
}
|
||||
refreshComponentsData();
|
||||
return;
|
||||
}
|
||||
throw new Error(data && data.message ? data.message : 'Save failed');
|
||||
}
|
||||
// Validatiefouten (400) → server stuurt HTML partial terug
|
||||
if (resp.status === 400 && ct.includes('text/html')) {
|
||||
const html = await resp.text();
|
||||
componentModalBody.innerHTML = html;
|
||||
return;
|
||||
}
|
||||
// Andere fouten
|
||||
let message = 'Save failed';
|
||||
if (ct.includes('application/json')) {
|
||||
try {
|
||||
const data = await resp.json();
|
||||
if (data && data.message) message = data.message;
|
||||
} catch (_) {}
|
||||
}
|
||||
throw new Error(message + ` (HTTP ${resp.status})`);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error saving component:', err);
|
||||
alert(err.message || 'Error saving component');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -282,26 +282,44 @@ def edit_specialist(specialist_id):
|
||||
else:
|
||||
form_validation_failed(request, form)
|
||||
|
||||
# Build combined components list view config for embedding
|
||||
from eveai_app.views.list_views.interaction_list_views import get_specialist_components_list_view
|
||||
components_config = get_specialist_components_list_view(specialist)
|
||||
|
||||
return render_template('interaction/edit_specialist.html',
|
||||
form=form,
|
||||
specialist_id=specialist_id,
|
||||
components_title=components_config.get('title'),
|
||||
components_data=components_config.get('data'),
|
||||
components_columns=components_config.get('columns'),
|
||||
components_actions=components_config.get('actions'),
|
||||
components_initial_sort=components_config.get('initial_sort'),
|
||||
components_table_id=components_config.get('table_id'),
|
||||
components_table_height=components_config.get('table_height'),
|
||||
components_description=components_config.get('description'),
|
||||
components_index=components_config.get('index'),
|
||||
prefixed_url_for=prefixed_url_for,
|
||||
svg_path=svg_path, )
|
||||
|
||||
|
||||
@interaction_bp.route('/tune_specialist/<int:specialist_id>', methods=['GET'])
|
||||
@roles_accepted('Super User', 'Partner Admin', 'Tenant Admin')
|
||||
def tune_specialist(specialist_id):
|
||||
"""Standalone tuning view voor het beheren van agents, tasks en tools van een specialist.
|
||||
|
||||
Deze view biedt dezelfde component-editor functionaliteit die voorheen in de
|
||||
Components-tab van ``edit_specialist`` zat, maar dan als aparte pagina.
|
||||
"""
|
||||
specialist = Specialist.query.get_or_404(specialist_id)
|
||||
|
||||
# Gebruikt dezelfde gecombineerde componenten-configuratie als de voormalige tab
|
||||
from eveai_app.views.list_views.interaction_list_views import get_specialist_components_list_view
|
||||
components_config = get_specialist_components_list_view(specialist)
|
||||
|
||||
return render_template(
|
||||
'interaction/tune_specialist.html',
|
||||
specialist=specialist,
|
||||
specialist_id=specialist_id,
|
||||
components_title=components_config.get('title'),
|
||||
components_data=components_config.get('data'),
|
||||
components_columns=components_config.get('columns'),
|
||||
components_actions=components_config.get('actions'),
|
||||
components_initial_sort=components_config.get('initial_sort'),
|
||||
components_table_id=components_config.get('table_id'),
|
||||
components_table_height=components_config.get('table_height'),
|
||||
components_description=components_config.get('description'),
|
||||
components_index=components_config.get('index'),
|
||||
prefixed_url_for=prefixed_url_for,
|
||||
)
|
||||
|
||||
|
||||
@interaction_bp.route('/specialists', methods=['GET', 'POST'])
|
||||
@roles_accepted('Super User', 'Partner Admin', 'Tenant Admin')
|
||||
def specialists():
|
||||
@@ -323,6 +341,8 @@ def handle_specialist_selection():
|
||||
|
||||
if action == "edit_specialist":
|
||||
return redirect(prefixed_url_for('interaction_bp.edit_specialist', specialist_id=specialist_id, for_redirect=True))
|
||||
elif action == "tune_specialist":
|
||||
return redirect(prefixed_url_for('interaction_bp.tune_specialist', specialist_id=specialist_id, for_redirect=True))
|
||||
elif action == "execute_specialist":
|
||||
return redirect(prefixed_url_for('interaction_bp.execute_specialist', specialist_id=specialist_id, for_redirect=True))
|
||||
|
||||
|
||||
@@ -38,6 +38,7 @@ def get_specialists_list_view():
|
||||
# Action definitions
|
||||
actions = [
|
||||
{'value': 'edit_specialist', 'text': 'Edit Specialist', 'class': 'btn-primary', 'requiresSelection': True},
|
||||
{'value': 'tune_specialist', 'text': 'Tune Specialist', 'class': 'btn-secondary', 'requiresSelection': True},
|
||||
{'value': 'execute_specialist', 'text': 'Execute Specialist', 'class': 'btn-primary', 'requiresSelection': True},
|
||||
{'value': 'create_specialist', 'text': 'Register Specialist', 'class': 'btn-success', 'position': 'right', 'requiresSelection': False}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user