oat
/
chartmaker-fe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chart edit screen without any of the functionality

This commit is contained in:
Jill 2022-03-04 19:07:44 +03:00
parent cbdd6dc658
commit f878978e06
5 changed files with 82 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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"
}

12
src/App.svelte
View File

@ -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>

4
src/ChartCreation.svelte
View File

@ -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();

56
src/ChartEdit.svelte
View File

@ -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>