return to previous view after approval flow

2023-05-01 13:27:28 -07:00
parent 886fcd9bb8
commit a75f34865e
9 changed files with 70 additions and 91 deletions
--- a/src/views/ShowResponse.svelte
+++ b/src/views/ShowResponse.svelte
@ -0,0 +1,68 @@
+<script>
+    import { onMount } from 'svelte';
+    import { draw, fade } from 'svelte/transition';
+    import { invoke } from '@tauri-apps/api/tauri';
+
+    import { appState, completeRequest } from '../lib/state.js';
+    import ErrorAlert from '../ui/ErrorAlert.svelte';
+    import Link from '../ui/Link.svelte';
+    
+    let success = false;
+    let error = null;
+
+    let drawDuration = $appState.config.rehide_ms >= 750 ? 500 : 0;
+    let fadeDuration = drawDuration * 0.6;
+    let fadeDelay = drawDuration * 0.4;
+
+    async function respond() {
+        let packet = {
+            id: $appState.currentRequest.id,
+            approval: $appState.currentRequest.approval,
+        };
+
+        try {
+            await invoke('respond', {response: packet});
+            success = true;
+            window.setTimeout(
+                completeRequest,
+                // Extra 50ms so the window can finish disappearing before the redraw
+                Math.min(5000, $appState.config.rehide_ms + 50),
+            );
+        }
+        catch (e) {
+            error = e;
+        }
+
+    }
+    onMount(respond);
+</script>
+
+
+{#if error}
+    <div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
+        <ErrorAlert>
+            {error}
+            <svelte:fragment slot="buttons">
+                <Link target="Home">
+                    <button class="btn btn-sm btn-alert-error" on:click={() => navigate('Home')}>Ok</button>
+                </Link>
+            </svelte:fragment>
+        </ErrorAlert>
+    </div>
+{:else if success}
+    <div class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
+        {#if $appState.currentRequest.approval === 'Approved'}
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
+              <path in:draw="{{duration: drawDuration}}" stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        {:else}
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
+                <path in:draw="{{duration: 500}}" stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        {/if}
+
+        <div in:fade="{{duration: fadeDuration, delay: fadeDelay}}" class="text-2xl font-bold">
+            {$appState.currentRequest.approval}!
+        </div>
+    </div>
+{/if}