From 06b83f79ef2564cec8e597d9994dd02a95afc839 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Fri, 5 Jan 2024 00:12:42 +0100
Subject: [PATCH] feat: add refresh button

resolves #82
---
 icons.config.js               |  1 +
 src/i18n/de/index.ts          |  1 +
 src/i18n/en/index.ts          |  1 +
 src/lib/serial/connection.ts  |  6 ++++++
 src/routes/SyncOverlay.svelte | 35 +++++++++++++++++++++++------------
 5 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/icons.config.js b/icons.config.js
index 0dc473f1..f5ffb0a6 100644
--- a/icons.config.js
+++ b/icons.config.js
@@ -92,6 +92,7 @@ const config = {
     "stat_2",
     "description",
     "add_circle",
+    "refresh",
   ],
   codePoints: {
     speed: "e9e4",
diff --git a/src/i18n/de/index.ts b/src/i18n/de/index.ts
index f81da39d..2e2a00ae 100644
--- a/src/i18n/de/index.ts
+++ b/src/i18n/de/index.ts
@@ -14,6 +14,7 @@ const de = {
   sync: {
     TITLE_READ: "Neueste Änderungen werden abgerufen",
     TITLE_WRITE: "Änderungen werden gespeichert",
+    RELOAD: "Neu laden",
   },
   backup: {
     TITLE: "Verlauf speichern",
diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts
index ea414776..756bcb03 100644
--- a/src/i18n/en/index.ts
+++ b/src/i18n/en/index.ts
@@ -21,6 +21,7 @@ const en = {
   sync: {
     TITLE_READ: "Reading latest changes",
     TITLE_WRITE: "Saving changes to device",
+    RELOAD: "Reload",
   },
   modal: {
     CLOSE: "Close",
diff --git a/src/lib/serial/connection.ts b/src/lib/serial/connection.ts
index f9f6eb90..a09d1624 100644
--- a/src/lib/serial/connection.ts
+++ b/src/lib/serial/connection.ts
@@ -55,6 +55,12 @@ export async function initSerial(manual = false) {
   const device = get(serialPort) ?? new CharaDevice()
   await device.init(manual)
   serialPort.set(device)
+  sync()
+}
+
+export async function sync() {
+  const device = get(serialPort)
+  if (!device) return
   const chordCount = await device.getChordCount()
   syncStatus.set("downloading")
 
diff --git a/src/routes/SyncOverlay.svelte b/src/routes/SyncOverlay.svelte
index e487295e..4c83cae9 100644
--- a/src/routes/SyncOverlay.svelte
+++ b/src/routes/SyncOverlay.svelte
@@ -1,21 +1,32 @@
 <script lang="ts">
-  import {syncProgress, syncStatus} from "$lib/serial/connection"
+  import {serialPort, syncProgress, syncStatus, sync} from "$lib/serial/connection"
   import LL from "../i18n/i18n-svelte"
-  import {fly} from "svelte/transition"
+  import {slide} from "svelte/transition"
 </script>
 
-{#if $syncStatus !== "done"}
-  <div transition:fly={{y: 40}}>
-    <progress max={$syncProgress?.max ?? 1} value={$syncProgress?.current ?? 1}></progress>
-    {#if $syncStatus === "downloading"}
-      <div>{$LL.sync.TITLE_READ()}</div>
-    {:else}
-      <div>{$LL.sync.TITLE_WRITE()}</div>
-    {/if}
-  </div>
-{/if}
+<div class="container">
+  {#if $syncStatus !== "done"}
+    <div transition:slide>
+      <progress max={$syncProgress?.max ?? 1} value={$syncProgress?.current ?? 1}></progress>
+      {#if $syncStatus === "downloading"}
+        <div>{$LL.sync.TITLE_READ()}</div>
+      {:else}
+        <div>{$LL.sync.TITLE_WRITE()}</div>
+      {/if}
+    </div>
+  {:else if $serialPort}
+    <button transition:slide on:click={sync}><span class="icon">refresh</span>{$LL.sync.RELOAD()}</button>
+  {/if}
+</div>
 
 <style lang="scss">
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
   div {
     font-size: 12px;
   }