321 lines
13 KiB
JavaScript
321 lines
13 KiB
JavaScript
document.addEventListener('DOMContentLoaded',async function(){
|
|
// Globale Hilfsfunktionen und Initialisierung
|
|
|
|
// State-Management
|
|
const globalState = {
|
|
workspaces: [],
|
|
currentWorkspace: null,
|
|
availableFiles: [],
|
|
availableAgents: [],
|
|
availablePrompts: [],
|
|
};
|
|
|
|
async function loadModuleHtml(filename) {
|
|
// Backend-URL für HTML Module verwenden
|
|
try {
|
|
const apiBaseUrl = `${window.location.protocol}//${window.location.hostname}:8000`;
|
|
const modulePath = `${apiBaseUrl}/webparts/${filename}`;
|
|
console.log(`Lade HTML-Modul von: ${modulePath}`);
|
|
const response = await fetch(modulePath);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP-Fehler beim Laden des Moduls: ${response.status} ${response.statusText}`);
|
|
}
|
|
const htmlContent = await response.text();
|
|
return htmlContent;
|
|
} catch (error) {
|
|
console.error(`Fehler beim Laden des Moduls ${filename}:`, error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
async function loadModuleJs(filename) {
|
|
try {
|
|
const apiBaseUrl = `${window.location.protocol}//${window.location.hostname}:8000`;
|
|
const response = await fetch(`${apiBaseUrl}/webparts/${filename}`);
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load JS module: ${response.status} ${response.statusText}`);
|
|
}
|
|
const jsContent = await response.text();
|
|
// Create a script element and add it to the page
|
|
const scriptElement = document.createElement('script');
|
|
scriptElement.textContent = jsContent;
|
|
document.head.appendChild(scriptElement);
|
|
console.log(`JS module ${filename} loaded successfully`);
|
|
} catch (error) {
|
|
console.error(`Error loading JS module ${filename}:`, error);
|
|
}
|
|
}
|
|
|
|
function fetchFromApi(url) {
|
|
// Basis-URL für die API mit korrektem Port
|
|
const apiBaseUrl = `${window.location.protocol}//${window.location.hostname}:8000`;
|
|
const fullUrl = url.startsWith('http') ? url : `${apiBaseUrl}${url}`;
|
|
console.log(`Fetching data from: ${fullUrl}`);
|
|
return fullUrl
|
|
}
|
|
|
|
// Hilfsfunktion zum Abrufen von Daten vom Backend
|
|
async function fetchData(url) {
|
|
try {
|
|
fullUrl=fetchFromApi(url)
|
|
const response = await fetch(fullUrl);
|
|
if (!response.ok) {
|
|
throw new Error(`Format-Fehler beim Abrufen von ${fullUrl}: ${response.statusText}`);
|
|
}
|
|
return await response.json();
|
|
} catch (error) {
|
|
console.error(`Genereller Fehler beim Abrufen von ${fullUrl}:`, error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
// Hilfsfunktion zum Senden von Daten an das Backend
|
|
async function postData(url, data) {
|
|
try {
|
|
fullUrl=fetchFromApi(url)
|
|
const response = await fetch(fullUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(data),
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`Fehler beim Senden an ${fullUrl}: ${response.statusText}`);
|
|
}
|
|
return await response.json();
|
|
} catch (error) {
|
|
console.error(`Fehler beim Senden an ${fullUrl}:`, error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
// Globale Initialisierungsfunktion
|
|
async function initialize() {
|
|
try {
|
|
// Load Module Scripts
|
|
loadModuleJs("part-workflow.js")
|
|
loadModuleJs("part-data.js")
|
|
loadModuleJs("part-prompts.js")
|
|
loadModuleJs("part-agents.js")
|
|
|
|
// Daten vom Backend abrufen
|
|
globalState.workspaces = await fetchData('/api/workspaces');
|
|
globalState.availableFiles = await fetchData('/api/files');
|
|
globalState.availablePrompts = await fetchData('/api/prompts');
|
|
|
|
// Wenn Workspaces vorhanden sind, den ersten auswählen
|
|
if (globalState.workspaces.length > 0) {
|
|
globalState.currentWorkspace = globalState.workspaces[0];
|
|
|
|
// Agenten für den aktuellen Workspace abrufen
|
|
globalState.availableAgents = await fetchData(`/api/agents?workspace_id=${globalState.currentWorkspace.id}`);
|
|
console.info("Debug agents set for: "+`/api/agents?workspace_id=${globalState.currentWorkspace.id}`+", result="+globalState.availableAgents)
|
|
}
|
|
|
|
// Event-Listener für Menüpunkte
|
|
setupMenuNavigation();
|
|
|
|
// Workspaces rendern, nachdem alle Daten geladen wurden
|
|
renderWorkspaces();
|
|
|
|
} catch (error) {
|
|
console.error("Fehler beim Initialisieren der Daten:", error);
|
|
}
|
|
}
|
|
|
|
// Menünavigation einrichten
|
|
function setupMenuNavigation() {
|
|
const menuItems = {
|
|
'workflow': document.querySelector('a[href="#workflow"]').parentElement,
|
|
'data': document.querySelector('a[href="#data"]').parentElement,
|
|
'prompts': document.querySelector('a[href="#prompts"]').parentElement,
|
|
'agents': document.querySelector('a[href="#agents"]').parentElement
|
|
};
|
|
|
|
const moduleContainers = {
|
|
'workflow': document.getElementById('part-workflow'),
|
|
'data': document.getElementById('part-data'),
|
|
'prompts': document.getElementById('part-prompts'),
|
|
'agents': document.getElementById('part-agents')
|
|
};
|
|
|
|
// Menüpunkte initialisieren
|
|
Object.keys(menuItems).forEach(key => {
|
|
menuItems[key].addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Aktive Klasse von allen Menüpunkten entfernen
|
|
Object.values(menuItems).forEach(item => item.classList.remove('active'));
|
|
|
|
// Alle Module ausblenden
|
|
Object.values(moduleContainers).forEach(container => container.style.display = 'none')
|
|
|
|
// Aktuelle Ansicht aktivieren
|
|
this.classList.add('active');
|
|
moduleContainers[key].style.display = 'block';
|
|
|
|
// Laden und Aktualisieren der Moduldaten
|
|
switch(key) {
|
|
case 'workflow':
|
|
loadWorkflowModule();
|
|
break;
|
|
case 'data':
|
|
loadDataModule();
|
|
break;
|
|
case 'prompts':
|
|
loadPromptsModule();
|
|
break;
|
|
case 'agents':
|
|
loadAgentsModule();
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Initial das Workflow-Modul laden
|
|
loadWorkflowModule();
|
|
}
|
|
|
|
// Modul-Ladungsfunktionen
|
|
async function loadWorkflowModule() {
|
|
try {
|
|
// Dynamisches Laden des Workflow-Moduls
|
|
const moduleContent = await loadModuleHtml('part-workflow.html');
|
|
const workflowModule = document.getElementById('part-workflow');
|
|
workflowModule.innerHTML = moduleContent;
|
|
|
|
// Initialisiere Workflow-Modul-Funktionalität
|
|
if (window.initWorkflowModule) {
|
|
window.initWorkflowModule(globalState);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden des Workflow-Moduls:", error);
|
|
}
|
|
}
|
|
|
|
async function loadDataModule() {
|
|
try {
|
|
// Dynamisches Laden des Daten-Moduls
|
|
const moduleContent = await loadModuleHtml('part-data.html');
|
|
const dataModule = document.getElementById('part-data');
|
|
dataModule.innerHTML = moduleContent;
|
|
|
|
// Initialisiere Daten-Modul-Funktionalität
|
|
if (window.initDataModule) {
|
|
window.initDataModule(globalState);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden des Daten-Moduls:", error);
|
|
}
|
|
}
|
|
|
|
async function loadPromptsModule() {
|
|
try {
|
|
// Dynamisches Laden des Prompts-Moduls
|
|
const moduleContent = await loadModuleHtml('part-prompts.html');
|
|
const promptsModule = document.getElementById('part-prompts');
|
|
promptsModule.innerHTML = moduleContent;
|
|
|
|
// Initialisiere Prompts-Modul-Funktionalität
|
|
if (window.initPromptsModule) {
|
|
window.initPromptsModule(globalState);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden des Prompts-Moduls:", error);
|
|
}
|
|
}
|
|
|
|
async function loadAgentsModule() {
|
|
try {
|
|
// Dynamisches Laden des Agenten-Moduls
|
|
const moduleContent = await loadModuleHtml('part-agents.html');
|
|
const agentsModule = document.getElementById('part-agents');
|
|
agentsModule.innerHTML = moduleContent;
|
|
|
|
// Initialisiere Agenten-Modul-Funktionalität
|
|
if (window.initAgentsModule) {
|
|
window.initAgentsModule(globalState);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden des Agenten-Moduls:", error);
|
|
}
|
|
}
|
|
|
|
// Workspace-Funktionen
|
|
function renderWorkspaces() {
|
|
const workspaceList = document.getElementById('workspace-list');
|
|
workspaceList.innerHTML = '';
|
|
|
|
globalState.workspaces.forEach(workspace => {
|
|
const li = document.createElement('li');
|
|
li.className = `workspace-item ${workspace.id === globalState.currentWorkspace?.id ? 'active' : ''}`;
|
|
li.innerHTML = `
|
|
<i class="fas fa-folder"></i>
|
|
<span>${workspace.name}</span>
|
|
`;
|
|
li.addEventListener('click', async () => {
|
|
globalState.currentWorkspace = workspace;
|
|
|
|
// Agenten für den neuen Workspace abrufen
|
|
globalState.availableAgents = await fetchData(`/api/agents?workspace_id=${workspace.id}`);
|
|
|
|
renderWorkspaces();
|
|
|
|
// Aktualisiere aktive Module
|
|
loadWorkflowModule();
|
|
loadAgentsModule();
|
|
});
|
|
workspaceList.appendChild(li);
|
|
});
|
|
}
|
|
|
|
// Gemeinsame Utility-Funktionen
|
|
function handleFileUpload(fileInput, onUploadSuccess) {
|
|
return async () => {
|
|
if (fileInput.files.length > 0) {
|
|
for (const file of fileInput.files) {
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
const response = await fetch('/files/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Fehler beim Hochladen der Datei: ${response.statusText}`);
|
|
}
|
|
|
|
const newFile = await response.json();
|
|
|
|
if (onUploadSuccess) {
|
|
onUploadSuccess(newFile);
|
|
}
|
|
|
|
// Globale Dateiliste aktualisieren
|
|
globalState.availableFiles.push(newFile);
|
|
} catch (error) {
|
|
console.error("Fehler beim Hochladen der Datei:", error);
|
|
}
|
|
}
|
|
|
|
// Eingabefeld zurücksetzen
|
|
fileInput.value = "";
|
|
}
|
|
};
|
|
}
|
|
|
|
// Initialisierung starten
|
|
initialize();
|
|
|
|
// Globale Funktionen für Module exportieren
|
|
window.globalUtils = {
|
|
fetchData,
|
|
postData,
|
|
handleFileUpload,
|
|
renderWorkspaces
|
|
};
|
|
}
|
|
);
|