[web] Rename confusing variable name option

web-src/src/components/SettingsCheckbox.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="field">
     <input
-      :id="option.name"
-      v-model="option.value"
+      :id="setting.name"
+      v-model="setting.value"
       type="checkbox"
       class="switch is-rounded mr-2"
       @change="update_setting"
     />
-    <label class="pt-0" :for="option.name">
+    <label class="pt-0" :for="setting.name">
       <slot name="label" />
     </label>
     <i
@@ -27,8 +27,8 @@ import webapi from '@/webapi'
 export default {
   name: 'SettingsCheckbox',
   props: {
-    category_name: { required: true, type: String },
-    option_name: { required: true, type: String }
+    category: { required: true, type: String },
+    name: { required: true, type: String }
   },
 
   data() {
@@ -54,40 +54,37 @@ export default {
     is_success() {
       return this.statusUpdate === 'success'
     },
-    option() {
-      const option = this.$store.getters.setting(
-        this.category_name,
-        this.option_name
-      )
-      if (!option) {
+    setting() {
+      const setting = this.$store.getters.setting(this.category, this.name)
+      if (!setting) {
         return {
-          category: this.category_name,
-          name: this.option_name,
+          category: this.category,
+          name: this.name,
           value: false
         }
       }
-      return option
+      return setting
     }
   },
 
   methods: {
     clear_status() {
       if (this.is_error) {
-        this.option.value = !this.option.value
+        this.setting.value = !this.setting.value
       }
       this.statusUpdate = ''
     },
     update_setting() {
       this.timerId = -1
-      const option = {
-        category: this.category_name,
-        name: this.option_name,
-        value: this.option.value
+      const setting = {
+        category: this.category,
+        name: this.name,
+        value: this.setting.value
       }
       webapi
-        .settings_update(this.category_name, option)
+        .settings_update(this.category, setting)
         .then(() => {
-          this.$store.dispatch('update_setting', option)
+          this.$store.dispatch('update_setting', setting)
           this.statusUpdate = 'success'
         })
         .catch(() => {

web-src/src/components/SettingsIntfield.vue

@@ -16,7 +16,7 @@
           inputmode="numeric"
           min="0"
           :placeholder="placeholder"
-          :value="option.value"
+          :value="setting.value"
           @input="set_update_timer"
         />
       </div>
@@ -33,9 +33,9 @@ import webapi from '@/webapi'
 export default {
   name: 'SettingsIntfield',
   props: {
-    category_name: { required: true, type: String },
+    category: { required: true, type: String },
     disabled: Boolean,
-    option_name: { required: true, type: String },
+    name: { required: true, type: String },
     placeholder: { default: '', type: String }
   },
 
@@ -62,8 +62,8 @@ export default {
     is_success() {
       return this.statusUpdate === 'success'
     },
-    option() {
-      return this.$store.getters.setting(this.category_name, this.option_name)
+    setting() {
+      return this.$store.getters.setting(this.category, this.name)
     }
   },
 
@@ -87,15 +87,15 @@ export default {
         this.statusUpdate = ''
         return
       }
-      const option = {
-        category: this.category_name,
-        name: this.option_name,
+      const setting = {
+        category: this.category,
+        name: this.name,
         value: newValue
       }
       webapi
-        .settings_update(this.category_name, option)
+        .settings_update(this.category, setting)
         .then(() => {
-          this.$store.dispatch('update_setting', option)
+          this.$store.dispatch('update_setting', setting)
           this.statusUpdate = 'success'
         })
         .catch(() => {

web-src/src/components/SettingsTextfield.vue

@@ -15,7 +15,7 @@
           class="input"
           type="text"
           :placeholder="placeholder"
-          :value="option.value"
+          :value="setting.value"
           @input="set_update_timer"
         />
       </div>
@@ -32,9 +32,9 @@ import webapi from '@/webapi'
 export default {
   name: 'SettingsTextfield',
   props: {
-    category_name: { required: true, type: String },
+    category: { required: true, type: String },
     disabled: Boolean,
-    option_name: { required: true, type: String },
+    name: { required: true, type: String },
     placeholder: { default: '', type: String }
   },
 
@@ -61,8 +61,8 @@ export default {
     is_success() {
       return this.statusUpdate === 'success'
     },
-    option() {
-      return this.$store.getters.setting(this.category_name, this.option_name)
+    setting() {
+      return this.$store.getters.setting(this.category, this.name)
     }
   },
 
@@ -88,15 +88,15 @@ export default {
         this.statusUpdate = ''
         return
       }
-      const option = {
-        category: this.category_name,
-        name: this.option_name,
+      const setting = {
+        category: this.category,
+        name: this.name,
         value: newValue
       }
       webapi
-        .settings_update(this.category_name, option)
+        .settings_update(this.category, setting)
         .then(() => {
-          this.$store.dispatch('update_setting', option)
+          this.$store.dispatch('update_setting', setting)
           this.statusUpdate = 'success'
         })
         .catch(() => {

web-src/src/pages/PageSettingsArtwork.vue

@@ -16,8 +16,8 @@
         />
         <settings-checkbox
           v-if="spotify.spotify_logged_in"
-          category_name="artwork"
-          option_name="use_artwork_source_spotify"
+          category="artwork"
+          name="use_artwork_source_spotify"
         >
           <template #label>
             <span v-text="$t('page.settings.artwork.spotify')" />
@@ -26,10 +26,7 @@
             </a>
           </template>
         </settings-checkbox>
-        <settings-checkbox
-          category_name="artwork"
-          option_name="use_artwork_source_discogs"
-        >
+        <settings-checkbox category="artwork" name="use_artwork_source_discogs">
           <template #label>
             <span v-text="$t('page.settings.artwork.discogs')" />
             <a href="https://www.discogs.com/" target="_blank">
@@ -38,8 +35,8 @@
           </template>
         </settings-checkbox>
         <settings-checkbox
-          category_name="artwork"
-          option_name="use_artwork_source_coverartarchive"
+          category="artwork"
+          name="use_artwork_source_coverartarchive"
         >
           <template #label>
             <span v-text="$t('page.settings.artwork.coverartarchive')" />

web-src/src/pages/PageSettingsWebinterface.vue

@@ -26,57 +26,45 @@
           v-text="$t('page.settings.general.navigation-item-selection-info')"
         />
         <settings-checkbox
-          category_name="webinterface"
-          option_name="show_menu_item_playlists"
+          category="webinterface"
+          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"
-        >
+        <settings-checkbox category="webinterface" 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"
+          category="webinterface"
+          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"
+          category="webinterface"
+          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"
-        >
+        <settings-checkbox category="webinterface" 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"
-        >
+        <settings-checkbox category="webinterface" 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"
-        >
+        <settings-checkbox category="webinterface" name="show_menu_item_search">
           <template #label>
             <span v-text="$t('page.settings.general.search')" />
           </template>
@@ -92,8 +80,8 @@
       </template>
       <template #content>
         <settings-checkbox
-          category_name="webinterface"
-          option_name="show_cover_artwork_in_album_lists"
+          category="webinterface"
+          name="show_cover_artwork_in_album_lists"
         >
           <template #label>
             <span v-text="$t('page.settings.general.show-coverart')" />
@@ -110,8 +98,8 @@
       </template>
       <template #content>
         <settings-checkbox
-          category_name="webinterface"
-          option_name="show_composer_now_playing"
+          category="webinterface"
+          name="show_composer_now_playing"
         >
           <template #label>
             <span v-text="$t('page.settings.general.show-composer')" />
@@ -121,8 +109,8 @@
           </template>
         </settings-checkbox>
         <settings-textfield
-          category_name="webinterface"
-          option_name="show_composer_for_genre"
+          category="webinterface"
+          name="show_composer_for_genre"
           :disabled="!setting_show_composer_now_playing"
           :placeholder="$t('page.settings.general.genres')"
         >
@@ -145,8 +133,8 @@
           </template>
         </settings-textfield>
         <settings-checkbox
-          category_name="webinterface"
-          option_name="show_filepath_now_playing"
+          category="webinterface"
+          name="show_filepath_now_playing"
         >
           <template #label>
             <span v-text="$t('page.settings.general.show-path')" />
@@ -162,10 +150,7 @@
         />
       </template>
       <template #content>
-        <settings-intfield
-          category_name="webinterface"
-          option_name="recently_added_limit"
-        >
+        <settings-intfield category="webinterface" name="recently_added_limit">
           <template #label>
             <span
               v-text="$t('page.settings.general.recently-added-page-info')"