sync
This commit is contained in:
57
webpage/src/components/FileStorage.svelte
Normal file
57
webpage/src/components/FileStorage.svelte
Normal 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>
|
||||
Reference in New Issue
Block a user