diff options
Diffstat (limited to 'assets/src')
| -rw-r--r-- | assets/src/App.svelte | 14 | ||||
| -rw-r--r-- | assets/src/components/DataPicker.svelte | 14 | ||||
| -rw-r--r-- | assets/src/components/IncomingRequests.svelte | 20 | ||||
| -rw-r--r-- | assets/src/components/Share.svelte | 20 | ||||
| -rw-r--r-- | assets/src/entries/request.ts | 11 | ||||
| -rw-r--r-- | assets/src/entries/share.ts | 12 | ||||
| -rw-r--r-- | assets/src/globals.d.ts | 1 | ||||
| -rw-r--r-- | assets/src/network/socket.ts | 33 | ||||
| -rw-r--r-- | assets/src/stores/data.ts | 21 | ||||
| -rw-r--r-- | assets/src/stores/requests.ts | 12 |
10 files changed, 127 insertions, 31 deletions
diff --git a/assets/src/App.svelte b/assets/src/App.svelte deleted file mode 100644 index 27c0c68..0000000 --- a/assets/src/App.svelte +++ /dev/null @@ -1,14 +0,0 @@ -<script lang="ts"> - export let name: string; -</script> - -<main> - <h1>Hello from {name}!</h1> - <h2>Your token is {window.token}.</h2> -</main> - -<style> - h1 { - font-size: 4em; - } -</style> diff --git a/assets/src/components/DataPicker.svelte b/assets/src/components/DataPicker.svelte new file mode 100644 index 0000000..433018d --- /dev/null +++ b/assets/src/components/DataPicker.svelte @@ -0,0 +1,14 @@ +<script lang="ts"> + import data from "../stores/data"; + + let value = ""; + + const submit = () => { + data.set(value); + }; +</script> + +<form on:submit|preventDefault={submit}> + <input type="text" bind:value /> + <input type="submit" value="Submit" /> +</form> diff --git a/assets/src/components/IncomingRequests.svelte b/assets/src/components/IncomingRequests.svelte new file mode 100644 index 0000000..1db50af --- /dev/null +++ b/assets/src/components/IncomingRequests.svelte @@ -0,0 +1,20 @@ +<script lang="ts"> + import { getToken, joinShareChannel } from "../network/socket"; + import requests from "../stores/requests"; + + const startConnection = async () => { + const token = await getToken(); + joinShareChannel(token); + return token; + }; +</script> + +{#await startConnection()} + <h3>Fetching token...</h3> +{:then token} + <h3>Your token is <b>{token}</b>.</h3> + + {#each $requests as request} + <p>{JSON.stringify(request)}</p> + {/each} +{/await} diff --git a/assets/src/components/Share.svelte b/assets/src/components/Share.svelte new file mode 100644 index 0000000..5ea55b2 --- /dev/null +++ b/assets/src/components/Share.svelte @@ -0,0 +1,20 @@ +<script lang="ts"> + import data from "../stores/data"; + import DataPicker from "./DataPicker.svelte"; + import IncomingRequests from "./IncomingRequests.svelte"; +</script> + +<main> + <h1>Sharing</h1> + {#if !$data.locked} + <DataPicker /> + {:else} + <IncomingRequests /> + {/if} +</main> + +<style> + h1 { + font-size: 4em; + } +</style> diff --git a/assets/src/entries/request.ts b/assets/src/entries/request.ts index 2461768..0d064a2 100644 --- a/assets/src/entries/request.ts +++ b/assets/src/entries/request.ts @@ -1,10 +1,3 @@ -import App from '../App.svelte'; +// Request -const app = new App({ - target: document.getElementById("app"), - props: { - name: 'request' - } -}); - -export default app;
\ No newline at end of file +export {}; diff --git a/assets/src/entries/share.ts b/assets/src/entries/share.ts index 7527a53..d0279f1 100644 --- a/assets/src/entries/share.ts +++ b/assets/src/entries/share.ts @@ -1,10 +1,8 @@ -import App from '../App.svelte'; +import Share from "../components/Share.svelte"; -const app = new App({ - target: document.getElementById("app"), - props: { - name: 'share' - } +const app = new Share({ + target: document.getElementById("app"), + props: {}, }); -export default app;
\ No newline at end of file +export default app; diff --git a/assets/src/globals.d.ts b/assets/src/globals.d.ts deleted file mode 100644 index 996ffe5..0000000 --- a/assets/src/globals.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare var token: string;
\ No newline at end of file diff --git a/assets/src/network/socket.ts b/assets/src/network/socket.ts new file mode 100644 index 0000000..c056b41 --- /dev/null +++ b/assets/src/network/socket.ts @@ -0,0 +1,33 @@ +import { Socket } from "phoenix"; +import requests from "../stores/requests"; + +let socket = new Socket("/socket", {}); +socket.connect(); + +export const getToken: () => Promise<string> = () => { + let tokenChannel = socket.channel("token", {}); + return new Promise((resolve, reject) => { + tokenChannel + .join() + .receive("ok", () => { + tokenChannel + .push("get_token", {}, 5000) + .receive("ok", ({ token }) => resolve(token)) + .receive("error", err => reject(err)) + .receive("timeout", err => reject(err)); + }) + .receive("error", err => reject(err)); + }); +}; + +export const joinShareChannel = token => { + let shareChannel = socket.channel(`share:${token}`); + + shareChannel.on("request", requests.addRequest); + + shareChannel + .join() + .receive("error", err => + console.log("failed joining share channel:" + err) + ); +}; diff --git a/assets/src/stores/data.ts b/assets/src/stores/data.ts new file mode 100644 index 0000000..d59183c --- /dev/null +++ b/assets/src/stores/data.ts @@ -0,0 +1,21 @@ +import { writable } from "svelte/store"; + +const createDataStore = () => { + const { subscribe, update } = writable({ locked: false, data: null }); + + return { + subscribe, + set: data => { + update(state => { + if (!state.locked) { + return { locked: true, data }; + } else { + console.error("Tried setting data after locking."); + return state; + } + }); + }, + }; +}; + +export default createDataStore(); diff --git a/assets/src/stores/requests.ts b/assets/src/stores/requests.ts new file mode 100644 index 0000000..e80eb2b --- /dev/null +++ b/assets/src/stores/requests.ts @@ -0,0 +1,12 @@ +import { writable } from "svelte/store"; + +const createRequestStore = () => { + const { subscribe, update } = writable([]); + + return { + subscribe, + addRequest: request => update(state => [request, ...state]), + }; +}; + +export default createRequestStore(); |