mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-01-05 01:22:50 +00:00
feat: improve connection ux
[deploy]
This commit is contained in:
@@ -44,13 +44,14 @@ const config: IconsConfig = {
|
||||
"save",
|
||||
"settings_backup_restore",
|
||||
"sort",
|
||||
"filter",
|
||||
"filter_list",
|
||||
"settings_power",
|
||||
"link",
|
||||
"link_off",
|
||||
"chevron_right",
|
||||
"check_circle",
|
||||
"error",
|
||||
"auto_delete",
|
||||
],
|
||||
codePoints: {
|
||||
speed: "e9e4",
|
||||
|
||||
@@ -31,15 +31,10 @@
|
||||
$layout = backup.layout
|
||||
}
|
||||
}
|
||||
|
||||
async function createShareUrl() {
|
||||
console.log(await getSharableUrl("chords", $chords))
|
||||
}
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<h2>Backup & Restore</h2>
|
||||
<label><input type="checkbox" use:preference={"backup"} />Local backups</label>
|
||||
<h2><label><input type="checkbox" use:preference={"backup"} />Local Backup</label></h2>
|
||||
<p class="disclaimer">
|
||||
<i>Backups remain on your computer and are never shared or uploaded to our servers.</i>
|
||||
</p>
|
||||
@@ -52,6 +47,19 @@
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
h2 {
|
||||
margin-block-end: 0;
|
||||
|
||||
> label {
|
||||
gap: 10px;
|
||||
font-size: 24px;
|
||||
|
||||
> input {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
<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 {slide, fade, fly} from "svelte/transition"
|
||||
import {preference} from "$lib/preferences"
|
||||
import Terminal from "$lib/components/Terminal.svelte"
|
||||
|
||||
let connectDialog = false
|
||||
let terminal = false
|
||||
let powerDialog = false
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<h2>Device</h2>
|
||||
<div class="row">
|
||||
<h2>Device</h2>
|
||||
<label>Auto-Connect<input type="checkbox" use:preference={"autoConnect"} /></label>
|
||||
</div>
|
||||
|
||||
{#if $serialPort}
|
||||
<p transition:slide>
|
||||
@@ -22,62 +25,39 @@
|
||||
|
||||
{#if browser}
|
||||
<div class="row">
|
||||
<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 ($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 $serialPort}
|
||||
<button
|
||||
class="secondary"
|
||||
on:click={() => {
|
||||
$serialPort.forget()
|
||||
$serialPort = undefined
|
||||
}}><span class="icon">usb_off</span>Disconnect</button
|
||||
>
|
||||
{:else}
|
||||
<button class="error" on:click={() => initSerial(true)}><span class="icon">usb</span>Connect</button>
|
||||
{/if}
|
||||
{/await}
|
||||
<div class="row" style="justify-content: flex-end">
|
||||
<a
|
||||
href="/terminal"
|
||||
title="Terminal"
|
||||
class="icon"
|
||||
disabled={$serialPort === undefined}
|
||||
on:click={() => (terminal = !terminal)}>terminal</a
|
||||
>
|
||||
<button
|
||||
class="icon"
|
||||
title="Boot Menu"
|
||||
disabled={$serialPort === undefined}
|
||||
on:click={() => (powerDialog = !powerDialog)}>settings_power</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{#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>
|
||||
<button><span class="icon">restart_alt</span>Reboot WIP</button>
|
||||
<button><span class="icon">rule_settings</span>Bootloader WIP</button>
|
||||
</dialog>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -97,6 +77,8 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
@@ -132,7 +114,10 @@
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 0;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
@@ -154,6 +139,7 @@
|
||||
background: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -168,6 +154,7 @@
|
||||
|
||||
font-size: 1rem;
|
||||
color: var(--md-sys-color-on-background);
|
||||
text-decoration: none;
|
||||
|
||||
background: transparent;
|
||||
border: none;
|
||||
@@ -202,13 +189,4 @@
|
||||
background: var(--md-sys-color-surface-variant);
|
||||
}
|
||||
}
|
||||
|
||||
.device-grid {
|
||||
contain: size;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
gap: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
<input on:input={search} type="search" placeholder="Search {$chords.length} chords" />
|
||||
{/if}
|
||||
<button class="icon" on:click={sort}>sort</button>
|
||||
<button class="icon">filter</button>
|
||||
<button class="icon">filter_list</button>
|
||||
|
||||
<section>
|
||||
<table>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<a class="icon" href="/config/settings/terminal/">terminal</a>
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
<script>
|
||||
import {initSerial, serialPort} from "$lib/serial/connection"
|
||||
import Terminal from "$lib/components/Terminal.svelte"
|
||||
import {browser} from "$app/environment"
|
||||
</script>
|
||||
|
||||
<div class="device-grid">
|
||||
<div class="row">
|
||||
<a href=".." title="Close Terminal" class="icon" style="margin-inline-end: auto">arrow_back</a>
|
||||
{#if $serialPort === undefined}
|
||||
<button class="secondary" disabled={browser && !("serial" in navigator)} on:click={initSerial}>
|
||||
<span class="icon">usb</span>Pair
|
||||
</button>
|
||||
{/if}
|
||||
<button title="Reboot" class="icon" disabled={$serialPort === undefined}>restart_alt</button>
|
||||
<button title="Reboot to bootloader" class="icon" disabled={$serialPort === undefined}
|
||||
>rule_settings</button
|
||||
>
|
||||
</div>
|
||||
<div class="terminal">
|
||||
<Terminal />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding: 8px;
|
||||
padding-inline-end: 16px;
|
||||
|
||||
font-size: 1rem;
|
||||
color: var(--md-sys-color-on-background);
|
||||
text-decoration: none;
|
||||
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 1rem;
|
||||
|
||||
transition: all 250ms ease;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
aspect-ratio: 1;
|
||||
padding-inline-end: 8px;
|
||||
font-size: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
background: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
background: var(--md-sys-color-surface-variant);
|
||||
}
|
||||
}
|
||||
|
||||
.terminal {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.device-grid {
|
||||
contain: size;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
gap: 16px;
|
||||
|
||||
width: calc(min(100%, 28cm));
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,95 +0,0 @@
|
||||
<script>
|
||||
import {initSerial, serialPort} from "$lib/serial/connection"
|
||||
import Terminal from "$lib/components/Terminal.svelte"
|
||||
import {browser} from "$app/environment"
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>dot i/o device manager</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Device Manager</h1>
|
||||
|
||||
<div class="device-grid">
|
||||
<div class="row">
|
||||
{#if $serialPort === undefined}
|
||||
<button class="secondary" disabled={browser && !("serial" in navigator)} on:click={initSerial}>
|
||||
<span class="icon">usb</span>Pair
|
||||
</button>
|
||||
{/if}
|
||||
<button title="Reboot" class="icon" disabled={$serialPort === undefined}>restart_alt</button>
|
||||
<button title="Reboot to bootloader" class="icon" disabled={$serialPort === undefined}
|
||||
>rule_settings</button
|
||||
>
|
||||
</div>
|
||||
<div class="terminal">
|
||||
<Terminal />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding: 8px;
|
||||
padding-inline-end: 16px;
|
||||
|
||||
font-size: 1rem;
|
||||
color: var(--md-sys-color-on-background);
|
||||
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 1rem;
|
||||
|
||||
transition: all 250ms ease;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
aspect-ratio: 1;
|
||||
padding-inline-end: 8px;
|
||||
font-size: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
background: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
background: var(--md-sys-color-surface-variant);
|
||||
}
|
||||
}
|
||||
|
||||
.terminal {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.device-grid {
|
||||
contain: size;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
gap: 16px;
|
||||
|
||||
width: calc(min(100%, 28cm));
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
21
src/routes/terminal/+page.svelte
Normal file
21
src/routes/terminal/+page.svelte
Normal file
@@ -0,0 +1,21 @@
|
||||
<script>
|
||||
import Terminal from "$lib/components/Terminal.svelte"
|
||||
</script>
|
||||
|
||||
<section class="terminal">
|
||||
<Terminal />
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
section {
|
||||
contain: size;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
gap: 16px;
|
||||
|
||||
width: calc(min(100%, 28cm));
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user