[web] Harmonise use use of rounded switches

Checkboxes have now the same appearance all over the UI.

web-src/src/components/ModalDialogUpdate.vue

@@ -31,10 +31,13 @@
           </div>
         </div>
         <div class="field">
-          <label class="checkbox is-size-7 is-small">
-            <input v-model="rescan_metadata" type="checkbox" class="mr-2" />
-            <span v-text="$t('dialog.update.rescan-metadata')" />
-          </label>
+          <input
+            id="rescan"
+            v-model="rescan_metadata"
+            type="checkbox"
+            class="switch is-rounded is-small"
+          />
+          <label for="rescan" v-text="$t('dialog.update.rescan-metadata')" />
         </div>
       </div>
       <div v-else>

web-src/src/components/SettingsCheckbox.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="field">
-    <label class="switch">
-      <input
-        ref="setting"
-        type="checkbox"
-        :checked="value"
-        class="mr-2"
-        @change="set_update_timer"
-      />
+    <input
+      :id="option.name"
+      v-model="option.value"
+      type="checkbox"
+      class="switch is-rounded mr-2"
+      @change="update_setting"
+    />
+    <label :for="option.name">
       <slot name="label" />
-      <i
-        class="is-size-7"
-        :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }"
-        v-text="info"
-      />
     </label>
+    <i
+      class="is-size-7"
+      :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }"
+      v-text="info"
+    />
     <p v-if="$slots['info']" class="help">
       <slot name="info" />
     </p>
@@ -38,29 +38,25 @@ export default {
   },
 
   computed: {
-    category() {
-      return this.$store.state.settings.categories.find(
-        (elem) => elem.name === this.category_name
-      )
-    },
-
     option() {
-      if (!this.category) {
-        return {}
-      }
-      return this.category.options.find(
-        (elem) => elem.name === this.option_name
+      const option = this.$store.getters.settings_option(
+        this.category_name,
+        this.option_name
       )
-    },
-
-    value() {
-      return this.option.value
+      if (!option) {
+        return {
+          category: this.category_name,
+          name: this.option_name,
+          value: false
+        }
+      }
+      return option
     },
 
     info() {
-      if (this.statusUpdate === 'success') {
+      if (this.is_success) {
         return this.$t('setting.saved')
-      } else if (this.statusUpdate === 'error') {
+      } else if (this.is_error) {
         return this.$t('setting.not-saved')
       }
       return ''
@@ -76,42 +72,21 @@ export default {
   },
 
   methods: {
-    set_update_timer() {
-      if (this.timerId > 0) {
-        window.clearTimeout(this.timerId)
-        this.timerId = -1
-      }
-
-      this.statusUpdate = ''
-      const newValue = this.$refs.setting.checked
-      if (newValue !== this.value) {
-        this.timerId = window.setTimeout(this.update_setting, this.timerDelay)
-      }
-    },
-
     update_setting() {
       this.timerId = -1
-
-      const newValue = this.$refs.setting.checked
-      if (newValue === this.value) {
-        this.statusUpdate = ''
-        return
-      }
-
       const option = {
-        category: this.category.name,
+        category: this.category_name,
         name: this.option_name,
-        value: newValue
+        value: this.option.value
       }
       webapi
-        .settings_update(this.category.name, option)
+        .settings_update(this.category_name, option)
         .then(() => {
           this.$store.commit(types.UPDATE_SETTINGS_OPTION, option)
           this.statusUpdate = 'success'
         })
         .catch(() => {
           this.statusUpdate = 'error'
-          this.$refs.setting.checked = this.value
         })
         .finally(() => {
           this.timerId = window.setTimeout(this.clear_status, this.timerDelay)
@@ -119,6 +94,9 @@ export default {
     },
 
     clear_status() {
+      if (this.is_error) {
+        this.option.value = !this.option.value
+      }
       this.statusUpdate = ''
     }
   }

web-src/src/pages/SettingsPageRemotesOutputs.vue

@@ -53,15 +53,14 @@
         <div v-for="output in outputs" :key="output.id">
           <div class="field">
             <div class="control">
-              <label class="checkbox">
-                <input
-                  v-model="output.selected"
-                  type="checkbox"
-                  class="mr-2"
-                  @change="output_toggle(output.id)"
-                />
-                <span v-text="output.name" />
-              </label>
+              <input
+                :id="output.id"
+                v-model="output.selected"
+                type="checkbox"
+                class="switch is-rounded mr-2"
+                @change="output_toggle(output.id)"
+              />
+              <label :for="output.id" class="checkbox" v-text="output.name" />
             </div>
           </div>
           <form