feat: add reset options

resolves #70

src/lib/serial/device.ts

@@ -318,6 +318,13 @@ export class CharaDevice {
     await this.send("RST BOOTLOADER")
   }
 
+  /**
+   * Resets the device
+   */
+  async reset(type: "FACTORY" | "PARAMS" | "KEYMAPS" | "STARTER" | "CLEARCML" | "FUNC") {
+    await this.send(`RST ${type}`)
+  }
+
   /**
    * Returns the current number of bytes available in SRAM.
    *

src/routes/PageTransition.svelte

@@ -15,6 +15,7 @@
   beforeNavigate(navigation => {
     const from = navigation.from?.url.pathname
     const to = navigation.to?.url.pathname
+    if (from === to) return
     isNavigating = true
 
     if (!(from && to && routeOrder.includes(from) && routeOrder.includes(to))) {

src/routes/config/settings/+page.svelte

@@ -1,7 +1,9 @@
 <script>
   import Action from "$lib/components/Action.svelte"
+  import {popup} from "$lib/popup"
   import {serialPort} from "$lib/serial/connection"
   import {setting} from "$lib/setting"
+  import ResetPopup from "./ResetPopup.svelte"
 </script>
 
 {#if $serialPort}
@@ -154,6 +156,7 @@
       <legend>Device</legend>
       <label>Boot message<input type="checkbox" use:setting={{id: 0x93}} /></label>
       <label>GTM Realtime Feedback<input type="checkbox" use:setting={{id: 0x92}} /></label>
+      <button class="outline" use:popup={ResetPopup}>Reset...</button>
     </fieldset>
 
     {#if $serialPort.device === "LITE"}
@@ -179,6 +182,14 @@
     padding-block-end: 48px;
   }
 
+  button.outline {
+    border: 1px solid currentcolor;
+    border-radius: 8px;
+    height: 2em;
+    margin-block: 2em;
+    margin-inline: auto;
+  }
+
   legend,
   legend > label {
     font-size: 24px;

src/routes/config/settings/ConfirmChallenge.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import {serialPort} from "$lib/serial/connection"
+  import {createEventDispatcher} from "svelte"
+
+  export let challenge: string
+
+  let challengeInput = ""
+  $: challengeString = `${challenge} ${$serialPort!.device}`
+  $: isValid = challengeInput === challengeString
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<h3>Type the following to confim the action</h3>
+
+<p>{challengeString}</p>
+<input type="text" bind:value={challengeInput} placeholder={challengeString} />
+
+<button disabled={!isValid} on:click={() => dispatch("confirm")}>Confirm {challenge}</button>
+
+<style lang="scss">
+  input[type="text"] {
+    color: inherit;
+    font-family: inherit;
+    background: none;
+    border: none;
+    border-bottom: 1px solid currentcolor;
+
+    &:focus {
+      outline: none;
+      border-color: var(--md-sys-color-secondary);
+    }
+  }
+
+  button {
+    color: var(--md-sys-color-error);
+  }
+</style>

src/routes/config/settings/ResetPopup.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import {confirmChallenge} from "./confirm-challenge"
+  import {serialPort} from "$lib/serial/connection"
+
+  const options = [
+    [["FACTORY", "Factory Reset"]],
+    [
+      ["PARAMS", "Reset Settings"],
+      ["KEYMAPS", "Reset Layout"],
+      ["CLEARCML", "Clear Chords"],
+    ],
+    [
+      ["STARTER", "Add starter chords"],
+      ["FUNC", "Add functional chords"],
+    ],
+  ] as const
+</script>
+
+<h3>Reset Device</h3>
+{#each options as category, i}
+  {#if i > 0}
+    <hr />
+  {/if}
+  {#each category as [command, description]}
+    <button
+      class="error"
+      use:confirmChallenge={{
+        onConfirm() {
+          $serialPort?.reset(command)
+          $serialPort = undefined
+        },
+        challenge: description,
+      }}>{description}...</button
+    >
+  {/each}
+{/each}
+
+<style lang="scss">
+  hr {
+    opacity: 0.25;
+  }
+</style>

src/routes/config/settings/confirm-challenge.ts

@@ -0,0 +1,37 @@
+import type {Action} from "svelte/action"
+import ConfirmChallenge from "./ConfirmChallenge.svelte"
+import tippy from "tippy.js"
+
+export const confirmChallenge: Action<HTMLElement, {onConfirm: () => void; challenge: string}> = (
+  node,
+  {onConfirm, challenge},
+) => {
+  let component: ConfirmChallenge | undefined
+  let target: HTMLElement | undefined
+  const edit = tippy(node, {
+    interactive: true,
+    trigger: "click",
+    onShow(instance) {
+      target = instance.popper.querySelector(".tippy-content") as HTMLElement
+      target.classList.add("active")
+      if (component === undefined) {
+        component = new ConfirmChallenge({target, props: {challenge}})
+        component.$on("confirm", () => {
+          edit.hide()
+          onConfirm()
+        })
+      }
+    },
+    onHidden() {
+      component?.$destroy()
+      target?.classList.remove("active")
+      component = undefined
+    },
+  })
+
+  return {
+    destroy() {
+      edit.destroy()
+    },
+  }
+}