feat: started working on replys in comments, changes IDs to GETs

Signed-off-by: limited_dev <loginakkisativ@gmail.com>

ImageBoardServerApp/Shared/Components/Comment.razor.css

@@ -17,7 +17,7 @@
 }
 
 .redText {
-    color: #a91e1e;
+    color: #da1313;
 }
 
 
@@ -51,7 +51,7 @@
     width: 100%;
 }
 
-.threadImage img:hover{
+.threadImage img.active{
     /*transform: scale(3);*/
     max-width:500px;
     width: 100%;

ImageBoardServerApp/Shared/Components/CommentHover.razor

@@ -0,0 +1,90 @@
+@using System.Text.RegularExpressions
+@using ImageBoardServerApp.Data.Repository
+@using System.ComponentModel.DataAnnotations
+<span class="name">@comment.Username</span>
+@if (@role != "User")
+{
+    <span class="@role" >##@role </span>
+}
+else
+{
+    <span> </span>
+}
+<span class="date">@getTimeFromUnix(comment.CreatedAt)</span>
+<span class="post-id">No.@comment.GET</span>
+<div class="threadContent">
+    <div class="threadImage">
+        @if (image != null)
+        {
+            <img src="@($"{image.ImageLocation}?size=258x258")" alt="No Image found" />
+        }
+    </div>
+    <div class="threadTextContainer">
+        @foreach (string s in @comment.Content.Split("\n"))
+        {
+            var className = "";
+            @if (s.StartsWith(">") && !Regex.IsMatch(s, "^>{2,}"))
+            {
+                className = "greenText";
+            }
+            
+            <span class='threadText @className'>
+                @foreach (string line in s.Split(" "))
+                {
+                    var className2 = "";
+                    @if (@Regex.IsMatch(line, ">>\\d+"))
+                    {
+                        className2 = "redText";
+                        <a href="/@comment.Board/@comment.PostID/@Regex.Match(s, ">>(\\d+)").Value.Substring(2)" class="threadMsg @className2">
+                            @line
+                        </a>
+                    }
+                    else
+                    {
+                        <span class="threadMsg">
+                            @line
+                        </span>
+                    }
+                    <span>&nbsp;</span>
+
+                }
+            </span>
+        }
+    </div>
+    </div>
+@code {
+    private ImageData image;
+    private string role;
+
+    private static DateTime getTimeFromUnix(double javaTimeStamp)
+    {
+        var dateTime = new DateTime(1970, 1, 1, 0, 0, 0, 0, DateTimeKind.Utc);
+        dateTime = dateTime.AddMilliseconds( javaTimeStamp ).ToLocalTime();
+        return dateTime;
+    }
+    
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        int i;
+        try
+        {
+            i = (int)comment.ImageID;
+        }
+        catch (InvalidOperationException ioe)
+        {
+            i = -1;
+        }
+        if (i != null)
+        {
+            image = await ImagesRepository.getImageByIdAsync(i);
+        }
+
+        var cmt = await CommentsRepository.getCommentByIdAsync(comment.CommentID);
+        role = cmt.User.Role;
+    }
+
+    [Parameter]
+    [Required]
+    public CommentData comment { get; set; }
+}

ImageBoardServerApp/Shared/Components/CommentHover.razor.css

@@ -0,0 +1,75 @@
+.toggleOpened{
+    color: #0a58ca;
+    text-decoration: none;
+}
+
+.toggleOpened:hover{
+    color: #0a58ca; !important;
+    cursor: pointer;
+}
+
+.title{
+    color: #1e5aaf;
+}
+
+.name{
+    color: #339305;
+}
+
+.redText {
+    color: #da1313;
+}
+
+
+.threadHeader{
+    text-align: left;
+}
+
+.threadFooter{
+    text-align: right; !important;
+    align-self: end; !important;
+}
+
+.threadContent{
+    text-align: left;
+    display: flex;
+}
+
+.greenText{
+    color: #3caf03;
+}
+
+.threadImage{
+    margin: 6px;
+    max-width: 500px;
+    max-height: 500px;
+    padding: 5px;
+}
+
+.threadImage img{
+    max-width:150px;
+    width: 100%;
+}
+
+.threadImage img:hover{
+    /*transform: scale(3);*/
+    max-width:500px;
+    width: 100%;
+}
+
+.threadText{
+    display: block;
+}
+
+.threadTextContainer{
+    margin: 0;
+}
+
+
+.Admin{
+    color: #ff191c;
+}
+
+.Mod{
+    color: #af13d7;
+}

ImageBoardServerApp/Shared/Components/Post.razor

@@ -1,9 +1,7 @@
-@using System.ComponentModel.DataAnnotations
-@using System.Text.RegularExpressions
-@using ImageBoardServerApp.Auth
-@using ImageBoardServerApp.Data
+@using System.Text.RegularExpressions
 @using ImageBoardServerApp.Data.Repository
-@using Microsoft.AspNetCore.Html
+@using ImageBoardServerApp.Auth
+@using System.ComponentModel.DataAnnotations
 @inject AuthenticationStateProvider authStateProvider
 @inject NavigationManager navigationManager;
 
@@ -45,7 +43,8 @@
         <div class="threadImage">
             @if (@post.Image != null)
             {
-                <img src="@($"{@post.Image.ImageLocation}?size=258x258")" alt="No Image found" />
+                string isActiveClass = isActive ? "active" : "";
+                <img @onclick="() => isActive = !isActive" class="@isActiveClass" src="@($"{@post.Image.ImageLocation}?size=258x258")" alt="No Image found" />
             }
             else
             {
@@ -105,7 +104,7 @@
         @if (showOpenThread)
         {
             <span>[</span>
-            <a class="openThread" href="/@post.Board/thread/@post.PostID">(@post.Comments.Count) View Thread</a>
+            <a class="openThread" href="/@post.Board/thread/@post.GET">(@post.Comments.Count) View Thread</a>
             <span>]</span>
         }
         else
@@ -122,6 +121,7 @@
 @code {
 
     public bool canDel { get; set; }
+    public bool isActive { get; set; } = false;
     
     private async void lockMe()
     {

ImageBoardServerApp/Shared/Components/Post.razor.css

@@ -54,7 +54,7 @@
     width: 100%;
 }
 
-.threadImage img:hover{
+.threadImage img.active{
     /*transform: scale(3);*/
     max-width:500px;
     width: 100%;