Add input processor for crontab inputs

src/store/modules/normalizers.js

@@ -87,8 +87,8 @@ export const parseTuples = (tuples, key) => {
       }, [])
     } else if (item.tuple[0] === ':crontab') {
       accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
-        return [...acc, { [group.tuple[1]]: group.tuple[0] }]
-      }, [])
+        return { ...acc, [group.tuple[1]]: group.tuple[0] }
+      }, {})
     } else if (item.tuple[0] === ':match_actor') {
       accum[item.tuple[0]] = Object.keys(item.tuple[1]).reduce((acc, regex) => {
         return [...acc, { [regex]: { value: item.tuple[1][regex], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]

src/views/settings/components/inputComponents/CrontabInput.vue

@@ -1,11 +1,14 @@
 <template>
-  <div>
-    <el-form-item v-for="worker in workers" :label="worker" :key="worker" label-width="380px">
+  <div class="crontab">
+    <el-form-item v-for="worker in workers" :key="worker" :label="worker" :label-width="labelWidth" class="crontab-container">
+      <span slot="label" class="crontab-label">
+        {{ worker }}
+      </span>
       <el-input
         :value="data[worker]"
         :placeholder="getSuggestion(worker) || null"
-        class="input"
-        @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
+        class="input setting-input crontab-input"
+        @input="update($event, worker)"/>
     </el-form-item>
   </div>
 </template>
@@ -15,7 +18,7 @@ export default {
   name: 'CrontabInput',
   props: {
     data: {
-      type: Array,
+      type: Object,
       default: function() {
         return {}
       }
@@ -34,6 +37,22 @@ export default {
     }
   },
   computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
+    labelWidth() {
+      if (this.isMobile) {
+        return '120px'
+      } else {
+        return '380px'
+      }
+    },
     workers() {
       return this.setting.suggestions.map(worker => worker[1])
     }
@@ -41,6 +60,18 @@ export default {
   methods: {
     getSuggestion(worker) {
       return this.setting.suggestions.find(suggestion => suggestion[1] === worker)[0]
+    },
+    update(value, worker) {
+      const updatedValue = {
+        ...this.$store.state.settings.settings[this.settingGroup.group][this.settingGroup.key][this.setting.key],
+        [worker]: value
+      }
+      this.$store.dispatch('UpdateSettings',
+        { group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValue, type: 'reversed_tuple' }
+      )
+      this.$store.dispatch('UpdateState',
+        { group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValue }
+      )
     }
   }
 }