Merge pull request #2 from Team-Kaleidoscope/rating_system

Rating system

1 files changed, 87 insertions, 7 deletions

diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts
index fa5ac2f..4bb41a7 100644
--- a/src/app/components/post/post.component.ts
+++ b/src/app/components/post/post.component.ts
@@ -2,9 +2,11 @@ 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 { RatingService } from 'src/app/services/rating.service';
 import { UserService } from 'src/app/services/user.service';
-import { User } from 'src/models/identity/user.model';
-import { Post } from 'src/models/post.model';
+import { User } from 'src/models/identity/user';
+import { Post } from 'src/models/post';
+import { TokenService } from '../../services/token.service';
 
 @Component({
   selector: 'app-post',
@@ -18,22 +20,30 @@ export class PostComponent implements OnInit {
   public votesNumber: number;
   public timeCreated: string;
   @Input() paramId: string;
+  @Input() index: number;
+  public loggedIn = false;
+  private voteBtns: HTMLCollectionOf<HTMLElement>;
 
-  constructor(private _postService: PostService, private _userService: UserService, private _router: Router)
-  { }
+  constructor(private _postService: PostService, private _ratingServe: RatingService, private _userService: UserService, private _router: Router, private _tokenService: TokenService) { }
 
   ngOnInit(): void {
+    this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== '';
+
     this.post = this._postService.getDefaultPost();
     this.user = this._userService.getDefaultUser();
 
     this._postService.getPostRequest(Guid.parse(this.paramId)).subscribe({
       next: (result: object) => {
         Object.assign(this.post, result);
+
         this.post.fileURLs = Object.values(result)[7];
-        this.votesNumber = 23;
+        this.votesNumber = this.post.currentRating;
+
+        this.voteBtns = document.getElementsByClassName('vote') as HTMLCollectionOf<HTMLElement>;
+
+        this.timeCreated = new Date(this.post.timeCreated).toLocaleString('en-GB');        
 
-        this.timeCreated = new Date(this.post.timeCreated).toLocaleString('en-GB');
-        this.loadUser();
+        this.loadUser();        
       }
     });
   }
@@ -42,6 +52,9 @@ export class PostComponent implements OnInit {
     this._userService.getUserByUsernameRequest(this.post.creatorUsername).subscribe({
       next: (result: object) => {
         Object.assign(this.user, result);
+
+        this.highlightButtonsOnInit();
+
         this.loaded = true;
       }
     });
@@ -54,4 +67,71 @@ export class PostComponent implements OnInit {
   goToPostPage(): void {
     this._router.navigate(['/post/' + this.post.postId]);
   }
+
+  votePost(isLike: boolean): void {
+    if (!this.loggedIn) {
+      this._router.navigate(['/login']);
+      return;
+    }
+
+    this._ratingServe.getRatingByUserAndPostWithSessionStorageRequest(Guid.parse(this.paramId)).subscribe(
+      (x: object) => {        
+        if (Object.values(x)[3] === isLike) {
+          this.deleteRating(Object.values(x)[0], isLike);
+
+          this.changeColorOfVoteButton(false, false);
+        }
+        else {
+          this.putRating(isLike);
+
+          this.changeColorOfVoteButton(isLike, !isLike);
+        }
+      },
+      () => {
+        this.createRating(isLike);
+
+        this.changeColorOfVoteButton(isLike, !isLike);
+      }
+    );
+  }
+
+  private createRating(isLike: boolean): void {
+    this._ratingServe.createRatingWithSessionStorageRequest(Guid.parse(this.paramId), isLike).subscribe(
+      () => {
+        this.votesNumber += -1 + Number(isLike) * 2;
+    }
+  );
+}
+
+  private putRating(isLike: boolean): void {
+    this._ratingServe.putRatingWithSessionStorageRequest(Guid.parse(this.paramId), isLike).subscribe(
+      () => {
+        // when false -2 + 0 wjen true -2 + 4 
+        this.votesNumber += -2 + Number(isLike) * 4;
+      }
+    );
+  }
+
+  private deleteRating(ratingId: string, isLike: boolean): void {
+    this._ratingServe.deleteRatingFromSessionStorageRequest(Guid.parse(ratingId)).subscribe(
+      () => {
+        this.votesNumber += 1 - Number(isLike) * 2;
+      }
+    );
+  }
+
+  private changeColorOfVoteButton(isUpvoted: boolean, isDownvoted: boolean): void {
+    this.voteBtns.item(this.index * 2)!.style.backgroundColor = (isUpvoted) ? 'lightblue' : 'white';
+    this.voteBtns.item((this.index * 2) + 1)!.style.backgroundColor = (isDownvoted) ? 'lightblue' : 'white';
+  }
+
+  private highlightButtonsOnInit(): void {
+    this._ratingServe.getRatingByUserAndPostWithSessionStorageRequest(Guid.parse(this.paramId)).subscribe(
+      (x: object) => {
+        const isLike: boolean = Object.values(x)[3];
+
+        this.changeColorOfVoteButton(isLike, !isLike);
+      }
+    );
+  }
 }