<script lang="ts">
    import SerialConnection from "./SerialConnection.svelte";

    let port: SerialPort = null;

    async function connect() {
        port = await navigator.serial.requestPort();
        port.addEventListener("disconnect", disconnect);
    }

    async function disconnect() {
        port = null;
    }
</script>

<div>
{#if navigator.serial}
    <p>Serial available &#x1f680;</p>
    {#if port !== null}
        <SerialConnection {port}/>
        <p><button on:click={disconnect}>disconnect</button></p>
    {:else}
        <p><button on:click={connect}>connect</button></p>
    {/if}
{:else}
    <p>Looks like your browser does not support WebSerial &#x1f622;</p>
    <p>Check <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility">here</a> for a list of compatible browsers</p>
{/if}
</div>

<style lang="scss">
    div {
        height: 15vh;
    }
</style>