Added `CronEditor` component.

platypush/backend/http/webapp/package-lock.json

@@ -9,8 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.1.1",
-        "core-js": "^3.31.1",
         "axios": "^1.6.0",
+        "core-js": "^3.31.1",
+        "cronstrue": "^2.47.0",
         "highlight.js": "^11.9.0",
         "lato-font": "^3.0.0",
         "mitt": "^2.1.0",
@@ -4699,6 +4700,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/cronstrue": {
+      "version": "2.47.0",
+      "resolved": "https://registry.npmjs.org/cronstrue/-/cronstrue-2.47.0.tgz",
+      "integrity": "sha512-fnFwJy7zslTEz6h7O7BkwgHNBvuuPmkhAYKqPDxK5mBQLz2nG08T9afbnjm+yrvcc/wxrd+otaVSnoXT9ulUOw==",
+      "bin": {
+        "cronstrue": "bin/cli.js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",

platypush/backend/http/webapp/package.json

@@ -9,8 +9,9 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "core-js": "^3.31.1",
     "axios": "^1.6.0",
+    "core-js": "^3.31.1",
+    "cronstrue": "^2.47.0",
     "highlight.js": "^11.9.0",
     "lato-font": "^3.0.0",
     "mitt": "^2.1.0",

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

@@ -0,0 +1,179 @@
+<template>
+  <div class="cron-editor-container">
+    <div class="input-grid" :class="{error: error != null}">
+      <label class="item" :class="{selected: selectedItem === i}" v-for="(label, i) in labels" :key="i">
+        <div class="col-s-12 col-m-4" v-text="label" />
+        <div class="col-s-12 col-m-8">
+          <input type="text" v-model="cronExpr[i]"
+                 @keydown="validate"
+                 @input="updateCronExpr(i, $event.target.value)"
+                 @focus="selectedItem = i"
+                 @blur="selectedItem = null" />
+        </div>
+      </label>
+    </div>
+
+    <div class="cron-description">
+      <div class="error" v-if="error" v-text="error" />
+      <div v-else>Runs: <span v-text="cronDescription" /></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import cronstrue from 'cronstrue'
+
+export default {
+  emits: ['input'],
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      cronExpr: this.value.split(/\s+/),
+      cronDescription: null,
+      error: null,
+      selectedItem: null,
+      labels: [
+        'Minute',
+        'Hour',
+        'Day of Month',
+        'Month',
+        'Day of Week',
+      ],
+    }
+  },
+
+  computed: {
+    cronString() {
+      return this.cronExpr.map((v) => v.trim()).join(' ')
+    },
+  },
+
+  watch: {
+    cronExpr: {
+      handler(newValue, oldValue) {
+        newValue.forEach((v, i) => {
+          v = v.trim()
+          if (!v.match(/^[0-9\*\/\-,]*$/)) {
+            this.cronExpr[i] = oldValue[i]
+          } else {
+            this.cronExpr[i] = v
+          }
+        })
+      },
+      deep: true,
+    },
+  },
+
+  methods: {
+    validate(e) {
+      const key = e.key
+
+      if (
+        [
+          'Enter',
+          'Escape',
+          'Tab',
+          'ArrowLeft',
+          'ArrowRight',
+          'ArrowUp',
+          'ArrowDown',
+          'Backspace',
+          'Delete',
+          'Home',
+          'End'
+        ].includes(key) ||
+        e.ctrlKey ||
+        e.metaKey
+      ) {
+        return
+      }
+
+      if (key.match(/^[0-9\*\/\-,]$/)) {
+        return
+      }
+
+      e.preventDefault()
+    },
+
+    updateCronDescription() {
+      try {
+        const text = cronstrue.toString(this.cronString)
+        this.error = null
+        this.cronDescription = text
+      } catch (e) {
+        this.error = `Invalid cron expression: ${e}`
+        this.cronDescription = null
+      }
+    },
+
+    updateCronExpr(index, value) {
+      this.cronExpr[index] = value
+      this.updateCronDescription()
+      if (!this.error)
+        this.$emit('input', this.cronString)
+    },
+  },
+
+  mounted() {
+    this.updateCronDescription()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.cron-editor-container {
+  display: flex;
+  flex-direction: column;
+
+  .input-grid {
+    label {
+      display: flex;
+      align-items: center;
+      font-weight: bold;
+      border: 1px solid transparent;
+      border-radius: 1em;
+      padding: 0.25em;
+
+      &.selected {
+        border: 1px solid $selected-fg;
+      }
+    }
+
+    input[type="text"] {
+      width: 100%;
+    }
+  }
+
+  .error {
+    color: $error-fg;
+
+    label {
+      input[type="text"] {
+        border-color: $error-fg;
+      }
+    }
+  }
+
+  .cron-description {
+    margin-top: 0.5em;
+    padding: 0.25em;
+    font-size: 0.9em;
+    font-weight: bold;
+    background: $code-light-bg;
+    color: $default-fg-2;
+    border-radius: 1em;
+    border: $default-border-3;
+
+    span {
+      font-weight: normal;
+      font-style: italic;
+    }
+  }
+}
+</style>