diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Comment.svelte | 24 | ||||
| -rw-r--r-- | src/components/Thread.svelte | 16 | ||||
| -rw-r--r-- | src/layouts/Default.astro | 8 | ||||
| -rw-r--r-- | src/lib/thread.ts | 8 | ||||
| -rw-r--r-- | src/pages/board/[board].astro | 1 | ||||
| -rw-r--r-- | src/pages/create/[board].astro | 54 | ||||
| -rw-r--r-- | src/pages/create/thread.ts | 28 | 
7 files changed, 112 insertions, 27 deletions
| diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte index 09469cc..bc53f4d 100644 --- a/src/components/Comment.svelte +++ b/src/components/Comment.svelte @@ -8,24 +8,24 @@  <div class="commentbox" id="{comment.id}">    <span style="line-height: 2rem;"> -    {comment.id} +    <span style="font-family: mono">{comment.id}</span>      at {formatTime(comment.creationDate)} <br> -    ->  <span style="{creatorColor(comment.commentCreator)}"> +    ->  <span style="{creatorColor(comment.commentCreator)}; font-family: mono">        {comment.commentCreator}      </span> <br>    </span> -    {#if comment.imageId!= null && comment.imageId != undefined} -      {#if comment.fileType == 'image'} -        <a href="{comment.imageId}" target="_blank" rel="noopener noreferrer"> -          <img src="{comment.imageId}" alt="{comment.imageId}" height="300px" width="300px"> <br> -        </a> -      {:else if comment.fileType == 'video'} -        <video width="320" height="240" controls muted> -          <source src="{comment.imageId}"> -        </video> -      {/if} +  {#if comment.imageId!= null && comment.imageId != undefined} +    {#if comment.fileType == 'image'} +      <a href="{comment.imageId}" target="_blank" rel="noopener noreferrer"> +        <img src="{comment.imageId}" alt="{comment.imageId}" height="300px" width="300px"> <br> +      </a> +    {:else if comment.fileType == 'video'} +      <video width="320" height="240" controls muted> +        <source src="{comment.imageId}"> +      </video>      {/if} +  {/if}  <p>{@html comment.commentText}</p> diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte index 8e07c9f..fee1a78 100644 --- a/src/components/Thread.svelte +++ b/src/components/Thread.svelte @@ -21,10 +21,10 @@  {#if thread.id != "rules"}    <div class="threadbox" id="{thread.id}">      <span style="line-height: 2rem;"> -      <a href="/board/{board}/{thread.id}">{thread.id}</a> +      <a href="/board/{board}/{thread.id}" style="font-family: mono">{thread.id}</a>        at {formatTime(thread.creationDate)} <br> -      ->  <span style="{creatorColor(thread.threadCreator )}"> +      ->  <span style="{creatorColor(thread.threadCreator )}; font-family: mono">          {thread.threadCreator}        </span > <br> @@ -33,8 +33,8 @@            {#each replies as id}              <a href="/board/{board}/{thread.id}#{id}" onmouseover="document.getElementById('{id}').classList.add('targeted')" onmouseleave="document.getElementById('{id}').classList.remove('targeted')">>>{id}</a>             {/each} -      </span> <hr> -    {/if} +        </span> <hr> +      {/if}      </span> @@ -60,15 +60,15 @@  {/if}  <style> -.threadbox { +  .threadbox {      width: 600px;      border: 10px solid green;      padding: 10px;      margin: 10px;      margin-left: 0px;      background-color: white; -} -:target, .targeted { +  } +  :target, .targeted {      background-color: #ffa; -} +  }  </style> diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index 85fd510..5a2a372 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -11,11 +11,11 @@    <body>      <slot />    </body> -<html> +</html>  <style>    html { -        font-family: sans-serif; -        padding-left: 1em; -	} +  font-family: sans-serif; +  padding-left: 1em; +  }  </style> diff --git a/src/lib/thread.ts b/src/lib/thread.ts index d0a4fce..6bc54ce 100644 --- a/src/lib/thread.ts +++ b/src/lib/thread.ts @@ -2,7 +2,7 @@ import { writeFileSync, existsSync } from 'fs';  import { getImg } from './image';  import type Thread from '../models/Thread' -export async function processThreadIn(board: string, thread: Thread, procComments?: false) { +export async function processThreadIn(board: string, thread: Thread, comments? =false) {    if(!thread || !board) return;    let imageId: string = thread.imageId; @@ -13,7 +13,7 @@ export async function processThreadIn(board: string, thread: Thread, procComment    thread.threadText = replaceURLs(thread.threadText, board, thread.id); -  if(!procComments) return; +  if(!comments) return;    for(let comment of thread.comments)    { @@ -27,6 +27,10 @@ export async function processThreadIn(board: string, thread: Thread, procComment    }  } +export async function processThreadOUT(board: string, thread: Thread, comments? = false) { + +} +  function replaceURLs(text: string, board: string, OPtid?: string): string {    if(!text) return; diff --git a/src/pages/board/[board].astro b/src/pages/board/[board].astro index 2624fed..23a5551 100644 --- a/src/pages/board/[board].astro +++ b/src/pages/board/[board].astro @@ -22,5 +22,4 @@ for(let thread of threads)    {threads.map((thread) => (      <Thread thread={thread} board={board} />    ))} -  </Default> diff --git a/src/pages/create/[board].astro b/src/pages/create/[board].astro new file mode 100644 index 0000000..45f8b0d --- /dev/null +++ b/src/pages/create/[board].astro @@ -0,0 +1,54 @@ +--- +import Default from '../../layouts/Default.astro' +const { board } = Astro.params; +--- + +<h1>{board}</h1> + +<Default> +  <form id="form" method="post" action="/create/thread" onsubmit="document.getElementById('submit-button').disabled = true"> +    <textarea name="ThreadName" placeholder="Thread Name" style="height: 1.5rem; width: 350px;"></textarea> <br> +    <textarea name="ThreadText" placeholder="Thread Contents" style="height: 150px; width: 350px;"></textarea> +    <br> <input id="submit-button" type="submit" value="Create Thread" /> +    <input id="image" type="file" accept=".png,.jpg,.gif,.bmp,.mp4" /> + +  </form> +  <script define:vars={{ board }}> +    document.forms['form'].addEventListener('submit', async (event) => { +      event.preventDefault(); + +      let form = new FormData(event.target); +      let reader = new FileReader(); + +      reader.onload = e => { +        form.append('image', +          (e != null) ? e.target.result.toString() : '' +        ); +      } + +      reader.onloadend = () => { +        fetch(event.target.action, { +          method: event.target.method, +          body: new URLSearchParams(form) +        }).then((r) => { +          if(r.status == 200) { +            alert('Thread Successfuly Posted'); +            window.location.assign(`/board/${board}`); +          } +          else alert('An Error has Accured'); +        }); +      } + +      form.append('board', board); + +      let image = document.getElementById("image").files[0]; +      if(image) { +        reader.readAsDataURL(image); +      } else { +        reader.onload(null); +        reader.onloadend(); +      } + +    }); +  </script> +</Default> diff --git a/src/pages/create/thread.ts b/src/pages/create/thread.ts new file mode 100644 index 0000000..0af3471 --- /dev/null +++ b/src/pages/create/thread.ts @@ -0,0 +1,28 @@ +import type { APIRoute } from 'astro'; +import { v4 as uuidV4 } from 'uuid'; + +import type Thread from '../../models/Thread' +import { api } from '../../lib/api' + +export async function post({ params, request }): APIRoute { +    const form = await request.formData(); + +    let t: Thread = {}; +    t.id = uuidV4().toString(); +    t.ThreadName = form.get('ThreadName').toString(); +    // data["ThreadCreator"] = locals.userid; +    t.ThreadCreator = ''; +    t.ThreadText = form.get('ThreadText').toString(); +    t.Comments = []; +    t.CreationDate = Date.now(); +    // data["ImageId"] = await post_img(base64image, writeFileSync); +    // data["FileType"] = get_img_type(base64image); +    t.ImageId = form.get('image').toString(); +    t.FileType = ''; + +    // await api('post', `thread/${form.get('board')}`, JSON.stringify(data)); + +    return new Response(null, { +        status: 200 +    }); +} | 
