feat: editing

src/lib/setting.ts

@@ -1,6 +1,5 @@
 import type {Action} from "svelte/action"
-import {serialPort, unsavedChanges} from "$lib/serial/connection"
-import {get} from "svelte/store"
+import {changes, ChangeType, settings} from "$lib/undo-redo"
 
 export const setting: Action<HTMLInputElement, {id: number; inverse?: number; scale?: number}> = function (
   node: HTMLInputElement,
@@ -9,15 +8,20 @@ export const setting: Action<HTMLInputElement, {id: number; inverse?: number; sc
   node.setAttribute("disabled", "")
   const type = node.getAttribute("type") as "number" | "checkbox"
 
-  const unsubscribe = serialPort.subscribe(async port => {
-    if (port) {
+  const unsubscribe = settings.subscribe(async settings => {
+    if (id in settings) {
+      const {value, isApplied} = settings[id]
       if (type === "number") {
-        const value = Number(await port.getSetting(id).then(it => it.toString()))
         node.value = (
           inverse !== undefined ? inverse / value : scale !== undefined ? scale * value : value
         ).toString()
       } else {
-        node.checked = await port.getSetting(id).then(it => it !== 0)
+        node.checked = value !== 0
+      }
+      if (isApplied) {
+        node.classList.remove("pending-changes")
+      } else {
+        node.classList.add("pending-changes")
       }
       node.removeAttribute("disabled")
     } else {
@@ -26,8 +30,7 @@ export const setting: Action<HTMLInputElement, {id: number; inverse?: number; sc
   })
 
   async function listener(event: Event) {
-    const currentValue = await get(serialPort)!.getSetting(id)
-    let value = 0
+    let value: number
     if (type === "number") {
       value = Number((event as InputEvent).data)
       if (Number.isNaN(value)) return
@@ -35,16 +38,14 @@ export const setting: Action<HTMLInputElement, {id: number; inverse?: number; sc
     } 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
+    changes.update(changes => {
+      changes.push({
+        type: ChangeType.Setting,
+        id: id,
+        setting: value,
+      })
+      return changes
     })
   }
   node.addEventListener("input", listener)