feat: apply setting changes and add commit feature

src/lib/serial/connection.ts

@@ -25,7 +25,7 @@ export const layout = persistentWritable<CharaLayout>(
 
 export const settings = writable({})
 
-export const unsavedChanges = writable(0)
+export const unsavedChanges = writable(new Map<number, number>())
 
 export const highlightActions: Writable<number[]> = writable([])
 

src/lib/setting.ts

@@ -1,15 +1,16 @@
 import type {Action} from "svelte/action"
-import {serialPort} from "$lib/serial/connection"
+import {serialPort, unsavedChanges} from "$lib/serial/connection"
+import {get} from "svelte/store"
 
 export const setting: Action<HTMLInputElement, {id: number; inverse?: number; scale?: number}> = function (
   node: HTMLInputElement,
   {id, inverse, scale},
 ) {
   node.setAttribute("disabled", "")
+  const type = node.getAttribute("type") as "number" | "checkbox"
 
   const unsubscribe = serialPort.subscribe(async port => {
     if (port) {
-      const type = node.getAttribute("type") as "number" | "checkbox"
       if (type === "number") {
         const value = Number(await port.getSetting(id).then(it => it.toString()))
         node.value = (
@@ -23,7 +24,29 @@ export const setting: Action<HTMLInputElement, {id: number; inverse?: number; sc
       node.setAttribute("disabled", "")
     }
   })
-  function listener() {}
+
+  async function listener(event: Event) {
+    const currentValue = await get(serialPort)!.getSetting(id)
+    let value = 0
+    if (type === "number") {
+      value = Number((event as InputEvent).data)
+      if (Number.isNaN(value)) return
+      value = inverse !== undefined ? inverse / value : scale !== undefined ? value / scale : value
+    } else {
+      value = node.checked ? 1 : 0
+    }
+    await get(serialPort)!.setSetting(id, value)
+
+    const originalValue = get(unsavedChanges).get(id)
+    unsavedChanges.update(it => {
+      if (originalValue === value) {
+        it.delete(id)
+      } else if (!it.has(id)) {
+        it.set(id, currentValue)
+      }
+      return it
+    })
+  }
   node.addEventListener("input", listener)
 
   return {