edi/buzzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sync

Browse Source
This commit is contained in:
Eduard Iten
2026-02-28 07:57:40 +01:00
parent bed9ab1968
commit 8a124fe17d
17 changed files with 1186 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
webpage/src/components/ConnectButton.svelte Normal file
View File

@@ -0,0 +1,58 @@
<script lang="ts">
import { buzzer } from '../lib/buzzerStore';
import { updateDeviceInfo, refreshFileList, setActivePort } from '../lib/buzzerActions';
import { set } from 'astro:schema';
let port: SerialPort | null = null;
const filters = [{ usbVendorId: 0x2fe3, usbProductId: 0x0001 }];
async function connect() {
try {
port = await navigator.serial.requestPort({ filters });
await port.open({ baudRate: 115200 });
// Store aktualisieren
buzzer.update(b => ({ ...b, connected: true }));
if (port) {
setActivePort(port); // Aktiven Port in den Actions setzen
await updateDeviceInfo(port);
await refreshFileList(port);
}
} catch (e) {
setActivePort(null); // Port zurücksetzen
console.error("Verbindung fehlgeschlagen:", e);
buzzer.update(b => ({ ...b, connected: false }));
}
}
async function disconnect() {
if (port) {
await port.close();
port = null;
buzzer.update(b => ({ ...b, connected: false }));
}
}
</script>
<button
on:click={$buzzer.connected ? disconnect : connect}
class="flex items-center gap-2 px-6 py-2 {$buzzer.connected ? 'bg-blue-600 hover:bg-blue-500' : 'bg-emerald-600 hover:bg-emerald-500'} text-white text-xs font-black rounded-full transition-all shadow-lg active:scale-95 uppercase tracking-widest"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256">
{#if $buzzer.connected}
<rect width="256" height="256" fill="none"/>
<rect x="63.03" y="88.4" width="129.94" height="79.2" rx="24" transform="translate(-53.02 128) rotate(-45)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="88" y1="88" x2="168" y2="168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="232" y1="24" x2="173.94" y2="82.06" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="82.06" y1="173.94" x2="24" y2="232" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
{:else}
<rect width="256" height="256" fill="none"/>
<line x1="144" y1="144" x2="120" y2="168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<path d="M132,180l-29,29a24,24,0,0,1-33.94,0L47,186.91A24,24,0,0,1,47,153l29-29" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="197.94" y1="58.06" x2="232" y2="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<path d="M180,132l29-29a24,24,0,0,0,0-33.94L186.91,47A24,24,0,0,0,153,47L124,76" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
{/if}
</svg>
{$buzzer.connected ? 'Disconnect' : 'Connect'}
</button>