Commit adbff677 authored by Lukas Haase's avatar Lukas Haase Committed by Klaus-Dieter Quibeldey-Cirkel
Browse files

improve options menu usability

parent 5db2c576
......@@ -22,6 +22,9 @@ import { EventService } from '../../../services/util/event.service';
import { KeyboardUtils } from '../../../utils/keyboard';
import { KeyboardKey } from '../../../utils/keyboard/keys';
import { TitleService } from '../../../services/util/title.service';
import { DeleteCommentsComponent } from '../_dialogs/delete-comments/delete-comments.component';
import { Export } from '../../../models/export';
import { BonusTokenService } from '../../../services/http/bonus-token.service';
@Component({
selector: 'app-room-creator-page',
......@@ -39,6 +42,7 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
moderatorCommentCounter: number;
commentCounterEmitSubscription: any;
urlToCopy = `${window.location.protocol}//${window.location.hostname}/participant/room/`;
headerInterface = null;
constructor(protected roomService: RoomService,
protected notification: NotificationService,
......@@ -52,7 +56,9 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
private liveAnnouncer: LiveAnnouncer,
private _r: Renderer2,
public eventService: EventService,
public titleService: TitleService) {
public titleService: TitleService,
private notificationService: NotificationService,
private bonusTokenService: BonusTokenService) {
super(roomService, route, location, wsCommentService, commentService, eventService);
this.commentCounterEmitSubscription = this.commentCounterEmit.subscribe(e => {
this.titleService.attachTitle('(' + e + ')');
......@@ -60,10 +66,51 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
langService.langEmitter.subscribe(lang => translateService.use(lang));
}
initNavigation() {
const navigation = {};
const nav = (b, c) => navigation[b] = c;
nav('roomBonusToken', () => this.showBonusTokenDialog());
nav('moderator', () => this.showModeratorsDialog());
nav('tags', () => this.showTagsDialog());
nav('exportQuestions', () => {
const exp: Export = new Export(
this.room,
this.commentService,
this.bonusTokenService,
this.translateService,
'comment-list',
this.notificationService);
exp.exportAsCsv();
});
nav('deleteQuestions', () => {
const dialogRef = this.dialog.open(DeleteCommentsComponent, {
width: '400px'
});
dialogRef.componentInstance.roomId = this.room.id;
dialogRef.afterClosed()
.subscribe(result => {
if (result === 'delete') {
this.translateService.get('room-page.comments-deleted').subscribe(msg => {
this.notificationService.show(msg);
});
this.commentService.deleteCommentsByRoomId(this.room.id).subscribe();
}
});
});
this.headerInterface = this.eventService.on<string>('navigate').subscribe(e => {
if (navigation.hasOwnProperty(e)) {
navigation[e]();
}
});
}
ngOnDestroy() {
super.ngOnDestroy();
this.commentCounterEmitSubscription.unsubscribe();
this.titleService.resetTitle();
if (this.headerInterface) {
this.headerInterface.unsubscribe();
}
}
ngAfterContentInit(): void {
......@@ -73,6 +120,7 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
}
ngOnInit() {
this.initNavigation();
window.scroll(0, 0);
this.translateService.use(localStorage.getItem('currentLang'));
this.route.params.subscribe(params => {
......
......@@ -12,5 +12,5 @@
padding-right: 10px;
padding-left: 10px;
transform: scale(2);
color: var(--secondary);
color: var(--primary);
}
import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Comment } from '../../../models/comment';
import { CommentService } from '../../../services/http/comment.service';
import { TranslateService } from '@ngx-translate/core';
......@@ -16,13 +16,20 @@ import { EventService } from '../../../services/util/event.service';
import { Router } from '@angular/router';
import { AppComponent } from '../../../app.component';
import { Period } from '../../shared/comment-list/comment-list.component';
import { ModeratorsComponent } from '../../creator/_dialogs/moderators/moderators.component';
import { TagsComponent } from '../../creator/_dialogs/tags/tags.component';
import { DeleteCommentsComponent } from '../../creator/_dialogs/delete-comments/delete-comments.component';
import { Export } from '../../../models/export';
import { CreateCommentComponent } from '../../shared/_dialogs/create-comment/create-comment.component';
import { NotificationService } from '../../../services/util/notification.service';
import { BonusTokenService } from '../../../services/http/bonus-token.service';
@Component({
selector: 'app-moderator-comment-list',
templateUrl: './moderator-comment-list.component.html',
styleUrls: ['./moderator-comment-list.component.scss']
})
export class ModeratorCommentListComponent implements OnInit {
export class ModeratorCommentListComponent implements OnInit, OnDestroy {
@ViewChild('searchBox') searchField: ElementRef;
@Input() user: User;
@Input() roomId: string;
......@@ -58,6 +65,7 @@ export class ModeratorCommentListComponent implements OnInit {
periodsList = Object.values(Period);
period: Period = Period.TWOWEEKS;
fromNow: number;
headerInterface = null;
constructor(
private commentService: CommentService,
......@@ -67,12 +75,94 @@ export class ModeratorCommentListComponent implements OnInit {
private wsCommentService: WsCommentServiceService,
protected roomService: RoomService,
public eventService: EventService,
private router: Router
private router: Router,
private notificationService: NotificationService,
private translationService: TranslateService,
private bonusTokenService: BonusTokenService
) {
langService.langEmitter.subscribe(lang => translateService.use(lang));
}
initNavigation() {
const navigation = {};
const nav = (b, c) => navigation[b] = c;
nav('moderator', () => {
const dialogRef = this.dialog.open(ModeratorsComponent, {
width: '400px'
});
dialogRef.componentInstance.roomId = this.room.id;
});
nav('tags', () => {
const updRoom = JSON.parse(JSON.stringify(this.room));
const dialogRef = this.dialog.open(TagsComponent, {
width: '400px'
});
let tags = [];
if (this.room.tags !== undefined) {
tags = this.room.tags;
}
dialogRef.componentInstance.tags = tags;
dialogRef.afterClosed()
.subscribe(result => {
if (!result || result === 'abort') {
return;
} else {
updRoom.tags = result;
this.roomService.updateRoom(updRoom)
.subscribe((room) => {
this.room = room;
this.translateService.get('room-page.changes-successful').subscribe(msg => {
this.notificationService.show(msg);
});
},
error => {
this.translateService.get('room-page.changes-gone-wrong').subscribe(msg => {
this.notificationService.show(msg);
});
});
}
});
});
nav('deleteQuestions', () => {
const dialogRef = this.dialog.open(DeleteCommentsComponent, {
width: '400px'
});
dialogRef.componentInstance.roomId = this.roomId;
dialogRef.afterClosed()
.subscribe(result => {
if (result === 'delete') {
this.translationService.get('room-page.comments-deleted').subscribe(msg => {
this.notificationService.show(msg);
});
this.commentService.deleteCommentsByRoomId(this.roomId).subscribe();
}
});
});
nav('exportQuestions', () => {
const exp: Export = new Export(
this.room,
this.commentService,
this.bonusTokenService,
this.translationService,
'comment-list',
this.notificationService);
exp.exportAsCsv();
});
this.headerInterface = this.eventService.on<string>('navigate').subscribe(e => {
if (navigation.hasOwnProperty(e)) {
navigation[e]();
}
});
}
ngOnDestroy() {
if (this.headerInterface) {
this.headerInterface.unsubscribe();
}
}
ngOnInit() {
this.initNavigation();
this.roomId = localStorage.getItem(`roomId`);
const userId = this.user.id;
this.userRole = this.user.role;
......
......@@ -23,6 +23,11 @@ import { Router, ActivatedRoute } from '@angular/router';
import { AuthenticationService } from '../../../services/http/authentication.service';
import { Title } from '@angular/platform-browser';
import { TitleService } from '../../../services/util/title.service';
import { ModeratorsComponent } from '../../creator/_dialogs/moderators/moderators.component';
import { TagsComponent } from '../../creator/_dialogs/tags/tags.component';
import { DeleteCommentsComponent } from '../../creator/_dialogs/delete-comments/delete-comments.component';
import { Export } from '../../../models/export';
import { BonusTokenService } from '../../../services/http/bonus-token.service';
export enum Period {
FROMNOW = 'from-now',
......@@ -84,6 +89,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
freeze = false;
commentStream: Subscription;
periodsList = Object.values(Period);
headerInterface = null;
period: Period = Period.TWOWEEKS;
fromNow: number;
......@@ -102,11 +108,87 @@ export class CommentListComponent implements OnInit, OnDestroy {
private route: ActivatedRoute,
private router: Router,
private titleService: TitleService,
private translationService: TranslateService,
private bonusTokenService: BonusTokenService
) {
langService.langEmitter.subscribe(lang => translateService.use(lang));
}
initNavigation() {
const navigation = {};
const nav = (b, c) => navigation[b] = c;
nav('createQuestion', () => this.openCreateDialog());
nav('moderator', () => {
const dialogRef = this.dialog.open(ModeratorsComponent, {
width: '400px'
});
dialogRef.componentInstance.roomId = this.room.id;
});
nav('tags', () => {
const updRoom = JSON.parse(JSON.stringify(this.room));
const dialogRef = this.dialog.open(TagsComponent, {
width: '400px'
});
let tags = [];
if (this.room.tags !== undefined) {
tags = this.room.tags;
}
dialogRef.componentInstance.tags = tags;
dialogRef.afterClosed()
.subscribe(result => {
if (!result || result === 'abort') {
return;
} else {
updRoom.tags = result;
this.roomService.updateRoom(updRoom)
.subscribe((room) => {
this.room = room;
this.translateService.get('room-page.changes-successful').subscribe(msg => {
this.notificationService.show(msg);
});
},
error => {
this.translateService.get('room-page.changes-gone-wrong').subscribe(msg => {
this.notificationService.show(msg);
});
});
}
});
});
nav('deleteQuestions', () => {
const dialogRef = this.dialog.open(DeleteCommentsComponent, {
width: '400px'
});
dialogRef.componentInstance.roomId = this.roomId;
dialogRef.afterClosed()
.subscribe(result => {
if (result === 'delete') {
this.translationService.get('room-page.comments-deleted').subscribe(msg => {
this.notificationService.show(msg);
});
this.commentService.deleteCommentsByRoomId(this.roomId).subscribe();
}
});
});
nav('exportQuestions', () => {
const exp: Export = new Export(
this.room,
this.commentService,
this.bonusTokenService,
this.translationService,
'comment-list',
this.notificationService);
exp.exportAsCsv();
});
this.headerInterface = this.eventService.on<string>('navigate').subscribe(e => {
if (navigation.hasOwnProperty(e)) {
navigation[e]();
}
});
}
ngOnInit() {
this.initNavigation();
this.authenticationService.watchUser.subscribe(newUser => {
if (newUser) {
this.user = newUser;
......@@ -162,6 +244,9 @@ export class CommentListComponent implements OnInit, OnDestroy {
this.commentStream.unsubscribe();
}
this.titleService.resetTitle();
if (this.headerInterface) {
this.headerInterface.unsubscribe();
}
}
checkScroll(): void {
......
......@@ -23,14 +23,6 @@
</h2>
<span *ngIf="router.url.includes('comments') && !router.url.includes('moderator/comments') && deviceType === 'desktop'"
class="fill-remaining-space"></span>
<button *ngIf="router.url.includes('comments') && !router.url.includes('moderator/comments') && deviceType === 'desktop'"
mat-flat-button
class="question-focus-btn"
routerLink="participant/room/{{shortId}}/comments/questionwall">
<mat-icon svgIcon="beamer"
class="header-icons beamer-icon"></mat-icon>
<span class="question-focus-btn-txt">{{'header.question-wall' | translate}}</span>
</button>
<span class="fill-remaining-space"
*ngIf="router.url.includes('comments') && deviceType === 'desktop'"></span>
<span
......@@ -47,32 +39,186 @@
*ngIf="router.url.includes('comments')"
fxLayoutAlign="center center">
{{ shortId.slice(0, 4) }} {{ shortId.slice(4, 8) }}
</h2>
</h2>-->
<!--Feedback im Hörsaal-->
<h2 class="oldtypo-h2"
*ngIf="router.url.includes('home')"
fxLayoutAlign="center center">
{{ 'header.home-header' | translate }}
</h2>
<button *ngIf="router.url.includes('room')"
mat-icon-button
(click)="showQRDialog();"
fxLayoutAlign="center center">
<mat-icon svgIcon="qrcode"
class="header-icons qrcode"
matTooltip="{{ 'header.QR' | translate }}">
</mat-icon>
</button>
<span class="fill-remaining-space"></span>
<button mat-icon-button *ngIf="user" (click)="showMotdDialog()">
<mat-icon class="header-icons">{{ motdState ? 'notifications_active' : 'notifications_none' }}</mat-icon>
</button>
<mat-menu #userMenu="matMenu"
[overlapTrigger]="false">
<!-- <p class="mat-menu-inner-title">Account</p>-->
<div class="mat-menu-inner-box">
<!-- Home -->
<ng-container *ngIf="router.url.endsWith('/home')">
</ng-container>
<!-- Session list -->
<ng-container *ngIf="router.url.endsWith('/user')">
</ng-container>
<!-- Room -->
<ng-container *ngIf="router.url.includes('/room/')">
<!-- Room General Options - top -->
<!-- Moderator board / index -->
<ng-container *ngIf="router.url.endsWith('/moderator/comments')">
<button mat-menu-item
tabindex="0"
routerLink="participant/room/{{shortId}}/comments">
<mat-icon
matTooltip="{{ 'header.back-to-questionboard' | translate }}">
forum
</mat-icon>
<span>{{'header.back-to-questionboard' | translate}}</span>
</button>
</ng-container>
<!-- Question board -->
<ng-container *ngIf="router.url.endsWith('/comments')">
<button mat-menu-item
*ngIf="user && user.role > 0 && !router.url.endsWith('moderator/comments')"
tabindex="0"
(click)="navigateCreateQuestion();">
<mat-icon
matTooltip="{{ 'header.create-question' | translate }}">
comment
</mat-icon>
<span>{{'header.create-question' | translate}}</span>
</button>
<ng-container *ngIf="user && user.role > 0">
<button mat-menu-item
tabindex="0"
*ngIf="deviceType !== 'mobile' && !router.url.includes('/participant/')"
routerLink="participant/room/{{shortId}}/comments/questionwall">
<mat-icon
svgIcon="beamer"
matTooltip="{{ 'header.questionwall-title' | translate }}">
comment
</mat-icon>
<span>{{'header.questionwall' | translate}}</span>
</button>
</ng-container>
<ng-container *ngIf="router.url.includes('/participant/room/')">
</ng-container>
<ng-container *ngIf="router.url.includes('/moderator/room/')">
</ng-container>
<ng-container *ngIf="router.url.includes('/creator/room/')">
</ng-container>
<button mat-menu-item
*ngIf="user"
(click)="navigateExportQuestions()"
tabindex="0">
<mat-icon>save</mat-icon>
<span>{{'header.export-questions' | translate}}</span>
</button>
<button mat-menu-item
*ngIf="user && user.role > 0 && !router.url.includes('/participant/')"
(click)="navigateDeleteQuestions()"
tabindex="0">
<mat-icon class="color-warn">delete</mat-icon>
<span>{{'header.delete-questions' | translate}}</span>
</button>
</ng-container>
<!-- Session -->
<ng-container *ngIf="!router.url.endsWith('/comments')">
<!-- app-room-participant-page -->
<ng-container *ngIf="router.url.includes('/participant/room/')">
</ng-container>
<!-- app-room-creator-page -->
<ng-container *ngIf="router.url.includes('/moderator/room/')">
</ng-container>
<!-- app-room-creator-page -->
<ng-container *ngIf="router.url.includes('/creator/room/')">
<button mat-menu-item
*ngIf="user"
(click)="navigateRoomBonusToken()"
tabindex="0">
<mat-icon class="star">grade</mat-icon>
<span>{{'header.bonustoken' | translate}}</span>
</button>
<button mat-menu-item
*ngIf="user"
(click)="navigateExportQuestions()"
tabindex="0">
<mat-icon>save</mat-icon>
<span>{{'header.export-questions' | translate}}</span>
</button>
<button mat-menu-item
*ngIf="user"
(click)="navigateDeleteQuestions()"
tabindex="0">
<mat-icon class="color-warn">delete</mat-icon>
<span>{{'header.delete-questions' | translate}}</span>
</button>
</ng-container>
</ng-container>
<!-- Room General Options - bot -->
<ng-container *ngIf="user && user.role > 0 && !router.url.includes('/participant')">
<button mat-menu-item
*ngIf="user"
(click)="navigateModerator()"
tabindex="0">
<mat-icon>gavel</mat-icon>
<span>{{'header.edit-moderator' | translate}}</span>
</button>
<button mat-menu-item
*ngIf="user"
(click)="navigateTags()"
tabindex="0">
<mat-icon svgIcon="comment_tag"></mat-icon>
<span>{{'header.edit-tags' | translate}}</span>
</button>
</ng-container>
<button mat-menu-item
*ngIf="user && user.role > 0"
tabindex="0"
(click)="showQRDialog();">
<mat-icon svgIcon="qrcode"
class="header-icons qrcode"
matTooltip="{{ 'header.QR' | translate }}">
</mat-icon>
<span>{{'header.room-qr' | translate}}</span>
</button>
</ng-container>
</div>
<!-- General Options -->
<button mat-menu-item
*ngIf="user"
*ngIf="user && !router.url.endsWith('/user')"
routerLink="/user"
tabindex="0">
<mat-icon class="sessions">group</mat-icon>
......@@ -80,6 +226,7 @@
<span *ngIf="user.isGuest"
svgIcon="meeting_room">{{'header.visited-sessions' | translate}}</span>
</button>
<button mat-menu-item
*ngIf="user"
(click)="openUserBonusTokenDialog()"
......@@ -87,19 +234,42 @@
<mat-icon class="star">grade</mat-icon>
<span>{{'header.user-bonus-token' | translate}}</span>
</button>
<button mat-menu-item
*ngIf="user"
(click)="showMotdDialog()">
<mat-icon>
{{ motdState ? 'notifications_active' : 'notifications_none' }}
</mat-icon>
<span>{{'header.motd' | translate}}</span>
</button>
<button mat-menu-item
aria-hidden="true"
*ngIf="isSafari === 'false' && !router.url.includes('home')"
(click)="getRescale().toggleState();">
<mat-icon (click)="getRescale().toggleState();">fullscreen