Moved from DevHive

3 files changed, 240 insertions, 0 deletions

diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css
new file mode 100644
index 0000000..1b88c7d
--- /dev/null
+++ b/src/app/components/post/post.component.css
@@ -0,0 +1,134 @@
+.post {
+  display: flex;
+  width: 98%;
+
+  margin: .5em auto;
+  box-sizing: border-box;
+  padding: .5em;
+  background-color: var(--card-bg);
+  position: relative;
+}
+
+.post:first-child {
+  margin-top: 0;
+}
+
+hr {
+  border: 1px solid black;
+  width: 90%;
+}
+
+/* Author */
+
+.author {
+  display: flex;
+  margin-bottom: .2em;
+}
+
+.author:hover {
+  cursor: pointer;
+}
+
+.author > img {
+  width: 2.2em;
+  height: 2.2em;
+  margin-right: .2em;
+}
+
+.author-info > .handle {
+  font-size: .9em;
+  color: gray;
+}
+
+/* Content */
+
+.content {
+  flex: 1;
+}
+
+.message {
+  margin: .3em 0;
+  word-break: break-all;
+}
+
+.bottom-post {
+  font-size: .5em;
+  color: gray;
+  display: flex;
+  align-items: center;
+}
+
+.separator {
+  margin: 0 .5em;
+}
+
+.comment-count {
+  font-size: 1em;
+}
+
+.comment-count > img {
+  height: .8em;
+}
+
+.message:hover, .timestamp:hover {
+  cursor: pointer;
+}
+
+/* Rating */
+
+/* Temporary, until ratings are implemented fully */
+.rating {
+  display: none !important;
+}
+
+.rating {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 4.4em;
+  margin: auto -.1em auto 0;
+}
+
+.score {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+
+.vote {
+  display: flex;
+  align-items: center;
+  flex: 1;
+
+  background: var(--card-bg);
+  font-size: 1em;
+
+  border: 1px solid var(--card-bg);
+  box-sizing: border-box;
+  border-radius: .2em;
+
+  }
+
+.vote:hover {
+  border: 1px solid var(--focus-color);
+  color: var(--focus-color);
+  cursor: pointer;
+}
+
+/* Attachments */
+
+.attachments {
+  display: flex;
+  width: 98%;
+  margin: -.3em auto .5em auto;
+  flex-wrap: wrap;
+}
+
+.attachments:empty {
+  display: none;
+}
+
+.attachments > * {
+  flex: 1;
+}
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
new file mode 100644
index 0000000..bc0d84a
--- /dev/null
+++ b/src/app/components/post/post.component.html
@@ -0,0 +1,49 @@
+<app-loading *ngIf="!loaded"></app-loading>
+
+<div class="post rounded-border" *ngIf="loaded">
+	<div class="content">
+		<div class="author" (click)="goToAuthorProfile()">
+			<img class="round-image" [src]="user.profilePictureURL">
+			<div class="author-info">
+				<div class="name">
+					{{ user.firstName }} {{ user.lastName }}
+				</div>
+				<div class="handle">
+					@{{ user.userName }}
+				</div>
+			</div>
+		</div>
+		<div class="message" (click)="goToPostPage()">
+			{{ post.message }}
+		</div>
+		<div class="bottom-post" (click)="goToPostPage()">
+			<div class="timestamp">
+				{{ timeCreated }}
+			</div>
+			<div class="separator">
+				║
+			</div>
+			<div class="comment-count">
+				{{ post.comments.length }}
+				<img src="assets/images/comment.png">
+			</div>
+		</div>
+
+	</div>
+	<div class="rating">
+		<button class="vote">
+			ᐃ
+		</button>
+		<div class="score">
+			{{ votesNumber }}
+		</div>
+		<button class="vote">
+			ᐁ
+		</button>
+	</div>
+</div>
+<div class="attachments">
+	<div *ngFor="let fileURL of post.fileURLs">
+		<app-post-attachment class="no-events" [paramURL]="fileURL"></app-post-attachment>
+	</div>
+</div>
diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts
new file mode 100644
index 0000000..387f56f
--- /dev/null
+++ b/src/app/components/post/post.component.ts
@@ -0,0 +1,57 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Guid } from 'guid-typescript';
+import { PostService } from 'src/app/services/post.service';
+import { UserService } from 'src/app/services/user.service';
+import { User } from 'src/models/identity/user';
+import { Post } from 'src/models/post';
+
+@Component({
+  selector: 'app-post',
+  templateUrl: './post.component.html',
+  styleUrls: ['./post.component.css'],
+})
+export class PostComponent implements OnInit {
+  public loaded = false;
+  public user: User;
+  public post: Post;
+  public votesNumber: number;
+  public timeCreated: string;
+  @Input() paramId: string;
+
+  constructor(private _postService: PostService, private _userService: UserService, private _router: Router)
+  { }
+
+  ngOnInit(): void {
+    this.post = this._postService.getDefaultPost();
+    this.user = this._userService.getDefaultUser();
+
+    this._postService.getPostRequest(Guid.parse(this.paramId)).subscribe(
+      (result: object) => {
+        Object.assign(this.post, result);
+        this.post.fileURLs = Object.values(result)[7];
+        this.votesNumber = 23;
+
+        this.timeCreated = new Date(this.post.timeCreated).toLocaleString('en-GB');
+        this.loadUser();
+      }
+    );
+  }
+
+  private loadUser(): void {
+    this._userService.getUserByUsernameRequest(this.post.creatorUsername).subscribe(
+      (result: object) => {
+        Object.assign(this.user, result);
+        this.loaded = true;
+      }
+    );
+  }
+
+  goToAuthorProfile(): void {
+    this._router.navigate(['/profile/' + this.user.userName]);
+  }
+
+  goToPostPage(): void {
+    this._router.navigate(['/post/' + this.post.postId]);
+  }
+}