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_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}
</span>
app/src/routes/system/filesystem/FileSystem.svelte
+53 -52
View File
@@ -1,62 +1,63 @@
<script lang="ts">
import SettingsCard from "$lib/components/SettingsCard.svelte";
import Spinner from "$lib/components/Spinner.svelte";
import Folder from "./Folder.svelte";
import { api } from "$lib/api";
import type { Directory } from "$lib/types/models";
import { FolderIcon } from "$lib/components/icons";
import SettingsCard from '$lib/components/SettingsCard.svelte'
import Spinner from '$lib/components/Spinner.svelte'
import Folder from './Folder.svelte'
import { api } from '$lib/api'
import type { Directory } from '$lib/types/models'
import { FolderIcon } from '$lib/components/icons'
let filename = $state('');
let filename = $state('')
const getFiles = async () => {
const result = await api.get<Directory>('/api/files')
if (result.isOk()) {
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 ''
const getFiles = async () => {
const result = await api.get<Directory>('/api/files')
if (result.isOk()) {
return result.inner
}
return { root: {} }
}
const deleteFile = async (name: string) => {
const result = await api.post(`/api/files/delete`, { file: "/config/"+ name })
if (result.isOk()) {
return result.inner;
}
return ''
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 ''
}
const updateSelected = async (event:any) => {
filename = event.detail.name;
const deleteFile = async (name: string) => {
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>
<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)}
<div>
<Spinner />
</div>
{:then content}
<pre>{content}</pre>
{/await}
</div>
</SettingsCard>
{#snippet icon()}
<FolderIcon class="flex-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 selected={updateSelected} />
{/await}
{#await getContent(filename)}
<div>
<Spinner />
</div>
{:then content}
<pre>{content}</pre>
{/await}
</div>
</SettingsCard>
app/src/routes/system/filesystem/Folder.svelte
+30 -36
View File
@@ -1,47 +1,41 @@
<script lang="ts">
import Folder from './Folder.svelte';
import File from './File.svelte';
import { createEventDispatcher } from 'svelte';
import { FolderIcon, FolderOpenOutline } from '$lib/components/icons';
import Folder from './Folder.svelte'
import File from './File.svelte'
import { FolderIcon, FolderOpenOutline } from '$lib/components/icons'
interface Props {
expanded?: boolean;
name: any;
files: any;
}
interface Props {
expanded?: boolean
name: any
files: any
selected: any
}
let { expanded = $bindable(false), name, files }: Props = $props();
let { expanded = $bindable(false), name, files, selected }: Props = $props()
function toggle() {
expanded = !expanded;
}
const dispatch = createEventDispatcher();
const updateSelected = async (event:any) => {
dispatch('selected', { name:event.detail.name });
}
function toggle() {
expanded = !expanded
}
</script>
<button class="flex pl-2" onclick={toggle}>
{#if expanded}
<FolderOpenOutline class="w-6 h-6" />
{:else}
<FolderIcon class="w-6 h-6" />
{/if}
{name}
{#if expanded}
<FolderOpenOutline class="w-6 h-6" />
{:else}
<FolderIcon class="w-6 h-6" />
{/if}
{name}
</button>
{#if expanded}
<ul class="ml-5 border-l border-slate-600">
{#each Object.entries(files) as [name, content]}
<li class="p-1">
{#if typeof content == 'object'}
<Folder {name} files={content} on:selected={updateSelected} />
{:else}
<File {name} on:selected={updateSelected}/>
{/if}
</li>
{/each}
</ul>
<ul class="ml-5 border-l border-slate-600">
{#each Object.entries(files) as [name, content]}
<li class="p-1">
{#if typeof content == 'object'}
<Folder {name} files={content} {selected} />
{:else}
<File {name} {selected} />
{/if}
</li>
{/each}
</ul>
{/if}