posting thread and image works

1 files changed, 55 insertions, 24 deletions

diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte
index fee1a78..0321b8d 100644
--- a/src/components/Thread.svelte
+++ b/src/components/Thread.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
-  import { creatorColor, formatTime } from '../lib/util';
+  import { creatorColor, formatTime} from '../lib/util';
   import type Thread from '../models/Thread';
+
   export let thread: Thread;
   export let board: string;
+  export let comments: boolean = false;
 
   let replies: string[] = [];
-  const listReplies = (id: string): boolean => {
+  const listReplies = (id: string, getReplies: boolean = false): any => {
+    if(getReplies) return replies;
+
     replies = [];
     thread.comments.forEach(comment => {
       if(comment.commentText.includes(id))
@@ -15,8 +19,8 @@
     if(replies.length <= 0) return false;
     return true
   }
-</script>
 
+</script>
 
 {#if thread.id != "rules"}
   <div class="threadbox" id="{thread.id}">
@@ -27,13 +31,16 @@
       ->  <span style="{creatorColor(thread.threadCreator )}; font-family: mono">
         {thread.threadCreator}
       </span > <br>
+      <hr>
 
-      {#if listReplies(thread.id)}
-        <hr> <span style=" display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;">
-          {#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> &#xfeff
-          {/each}
-        </span> <hr>
+      {#if comments}
+        {#if listReplies(thread.id) }
+          <span style=" display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;">
+            {#each listReplies(thread.id, true) 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> &#xfeff
+            {/each}
+          </span> <hr>
+        {/if}
       {/if}
 
     </span>
@@ -54,21 +61,45 @@
 
 <p>{@html thread.threadText}</p>
 
-<slot />
+{#if comments}
+  {#each thread.comments as comment}
+    <div class="commentbox" id="{comment.id}">
+      <span style="line-height: 2rem;">
+        <span style="font-family: mono">{comment.id}</span>
+        at {formatTime(comment.creationDate)} <br>
 
-  </div>
+        ->  <span style="{creatorColor(comment.commentCreator)}; font-family: mono">
+          {comment.commentCreator}
+        </span> <br>
+        <hr>
+
+        {#if listReplies(comment.id)}
+          <span style=" display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;">
+            {#each listReplies(comment.id, true) 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> &#xfeff
+            {/each}
+          </span> <hr>
+        {/if}
+
+      </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}
+
+<p>{@html comment.commentText}</p>
+
+    </div>
+  {/each}
 {/if}
 
-<style>
-  .threadbox {
-    width: 600px;
-    border: 10px solid green;
-    padding: 10px;
-    margin: 10px;
-    margin-left: 0px;
-    background-color: white;
-  }
-  :target, .targeted {
-    background-color: #ffa;
-  }
-</style>
+  </div>
+{/if}