dynamicbible/app/db/src/app/common/components/settings/settings.component.ts

import { Component } from '@angular/core';
import { AppService } from 'src/app/services/app.service';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
import { SubscriberComponent } from '../subscriber.component';
import { DisplaySettings } from 'src/app/models/app-state';
import { CardFonts } from 'src/app/constants';
import { MatSelectChange } from '@angular/material/select';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss'],
})
export class SettingsComponent extends SubscriberComponent {
  displaySettings: DisplaySettings;
  fonts: string[];
  cardFont = '';

  constructor(public appService: AppService) {
    super();
    this.fonts = CardFonts;
    this.addSubscription(
      this.appService.state$.subscribe((state) => {
        this.displaySettings = state.displaySettings;
        this.cardFont = state.displaySettings.cardFont;
      })
    );
  }

  cardFontSelected(evt: MatSelectChange) {
    this.appService.changeFont(evt.value);
  }

  //#region Search Settings

  toggleStrongsAsModal(toggle: MatSlideToggleChange) {
    this.appService.updateDisplaySettings({
      ...this.displaySettings,
      showStrongsAsModal: toggle.checked,
    });
  }

  toggleAppendCardToBottom(toggle: MatSlideToggleChange) {
    this.appService.updateDisplaySettings({
      ...this.displaySettings,
      appendCardToBottom: toggle.checked,
    });
  }

  toggleInsertCardNextToItem(toggle: MatSlideToggleChange) {
    this.appService.updateDisplaySettings({
      ...this.displaySettings,
      insertCardNextToItem: toggle.checked,
    });
  }

  toggleClearSearchAfterQuery(toggle: MatSlideToggleChange) {
    this.appService.updateDisplaySettings({
      ...this.displaySettings,
      clearSearchAfterQuery: toggle.checked,
    });
  }
  toggleSyncCardsAcrossDevices(toggle: MatSlideToggleChange) {
    this.appService.updateDisplaySettings({
      ...this.displaySettings,
      syncCardsAcrossDevices: toggle.checked,
    });
  }
  //#endregion

  //#region Passage Settings

  toggleParagraphHeadings(toggle: MatSlideToggleChange) {
    this.appService.updateDisplaySettings({
      ...this.displaySettings,
      showParagraphHeadings: toggle.checked,
    });
  }

  toggleParagraphs(toggle: MatSlideToggleChange) {
    this.appService.updateDisplaySettings({
      ...this.displaySettings,
      showParagraphs: toggle.checked,
    });
  }

  toggleVerseNumbers(toggle: MatSlideToggleChange) {
    this.appService.updateDisplaySettings({
      ...this.displaySettings,
      showVerseNumbers: toggle.checked,
    });
  }

  toggleVersesOnNewLine(toggle: MatSlideToggleChange) {
    this.appService.updateDisplaySettings({
      ...this.displaySettings,
      showVersesOnNewLine: toggle.checked,
    });
  }

  //#endregion
}