update voting

2021-10-04 11:40:58 +02:00
parent 91958dc3ff
commit a92a2447d5
9 changed files with 105 additions and 37 deletions
@@ -16,10 +16,14 @@ export class VoteService {
    }

    voteEntryUp(id: number) {
-        return this.http.put(environment.apiUrl + "/v/e/" + id, {});
+        return this.http.put(environment.apiUrl + "/v/e/" + id + "/up", {});
    }

    voteEntryDown(id: number) {
+        return this.http.put(environment.apiUrl + "/v/e/" + id + "/down", {});
+    }
+
+    unvoteEntry(id: number) {
        return this.http.delete(environment.apiUrl + "/v/e/" + id, {});
    }

@@ -28,10 +32,14 @@ export class VoteService {
    }

    voteCommentUp(id: number) {
-        return this.http.put(environment.apiUrl + "/v/c/" + id, {});
+        return this.http.put(environment.apiUrl + "/v/c/" + id + "/up", {});
    }

    voteCommentDown(id: number) {
+        return this.http.put(environment.apiUrl + "/v/c/" + id + "/down", {});
+    }
+
+    unvoteComment(id: number) {
        return this.http.delete(environment.apiUrl + "/v/c/" + id, {});
    }

@@ -1,21 +1,29 @@
 <div mat-line>
  <small>
+    <ng-container *ngIf="comment.metadata && !comment.metadata.unvote">
+      <a href="javascript:" (click)="voteUp(comment.id)" matTooltip="{{'vote.up' | i18n}}">
+        <mat-icon inline="true">thumb_up</mat-icon>
+      </a>
+      <span>&nbsp;</span>
+      <a href="javascript:" (click)="voteDown(comment.id)" matTooltip="{{'vote.down' | i18n}}">
+        <mat-icon inline="true">thumb_down</mat-icon>
+      </a>
+      <span>&nbsp;</span>
+    </ng-container>
+    <span class="voted" *ngIf="comment.metadata && comment.metadata.unvote">
+        <mat-icon *ngIf="comment.metadata && comment.metadata.upvoted" inline="true" >thumb_up</mat-icon>
+        <mat-icon *ngIf="comment.metadata && comment.metadata.downvoted"  inline="true">thumb_down</mat-icon>
+      <span>&nbsp;</span>
+    </span>
    <a routerLink="/c/{{comment.id}}" matTooltip="{{comment.created | datef:'LLLL'}}">{{comment.created
      | datef}}</a>
    {{'comment.author' | i18n}}<a routerLink="/u/{{comment.author}}">{{comment.author}}</a>
-    &nbsp;
-    <a *ngIf="comment.metadata && comment.metadata.vote" href="javascript:" (click)="voteUp(comment.id)"
-      matTooltip="{{'vote.up' | i18n}}">
-      <mat-icon inline="true">thumb_up</mat-icon>
-    </a>
-    <span *ngIf="comment.metadata && comment.metadata.vote">&nbsp;</span>
-    <a *ngIf="comment.metadata && comment.metadata.downvote" href="javascript:" (click)="voteDown(comment.id)"
-      matTooltip="{{'vote.down' | i18n}}">
-      <mat-icon inline="true">thumb_down</mat-icon>
-    </a>
+    <span *ngIf="comment.metadata && comment.metadata.unvote"> | </span>
+    <a *ngIf="comment.metadata.unvote" href="javascript:" (click)="unvote()">{{'comment.unvote' | i18n}}</a>
  </small>
 </div>
-<div mat-line class="text">
+<div mat-line class="text"
+  [style.opacity]="comment.metadata && comment.metadata.points && comment.metadata.points < 0 ? 1 + (comment.metadata.points / 10) : '1.0'">
  {{comment.text}}
 </div>

@@ -24,10 +32,6 @@
    <a href="javascript:" (click)="comment.metadata.reply=!comment.metadata.reply">
      {{(comment.metadata.reply ? 'comment.replyHide' : 'comment.reply') | i18n}}
    </a>
-    <span *ngIf="comment.metadata && comment.metadata.unvote">|</span>
-    <a *ngIf="comment.metadata.unvote" href="javascript:" (click)="voteDown()">
-      {{'comment.unvote' | i18n}}
-    </a>
    <span *ngIf="moderator">|</span>
    <a *ngIf="moderator" href="javascript:" (click)="deleteComment(comment)">
      {{'comment.delete' | i18n}}
@@ -13,3 +13,7 @@ small a:hover {
  white-space: break-spaces;
  word-break: break-all;
 }
+
+span.voted {
+  opacity: 0.5;
+}
@@ -53,6 +53,12 @@ export class UiComment implements OnInit {
    });
  }

+  unvote() {
+    this.voteService.unvoteComment(this.comment.id).subscribe((result) => {
+      this.change && this.change()
+    });
+  }
+
  author(author: string) {
    return '<a href="/u/' + author + '">' + author + '</a>';
  }
@@ -1,25 +1,36 @@
 <div mat-line>
  <span *ngIf="index">{{index}}.&nbsp;</span>
-  <mat-icon>{{'entryType.' + entry.entryType + '.icon' | i18n}}</mat-icon>&nbsp;
-  <span *ngIf="entry.metadata && entry.metadata.vote" (click)="voteUp(entry.id)" matTooltip="{{'vote.up' | i18n}}">
-    <mat-icon inline="true">thumb_up</mat-icon>
-  </span>
-  &nbsp;
+  <mat-icon inline="true">{{'entryType.' + entry.entryType + '.icon' | i18n}}</mat-icon>
  <a class="title" *ngIf="entry.url" [href]="entry.url" target="_blank">{{entry.title}}</a>
  <a class="title" *ngIf="!entry.url" routerLink="/e/{{entry.id}}">{{entry.title}}</a>
 </div>
 <div mat-line>
  <small>
+    <ng-container *ngIf="entry.metadata && !entry.metadata.unvote">
+      <a href="javascript:" (click)="voteUp(entry.id)" matTooltip="{{'vote.up' | i18n}}">
+        <mat-icon inline="true">thumb_up</mat-icon>
+      </a>
+      <span>&nbsp;</span>
+      <!--
+      <a href="javascript:" (click)="voteDown(entry.id)" matTooltip="{{'vote.down' | i18n}}">
+        <mat-icon inline="true">thumb_down</mat-icon>
+      </a>
+      <span>&nbsp;</span>
+      -->
+    </ng-container>
+    <span class="voted" *ngIf="entry.metadata && entry.metadata.unvote">
+        <mat-icon *ngIf="entry.metadata && entry.metadata.upvoted" inline="true" >thumb_up</mat-icon>
+        <mat-icon *ngIf="entry.metadata && entry.metadata.downvoted"  inline="true">thumb_down</mat-icon>
+      <span>&nbsp;</span>
+    </span>
    {{'points' | i18n:(entry.metadata && entry.metadata.points)}}
-    {{'entry.author' | i18n}}<a routerLink="/u/{{entry.author}}">{{entry.author}}</a>&nbsp;
    <a routerLink="/e/{{entry.id}}" matTooltip="{{entry.created | datef:'LLLL'}}">{{entry.created
-      | datef}}</a> |
-    <a *ngIf="entry.metadata && entry.metadata.unvote" href="javascript:" (click)="voteDown(entry.id)">
-      {{'entry.unvote' | i18n}}
-    </a> <span *ngIf="entry.metadata && entry.metadata.unvote">|</span>
-    <a routerLink="/e/{{entry.id}}">
-      {{'entry.comments' | i18n:(entry.metadata && entry.metadata.comments)}}
-    </a>
+      | datef}}</a>
+    {{'entry.author' | i18n}}<a routerLink="/u/{{entry.author}}">{{entry.author}}</a>
+    |
+    <a routerLink="/e/{{entry.id}}">{{'entry.comments' | i18n:(entry.metadata && entry.metadata.comments)}}</a>
+    <span *ngIf="entry.metadata && entry.metadata.unvote"> | </span>
+    <a *ngIf="entry.metadata && entry.metadata.unvote" href="javascript:" (click)="unvote(entry.id)">{{'entry.unvote' | i18n}}</a>
    <span *ngIf="moderator">|</span>
    <a *ngIf="moderator" href="javascript:" (click)="deleteEntry(entry)">
      {{'entry.delete' | i18n}}
@@ -11,6 +11,6 @@ small a:hover {
  text-decoration: underline;
 }

-a.vote {
-  color: $light-primary-text;
+span.voted {
+  opacity: 0.5;
 }
@@ -46,6 +46,12 @@ export class UiEntry implements OnInit {
    });
  }

+  unvote() {
+    this.voteService.unvoteEntry(this.entry.id).subscribe((result) => {
+      this.change && this.change()
+    });
+  }
+
  deleteEntry(entry: any) {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {