src/app/superadmin/settings/app-config.component.ts
selector | app-app-config |
styleUrls | app-config.component.css |
templateUrl | app-config.component.html |
Properties |
Methods |
constructor(fb: FormBuilder, snackBar: MatSnackBar, mds: MainDataService, bs: BackendService)
|
|||||||||||||||
Parameters :
|
imgFileChange | ||||||
imgFileChange(fileInput: any)
|
||||||
Parameters :
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
removeLogoImg |
removeLogoImg()
|
Returns :
void
|
saveData |
saveData()
|
Returns :
void
|
Private configDataChangedSubscription |
Type : Subscription
|
Default value : null
|
configForm |
Type : FormGroup
|
dataChanged |
Default value : false
|
expiredHours |
Type : object
|
Default value : {
'': '',
'01': '01:00 Uhr',
'02': '02:00 Uhr',
'03': '03:00 Uhr',
'04': '04:00 Uhr',
'05': '05:00 Uhr',
'06': '06:00 Uhr',
'07': '07:00 Uhr',
'08': '08:00 Uhr',
'09': '09:00 Uhr',
10: '10:00 Uhr',
11: '11:00 Uhr',
12: '12:00 Uhr',
13: '13:00 Uhr',
14: '14:00 Uhr',
15: '15:00 Uhr',
16: '16:00 Uhr',
17: '17:00 Uhr',
18: '18:00 Uhr',
19: '19:00 Uhr',
20: '20:00 Uhr',
21: '21:00 Uhr',
22: '22:00 Uhr',
23: '23:00 Uhr'
}
|
imageError |
Type : string
|
logoImageBase64 |
Type : string
|
Default value : ''
|
warningIsExpired |
Default value : false
|
import { Component, OnDestroy, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
import { AppConfig, AppSettings, standardLogo } from '../../config/app.config';
import { MainDataService } from '../../maindata.service';
import { BackendService } from '../backend.service';
@Component({
selector: 'app-app-config',
templateUrl: 'app-config.component.html',
styleUrls: ['app-config.component.css']
})
export class AppConfigComponent implements OnInit, OnDestroy {
configForm: FormGroup;
dataChanged = false;
private configDataChangedSubscription: Subscription = null;
warningIsExpired = false;
imageError: string;
logoImageBase64 = '';
expiredHours = {
'': '',
'01': '01:00 Uhr',
'02': '02:00 Uhr',
'03': '03:00 Uhr',
'04': '04:00 Uhr',
'05': '05:00 Uhr',
'06': '06:00 Uhr',
'07': '07:00 Uhr',
'08': '08:00 Uhr',
'09': '09:00 Uhr',
10: '10:00 Uhr',
11: '11:00 Uhr',
12: '12:00 Uhr',
13: '13:00 Uhr',
14: '14:00 Uhr',
15: '15:00 Uhr',
16: '16:00 Uhr',
17: '17:00 Uhr',
18: '18:00 Uhr',
19: '19:00 Uhr',
20: '20:00 Uhr',
21: '21:00 Uhr',
22: '22:00 Uhr',
23: '23:00 Uhr'
};
constructor(
private fb: FormBuilder,
private snackBar: MatSnackBar,
private mds: MainDataService,
private bs: BackendService
) {
this.configForm = this.fb.group({
appTitle: this.fb.control(''),
introHtml: this.fb.control(''),
legalNoticeHtml: 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.setValue({
appTitle: appConfig.appTitle,
introHtml: appConfig.introHtml,
legalNoticeHtml: appConfig.legalNoticeHtml,
globalWarningText: appConfig.globalWarningText,
globalWarningExpiredDay: appConfig.globalWarningExpiredDay,
globalWarningExpiredHour: appConfig.globalWarningExpiredHour,
backgroundBody: appConfig.backgroundBody,
backgroundBox: appConfig.backgroundBox
}, { emitEvent: false });
this.warningIsExpired = AppConfig.isWarningExpired(
appConfig.globalWarningExpiredDay,
appConfig.globalWarningExpiredHour
);
this.logoImageBase64 = appConfig.mainLogo;
this.configDataChangedSubscription = this.configForm.valueChanges.subscribe(() => {
this.warningIsExpired = AppConfig.isWarningExpired(
this.configForm.get('globalWarningExpiredDay').value,
this.configForm.get('globalWarningExpiredHour').value
);
this.dataChanged = true;
});
});
}
saveData(): void {
const appConfig: AppSettings = {
appTitle: this.configForm.get('appTitle').value,
introHtml: this.configForm.get('introHtml').value,
legalNoticeHtml: this.configForm.get('legalNoticeHtml').value,
globalWarningText: this.configForm.get('globalWarningText').value,
globalWarningExpiredDay: this.configForm.get('globalWarningExpiredDay').value,
globalWarningExpiredHour: this.configForm.get('globalWarningExpiredHour').value,
backgroundBody: this.configForm.get('backgroundBody').value,
backgroundBox: this.configForm.get('backgroundBox').value,
mainLogo: this.logoImageBase64
};
this.bs.setAppConfig(appConfig).subscribe(isOk => {
if (isOk !== false) {
this.snackBar.open(
'Konfigurationsdaten der Anwendung gespeichert', 'Info', { duration: 3000 }
);
this.dataChanged = false;
this.mds.appConfig.setAppConfig(appConfig);
this.mds.appConfig.applyBackgroundColors();
this.mds.appTitle$.next(appConfig.appTitle);
this.mds.globalWarning = this.mds.appConfig.warningMessage;
} else {
this.snackBar.open('Konnte Konfigurationsdaten der Anwendung nicht speichern', 'Fehler', { duration: 3000 });
}
},
() => {
this.snackBar.open('Konnte Konfigurationsdaten der Anwendung nicht speichern', 'Fehler', { duration: 3000 });
});
}
imgFileChange(fileInput: any): void {
this.imageError = null;
if (fileInput.target.files && fileInput.target.files[0]) {
// todo check max values
const maxSize = 20971520;
const allowedTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'];
const maxHeight = 15200;
const maxWidth = 25600;
if (fileInput.target.files[0].size > maxSize) {
this.imageError = `Datei zu groß ( > ${maxSize / 1000} Mb)`;
return;
}
if (allowedTypes.indexOf(fileInput.target.files[0].type) < 0) {
const allowedImageTypesTruncated = [];
allowedTypes.forEach(imgType => {
allowedImageTypesTruncated.push(imgType.substr(5));
});
this.imageError = `Zulässige Datei-Typen: (${allowedImageTypesTruncated.join(', ')})`;
return;
}
const reader = new FileReader();
reader.onload = (e: any) => {
const image = new Image();
image.src = e.target.result;
image.onload = rs => {
const imgTargetElement = rs.currentTarget as HTMLImageElement;
const imgHeight = imgTargetElement.height;
const imgWidth = imgTargetElement.width;
if (imgHeight > maxHeight && imgWidth > maxWidth) {
this.imageError = `Unzulässige Größe (maximal erlaubt: ${maxHeight}*${maxWidth}px)`;
return false;
}
this.logoImageBase64 = e.target.result;
this.dataChanged = true;
return true;
};
};
reader.readAsDataURL(fileInput.target.files[0]);
}
}
removeLogoImg(): void {
this.logoImageBase64 = standardLogo;
this.dataChanged = true;
}
ngOnDestroy(): void {
if (this.configDataChangedSubscription !== null) this.configDataChangedSubscription.unsubscribe();
}
}
<form [formGroup]="configForm" fxFlex fxLayout="column" fxLayoutAlign="start stretch">
<p>Warnung auf der Startseite</p>
<div class="block-ident" fxLayout="column">
<mat-form-field>
<mat-label>Text</mat-label>
<textarea matInput formControlName="globalWarningText"
cdkTextareaAutosize
cdkAutosizeMinRows="1"></textarea>
</mat-form-field>
<div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="20px">
<p>Zeige Warnung bis</p>
<mat-form-field>
<mat-label>Datum</mat-label>
<input matInput formControlName="globalWarningExpiredDay" [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Stunde" formControlName="globalWarningExpiredHour">
<mat-option *ngFor="let m of expiredHours | keyvalue" [value]="m.key">
{{m.value}}
</mat-option>
</mat-select>
</mat-form-field>
<p *ngIf="warningIsExpired" class="warning-warning">Zeitpunkt ist in der Vergangenheit.</p>
</div>
</div>
<mat-form-field fxLayout="column">
<mat-label>Name der Anwendung</mat-label>
<input matInput formControlName="appTitle" placeholder="Name">
</mat-form-field>
<mat-form-field fxLayout="column" fxLayoutAlign="start stretch">
<mat-label>Html-Inhalt für die Startseite rechts</mat-label>
<textarea matInput formControlName="introHtml"
cdkTextareaAutosize
cdkAutosizeMinRows="6"></textarea>
</mat-form-field>
<mat-form-field fxLayout="column" fxLayoutAlign="start stretch">
<mat-label>Html-Inhalt für die Impressum-/Datenschutzseite</mat-label>
<textarea matInput formControlName="legalNoticeHtml"
cdkTextareaAutosize
cdkAutosizeMinRows="6"></textarea>
</mat-form-field>
<label>Logo</label>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
<img class="logo-img" [src]="logoImageBase64" />
<input #hiddenimgfileinput type="file" (change)="imgFileChange($event)" [hidden]="true"/>
<button mat-raised-button (click)="hiddenimgfileinput.click()" matTooltip="Logo hochladen/aktualisieren" matTooltipPosition="above">
<mat-icon>cloud_upload</mat-icon>
</button>
<button mat-raised-button (click)="removeLogoImg()" matTooltip="Logo auf Standard setzen" matTooltipPosition="above">
<mat-icon>delete</mat-icon>
</button>
<alert *ngIf="imageError" level="error" [text]="imageError"></alert>
</div>
<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>
</form>
app-config.component.css
.block-ident {
margin-left: 40px
}
.warning-warning {
color: darkgoldenrod
}
.logo-img {
width: 100px;
margin: 20px;
}