Merge branch '112-answer-statistics-template' into 'master'

Resolve "answer statistics (template)"

Closes #112

See merge request swtp-block-ws17/arsnova-angular-frontend!82

src/app/answer-statistics/answer-statistics.component.html

+<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center">
+  <mat-card>
+    <mat-tab-group>
+      <mat-tab label="Answer statistic">
+        <mat-select placeholder="Answers" fxLayoutAlign="right" (change)="showStatistic($event.value)">
+          <mat-option *ngFor="let state of states" [value]="state.value">
+            {{ state.viewValue }}
+          </mat-option>
+        </mat-select>
+        <div *ngIf="selected == 1">
+          <!-- Add list of Question statistic -->
+          <mat-progress-bar [value]="50">
+          </mat-progress-bar>
+        </div>
+        <div *ngIf="selected == 2">
+          <!-- Add list of Question statistic -->
+          <mat-progress-bar [value]="50" color="warn">
+          </mat-progress-bar>
+        </div>
+      </mat-tab>
+      <!-- Add second tab with true false answers -->
+    </mat-tab-group>
+  </mat-card>
+</div>
+

src/app/answer-statistics/answer-statistics.component.scss

+mat-card {
+  max-width: 800px;
+  width: 100%;
+}
+
+mat-select {
+  max-width: 150px;
+  margin-top: 10px;
+  margin-left: 625px;
+}
+
+mat-progress-bar {
+  margin-top: 20px;
+}

src/app/answer-statistics/answer-statistics.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnswerStatisticsComponent } from './answer-statistics.component';
+
+describe('AnswerStatisticsComponent', () => {
+  let component: AnswerStatisticsComponent;
+  let fixture: ComponentFixture<AnswerStatisticsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AnswerStatisticsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnswerStatisticsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/answer-statistics/answer-statistics.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-answer-statistics',
+  templateUrl: './answer-statistics.component.html',
+  styleUrls: ['./answer-statistics.component.scss']
+})
+export class AnswerStatisticsComponent implements OnInit {
+  states = [
+    { value: '1', viewValue: 'Responded' },
+    { value: '2', viewValue: 'Not responded' },
+  ];
+  selected: number = null;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  showStatistic(value) {
+    this.selected = value;
+  }
+}

src/app/app-routing.module.ts

@@ -13,6 +13,7 @@ import { CommentListComponent } from './comment-list/comment-list.component';
 import { ContentListComponent } from './content-list/content-list.component';
 import { ContentCreationComponent } from './content-creation/content-creation.component';
 import { ContentDetailComponent } from './content-detail/content-detail.component';
+import { AnswerStatisticsComponent } from './answer-statistics/answer-statistics.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
@@ -45,6 +46,12 @@ const routes: Routes = [
     canActivate: [AuthenticationGuard],
     data: { roles: [UserRole.CREATOR] }
   },
+  {
+    path: 'creator/room/:roomId/answer-statistics',
+    component: AnswerStatisticsComponent,
+    canActivate: [AuthenticationGuard],
+    data: { roles: [UserRole.CREATOR] }
+  },
   {
     path: 'creator/room/:roomId/content-creation',
     component: ContentCreationComponent,

src/app/app.module.ts

@@ -73,6 +73,7 @@ import { ContentService } from './content.service';
 import { ContentAnswersListComponent } from './content-answers-list/content-answers-list.component';
 import { ContentAnswerService } from './content-answer.service';
 import { RoomDeletionComponent } from './room-deletion/room-deletion.component';
+import { AnswerStatisticsComponent } from './answer-statistics/answer-statistics.component';
 import { RoomModificationComponent } from './room-modification/room-modification.component';
 
 @NgModule({
@@ -101,7 +102,8 @@ import { RoomModificationComponent } from './room-modification/room-modification
     ContentListComponent,
     ContentAnswersListComponent,
     RoomDeletionComponent,
-    RoomModificationComponent
+    RoomModificationComponent,
+    AnswerStatisticsComponent
   ],
   entryComponents: [
     RegisterComponent,

src/app/creator-room/creator-room.component.html

@@ -24,10 +24,12 @@
         <button mat-button color="primary" matTooltip="Create new content" (click)="createContentDialog()">
           Create content
         </button>
-        <button mat-button color="primary" matTooltip="See room comments"
-                routerLink="/creator/room/{{room.id}}/comments">
+        <button mat-button color="primary" matTooltip="See room comments" routerLink="/creator/room/{{room.id}}/comments">
           Comments
         </button>
+        <button mat-button color="primary" matTooltip="See answer statistics" routerLink="/creator/room/{{room.id}}/answer-statistics">
+          Answer statistics
+        </button>
         <button *ngIf="!modify" (click)="showEditDialog()" mat-button color="primary">
           Edit room
         </button>