92 lines
2.3 KiB
Svelte
92 lines
2.3 KiB
Svelte
<script>
|
|
import IoMdClipboard from 'svelte-icons/io/IoMdClipboard.svelte'
|
|
import IoMdLink from 'svelte-icons/io/IoMdLink.svelte'
|
|
import IoMdAlert from 'svelte-icons/io/IoMdAlert.svelte'
|
|
import { writeText } from 'clipboard-polyfill';
|
|
import { Button, TextField, Loading } from 'attractions';
|
|
import Chart from './Chart.svelte';
|
|
import { onMount } from 'svelte';
|
|
import { currentChartID } from './stores';
|
|
|
|
let isLoaded = false;
|
|
let error = null;
|
|
|
|
let name = '';
|
|
let top = '';
|
|
let left = '';
|
|
let right = '';
|
|
let bot = '';
|
|
|
|
let images = [];
|
|
|
|
onMount(() => {
|
|
let s = new WebSocket('ws://localhost:5252/connect?id=' + $currentChartID);
|
|
s.addEventListener('message', (e) => {
|
|
let data = JSON.parse(e.data);
|
|
if (!isLoaded) {
|
|
name = data.name || '';
|
|
top = data.topText || '';
|
|
left = data.leftText || '';
|
|
right = data.rightText || '';
|
|
bot = data.bottomText || '';
|
|
isLoaded = true;
|
|
} else {
|
|
images.push(...data);
|
|
}
|
|
});
|
|
s.addEventListener('error', (e) => {
|
|
error = e;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#clipboard {
|
|
width: 450px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
#theeverything {
|
|
text-align: center;
|
|
max-width: 680px;
|
|
margin: 0 auto;
|
|
}
|
|
.center {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center
|
|
}
|
|
</style>
|
|
|
|
<div id="theeverything">
|
|
<div class="center">
|
|
<div id="clipboard">
|
|
<div style="flex-grow: 1">
|
|
<TextField outline withItem value={window.location.toString()} disabled>
|
|
<div style="width: 16px; height: 16px; display: inline-block" class="item"><IoMdLink/></div>
|
|
</TextField>
|
|
</div>
|
|
<Button outline on:click={() => {writeText(window.location.toString())}}><div style="width: 19px; height: 19px; display: inline-block"><IoMdClipboard/></div></Button>
|
|
</div>
|
|
</div>
|
|
|
|
{#if error}
|
|
<div class="center">
|
|
<div id="error">
|
|
<div style="width: 16px; height: 16px; display: inline-block;"><IoMdAlert/></div>
|
|
{error}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if !isLoaded && !error}
|
|
<br><br><br>
|
|
<Loading/>
|
|
{:else if isLoaded}
|
|
{#key name + top + left + right + bot}
|
|
{name}
|
|
<Chart topText={top} leftText={left} rightText={right} bottomText={bot} fontSize=14/>
|
|
{/key}
|
|
{/if}
|
|
</div> |