sanifae/src/lib/components/Post.svelte

107 lines
2.4 KiB
Svelte
Raw Normal View History

2023-01-30 16:17:58 -05:00
<script>
2023-02-05 09:47:26 -05:00
import Area from '$lib/components/Area.svelte';
import PostButton from '$lib/components/PostButton.svelte';
import PostBody from '$lib/components/PostBody.svelte';
2023-02-07 19:36:32 -05:00
2023-02-11 02:11:45 -05:00
export let success, username, content, upvotes, downvotes, id, isAuthor;
2023-02-01 19:22:43 -05:00
let query = (id) ? `/post/${id}` : '';
2023-02-03 21:54:01 -05:00
let fData;
function vote(v) {
fData = (new FormData());
fData.append('vote',v);
fData.append('id',id);
fetch('/api/vote', {
method: 'POST',
body: fData
}).then(async x => {
var j = (await x.json());
upvotes = j.data.up;
downvotes = j.data.down;
})
}
2023-02-11 02:11:45 -05:00
function deletePost(v) {
fData = (new FormData());
fData.append('id',id);
fetch('/api/postDelete', {
method: 'POST',
body: fData
}).then(async x => {
window.location.href = '/';
})
}
2023-01-30 16:17:58 -05:00
</script>
2023-02-01 19:22:43 -05:00
<style>
2023-02-01 19:22:43 -05:00
.votes {
font-weight: bold;
font-size: 1.5rem;
}
.vote-area {
margin-right: 30px;
}
2023-02-07 19:36:32 -05:00
img {
max-width: 250px;
}
2023-02-01 19:22:43 -05:00
</style>
{#if success}
<Area>
<p slot="header">
Error
</p>
<p slot="main">
{success}
</p>
<p slot="footer">
Failed to get post.
</p>
</Area>
{:else}
<Area>
2023-02-01 19:22:43 -05:00
<span slot="header">
2023-02-05 09:52:04 -05:00
<a href='/user/{username}'>
2023-02-01 19:22:43 -05:00
{username}
</a>
</span>
<span slot="main">
<PostBody content={content} />
2023-02-01 19:22:43 -05:00
</span>
<span slot="footer">
<PostButton
clickFunc={() => vote('up')}
2023-02-11 02:11:45 -05:00
data={upvotes * 1 + ' Yes'}
icon='/upvote.svg'
/>
<PostButton
clickFunc={() => vote('down')}
2023-02-11 02:11:45 -05:00
data={downvotes * 1 + ' No'}
icon='/downvote.svg'
/>
2023-02-11 02:11:45 -05:00
{#if isAuthor}
<PostButton
clickFunc={() => deletePost()}
data={'Delete'}
icon='/delete.svg'
/>
{/if}
2023-02-01 19:22:43 -05:00
{#if id}
<PostButton
href='/post/{id}'
2023-02-11 02:11:45 -05:00
data={'View'}
icon='/view.svg'
/>
2023-02-01 19:22:43 -05:00
{/if}
</span>
</Area>
{/if}