Feature/designsystem test

Dockerfile

@@ -14,7 +14,7 @@ RUN apk update
 RUN apk upgrade
 RUN apk add bash
 
-### Configuration of NGINX
+### ConfigurationInterface of NGINX
 COPY docker/nginx.conf /etc/nginx/nginx.template.conf
 
 EXPOSE 80

docker/env.template.js

@@ -20,7 +20,10 @@
     "REPORTER_DEFAULT_TEMPLATE_ID": "${REPORTER_DEFAULT_TEMPLATE_ID}",
     "EXPORTER_DEFAULT_TEMPLATE_ID": "${EXPORTER_DEFAULT_TEMPLATE_ID}",
     "TEILER_USER": "${TEILER_USER}",
-    "TEILER_ADMIN": "${TEILER_ADMIN}"
+    "TEILER_ADMIN": "${TEILER_ADMIN}",
+    "BACKGROUND_IMAGE_URL": "${BACKGROUND_IMAGE_URL}",
+    "LOGO_URL":  "${LOGO_URL}",
+    "COLOR_PALETTE": "${COLOR_PALETTE}",
   };
 
 })(this);

src/app/app.component.css

@@ -16,6 +16,7 @@
   --color-green: #06D6A0;
 }
 
+
 h1,
 h2,
 h3,
@@ -34,6 +35,8 @@ h6 {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  color: var(--text-color);
+  font-family: var(--font-style);
 }
 /* header */
 
@@ -52,7 +55,6 @@ h6 {
 }
 
 .toolbar * {
-  color: black;
   text-decoration: none;
 }
 
@@ -98,6 +100,17 @@ h6 {
 .login-link span {
   color: rgb(0, 102, 204);
 }
+.b-img{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 100%;
+  z-index: 0;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
 @media screen and (min-width: 768px) {
   .toolbar {
     grid-template-columns: auto 1fr auto;

src/app/app.component.html

@@ -2,7 +2,7 @@
   <div class="toolbar">
     <div class="logo">
       <a routerLink="{{'/' + routeManagerService.mainRouterLink}}">
-        <img width="40" alt="DKTK Teiler" src="https://dktk.dkfz.de/packages/dktk/img/logo-dktk-sign.svg" />
+        <img width="40" src="{{environment.config.LOGO_URL}}" alt="DKTK Teiler">
       </a>
       <span class="logo-text" i18n>Brückenkopf</span>
     </div>
@@ -26,16 +26,9 @@
       <div>
         <language-selector></language-selector>
       </div>
-      <!--<div>
-        <select [(ngModel)]="selectedColor" (change)="changeColor()" class="color-change">
-          <option value="lightgrey">Default</option>
-          <option value="lilac">Projektname</option>
-          <option value="blue">Blue</option>
-          <option value="brown">Brown</option>
-        </select>
-      </div>-->
     </div>
   </div>
+  <img  src="{{environment.config.BACKGROUND_IMAGE_URL}}" alt="DKTK Teiler" class="b-img">
   <app-sidebar></app-sidebar>
   <div class="footer">
     <a class="user-agreement" href="">Nutzervereinbarung</a>
@@ -48,3 +41,4 @@
     </div>
   </div>
 </div>
+

src/app/app.component.ts

@@ -2,31 +2,62 @@ import {Component, OnInit} from '@angular/core';
 import {RouteManagerService} from "./route/route-manager.service";
 import {TeilerAuthService} from "./security/teiler-auth.service";
 import {from, Observable} from "rxjs";
-import { ColorSchemeService } from './color-scheme.service';
+import {environment} from "../environments/environment";
+import {ColorPaletteService} from "./color-palette.service";
 
 
 @Component({
   selector: 'teiler-dashboard',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  selectedColor: string = 'lightgrey';
+export class AppComponent implements OnInit{
 
   title = 'teiler-dashboard';
   isLoggedIn: boolean = false;
   user: string = '';
 
 
-  constructor(public routeManagerService: RouteManagerService, public authService: TeilerAuthService,private colorSchemeService: ColorSchemeService) {
+  constructor(public routeManagerService: RouteManagerService, public authService: TeilerAuthService, private colorPaletteService: ColorPaletteService) {
     from(authService.isLoggedId()).subscribe(isLoggedIn => {
       this.isLoggedIn = isLoggedIn;
-      if (isLoggedIn){
-        from(authService.loadUserProfile()).subscribe(keycloakProfile => this.user = keycloakProfile.firstName + ' '+ keycloakProfile.lastName);
+      if (isLoggedIn) {
+        from(authService.loadUserProfile()).subscribe(keycloakProfile => this.user = keycloakProfile.firstName + ' ' + keycloakProfile.lastName);
       }
     });
   }
-  changeColor() {
-    this.colorSchemeService.setColor(this.selectedColor);
+
+  ngOnInit(): void {
+    this.colorPaletteService.getPalettesLoadedStatus().subscribe(loaded => {
+      if (loaded) {
+        const selectedPaletteName = this.colorPaletteService.getSelectedPaletteName();
+        if (selectedPaletteName) {
+          this.setCSSVariables();
+        } else {
+          console.error('Keine Farbpalette ausgewählt.');
+        }
+      } else {
+        console.error('Farbpaletten wurden nicht geladen.');
+      }
+    });
+  }
+
+  private setCSSVariables() {
+
+    const iconColor = this.colorPaletteService.getIconColor();
+    const textColor = this.colorPaletteService.getTextColor();
+    const lineColor = this.colorPaletteService.getLineColor();
+    const fontStyle = this.colorPaletteService.getFontStyle() + ', sans-serif';
+
+    this.setCSSVariable('--icon-color', iconColor);
+    this.setCSSVariable('--text-color', textColor);
+    this.setCSSVariable('--line-color', lineColor);
+    this.setCSSVariable('--font-style', fontStyle);
   }
+
+  private setCSSVariable(variableName: string, value: string) {
+    document.documentElement.style.setProperty(variableName, value);
+  }
+
+  protected readonly environment = environment;
 }

src/app/color-palette.model.ts

@@ -0,0 +1,15 @@
+export interface ColorPalette {
+  name: string;
+  colors: {
+    icon: string;
+    text: string;
+    line: string;
+  };
+  style: {
+    font: string;
+  };
+}
+
+export interface ColorPalettes {
+  'color-palettes': ColorPalette[];
+}

src/app/color-palette.service.spec.ts

@@ -0,0 +1,91 @@
+import { TestBed } from '@angular/core/testing';
+import { ColorPaletteService } from './color-palette.service';
+import { ColorPalette, ColorPalettes } from './color-palette.model';
+import * as data from '../assets/color-palettes.json';
+import { environment } from '../environments/environment';
+
+describe('ColorPaletteService', () => {
+  let service: ColorPaletteService;
+  const mockPalettes: ColorPalettes = (data as any).default;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ColorPaletteService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should load color palettes on initialization', () => {
+    spyOn(console, 'log');
+    service = new ColorPaletteService();
+    expect(console.log).toHaveBeenCalledWith('loadColorPalettes method called');
+    expect(service['colorPalettes']).toEqual(jasmine.objectContaining(mockPalettes['color-palettes'].reduce((acc: { [key: string]: ColorPalette }, palette: ColorPalette) => {
+      acc[palette.name] = palette;
+      return acc;
+    }, {})));
+    expect(console.log).toHaveBeenCalledWith('Color palettes loaded successfully:', service['colorPalettes']);
+  });
+
+  it('should set palettesLoaded$ to true after loading palettes', () => {
+    service = new ColorPaletteService();
+    expect(service.getPalettesLoadedStatus().getValue()).toBe(true);
+  });
+
+  it('should select palette specified in environment configuration', () => {
+    service = new ColorPaletteService();
+    const paletteName = environment.config.COLOR_PALETTE;
+    expect(service.getSelectedPaletteName()).toBe(paletteName);
+  });
+
+  it('should return font style of selected palette', () => {
+    const mockPalette: ColorPalette = mockPalettes['color-palettes'][0];
+    service.selectPalette(mockPalette.name);
+    expect(service.getFontStyle()).toBe(mockPalette.style.font);
+  });
+
+  it('should return default color if no palette is selected when getting font style', () => {
+    expect(service.getFontStyle()).toBe('defaultColor');
+  });
+
+  it('should return background color of selected palette', () => {
+    const mockPalette: ColorPalette = mockPalettes['color-palettes'][0];
+    service.selectPalette(mockPalette.name);
+    expect(service.getBackgroundColor()).toBe(mockPalette.colors.background);
+  });
+
+  it('should return default color if no palette is selected when getting background color', () => {
+    expect(service.getBackgroundColor()).toBe('defaultColor');
+  });
+
+  it('should return text color of selected palette', () => {
+    const mockPalette: ColorPalette = mockPalettes['color-palettes'][0];
+    service.selectPalette(mockPalette.name);
+    expect(service.getTextColor()).toBe(mockPalette.colors.text);
+  });
+
+  it('should return default color if no palette is selected when getting text color', () => {
+    expect(service.getTextColor()).toBe('defaultColor');
+  });
+
+  it('should return line color of selected palette', () => {
+    const mockPalette: ColorPalette = mockPalettes['color-palettes'][0];
+    service.selectPalette(mockPalette.name);
+    expect(service.getLineColor()).toBe(mockPalette.colors.line);
+  });
+
+  it('should return default color if no palette is selected when getting line color', () => {
+    expect(service.getLineColor()).toBe('defaultColor');
+  });
+
+  it('should return icon color of selected palette', () => {
+    const mockPalette: ColorPalette = mockPalettes['color-palettes'][0];
+    service.selectPalette(mockPalette.name);
+    expect(service.getIconColor()).toBe(mockPalette.colors.icon);
+  });
+
+  it('should return default color if no palette is selected when getting icon color', () => {
+    expect(service.getIconColor()).toBe('defaultColor');
+  });
+});

src/app/color-palette.service.ts

@@ -0,0 +1,112 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { environment } from '../environments/environment';
+import { ColorPalettes, ColorPalette } from './color-palette.model';
+import * as localData from '../assets/color-palettes.json';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ColorPaletteService {
+
+  private colorPalettes: { [key: string]: ColorPalette } = {};
+  private selectedPalette: ColorPalette | null = null;
+  private palettesLoaded$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  constructor(private http: HttpClient) {
+    this.loadColorPalettes();
+  }
+
+  private loadColorPalettes(): void {
+    const paletteConfig = environment.config.COLOR_PALETTE;
+
+    if (this.isUrl(paletteConfig)) {
+      // Farbpaletten vom Server laden
+      this.http.get<ColorPalettes>(paletteConfig).subscribe(
+        palettes => {
+          this.processColorPalettes(palettes);
+          // Der Name der Farbpalette ist im URL-Parameter enthalten
+          const url = new URL(paletteConfig);
+          const paletteName = url.hash.substring(1);
+          this.selectPalette(paletteName);
+        },
+        error => {
+          console.error('Fehler beim Laden der Farbpaletten vom Server', error);
+          this.palettesLoaded$.next(false);
+        }
+      );
+    } else {
+      // Lokale Farbpaletten laden
+      this.loadLocalColorPalettes(paletteConfig);
+    }
+  }
+
+  private isUrl(paletteConfig: string): boolean {
+    try {
+      new URL(paletteConfig);
+      return true;
+    } catch (_) {
+      return false;
+    }
+  }
+
+  private loadLocalColorPalettes(paletteName: string): void {
+    console.log('loadLocalColorPalettes method called'); // Vor dem Laden der Farbpaletten
+    const palettes: ColorPalettes = (localData as any).default;
+    this.processColorPalettes(palettes);
+    this.selectPalette(paletteName);
+  }
+
+  private processColorPalettes(palettes: ColorPalettes): void {
+    palettes['color-palettes'].forEach(palette => {
+      this.colorPalettes[palette.name] = palette;
+    });
+    console.log('Color palettes loaded successfully:', this.colorPalettes); // Nach dem Laden der Farbpaletten
+    this.palettesLoaded$.next(true);
+  }
+
+  selectPalette(paletteName: string) {
+    this.selectedPalette = this.colorPalettes[paletteName];
+  }
+
+  getPalettesLoadedStatus(): BehaviorSubject<boolean> {
+    return this.palettesLoaded$;
+  }
+
+  getSelectedPaletteName(): string | null {
+    return this.selectedPalette ? this.selectedPalette.name : null;
+  }
+
+  getFontStyle(): string {
+    if (!this.selectedPalette) {
+      console.error('No palette selected.');
+      return 'defaultColor';
+    }
+    return this.selectedPalette.style.font;
+  }
+
+  getTextColor(): string {
+    if (!this.selectedPalette) {
+      console.error('No palette selected.');
+      return 'defaultColor';
+    }
+    return this.selectedPalette.colors.text;
+  }
+
+  getLineColor(): string {
+    if (!this.selectedPalette) {
+      console.error('No palette selected.');
+      return 'defaultColor';
+    }
+    return this.selectedPalette.colors.line;
+  }
+
+  getIconColor(): string {
+    if (!this.selectedPalette) {
+      console.error('No palette selected.');
+      return 'defaultColor';
+    }
+    return this.selectedPalette.colors.icon;
+  }
+}