feat: apply setting changes and add commit feature

.github/workflows/build.yml

@@ -2,9 +2,9 @@ name: Build
 
 on:
   push:
-    branches: ["master"]
+    tags:
-  pull_request:
+      - 'v*'
-    branches: ["master"]
+  workflow_dispatch:
 
 jobs:
   build:
@@ -41,7 +41,6 @@ jobs:
           path: build
   deploy:
     name: 🚀 Deploy
-    if: github.event_name == 'push' && contains(github.event.head_commit.message, '[deploy]')
     runs-on: ubuntu-latest
     needs: build
     environment:

README.md

@@ -57,3 +57,11 @@ To double-check, make sure your private key starts with
 
 After that, add the `SSH_SERVER`, `SSH_PORT`, `SSH_PRIVATE_KEY` and `SSH_USER`
 environment secrets to your environment in GitHub.
+
+## Releases
+
+Change the version in
+
+- [package.json](package.json)
+- [tauri.conf.json](src-tauri/tauri.conf.json)
+- [Cargo.toml](src-tauri/Cargo.toml)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "amacc1ng",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "license": "AGPL-3.0-or-later",
   "private": true,
   "scripts": {

src-tauri/Cargo.lock

@@ -85,7 +85,7 @@ checksum = "3b13c32d80ecc7ab747b80c3784bce54ee8a7a0cc4fbda9bf4cda2cf6fe90854"
 
 [[package]]
 name = "app"
-version = "0.4.0"
+version = "0.4.2"
 dependencies = [
  "serde",
  "serde_json",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "0.4.1"
+version = "0.5.0"
 description = "A Tauri App"
 authors = ["Thea Schöbl <dev@theaninova.de>"]
 license = "AGPL-3"
@@ -18,7 +18,7 @@ tauri-build = { version = "1.4.0", features = [] }
 serde_json = "1.0"
 serialport = "4.2.1"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.4.0", features = ["updater"] }
+tauri = { version = "1.4.0", features = ["updater", "devtools"] }
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "amacc1ng",
-    "version": "0.4.1"
+    "version": "0.5.0"
   },
   "tauri": {
     "allowlist": {

src/i18n/de/index.ts

@@ -25,6 +25,7 @@ const de = {
     CONNECT: "Verbinden",
     DISCONNECT: "Entfernen",
     TERMINAL: "Konsole",
+    APPLY_SETTINGS: "Änderungen auf das Gerät brennen",
     bootMenu: {
       TITLE: "Bootmenü",
       REBOOT: "Neustarten",

src/i18n/en/index.ts

@@ -24,6 +24,7 @@ const en = {
     CONNECT: "Connect",
     DISCONNECT: "Disconnect",
     TERMINAL: "Terminal",
+    APPLY_SETTINGS: "Flash changes to device",
     bootMenu: {
       TITLE: "Boot Menu",
       REBOOT: "Reboot",

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 {

src/routes/Navigation.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {serialPort, syncStatus} from "$lib/serial/connection"
+  import {serialPort, syncStatus, unsavedChanges} from "$lib/serial/connection"
   import {page} from "$app/stores"
   import {slide, fly} from "svelte/transition"
   import {canShare, triggerShare} from "$lib/share"
@@ -21,6 +21,26 @@
     {slug: "cm", title: "CM - Concepts Mastered", icon: "cognition"},
   ]
 
+  let placeboProgress = false
+
+  async function flashChanges() {
+    $syncStatus = "uploading"
+    // Yes, this is a completely arbitrary and unnecessary delay.
+    // The only purpose of it is to create a sense of weight,
+    // aka make it more "energy intensive" to click.
+    // The only conceivable way users could reach the commit limit in this case
+    // would be if they click it every time they change a setting.
+    // Because of that, we don't need to show a fearmongering message such as
+    // "Your device will break after you click this 10,000 times!"
+    await new Promise(resolve => setTimeout(resolve, 6000))
+    $serialPort.commit()
+    unsavedChanges.update(it => {
+      it.clear()
+      return it
+    })
+    $syncStatus = "done"
+  }
+
   $: if (browser && !canAutoConnect()) {
     connectButton?.click()
   }
@@ -32,12 +52,12 @@
   <a href="/" class="title">{$LL.TITLE()}</a>
 
   <div class="steps">
-    {#each training as { slug, title, icon }}
+    {#each training as {slug, title, icon}}
       <a
-        href="/train/{slug}/"
+              href="/train/{slug}/"
-        {title}
+              {title}
-        class="icon train {slug}"
+              class="icon train {slug}"
-        class:active={$page.url.pathname === `/train/${slug}/`}>{icon}</a
+              class:active={$page.url.pathname === `/train/${slug}/`}>{icon}</a
       >
     {/each}
   </div>
@@ -45,13 +65,19 @@
   <div class="actions">
     {#if $canShare}
       <button transition:fly={{x: -8}} class="icon" on:click={triggerShare}>share</button>
-      <div transition:slide class="separator" />
+      <div transition:slide class="separator"/>
     {/if}
     {#if import.meta.env.TAURI_FAMILY === undefined}
-      {#await import("$lib/components/PwaStatus.svelte") then { default: PwaStatus }}
+      {#await import("$lib/components/PwaStatus.svelte") then {default: PwaStatus}}
-        <PwaStatus />
+        <PwaStatus/>
       {/await}
     {/if}
+    {#if $unsavedChanges.size > 0}
+      <button disabled={$syncStatus === 'uploading'} on:click={flashChanges} transition:fly={{x: -8}}
+              title={$LL.deviceManager.APPLY_SETTINGS()} class="icon">save
+      </button>
+      <div transition:slide class="separator"/>
+    {/if}
     {#if $serialPort}
       <button title={$LL.backup.TITLE()} use:popup={BackupPopup} class="icon {$syncStatus}">
         {#if $syncStatus === "downloading"}
@@ -66,11 +92,11 @@
       </button>
     {/if}
     <button
-      bind:this={connectButton}
+            bind:this={connectButton}
-      title="Devices"
+            title="Devices"
-      use:popup={ConnectionPopup}
+            use:popup={ConnectionPopup}
-      class="icon connect"
+            class="icon connect"
-      class:error={$serialPort === undefined}
+            class:error={$serialPort === undefined}
     >
       cable
     </button>
@@ -119,6 +145,10 @@
     animation: sync 1s linear infinite;
   }
 
+  .uploading::after {
+    transform-origin: bottom;
+  }
+
   .downloading.active::after,
   .uploading.active::after {
     background: var(--md-sys-color-primary);
@@ -230,4 +260,9 @@
     color: var(--md-sys-color-on-secondary-container);
     background: var(--md-sys-color-secondary-container);
   }
+  
+  :disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
 </style>