From f72141a79441b28791bc2b6b1b1572ed477c717a Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Thu, 6 Jun 2019 01:38:32 -0400
Subject: [PATCH] added poll progress bars #93

---
 .../stream/status/poll/poll.component.html    | 13 +++++----
 .../stream/status/poll/poll.component.scss    | 29 +++++++++++++++++--
 .../stream/status/poll/poll.component.ts      | 14 ++++-----
 3 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/app/components/stream/status/poll/poll.component.html b/src/app/components/stream/status/poll/poll.component.html
index 059cbeff..aa570621 100644
--- a/src/app/components/stream/status/poll/poll.component.html
+++ b/src/app/components/stream/status/poll/poll.component.html
@@ -11,15 +11,18 @@
     </div>
     <div *ngIf="poll.voted || poll.expired">
         <div *ngFor="let o of options">
-            <div class="poll__result">
-                <span class="poll__result--percentage">{{ o.percentage }}%</span> {{o.title}}
+            <div class="poll__result" title="{{ o.votes_count }} votes">
+                <div class="poll__result--progress-bar" [style.width]="o.percentage + '%'" [ngClass]="{ 'poll__result--progress-bar--most-votes': o.isMax }"></div>
+                <div class="poll__result--data"> <span class="poll__result--percentage">{{ o.percentage }}%</span>
+                    {{o.title}}</div>
+
             </div>
         </div>
     </div>
     <div class="poll__voting">
-        <button href *ngIf="!poll.voted && !poll.expired" class="btn btn-sm btn-custom-primary poll__btn-vote" title="don't boo, vote!"
-            (click)="vote()">Vote</button>
-        <a href class="poll__refresh" *ngIf="poll.voted && !poll.expired">refresh </a> 
+        <button href *ngIf="!poll.voted && !poll.expired" class="btn btn-sm btn-custom-primary poll__btn-vote"
+            title="don't boo, vote!" (click)="vote()">Vote</button>
+        <a href class="poll__refresh" *ngIf="poll.voted && !poll.expired">refresh </a>
         <div class="poll__statistics"><span *ngIf="poll.voted"> · </span>{{poll.votes_count}} votes · X days left</div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/stream/status/poll/poll.component.scss b/src/app/components/stream/status/poll/poll.component.scss
index 1b7bde85..af1a342c 100644
--- a/src/app/components/stream/status/poll/poll.component.scss
+++ b/src/app/components/stream/status/poll/poll.component.scss
@@ -118,15 +118,38 @@
 
     &__result {
         margin: 0 0 5px 5px;
+        padding: 0 5px 0 5px;
+        position: relative;
+        height: 26px;
+
+        &--data {
+            position: absolute;
+            z-index: 10;
+        }
 
         &--percentage {
-            // font-weight: bold;    
-            // font-weight: 600;
-            // font-style: italic;
             color: rgb(228, 228, 228);
             color: white;
             display: inline;
             margin-right: 10px;
+            
+        }
+
+        &--progress-bar {
+            position: absolute;
+            background-color: rgb(47, 68, 100);
+            // background-color: rgb(43, 62, 92);
+            top:0;
+            left:0;
+            width: calc(100%);
+            height: 21px;
+            z-index: 1;
+            float: left;
+            border-radius: 2px;
+
+            &--most-votes {
+                background-color: rgb(18, 118, 158);
+            }
         }
     }
 }
diff --git a/src/app/components/stream/status/poll/poll.component.ts b/src/app/components/stream/status/poll/poll.component.ts
index 8e19d3f2..007021f9 100644
--- a/src/app/components/stream/status/poll/poll.component.ts
+++ b/src/app/components/stream/status/poll/poll.component.ts
@@ -35,17 +35,16 @@ export class PollComponent implements OnInit {
             this.choiceType = 'radio';
         }
 
+        const maxVotes = Math.max(...this.poll.options.map(x => x.votes_count));
         let i = 0;
         for (let opt of this.poll.options) {
-            let optWrapper = new PollOptionWrapper(i, opt, this.poll.votes_count);
+            let optWrapper = new PollOptionWrapper(i, opt, this.poll.votes_count, opt.votes_count === maxVotes);
             this.options.push(optWrapper);
             i++;
         }
     }
 
     vote(): boolean {
-        console.log(this.pollSelection);
-
         this.mastodonService.voteOnPoll(this.provider, this.poll.id, this.pollSelection)
             .then((poll: Poll) => {
                 this.poll = poll;
@@ -73,23 +72,22 @@ export class PollComponent implements OnInit {
 }
 
 class PollOptionWrapper implements PollOption {
-    constructor(index: number, option: PollOption, totalVotes: number) {
+    constructor(index: number, option: PollOption, totalVotes: number, isMax: boolean) {
         this.id = index;
         this.title = option.title;
         this.votes_count = option.votes_count;
-        console.log(this.votes_count);
-        console.log(totalVotes);
-        console.log(this.votes_count / totalVotes);
-        console.log( (this.votes_count / totalVotes) * 100);
         if (totalVotes === 0) {
             this.percentage = '0';
         } else {
             this.percentage = ((this.votes_count / totalVotes) * 100).toFixed(0);
         }
+        this.isMax = isMax;
+        console.warn(this.isMax);
     }
 
     id: number;
     title: string;
     votes_count: number;
     percentage: string;
+    isMax: boolean;
 }
\ No newline at end of file