From eb3944cb64c427917eead1bc2587c443485cc207 Mon Sep 17 00:00:00 2001
From: Lukas Haase <lukas.haase@mni.thm.de>
Date: Wed, 18 Mar 2020 15:01:09 +0100
Subject: [PATCH] RouterLink to Questionwall, QuestionWallComponent
---
angular.json | 5 +-
projects/ars/src/lib/ars.module.ts | 3 +-
projects/ars/src/lib/style/style.const.ts | 4 +-
.../creator/creator-routing.module.ts | 6 ++
src/app/components/creator/creator.module.ts | 8 ++-
.../question-wall.component.html | 27 +++++++++
.../question-wall.component.scss | 58 +++++++++++++++++++
.../question-wall.component.spec.ts | 25 ++++++++
.../question-wall/question-wall.component.ts | 51 ++++++++++++++++
.../room-creator-page.component.html | 4 ++
10 files changed, 186 insertions(+), 5 deletions(-)
create mode 100644 src/app/components/creator/questionwall/question-wall/question-wall.component.html
create mode 100644 src/app/components/creator/questionwall/question-wall/question-wall.component.scss
create mode 100644 src/app/components/creator/questionwall/question-wall/question-wall.component.spec.ts
create mode 100644 src/app/components/creator/questionwall/question-wall/question-wall.component.ts
diff --git a/angular.json b/angular.json
index 969c2a7a9..955a68556 100644
--- a/angular.json
+++ b/angular.json
@@ -144,5 +144,8 @@
"@schematics/angular:directive": {
"prefix": "app"
}
+ },
+ "cli": {
+ "analytics": false
}
-}
+}
\ No newline at end of file
diff --git a/projects/ars/src/lib/ars.module.ts b/projects/ars/src/lib/ars.module.ts
index a0a61d6a1..cdba19440 100644
--- a/projects/ars/src/lib/ars.module.ts
+++ b/projects/ars/src/lib/ars.module.ts
@@ -53,7 +53,8 @@ import { MatIconModule } from '@angular/material/icon';
FillComponent,
ThemeTestComponent,
BaseTestComponent,
- MenuWrapperDirective
+ MenuWrapperDirective,
+ ButtonWrapperDirective
]
})
export class ArsModule { }
diff --git a/projects/ars/src/lib/style/style.const.ts b/projects/ars/src/lib/style/style.const.ts
index 51815e05d..8b955aec3 100644
--- a/projects/ars/src/lib/style/style.const.ts
+++ b/projects/ars/src/lib/style/style.const.ts
@@ -2,7 +2,8 @@ export const light = {
'ars-header-color': '#212121',
'ars-paragraph-color': '#616161',
'ars-button-color': '#000000',
- 'ars-background-color': '#FFFFFF',
+ 'ars-background-color': '#fcfcfc',
+ 'ars-foreground-color': '#FFFFFF',
'ars-border-color': '#DDDDDD'
};
@@ -11,5 +12,6 @@ export const dark = {
'ars-paragraph-color': '#BDBDBD',
'ars-button-color': '#FFFFFF',
'ars-background-color': '#212121',
+ 'ars-foreground-color': '#292929',
'ars-border-color': '#2E2E2E'
};
diff --git a/src/app/components/creator/creator-routing.module.ts b/src/app/components/creator/creator-routing.module.ts
index 5e3e20891..d0a8a51f3 100644
--- a/src/app/components/creator/creator-routing.module.ts
+++ b/src/app/components/creator/creator-routing.module.ts
@@ -5,6 +5,7 @@ import { UserRole } from '../../models/user-roles.enum';
import { RoomCreatorPageComponent } from './room-creator-page/room-creator-page.component';
import { CommentPageComponent } from '../shared/comment-page/comment-page.component';
import { CommentAnswerComponent } from '../shared/comment-answer/comment-answer.component';
+import { QuestionWallComponent } from './questionwall/question-wall/question-wall.component';
const routes: Routes = [
{
@@ -23,6 +24,11 @@ const routes: Routes = [
path: 'room/:shortId/comment/:commentId',
component: CommentAnswerComponent,
canActivate: [AuthenticationGuard],
+ },
+ {
+ path: 'room/:shortId/questionwall',
+ component: QuestionWallComponent,
+ canActivate: [AuthenticationGuard],
data: { roles: [UserRole.CREATOR] }
}
];
diff --git a/src/app/components/creator/creator.module.ts b/src/app/components/creator/creator.module.ts
index 08131482a..f4527b93b 100644
--- a/src/app/components/creator/creator.module.ts
+++ b/src/app/components/creator/creator.module.ts
@@ -20,6 +20,8 @@ import { DeleteCommentsComponent } from './_dialogs/delete-comments/delete-comme
import { BonusDeleteComponent } from './_dialogs/bonus-delete/bonus-delete.component';
import { MarkdownModule } from 'ngx-markdown';
import { DeleteAnswerComponent } from './_dialogs/delete-answer/delete-answer.component';
+import { QuestionWallComponent } from './questionwall/question-wall/question-wall.component';
+import { ArsModule } from '../../../../projects/ars/src/lib/ars.module';
@NgModule({
imports: [
@@ -36,7 +38,8 @@ import { DeleteAnswerComponent } from './_dialogs/delete-answer/delete-answer.co
},
isolate: true
}),
- MarkdownModule
+ MarkdownModule,
+ ArsModule
],
declarations: [
RoomCreatorPageComponent,
@@ -50,7 +53,8 @@ import { DeleteAnswerComponent } from './_dialogs/delete-answer/delete-answer.co
DeleteCommentsComponent,
DeleteCommentComponent,
BonusDeleteComponent,
- DeleteAnswerComponent
+ DeleteAnswerComponent,
+ QuestionWallComponent
],
exports: []
})
diff --git a/src/app/components/creator/questionwall/question-wall/question-wall.component.html b/src/app/components/creator/questionwall/question-wall/question-wall.component.html
new file mode 100644
index 000000000..5cebdc3b4
--- /dev/null
+++ b/src/app/components/creator/questionwall/question-wall/question-wall.component.html
@@ -0,0 +1,27 @@
+<ars-screen ars-flex-box class="questionwall-screen">
+ <ars-row [height]="50" class="questionwall-header">
+ <button *ngIf="room" routerLink="/creator/room/{{room.shortId}}">BACK</button>
+ </ars-row>
+ <ars-fill ars-flex-box>
+ <ars-fill style="overflow:hidden;">
+ <ars-row [overflow]="'auto'">
+ <p class="questionwall-present" *ngIf="commentFocus">{{commentFocus.body}}</p>
+ <p class="questionwall-present" *ngIf="!commentFocus">Questionwall. Click on a comment.</p>
+ </ars-row>
+ </ars-fill>
+ <ars-col [width]="450" [overflow]="'auto'" class="questionwall-comment-list">
+ <ars-row *ngFor="let comment of comments">
+ <div class="questionwall-comment">
+ <div class="questionwall-comment-box" (click)="focusComment(comment)"
+ [style.box-shadow]="commentFocus===comment?'inset 0px 0px 0px 1px var(--ars-paragraph-color)':null">
+ <p class="questionwall-comment-box-user">User: {{comment.creatorId.substring(0,4)}}</p>
+ <p class="questionwall-comment-box-time">Time: {{comment.timestamp}}</p>
+ <br>
+ <p class="questionwall-comment-box-body">{{comment.body}}</p>
+ </div>
+ </div>
+ </ars-row>
+ </ars-col>
+ </ars-fill>
+ <ars-row [height]="50" class="questionwall-footer"></ars-row>
+</ars-screen>
diff --git a/src/app/components/creator/questionwall/question-wall/question-wall.component.scss b/src/app/components/creator/questionwall/question-wall/question-wall.component.scss
new file mode 100644
index 000000000..246af52a7
--- /dev/null
+++ b/src/app/components/creator/questionwall/question-wall/question-wall.component.scss
@@ -0,0 +1,58 @@
+:host{
+
+ p,h1,h2,h3,h4,h5{
+ padding:0;
+ margin:0;
+ }
+
+ .questionwall{
+ &-header{
+ background-color:var(--ars-foreground-color);
+ box-shadow:0px 2px 4px rgba(0,0,0,0.3);
+ z-index:4;
+ }
+ &-footer{
+ background-color:var(--ars-foreground-color);
+ box-shadow:0px -2px 4px rgba(0,0,0,0.3);
+ z-index:4;
+ }
+ &-comment{
+ width:100%;
+ padding:16px;
+ box-sizing:border-box;
+ &-box{
+ background-color:var(--ars-foreground-color);
+ border-radius:2px;
+ box-shadow:0px 2px 4px rgba(0,0,0,0.3);
+ box-sizing:border-box;
+ padding:16px;
+ cursor:pointer;
+ &-user{
+ color:var(--ars-header-color);
+ }
+ &-body{
+ color:var(--ars-paragraph-color);
+ }
+ &-time{
+ color:var(--ars-header-color);
+ padding-top:8px;
+ font-size:12px;
+ }
+ }
+ &-list{
+ box-sizing:border-box;
+ padding:16px 0px;
+ border-left:solid 1px var(--ars-border-color);
+ }
+ }
+ &-present{
+ font-size:45px;
+ padding:32px;
+ color:var(--ars-header-color);
+ }
+ &-screen{
+ background-color:var(--ars-background-color);
+ }
+ }
+
+}
diff --git a/src/app/components/creator/questionwall/question-wall/question-wall.component.spec.ts b/src/app/components/creator/questionwall/question-wall/question-wall.component.spec.ts
new file mode 100644
index 000000000..6d80f9b50
--- /dev/null
+++ b/src/app/components/creator/questionwall/question-wall/question-wall.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionWallComponent } from './question-wall.component';
+
+describe('QuestionWallComponent', () => {
+ let component: QuestionWallComponent;
+ let fixture: ComponentFixture<QuestionWallComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ QuestionWallComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(QuestionWallComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/creator/questionwall/question-wall/question-wall.component.ts b/src/app/components/creator/questionwall/question-wall/question-wall.component.ts
new file mode 100644
index 000000000..fd50a4cdc
--- /dev/null
+++ b/src/app/components/creator/questionwall/question-wall/question-wall.component.ts
@@ -0,0 +1,51 @@
+import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
+import { StyleDebug } from '../../../../../../projects/ars/src/lib/models/debug/StyleDebug';
+import { CommentService } from '../../../../services/http/comment.service';
+import { Comment } from '../../../../models/comment';
+import { RoomService } from '../../../../services/http/room.service';
+import { Room } from '../../../../models/room';
+
+@Component({
+ selector: 'app-question-wall',
+ templateUrl: './question-wall.component.html',
+ styleUrls: ['./question-wall.component.scss']
+})
+export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
+
+ roomId: string;
+ room: Room;
+ comments: Comment[];
+ commentFocus: Comment;
+
+ constructor(
+ private commentService: CommentService,
+ private roomService: RoomService
+ ) {
+ this.roomId = localStorage.getItem('roomId');
+ }
+
+ ngOnInit(): void {
+ // StyleDebug.border('c');
+ this.commentService.getAckComments(this.roomId).subscribe(e => {
+ this.comments = e;
+ });
+ this.roomService.getRoom(this.roomId).subscribe(e => {
+ this.room = e;
+ });
+ }
+
+ ngAfterViewInit(): void {
+ document.getElementById('header_rescale').style.display = 'none';
+ document.getElementById('footer_rescale').style.display = 'none';
+ }
+
+ ngOnDestroy(): void {
+ document.getElementById('header_rescale').style.display = 'block';
+ document.getElementById('footer_rescale').style.display = 'block';
+ }
+
+ focusComment(comment: Comment) {
+ this.commentFocus = comment;
+ }
+
+}
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html
index c26aa3104..90f8e7855 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.html
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html
@@ -40,6 +40,10 @@
<mat-icon svgIcon="comment_tag"></mat-icon>
{{ 'room-page.tags' | translate}}
</button>
+ <button mat-menu-item routerLink="/creator/room/{{room.shortId}}/questionwall">
+ <mat-icon svgIcon="comment_tag"></mat-icon>
+ Questionwall
+ </button>
</mat-menu>
<button id="settings-menu"
mat-icon-button class="corner-icons" [matMenuTriggerFor]="settingsMenu" aria-labelledby="settings">
--
GitLab