chart edit screen without any of the functionality
This commit is contained in:
parent
cbdd6dc658
commit
f878978e06
|
@ -8,6 +8,7 @@
|
|||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"clipboard-polyfill": "^4.0.0-rc1",
|
||||
"sirv-cli": "^2.0.0",
|
||||
"svelte-icons": "^2.1.0"
|
||||
},
|
||||
|
@ -320,6 +321,12 @@
|
|||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/clipboard-polyfill": {
|
||||
"version": "4.0.0-rc1",
|
||||
"resolved": "https://registry.npmjs.org/clipboard-polyfill/-/clipboard-polyfill-4.0.0-rc1.tgz",
|
||||
"integrity": "sha512-Cel03Es9ZgP6pYA2JT9cZ2VgvOH2/EHgB7jji84FpINBJWqfMEwiI1Y3LstVL+E43cm3CnCrLL2vwb9DMbr28A==",
|
||||
"deprecated": "Use the browser-native async clipboard API instead of this library: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard"
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
|
@ -1575,6 +1582,11 @@
|
|||
"readdirp": "~3.6.0"
|
||||
}
|
||||
},
|
||||
"clipboard-polyfill": {
|
||||
"version": "4.0.0-rc1",
|
||||
"resolved": "https://registry.npmjs.org/clipboard-polyfill/-/clipboard-polyfill-4.0.0-rc1.tgz",
|
||||
"integrity": "sha512-Cel03Es9ZgP6pYA2JT9cZ2VgvOH2/EHgB7jji84FpINBJWqfMEwiI1Y3LstVL+E43cm3CnCrLL2vwb9DMbr28A=="
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
|
|
|
@ -22,6 +22,7 @@
|
|||
"svelte-preprocess": "^4.10.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"clipboard-polyfill": "^4.0.0-rc1",
|
||||
"sirv-cli": "^2.0.0",
|
||||
"svelte-icons": "^2.1.0"
|
||||
}
|
||||
|
|
|
@ -4,6 +4,14 @@
|
|||
import ChartCreation from './ChartCreation.svelte';
|
||||
import IoMdHeart from 'svelte-icons/io/IoMdHeart.svelte';
|
||||
import { H1 } from 'attractions';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
onMount(async () => {
|
||||
if (window.location.hash.length > 1) {
|
||||
const code = window.location.hash.slice(1);
|
||||
currentChartID.set(code);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
@ -44,13 +52,13 @@
|
|||
<header>
|
||||
<H1>chartmaker</H1>
|
||||
</header>
|
||||
|
||||
|
||||
{#if $currentChartID}
|
||||
<ChartEdit/>
|
||||
{:else}
|
||||
<ChartCreation/>
|
||||
{/if}
|
||||
|
||||
|
||||
<footer>
|
||||
made with <div class="icon"><IoMdHeart/></div> by oatmealine. <a target="_blank" href="https://git.oat.zone/oat/project-databased-fe">source</a>
|
||||
</footer>
|
||||
|
|
|
@ -48,7 +48,9 @@
|
|||
body: JSON.stringify({name, top, left, right, bot}),
|
||||
});
|
||||
|
||||
currentChartID.set(await response.text());
|
||||
const code = await response.text();
|
||||
currentChartID.set(code);
|
||||
window.location.hash = '#' + code;
|
||||
} catch(err) {
|
||||
disableButton = false;
|
||||
error = err.toString();
|
||||
|
|
|
@ -0,0 +1,56 @@
|
|||
<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';
|
||||
|
||||
let isLoaded = false;
|
||||
let error = null;
|
||||
</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}
|
||||
<br><br><br>
|
||||
<Loading/>
|
||||
{/if}
|
||||
</div>
|
Loading…
Reference in New Issue