Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-01-08 11:02:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: new connection flow

Browse Source
This commit is contained in:
Thea Schöbl
2023-07-23 17:44:26 +02:00
parent 998a400395
commit 4cc3343984
9 changed files with 221 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/routes/ConnectionPopup.svelte
View File

@@ -1,52 +1,159 @@
<script>
<script lang="ts">
import {initSerial, serialPort} from "$lib/serial/connection"
import {browser} from "$app/environment"
import {getViablePorts} from "$lib/serial/device"
import {slide, fade} from "svelte/transition"
import {preference} from "$lib/preferences"
let connectDialog = false
let powerDialog = false
</script>
<h2>Devices</h2>
<section>
<h2>Device</h2>
<div class="row">
<button disabled={$serialPort === undefined}><span class="icon">restart_alt</span>Reboot</button>
<button disabled={$serialPort === undefined}><span class="icon">rule_settings</span>Bootloader</button>
</div>
{#if browser}
{#await ($serialPort, getViablePorts()) then ports}
{#if $serialPort}
<p transition:slide>
{$serialPort.deviceId}
<br />
Version {$serialPort.version}
</p>
{/if}
{#if browser}
<div class="row">
{#if ports.length === 0}
<button class="secondary" on:click={initSerial}>
<span class="icon">usb</span>Pair
</button>
{:else if $serialPort}
<button
class="secondary"
on:click={() => {
$serialPort.forget()
$serialPort = undefined
}}><span class="icon">usb</span>Unpair</button
>
{:else}
<button class="secondary" on:click={initSerial}><span class="icon">usb</span>Connect</button>
{/if}
{#if $serialPort}
<button
on:click={() => {
$serialPort.disconnect()
$serialPort = undefined
}}><span class="icon">usb</span>Disconnect</button
>
{/if}
<button
class:secondary={$serialPort}
class:error={!$serialPort}
on:click={() => (connectDialog = !connectDialog)}
>
{#if $serialPort}
<span class="icon">usb</span>
{:else}
<span class="icon">error</span>
{/if}
Connection
<span class="icon">chevron_right</span>
</button>
<button class="icon" disabled={$serialPort === undefined} on:click={() => (powerDialog = !powerDialog)}
>settings_power</button
>
</div>
{/await}
{/if}
{#await ($serialPort, getViablePorts()) then ports}
{#if connectDialog}
<div
class="backdrop"
transition:fade={{duration: 250}}
on:click={() => (connectDialog = !connectDialog)}
/>
<dialog open transition:slide={{duration: 250}}>
<label><input type="checkbox" use:preference={"autoConnect"} />Auto Connect</label>
{#if $serialPort}
<button
on:click={() => {
$serialPort.disconnect()
$serialPort = undefined
}}><span class="icon">usb_off</span>Disconnect</button
>
{:else}
{#if ports.length > 0}
<button on:click={() => initSerial()}><span class="icon">usb</span>Connect</button>
{/if}
<button on:click={() => initSerial(true)}><span class="icon">link</span>Pair Device</button>
{/if}
{#if $serialPort}
<button
on:click={() => {
$serialPort.forget()
$serialPort = undefined
}}><span class="icon">link_off</span>Unpair Device</button
>
{/if}
</dialog>
{/if}
{/await}
{#if powerDialog}
<div class="backdrop" transition:fade={{duration: 250}} on:click={() => (powerDialog = !powerDialog)} />
<dialog open transition:slide={{duration: 250}}>
<h3>Boot Menu</h3>
<button><span class="icon">restart_alt</span>Reboot</button>
<button><span class="icon">rule_settings</span>Bootloader</button>
</dialog>
{/if}
{/if}
</section>
<style lang="scss">
h2 {
margin-block: 8px;
}
p {
margin-block: 8px;
}
section {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.backdrop {
position: absolute;
z-index: 1;
inset: 0;
background: #0005;
border-radius: 40px;
}
dialog {
position: relative;
z-index: 2;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
margin: 0;
margin-block-start: 16px;
padding: 0;
color: var(--md-sys-color-on-secondary-container);
background: var(--md-sys-color-secondary-container);
border: none;
border-radius: 32px;
}
.row {
display: flex;
gap: 8px;
height: fit-content;
}
dialog > * {
margin-inline: 16px;
}
dialog > :first-child {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
padding-block: 8px;
color: var(--md-sys-color-on-secondary);
background: var(--md-sys-color-secondary);
}
button {
cursor: pointer;
@@ -85,6 +192,11 @@
background: var(--md-sys-color-secondary);
}
&.error {
color: var(--md-sys-color-on-error);
background: var(--md-sys-color-error);
}
&:active:not(:disabled) {
color: var(--md-sys-color-on-surface-variant);
background: var(--md-sys-color-surface-variant);