chart edit screen without any of the functionality
This commit is contained in:
parent
cbdd6dc658
commit
f878978e06
|
@ -8,6 +8,7 @@
|
||||||
"name": "svelte-app",
|
"name": "svelte-app",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"clipboard-polyfill": "^4.0.0-rc1",
|
||||||
"sirv-cli": "^2.0.0",
|
"sirv-cli": "^2.0.0",
|
||||||
"svelte-icons": "^2.1.0"
|
"svelte-icons": "^2.1.0"
|
||||||
},
|
},
|
||||||
|
@ -320,6 +321,12 @@
|
||||||
"fsevents": "~2.3.2"
|
"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": {
|
"node_modules/color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||||
|
@ -1575,6 +1582,11 @@
|
||||||
"readdirp": "~3.6.0"
|
"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": {
|
"color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
"svelte-preprocess": "^4.10.4"
|
"svelte-preprocess": "^4.10.4"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"clipboard-polyfill": "^4.0.0-rc1",
|
||||||
"sirv-cli": "^2.0.0",
|
"sirv-cli": "^2.0.0",
|
||||||
"svelte-icons": "^2.1.0"
|
"svelte-icons": "^2.1.0"
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,14 @@
|
||||||
import ChartCreation from './ChartCreation.svelte';
|
import ChartCreation from './ChartCreation.svelte';
|
||||||
import IoMdHeart from 'svelte-icons/io/IoMdHeart.svelte';
|
import IoMdHeart from 'svelte-icons/io/IoMdHeart.svelte';
|
||||||
import { H1 } from 'attractions';
|
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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -48,7 +48,9 @@
|
||||||
body: JSON.stringify({name, top, left, right, bot}),
|
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) {
|
} catch(err) {
|
||||||
disableButton = false;
|
disableButton = false;
|
||||||
error = err.toString();
|
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