65 lines
2.1 KiB
Svelte
Executable File
65 lines
2.1 KiB
Svelte
Executable File
<!-- [DEF:Dashboard:Component] -->
|
|
<!--
|
|
@SEMANTICS: dashboard, plugins, tools, list
|
|
@PURPOSE: Displays the list of available plugins and allows selecting one.
|
|
@LAYER: UI
|
|
@RELATION: DEPENDS_ON -> frontend/src/lib/stores.js
|
|
|
|
@PROPS: None
|
|
@EVENTS: None
|
|
-->
|
|
<script>
|
|
// [SECTION: IMPORTS]
|
|
import { onMount } from 'svelte';
|
|
import { plugins, fetchPlugins, selectedPlugin } from '../lib/stores.js';
|
|
// [/SECTION]
|
|
|
|
// [DEF:onMount:Function]
|
|
/**
|
|
* @purpose Fetch plugins when the component mounts.
|
|
* @pre Component is mounting.
|
|
* @post plugins store is populated with available tools.
|
|
*/
|
|
onMount(async () => {
|
|
console.log("[Dashboard][Entry] Component mounted, fetching plugins.");
|
|
await fetchPlugins();
|
|
});
|
|
// [/DEF:onMount:Function]
|
|
|
|
// [DEF:selectPlugin:Function]
|
|
/**
|
|
* @purpose Selects a plugin to display its form.
|
|
* @pre plugin object is provided.
|
|
* @post selectedPlugin store is updated.
|
|
* @param {Object} plugin - The plugin object to select.
|
|
*/
|
|
function selectPlugin(plugin) {
|
|
console.log(`[Dashboard][Action] Selecting plugin: ${plugin.id}`);
|
|
selectedPlugin.set(plugin);
|
|
}
|
|
// [/DEF:selectPlugin:Function]
|
|
</script>
|
|
|
|
<!-- [SECTION: TEMPLATE] -->
|
|
<div class="container mx-auto p-4">
|
|
<h1 class="text-2xl font-bold mb-4">Available Tools</h1>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{#each $plugins as plugin}
|
|
<div
|
|
class="border rounded-lg p-4 cursor-pointer hover:bg-gray-100"
|
|
on:click={() => selectPlugin(plugin)}
|
|
role="button"
|
|
tabindex="0"
|
|
on:keydown={(e) => e.key === 'Enter' && selectPlugin(plugin)}
|
|
>
|
|
<h2 class="text-xl font-semibold">{plugin.name}</h2>
|
|
<p class="text-gray-600">{plugin.description}</p>
|
|
<span class="text-sm text-gray-400">v{plugin.version}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
<!-- [/SECTION] -->
|
|
|
|
<!-- [/DEF:Dashboard:Component] -->
|