sanifae/src/lib/components/Post.svelte

93 lines
2.2 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';
2023-02-01 19:22:43 -05:00
export let success, username, content, upvotes, downvotes, id;
let query = (id) ? `/post/${id}` : '';
let contentSplit = content.split('\n');
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-01-30 16:17:58 -05:00
</script>
2023-02-01 19:22:43 -05:00
<style>
.button {
width: auto;
height: 35px;
}
.votes {
font-weight: bold;
font-size: 1.5rem;
}
.vote-area {
margin-right: 30px;
}
</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 tiny='{!!id}'>
<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">
{#each contentSplit as line}
<p>{line}</p>
{/each}
</span>
<span slot="footer">
<span class='vote-area'>
2023-02-03 21:54:01 -05:00
<a on:click={() => vote('up')} href=''>
2023-02-01 19:22:43 -05:00
<img src='/upvote.svg' class='button' alt='Upvote'>
</a>
<span class='votes'>
{upvotes + 0}
</span>
</span>
<span class='vote-area'>
2023-02-03 21:54:01 -05:00
<a on:click={() => vote('down')} href=''>
2023-02-01 19:22:43 -05:00
<img src='/downvote.svg' class='button' alt='Downvote'>
</a>
<span class='votes'>
{downvotes + 0}
</span>
</span>
{#if id}
<span class='vote-area'>
<a href='/post/{id}'>
<img src='/view.svg' class='button' alt='View'>
</a>
</span>
{/if}
</span>
</Area>
{/if}