feat: unpair/unconnect/connect contextual interactions

feat: success/error screens for connection
Superd22 · Aug 7, 2022 · 0bd24e6 · 0bd24e6
1 parent 0c4ba8a
commit 0bd24e6
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 20 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -64,6 +64,7 @@
   <div class="top" />
   <div class="middle">
     <DeviceCard device={null} />
+    <DeviceCard device={{}} />
     {#each getFilteredDevices(devices) as device}
       <DeviceCard {device} />
     {/each}

diff --git a/src/lib/DeviceCard.svelte b/src/lib/DeviceCard.svelte
@@ -5,8 +5,12 @@
   import { openModal } from "svelte-modals";
   import DeviceFinder from "./DeviceFinder.svelte";
   import { WebOSService } from "./webos-service";
+  import SpatialNavigation from "spatial-navigation-ts";
 
   export let device: Device;
+  let showMenu: boolean = false;
+  let menu;
+  let card;
   const bluetoothService = new WebOSService("com.webos.service.bluetooth2");
 
   function pairNewDevice() {
@@ -20,14 +24,58 @@
 
     console.debug(connect);
   }
+
+  function toggleMenu() {
+    showMenu = !showMenu;
+    setTimeout(() => {
+      menu.focus();
+    });
+  }
+
+  function focusOut(
+    event: FocusEvent & {
+      currentTarget: EventTarget & HTMLDivElement;
+    }
+  ) {
+    setTimeout(() => {
+      if (card.contains(document.activeElement) === true) {
+        event.stopImmediatePropagation();
+        return;
+      }
+      showMenu = false;
+    });
+  }
+
+  async function toggleConnect(event: MouseEvent) {
+    event.stopImmediatePropagation();
+    if (device.connectedProfiles.includes("hid")) {
+      await bluetoothService.request("hid/disconnect", {
+        address: device.address,
+      });
+    } else {
+      await bluetoothService.request("hid/connect", {
+        address: device.address,
+      });
+    }
+  }
+
+  async function unpair(event: MouseEvent) {
+    event.stopImmediatePropagation();
+    await bluetoothService.request("adapter/unpair", {
+      address: device.address,
+    });
+  }
 </script>
 
 <div
-  class="device-card focusable"
+  class="device-card"
+  class:focusable={!showMenu}
   class:empty={!device}
   class:connected={device?.connectedProfiles?.length > 0}
-  tabindex="0"
-  on:click={!device ? pairNewDevice : connect}
+  tabindex={showMenu ? -1 : 0}
+  on:focusout={focusOut}
+  on:click={!device ? pairNewDevice : toggleMenu}
+  bind:this={card}
 >
   {#if device}
     <div class="title">{device.name}</div>
@@ -42,6 +90,18 @@
       <PlusThick />
     </div>
   {/if}
+
+  {#if showMenu}
+    <div class="menu">
+      <button
+        tabindex="0"
+        class="focusable"
+        on:click={toggleConnect}
+        bind:this={menu}>Disconnect</button
+      >
+      <button tabindex="0" class="focusable" on:click={unpair}>Unpair</button>
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
@@ -58,6 +118,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    position: relative;
 
     .title {
       font-size: 19px;
@@ -86,5 +147,17 @@
         font-size: 4em;
       }
     }
+
+    .menu {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      background: rgba(0, 0, 0, 0.9);
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
   }
 </style>
diff --git a/src/lib/DeviceFinder.svelte b/src/lib/DeviceFinder.svelte
@@ -62,7 +62,7 @@
         subscribe: true,
       })
       .subscribe((data) => {
-        console.debug("Got pairing sub data", data);
+        console.debug("Got pairing sub data", data, data.request);
         switch (data.request) {
           case "endPairing": {
             if (data.returnValue) {
@@ -71,16 +71,19 @@
               step = Step.Error;
               error = `[${(data as any).errorCode}] ${(data as any).errorText}`;
             }
+            break;
+          }
+          case "displayPinCode": {
+            step = Step.DisplayCode;
+            break;
           }
-          case "displayPinCode":
           case "displayPasskey": {
             step = Step.DisplayCode;
+            break;
           }
           case "confirmPassKey": {
             step = Step.ConfirmCode;
-          }
-          default: {
-            step = Step.WaitingOn;
+            break;
           }
         }
       });
@@ -104,13 +107,15 @@
   async function cancelPair() {
     if (!targetDevice) return;
 
-    const abort =
-      await bluetoothService.request<Bluetooth2AdapterCancelPairingCallReturn>(
-        "adapter/cancelPairing",
-        {
-          address: targetDevice.address,
-        }
-      );
+    try {
+      const abort =
+        await bluetoothService.request<Bluetooth2AdapterCancelPairingCallReturn>(
+          "adapter/cancelPairing",
+          {
+            address: targetDevice.address,
+          }
+        );
+    } catch (e) {}
   }
 
   search();
@@ -177,9 +182,9 @@
     </div>
 
     <div class="action">
-      <button on:click={retry}>Retry</button>
-      <button on:click={newSync}>Sync a new device</button>
-      <button on:click={exit}>Back to devices</button>
+      <button on:click={retry} class="focusable">Retry</button>
+      <button on:click={newSync} class="focusable">Sync a new device</button>
+      <button on:click={exit} class="focusable">Back to devices</button>
     </div>
   {/if}
 
@@ -190,8 +195,8 @@
     </div>
 
     <div class="action">
-      <button on:click={exit}>Back to devices</button>
-      <button on:click={newSync}>Sync a new device</button>
+      <button on:click={exit} class="focusable">Back to devices</button>
+      <button on:click={newSync} class="focusable">Sync a new device</button>
     </div>
   {/if}
 </div>