sanifae/src/lib/components/Post.svelte

143 lines
3.1 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-12 12:06:19 -05:00
export let success, username, content, upvotes, downvotes, id, isAuthor, time;
let date = 'Time unknown';
if (time)
date = new Date(time / 1000);
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-03-06 16:55:16 -05:00
#header {
display: flex;
align-items: center;
}
2023-02-01 19:22:43 -05:00
.votes {
font-weight: bold;
font-size: 1.5rem;
}
2023-03-09 19:12:15 -05:00
#header-area {
display: flex;
flex-direction: column;
2023-02-01 19:22:43 -05:00
}
2023-02-07 19:36:32 -05:00
img {
max-width: 250px;
}
2023-02-12 12:06:19 -05:00
2023-03-06 16:55:16 -05:00
.pfp {
width: 50px;
height: 50px;
margin-right: 10px;
2023-03-09 19:12:17 -05:00
border-radius: 100%;
2023-03-06 16:55:16 -05:00
}
2023-02-12 12:06:19 -05:00
.date {
font-size: 0.8rem;
font-style: italic;
font-weight: normal;
}
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-03-06 16:55:16 -05:00
<span slot="header" id='header'>
2023-03-09 19:12:17 -05:00
<img class='pfp' src='/img/pfp/{username}.png'/>
2023-03-09 19:12:15 -05:00
<div class='header-area'>
<div><a href='/users/{username}'>
{username}
</a></div>
<div class='date'>
{date}
</div>
</div>
2023-02-01 19:22:43 -05:00
</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-12 04:50:15 -05:00
data={upvotes * 1}
icon='/upvote.svg'
/>
<PostButton
clickFunc={() => vote('down')}
2023-02-12 04:50:15 -05:00
data={downvotes * 1 }
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}
2023-02-12 04:50:15 -05:00
<PostButton
href='/new_post?init=%23{id}'
data={'Reply'}
icon='/view.svg'
/>
2023-02-01 19:22:43 -05:00
</span>
</Area>
{/if}