displaying result percentages #93

src/app/components/stream/status/poll/poll.component.html

@@ -1,17 +1,25 @@
 <div class="poll">
-    <div *ngFor="let o of options">
-        <!-- <input class="poll__input" id="{{o.title}}" type="{{choiceType}}" name="poll" value="{{o.title}}">
-        <label class="noselect poll__label" for="{{o.title}}">{{o.title}}</label>
-        <br /> -->
-
-        <label class="poll__container">{{o.title}}
-            <input class="poll__container__input" type="{{choiceType}}" name="{{pollName}}" 
-                value="{{o.title}}" (change)="onSelectionChange(o)">
-            <span class="poll__container__checkmark" [ngClass]="{'poll__container__checkmark--box' : choiceType=='checkbox', 'poll__container__checkmark--round': choiceType=='radio'}"></span>
-        </label>
+    <div *ngIf="!poll.voted && !poll.expired">
+        <div *ngFor="let o of options">
+            <label class="poll__container">{{o.title}}
+                <input class="poll__container__input" type="{{choiceType}}" name="{{pollName}}" value="{{o.title}}"
+                    (change)="onSelectionChange(o)">
+                <span class="poll__container__checkmark"
+                    [ngClass]="{'poll__container__checkmark--box' : choiceType=='checkbox', 'poll__container__checkmark--round': choiceType=='radio'}"></span>
+            </label>
+        </div>
+    </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>
+        </div>
     </div>
     <div class="poll__voting">
-        <button href class="btn btn-sm btn-custom-primary poll__btn-vote" title="don't boo, vote!" (click)="vote()">Vote</button>
-        <div class="poll__statistics">{{poll.votes_count}} votes - X days left</div>
+        <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>

src/app/components/stream/status/poll/poll.component.scss

@@ -4,6 +4,8 @@
 @import "buttons";
 
 .poll {
+    color: white;
+    color: rgb(228, 228, 228);
 
     &__btn-vote {
         margin: 0 10px 0 0;
@@ -24,6 +26,11 @@
         margin-top: 10px;
     }
 
+    &__refresh {
+        font-size: 0.8em;
+        color: rgb(101, 121, 160);
+    }
+
     &__container {
         display: block;
         position: relative;
@@ -108,6 +115,20 @@
             background: white;
         }
     }
+
+    &__result {
+        margin: 0 0 5px 5px;
+
+        &--percentage {
+            // font-weight: bold;    
+            // font-weight: 600;
+            // font-style: italic;
+            color: rgb(228, 228, 228);
+            color: white;
+            display: inline;
+            margin-right: 10px;
+        }
+    }
 }
 
 .noselect {

src/app/components/stream/status/poll/poll.component.ts

@@ -11,7 +11,7 @@ import { NotificationService } from '../../../../services/notification.service';
     styleUrls: ['./poll.component.scss']
 })
 export class PollComponent implements OnInit {
-    pollName: string;    
+    pollName: string;
     choiceType: string;
 
     private pollSelection: number[] = [];
@@ -26,18 +26,18 @@ export class PollComponent implements OnInit {
 
     ngOnInit() {
         this.pollName = this.poll.id;
-        
+
         //this.poll.multiple = true;
 
-        if(this.poll.multiple){
+        if (this.poll.multiple) {
             this.choiceType = 'checkbox';
         } else {
             this.choiceType = 'radio';
         }
 
         let i = 0;
-        for(let opt of this.poll.options){
-            let optWrapper = new PollOptionWrapper(i, opt);
+        for (let opt of this.poll.options) {
+            let optWrapper = new PollOptionWrapper(i, opt, this.poll.votes_count);
             this.options.push(optWrapper);
             i++;
         }
@@ -56,10 +56,10 @@ export class PollComponent implements OnInit {
         return false;
     }
 
-    onSelectionChange(entry: PollOptionWrapper){
+    onSelectionChange(entry: PollOptionWrapper) {
         let index = entry.id;
-        if(this.poll.multiple){
-            if(this.pollSelection.includes(index)){
+        if (this.poll.multiple) {
+            if (this.pollSelection.includes(index)) {
                 this.pollSelection = this.pollSelection.filter(x => x !== index);
             } else {
                 this.pollSelection.push(index);
@@ -73,13 +73,23 @@ export class PollComponent implements OnInit {
 }
 
 class PollOptionWrapper implements PollOption {
-    constructor(index: number, option: PollOption){
+    constructor(index: number, option: PollOption, totalVotes: number) {
         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);
+        }
     }
 
     id: number;
-    title: string;    
+    title: string;
     votes_count: number;
+    percentage: string;
 }