File

src/app/superadmin/settings/app-config.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-app-config
styleUrls app-config.component.css
templateUrl app-config.component.html

Index

Properties
Methods

Constructor

constructor(fb: FormBuilder, snackBar: MatSnackBar, mds: MainDataService, bs: BackendService)
Parameters :
Name Type Optional
fb FormBuilder No
snackBar MatSnackBar No
mds MainDataService No
bs BackendService No

Methods

imgFileChange
imgFileChange(fileInput: any)
Parameters :
Name Type Optional
fileInput any No
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
removeLogoImg
removeLogoImg()
Returns : void
saveData
saveData()
Returns : void

Properties

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;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""