|
|
|
|
@@ -1,117 +0,0 @@
|
|
|
|
|
<!-- [DEF:App:Component] -->
|
|
|
|
|
<!--
|
|
|
|
|
@SEMANTICS: main, entrypoint, layout, navigation
|
|
|
|
|
@PURPOSE: The root component of the frontend application. Manages navigation and layout.
|
|
|
|
|
@LAYER: UI
|
|
|
|
|
@RELATION: DEPENDS_ON -> frontend/src/pages/Dashboard.svelte
|
|
|
|
|
@RELATION: DEPENDS_ON -> frontend/src/pages/Settings.svelte
|
|
|
|
|
@RELATION: DEPENDS_ON -> frontend/src/lib/stores.js
|
|
|
|
|
|
|
|
|
|
@INVARIANT: Navigation state must be persisted in the currentPage store.
|
|
|
|
|
-->
|
|
|
|
|
<script>
|
|
|
|
|
// [SECTION: IMPORTS]
|
|
|
|
|
import { get } from 'svelte/store';
|
|
|
|
|
import Dashboard from './pages/Dashboard.svelte';
|
|
|
|
|
import Settings from './pages/Settings.svelte';
|
|
|
|
|
import { selectedPlugin, selectedTask, currentPage } from './lib/stores.js';
|
|
|
|
|
import TaskRunner from './components/TaskRunner.svelte';
|
|
|
|
|
import DynamicForm from './components/DynamicForm.svelte';
|
|
|
|
|
import { api } from './lib/api.js';
|
|
|
|
|
import Toast from './components/Toast.svelte';
|
|
|
|
|
// [/SECTION]
|
|
|
|
|
|
|
|
|
|
// [DEF:handleFormSubmit:Function]
|
|
|
|
|
/**
|
|
|
|
|
* @purpose Handles form submission for task creation.
|
|
|
|
|
* @pre event.detail contains form parameters.
|
|
|
|
|
* @post Task is created and selectedTask is updated.
|
|
|
|
|
* @param {CustomEvent} event - The submit event from DynamicForm.
|
|
|
|
|
*/
|
|
|
|
|
async function handleFormSubmit(event) {
|
|
|
|
|
console.log("[App.handleFormSubmit][Action] Handling form submission for task creation.");
|
|
|
|
|
const params = event.detail;
|
|
|
|
|
try {
|
|
|
|
|
const plugin = get(selectedPlugin);
|
|
|
|
|
const task = await api.createTask(plugin.id, params);
|
|
|
|
|
selectedTask.set(task);
|
|
|
|
|
selectedPlugin.set(null);
|
|
|
|
|
console.log(`[App.handleFormSubmit][Coherence:OK] Task created id=${task.id}`);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error(`[App.handleFormSubmit][Coherence:Failed] Task creation failed error=${error}`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// [/DEF:handleFormSubmit:Function]
|
|
|
|
|
|
|
|
|
|
// [DEF:navigate:Function]
|
|
|
|
|
/**
|
|
|
|
|
* @purpose Changes the current page and resets state.
|
|
|
|
|
* @pre Target page name is provided.
|
|
|
|
|
* @post currentPage store is updated and selection state is reset.
|
|
|
|
|
* @param {string} page - Target page name.
|
|
|
|
|
*/
|
|
|
|
|
function navigate(page) {
|
|
|
|
|
console.log(`[App.navigate][Action] Navigating to ${page}.`);
|
|
|
|
|
// Reset selection first
|
|
|
|
|
if (page !== get(currentPage)) {
|
|
|
|
|
selectedPlugin.set(null);
|
|
|
|
|
selectedTask.set(null);
|
|
|
|
|
}
|
|
|
|
|
// Then set page
|
|
|
|
|
currentPage.set(page);
|
|
|
|
|
}
|
|
|
|
|
// [/DEF:navigate:Function]
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- [SECTION: TEMPLATE] -->
|
|
|
|
|
<Toast />
|
|
|
|
|
|
|
|
|
|
<main class="bg-gray-50 min-h-screen">
|
|
|
|
|
<header class="bg-white shadow-md p-4 flex justify-between items-center">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="text-3xl font-bold text-gray-800 focus:outline-none"
|
|
|
|
|
on:click={() => navigate('dashboard')}
|
|
|
|
|
>
|
|
|
|
|
Superset Tools
|
|
|
|
|
</button>
|
|
|
|
|
<nav class="space-x-4">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
on:click={() => navigate('dashboard')}
|
|
|
|
|
class="text-gray-600 hover:text-blue-600 font-medium {$currentPage === 'dashboard' ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
|
|
|
|
|
>
|
|
|
|
|
Dashboard
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
on:click={() => navigate('settings')}
|
|
|
|
|
class="text-gray-600 hover:text-blue-600 font-medium {$currentPage === 'settings' ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
|
|
|
|
|
>
|
|
|
|
|
Settings
|
|
|
|
|
</button>
|
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="p-4">
|
|
|
|
|
{#if $currentPage === 'settings'}
|
|
|
|
|
<Settings />
|
|
|
|
|
{:else if $selectedTask}
|
|
|
|
|
<TaskRunner />
|
|
|
|
|
<button on:click={() => selectedTask.set(null)} class="mt-4 bg-blue-500 text-white p-2 rounded">
|
|
|
|
|
Back to Task List
|
|
|
|
|
</button>
|
|
|
|
|
{:else if $selectedPlugin}
|
|
|
|
|
<h2 class="text-2xl font-bold mb-4">{$selectedPlugin.name}</h2>
|
|
|
|
|
<DynamicForm schema={$selectedPlugin.schema} on:submit={handleFormSubmit} />
|
|
|
|
|
<button on:click={() => selectedPlugin.set(null)} class="mt-4 bg-gray-500 text-white p-2 rounded">
|
|
|
|
|
Back to Dashboard
|
|
|
|
|
</button>
|
|
|
|
|
{:else}
|
|
|
|
|
<Dashboard />
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
<!-- [/SECTION] -->
|
|
|
|
|
|
|
|
|
|
<!-- [/DEF:App:Component] -->
|
