diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index aaed7967677521402cf2fd5aaaf328795028877b..a9f266e84e1a727ae5d84a132c6c5ac64258084c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -61,6 +61,7 @@ import { MatIconModule } from '@angular/material/icon';
import { HttpClientModule } from '@angular/common/http';
import { RemoveFromHistoryComponent } from './components/shared/_dialogs/remove-from-history/remove-from-history.component';
import { MatomoModule } from 'ngx-matomo-v9';
+import { MatDialogModule } from '@angular/material/dialog';
export function dialogClose(dialogResult: any) {
}
@@ -128,7 +129,8 @@ export function initializeApp(appConfig: AppConfig) {
},
isolate: true
}),
- ArsModule
+ ArsModule,
+ MatDialogModule
],
providers: [
/*AppConfig,
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 2b601127399b04c6c845a0d04eb1b8863b67d356..80de200ddd216bd777d7fcbc07b4c3e517defcab 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -7,13 +7,14 @@
(click)="goBack()">
<mat-icon class="header-icons">arrow_back</mat-icon>
</button>
+
<button id="back-button"
- mat-icon-button
- aria-labelledby="back-label"
- *ngIf="router.url !== '/home'"
- (click)="goBack()">
- <mat-icon class="header-icons">show cloud</mat-icon>
- </button>
+ mat-icon-button
+ aria-labelledby="cloud"
+ *ngIf="router.url !== '/home'"
+ (click)="openCloudDialog()">
+<mat-icon class="header-icons">cloud</mat-icon>
+</button>
<span class="fill-remaining-space"></span>
diff --git a/src/app/components/shared/header/header.component.ts b/src/app/components/shared/header/header.component.ts
index f9ecf68ef429f9276e283647b58404c6b1e8cf99..84ff42aab5da6b692c8b7b93b358ae0fa1f43097 100644
--- a/src/app/components/shared/header/header.component.ts
+++ b/src/app/components/shared/header/header.component.ts
@@ -21,6 +21,7 @@ import { QrCodeDialogComponent } from '../_dialogs/qr-code-dialog/qr-code-dialog
import { BonusTokenService } from '../../../services/http/bonus-token.service';
import { MotdService } from '../../../services/http/motd.service';
import { RoomService } from '../../../services/http/room.service';
+import { TopicCloudDialogComponent } from '../topic-cloud-dialog/topic-cloud-dialog.component';
@Component({
selector: 'app-header',
@@ -46,7 +47,8 @@ export class HeaderComponent implements OnInit {
public eventService: EventService,
private bonusTokenService: BonusTokenService,
private _r: Renderer2,
- private motdService: MotdService
+ private motdService: MotdService,
+ public cloudDialog: MatDialog
) {
}
@@ -132,6 +134,14 @@ export class HeaderComponent implements OnInit {
});
}
+ openCloudDialog() {
+ const cloudDialogRef = this.cloudDialog.open(TopicCloudDialogComponent);
+
+ cloudDialogRef.afterClosed().subscribe(result => {
+ console.log(`Dialog result: ${result}`);
+ });
+ }
+
showMotdDialog() {
this.motdService.requestDialog();
}
diff --git a/src/app/components/shared/shared.module.ts b/src/app/components/shared/shared.module.ts
index c05a1067e352b6c19cfe69a2d97649314d1270eb..69af6500a593adb516fd02dda3f5e11117ff81a4 100644
--- a/src/app/components/shared/shared.module.ts
+++ b/src/app/components/shared/shared.module.ts
@@ -28,6 +28,7 @@ import { MatRippleModule } from '@angular/material/core';
import { QRCodeModule } from 'angularx-qrcode';
import { MotdDialogComponent } from './_dialogs/motd-dialog/motd-dialog.component';
import { MotdMessageComponent } from './_dialogs/motd-dialog/motd-message/motd-message.component';
+import { TopicCloudDialogComponent } from './topic-cloud-dialog/topic-cloud-dialog.component';
@NgModule({
imports: [
@@ -61,7 +62,8 @@ import { MotdMessageComponent } from './_dialogs/motd-dialog/motd-message/motd-m
RemoveFromHistoryComponent,
CommentAnswerComponent,
MotdDialogComponent,
- MotdMessageComponent
+ MotdMessageComponent,
+ TopicCloudDialogComponent
],
exports: [
RoomJoinComponent,
diff --git a/src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.html b/src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..10f8e32054f480b8c976081ae67e8147038337a4
--- /dev/null
+++ b/src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.html
@@ -0,0 +1,34 @@
+<mat-dialog-content>
+
+ <mat-accordion>
+
+ <mat-expansion-panel hideToggle *ngFor="let keyword of keywords">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ {{keyword.titel}}
+ </mat-panel-title>
+
+ <!--<mat-panel-description>
+ This is a summary of the content
+ </mat-panel-description> -->
+
+ </mat-expansion-panel-header>
+
+ <div *ngFor="let question of keyword.questions">
+ <p>{{question}}</p>
+ </div>
+
+ <button mat-icon-button style="align-self:flex-end;"
+ (click)="deleteKeyWord(keyword.keywordID)">
+ <mat-icon>delete</mat-icon>
+ </button>
+
+ <button mat-icon-button style="align-self:flex-end;"
+ (click)="editKeyWord(keyword.keywordID)">
+ <mat-icon>edit</mat-icon>
+ </button>
+ </mat-expansion-panel>
+ </mat-accordion>
+
+
+</mat-dialog-content>
diff --git a/src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.scss b/src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.spec.ts b/src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5d672737cd4ac156ab307b69f65a881708085c21
--- /dev/null
+++ b/src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TopicCloudDialogComponent } from './topic-cloud-dialog.component';
+
+describe('TopicCloudDialogComponent', () => {
+ let component: TopicCloudDialogComponent;
+ let fixture: ComponentFixture<TopicCloudDialogComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ TopicCloudDialogComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TopicCloudDialogComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.ts b/src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a21af27e13cb851e6576a3cdef31a950b5193f8b
--- /dev/null
+++ b/src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.ts
@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-topic-cloud-dialog',
+ templateUrl: './topic-cloud-dialog.component.html',
+ styleUrls: ['./topic-cloud-dialog.component.scss']
+})
+export class TopicCloudDialogComponent implements OnInit {
+
+ public panelOpenState: boolean;
+
+ keywords = [
+ {
+ keywordID: '0',
+ titel: 'Frage',
+ questions: ['what is your question', 'where are u from']
+ },
+ {
+ keywordID: '1',
+ titel: 'Klausur',
+ questions: ['hast du gelernt', 'ein test']
+ },
+ {
+ keywordID: '2',
+ titel: 'Hobby',
+ questions: ['was ist dein Hobby', 'was ist dein Plan']
+ }
+ ]
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+ editKeyWord(id: number): void{
+ console.log("keyword with ID "+id+" has been edited");
+ }
+
+ deleteKeyWord(id: number): void{
+ console.log("keyword with ID "+id+" has been deleted");
+ }
+}