owntone-server/web-src/src/pages/SettingsPageWebinterface.vue

<template>
  <div>
    <tabs-settings></tabs-settings>

    <content-with-heading>
      <template slot="heading-left">
        <div class="title is-4">Now playing page</div>
      </template>

      <template slot="content">
        <div class="field">
          <label class="checkbox">
            <input type="checkbox" :checked="settings_option_show_composer_now_playing" @change="set_timer_show_composer_now_playing" ref="checkbox_show_composer">
            Show composer
            <i class="is-size-7"
                :class="{
                  'has-text-info': statusUpdateShowComposerNowPlaying === 'success',
                  'has-text-danger': statusUpdateShowComposerNowPlaying === 'error'
                }">{{ info_option_show_composer_now_playing }}</i>
          </label>
          <p class="help has-text-justified">
            If enabled the composer of the current playing track is shown on the &quot;now playing page&quot;
          </p>
        </div>
        <fieldset :disabled="!settings_option_show_composer_now_playing">
          <div class="field">
            <label class="label has-text-weight-normal">
              Show composer only for listed genres
              <i class="is-size-7"
                  :class="{
                    'has-text-info': statusUpdateShowComposerForGenre === 'success',
                    'has-text-danger': statusUpdateShowComposerForGenre === 'error'
                  }">{{ info_option_show_composer_for_genre }}</i>
            </label>
            <div class="control">
              <input class="input" type="text" placeholder="Genres"
                  :value="settings_option_show_composer_for_genre"
                  @input="set_timer_show_composer_for_genre"
                  ref="field_composer_for_genre">
            </div>
            <p class="help">
              Comma separated list of genres the composer should be displayed on the &quot;now playing page&quot;.
            </p>
            <p class="help">
              Leave empty to always show the composer.
            </p>
            <p class="help">
              The genre tag of the current track is matched by checking, if one of the defined genres are included.
              For example setting to <code>classical, soundtrack</code> will show the composer for tracks with
              a genre tag of &quot;Contemporary Classical&quot;.<br>
            </p>
          </div>
        </fieldset>
      </template>
    </content-with-heading>
  </div>
</template>

<script>
import ContentWithHeading from '@/templates/ContentWithHeading'
import TabsSettings from '@/components/TabsSettings'
import webapi from '@/webapi'
import * as types from '@/store/mutation_types'

export default {
  name: 'SettingsPageWebinterface',
  components: { ContentWithHeading, TabsSettings },

  data () {
    return {
      timerDelay: 2000,
      timerIdShowComposerNowPlaying: -1,
      timerIdShowComposerForGenre: -1,

      // <empty>: default/no changes, 'success': update succesful, 'error': update failed
      statusUpdateShowComposerNowPlaying: '',
      statusUpdateShowComposerForGenre: ''
    }
  },

  computed: {
    settings_category_webinterface () {
      return this.$store.getters.settings_webinterface
    },
    settings_option_show_composer_now_playing () {
      return this.$store.getters.settings_option_show_composer_now_playing
    },
    settings_option_show_composer_for_genre () {
      return this.$store.getters.settings_option_show_composer_for_genre
    },
    info_option_show_composer_for_genre () {
      if (this.statusUpdateShowComposerForGenre === 'success') {
        return '(setting saved)'
      } else if (this.statusUpdateShowComposerForGenre === 'error') {
        return '(error saving setting)'
      }
      return ''
    },
    info_option_show_composer_now_playing () {
      if (this.statusUpdateShowComposerNowPlaying === 'success') {
        return '(setting saved)'
      } else if (this.statusUpdateShowComposerNowPlaying === 'error') {
        return '(error saving setting)'
      }
      return ''
    }
  },

  methods: {
    set_timer_show_composer_now_playing () {
      if (this.timerIdShowComposerNowPlaying > 0) {
        window.clearTimeout(this.timerIdShowComposerNowPlaying)
        this.timerIdShowComposerNowPlaying = -1
      }

      this.statusUpdateShowComposerNowPlaying = ''
      const newValue = this.$refs.checkbox_show_composer.checked
      if (newValue !== this.settings_option_show_composer_now_playing) {
        this.timerIdShowComposerNowPlaying = window.setTimeout(this.update_show_composer_now_playing, this.timerDelay)
      }
    },

    update_show_composer_now_playing () {
      this.timerIdShowComposerNowPlaying = -1

      const newValue = this.$refs.checkbox_show_composer.checked
      if (newValue === this.settings_option_show_composer_now_playing) {
        this.statusUpdateShowComposerNowPlaying = ''
        return
      }

      const option = {
        category: this.settings_category_webinterface.name,
        name: 'show_composer_now_playing',
        value: newValue
      }
      webapi.settings_update(this.settings_category_webinterface.name, option).then(() => {
        this.$store.commit(types.UPDATE_SETTINGS_OPTION, option)
        this.statusUpdateShowComposerNowPlaying = 'success'
      }).catch(() => {
        this.statusUpdateShowComposerNowPlaying = 'error'
        this.$refs.checkbox_show_composer.checked = this.settings_option_show_composer_now_playing
      }).finally(() => {
        this.timerIdShowComposerNowPlaying = window.setTimeout(this.clear_status_show_composer_now_playing, this.timerDelay)
      })
    },

    set_timer_show_composer_for_genre () {
      if (this.timerIdShowComposerForGenre > 0) {
        window.clearTimeout(this.timerIdShowComposerForGenre)
        this.timerIdShowComposerForGenre = -1
      }

      this.statusUpdateShowComposerForGenre = ''
      const newValue = this.$refs.field_composer_for_genre.value
      if (newValue !== this.settings_option_show_composer_for_genre) {
        this.timerIdShowComposerForGenre = window.setTimeout(this.update_show_composer_for_genre, this.timerDelay)
      }
    },

    update_show_composer_for_genre () {
      this.timerIdShowComposerForGenre = -1

      const newValue = this.$refs.field_composer_for_genre.value
      if (newValue === this.settings_option_show_composer_for_genre) {
        this.statusUpdateShowComposerForGenre = ''
        return
      }

      const option = {
        category: this.settings_category_webinterface.name,
        name: 'show_composer_for_genre',
        value: newValue
      }
      webapi.settings_update(this.settings_category_webinterface.name, option).then(() => {
        this.$store.commit(types.UPDATE_SETTINGS_OPTION, option)
        this.statusUpdateShowComposerForGenre = 'success'
      }).catch(() => {
        this.statusUpdateShowComposerForGenre = 'error'
        this.$refs.field_composer_for_genre.value = this.settings_option_show_composer_for_genre
      }).finally(() => {
        this.timerIdShowComposerForGenre = window.setTimeout(this.clear_status_show_composer_for_genre, this.timerDelay)
      })
    },

    clear_status_show_composer_for_genre () {
      this.statusUpdateShowComposerForGenre = ''
    },

    clear_status_show_composer_now_playing () {
      this.statusUpdateShowComposerNowPlaying = ''
    }
  },

  filters: {
  }
}
</script>

<style>
</style>