Add an end screen for participants

livepoll · May 28, 2021 · 55463d0 · 55463d0
1 parent 721dfe8
commit 55463d0
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/src/app/pages/poll-participants/poll-participants.component.html b/src/app/pages/poll-participants/poll-participants.component.html
@@ -53,12 +53,20 @@ <h2>{{activeItem?.question}}</h2>
 
     <!-- Waiting for presenter -->
     <nz-result
-      *ngIf="poll && !poll.currentItem"
+      *ngIf="poll && !poll.currentItem && !pollOver"
       nzStatus="403"
       nzTitle="Waiting for presenter"
       nzSubTitle="Waiting for the presenter to start the poll ...">
     </nz-result>
 
+    <!-- End screen -->
+    <nz-result
+      *ngIf="pollOver"
+      nzStatus="success"
+      nzTitle="Poll finished"
+      nzSubTitle="Congrats! You completed the poll. Thanks for participating!">
+    </nz-result>
+
     <!-- Poll not found -->
     <nz-result
       *ngIf="!loading && !poll"

diff --git a/src/app/pages/poll-participants/poll-participants.component.ts b/src/app/pages/poll-participants/poll-participants.component.ts
@@ -29,6 +29,7 @@ export class PollParticipantsComponent implements OnInit, OnDestroy {
   answer = null;
   sent = false;
   loading = true;
+  pollOver = false;
 
   /**
    * Initialize component
@@ -86,6 +87,7 @@ export class PollParticipantsComponent implements OnInit, OnDestroy {
           } else {
             this.poll.currentItem = null;
           }
+          if (this.activeItemType !== '') this.pollOver = true;
           this.activeItem = null;
           this.activeItemType = '';
         }

diff --git a/src/app/pages/presentation/presentation.component.html b/src/app/pages/presentation/presentation.component.html
@@ -19,12 +19,16 @@ <h2>{{activeItem?.question}}</h2>
                             class="chart" [view]="[700, 400]"
                             [results]="chartData"
                             legend="true"
+                            doughnut="true"
+                            arcWidth="0.35"
                             scheme="forest">
       </ngx-charts-pie-chart>
       <ngx-charts-pie-chart *ngIf="activeItem.type === 'quiz'"
                             class="chart" [view]="[700, 400]"
                             [results]="chartData"
                             legend="true"
+                            doughnut="true"
+                            arcWidth="0.35"
                             scheme="forest">
       </ngx-charts-pie-chart>
       <button class="next-button" nz-button nzType="primary" (click)="next()">Next question</button>

diff --git a/src/app/pages/presentation/presentation.component.ts b/src/app/pages/presentation/presentation.component.ts
@@ -56,7 +56,6 @@ export class PresentationComponent implements OnInit {
       // Connect to WebSocket
       const subscription = this.websocketService.establishConnectionPresentation(this.pollId);
       subscription.subscribe(pollItem => {
-        console.log('PollItem' + JSON.stringify(pollItem));
         if (Object.keys(pollItem).length > 1) {
           // Update UI
           this.activeItem = pollItem;
@@ -81,6 +80,7 @@ export class PresentationComponent implements OnInit {
       } else {
         this.activeItem = pollItem;
         this.poll.currentItem = pollItem.itemId;
+        this.chartData = this.getChartData();
       }
     });
   }