This commit is contained in:
2026-02-28 07:57:40 +01:00
parent bed9ab1968
commit 8a124fe17d
17 changed files with 1186 additions and 70 deletions

View File

@@ -0,0 +1,57 @@
<script lang="ts">
import { buzzer } from '../lib/buzzerStore';
import { refreshFileList } from '../lib/buzzerActions';
import FileRow from './FileRow.svelte';
async function handleRefresh() {
// Falls wir den Port im Store haben, hier nutzen
// ansonsten wird er über die Actions verwaltet
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">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/><polyline points="88 96 40 96 40 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M40,96,68.28,67.72A88,88,0,0,1,192,67" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="168 160 216 160 216 208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M216,160l-28.28,28.28A88,88,0,0,1,64,189" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/> </svg>
</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 class="absolute bottom-6 right-6 text-slate-700 opacity-5 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" fill="currentColor" viewBox="0 0 256 256">
<path d="M208,40V216a16,16,0,0,1-16,16H64a16,16,0,0,1-16-16V40A16,16,0,0,1,64,24H192A16,16,0,0,1,208,40Z" opacity="0.2"></path>
<path d="M208,40V216a16,16,0,0,1-16,16H64a16,16,0,0,1-16-16V40A16,16,0,0,1,64,24H192A16,16,0,0,1,208,40Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
<line x1="80" y1="24" x2="80" y2="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
<line x1="128" y1="24" x2="128" y2="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
<line x1="176" y1="24" x2="176" y2="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
</svg>
</div>
</div>