continued to work on ThreadPage.razor
This commit is contained in:
parent
585440d10f
commit
4b1f234f2a
10 changed files with 327 additions and 17 deletions
|
@ -37,4 +37,7 @@ public class CommentData
|
|||
[Required]
|
||||
public string Board { get; set; }
|
||||
|
||||
[Required]
|
||||
public long CreatedAt { get; set; }
|
||||
|
||||
}
|
|
@ -23,7 +23,12 @@ public static class PostsRepository
|
|||
public static async Task<PostData> getPostByIdAsync(int postId)
|
||||
{
|
||||
await using var db = new AppDBContext();
|
||||
return await db.Posts.FirstOrDefaultAsync(post => post.PostID == postId);
|
||||
return await db.Posts
|
||||
.Where(post => post.PostID == postId)
|
||||
.Include(post => post.Image)
|
||||
.Include(post => post.Comments)
|
||||
.FirstOrDefaultAsync();
|
||||
//return await db.Posts.FirstOrDefaultAsync(post => post.PostID == postId);
|
||||
}
|
||||
|
||||
public static async Task<int> createPostAsync(PostData postToCreate)
|
||||
|
|
|
@ -1,8 +0,0 @@
|
|||
@page "/{board}/thread/{threadId}"
|
||||
<h3>Thread #xx on /x/</h3>
|
||||
|
||||
@RouteData.Values["title"]
|
||||
|
||||
@code {
|
||||
|
||||
}
|
42
ImageBoardServerApp/Pages/ThreadPage.razor
Normal file
42
ImageBoardServerApp/Pages/ThreadPage.razor
Normal file
|
@ -0,0 +1,42 @@
|
|||
@page "/{boardName}/thread/{threadId}"
|
||||
@using System.ComponentModel.DataAnnotations
|
||||
@using ImageBoardServerApp.Data.Repository
|
||||
@inject NavigationManager NavigationManager
|
||||
|
||||
<h3>Thread #@threadId on /@boardName/</h3>
|
||||
<Post post="@post" showOpenThread="false"/>
|
||||
<hr/>
|
||||
|
||||
@foreach (var comment in post.Comments)
|
||||
{
|
||||
<Comment comment="comment"/>
|
||||
<hr/>
|
||||
}
|
||||
<CommentForm post="post"/>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
[Required]
|
||||
public string boardName { get; set; }
|
||||
|
||||
[Parameter]
|
||||
[Required]
|
||||
public string threadId { get; set; }
|
||||
|
||||
private PostData post;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
post = await PostsRepository.getPostByIdAsync(int.Parse(threadId));
|
||||
}
|
||||
catch (FormatException fe)
|
||||
{
|
||||
NavigationManager.NavigateTo("/notfound");
|
||||
return;
|
||||
}
|
||||
if(post == null)
|
||||
NavigationManager.NavigateTo("/notfound");
|
||||
}
|
||||
}
|
|
@ -23,7 +23,7 @@
|
|||
{
|
||||
@foreach(var post in posts)
|
||||
{
|
||||
<Post post="@post"></Post>
|
||||
<Post post="@post" showOpenThread="true"></Post>
|
||||
<hr/>
|
||||
}
|
||||
}
|
||||
|
|
62
ImageBoardServerApp/Shared/Components/Comment.razor
Normal file
62
ImageBoardServerApp/Shared/Components/Comment.razor
Normal file
|
@ -0,0 +1,62 @@
|
|||
@using System.ComponentModel.DataAnnotations
|
||||
@using ImageBoardServerApp.Data
|
||||
|
||||
<div class="threadHeader">
|
||||
<span>[</span>
|
||||
<a class="toggleOpened" onclick="@ToggleOpened">@toggleText</a>
|
||||
<span>]</span>
|
||||
<span class="name">@comment.Username</span>
|
||||
<span class="date">@getTimeFromUnix(comment.CreatedAt)</span>
|
||||
<span class="post-id">No.@comment.CommentID</span>
|
||||
</div>
|
||||
@if (opened)
|
||||
{
|
||||
<div class="threadContent">
|
||||
<div class="threadImage">
|
||||
@if (@comment.Image != null)
|
||||
{
|
||||
<img src="@($"data:image/jpeg;base64,{Convert.ToBase64String(@comment.Image.Image)}")" alt="No Image found" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>[No Image]</span>
|
||||
}
|
||||
</div>
|
||||
<div class="threadTextContainer">
|
||||
@foreach (string s in @comment.Content.Split("\n"))
|
||||
{
|
||||
<span class='threadText'>@s</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="threadFooter">
|
||||
<span>[</span>
|
||||
<a class="report" href="/report/@comment.Board/@comment.CommentID" target="_blank">Report</a>
|
||||
<span>]</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
|
||||
@code {
|
||||
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;
|
||||
}
|
||||
|
||||
private bool opened = true;
|
||||
|
||||
private string toggleText = "-";
|
||||
|
||||
private void ToggleOpened()
|
||||
{
|
||||
opened = !opened;
|
||||
toggleText = opened ? "-" : "+";
|
||||
}
|
||||
|
||||
[Parameter]
|
||||
[Required]
|
||||
public CommentData comment { get; set; }
|
||||
}
|
57
ImageBoardServerApp/Shared/Components/Comment.razor.css
Normal file
57
ImageBoardServerApp/Shared/Components/Comment.razor.css
Normal file
|
@ -0,0 +1,57 @@
|
|||
.toggleOpened{
|
||||
color: #0a58ca;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.toggleOpened:hover{
|
||||
color: #0a58ca; !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.title{
|
||||
color: #1e5aaf;
|
||||
}
|
||||
|
||||
.name{
|
||||
color: #339305;
|
||||
}
|
||||
|
||||
.threadHeader{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.threadFooter{
|
||||
text-align: right; !important;
|
||||
align-self: end; !important;
|
||||
}
|
||||
|
||||
.threadContent{
|
||||
text-align: left;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.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: grid;
|
||||
}
|
||||
|
||||
.threadTextContainer{
|
||||
margin: 0;
|
||||
}
|
110
ImageBoardServerApp/Shared/Components/CommentForm.razor
Normal file
110
ImageBoardServerApp/Shared/Components/CommentForm.razor
Normal file
|
@ -0,0 +1,110 @@
|
|||
@using System.ComponentModel.DataAnnotations
|
||||
@using ImageBoardServerApp.Data.Repository
|
||||
|
||||
@inject NavigationManager NavigationManager
|
||||
|
||||
<div>
|
||||
<span>[</span>
|
||||
<a class="toggleOpened" onclick="@ToggleOpened">@toggleText</a>
|
||||
<span>]</span>
|
||||
</div>
|
||||
@if (opened)
|
||||
{
|
||||
<div class="pd centered">
|
||||
<span>Comment on @post.Title by @post.Username in @post.Board</span>
|
||||
|
||||
<div class="pd centered marg">
|
||||
<RadzenTextBox Placeholder="Username (Anonymous)" MaxLength="15" Change=@(args => OnChange(args, "username")) Class="w-100"/>
|
||||
</div>
|
||||
|
||||
<div class="pd centered marg">
|
||||
<RadzenTextArea Placeholder="Comment..." @bind-Value="@postContent" Cols="30" Rows="6" Change=@(args => OnChange(args, "Content")) Class="w-100"/>
|
||||
</div>
|
||||
|
||||
<div class="pd centered marg">
|
||||
<RadzenButton class="pd" Click="@onPostClick" Text="Comment!"></RadzenButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
@code {
|
||||
|
||||
private bool opened = false;
|
||||
|
||||
private string toggleText = "Open Comment Formula";
|
||||
|
||||
private void ToggleOpened()
|
||||
{
|
||||
opened = !opened;
|
||||
toggleText = opened ? "Close Comment Formula" : "Open Comment Formula";
|
||||
}
|
||||
|
||||
[Parameter]
|
||||
[Required]
|
||||
public PostData post { get; set; }
|
||||
|
||||
string postUsername = "Anonymous";
|
||||
string postContent = "";
|
||||
|
||||
void OnChange(string value, string name)
|
||||
{
|
||||
switch (name)
|
||||
{
|
||||
case "username":
|
||||
postUsername = value;
|
||||
if (value == "")
|
||||
{
|
||||
postUsername = "Anonymous";
|
||||
}
|
||||
break;
|
||||
case "content":
|
||||
postContent = value;
|
||||
break;
|
||||
default:
|
||||
Console.WriteLine("not found.");
|
||||
break;
|
||||
}
|
||||
Console.WriteLine($"Smth changed!: {value}");
|
||||
}
|
||||
|
||||
private async Task onPostClick()
|
||||
{
|
||||
var userToCreate = new UserData
|
||||
{
|
||||
Ipv4Address = "192.168.178.101",
|
||||
Banned = false,
|
||||
lastActionTimeStamp = DateTime.Now.Millisecond
|
||||
};
|
||||
int userID = await UsersRepository.createUserAsync(userToCreate);
|
||||
|
||||
var commentToCreate = new CommentData()
|
||||
{
|
||||
PostID = post.PostID,
|
||||
UserID = userID,
|
||||
Content = postContent,
|
||||
Username = postUsername,
|
||||
Board = post.Board,
|
||||
CreatedAt = DateTimeOffset.Now.ToUnixTimeMilliseconds()
|
||||
/*
|
||||
* UserID = userID,
|
||||
Post = post,
|
||||
Username = postUsername,
|
||||
Content = postContent,
|
||||
CreatedAt = DateTimeOffset.Now.ToUnixTimeMilliseconds(),
|
||||
Board = post.Board
|
||||
*/
|
||||
};
|
||||
int commentId = await CommentsRepository.createCommentAsync(commentToCreate);
|
||||
if (commentId == -1)
|
||||
{
|
||||
//Open comment unsucessfull
|
||||
NavigationManager.NavigateTo("/UnSuccessfulPost");
|
||||
Console.WriteLine("Shit sucks and did not work.");
|
||||
return;
|
||||
}
|
||||
//comment successfull
|
||||
Console.WriteLine("Post created");
|
||||
}
|
||||
}
|
23
ImageBoardServerApp/Shared/Components/CommentForm.razor.css
Normal file
23
ImageBoardServerApp/Shared/Components/CommentForm.razor.css
Normal file
|
@ -0,0 +1,23 @@
|
|||
.toggleOpened{
|
||||
color: #0a58ca;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.toggleOpened:hover{
|
||||
color: #0a58ca; !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pd {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.marg{
|
||||
margin: 2px
|
||||
}
|
|
@ -2,9 +2,12 @@
|
|||
@using ImageBoardServerApp.Data
|
||||
|
||||
<div class="threadHeader">
|
||||
@if (showOpenThread)
|
||||
{
|
||||
<span>[</span>
|
||||
<a class="toggleOpened" onclick="@ToggleOpened">@toggleText</a>
|
||||
<span>]</span>
|
||||
}
|
||||
<span class="title">@post.Title</span>
|
||||
<span class="name">@post.Username</span>
|
||||
<span class="date">@getTimeFromUnix(post.CreatedAt)</span>
|
||||
|
@ -14,7 +17,6 @@
|
|||
{
|
||||
<div class="threadContent">
|
||||
<div class="threadImage">
|
||||
<!-- TODO: Make Images Required. -->
|
||||
@if (@post.Image != null)
|
||||
{
|
||||
<img src="@($"data:image/jpeg;base64,{Convert.ToBase64String(@post.Image.Image)}")" alt="No Image found" />
|
||||
|
@ -36,9 +38,18 @@
|
|||
<span>[</span>
|
||||
<a class="report" href="/report/@post.Board/@post.PostID" target="_blank">Report</a>
|
||||
<span>]</span>
|
||||
@if (showOpenThread)
|
||||
{
|
||||
<span>[</span>
|
||||
<a class="openThread" href="/@post.Board/thread/@post.PostID" target="_blank">(@post.Comments.Count) Open Thread</a>
|
||||
<span>]</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>[</span>
|
||||
<span class="openThread">@post.Comments.Count Comments</span>
|
||||
<span>]</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
@ -65,4 +76,9 @@
|
|||
[Parameter]
|
||||
[Required]
|
||||
public PostData post { get; set; }
|
||||
|
||||
|
||||
[Parameter]
|
||||
[Required]
|
||||
public bool showOpenThread { get; set; }
|
||||
}
|
Loading…
Reference in a new issue