Poll view improvements (#66)

* Fix login bug * Code cleanup * Optimize poll status and time calculation * Fix minor bugs, improve performance * Apply minor style updates
livepoll · Dec 6, 2020 · d3a7cf4 · d3a7cf4
1 parent e4a20d5
commit d3a7cf4
Show file tree

Hide file tree

Showing 42 changed files with 670 additions and 251 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "ng-zorro-antd": "^10.2.0",
     "ngx-cookie-service": "^11.0.2",
     "ngx-cookieconsent": "^2.2.3",
+    "ngx-scrollbar": "^7.4.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.3",
     "zone.js": "~0.10.2"

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -19,7 +19,8 @@ const routes: Routes = [
       { path: 'analytics', loadChildren: () => import('./pages/analytics/analytics.module').then(m => m.AnalyticsModule) }
     ]
   },
-  { path: 'p/:snippet', redirectTo: '/error' },
+  { path: 'p/:snippet', loadChildren: () => import('./pages/poll-participants/poll-participants.module')
+      .then(m => m.PollParticipantsModule) },
   { path: '**', pathMatch: 'full', redirectTo: '/error' },
   { path: 'error', loadChildren: () => import('./pages/error/error.module').then(m => m.ErrorModule) },
 ];

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -23,6 +23,7 @@ export class AppComponent implements OnInit {
 
   // Event Emitters
   onUserDataChanged: EventEmitter<User>;
+  onLoginResultChanged: EventEmitter<string>;
 
   // Variables
   currentPage: any;
@@ -70,6 +71,9 @@ export class AppComponent implements OnInit {
       this.onUserDataChanged = child.onUserDataChanged;
       if (this.userData) this.onUserDataChanged.emit(this.userData);
     }
+    if (child.onLoginResultChanged) {
+      this.onLoginResultChanged = child.onLoginResultChanged;
+    }
     if (child.onLogout) {
       child.onLogout.subscribe(_ => this.logout());
     }
@@ -136,8 +140,10 @@ export class AppComponent implements OnInit {
     this.http.post<string>(env.apiBaseUrl + '/authenticate/login', body, options).subscribe((_: HttpResponse<string>) => {
       // Load user data
       this.loadUserData(true);
-    }, (_) => {
+    }, (error) => {
       this.showErrorMessage('Login failed.');
+      console.log(error);
+      this.onLoginResultChanged.emit(error);
     });
   }
 
@@ -180,7 +186,7 @@ export class AppComponent implements OnInit {
     this.darkTheme = darkTheme;
     if (darkTheme) {
       // Remove light theme
-      const dom = document.getElementById('light-theme');
+      const dom = document.getElementById('dark-theme');
       if (dom) dom.remove();
       // Apply dark theme
       const style = document.createElement('link');
@@ -191,13 +197,13 @@ export class AppComponent implements OnInit {
       document.body.appendChild(style);
     } else {
       // Remove dark theme
-      const dom = document.getElementById('dark-theme');
+      const dom = document.getElementById('light-theme');
       if (dom) dom.remove();
       // Apply light theme
       const style = document.createElement('link');
       style.type = 'text/css';
       style.rel = 'stylesheet';
-      style.id = 'dark-theme';
+      style.id = 'light-theme';
       style.href = 'assets/themes/light.css';
       document.body.appendChild(style);
     }

diff --git a/src/app/components/main-options-menu/main-options-menu.component.html b/src/app/components/main-options-menu/main-options-menu.component.html
@@ -1,13 +1,17 @@
-<nz-tabset nzTabBarGutter="0" style="margin: -12px -16px;">
+<!--
+  ~ Copyright © Live-Poll 2020. All rights reserved
+  -->
+
+<nz-tabset nzTabBarGutter="0">
   <!-- Account tab -->
   <nz-tab [nzTitle]="tabTitle1">
-    <div nz-row style="width: 410px; margin-top: -16px; padding: 10px">
+    <div nz-row class="tab-1">
       <div nz-col nzSpan="8">
         <div class="center"><nz-avatar [nzSize]="90" nzIcon="user"></nz-avatar></div>
         <!-- Upload button for new profile images -->
         <nz-upload nzAction="https://api.live-poll.de/upload/p29845982348z"
                    [nzHeaders]="{ authorization: 'authorization-text' }">
-          <button nz-button nzType="dashed" nzSize="small" style="margin-top: 10px">
+          <button nz-button nzType="dashed" nzSize="small" class="upload-image-button">
             <i nz-icon nzType="upload"></i>Upload image
           </button>
         </nz-upload>
@@ -21,25 +25,23 @@
         </span>
 
         <!-- Edit personal data button -->
-        <button nz-button nzSize="small" style="position: absolute; bottom: 0; left: 0;">
+        <button nz-button nzSize="small" class="edit-button">
           <i nz-icon nzType="edit"></i>Edit data
         </button>
         <!-- Logout button -->
-        <button nz-button nzType="primary" nzSize="small" style="position: absolute; bottom: 0; right: 0;"
-                (click)="logout.emit()">
+        <button nz-button nzType="primary" nzSize="small" class="logout-button" (click)="logout.emit()">
           <i nz-icon nzType="logout"></i>Logout
         </button>
       </div>
     </div>
 
     <ng-template #tabTitle1>
-      <span style="margin: 0 15px;"><i nz-icon nzType="user"></i>Account</span>
+      <span class="tab-title"><i nz-icon nzType="user"></i>Account</span>
     </ng-template>
   </nz-tab>
   <!-- Notifications tab -->
   <nz-tab [nzTitle]="tabTitle2">
-    <nz-collapse *ngIf="notifications.length > 0" nzBordered="true" nzAccordion
-                 style="user-select: none; width: 410px; margin-top: -16px;">
+    <nz-collapse *ngIf="notifications.length > 0" nzBordered="true" nzAccordion class="notification-list no-select">
       <nz-collapse-panel #p *ngFor="let notification of notifications" [nzHeader]="header"
                          [nzExtra]="options" [nzExpandedIcon]="expandedIcon">
         <!-- Item content -->
@@ -57,16 +59,15 @@
         </ng-template>
         <!-- Expand icon -->
         <ng-template #expandedIcon>
-          <i nz-icon nzType="right-circle" class="ant-collapse-arrow" [nzRotate]="p.nzActive ? 90 : 0"
-             style="font-size: 16px;"></i>
+          <i nz-icon nzType="right" class="ant-collapse-arrow" [nzRotate]="p.nzActive ? 90 : 0"></i>
         </ng-template>
       </nz-collapse-panel>
     </nz-collapse>
     <nz-empty *ngIf="notifications.length === 0"></nz-empty>
 
-    <ng-template #tabTitle2 style="padding: 5px">
+    <ng-template #tabTitle2>
       <nz-badge [nzCount]="notifications.length">
-        <span style="margin: 0 15px;"><i nz-icon nzType="notification"></i>Notifications</span>
+        <span class="tab-title"><i nz-icon nzType="notification"></i>Notifications</span>
       </nz-badge>
     </ng-template>
   </nz-tab>

diff --git a/src/app/components/main-options-menu/main-options-menu.component.sass b/src/app/components/main-options-menu/main-options-menu.component.sass
@@ -0,0 +1,31 @@
+/*!
+ / Copyright © Live-Poll 2020. All rights reserved
+ /
+
+nz-tabset
+  margin: -12px -16px
+
+.tab-1
+  width: 410px
+  margin-top: -16px
+  padding: 10px
+
+.upload-image-button
+  margin-top: 10px
+
+.edit-button
+  position: absolute
+  bottom: 0
+  left: 0
+
+.logout-button
+  position: absolute
+  bottom: 0
+  right: 0
+
+.tab-title
+  margin: 0 15px
+
+.notification-list
+  width: 410px
+  margin-top: -16px
diff --git a/src/app/components/main-options-menu/main-options-menu.component.spec.ts b/src/app/components/main-options-menu/main-options-menu.component.spec.ts
@@ -1,6 +1,10 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+/*
+ * Copyright © Live-Poll 2020. All rights reserved
+ */
 
-import { MainOptionsMenuComponent } from './main-options-menu.component';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {MainOptionsMenuComponent} from './main-options-menu.component';
 
 describe('MainOptionsMenuComponent', () => {
   let component: MainOptionsMenuComponent;

diff --git a/src/app/components/main-options-menu/main-options-menu.component.ts b/src/app/components/main-options-menu/main-options-menu.component.ts
@@ -1,3 +1,7 @@
+/*
+ * Copyright © Live-Poll 2020. All rights reserved
+ */
+
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {User} from '../../model/user';
 

diff --git a/src/app/components/main-options-menu/main-options-menu.module.ts b/src/app/components/main-options-menu/main-options-menu.module.ts
@@ -1,6 +1,10 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MainOptionsMenuComponent } from './main-options-menu.component';
+/*
+ * Copyright © Live-Poll 2020. All rights reserved
+ */
+
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MainOptionsMenuComponent} from './main-options-menu.component';
 import {NzTabsModule} from 'ng-zorro-antd/tabs';
 import {NzUploadModule} from 'ng-zorro-antd/upload';
 import {NzAvatarModule} from 'ng-zorro-antd/avatar';

diff --git a/src/app/dialogs/new-poll-item-dialog/new-poll-item-dialog.component.html b/src/app/dialogs/new-poll-item-dialog/new-poll-item-dialog.component.html
@@ -2,16 +2,16 @@
   ~ Copyright © Live-Poll 2020. All rights reserved
   -->
 
-<nz-modal [(nzVisible)]="isVisible" (nzOnCancel)="handleCancel()" nzWidth="850px"
-          [nzTitle]="dialogTitle" [nzContent]="dialogContent" [nzFooter]="dialogFooter">
+<nz-modal [(nzVisible)]="isVisible" (nzOnCancel)="handleCancel()" nzWidth="850px" [nzTitle]="dialogTitle"
+          [nzContent]="dialogContent" [nzFooter]="dialogFooter">
   <!-- Header -->
   <ng-template #dialogTitle>
     New Poll Item - {{step > stepLabels.length ? 'Creating ...' : stepLabels[step -1]}}
   </ng-template>
 
   <!-- Content -->
   <ng-template #dialogContent>
-    <nz-layout style="margin: -24px">
+    <nz-layout class="dialog-content">
       <!-- Side bar with timeline -->
       <nz-sider class="dialog-sidebar" nzWidth="300px">
         <nz-steps [nzCurrent]="step -1" nzDirection="vertical" nzSize="small">
@@ -54,11 +54,11 @@
                 <input nz-input [(ngModel)]="answers[i]" />
               </nz-input-group>
               <ng-template #suffixTemplate>
-                <i nz-icon [nzType]="'delete'" style="cursor: pointer" (click)="answers.splice(i, 1)"></i>
+                <i nz-icon [nzType]="'delete'" class="cursor-pointer" (click)="answers.splice(i, 1)"></i>
               </ng-template>
             </label>
             <!-- Add answer button -->
-            <div style="padding-top: 10px; float: right;">
+            <div class="add-answer-button-container">
               <button [disabled]="answers.length >= 10" nz-button nzType="default" (click)="answers.push('')">
                 <i nz-icon nzType="plus-circle" nzTheme="outline"></i> Answer
               </button>
@@ -70,19 +70,19 @@
           <div *ngIf="itemType == 3">
             <!-- Answers -->
             <label *ngFor="let answer of answers; let i = index; trackBy:trackByFn">
-              <span class="input-label" [style]="i === 0 ? 'color: #4ca857;' : 'color: #ff194f;'">
+              <span class="input-label" [class]="i === 0 ? 'right-answer' : 'wrong-answer'">
                 {{i === 0 ? 'Right answer' : 'Wrong answer ' + i}}:
               </span>
               <nz-input-group [nzSuffix]="i < 2 ? null : suffixTemplate">
                 <input nz-input [(ngModel)]="answers[i]" [placeholder]="i === 0 ? 'Enter right answer ...' : 'Enter wrong answer ...'"/>
               </nz-input-group>
               <ng-template #suffixTemplate>
-                <i nz-icon [nzType]="'delete'" style="cursor: pointer" (click)="answers.splice(i, 1)"></i>
+                <i nz-icon [nzType]="'delete'" class="cursor-pointer" (click)="answers.splice(i, 1)"></i>
               </ng-template>
             </label>
             <!-- Add answer button -->
-            <div style="padding-top: 10px; float: right;">
-              <em style="margin-inline-end: 20px;">The answers are going to be randomized for each user.</em>
+            <div class="add-answer-button-container">
+              <em class="add-answer-button-label">The answers are going to be randomized for each user.</em>
               <button [disabled]="answers.length >= 5" nz-button nzType="default" (click)="answers.push('')">
                 <i nz-icon nzType="plus-circle" nzTheme="outline"></i> Answer
               </button>
@@ -103,12 +103,12 @@
             <!-- Type int -->
             <label *ngIf="option.type === optionTypes.INT">
               <span class="input-label">{{option.name}}:</span><br>
-              <input nz-input type="number" [min]="option.min" [max]="option.max" style="width: 100px" [(ngModel)]="option.value"/>
+              <input nz-input type="number" [min]="option.min" [max]="option.max" class="full-width" [(ngModel)]="option.value"/>
             </label>
             <!-- Type string -->
             <label *ngIf="option.type === optionTypes.STRING">
               <span class="input-label">{{option.name}}:</span><br>
-              <input nz-input style="width: 200px" [(ngModel)]="option.value"/>
+              <input nz-input width="200px" [(ngModel)]="option.value"/>
             </label>
           </div>
         </div>

diff --git a/src/app/dialogs/new-poll-item-dialog/new-poll-item-dialog.component.sass b/src/app/dialogs/new-poll-item-dialog/new-poll-item-dialog.component.sass
@@ -14,3 +14,19 @@ nz-content
 
 .radio-description
   margin-left: 25px
+
+.dialog-content
+  margin: -24px
+
+.add-answer-button-container
+  padding-top: 10px
+  float: right
+
+.add-answer-button-label
+  margin-inline-end: 20px
+
+.right-answer
+  color: #4ca857
+
+.wrong-answer
+  color: #ff194f
diff --git a/src/app/dialogs/new-poll-item-dialog/new-poll-item-dialog.component.ts b/src/app/dialogs/new-poll-item-dialog/new-poll-item-dialog.component.ts
@@ -178,7 +178,7 @@ export class NewPollItemDialogComponent {
       .subscribe((response: HttpResponse<string>) => {
         if (response.ok) {
           // Request was successful, continue
-          this.onClose.emit(false);
+          this.onClose.emit(true);
           // Reset dialog
           this.step = 1;
           this.itemType = 0;

diff --git a/src/app/model/poll.ts b/src/app/model/poll.ts
@@ -13,7 +13,6 @@ export class Poll {
   name: string;
   startDate: Date;
   endDate: Date;
-  open: boolean;
   snippet: string;
   pollItems: PollItem[];
 }
diff --git a/src/app/pages/analytics/analytics.component.html b/src/app/pages/analytics/analytics.component.html
@@ -13,7 +13,7 @@
 </nz-breadcrumb>
 
 <!-- Page content -->
-<nz-content style="margin-top: 10px">
+<nz-content class="page-content">
   <div class="inner-content">
     <p *ngIf="polls?.length > 0">Polls found. This component does render them in the future!</p>
 

diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
@@ -35,13 +35,13 @@ <h1>Live-Poll</h1>
           <i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
         </span>
         <span class="header-menu">
-          <nz-switch [ngModel]="!darkTheme" (ngModelChange)="onChangeTheme.emit(!$event)" style="margin-right: 10px"
+          <nz-switch [ngModel]="!darkTheme" (ngModelChange)="onChangeTheme.emit(!$event)" class="theme-switch"
                      [nzUnCheckedChildren]="unchecked" [nzCheckedChildren]="checked"></nz-switch>
           <ng-template #unchecked><i nz-icon nzType="smile" nzTheme="outline"></i></ng-template>
           <ng-template #checked><i nz-icon nzType="bulb"></i></ng-template>
-          <nz-badge [nzCount]="getNonSilentNotifications().length" nzOverflowCount="9" style="margin-right: 24px;">
-              <nz-avatar nzIcon="user" nz-popover [nzPopoverContent]="userMenu"
-                         nzPopoverPlacement="bottomRight" nzPopoverTrigger="click" style="cursor: pointer;"></nz-avatar>
+          <nz-badge [nzCount]="getNonSilentNotifications().length" nzOverflowCount="9" class="notification-badge">
+              <nz-avatar nzIcon="user" nz-popover [nzPopoverContent]="userMenu" nzPopoverPlacement="bottomRight"
+                         nzPopoverTrigger="click" class="cursor-pointer"></nz-avatar>
             </nz-badge>
           <ng-template #userMenu>
             <app-main-options-menu [userData]="userData" [notifications]="notifications" (logout)="onLogout.emit()"