From 11d3d719371c1b3e1d8b6537fdeb554404301b10 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 28 Jul 2024 14:49:12 +0600
Subject: [PATCH] web/dialogs: move buttons to own component & add optional
 timeout

---
 web/src/components/dialog/DialogButton.svelte | 55 +++++++++++++++++++
 .../components/dialog/DialogButtons.svelte    | 27 ++-------
 web/src/lib/types/dialog.ts                   |  1 +
 3 files changed, 60 insertions(+), 23 deletions(-)
 create mode 100644 web/src/components/dialog/DialogButton.svelte

diff --git a/web/src/components/dialog/DialogButton.svelte b/web/src/components/dialog/DialogButton.svelte
new file mode 100644
index 00000000..f977cc6a
--- /dev/null
+++ b/web/src/components/dialog/DialogButton.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { onDestroy } from "svelte";
+    import type { DialogButton } from "$lib/types/dialog";
+
+    export let button: DialogButton;
+    export let closeFunc: () => void;
+
+    let disabled = false;
+    let seconds = 0;
+
+    if (button.timeout) {
+        disabled = true;
+        seconds = Math.round(button.timeout / 1000);
+
+        let interval = setInterval(() => {
+            seconds--;
+            if (seconds <= 0) {
+                clearInterval(interval);
+                disabled = false;
+            }
+        }, 1000);
+
+        onDestroy(() => clearInterval(interval));
+    }
+</script>
+
+<button
+    class="button elevated popup-button {button.color}"
+    class:color={button.color}
+    class:active={button.main}
+    {disabled}
+    on:click={async () => {
+        await button.action();
+        closeFunc();
+    }}
+>
+    {button.text}{seconds ? ` (${seconds})` : ""}
+</button>
+
+<style>
+    .popup-button {
+        width: 100%;
+        height: 40px;
+        transition: 0.2s opacity;
+    }
+
+    .popup-button.red {
+        background-color: var(--red);
+        color: var(--white);
+    }
+
+    .popup-button[disabled] {
+        opacity: 0.6;
+    }
+</style>
diff --git a/web/src/components/dialog/DialogButtons.svelte b/web/src/components/dialog/DialogButtons.svelte
index 082d20e0..f239865f 100644
--- a/web/src/components/dialog/DialogButtons.svelte
+++ b/web/src/components/dialog/DialogButtons.svelte
@@ -1,23 +1,14 @@
 <script lang="ts">
-    import type { DialogButton } from "$lib/types/dialog";
+    import type { DialogButton as DialogButtonType } from "$lib/types/dialog";
+    import DialogButton from "$components/dialog/DialogButton.svelte";
 
-    export let buttons: DialogButton[];
+    export let buttons: DialogButtonType[];
     export let closeFunc: () => void;
 </script>
 
 <div class="popup-buttons">
     {#each buttons as button}
-        <button
-            class="button elevated popup-button {button.color}"
-            class:color={button.color}
-            class:active={button.main}
-            on:click={async () => {
-                await button.action();
-                closeFunc();
-            }}
-        >
-            {button.text}
-        </button>
+        <DialogButton {button} {closeFunc} />
     {/each}
 </div>
 
@@ -31,14 +22,4 @@
         border-radius: var(--border-radius);
         min-height: 40px;
     }
-
-    .popup-button {
-        width: 100%;
-        height: 40px;
-    }
-
-    .popup-button.red {
-        background-color: var(--red);
-        color: var(--white);
-    }
 </style>
diff --git a/web/src/lib/types/dialog.ts b/web/src/lib/types/dialog.ts
index f7951309..0a5004db 100644
--- a/web/src/lib/types/dialog.ts
+++ b/web/src/lib/types/dialog.ts
@@ -4,6 +4,7 @@ export type DialogButton = {
     text: string,
     color?: "red",
     main: boolean,
+    timeout?: number, // milliseconds
     action: () => unknown | Promise<unknown>
 }