From 0ea19c4c0593cfe82b605935aea55ef3a613b00e Mon Sep 17 00:00:00 2001 From: Max Stephan Date: Sat, 30 Oct 2021 16:13:13 +0200 Subject: [PATCH] Design improvements (#94) * [web-gui] install date-fns * [time-formatter] use date-fns functions * [time-formatter] added some docstrings * [angular.json] increase production budget * [ticket-user-display] fix overflow for long names * [dropdown-menu] style improvements * [menu-bar] style improvements - remove dropdown - fix classroom name pos. for large usernames * [menu-bar] show icon based on user role * [time-formatter] added format * [ticket.component] show tooltip with full time * [time-formatter][format] change hour format * [user-list-entry] change icon color * [create-conference-dialog] style improvements - change checkbox color - fix text spacing * [ticket-list] fix overflow * [classroom] change heigt * [classroom] change drawer position * [side-drawer] change icon position * [user-list] fix overflow * [time-formatter][timeAgo] fix local --- web-gui/angular.json | 4 +- web-gui/package-lock.json | 46 ++----- web-gui/package.json | 1 + 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.html | 18 ++- .../create-conference-dialog.component.scss | 6 +- .../create-conference-dialog.component.ts | 2 +- .../classroom/classroom.component.html | 12 +- .../classroom/classroom.component.scss | 73 ++++------- .../conference/conference.component.ts | 6 +- .../ticket-list/ticket-list.component.html | 10 +- .../ticket-list/ticket-list.component.scss | 12 +- .../ticket-assign.component.scss | 25 ++-- .../ticket-user-display.component.html | 2 +- .../ticket-user-display.component.scss | 7 +- .../ticket-list/ticket/ticket.component.html | 75 +++++++++--- .../ticket-list/ticket/ticket.component.scss | 2 +- .../ticket-list/ticket/ticket.component.ts | 75 +++++++----- .../user-list-entry.component.html | 46 +++++-- .../user-list-entry.component.scss | 6 +- .../user-list/user-list.component.html | 17 +-- .../user-list/user-list.component.scss | 23 +++- .../dropdown-menu.component.html | 8 +- .../dropdown-menu.component.scss | 18 ++- .../menu-bar/menu-bar.component.html | 31 +++-- .../menu-bar/menu-bar.component.scss | 39 ++++-- .../menu-bar/menu-bar.component.ts | 28 ++--- .../side-drawer-menu.component.scss | 12 +- web-gui/src/app/service/classroom.service.ts | 9 ++ .../src/app/util/time-formatter.service.ts | 114 ++++++++---------- 33 files changed, 466 insertions(+), 313 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/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", 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", 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.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; +} 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/classroom.component.html b/web-gui/src/app/page-components/classroom/classroom.component.html index ea15e6b..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 26f1a01..28b971c 100644 --- a/web-gui/src/app/page-components/classroom/classroom.component.scss +++ b/web-gui/src/app/page-components/classroom/classroom.component.scss @@ -1,56 +1,33 @@ -.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: 70%; - flex-grow: 2; + display: flex; - flex-direction:row; + flex-direction: column; + height: 100%; + overflow: hidden; - .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; - vertical-align: bottom; - display: block; -} + .classroom-body { + display: flex; + flex: 1; + overflow: auto; + flex-basis: max-content; + flex-direction: row; + + .classroom-column { + width: 50%; + flex-grow: 1; + display: block; + } + + .drawer { + margin-top: 20px; + } + } -.spacer { - flex: 1 1 auto; } 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/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; } - - 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 @@ -
+
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.scss b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket.component.scss index 1450d8f..cd86421 100644 --- a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket.component.scss +++ b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket.component.scss @@ -8,6 +8,7 @@ mat-card-content { justify-content: space-between; align-items: center; padding-left: 5px; + min-height: 20px; } .ticket-desc { display: flex; @@ -18,7 +19,6 @@ mat-card-content { .ticket-details { margin-top: 5px; padding-left: 10px; - height: 20px; font-size: 14px; color: #6D6D6D; } 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); } } 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 { 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; } } } 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..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,17 +1,25 @@
- supervised_user_circle {{parseCourseRole(currentUser?.userRole)}} + + supervised_user_circle + supervised_user_circle + account_circle + + {{ parseCourseRole(currentUser?.userRole) }}
-
- meeting_room {{classroomInfo?.classroomName}} +
+ meeting_room + {{ 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 4fd73bb..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 @@ -1,22 +1,31 @@ -@use 'src/colors'; +@use "src/colors"; .menu-bar { background-color: transparent; box-sizing: border-box; - height: 5%; - display: flex; - flex-flow: row nowrap; - justify-content: space-between; 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; + } + + .room-label { + position: absolute; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + width: 100vh; + justify-content: center; } .user-info { @@ -24,27 +33,33 @@ flex-flow: row nowrap; align-items: center; } + + .menu-leave { + cursor: pointer; + color: #f35656; + margin-top: 4px; + margin-left: 8px; + } } .room-name { 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; } 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; - } - } 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..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 @@ -4,17 +4,17 @@ } .sidenav-container-right { - border: 2px dashed #B1B1B1; + 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: 2px dashed #b1b1b1; border-top-right-radius: 10px; - border-bottom-right-radius: 10px; border-left: none; + border-bottom: none; } .flex-toolbar-container { @@ -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 { 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() + } } diff --git a/web-gui/src/app/util/time-formatter.service.ts b/web-gui/src/app/util/time-formatter.service.ts index 3cc6702..328c1c0 100644 --- a/web-gui/src/app/util/time-formatter.service.ts +++ b/web-gui/src/app/util/time-formatter.service.ts @@ -1,85 +1,67 @@ -/** - * Quelle: https://muffinman.io/blog/javascript-time-ago-function/ - */ - import { Injectable } from '@angular/core'; +import { format, 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 y 'um' p", + }; - private months: string[] = [ - 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', - 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' - ]; + /** + * 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 ''; - // @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 }`; - } + /** + * 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); + const timeAgo = formatDistanceToNowStrict(date, { locale: this.locale }); -// --- Main function -// @ts-ignore - public timeAgo(dateParam): string { - if (!dateParam) { - // @ts-ignore - return null; - } + if (timeAgo) return timeAgo; - 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 - } + return formatRelative(date, new Date(), { locale: this.locale }); + } - return this.getFormattedDate(date); // 10. January 2017. at 10:20 + /** 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 }); } }