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 11:59:16 +01:00
parent 1b850d8de8
commit c914333236
9 changed files with 208 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
webpage/src/components/ConnectButton.svelte
View File

@@ -1,58 +1,37 @@
<script lang="ts">
import { onMount } from 'svelte';
import { buzzer } from '../lib/buzzerStore';
import { updateDeviceInfo, refreshFileList, setActivePort } from '../lib/buzzerActions';
import { set } from 'astro:schema';
import { connectToPort, initSerialListeners } from '../lib/buzzerActions';
import { PlugsIcon, PlugsConnectedIcon } from 'phosphor-svelte';
let port: SerialPort | null = null;
const filters = [{ usbVendorId: 0x2fe3, usbProductId: 0x0001 }];
onMount(() => {
initSerialListeners();
});
async function connect() {
async function handleConnectClick() {
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);
}
// Wenn wir schon gekoppelt sind, aber nicht verbunden,
// wird navigator.serial.requestPort() den Picker zeigen.
const port = await navigator.serial.requestPort();
await connectToPort(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 }));
console.error("Verbindung abgebrochen", e);
}
}
</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"
on:click={handleConnectClick}
class="flex items-center gap-2 px-4 py-2 rounded-xl transition-all
{$buzzer.connected
? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/50'
: 'bg-slate-700 hover:bg-slate-600 text-slate-200 border border-slate-600'}"
>
<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'}
{#if $buzzer.connected}
<PlugsConnectedIcon size={18} weight="fill" />
<span class="text-xs font-bold uppercase tracking-wider text-emerald-300">Verbunden</span>
{:else}
<PlugsIcon size={18} weight="bold" />
<span class="text-xs font-bold uppercase tracking-wider">Verbinden</span>
{/if}
</button>