Added `TimeInterval` component.

platypush/backend/http/webapp/src/components/elements/TimeInterval.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="time-interval-container">
+    <div class="row">
+      <div class="value-container">
+        <input type="number" v-model="duration" :step="step" />
+      </div>
+
+      <div class="unit-container">
+        <select v-model="selectedUnit">
+          <option v-for="u in units" :key="u.value" :value="u.value">
+            {{ u.label }}
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  emits: ['input'],
+  props: {
+    // The value of the time interval, in seconds.
+    value: {
+      type: Number,
+    },
+
+    // The increment to use when changing the value.
+    step: {
+      type: Number,
+      default: 1,
+    },
+  },
+
+  data() {
+    return {
+      duration: null,
+      selectedUnit: 'second',
+      units: {
+        'second': {
+          label: 'Seconds',
+          value: 'second',
+          multiplier: 1,
+        },
+
+        'minute': {
+          label: 'Minutes',
+          value: 'minute',
+          multiplier: 60,
+        },
+
+        'hour': {
+          label: 'Hours',
+          value: 'hour',
+          multiplier: 3600,
+        },
+
+        'day': {
+          label: 'Days',
+          value: 'day',
+          multiplier: 86400,
+        },
+      }
+    }
+  },
+
+  computed: {
+    unit() {
+      return this.units[this.selectedUnit]
+    },
+
+    multiplier() {
+      return this.unit.multiplier
+    },
+
+    seconds() {
+      if (this.duration == null)
+        return null
+
+      return this.toSeconds(this.duration)
+    },
+  },
+
+  watch: {
+    seconds(value) {
+      if (value === null)
+        return
+
+      this.duration = this.toUnit(value)
+      this.$emit('input', value)
+    },
+
+    value(value) {
+      this.duration = this.toUnit(value)
+    },
+  },
+
+  methods: {
+    toSeconds(value) {
+      return value == null ? null : value * this.multiplier
+    },
+
+    toUnit(value) {
+      return value == null ? null : value / this.multiplier
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.time-interval-container {
+  display: flex;
+  flex-direction: column;
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .value-container {
+    input {
+      width: 7.5em;
+    }
+  }
+
+  .unit-container {
+    margin-left: 0.5em;
+  }
+}
+</style>