47 lines
1.6 KiB
Svelte
47 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { buzzer } from '../lib/buzzerStore';
|
|
import { refreshFileList } from '../lib/buzzerActions';
|
|
import FileRow from './FileRow.svelte';
|
|
import { ArrowsCounterClockwiseIcon } from 'phosphor-svelte';
|
|
async function handleRefresh() {
|
|
console.log("Aktualisiere Dateiliste...");
|
|
await refreshFileList();
|
|
}
|
|
</script>
|
|
|
|
<div class="flex-1 bg-slate-800/50 rounded-[2rem] border border-slate-700 flex flex-col overflow-hidden shadow-2xl relative">
|
|
|
|
<div class="p-5 border-b border-slate-700 bg-slate-800/80 flex justify-between items-center shrink-0">
|
|
<h2 class="font-black text-[10px] uppercase tracking-[0.2em] text-slate-500">
|
|
Flash Storage <span class="text-slate-600">/LFS/A</span>
|
|
</h2>
|
|
|
|
<button
|
|
on:click={handleRefresh}
|
|
class="text-slate-500 hover:text-blue-400 transition-colors active:rotate-180 duration-500"
|
|
title="Refresh File List"
|
|
>
|
|
<ArrowsCounterClockwiseIcon size={16} weight="fill" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto custom-scrollbar relative z-10">
|
|
{#if $buzzer.connected}
|
|
<div class="flex flex-col">
|
|
{#each $buzzer.files as file}
|
|
<FileRow {file} />
|
|
{:else}
|
|
<div class="p-10 text-center text-slate-600 text-[10px] uppercase tracking-widest italic">
|
|
Keine Dateien auf dem Buzzer
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<div class="flex-1 flex items-center justify-center p-10">
|
|
<span class="text-slate-700 text-[10px] font-black uppercase tracking-[0.3em] animate-pulse">
|
|
Offline - Warte auf Port
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div> |