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

<template>
  <div class="fd-page-with-tabs">
    <tabs-settings />
      <content-with-heading>
      <template #heading-left>
        <div class="title is-4" v-text="$t('page.settings.general.language')" />
      </template>
      <template #content>
        <dropdown-menu v-model="locale" :options="locales" />
      </template>
    </content-with-heading>
    <content-with-heading>
      <template #heading-left>
        <div class="title is-4" v-text="$t('page.settings.general.navigation-items')" />
      </template>
      <template #content>
        <p class="content" v-text="$t('page.settings.general.navigation-item-selection')" />
        <div class="notification is-size-7" v-text="$t('page.settings.general.navigation-item-selection-info')" />
        <settings-checkbox category_name="webinterface" option_name="show_menu_item_playlists">
          <template #label>
            <span v-text="$t('page.settings.general.playlists')" />
          </template>
        </settings-checkbox>
        <settings-checkbox category_name="webinterface" option_name="show_menu_item_music">
          <template #label>
            <span v-text="$t('page.settings.general.music')" />
          </template>
        </settings-checkbox>
        <settings-checkbox category_name="webinterface" option_name="show_menu_item_podcasts">
          <template #label>
            <span v-text="$t('page.settings.general.podcasts')" />
          </template>
        </settings-checkbox>
        <settings-checkbox category_name="webinterface" option_name="show_menu_item_audiobooks">
          <template #label>
            <span v-text="$t('page.settings.general.audiobooks')" />
          </template>
        </settings-checkbox>
        <settings-checkbox category_name="webinterface" option_name="show_menu_item_radio">
          <template #label>
            <span v-text="$t('page.settings.general.radio')" />
          </template>
        </settings-checkbox>
        <settings-checkbox category_name="webinterface" option_name="show_menu_item_files">
          <template #label>
            <span v-text="$t('page.settings.general.files')" />
          </template>
        </settings-checkbox>
        <settings-checkbox category_name="webinterface" option_name="show_menu_item_search">
          <template #label>
            <span v-text="$t('page.settings.general.search')" />
          </template>
        </settings-checkbox>
      </template>
    </content-with-heading>
    <content-with-heading>
      <template #heading-left>
        <div class="title is-4" v-text="$t('page.settings.general.album-lists')" />
      </template>
      <template #content>
        <settings-checkbox category_name="webinterface" option_name="show_cover_artwork_in_album_lists">
          <template #label>
            <span v-text="$t('page.settings.general.show-coverart')" />
          </template>
        </settings-checkbox>
      </template>
    </content-with-heading>
    <content-with-heading>
      <template #heading-left>
        <div class="title is-4" v-text="$t('page.settings.general.now-playing-page')" />
      </template>
      <template #content>
        <settings-checkbox category_name="webinterface" option_name="show_composer_now_playing">
          <template #label>
            <span v-text="$t('page.settings.general.show-composer')" />
          </template>
          <template #info>
            <span v-text="$t('page.settings.general.show-composer-info')" />
          </template>
        </settings-checkbox>
        <settings-textfield category_name="webinterface" option_name="show_composer_for_genre" :disabled="!settings_option_show_composer_now_playing" placeholder="Genres">
          <template #label>
            <span v-text="$t('page.settings.general.show-composer-genres')" />
          </template>
          <template #info>
            <p class="help" v-text="$t('page.settings.general.show-composer-genres-info-1')" />
            <p class="help" v-text="$t('page.settings.general.show-composer-genres-info-2')" />
            <p class="help" v-text="$t('page.settings.general.show-composer-genres-info-3')" />
          </template>
        </settings-textfield>
      </template>
    </content-with-heading>
    <content-with-heading>
      <template #heading-left>
        <div class="title is-4" v-text="$t('page.settings.general.recently-added-page')" />
      </template>
      <template #content>
        <settings-intfield category_name="webinterface" option_name="recently_added_limit">
          <template #label>
            <span v-text="$t('page.settings.general.recently-added-page-info')" />
          </template>
        </settings-intfield>
      </template>
    </content-with-heading>
  </div>
</template>

<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import TabsSettings from '@/components/TabsSettings.vue'
import SettingsCheckbox from '@/components/SettingsCheckbox.vue'
import SettingsTextfield from '@/components/SettingsTextfield.vue'
import SettingsIntfield from '@/components/SettingsIntfield.vue'
import DropdownMenu from '@/components/DropdownMenu.vue'

export default {
  name: 'SettingsPageWebinterface',
  components: {
    ContentWithHeading,
    TabsSettings,
    SettingsCheckbox,
    SettingsTextfield,
    SettingsIntfield,
    DropdownMenu
  },

  computed: {
    settings_option_show_composer_now_playing() {
      return this.$store.getters.settings_option_show_composer_now_playing
    },
    locale: {
      get() {
        return this.$i18n.locale
      },
      set(locale) {
        this.$i18n.locale = locale
      }
    },
    locales: {
      get() {
        return this.$i18n.availableLocales.map((item) => {
          return { id: item, name: this.$t('language.' + item) }
        })
      }
    }
  }
}
</script>

<style></style>