Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📂 Fixes file system view

Browse Source
This commit is contained in:
Rune Harlyk
2025-03-08 15:55:13 +01:00
committed by Rune Harlyk
parent 99660b9a23
commit 5a24038d68
3 changed files with 84 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/routes/system/filesystem/File.svelte
+1 -1
View File
@@ -6,6 +6,6 @@
<!-- svelte-ignore a11y_interactive_supports_focus --> <!-- svelte-ignore a11y_interactive_supports_focus -->
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<span role="button" class="flex pl-4 gap-2 items-center" onclick={selected}> <span role="button" class="flex pl-4 gap-2 items-center" onclick={() => selected(name)}>
<FileIcon />{name} <FileIcon />{name}
</span> </span>
app/src/routes/system/filesystem/FileSystem.svelte
+52 -51
View File
@@ -1,62 +1,63 @@
<script lang="ts"> <script lang="ts">
import SettingsCard from "$lib/components/SettingsCard.svelte"; import SettingsCard from '$lib/components/SettingsCard.svelte'
import Spinner from "$lib/components/Spinner.svelte"; import Spinner from '$lib/components/Spinner.svelte'
import Folder from "./Folder.svelte"; import Folder from './Folder.svelte'
import { api } from "$lib/api"; import { api } from '$lib/api'
import type { Directory } from "$lib/types/models"; import type { Directory } from '$lib/types/models'
import { FolderIcon } from "$lib/components/icons"; import { FolderIcon } from '$lib/components/icons'
let filename = $state(''); let filename = $state('')
const getFiles = async () => { const getFiles = async () => {
const result = await api.get<Directory>('/api/files') const result = await api.get<Directory>('/api/files')
if (result.isOk()) { if (result.isOk()) {
return result.inner; return result.inner
}
return { root: {} }
};
const getContent = async (name: string) => {
if (!name) return '';
const result = await api.get(`/api/config/${name}`)
if (result.isOk()) {
return JSON.stringify(result.inner, null, 4);
}
return ''
} }
return { root: {} }
}
const deleteFile = async (name: string) => { const getContent = async (name: string) => {
const result = await api.post(`/api/files/delete`, { file: "/config/"+ name }) if (!name) return ''
if (result.isOk()) { const result = await api.get(`/api/config/${name}`)
return result.inner; if (result.isOk()) {
} return JSON.stringify(result.inner, null, 4)
return ''
} }
return ''
}
const updateSelected = async (event:any) => { const deleteFile = async (name: string) => {
filename = event.detail.name; const result = await api.post(`/api/files/delete`, { file: '/config/' + name })
if (result.isOk()) {
return result.inner
} }
return ''
}
const updateSelected = async (name: string) => {
filename = name
}
</script> </script>
<SettingsCard collapsible={false}>
{#snippet icon()}
<FolderIcon class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
{/snippet}
{#snippet title()}
<span >File System</span>
{/snippet}
<div class="w-full overflow-x-auto">
{#await getFiles()}
<Spinner />
{:then files}
<Folder name="/" files={files.root} expanded on:selected={updateSelected}/>
{/await}
{#await getContent(filename)} <SettingsCard collapsible={false}>
<div> {#snippet icon()}
<Spinner /> <FolderIcon class="flex-shrink-0 mr-2 h-6 w-6 self-end" />
</div> {/snippet}
{:then content} {#snippet title()}
<pre>{content}</pre> <span>File System</span>
{/await} {/snippet}
</div> <div class="w-full overflow-x-auto">
{#await getFiles()}
<Spinner />
{:then files}
<Folder name="/" files={files.root} expanded selected={updateSelected} />
{/await}
{#await getContent(filename)}
<div>
<Spinner />
</div>
{:then content}
<pre>{content}</pre>
{/await}
</div>
</SettingsCard> </SettingsCard>
app/src/routes/system/filesystem/Folder.svelte
+30 -36
View File
@@ -1,47 +1,41 @@
<script lang="ts"> <script lang="ts">
import Folder from './Folder.svelte'; import Folder from './Folder.svelte'
import File from './File.svelte'; import File from './File.svelte'
import { createEventDispatcher } from 'svelte'; import { FolderIcon, FolderOpenOutline } from '$lib/components/icons'
import { FolderIcon, FolderOpenOutline } from '$lib/components/icons';
interface Props { interface Props {
expanded?: boolean; expanded?: boolean
name: any; name: any
files: any; files: any
} selected: any
}
let { expanded = $bindable(false), name, files }: Props = $props(); let { expanded = $bindable(false), name, files, selected }: Props = $props()
function toggle() { function toggle() {
expanded = !expanded; expanded = !expanded
} }
const dispatch = createEventDispatcher();
const updateSelected = async (event:any) => {
dispatch('selected', { name:event.detail.name });
}
</script> </script>
<button class="flex pl-2" onclick={toggle}> <button class="flex pl-2" onclick={toggle}>
{#if expanded} {#if expanded}
<FolderOpenOutline class="w-6 h-6" /> <FolderOpenOutline class="w-6 h-6" />
{:else} {:else}
<FolderIcon class="w-6 h-6" /> <FolderIcon class="w-6 h-6" />
{/if} {/if}
{name} {name}
</button> </button>
{#if expanded} {#if expanded}
<ul class="ml-5 border-l border-slate-600"> <ul class="ml-5 border-l border-slate-600">
{#each Object.entries(files) as [name, content]} {#each Object.entries(files) as [name, content]}
<li class="p-1"> <li class="p-1">
{#if typeof content == 'object'} {#if typeof content == 'object'}
<Folder {name} files={content} on:selected={updateSelected} /> <Folder {name} files={content} {selected} />
{:else} {:else}
<File {name} on:selected={updateSelected}/> <File {name} {selected} />
{/if} {/if}
</li> </li>
{/each} {/each}
</ul> </ul>
{/if} {/if}