Merge branch '207-statistics-doesn-t-work' into 'master'

Fix statistics list

Closes #207

See merge request arsnova/arsnova-lite!185

src/app/components/shared/list-statistic/list-statistic.component.html

 <mat-toolbar></mat-toolbar>
 <mat-progress-bar class="progress-theme" mode="determinate" value="{{total}}"
-                  *ngIf="total > status.good" color="primary"></mat-progress-bar>
+                  *ngIf="total >= status.good" color="primary"></mat-progress-bar>
 <mat-progress-bar class="progress-theme" mode="determinate" value="{{total}}"
                   *ngIf="total < status.good && total >= status.okay" color="accent"></mat-progress-bar>
 <mat-progress-bar class="progress-theme" mode="determinate" value="{{total}}"
@@ -23,25 +23,25 @@
       'positive' : cp.percent >= status.good,
       'okay' : cp.percent >= status.okay && cp.percent < status.good,
       'negative' : cp.percent < status.okay,
-      'empty' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.percent.toFixed() + ' %'}}</mat-cell>
+      'empty invisible' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.percent.toFixed() + ' %'}}</mat-cell>
   </ng-container>
 
-  <ng-container matColumnDef="counts">
-    <mat-header-cell *matHeaderCellDef> {{'statistic.answers' | translate}} </mat-header-cell>
+  <ng-container matColumnDef="abstentions">
+    <mat-header-cell *matHeaderCellDef> {{'statistic.abstentions' | translate}} </mat-header-cell>
     <mat-cell *matCellDef="let cp" [ngClass]="{
       'positive' : cp.percent >= status.good,
       'okay' : cp.percent >= status.okay && cp.percent < status.good,
       'negative' : cp.percent < status.okay,
-      'empty' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.counts}}</mat-cell>
+      'empty invisible' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.abstentions}}</mat-cell>
   </ng-container>
 
-  <ng-container matColumnDef="abstentions">
-    <mat-header-cell *matHeaderCellDef> {{'statistic.abstentions' | translate}} </mat-header-cell>
+  <ng-container matColumnDef="counts">
+    <mat-header-cell *matHeaderCellDef> {{'statistic.answers' | translate}} </mat-header-cell>
     <mat-cell *matCellDef="let cp" [ngClass]="{
       'positive' : cp.percent >= status.good,
       'okay' : cp.percent >= status.okay && cp.percent < status.good,
       'negative' : cp.percent < status.okay,
-      'empty' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.abstentions}}</mat-cell>
+      'empty invisible' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.counts}}</mat-cell>
   </ng-container>
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

src/app/components/shared/list-statistic/list-statistic.component.scss

@@ -20,7 +20,7 @@ table {
 
 .mat-column-abstentions {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
 }
 
 mat-header-cell {
@@ -30,7 +30,7 @@ mat-header-cell {
 
 mat-cell {
   color: black!important;
-  background-color: var(--grey-light);
+  background-color: var(--grey);
 }
 
 mat-toolbar {
@@ -51,7 +51,14 @@ mat-toolbar {
 }
 
 .empty {
-  color: var(--grey)!important;
   background: var(--grey);
   pointer-events: none;
 }
+
+.invisible {
+  color: var(--grey)!important;
+}
+
+#okayP {
+  color: var(--yellow);
+}

src/app/components/shared/list-statistic/list-statistic.component.ts

@@ -37,7 +37,7 @@ export class ListStatisticComponent implements OnInit {
 
   @Input() contentGroup: ContentGroup;
   contents: Content[] = [];
-  displayedColumns = ['content', 'counts', 'percentage'];
+  displayedColumns: string[] = [];
   status = {
     good: 85 ,
     okay: 50 ,
@@ -50,6 +50,7 @@ export class ListStatisticComponent implements OnInit {
   contentCounter = 0;
   roomId: number;
   baseUrl: string;
+  deviceType = localStorage.getItem('deviceType');
 
   constructor(private contentService: ContentService,
               private translateService: TranslateService,
@@ -69,6 +70,11 @@ export class ListStatisticComponent implements OnInit {
       this.getData(contents);
     });
     this.getBaseUrl();
+    if (this.deviceType === 'desktop') {
+      this.displayedColumns = ['content', 'counts', 'abstentions', 'percentage'];
+    } else {
+      this.displayedColumns = ['content', 'counts', 'percentage'];
+    }
   }
 
   getBaseUrl() {
@@ -91,7 +97,7 @@ export class ListStatisticComponent implements OnInit {
     for (let i = 0; i < length; i++) {
       this.dataSource[i] = new ContentStatistic(null, null, 0, 0, 0 );
       this.dataSource[i].content = this.contents[i];
-      if (contents[i].format === ContentType.CHOICE) {
+      if (contents[i].format === ContentType.CHOICE || contents[i].format === ContentType.BINARY) {
         this.contentService.getAnswer(contents[i].id).subscribe(answer => {
           if (contents[i].multiple) {
             percent = this.evaluateMultiple(contents[i].options, answer.roundStatistics[0].combinatedCounts);

src/theme/blue-theme/blueTheme.const.ts

@@ -15,7 +15,7 @@ export const blue = {
   '--on-background': '#000000',
   '--on-surface': '#000000',
 
-  '--green': '#AED581',
+  '--green': '#81c784',
   '--red': '#FF8A80',
   '--yellow': '#FFD54F',
   '--blue': '#3f51b5',

src/theme/dark-theme/darkTheme.const.ts

@@ -15,7 +15,7 @@ export const dark = {
   '--on-background': '#FFFFFF',
   '--on-surface': '#FFFFFF',
 
-  '--green': '#AED581',
+  '--green': '#81c784',
   '--red': '#FF8A80',
   '--yellow': '#FFD54F',
   '--blue': '#3f51b5',

src/theme/default-theme/_variables.scss

@@ -2,7 +2,7 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://www.google.com/design/spec/style/color.html
-$arsnova-primary: mat-palette($mat-teal,300);
+$arsnova-primary: mat-palette($mat-green,300);
 $arsnova-accent: mat-palette($mat-orange, 200); //$mat-blue-gray, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).

src/theme/default-theme/defaultTheme.const.ts

@@ -15,7 +15,7 @@ export const arsnova = {
   '--on-background': '#000000',
   '--on-surface': '#000000',
 
-  '--green': '#AED581',
+  '--green': '#81c784',
   '--red': '#FF8A80',
   '--yellow': '#FFD54F',
   '--blue': '#3f51b5',

src/theme/purple-theme/purpleTheme.const.ts

@@ -15,7 +15,7 @@ export const purple = {
   '--on-background': '#000000',
   '--on-surface': '#000000',
 
-  '--green': '#AED581',
+  '--green': '#81c784',
   '--red': '#FF8A80',
   '--yellow': '#FFD54F',
   '--blue': '#3f51b5',