Merge pull request #143 from SE-TINF22B2/johanna

FE-#103: Benutzereinstellungen im Frontend

backend/src/main/java/com/dhbw/get2gether/backend/user/model/ColorMode.java

@@ -3,7 +3,9 @@
 public enum ColorMode {
     LIGHT,
     DARK,
-    MODERN
-
-
+    WATER,
+    GRASSLAND,
+    SUNSET,
+    DEVELOPER,
+    AUTUMN
 }

frontend/src/app/app.module.ts

@@ -43,15 +43,17 @@ import {EventpageComponent} from "./eventpage/eventpage.component";
 import {MatRippleModule} from "@angular/material/core";
 import {EventSearchComponent} from './dashboard/side-menu/event-search/event-search.component';
 import {FormsModule} from "@angular/forms";
+import {UserSettingsComponent} from './dashboard/user-settings/user-settings.component';
+import {UserSettingsItemComponent} from './dashboard/user-settings/user-settings-item/user-settings-item.component';
 import {EventBannerComponent} from './eventpage/event-banner/event-banner.component';
 import {EventDescriptionComponent} from './eventpage/event-description/event-description.component';
 import {WidgetsSectionComponent} from './eventpage/widgets-section/widgets-section.component';
 import {WidgetContainerComponent} from './eventpage/widgets-section/widget-container/widget-container.component';
 import {ScrollingModule} from "@angular/cdk/scrolling";
 import {WidgetsBarComponent} from './eventpage/widgets-section/widgets-bar/widgets-bar.component';
 import {MatTabsModule} from "@angular/material/tabs";
-import { ParticipantsSidenavComponent } from './eventpage/participants-sidenav/participants-sidenav.component';
-import { ParticipantCardComponent } from './eventpage/participants-sidenav/participant-card/participant-card.component';
+import {ParticipantsSidenavComponent} from './eventpage/participants-sidenav/participants-sidenav.component';
+import {ParticipantCardComponent} from './eventpage/participants-sidenav/participant-card/participant-card.component';
 
 registerLocaleData(localeDe);
 
@@ -91,6 +93,8 @@ function loadMapApi(httpClient: HttpClient) {
     EventListItemComponent,
     EventCreationComponent,
     EventSearchComponent,
+    UserSettingsComponent,
+    UserSettingsItemComponent,
     EventDescriptionComponent,
     EventBannerComponent,
     WidgetsSectionComponent,

frontend/src/app/dashboard/side-menu/event-list/event-list-item/event-list-item.component.html

@@ -4,6 +4,7 @@
     [routerLink]="'./' + event.id"
     routerLinkActive="selected"
     class="event-card"
+    tabindex="0"
   >
     <div class="ripple-container" mat-ripple [matRippleTrigger]="wrapper"></div>
     <mat-card-header>

frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html

@@ -7,6 +7,7 @@
       width="30"
       height="30"
       [ngSrc]="user.profilePictureUrl"
+      referrerpolicy="no-referrer"
       alt="Profilbild">
 
     <mat-menu #menu="matMenu">
@@ -16,7 +17,7 @@
           Anmelden
         </button>
       } @else {
-        <button mat-menu-item>
+        <button mat-menu-item (click)="openUserSettings()">
           <mat-icon>settings</mat-icon>
           Einstellungen
         </button>
@@ -33,7 +34,7 @@
     color="accent"
     matTooltip="Event erstellen"
     class="event-add-button"
-    (click)="openDialog()"
+    (click)="openCreateEventDialog()"
     [disabled]="user.guest"
   >
     <mat-icon>add</mat-icon>

frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.ts

@@ -3,6 +3,7 @@ import {UserService} from "../../../../services/user.service";
 import {User} from "../../../../model/user";
 import {MatDialog} from "@angular/material/dialog";
 import {EventCreationComponent} from "../../../eventcreation/event-creation.component";
+import {UserSettingsComponent} from "../../user-settings/user-settings.component";
 
 @Component({
   selector: 'app-profile-menu',
@@ -22,7 +23,13 @@ export class ProfileMenuComponent {
     return [user.firstName, user.lastName].filter(x => x).join(" ");
   }
 
-  openDialog() {
+  openCreateEventDialog() {
     this.dialog.open(EventCreationComponent);
   }
+
+  openUserSettings(){
+    this.dialog.open(UserSettingsComponent, {
+      width: "600px"
+    });
+  }
 }

frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.html

@@ -0,0 +1,19 @@
+<div class="wrapper" #wrapper>
+  <mat-card
+    appearance="outlined"
+    (click)="onSelect.emit()"
+    (keyup.enter)="onSelect.emit()"
+    [class.selected]="isSelected"
+    tabindex="0"
+    class="settings-card"
+  >
+    <div class="ripple-container" mat-ripple [matRippleTrigger]="wrapper"></div>
+
+    <mat-card-content>
+      <div class="cardcontent-container">
+        <div class="colorcard" [style.background-color]="'var(--' + colorMode.toLowerCase() + '-primary-preview)'"></div>
+        {{ colorMode | titlecase }}
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>

frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.scss

@@ -0,0 +1,45 @@
+.settings-card {
+  cursor: pointer;
+  overflow: hidden;
+  --mdc-outlined-card-outline-color: transparent;
+
+  &.selected {
+    --mdc-outlined-card-outline-color: var(--primary-color);
+  }
+
+  & > * {
+    z-index: 1;
+  }
+}
+
+.ripple-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+mat-card-content {
+  padding: 8px !important;
+}
+
+.cardcontent-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--size-12);
+  align-items: center;
+  font-weight: var(--font-weight-subtitle);
+
+  .colorcard {
+    position: relative;
+    aspect-ratio: 1 / 1;
+    height: 50px;
+    padding: 0;
+    margin: 0;
+    border-radius: 12px;
+  }
+}
+

frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserSettingsItemComponent } from './user-settings-item.component';
+
+describe('UserSettingsItemComponent', () => {
+  let component: UserSettingsItemComponent;
+  let fixture: ComponentFixture<UserSettingsItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UserSettingsItemComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UserSettingsItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/dashboard/user-settings/user-settings-item/user-settings-item.component.ts

@@ -0,0 +1,20 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {ColorMode} from "../../../../model/user";
+
+@Component({
+  selector: 'app-user-settings-item',
+  templateUrl: './user-settings-item.component.html',
+  styleUrl: './user-settings-item.component.scss'
+})
+export class UserSettingsItemComponent {
+
+  @Input()
+  colorMode!: ColorMode;
+
+  @Input()
+  isSelected = false;
+
+  @Output()
+  onSelect = new EventEmitter();
+
+}

frontend/src/app/dashboard/user-settings/user-settings.component.html

@@ -0,0 +1,42 @@
+<h2 mat-dialog-title class="prim-color">
+  Einstellungen
+  <button mat-icon-button class="close-button" matDialogClose tabindex="-1">
+    <mat-icon>close</mat-icon>
+  </button>
+</h2>
+<mat-dialog-content>
+  <p>Wähle ein Farbschema aus</p>
+
+  @if (userService.user | async; as user) {
+    <h4 class="section-title">Day Theme</h4>
+    <ul class="color-list">
+      @for (color of lightColors; track color) {
+        <li>
+          <app-user-settings-item
+            [colorMode]="color"
+            [isSelected]="user.settings.colorMode === color"
+            (onSelect)="selectColorMode(color)"
+          ></app-user-settings-item>
+        </li>
+      }
+    </ul>
+
+    <h4 class="section-title">Night Theme</h4>
+    <ul class="color-list">
+      @for (color of darkColors; track color) {
+        <li>
+          <app-user-settings-item
+            [colorMode]="color"
+            [isSelected]="user.settings.colorMode === color"
+            (onSelect)="selectColorMode(color)"
+          ></app-user-settings-item>
+        </li>
+      }
+    </ul>
+  } @else {
+    <div class="loading-container">
+      <mat-spinner></mat-spinner>
+      <p>Profil wird geladen...</p>
+    </div>
+  }
+</mat-dialog-content>

frontend/src/app/dashboard/user-settings/user-settings.component.scss

@@ -0,0 +1,38 @@
+.close-button {
+  float: right;
+  margin-top: 8px;
+}
+
+.container {
+  overflow-y: auto;
+  height: 100%;
+}
+.color-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+
+  li:not(:last-child) {
+    margin-bottom: 2px;
+  }
+}
+
+.prim-color {
+  color: var(--primary-color);
+}
+
+.section-title {
+  color: var(--secondary-color);
+  margin-top: var(--size-24);
+}
+
+.loading-container {
+  text-align: center;
+  padding: var(--size-12);
+
+  mat-spinner {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}

frontend/src/app/dashboard/user-settings/user-settings.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserSettingsComponent } from './user-settings.component';
+
+describe('UserSettingsComponent', () => {
+  let component: UserSettingsComponent;
+  let fixture: ComponentFixture<UserSettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UserSettingsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UserSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/dashboard/user-settings/user-settings.component.ts

@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+import {UserService} from "../../../services/user.service";
+import {ColorMode} from "../../../model/user";
+
+@Component({
+  selector: 'app-user-settings',
+  templateUrl: './user-settings.component.html',
+  styleUrl: './user-settings.component.scss'
+})
+export class UserSettingsComponent {
+  lightColors = [ColorMode.LIGHT, ColorMode.WATER, ColorMode.SUNSET, ColorMode.GRASSLAND];
+  darkColors = [ColorMode.DARK, ColorMode.DEVELOPER, ColorMode.AUTUMN];
+
+  isLoading = false;
+
+  constructor(public userService: UserService) {
+  }
+
+  selectColorMode(colorMode: ColorMode) {
+    this.isLoading = true;
+    this.userService.applyThemeAttribute(colorMode);
+    this.userService.updateTheme(colorMode).subscribe(() => {
+      this.isLoading = false;
+    });
+  }
+}

frontend/src/model/user.ts

@@ -1,11 +1,12 @@
 export type User = {
-  id: string
-  creationDate: string
-  email: string
-  firstName: string
-  lastName: string
-  profilePictureUrl: string
-  guest: true | undefined
+  id: string;
+  creationDate: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  profilePictureUrl: string;
+  settings: UserSettings;
+  guest: true | undefined;
 }
 
 export type SimpleUser = {
@@ -14,3 +15,17 @@ export type SimpleUser = {
   lastName: string;
   profilePictureUrl: string;
 }
+
+export type UserSettings = {
+  colorMode: ColorMode;
+}
+
+export enum ColorMode {
+  LIGHT = "LIGHT",
+  DARK = "DARK",
+  WATER = "WATER",
+  GRASSLAND = "GRASSLAND",
+  SUNSET = "SUNSET",
+  DEVELOPER = "DEVELOPER",
+  AUTUMN = "AUTUMN"
+}