From d3773bc8e8de93b014c288ca945e4fcc1bae7e12 Mon Sep 17 00:00:00 2001
From: FinnStutzenstein <finn.stutzenstein@hotmail.de>
Date: Fri, 1 Mar 2019 09:40:22 +0100
Subject: [PATCH] set the clock color to the header color of the projector

---
 .../projector/projector.component.html        |  2 +-
 .../slide-container.component.ts              | 35 ++++++++++++++++---
 client/src/app/slides/base-slide-component.ts |  7 ++++
 .../core/clock/clock-slide.component.html     |  2 +-
 4 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/client/src/app/shared/components/projector/projector.component.html b/client/src/app/shared/components/projector/projector.component.html
index 9bb8810c4..947a894ed 100644
--- a/client/src/app/shared/components/projector/projector.component.html
+++ b/client/src/app/shared/components/projector/projector.component.html
@@ -16,7 +16,7 @@
         </div>
 
         <div *ngFor="let slide of slides">
-            <os-slide-container [slideData]="slide" [scroll]="scroll" [scale]="scale" [headerEnabled]="projector.show_header_footer"></os-slide-container>
+            <os-slide-container [slideData]="slide" [scroll]="scroll" [scale]="scale" [projector]="projector"></os-slide-container>
         </div>
 
         <div id="footer" [ngStyle]="headerFooterStyle" *ngIf="projector && projector.show_header_footer">
diff --git a/client/src/app/shared/components/slide-container/slide-container.component.ts b/client/src/app/shared/components/slide-container/slide-container.component.ts
index 371ddadad..276070582 100644
--- a/client/src/app/shared/components/slide-container/slide-container.component.ts
+++ b/client/src/app/shared/components/slide-container/slide-container.component.ts
@@ -7,6 +7,7 @@ import { SlideManager } from 'app/slides/services/slide-manager.service';
 import { BaseSlideComponent } from 'app/slides/base-slide-component';
 import { SlideData } from 'app/site/projector/services/projector-data.service';
 import { ProjectorElement } from 'app/shared/models/core/projector';
+import { ViewProjector } from 'app/site/projector/models/view-projector';
 
 function hasError(obj: object): obj is { error: string } {
     return (<{ error: string }>obj).error !== undefined;
@@ -62,14 +63,23 @@ export class SlideContainerComponent extends BaseComponent {
         this.setDataForComponent();
     }
 
+    public get slideData(): SlideData<object> {
+        return this._slideData;
+    }
+
+    private _projector: ViewProjector;
+
     /**
      * Variable, if the projector header is enabled.
      */
     @Input()
-    public headerEnabled: boolean;
+    public set projector(projector: ViewProjector) {
+        this._projector = projector;
+        this.setProjectorForComponent();
+    }
 
-    public get slideData(): SlideData<object> {
-        return this._slideData;
+    public get projector(): ViewProjector {
+        return this._projector;
     }
 
     /**
@@ -86,6 +96,10 @@ export class SlideContainerComponent extends BaseComponent {
         this.updateScroll();
     }
 
+    public get scroll(): number {
+        return this._scroll;
+    }
+
     /**
      * Update the slideStyle, when the scale changes.
      */
@@ -122,9 +136,9 @@ export class SlideContainerComponent extends BaseComponent {
      */
     private updateScroll(): void {
         if (this.slideOptions.scrollable) {
-            let value = this._scroll;
+            let value = this.scroll;
             value *= -50;
-            if (this.headerEnabled) {
+            if (this.projector.show_header_footer) {
                 value += 50; // Default offset for the header
             }
             this.slideStyle['margin-top'] = `${value}px`;
@@ -154,6 +168,7 @@ export class SlideContainerComponent extends BaseComponent {
             this.slide.clear();
             this.slideRef = this.slide.createComponent(slideFactory);
             this.setDataForComponent();
+            this.setProjectorForComponent();
         });
     }
 
@@ -165,4 +180,14 @@ export class SlideContainerComponent extends BaseComponent {
             this.slideRef.instance.data = this.slideData;
         }
     }
+
+    /**
+     * "injects" the projector into the slide component.
+     */
+    private setProjectorForComponent(): void {
+        if (this.slideRef && this.slideRef.instance) {
+            console.log(this.projector);
+            this.slideRef.instance.projector = this.projector;
+        }
+    }
 }
diff --git a/client/src/app/slides/base-slide-component.ts b/client/src/app/slides/base-slide-component.ts
index 3a5e8d485..15bc149af 100644
--- a/client/src/app/slides/base-slide-component.ts
+++ b/client/src/app/slides/base-slide-component.ts
@@ -1,5 +1,6 @@
 import { Input } from '@angular/core';
 import { SlideData } from 'app/site/projector/services/projector-data.service';
+import { ViewProjector } from 'app/site/projector/models/view-projector';
 
 /**
  * Every slide has to extends this base class. It forces the slides
@@ -12,5 +13,11 @@ export abstract class BaseSlideComponent<T extends object> {
     @Input()
     public data: SlideData<T>;
 
+    /**
+     * The projector where this slide is projected on.
+     */
+    @Input()
+    public projector: ViewProjector;
+
     public constructor() {}
 }
diff --git a/client/src/app/slides/core/clock/clock-slide.component.html b/client/src/app/slides/core/clock/clock-slide.component.html
index b4775c55a..89f677768 100644
--- a/client/src/app/slides/core/clock/clock-slide.component.html
+++ b/client/src/app/slides/core/clock/clock-slide.component.html
@@ -1,4 +1,4 @@
-<div id="clock" *ngIf="time">
+<div id="clock" *ngIf="time && projector" [ngStyle]="{color: projector.header_font_color}">
     <mat-icon>schedule</mat-icon>
     <span>{{ time }}</span>
 </div>