From c3b05a72b7185112ece6e42c99e9a828c8298f04 Mon Sep 17 00:00:00 2001
From: Melonai <einebeere@gmail.com>
Date: Thu, 8 Jul 2021 23:29:20 +0200
Subject: State display for incoming and own requests

---
 assets/src/components/RequestPage.svelte           | 12 +----
 assets/src/components/SharePage.svelte             |  8 ++--
 assets/src/components/request/RequestStatus.svelte | 51 ++++++++++++++++++++++
 assets/src/components/share/DataSelector.svelte    | 40 +++++++++++++++++
 assets/src/components/share/Info.svelte            | 46 -------------------
 assets/src/components/share/Request.svelte         | 43 +++++++++++++-----
 assets/src/components/share/RequestList.svelte     |  8 ++++
 assets/src/components/share/Requests.svelte        |  8 ----
 assets/src/components/share/Selector.svelte        | 20 ---------
 assets/src/components/share/ShareStatus.svelte     | 46 +++++++++++++++++++
 10 files changed, 182 insertions(+), 100 deletions(-)
 create mode 100644 assets/src/components/request/RequestStatus.svelte
 create mode 100644 assets/src/components/share/DataSelector.svelte
 delete mode 100644 assets/src/components/share/Info.svelte
 create mode 100644 assets/src/components/share/RequestList.svelte
 delete mode 100644 assets/src/components/share/Requests.svelte
 delete mode 100644 assets/src/components/share/Selector.svelte
 create mode 100644 assets/src/components/share/ShareStatus.svelte

(limited to 'assets/src/components')

diff --git a/assets/src/components/RequestPage.svelte b/assets/src/components/RequestPage.svelte
index eb6b559..d8cf31d 100644
--- a/assets/src/components/RequestPage.svelte
+++ b/assets/src/components/RequestPage.svelte
@@ -1,21 +1,13 @@
 <script lang="ts">
-    import { start } from "../network/channel/connection";
-    import { startRequest } from "../network/channel/request";
-
     import Header from "./Header.svelte";
-
-    start().then(startRequest);
+    import RequestStatus from "./request/RequestStatus.svelte";
 </script>
 
 <Header color="white" />
 
 <main>
     <div class="left-segment">
-        <h1>Waiting for a response...</h1>
-        <p>
-            The share’s content will become available to you once the sharer
-            decides to accept your request.
-        </p>
+        <RequestStatus />
     </div>
     <div class="right-segment" />
 </main>
diff --git a/assets/src/components/SharePage.svelte b/assets/src/components/SharePage.svelte
index 9be9466..19138ef 100644
--- a/assets/src/components/SharePage.svelte
+++ b/assets/src/components/SharePage.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
     import data from "../stores/data";
     import Header from "./Header.svelte";
-    import Info from "./share/Info.svelte";
-    import Requests from "./share/Requests.svelte";
+    import ShareStatus from "./share/ShareStatus.svelte";
+    import RequestList from "./share/RequestList.svelte";
 </script>
 
 <Header color="black" />
 
 <main>
     <div class="left-segment">
-        <Info />
+        <ShareStatus />
     </div>
     <div class="right-segment">
         {#if $data.locked}
             <h1>Requests</h1>
-            <Requests />
+            <RequestList />
         {/if}
     </div>
 </main>
diff --git a/assets/src/components/request/RequestStatus.svelte b/assets/src/components/request/RequestStatus.svelte
new file mode 100644
index 0000000..b4c9ef9
--- /dev/null
+++ b/assets/src/components/request/RequestStatus.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import data from "../../stores/data";
+    import {
+        initializeRequest,
+        OwnRequestState,
+    } from "../../models/own_request";
+    import { startRequestConnection } from "../../network/channel/request_connection";
+
+    const request = initializeRequest();
+    const state = request.state;
+
+    startRequestConnection(request);
+</script>
+
+<!-- TODO: Bind states of same path together -->
+{#if $state === OwnRequestState.PENDING || $state === OwnRequestState.ACKNOWLEDGED}
+    <h1>Waiting for a response...</h1>
+    <p>
+        {#if $state === OwnRequestState.ACKNOWLEDGED}
+            Connecting to signaling server...
+        {:else}
+            The share’s content will become available to you once the sharer
+            decides to accept your request.
+        {/if}
+    </p>
+{:else if $state === OwnRequestState.IN_FLIGHT || $state === OwnRequestState.DONE}
+    <h1>Your request was <b>accepted!</b></h1>
+    {#if $state === OwnRequestState.IN_FLIGHT}
+        Transferring...
+    {:else}
+        <p>Congratulations! You can access the received data below:</p>
+        <div class="data">{$data.data}</div>
+    {/if}
+{:else if $state === OwnRequestState.DECLINED}
+    <h1>Your request was <b>declined!</b></h1>
+    <p>Sorry! I hope we can still be friends?</p>
+{:else}
+    <!-- TODO: Handle specific errors -->
+    <h1>Eek!</h1>
+    <p>An error occured during your request.</p>
+{/if}
+
+<style>
+    .data {
+        font-size: 14px;
+        width: 100%;
+        border: solid 1px #cccccc;
+        padding: 10px 20px;
+        box-sizing: border-box;
+    }
+</style>
diff --git a/assets/src/components/share/DataSelector.svelte b/assets/src/components/share/DataSelector.svelte
new file mode 100644
index 0000000..6838a05
--- /dev/null
+++ b/assets/src/components/share/DataSelector.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { startShareConnection } from "../../network/channel/share_connection";
+
+    import data from "../../stores/data";
+
+    let value = "";
+
+    const submit = () => {
+        data.set(value);
+        startShareConnection();
+    };
+
+    // TODO: Accept data other than text.
+</script>
+
+<form on:submit|preventDefault={submit}>
+    <!-- TODO: Prettier input field -->
+    <input type="text" bind:value />
+    <input class="set-data-button" type="submit" value="Share" />
+</form>
+
+<style>
+    form {
+        display: flex;
+        flex-wrap: nowrap;
+    }
+
+    input {
+        border: none;
+        font-size: 14px;
+        color: black;
+        background-color: white;
+        padding: 10px 20px;
+        box-sizing: border-box;
+    }
+
+    .set-data-button {
+        margin-left: 0.5rem;
+    }
+</style>
diff --git a/assets/src/components/share/Info.svelte b/assets/src/components/share/Info.svelte
deleted file mode 100644
index 79ef404..0000000
--- a/assets/src/components/share/Info.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-    import {
-        ConnectionState,
-        getOwnToken,
-        getStateStore,
-    } from "../../network/channel/connection";
-    import data from "../../stores/data";
-    import Selector from "./Selector.svelte";
-
-    let connection = getStateStore();
-</script>
-
-{#if !$data.locked}
-    <h1>What do you want to share?</h1>
-    <Selector />
-{:else}
-    <h1>
-        You are <br />
-        sharing <b>a text.</b>
-    </h1>
-    {#if $connection === ConnectionState.CONNECTED}
-        <p>
-            Your share is available under: <br />
-            rook.rnrd.eu/<span>{getOwnToken()}</span>
-        </p>
-        <!-- TODO: Display actual data. -->
-        <div class="data">••••••••••••••••••••••••••••••</div>
-    {:else}
-        <p>Connecting to signaling server...</p>
-    {/if}
-{/if}
-
-<style>
-    span {
-        color: white;
-    }
-
-    .data {
-        font-size: 14px;
-        width: 100%;
-        background-color: white;
-        color: black;
-        padding: 10px 20px;
-        box-sizing: border-box;
-    }
-</style>
diff --git a/assets/src/components/share/Request.svelte b/assets/src/components/share/Request.svelte
index e34f633..5f9ca7a 100644
--- a/assets/src/components/share/Request.svelte
+++ b/assets/src/components/share/Request.svelte
@@ -1,31 +1,50 @@
 <script lang="ts">
-    import { offer } from "../../network/transfer/share";
+    import {
+        acceptIncomingRequest,
+        declineIncomingRequest,
+        IncomingRequestState,
+    } from "../../models/incoming_request";
+    import type { IncomingRequest } from "../../models/incoming_request";
     import CheckIcon from "../icons/CheckIcon.svelte";
     import CloseIcon from "../icons/CloseIcon.svelte";
 
-    export let token: string;
+    export let request: IncomingRequest;
+    const state = request.state;
 
     async function accept() {
-        const transfer = await offer(token);
+        acceptIncomingRequest(request);
     }
 
-    function decline() {}
+    function decline() {
+        declineIncomingRequest(request);
+    }
 </script>
 
 <!-- TODO: Replace placeholder values and show IP instead of token. -->
 <ul class="request">
-    <div class="buttons">
-        <div class="round-button" on:click={accept}>
-            <CheckIcon color="white" />
-        </div>
-        <div class="plain-button" on:click={decline}>
-            <CloseIcon color="black" />
+    {#if $state === IncomingRequestState.WAITING}
+        <div class="buttons">
+            <div class="round-button" on:click={accept}>
+                <CheckIcon color="white" />
+            </div>
+            <div class="plain-button" on:click={decline}>
+                <CloseIcon color="black" />
+            </div>
         </div>
-    </div>
+    {/if}
+
     <li>Requested at 14:38</li>
-    <li class="ip">{token}</li>
+    <li class="ip">{request.info.token}</li>
     <li>Trusowo, Russia</li>
     <li>Firefox 89</li>
+
+    {#if $state === IncomingRequestState.IN_FLIGHT}
+        Transferring...
+    {:else if $state === IncomingRequestState.DONE}
+        Done!
+    {:else if $state === IncomingRequestState.DECLINED}
+        Declined.
+    {/if}
 </ul>
 
 <style>
diff --git a/assets/src/components/share/RequestList.svelte b/assets/src/components/share/RequestList.svelte
new file mode 100644
index 0000000..423662e
--- /dev/null
+++ b/assets/src/components/share/RequestList.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    import requests from "../../stores/received_requests";
+    import Request from "./Request.svelte";
+</script>
+
+{#each $requests as request}
+    <Request {request} />
+{/each}
diff --git a/assets/src/components/share/Requests.svelte b/assets/src/components/share/Requests.svelte
deleted file mode 100644
index 54eab57..0000000
--- a/assets/src/components/share/Requests.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-    import requests from "../../stores/requests";
-    import Request from "./Request.svelte";
-</script>
-
-{#each $requests as request}
-    <Request token={request} />
-{/each}
\ No newline at end of file
diff --git a/assets/src/components/share/Selector.svelte b/assets/src/components/share/Selector.svelte
deleted file mode 100644
index e4c7c07..0000000
--- a/assets/src/components/share/Selector.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-    import { start } from "../../network/channel/connection";
-    import { startShare } from "../../network/channel/share";
-
-    import data from "../../stores/data";
-
-    let value = "";
-
-    const submit = () => {
-        data.set(value);
-        start().then(startShare);
-    };
-
-    // TODO: Accept data other than text.
-</script>
-
-<form on:submit|preventDefault={submit}>
-    <input type="text" bind:value />
-    <input type="submit" value="Submit" />
-</form>
diff --git a/assets/src/components/share/ShareStatus.svelte b/assets/src/components/share/ShareStatus.svelte
new file mode 100644
index 0000000..15d1ee9
--- /dev/null
+++ b/assets/src/components/share/ShareStatus.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import {
+        ConnectionState,
+        getOwnToken,
+        getStateStore,
+    } from "../../network/channel/connection";
+    import data from "../../stores/data";
+    import DataSelector from "./DataSelector.svelte";
+
+    let connection = getStateStore();
+</script>
+
+{#if !$data.locked}
+    <h1>What do you want to share?</h1>
+    <DataSelector />
+{:else}
+    <h1>
+        You are <br />
+        sharing <b>a text.</b>
+    </h1>
+    {#if $connection === ConnectionState.CONNECTED}
+        <p>
+            Your share is available under: <br />
+            rook.rnrd.eu/<span>{getOwnToken()}</span>
+        </p>
+        <!-- TODO: Display actual data. -->
+        <div class="data">••••••••••••••••••••••••••••••</div>
+    {:else}
+        <p>Connecting to signaling server...</p>
+    {/if}
+{/if}
+
+<style>
+    span {
+        color: white;
+    }
+
+    .data {
+        font-size: 14px;
+        width: 100%;
+        background-color: white;
+        color: black;
+        padding: 10px 20px;
+        box-sizing: border-box;
+    }
+</style>
-- 
cgit 1.4.1