Add cron app configure view

dashboard/src/components/app/Cron.vue

@@ -0,0 +1,85 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted } from 'vue';
+import { Button, FormGroup } from 'pankow';
+import AppsModel from '../../models/AppsModel.js';
+
+const props = defineProps([ 'app' ]);
+
+const appsModel = AppsModel.create();
+
+function addCommonPattern(pattern) {
+  crontab.value += pattern + ' /path/to/command\n';
+}
+
+const commonPatternsMenu = [
+  { label: t('app.cron.commonPattern.everyMinute'),  action: () => addCommonPattern('*    *    *    *    *') },
+  { label: t('app.cron.commonPattern.everyHour'),    action: () => addCommonPattern('0    *    *    *    *') },
+  { label: t('app.cron.commonPattern.twicePerHour'), action: () => addCommonPattern('*/30 *    *    *    *') },
+  { label: t('app.cron.commonPattern.everyDay'),     action: () => addCommonPattern('0    0    *    *    *') },
+  { label: t('app.cron.commonPattern.twicePerDay'),  action: () => addCommonPattern('0    */12 *    *    *') },
+  { label: t('app.cron.commonPattern.everySunday'),  action: () => addCommonPattern('0    0    *    *    0') },
+
+  { label: t('app.cron.commonPattern.daily'),   action: () => addCommonPattern('@daily') },
+  { label: t('app.cron.commonPattern.hourly'),  action: () => addCommonPattern('@hourly') },
+  { label: t('app.cron.commonPattern.service'), action: () => addCommonPattern('@service') }
+];
+
+const crontabDefault = `
+# +------------------------ minute (0 - 59)
+# |    +------------------- hour (0 - 23)
+# |    |    +-------------- day of month (1 - 31)
+# |    |    |    +--------- month (1 - 12)
+# |    |    |    |    +---- day of week (0 - 6) (Sunday=0 or 7)
+# |    |    |    |    |
+# *    *    *    *    * command to be executed
+
+`;
+
+const busy = ref(false);
+const crontab = ref('');
+
+async function onSubmit() {
+  if (crontab.value === crontabDefault && !props.app.crontab) return;
+  if (crontab.value === props.app.crontab) return;
+
+  busy.value = true;
+
+  const [error] = await appsModel.configure(props.app.id, 'crontab', { crontab: crontab.value });
+  if (error) return console.error(error);
+
+  busy.value = false;
+}
+
+onMounted(() => {
+  crontab.value = props.app.crontab || crontabDefault;
+});
+
+</script>
+
+<template>
+  <div>
+    <form @submit.prevent="onSubmit()" autocomplete="off">
+      <fieldset :disabled="busy || app.error">
+        <input style="display: none;" type="submit" />
+
+        <FormGroup>
+          <label style="display: flex; justify-content: space-between;">
+            <span>{{ $t('app.cron.title') }} <sup><a href="https://docs.cloudron.io/apps/#cron" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></span>
+            <Button small outline :menu="commonPatternsMenu">{{ $t('app.cron.addCommonPattern') }}</Button>
+          </label>
+          <p>{{ $t('app.cron.description') }}</p>
+          <textarea style="white-space: pre-wrap; font-family: monospace;" v-model="crontab" rows="10"></textarea>
+        </FormGroup>
+
+        <br/>
+
+        <Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.cron.saveAction') }}</Button>
+      </fieldset>
+    </form>
+  </div>
+</template>

dashboard/src/views/AppConfigureView.vue

@@ -6,9 +6,10 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, onUnmounted, useTemplateRef, computed } from 'vue';
+import { ref, onMounted, onBeforeUnmount, useTemplateRef, computed } from 'vue';
 import { Button, ButtonGroup, TabView } from 'pankow';
 import Info from '../components/app/Info.vue';
+import Cron from '../components/app/Cron.vue';
 import Eventlog from '../components/app/Eventlog.vue';
 import Updates from '../components/app/Updates.vue';
 import Uninstall from '../components/app/Uninstall.vue';
@@ -135,7 +136,7 @@ onMounted(async () => {
   tabView.value.open(parts[1] || 'info');
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   if (refreshTimer) clearTimeout(refreshTimer);
 });
 
@@ -179,7 +180,7 @@ onUnmounted(() => {
       <template #graphs></template>
       <template #security></template>
       <template #email></template>
-      <template #cron></template>
+      <template #cron><Cron :app="app"/></template>
       <template #updates><Updates :app="app"/></template>
       <template #backups></template>
       <template #repair></template>