From 7716c959ed02f970c37d16dc1f5fe2d7e5dde2f0 Mon Sep 17 00:00:00 2001
From: mechtelm <nicht@mehr.fragen>
Date: Mon, 31 May 2021 19:05:59 +0200
Subject: [PATCH] Add color setting in super user
Background for body and secondary boxes
---
.../admin-starter/admin-starter.component.ts | 2 +-
.../code-input/code-input.component.ts | 2 +-
src/app/app-root/login/login.component.ts | 3 +-
.../test-starter/test-starter.component.css | 2 +-
src/app/config/app.config.ts | 25 ++++++-------
src/app/superadmin/backend.service.ts | 2 +-
.../settings/app-config.component.html | 9 ++++-
.../settings/app-config.component.ts | 36 +++++++++++++------
.../test-status/test-status.component.css | 2 +-
.../unit-menu/unit-menu.component.css | 2 +-
10 files changed, 53 insertions(+), 32 deletions(-)
diff --git a/src/app/app-root/admin-starter/admin-starter.component.ts b/src/app/app-root/admin-starter/admin-starter.component.ts
index ce891c06..c5651dbc 100644
--- a/src/app/app-root/admin-starter/admin-starter.component.ts
+++ b/src/app/app-root/admin-starter/admin-starter.component.ts
@@ -10,7 +10,7 @@ import { MainDataService } from '../../maindata.service';
templateUrl: './admin-starter.component.html',
styles: [
'mat-card {margin: 10px;}',
- '.mat-card-gray {background-color: lightgray}'
+ '.mat-card-gray {background-color: var(--tc-box-background)}'
]
})
diff --git a/src/app/app-root/code-input/code-input.component.ts b/src/app/app-root/code-input/code-input.component.ts
index 60b37bf7..747ed0a6 100644
--- a/src/app/app-root/code-input/code-input.component.ts
+++ b/src/app/app-root/code-input/code-input.component.ts
@@ -13,7 +13,7 @@ import { BackendService } from '../../backend.service';
templateUrl: './code-input.component.html',
styles: [
'mat-card {margin: 10px;}',
- '.mat-card-gray {background-color: lightgray}'
+ '.mat-card-gray {background-color: var(--tc-box-background)}'
]
})
export class CodeInputComponent implements OnInit {
diff --git a/src/app/app-root/login/login.component.ts b/src/app/app-root/login/login.component.ts
index e9377fb1..a2f133f3 100644
--- a/src/app/app-root/login/login.component.ts
+++ b/src/app/app-root/login/login.component.ts
@@ -11,8 +11,7 @@ import { BackendService } from '../../backend.service';
styles: [
'mat-card {margin: 10px;}',
'.mat-card-gray {background: var(--tc-box-background)}',
- '#toggle-show-password {cursor: pointer}',
- '.mat-card-header {background-color: salmon; padding: 4px;}'
+ '#toggle-show-password {cursor: pointer}'
]
})
diff --git a/src/app/app-root/test-starter/test-starter.component.css b/src/app/app-root/test-starter/test-starter.component.css
index 3b5ec57a..3563ebfa 100644
--- a/src/app/app-root/test-starter/test-starter.component.css
+++ b/src/app/app-root/test-starter/test-starter.component.css
@@ -20,5 +20,5 @@ mat-card {
}
.mat-card-gray {
- background-color: lightgray
+ background-color: var(--tc-box-background)
}
diff --git a/src/app/config/app.config.ts b/src/app/config/app.config.ts
index 429914b9..e1496347 100644
--- a/src/app/config/app.config.ts
+++ b/src/app/config/app.config.ts
@@ -96,42 +96,43 @@ export class AppConfig {
this.impressum_html = 'Impressum/Datenschutz nicht definiert';
}
this.mainLogo = 'assets/IQB-LogoA.png';
- this.background_body = '';
- this.background_box = '';
+ const elementStyle = window.getComputedStyle(document.body);
+ this.background_body = elementStyle.getPropertyValue('--tc-body-background');
+ this.background_box = elementStyle.getPropertyValue('--tc-box-background');
this.trusted_intro_html = null;
this.trusted_impressum_html = null;
this.global_warning = '';
this.global_warning_expired_day = '';
this.global_warning_expired_hour = '';
if (appConfig) {
- Object.keys(appConfig).forEach(k => {
+ appConfig.forEach((v, k) => {
switch (k) {
case 'app_title':
- this.app_title = appConfig[k];
+ this.app_title = v;
break;
case 'mainLogo':
- this.mainLogo = appConfig[k];
+ this.mainLogo = v;
break;
case 'background_body':
- this.background_body = appConfig[k];
+ this.background_body = v;
break;
case 'background_box':
- this.background_box = appConfig[k];
+ this.background_box = v;
break;
case 'intro_html':
- this.intro_html = appConfig[k];
+ this.intro_html = v;
break;
case 'impressum_html':
- this.impressum_html = appConfig[k];
+ this.impressum_html = v;
break;
case 'global_warning':
- this.global_warning = appConfig[k];
+ this.global_warning = v;
break;
case 'global_warning_expired_day':
- this.global_warning_expired_day = appConfig[k];
+ this.global_warning_expired_day = v;
break;
case 'global_warning_expired_hour':
- this.global_warning_expired_hour = appConfig[k];
+ this.global_warning_expired_hour = v;
break;
default:
console.warn(`unknown key in appConfig "${k}"`);
diff --git a/src/app/superadmin/backend.service.ts b/src/app/superadmin/backend.service.ts
index 7fba22e3..c55927b8 100644
--- a/src/app/superadmin/backend.service.ts
+++ b/src/app/superadmin/backend.service.ts
@@ -133,7 +133,7 @@ export class BackendService {
setAppConfig(newConfig: Map<string, string>): Observable<boolean> {
return this.http
- .patch<boolean>(`${this.serverUrl}system/config/app`, { newConfig })
+ .patch<boolean>(`${this.serverUrl}system/config/app`, newConfig)
.pipe(catchError((err: ApiError) => {
console.warn(`setAppConfig Api-Error: ${err.code} ${err.info}`);
return of(false);
diff --git a/src/app/superadmin/settings/app-config.component.html b/src/app/superadmin/settings/app-config.component.html
index 88b455d1..d53c7758 100644
--- a/src/app/superadmin/settings/app-config.component.html
+++ b/src/app/superadmin/settings/app-config.component.html
@@ -39,10 +39,17 @@
cdkTextareaAutosize
cdkAutosizeMinRows="6"></textarea>
</mat-form-field>
+ <mat-form-field fxLayout="column">
+ <mat-label>Hintergrundfarbe Anwendung</mat-label>
+ <input matInput formControlName="backgroundBody" placeholder="Farbe">
+ </mat-form-field>
+ <mat-form-field fxLayout="column">
+ <mat-label>Hintergrundfarbe sekundäre Boxen</mat-label>
+ <input matInput formControlName="backgroundBox" placeholder="Farbe">
+ </mat-form-field>
<div fxLayout="row" fxLayoutGap="30px" fxLayoutAlign="start start">
<button mat-raised-button color="primary" [disabled]="!dataChanged" (click)="saveData()">
Speichern
</button>
- <div *ngIf="dataChanged" fxFlex>Nach dem Speichern bitte die Seite neu laden, damit die Änderungen wirksam werden!</div>
</div>
</form>
diff --git a/src/app/superadmin/settings/app-config.component.ts b/src/app/superadmin/settings/app-config.component.ts
index 41b216bb..1c151b85 100644
--- a/src/app/superadmin/settings/app-config.component.ts
+++ b/src/app/superadmin/settings/app-config.component.ts
@@ -53,19 +53,32 @@ export class AppConfigComponent implements OnInit, OnDestroy {
private snackBar: MatSnackBar,
private mds: MainDataService,
private bs: BackendService
- ) { }
+ ) {
+ this.configForm = this.fb.group({
+ appTitle: this.fb.control(''),
+ introHtml: this.fb.control(''),
+ impressumHtml: this.fb.control(''),
+ globalWarningText: this.fb.control(''),
+ globalWarningExpiredDay: this.fb.control(''),
+ globalWarningExpiredHour: this.fb.control(''),
+ backgroundBody: this.fb.control(''),
+ backgroundBox: this.fb.control('')
+ });
+ }
ngOnInit(): void {
setTimeout(() => {
const appConfig = this.mds.appConfig.getAppConfig();
- this.configForm = this.fb.group({
- appTitle: this.fb.control(appConfig.get('app_title')),
- introHtml: this.fb.control(appConfig.get('intro_html')),
- impressumHtml: this.fb.control(appConfig.get('impressum_html')),
- globalWarningText: this.fb.control(appConfig.get('global_warning')),
- globalWarningExpiredDay: this.fb.control(appConfig.get('global_warning_expired_day')),
- globalWarningExpiredHour: this.fb.control(appConfig.get('global_warning_expired_hour'))
- });
+ this.configForm.setValue({
+ appTitle: appConfig.get('app_title'),
+ introHtml: appConfig.get('intro_html'),
+ impressumHtml: appConfig.get('impressum_html'),
+ globalWarningText: appConfig.get('global_warning'),
+ globalWarningExpiredDay: appConfig.get('global_warning_expired_day'),
+ globalWarningExpiredHour: appConfig.get('global_warning_expired_hour'),
+ backgroundBody: appConfig.get('background_body'),
+ backgroundBox: appConfig.get('background_box')
+ }, { emitEvent: false });
this.warningIsExpired = AppConfig.isWarningExpired(
appConfig.get('global_warning_expired_day'),
appConfig.get('global_warning_expired_hour')
@@ -91,9 +104,9 @@ export class AppConfigComponent implements OnInit, OnDestroy {
appConfig.set('global_warning', this.configForm.get('globalWarningText').value);
appConfig.set('global_warning_expired_day', this.configForm.get('globalWarningExpiredDay').value);
appConfig.set('global_warning_expired_hour', this.configForm.get('globalWarningExpiredHour').value);
+ appConfig.set('background_body', this.configForm.get('backgroundBody').value);
+ appConfig.set('background_box', this.configForm.get('backgroundBox').value);
- this.mds.appConfig.setAppConfig(appConfig);
- this.mds.appConfig.applyBackgroundColors();
this.bs.setAppConfig(appConfig).subscribe(isOk => {
if (isOk) {
this.snackBar.open(
@@ -102,6 +115,7 @@ export class AppConfigComponent implements OnInit, OnDestroy {
this.dataChanged = false;
this.mds.appConfig.setAppConfig(appConfig);
this.mds.appConfig.applyBackgroundColors();
+ this.mds.appTitle$.next(this.configForm.get('appTitle').value);
} else {
this.snackBar.open('Konnte Konfigurationsdaten der Anwendung nicht speichern', 'Fehler', { duration: 3000 });
}
diff --git a/src/app/test-controller/test-status/test-status.component.css b/src/app/test-controller/test-status/test-status.component.css
index c4a96601..4cfb6aa9 100644
--- a/src/app/test-controller/test-status/test-status.component.css
+++ b/src/app/test-controller/test-status/test-status.component.css
@@ -8,7 +8,7 @@ mat-card {
}
.mat-card-gray {
- background-color: lightgray
+ background-color: var(--tc-box-background)
}
.active-unit {
diff --git a/src/app/test-controller/unit-menu/unit-menu.component.css b/src/app/test-controller/unit-menu/unit-menu.component.css
index ae2a7132..d8abef87 100644
--- a/src/app/test-controller/unit-menu/unit-menu.component.css
+++ b/src/app/test-controller/unit-menu/unit-menu.component.css
@@ -8,7 +8,7 @@ mat-card {
}
.mat-card-gray {
- background-color: lightgray
+ background-color: var(--tc-box-background)
}
.active-unit {
--
GitLab