58 lines
3.0 KiB
Svelte
58 lines
3.0 KiB
Svelte
<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> |