diff --git a/src/app/answer-statistics/answer-statistics.component.html b/src/app/answer-statistics/answer-statistics.component.html new file mode 100644 index 0000000000000000000000000000000000000000..2b66b71d02397edfdddde76524cbc259040f4ca9 --- /dev/null +++ b/src/app/answer-statistics/answer-statistics.component.html @@ -0,0 +1,25 @@ +<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> + diff --git a/src/app/answer-statistics/answer-statistics.component.scss b/src/app/answer-statistics/answer-statistics.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..f0a767c2e0a748dfdafd59899bc77022270576e4 --- /dev/null +++ b/src/app/answer-statistics/answer-statistics.component.scss @@ -0,0 +1,14 @@ +mat-card { + max-width: 800px; + width: 100%; +} + +mat-select { + max-width: 150px; + margin-top: 10px; + margin-left: 625px; +} + +mat-progress-bar { + margin-top: 20px; +} diff --git a/src/app/answer-statistics/answer-statistics.component.spec.ts b/src/app/answer-statistics/answer-statistics.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..44567afe6d8b30c5e65f91ba1877ba2b7f8da9bd --- /dev/null +++ b/src/app/answer-statistics/answer-statistics.component.spec.ts @@ -0,0 +1,25 @@ +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(); + }); +}); diff --git a/src/app/answer-statistics/answer-statistics.component.ts b/src/app/answer-statistics/answer-statistics.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..e52b560ac887f58a2889eab6a73e39df4056faa4 --- /dev/null +++ b/src/app/answer-statistics/answer-statistics.component.ts @@ -0,0 +1,23 @@ +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; + } +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 50cfded9ff08fa2256b5e71e8fc02eab3f8059f0..af4bfcbb79920e3b8b3fbc614de27ad7a8a67e25 100644 --- a/src/app/app-routing.module.ts +++ b/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, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f6cbbf8d7cd00668a4c89383acff5216fe8e0149..618e686c611bd200b022e13fa4cceac368bf099c 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/creator-room/creator-room.component.html b/src/app/creator-room/creator-room.component.html index 78d20e59e31d7a121789c1e50181f05f83e60931..bbcbe08ce0404917bb765cac7d21a9f94cc4890a 100644 --- a/src/app/creator-room/creator-room.component.html +++ b/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>