From f655ae991676548e479b3510bf03548c86609b27 Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 16:43:29 +0200 Subject: [PATCH 01/24] [web-gui] install date-fns --- web-gui/package-lock.json | 46 ++++++++------------------------------- web-gui/package.json | 1 + 2 files changed, 10 insertions(+), 37 deletions(-) diff --git a/web-gui/package-lock.json b/web-gui/package-lock.json index 4b235ad..15d9ca0 100644 --- a/web-gui/package-lock.json +++ b/web-gui/package-lock.json @@ -4194,6 +4194,11 @@ "assert-plus": "^1.0.0" } }, + "date-fns": { + "version": "2.25.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.25.0.tgz", + "integrity": "sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w==" + }, "debug": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", @@ -12657,45 +12662,12 @@ "dev": true }, "wide-align": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", - "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", + "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==", "dev": true, "requires": { - "string-width": "^1.0.2 || 2" - }, - "dependencies": { - "ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", - "dev": true - }, - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true - }, - "string-width": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", - "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", - "dev": true, - "requires": { - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^4.0.0" - } - }, - "strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", - "dev": true, - "requires": { - "ansi-regex": "^3.0.0" - } - } + "string-width": "^1.0.2 || 2 || 3 || 4" } }, "wildcard": { diff --git a/web-gui/package.json b/web-gui/package.json index 4519a1e..8d55ff7 100644 --- a/web-gui/package.json +++ b/web-gui/package.json @@ -25,6 +25,7 @@ "@angular/router": "^12.2.8", "@auth0/angular-jwt": "^5.0.2", "angular2-click-outside": "^0.1.0", + "date-fns": "^2.25.0", "howler": "^2.2.3", "ngx-avatar": "^4.1.0", "rsocket-core": "0.0.27", From 3f8703e0fb17623f758048a7acc9c21bd566b8ee Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 16:45:30 +0200 Subject: [PATCH 02/24] [time-formatter] use date-fns functions --- .../src/app/util/time-formatter.service.ts | 99 ++++++------------- 1 file changed, 32 insertions(+), 67 deletions(-) diff --git a/web-gui/src/app/util/time-formatter.service.ts b/web-gui/src/app/util/time-formatter.service.ts index 3cc6702..5cbc42a 100644 --- a/web-gui/src/app/util/time-formatter.service.ts +++ b/web-gui/src/app/util/time-formatter.service.ts @@ -1,85 +1,50 @@ -/** - * Quelle: https://muffinman.io/blog/javascript-time-ago-function/ - */ - import { Injectable } from '@angular/core'; +import { formatDistanceToNowStrict, formatRelative } from 'date-fns'; +import { de } from 'date-fns/locale'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class TimeFormatterService { + private formatDistanceLocale: any = { + xSeconds: { one: 'gerade eben', other: 'gerade eben' }, + xMinutes: { one: 'vor {{count}} Minute', other: 'vor {{count}} Minuten' }, + }; - constructor() { } + private formatRelativeLocal: any = { + today: "'heute um' p", + yesterday: "'gestern um' p", + lastWeek: "dd. MMM 'um' p", + other: "dd. MMM 'um' p", + }; - private months: string[] = [ - 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', - 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' - ]; + private formatDistance = (token: any, count: number) => { + if (!Object.keys(this.formatDistanceLocale).includes(token)) return ''; - // @ts-ignore - private getFormattedDate(date, prefomattedDate: string = undefined, hideYear = false) { - const day = date.getDate(); - const month = this.months[date.getMonth()]; - const year = date.getFullYear(); - const hours = date.getHours(); - let minutes = date.getMinutes(); + const res = this.formatDistanceLocale[token as any]; - if (minutes < 10) { - // Adding leading zero to minutes - minutes = `0${ minutes }`; + if (count === 1) { + return res.one.replace('{{count}}', count); } - if (prefomattedDate) { - // Today at 10:20 - // Yesterday at 10:20 - return `${ prefomattedDate } um ${ hours }:${ minutes }`; - } + return res.other.replace('{{count}}', count); + }; - if (hideYear) { - // 10. January at 10:20 - return `${ day }. ${ month } um ${ hours }:${ minutes }`; - } + private locale = { + ...de, + formatRelative: (token: any) => this.formatRelativeLocal[token], + formatDistance: this.formatDistance, + }; - // 10. January 2017. at 10:20 - return `${ day }. ${ month } ${ year }. um ${ hours }:${ minutes }`; - } + public timeAgo(dateParam: number): string { + const date = new Date(dateParam); + const timeAgo = formatDistanceToNowStrict(date, { + locale: { ...de, formatDistance: this.formatDistance }, + }); -// --- Main function -// @ts-ignore - public timeAgo(dateParam): string { - if (!dateParam) { - // @ts-ignore - return null; - } - - const date = typeof dateParam === 'object' ? dateParam : new Date(dateParam); - const DAY_IN_MS = 86400000; // 24 * 60 * 60 * 1000 - const today: number = Date.now() - const yesterday = new Date(today - DAY_IN_MS); - const seconds = Math.round((today - date) / 1000); - const minutes = Math.round(seconds / 60); - const isToday = new Date(today).toDateString() === date.toDateString(); - const isYesterday = yesterday.toDateString() === date.toDateString(); - const isThisYear = new Date(today).getFullYear() === date.getFullYear(); - - - if (seconds < 30) { - return 'gerade eben'; - //} else if (seconds < 30) { - // return `vor ${ seconds } Sek.`; - } else if (seconds < 90) { - return 'vor 1 Minute'; - } else if (minutes < 60) { - return `vor ${ minutes } Minuten`; - } else if (isToday) { - return this.getFormattedDate(date, 'Heute'); // Today at 10:20 - } else if (isYesterday) { - return this.getFormattedDate(date, 'Gestern'); // Yesterday at 10:20 - } else if (isThisYear) { - return this.getFormattedDate(date, undefined, true); // 10. January at 10:20 - } + if (timeAgo) return timeAgo; - return this.getFormattedDate(date); // 10. January 2017. at 10:20 + return formatRelative(date, new Date(), { locale: this.locale }); } } From 01255451939c1f44f764f36825391340ca86922d Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 17:18:25 +0200 Subject: [PATCH 03/24] [time-formatter] added some docstrings --- web-gui/src/app/util/time-formatter.service.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/web-gui/src/app/util/time-formatter.service.ts b/web-gui/src/app/util/time-formatter.service.ts index 5cbc42a..22f4a6b 100644 --- a/web-gui/src/app/util/time-formatter.service.ts +++ b/web-gui/src/app/util/time-formatter.service.ts @@ -15,9 +15,13 @@ export class TimeFormatterService { today: "'heute um' p", yesterday: "'gestern um' p", lastWeek: "dd. MMM 'um' p", - other: "dd. MMM 'um' p", + other: "dd. MMM y 'um' p", }; + /** + * Custom formatDistance function that + * returns a string only if the distance is less than one hour + */ private formatDistance = (token: any, count: number) => { if (!Object.keys(this.formatDistanceLocale).includes(token)) return ''; @@ -36,6 +40,16 @@ export class TimeFormatterService { formatDistance: this.formatDistance, }; + /** + * Calculates the elapsed time since the given date, and formats it as follows: + * + * - < 1 min = gerade eben + * - < 1 h = ${minutes} Minuten + * - today = heute um ${hh:mm} + * - yesterday = gestern um ${hh:mm} + * - last Week = ${dd. MM} um ${hh:mm} + * - other = ${dd. MM y} um ${hh:mm} + */ public timeAgo(dateParam: number): string { const date = new Date(dateParam); From 8ed129db046dca0fc47c776615c6e40b3d5b992c Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 17:19:04 +0200 Subject: [PATCH 04/24] [angular.json] increase production budget --- web-gui/angular.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web-gui/angular.json b/web-gui/angular.json index 3f6b125..d3ceba9 100644 --- a/web-gui/angular.json +++ b/web-gui/angular.json @@ -47,8 +47,8 @@ "budgets": [ { "type": "initial", - "maximumWarning": "10024kb", - "maximumError": "1mb" + "maximumWarning": "15024kb", + "maximumError": "1.5mb" }, { "type": "anyComponentStyle", From 658f2357c6624117a1cfecdb2e27ee2a470b7683 Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 17:19:29 +0200 Subject: [PATCH 05/24] [ticket-user-display] fix overflow for long names --- .../ticket-user-display/ticket-user-display.component.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component.scss b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component.scss index 9c71898..171bb40 100644 --- a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component.scss +++ b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component.scss @@ -4,7 +4,7 @@ align-items: center; min-width: 132px; max-width: 200px; - height: 38px; + min-height: 38px; .user-avatar { height: 32px; margin-right: 5px; @@ -15,11 +15,12 @@ align-items: baseline; .label { text-align: left; - color: #B1B1B1; + color: #b1b1b1; font-size: 14px; } .user-name { font-size: 16.4px; + word-wrap: break-word; } } } From 89e389d1d9f6ca026c7c774ec82c0b386e1e45af Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 18:15:14 +0200 Subject: [PATCH 06/24] [dropdown-menu] style improvements --- .../dropdown-menu.component.html | 8 ++++---- .../dropdown-menu.component.scss | 18 +++++++++++++---- .../menu-bar/menu-bar.component.html | 20 ++++++++++++------- .../menu-bar/menu-bar.component.scss | 12 +++++------ 4 files changed, 37 insertions(+), 21 deletions(-) diff --git a/web-gui/src/app/page-components/menu-bar/dropdown-menu/dropdown-menu.component.html b/web-gui/src/app/page-components/menu-bar/dropdown-menu/dropdown-menu.component.html index 72dff78..94dc42d 100644 --- a/web-gui/src/app/page-components/menu-bar/dropdown-menu/dropdown-menu.component.html +++ b/web-gui/src/app/page-components/menu-bar/dropdown-menu/dropdown-menu.component.html @@ -1,6 +1,6 @@
-
- close - Klassenraum verlassen -
+
+ logout + Klassenraum verlassen +
diff --git a/web-gui/src/app/page-components/menu-bar/dropdown-menu/dropdown-menu.component.scss b/web-gui/src/app/page-components/menu-bar/dropdown-menu/dropdown-menu.component.scss index 48f0d11..55da976 100644 --- a/web-gui/src/app/page-components/menu-bar/dropdown-menu/dropdown-menu.component.scss +++ b/web-gui/src/app/page-components/menu-bar/dropdown-menu/dropdown-menu.component.scss @@ -1,8 +1,8 @@ .menu-bubble { position: absolute; background: white; - border-radius: .4em; - border: 1px solid #B1B1B1; + border-radius: 0.4em; + border: 1px solid #b1b1b1; display: flex; flex-flow: column nowrap; @@ -12,15 +12,25 @@ } .menu-bubble:after { - content: ''; + content: ""; position: absolute; top: 0; left: 85%; width: 0; height: 0; border: 0.5em solid transparent; - border-bottom-color: #B1B1B1; + border-bottom-color: #b1b1b1; border-top: 0; margin-left: -0.4em; margin-top: -0.5em; } + +.menu-text { + line-height: 24px; + margin-left: 5px; +} + +.menu-item { + display: flex; + cursor: pointer; +} diff --git a/web-gui/src/app/page-components/menu-bar/menu-bar.component.html b/web-gui/src/app/page-components/menu-bar/menu-bar.component.html index 74f6ec8..daa2828 100644 --- a/web-gui/src/app/page-components/menu-bar/menu-bar.component.html +++ b/web-gui/src/app/page-components/menu-bar/menu-bar.component.html @@ -1,17 +1,21 @@
- supervised_user_circle {{parseCourseRole(currentUser?.userRole)}} + supervised_user_circle + {{ parseCourseRole(currentUser?.userRole) }}
-
- meeting_room {{classroomInfo?.classroomName}} +
+ meeting_room + {{ classroomInfo?.classroomName }}
- - + diff --git a/web-gui/src/app/page-components/menu-bar/menu-bar.component.scss b/web-gui/src/app/page-components/menu-bar/menu-bar.component.scss index 4fd73bb..6c68b81 100644 --- a/web-gui/src/app/page-components/menu-bar/menu-bar.component.scss +++ b/web-gui/src/app/page-components/menu-bar/menu-bar.component.scss @@ -1,4 +1,4 @@ -@use 'src/colors'; +@use "src/colors"; .menu-bar { background-color: transparent; @@ -17,6 +17,7 @@ align-items: center; justify-content: space-evenly; margin: 0 5px 0 5px; + cursor: pointer; } .user-info { @@ -30,21 +31,20 @@ margin-left: 3px; } - .user-avatar { position: relative; margin-right: 8px; } .avatar-blue { - background: #405E9A; + background: #405e9a; } .avatar-green { - background: #60CB7E; + background: #60cb7e; } .avatar-orange { - background: #FD9A63; + background: #fd9a63; } .avatar-light-blue { - background: #26B8B8; + background: #26b8b8; } From 9bf07d80f4855edbe4505475cecf9873ce8fd339 Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 19:48:14 +0200 Subject: [PATCH 07/24] [menu-bar] style improvements - remove dropdown - fix classroom name pos. for large usernames --- .../menu-bar/menu-bar.component.html | 15 ++++++---- .../menu-bar/menu-bar.component.scss | 29 ++++++++++++++----- .../menu-bar/menu-bar.component.ts | 28 +++++++----------- 3 files changed, 42 insertions(+), 30 deletions(-) diff --git a/web-gui/src/app/page-components/menu-bar/menu-bar.component.html b/web-gui/src/app/page-components/menu-bar/menu-bar.component.html index daa2828..d08a9f8 100644 --- a/web-gui/src/app/page-components/menu-bar/menu-bar.component.html +++ b/web-gui/src/app/page-components/menu-bar/menu-bar.component.html @@ -9,7 +9,7 @@ {{ classroomInfo?.classroomName }}
-
+
-
- +
+ logout +
+
diff --git a/web-gui/src/app/page-components/menu-bar/menu-bar.component.scss b/web-gui/src/app/page-components/menu-bar/menu-bar.component.scss index 6c68b81..2d438e6 100644 --- a/web-gui/src/app/page-components/menu-bar/menu-bar.component.scss +++ b/web-gui/src/app/page-components/menu-bar/menu-bar.component.scss @@ -3,21 +3,30 @@ .menu-bar { background-color: transparent; box-sizing: border-box; - height: 5%; - display: flex; - flex-flow: row nowrap; - justify-content: space-between; + min-height: 42px; align-items: center; padding: 5px 5px; box-shadow: none; + display: grid; + grid-auto-flow: column; + grid-template-columns: 1fr repeat(2, max-content); + position: relative; .menu-bar-section { + margin: 0 5px 0 5px; display: flex; flex-flow: row nowrap; align-items: center; - justify-content: space-evenly; - margin: 0 5px 0 5px; - cursor: pointer; + } + + .room-label { + position: absolute; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + width: 100vh; + justify-content: center; } .user-info { @@ -25,6 +34,12 @@ flex-flow: row nowrap; align-items: center; } + + .menu-leave { + cursor: pointer; + color: #f35656; + margin-top: 4px; + } } .room-name { diff --git a/web-gui/src/app/page-components/menu-bar/menu-bar.component.ts b/web-gui/src/app/page-components/menu-bar/menu-bar.component.ts index 4de794a..7e5c2a5 100644 --- a/web-gui/src/app/page-components/menu-bar/menu-bar.component.ts +++ b/web-gui/src/app/page-components/menu-bar/menu-bar.component.ts @@ -1,30 +1,24 @@ -import {Component, Input} from '@angular/core'; -import {parseCourseRole, User} from 'src/app/model/User'; -import {ClassroomService} from "../../service/classroom.service"; -import {ConferenceService} from "../../service/conference.service"; -import {ClassroomInfo} from "../../model/ClassroomInfo"; -import {UserIconService} from "../../util/user-icon.service"; +import { Component, Input, ViewChild } from '@angular/core'; +import { parseCourseRole, User } from 'src/app/model/User'; +import { ClassroomService } from '../../service/classroom.service'; +import { ConferenceService } from '../../service/conference.service'; +import { ClassroomInfo } from '../../model/ClassroomInfo'; +import { UserIconService } from '../../util/user-icon.service'; +import { DropdownMenuComponent } from './dropdown-menu/dropdown-menu.component'; @Component({ selector: 'app-menu-bar', templateUrl: './menu-bar.component.html', - styleUrls: ['./menu-bar.component.scss'] + styleUrls: ['./menu-bar.component.scss'], }) export class MenuBarComponent { - - public parseCourseRole: Function = parseCourseRole - @Input() public currentUser: User | undefined - @Input() public classroomInfo: ClassroomInfo | undefined - menuVisible: boolean = false; + public parseCourseRole: Function = parseCourseRole; + @Input() public currentUser: User | undefined; + @Input() public classroomInfo: ClassroomInfo | undefined; constructor( public classroomService: ClassroomService, public conferenceService: ConferenceService, public userIconService: UserIconService ) {} - - toggleMenu() { - this.menuVisible = !this.menuVisible; - } - } From 15798a7666a582fb57c00a52e80e3de27d94cbb0 Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 20:01:22 +0200 Subject: [PATCH 08/24] [menu-bar] show icon based on user role --- .../app/page-components/menu-bar/menu-bar.component.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web-gui/src/app/page-components/menu-bar/menu-bar.component.html b/web-gui/src/app/page-components/menu-bar/menu-bar.component.html index d08a9f8..d357dc9 100644 --- a/web-gui/src/app/page-components/menu-bar/menu-bar.component.html +++ b/web-gui/src/app/page-components/menu-bar/menu-bar.component.html @@ -1,6 +1,10 @@
- supervised_user_circle + + supervised_user_circle + supervised_user_circle + account_circle + {{ parseCourseRole(currentUser?.userRole) }}
From 93787d7062009781ad05a99066a030f7d2845b0e Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 20:10:16 +0200 Subject: [PATCH 09/24] [time-formatter] added format --- web-gui/src/app/util/time-formatter.service.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/web-gui/src/app/util/time-formatter.service.ts b/web-gui/src/app/util/time-formatter.service.ts index 22f4a6b..cf3f1ba 100644 --- a/web-gui/src/app/util/time-formatter.service.ts +++ b/web-gui/src/app/util/time-formatter.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { formatDistanceToNowStrict, formatRelative } from 'date-fns'; +import { format, formatDistanceToNowStrict, formatRelative } from 'date-fns'; import { de } from 'date-fns/locale'; @Injectable({ @@ -61,4 +61,9 @@ export class TimeFormatterService { return formatRelative(date, new Date(), { locale: this.locale }); } + + /** Formats the given date to dd. MM. y, hh:mm */ + public format(dateParam: number): string { + return format(dateParam, 'dd. MMM y, hh:mm', { locale: de }); + } } From f390f1b7edc7e8ecc2956bbd3a28ad3cc3f55a87 Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 20:11:53 +0200 Subject: [PATCH 10/24] [ticket.component] show tooltip with full time --- .../ticket-list/ticket/ticket.component.html | 75 +++++++++++++++---- .../ticket-list/ticket/ticket.component.ts | 75 +++++++++++-------- 2 files changed, 106 insertions(+), 44 deletions(-) diff --git a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket.component.html b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket.component.html index ffd288d..20450ef 100644 --- a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket.component.html +++ b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket.component.html @@ -2,36 +2,83 @@
local_offer -

{{ticket.description}}

+

{{ ticket.description }}

-

#{{ticket.ticketId}}

-

{{this.getTicketTime(ticket)}}

+

#{{ ticket.ticketId }}

+

+ {{ this.getTicketTimeAgo(ticket) }} +

- - + +
-
- - - - edit - delete +
+ + + + edit + delete
- + - + - + diff --git a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket.component.ts b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket.component.ts index 71c8555..b22a5c3 100644 --- a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket.component.ts +++ b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket.component.ts @@ -1,80 +1,95 @@ -import {Component, Input, OnInit} from '@angular/core'; -import {Ticket} from "../../../../model/Ticket"; -import {TimeFormatterService} from "../../../../util/time-formatter.service"; -import {ClassroomService} from "../../../../service/classroom.service"; -import {ConferenceInfo} from "../../../../model/ConferenceInfo"; -import {User, UserCredentials} from "../../../../model/User"; -import {UserService} from "../../../../service/user.service"; +import { Component, Input, OnInit } from '@angular/core'; +import { Ticket } from '../../../../model/Ticket'; +import { TimeFormatterService } from '../../../../util/time-formatter.service'; +import { ClassroomService } from '../../../../service/classroom.service'; +import { ConferenceInfo } from '../../../../model/ConferenceInfo'; +import { User, UserCredentials } from '../../../../model/User'; +import { UserService } from '../../../../service/user.service'; @Component({ selector: 'app-ticket', templateUrl: './ticket.component.html', - styleUrls: ['./ticket.component.scss'] + styleUrls: ['./ticket.component.scss'], }) export class TicketComponent implements OnInit { - @Input() ticket?: Ticket; - @Input() users: User[] = [] + @Input() users: User[] = []; conference?: ConferenceInfo; constructor( private timeFormatterService: TimeFormatterService, public classroomService: ClassroomService, public userService: UserService - ) { } + ) {} ngOnInit(): void { - if (this.ticket === undefined) throw new Error("Ticket is undefined!") - if (this.ticket?.creator === undefined) throw new Error("Ticket " + this.ticket?.ticketId + " without creator") + if (this.ticket === undefined) throw new Error('Ticket is undefined!'); + if (this.ticket?.creator === undefined) + throw new Error('Ticket ' + this.ticket?.ticketId + ' without creator'); + } + + getTicketTimeAgo(ticket: Ticket): string { + return this.timeFormatterService.timeAgo(ticket.createTime); } getTicketTime(ticket: Ticket): string { - return this.timeFormatterService.timeAgo(ticket.createTime) + return this.timeFormatterService.format(ticket.createTime); } - public determineButton(): "join" | "link" | "invite" { - this.conference = this.classroomService.findConferenceOfTicket(this.ticket!!) - if (this.classroomService.isSelf(this.ticket!!.creator) && this.conference === undefined) { - return "link" + public determineButton(): 'join' | 'link' | 'invite' { + this.conference = this.classroomService.findConferenceOfTicket( + this.ticket!! + ); + if ( + this.classroomService.isSelf(this.ticket!!.creator) && + this.conference === undefined + ) { + return 'link'; } - if (this.conference !== undefined || this.classroomService.isInConference(this.ticket!!.creator)) - return "join" - else - return "invite" + if ( + this.conference !== undefined || + this.classroomService.isInConference(this.ticket!!.creator) + ) + return 'join'; + else return 'invite'; } public mayDeleteTicket(): boolean { - return this.classroomService.isSelf(this.ticket?.creator!!) || + return ( + this.classroomService.isSelf(this.ticket?.creator!!) || this.classroomService.isCurrentUserPrivileged() + ); } public mayEditTicket(): boolean { - return this.classroomService.isSelf(this.ticket?.creator!!) + return this.classroomService.isSelf(this.ticket?.creator!!); } editTicket() { - this.classroomService.createOrEditTicket(this.ticket) + this.classroomService.createOrEditTicket(this.ticket); } closeTicket() { - this.classroomService.closeTicket(this.ticket!!) + this.classroomService.closeTicket(this.ticket!!); } inviteCreator() { this.classroomService .createNewConferenceForTicket(this.ticket!!) - .subscribe(conf => this.classroomService.inviteToConference(this.ticket!!.creator, conf)) + .subscribe((conf) => + this.classroomService.inviteToConference(this.ticket!!.creator, conf) + ); } linkConference() { - this.classroomService.linkTicketToConference(this.ticket!!) + this.classroomService.linkTicketToConference(this.ticket!!); } joinConference() { - this.classroomService.conferenceService.joinConference(this.conference!!) + this.classroomService.conferenceService.joinConference(this.conference!!); } public fullUser(user: UserCredentials): User | undefined { - return this.userService.getFullUser(user.userId) + return this.userService.getFullUser(user.userId); } } From 697f0fc3b444610b5c83c8288a4cdc63a9ff4cb0 Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 20:13:00 +0200 Subject: [PATCH 11/24] [time-formatter][format] change hour format --- web-gui/src/app/util/time-formatter.service.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web-gui/src/app/util/time-formatter.service.ts b/web-gui/src/app/util/time-formatter.service.ts index cf3f1ba..d73bc50 100644 --- a/web-gui/src/app/util/time-formatter.service.ts +++ b/web-gui/src/app/util/time-formatter.service.ts @@ -62,8 +62,8 @@ export class TimeFormatterService { return formatRelative(date, new Date(), { locale: this.locale }); } - /** Formats the given date to dd. MM. y, hh:mm */ + /** Formats the given date to dd. MM. y, HH:mm */ public format(dateParam: number): string { - return format(dateParam, 'dd. MMM y, hh:mm', { locale: de }); + return format(dateParam, 'dd. MMM y, HH:mm', { locale: de }); } } From 66bca5314a92e84811a318b00aaa77467e2c06be Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 20:19:50 +0200 Subject: [PATCH 12/24] [user-list-entry] change icon color --- .../user-list-entry.component.html | 46 ++++++++++++++++--- .../user-list-entry.component.scss | 6 ++- 2 files changed, 44 insertions(+), 8 deletions(-) diff --git a/web-gui/src/app/page-components/classroom/user-list/user-list-entry/user-list-entry.component.html b/web-gui/src/app/page-components/classroom/user-list/user-list-entry/user-list-entry.component.html index 7a20010..b83bcf9 100644 --- a/web-gui/src/app/page-components/classroom/user-list/user-list-entry/user-list-entry.component.html +++ b/web-gui/src/app/page-components/classroom/user-list/user-list-entry/user-list-entry.component.html @@ -1,23 +1,55 @@
+ [class.invisible]="!user.visible" +>
- - call - phone_callback + + call + phone_callback
- visibility_off + visibility_off - visibility_on + visibility_on diff --git a/web-gui/src/app/page-components/classroom/user-list/user-list-entry/user-list-entry.component.scss b/web-gui/src/app/page-components/classroom/user-list/user-list-entry/user-list-entry.component.scss index 3537b89..df242b5 100644 --- a/web-gui/src/app/page-components/classroom/user-list/user-list-entry/user-list-entry.component.scss +++ b/web-gui/src/app/page-components/classroom/user-list/user-list-entry/user-list-entry.component.scss @@ -20,7 +20,11 @@ } .visibility-icon { - color: #6D6D6D; + color: #6d6d6d; +} + +.call-icon { + color: #405e9a; } .invisible { From 934e978edebc73a10836708fa89b1faaa07cbc2f Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 20:47:48 +0200 Subject: [PATCH 13/24] [create-conference-dialog] style improvements - change checkbox color - fix text spacing --- .../create-conference-dialog.component.html | 18 ++++++++++++++---- .../create-conference-dialog.component.scss | 6 +++++- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.html b/web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.html index aeaa5cb..105f31c 100644 --- a/web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.html +++ b/web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.html @@ -4,16 +4,26 @@
Konferenzname - +
- Konferenz sichtbar? - + Konferenz sichtbar? +
- +
diff --git a/web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.scss b/web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.scss index 154d1c1..4f3c9f7 100644 --- a/web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.scss +++ b/web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.scss @@ -4,7 +4,6 @@ button { .container { width: 20rem; - } form { @@ -17,6 +16,7 @@ mat-dialog-content { display: flex; flex-direction: column; overflow: hidden; + margin-bottom: 10px; } .checkbox-form { @@ -27,3 +27,7 @@ mat-action-row { width: unset; margin-top: 10px; } + +.visable-text { + margin-right: 10px; +} From 8d65b4771dc9c83a0dcd6526e03edf4e6554339f Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 20:51:54 +0200 Subject: [PATCH 14/24] [ticket-list] fix overflow --- .../classroom/ticket-list/ticket-list.component.html | 10 +++++++--- .../classroom/ticket-list/ticket-list.component.scss | 12 +++++++----- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/web-gui/src/app/page-components/classroom/ticket-list/ticket-list.component.html b/web-gui/src/app/page-components/classroom/ticket-list/ticket-list.component.html index c454fa1..a8a4749 100644 --- a/web-gui/src/app/page-components/classroom/ticket-list/ticket-list.component.html +++ b/web-gui/src/app/page-components/classroom/ticket-list/ticket-list.component.html @@ -1,11 +1,15 @@
- +

Tickets

filter_list
-
- +
+ diff --git a/web-gui/src/app/page-components/classroom/ticket-list/ticket-list.component.scss b/web-gui/src/app/page-components/classroom/ticket-list/ticket-list.component.scss index 3384e6f..ba5fb8f 100644 --- a/web-gui/src/app/page-components/classroom/ticket-list/ticket-list.component.scss +++ b/web-gui/src/app/page-components/classroom/ticket-list/ticket-list.component.scss @@ -1,11 +1,11 @@ h3 { - text-align:center; + text-align: center; } .ticket-list { - height: 90%; + height: 100%; display: flex; - flex-direction:column; + flex-direction: column; flex-grow: 2; margin-left: 5%; margin-right: 5%; @@ -23,9 +23,11 @@ h3 { } } +.list-body { + overflow: auto; +} + .ticket { padding: 5px; margin: 5px; } - - From 5438d5457642e592903831def26fac251a41f92e Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 20:52:04 +0200 Subject: [PATCH 15/24] [classroom] change heigt --- .../app/page-components/classroom/classroom.component.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web-gui/src/app/page-components/classroom/classroom.component.scss b/web-gui/src/app/page-components/classroom/classroom.component.scss index 26f1a01..4797a05 100644 --- a/web-gui/src/app/page-components/classroom/classroom.component.scss +++ b/web-gui/src/app/page-components/classroom/classroom.component.scss @@ -32,13 +32,13 @@ } .classroom-content { - height: 70%; + height: 80%; flex-grow: 2; display: flex; - flex-direction:row; + flex-direction: row; .classroom-column { - width:50%; + width: 50%; flex-grow: 2; display: block; } From 45e9fd96df0a590f1174c082cb27650dae9457d9 Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 20:59:38 +0200 Subject: [PATCH 16/24] [classroom] change drawer position --- .../app/page-components/classroom/classroom.component.html | 4 ++-- .../app/page-components/classroom/classroom.component.scss | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/web-gui/src/app/page-components/classroom/classroom.component.html b/web-gui/src/app/page-components/classroom/classroom.component.html index ea15e6b..e62526f 100644 --- a/web-gui/src/app/page-components/classroom/classroom.component.html +++ b/web-gui/src/app/page-components/classroom/classroom.component.html @@ -3,7 +3,7 @@
- + - +
diff --git a/web-gui/src/app/page-components/classroom/classroom.component.scss b/web-gui/src/app/page-components/classroom/classroom.component.scss index 4797a05..ac647f8 100644 --- a/web-gui/src/app/page-components/classroom/classroom.component.scss +++ b/web-gui/src/app/page-components/classroom/classroom.component.scss @@ -32,7 +32,7 @@ } .classroom-content { - height: 80%; + height: 85%; flex-grow: 2; display: flex; flex-direction: row; @@ -47,10 +47,13 @@ .classroom-bottom { grid-row: 99; grid-column: 1; - vertical-align: bottom; display: block; } .spacer { flex: 1 1 auto; } + +.drawer { + margin-top: 20px; +} From f6b39b53c1a166c20ccbb3270018d9f16ef078d3 Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 21:05:21 +0200 Subject: [PATCH 17/24] [side-drawer] change icon position --- .../side-drawer-menu/side-drawer-menu.component.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/web-gui/src/app/page-components/side-drawer-menu/side-drawer-menu.component.scss b/web-gui/src/app/page-components/side-drawer-menu/side-drawer-menu.component.scss index 3c37f56..12702c5 100644 --- a/web-gui/src/app/page-components/side-drawer-menu/side-drawer-menu.component.scss +++ b/web-gui/src/app/page-components/side-drawer-menu/side-drawer-menu.component.scss @@ -4,14 +4,14 @@ } .sidenav-container-right { - border: 2px dashed #B1B1B1; + border: 2px dashed #b1b1b1; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-right: none; } .sidenav-container-left { - border: 2px dashed #B1B1B1; + border: 2px dashed #b1b1b1; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-left: none; @@ -23,7 +23,6 @@ justify-content: center; } - .content-container { max-width: 1400px; margin: 0 auto; @@ -32,7 +31,10 @@ .sidenav { width: 350px; border: none; +} +.sidenav-toggle { + margin-top: 5px; } mat-sidenav-content { From 681d93341e40b4768be08fab2c5f3f6da6332487 Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 21:25:24 +0200 Subject: [PATCH 18/24] [user-list] fix overflow --- .../user-list/user-list.component.html | 17 +++++++------- .../user-list/user-list.component.scss | 23 ++++++++++++++----- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/web-gui/src/app/page-components/classroom/user-list/user-list.component.html b/web-gui/src/app/page-components/classroom/user-list/user-list.component.html index 6713102..a704e1f 100644 --- a/web-gui/src/app/page-components/classroom/user-list/user-list.component.html +++ b/web-gui/src/app/page-components/classroom/user-list/user-list.component.html @@ -1,15 +1,16 @@
-
- Teilnehmer -
+
Teilnehmer
- -
+
+
+ +
-
diff --git a/web-gui/src/app/page-components/classroom/user-list/user-list.component.scss b/web-gui/src/app/page-components/classroom/user-list/user-list.component.scss index 8acc979..1dae69b 100644 --- a/web-gui/src/app/page-components/classroom/user-list/user-list.component.scss +++ b/web-gui/src/app/page-components/classroom/user-list/user-list.component.scss @@ -16,16 +16,27 @@ .user-list { display: flex; - flex-direction:column; + flex-direction: column; flex-grow: 2; margin-right: 5%; margin-left: 5%; + height: 100%; +} + +.user-list-entries { + overflow: hidden; + height: 100%; +} + +.user-list-other { + height: calc(100% - 63px); + overflow: auto; } .user { height: 24px; margin: 12px 5px 5px 5px; - padding:5px; + padding: 5px; display: flex; justify-content: space-between; .meta { @@ -49,13 +60,13 @@ align-items: center; } .user-item { - width:100%; - margin:0; + width: 100%; + margin: 0; .subtext-role { - float:right; + float: right; } p { - margin:2px; + margin: 2px; } } } From c21fdb36bd5b055169670fea9c9acc220392c806 Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Thu, 28 Oct 2021 21:58:28 +0200 Subject: [PATCH 19/24] [time-formatter][timeAgo] fix local --- web-gui/src/app/util/time-formatter.service.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/web-gui/src/app/util/time-formatter.service.ts b/web-gui/src/app/util/time-formatter.service.ts index d73bc50..328c1c0 100644 --- a/web-gui/src/app/util/time-formatter.service.ts +++ b/web-gui/src/app/util/time-formatter.service.ts @@ -53,9 +53,7 @@ export class TimeFormatterService { public timeAgo(dateParam: number): string { const date = new Date(dateParam); - const timeAgo = formatDistanceToNowStrict(date, { - locale: { ...de, formatDistance: this.formatDistance }, - }); + const timeAgo = formatDistanceToNowStrict(date, { locale: this.locale }); if (timeAgo) return timeAgo; From 15ce0ef813e38e6ca51b924a9c0c6f1eca22e59a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Kr=C3=B6ll?= Date: Fri, 29 Oct 2021 16:16:28 +0200 Subject: [PATCH 20/24] Side drawers fill remaining space. --- .../classroom/classroom.component.html | 12 ++-- .../classroom/classroom.component.scss | 72 ++++++------------- .../menu-bar/menu-bar.component.scss | 2 +- 3 files changed, 29 insertions(+), 57 deletions(-) diff --git a/web-gui/src/app/page-components/classroom/classroom.component.html b/web-gui/src/app/page-components/classroom/classroom.component.html index e62526f..ce406e7 100644 --- a/web-gui/src/app/page-components/classroom/classroom.component.html +++ b/web-gui/src/app/page-components/classroom/classroom.component.html @@ -1,9 +1,9 @@ -
+
-
-
- - - +
+ + + +
diff --git a/web-gui/src/app/page-components/classroom/classroom.component.scss b/web-gui/src/app/page-components/classroom/classroom.component.scss index ac647f8..975817e 100644 --- a/web-gui/src/app/page-components/classroom/classroom.component.scss +++ b/web-gui/src/app/page-components/classroom/classroom.component.scss @@ -1,59 +1,31 @@ -.container { - display: block; - padding: 16px; - z-index: 2; - position: relative; -} -.actions { - margin: -15px; - display: flex; - height: 40px; - width: 100%; - padding-left: 10px; - margin-bottom: 10px; - .mat-flat-button { - line-height: 30px; - margin: 0 2.5px; - height: 30px; - display: flex; - align-items: center; - justify-content: center; - .mat-icon { - height: 25px; - } - } - span { - height: 24px; - margin-top: 2px; - } - .mat-icon { - cursor: pointer; - } -} - .classroom-content { - height: 85%; - flex-grow: 2; + display: flex; - flex-direction: row; + flex-direction: column; + height: 100%; - .classroom-column { - width: 50%; - flex-grow: 2; + app-menu-bar { display: block; + padding: 16px; + z-index: 2; + position: relative; } -} -.classroom-bottom { - grid-row: 99; - grid-column: 1; - display: block; -} + .classroom-body { + display: flex; + flex: 1 1 auto; + flex-basis: max-content; + flex-direction: row; -.spacer { - flex: 1 1 auto; -} + .classroom-column { + width: 50%; + flex-grow: 2; + display: block; + } + + .drawer { + margin-top: 20px; + } + } -.drawer { - margin-top: 20px; } diff --git a/web-gui/src/app/page-components/menu-bar/menu-bar.component.scss b/web-gui/src/app/page-components/menu-bar/menu-bar.component.scss index 2d438e6..4de047b 100644 --- a/web-gui/src/app/page-components/menu-bar/menu-bar.component.scss +++ b/web-gui/src/app/page-components/menu-bar/menu-bar.component.scss @@ -3,7 +3,6 @@ .menu-bar { background-color: transparent; box-sizing: border-box; - min-height: 42px; align-items: center; padding: 5px 5px; box-shadow: none; @@ -39,6 +38,7 @@ cursor: pointer; color: #f35656; margin-top: 4px; + margin-left: 8px; } } From 94f4430cc5e5dbe3a9163be4d5dd1fcc983eead1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Kr=C3=B6ll?= Date: Fri, 29 Oct 2021 16:22:14 +0200 Subject: [PATCH 21/24] Remove bottom border of drawers. --- .../side-drawer-menu/side-drawer-menu.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web-gui/src/app/page-components/side-drawer-menu/side-drawer-menu.component.scss b/web-gui/src/app/page-components/side-drawer-menu/side-drawer-menu.component.scss index 12702c5..b539589 100644 --- a/web-gui/src/app/page-components/side-drawer-menu/side-drawer-menu.component.scss +++ b/web-gui/src/app/page-components/side-drawer-menu/side-drawer-menu.component.scss @@ -6,15 +6,15 @@ .sidenav-container-right { border: 2px dashed #b1b1b1; border-top-left-radius: 10px; - border-bottom-left-radius: 10px; border-right: none; + border-bottom: none; } .sidenav-container-left { border: 2px dashed #b1b1b1; border-top-right-radius: 10px; - border-bottom-right-radius: 10px; border-left: none; + border-bottom: none; } .flex-toolbar-container { From 458af907e0b62a8eff6c657fb4c2829950725a93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Kr=C3=B6ll?= Date: Fri, 29 Oct 2021 16:32:27 +0200 Subject: [PATCH 22/24] Scroll on ticket-list overflow. --- .../app/page-components/classroom/classroom.component.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web-gui/src/app/page-components/classroom/classroom.component.scss b/web-gui/src/app/page-components/classroom/classroom.component.scss index 975817e..28b971c 100644 --- a/web-gui/src/app/page-components/classroom/classroom.component.scss +++ b/web-gui/src/app/page-components/classroom/classroom.component.scss @@ -3,6 +3,7 @@ display: flex; flex-direction: column; height: 100%; + overflow: hidden; app-menu-bar { display: block; @@ -13,13 +14,14 @@ .classroom-body { display: flex; - flex: 1 1 auto; + flex: 1; + overflow: auto; flex-basis: max-content; flex-direction: row; .classroom-column { width: 50%; - flex-grow: 2; + flex-grow: 1; display: block; } From d3325e4c1ab43e00ee899a7878276e4dff27d31f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Kr=C3=B6ll?= Date: Fri, 29 Oct 2021 17:09:41 +0200 Subject: [PATCH 23/24] Confirmation dialog on conference deletion. --- web-gui/src/app/app.module.ts | 12 ++++++------ .../confirmation-dialog.component.html | 7 +++++++ .../confirmation-dialog.component.scss | 15 +++++++++++++++ .../confirmation-dialog.component.ts | 18 ++++++++++++++++++ .../create-conference-dialog.component.ts | 2 +- .../conference/conference.component.ts | 6 +++++- web-gui/src/app/service/classroom.service.ts | 9 +++++++++ 7 files changed, 61 insertions(+), 8 deletions(-) create mode 100644 web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html create mode 100644 web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.scss create mode 100644 web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.ts diff --git a/web-gui/src/app/app.module.ts b/web-gui/src/app/app.module.ts index 47c4dd4..b5f30eb 100644 --- a/web-gui/src/app/app.module.ts +++ b/web-gui/src/app/app.module.ts @@ -30,7 +30,6 @@ import {MatFormFieldModule} from "@angular/material/form-field"; import { LogoutComponent } from './page-components/full-page/logout/logout.component'; import {NotFoundComponent} from "./page-components/full-page/not-found/not-found.component"; import { OverlayErrorComponent } from './page-components/overlay-error/overlay-error.component'; -import { ChooseConferenceDialogComponent } from './dialogs/choose-conference-dialog/choose-conference-dialog.component'; import {JoinUserConferenceDialogComponent} from "./dialogs/join-user-conference-dialog/join-user-conference-dialog.component"; import {AvatarModule} from "ngx-avatar"; import { FullPageComponent } from './page-components/full-page/full-page.component'; @@ -43,6 +42,8 @@ import { DropdownMenuComponent } from './page-components/menu-bar/dropdown-menu/ import { TicketUserDisplayComponent } from './page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component'; import {LinkConferenceToTicketDialogComponent} from "./dialogs/link-conference-to-ticket-dialog/link-conference-to-ticket-dialog.component"; import { UserListEntryComponent } from './page-components/classroom/user-list/user-list-entry/user-list-entry.component'; +import {ConfirmationDialogComponent} from "./dialogs/confirmation-dialog/confirmation-dialog.component"; +import {ChooseConferenceDialogComponent} from "./dialogs/choose-conference-dialog/choose-conference-dialog.component"; @NgModule({ @@ -63,11 +64,9 @@ import { UserListEntryComponent } from './page-components/classroom/user-list/us ConferenceListComponent, CreateConferenceDialogComponent, LogoutComponent, - CreateConferenceDialogComponent, OverlayErrorComponent, - ChooseConferenceDialogComponent, + LinkConferenceToTicketDialogComponent, JoinUserConferenceDialogComponent, - OverlayErrorComponent, FullPageComponent, TicketComponent, TicketAssignComponent, @@ -76,8 +75,9 @@ import { UserListEntryComponent } from './page-components/classroom/user-list/us ConferenceAttendeesComponent, DropdownMenuComponent, TicketUserDisplayComponent, - LinkConferenceToTicketDialogComponent, - UserListEntryComponent + UserListEntryComponent, + ConfirmationDialogComponent, + ChooseConferenceDialogComponent ], imports: [ BrowserModule, diff --git a/web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html b/web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html new file mode 100644 index 0000000..c8bd80a --- /dev/null +++ b/web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html @@ -0,0 +1,7 @@ +
+

{{this.data}}

+ + + + +
diff --git a/web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.scss b/web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.scss new file mode 100644 index 0000000..75b1759 --- /dev/null +++ b/web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.scss @@ -0,0 +1,15 @@ +button { + margin:3px; +} + +.container { + width: 20rem; +} + +mat-action-row { + align-items: center; +} + +.dialogTitle { + word-break: break-word; +} diff --git a/web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.ts b/web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.ts new file mode 100644 index 0000000..9a18cec --- /dev/null +++ b/web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.ts @@ -0,0 +1,18 @@ +import {Component, Inject} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; + +@Component({ + selector: 'app-confirmation-dialog', + templateUrl: './confirmation-dialog.component.html', + styleUrls: ['./confirmation-dialog.component.scss'] +}) +export class ConfirmationDialogComponent { + + constructor(@Inject(MAT_DIALOG_DATA) public data: string, + public dialogRef: MatDialogRef + ) { } + + public close(result: boolean = false) { + this.dialogRef.close(result) + } +} diff --git a/web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.ts b/web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.ts index 7b95853..5d32859 100644 --- a/web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.ts +++ b/web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.ts @@ -21,7 +21,7 @@ export class CreateConferenceDialogComponent { private notification: NotificationService, private dialogRef: MatDialogRef ) { - this.conferenceSubject = new FormControl('Konferenz von ' + this.data.currentUser.fullName) + this.conferenceSubject = new FormControl('Meeting von ' + this.data.currentUser.fullName) this.conferenceVisible = new FormControl(true) this.form = this.fb.group({ diff --git a/web-gui/src/app/page-components/classroom/conference-list/conference/conference.component.ts b/web-gui/src/app/page-components/classroom/conference-list/conference/conference.component.ts index dba1de8..8c23683 100644 --- a/web-gui/src/app/page-components/classroom/conference-list/conference/conference.component.ts +++ b/web-gui/src/app/page-components/classroom/conference-list/conference/conference.component.ts @@ -4,6 +4,7 @@ import {User} from "../../../../model/User"; import {ConferenceService} from "../../../../service/conference.service"; import {ClassroomService} from "../../../../service/classroom.service"; import {Ticket} from "../../../../model/Ticket"; +import {filter, tap} from "rxjs/operators"; @Component({ selector: 'app-conference', @@ -42,7 +43,10 @@ export class ConferenceComponent { } public endConference() { - this.conferenceService.endConference(this.conference!!) + this.classroomService.getConfirmation("BBB-Konferenz \"" + this.conference?.conferenceName + "\" beenden?").pipe( + filter(result => result), + tap(_ => this.conferenceService.endConference(this.conference!!)) + ).subscribe() } public joinTooltip(): string { diff --git a/web-gui/src/app/service/classroom.service.ts b/web-gui/src/app/service/classroom.service.ts index 5828d28..4944adc 100644 --- a/web-gui/src/app/service/classroom.service.ts +++ b/web-gui/src/app/service/classroom.service.ts @@ -32,6 +32,7 @@ import { LinkConferenceInputData, LinkConferenceToTicketDialogComponent } from "../dialogs/link-conference-to-ticket-dialog/link-conference-to-ticket-dialog.component"; +import {ConfirmationDialogComponent} from "../dialogs/confirmation-dialog/confirmation-dialog.component"; /** * Service that provides observables that asynchronously updates tickets, users and @@ -253,4 +254,12 @@ export class ClassroomService { public findConferenceOfTicket(ticket: Ticket): ConferenceInfo | undefined { return this.conferences.find(conference => conference.conferenceId === ticket.conferenceId) } + + getConfirmation(question: string): Observable { + return this.dialog.open(ConfirmationDialogComponent, { + height: 'auto', + width: 'auto', + data: question + }).beforeClosed() + } } From 0bd9156fd9e612e0f0ea114da975a401b620bf72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Kr=C3=B6ll?= Date: Fri, 29 Oct 2021 17:43:59 +0200 Subject: [PATCH 24/24] Break name in assignee & remove arrow from mat-select. --- .../ticket-assign.component.scss | 25 +++++++++++-------- .../ticket-user-display.component.html | 2 +- .../ticket-user-display.component.scss | 2 +- .../ticket-list/ticket/ticket.component.scss | 2 +- 4 files changed, 17 insertions(+), 14 deletions(-) diff --git a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-assign/ticket-assign.component.scss b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-assign/ticket-assign.component.scss index 4eba8c4..9187076 100644 --- a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-assign/ticket-assign.component.scss +++ b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-assign/ticket-assign.component.scss @@ -28,7 +28,6 @@ .assign-user { display: flex; flex-flow: row nowrap; - //justify-content: space-evenly; align-items: center; align-content: space-around; min-width: 132px; @@ -46,17 +45,21 @@ color: #6D6D6D; } -mat-select-trigger { - -} -.mat-select-arrow-wrapper { - display: none; +.container { + width: 100%; } -.mat-select-arrow { - display: none; -} +::ng-deep .mat-select > .mat-select-trigger { + .mat-select-value { + white-space: unset; + .mat-select-value-text { + white-space: unset; + } + } -.container { - width: 100%; + .mat-select-arrow-wrapper .mat-select-arrow { + border: none; + } } + + diff --git a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component.html b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component.html index ca035f4..78ab933 100644 --- a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component.html +++ b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component.html @@ -1,4 +1,4 @@ -
+