@live-change/task-frontend 0.9.163 → 0.9.165

package/front/src/components/AdminTopMenu.vue

@@ -0,0 +1,41 @@
+<template>
+
+  <ul class="bg-surface-0 dark:bg-surface-900 p-0 m-0 list-none flex overflow-x-auto select-none">
+    <li v-for="entry in entries" :key="entry.label" class="flex-1 p-0 m-0">
+      <router-link
+          :to="entry.route ? { name: entry.route, params: { } } : null"
+          :target="entry.target"
+          v-ripple
+          class="cursor-pointer px-4 py-3 flex items-center justify-center
+                 border-y-2 hover:border-b-primary-400
+                 transition-colors transition-duration-150 p-ripple no-underline"
+          :class="[
+            route.name === entry.route
+              ? 'border-b-surface-400 text-surface-300 hover:border-b-surface-700 border-t-transparent'
+              : 'text-surface-700 dark:text-surface-100 border-transparent'
+          ]">
+        <i v-if="entry.icon" class="mr-2" :class="[ entry.icon ]"></i>
+        <span class="font-medium">{{ entry.label }}</span>
+      </router-link>
+    </li>
+  </ul>
+  
+</template>
+
+<script setup>
+
+  import { useRoute } from 'vue-router'
+  const route = useRoute()
+
+  const entries = [
+    { label: 'Intervals', icon: 'pi pi-clock', route: 'cron:admin:intervals' },
+    { label: 'Schedules', icon: 'pi pi-calendar', route: 'cron:admin:schedules' },
+    { label: 'Tasks', icon: 'pi pi-tasks', route: 'task:admin' },
+  ]
+
+</script>
+
+
+<style scoped>
+
+</style>

package/front/src/components/IntervalCard.vue

@@ -6,6 +6,14 @@
         <div class="ml-2">{{ intervalData.description || intervalData.id }}</div>
       </div>      
       <div class="flex flex-row items-center gap-4">
+        <div class="text-sm">
+          <strong>Last</strong>
+          {{ lastRunDisplay }}
+        </div>        
+        <div class="text-sm">
+          <strong>Next</strong>
+          {{ nextRunDisplay }}
+        </div>
         <div class="text-sm">
           Every {{ formatInterval(intervalData.interval) }}
         </div>
@@ -15,13 +23,25 @@
           text
           rounded
         />
+        <Button
+          icon="pi pi-trash"
+          @click="deleteInterval"
+          text
+          rounded
+        />
       </div>
     </div>
     
     <div v-if="isExpanded" class="mt-2 p-2 bg-surface-50 dark:bg-surface-800 rounded">
       <div class="grid grid-cols-1 gap-2 text-sm">
-        <div><strong>Interval:</strong> {{ formatInterval(intervalData.interval) }} ({{ intervalData.interval }}ms)</div>
-        <div v-if="intervalData.wait"><strong>Wait:</strong> {{ formatInterval(intervalData.wait) }} ({{ intervalData.wait }}ms)</div>
+        <div>
+          <strong>Interval:</strong> 
+          {{ formatInterval(intervalData.interval) }} ({{ intervalData.interval }}ms)
+        </div>
+        <div v-if="intervalData.wait">
+          <strong>Wait:</strong> 
+          {{ formatInterval(intervalData.wait) }} ({{ intervalData.wait }}ms)
+        </div>
       </div>
       <div v-if="intervalData.trigger" class="mt-2">
         <strong>Trigger:</strong>
@@ -30,7 +50,8 @@
           <div><strong>Service:</strong> {{ intervalData.trigger.service || 'any' }}</div>
           <div v-if="intervalData.trigger.properties">
             <strong>Properties:</strong>
-            <pre class="text-xs bg-surface-100 dark:bg-surface-700 p-1 rounded mt-1">{{ JSON.stringify(intervalData.trigger.properties, null, 2) }}</pre>
+            <pre class="text-xs bg-surface-100 dark:bg-surface-700 p-1 rounded mt-1"
+              >{{ JSON.stringify(intervalData.trigger.properties, null, 2) }}</pre>
           </div>
         </div>
       </div>
@@ -52,14 +73,37 @@
           </div>
         </div>
       </div>
+
+      <div v-if="intervalInfoData" class="mt-2 grid grid-cols-1 gap-1 text-sm">
+        <div v-if="intervalInfoData.lastRun">
+          <strong>Last Run: </strong>
+          <span :title="lastRunAbsolute || undefined">{{ lastRunDisplay }}</span>
+        </div>
+        <div v-if="intervalInfoData.nextRun">
+          <strong>Next Run: </strong>
+          <span :title="nextRunAbsolute || undefined">{{ nextRunDisplay }}</span>
+        </div>
+      </div>
+
+      <div v-if="tasksData?.length" class="mt-2">
+        <strong>Last 5 Tasks:</strong>
+        <div class="ml-2 text-sm">
+          <div v-for="task in tasksData" :key="task.id">
+            <TaskAdminCard :task="task" class="mt-1" />
+          </div>
+        </div>
+      </div>
+
+      <!-- <pre>{{ JSON.stringify(intervalData, null, 2) }}</pre> -->
     </div>
   </div>
 </template>
 
 <script setup>
-  import { ref, computed, watch } from 'vue'
+  import { ref, computed, onMounted, onUnmounted } from 'vue'
   import Button from 'primevue/button'
   import { usePath, live } from '@live-change/vue3-ssr'
+  import { currentTime } from "@live-change/frontend-base"
 
   const props = defineProps({
     interval: {
@@ -70,22 +114,6 @@
 
   const intervalData = computed(() => props.interval)
   const isExpanded = ref(false)
-  const runStateData = ref(null)
-  const path = usePath()
-
-  // Watch for interval changes and fetch run state
-  watch(() => props.interval?.id, async (newId) => {
-    if (newId) {
-      try {
-        // Get run state for this specific interval
-        const runStatePath = path.cron_RunState.to(['cron_Interval', newId])
-        runStateData.value = await live(runStatePath)
-      } catch (error) {
-        console.error('Error fetching run state:', error)
-        runStateData.value = null
-      }
-    }
-  }, { immediate: true })
 
   function formatInterval(ms) {
     if (!ms) return 'N/A'
@@ -101,6 +129,8 @@
     return `${seconds} second${seconds > 1 ? 's' : ''}`
   }
 
+  const runStateData = computed(() => intervalData.value?.runState)
+
   const runStateIcon = computed(() => {
     switch(runStateData.value?.state) {
       case 'running': return 'pi-play'
@@ -116,4 +146,71 @@
       default: return ''
     }
   })
+
+  const intervalInfoData = computed(() => intervalData.value?.info)
+
+
+  function formatAbsoluteMoment(timestamp) {
+    if (!timestamp) return ''
+    const date = new Date(timestamp)
+    if (Number.isNaN(date.getTime())) return ''
+    return date.toLocaleString()
+  }
+
+  function formatRelativeMoment(timestamp) {
+    if (!timestamp) return 'N/A'
+    const target = new Date(timestamp).getTime()
+    if (Number.isNaN(target)) return 'N/A'
+
+    const diff = target - currentTime.value
+    const absDiff = Math.abs(diff)
+    const dayMs = 24 * 60 * 60 * 1000
+
+    if (absDiff < dayMs) {
+      const hourMs = 60 * 60 * 1000
+      const minuteMs = 60 * 1000
+      const hours = Math.floor(absDiff / hourMs)
+      const minutes = Math.floor((absDiff % hourMs) / minuteMs)
+      const seconds = Math.floor((absDiff % minuteMs) / 1000)
+      const parts = []
+      if (hours > 0) parts.push(`${hours}h`)
+      if (minutes > 0) parts.push(`${minutes}m`)
+      parts.push(`${seconds}s`)
+      const relative = parts.join(' ')
+      if (diff > 0) return `in ${relative}`
+      if (diff < 0) return `${relative} ago`
+      return 'now'
+    }
+
+    return new Date(target).toLocaleString()
+  }
+
+  const lastRunDisplay = computed(() => formatRelativeMoment(intervalInfoData.value?.lastRun))
+  const nextRunDisplay = computed(() => formatRelativeMoment(intervalInfoData.value?.nextRun))
+  const lastRunAbsolute = computed(() => formatAbsoluteMoment(intervalInfoData.value?.lastRun))
+  const nextRunAbsolute = computed(() => formatAbsoluteMoment(intervalInfoData.value?.nextRun))
+
+  const tasksData = computed(() => intervalData.value?.tasks)
+
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+
+  function deleteInterval() {
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you want to delete this interval?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        console.log("deleteInterval", intervalData.value.id)
+        await api.actions.cron.deleteInterval({ interval: intervalData.value.id })
+        toast.add({ severity:'info', summary: 'Interval deleted', life: 1500 })
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
 </script>

package/front/src/components/ScheduleCard.vue

@@ -2,10 +2,18 @@
   <div class="bg-surface-0 dark:bg-surface-900 px-3 py-1 shadow">
     <div class="flex flex-row justify-between items-center" v-if="scheduleData">
       <div class="flex flex-row items-center">
-        <i class="pi pi-calendar" style="font-size: 1rem" />
+        <i class="pi pi-clock" style="font-size: 1rem" />
         <div class="ml-2">{{ scheduleData.description || scheduleData.id }}</div>
       </div>      
       <div class="flex flex-row items-center gap-4">
+        <div class="text-sm">
+          <strong>Last</strong>
+          {{ lastRunDisplay }}
+        </div>        
+        <div class="text-sm">
+          <strong>Next</strong>
+          {{ nextRunDisplay }}
+        </div>
         <div class="text-sm">
           {{ formatSchedule(scheduleData) }}
         </div>
@@ -15,16 +23,18 @@
           text
           rounded
         />
+        <Button
+          icon="pi pi-trash"
+          @click="deleteSchedule"
+          text
+          rounded
+        />
       </div>
     </div>
     
     <div v-if="isExpanded" class="mt-2 p-2 bg-surface-50 dark:bg-surface-800 rounded">
-      <div class="grid grid-cols-2 gap-2 text-sm">
-        <div><strong>Minute:</strong> {{ scheduleData.minute || '*' }}</div>
-        <div><strong>Hour:</strong> {{ scheduleData.hour || '*' }}</div>
-        <div><strong>Day:</strong> {{ scheduleData.day || '*' }}</div>
-        <div><strong>Day of Week:</strong> {{ scheduleData.dayOfWeek || '*' }}</div>
-        <div><strong>Month:</strong> {{ scheduleData.month || '*' }}</div>
+      <div class="grid grid-cols-1 gap-2 text-sm">
+        <div><strong>Schedule:</strong> {{ formatSchedule(scheduleData) }}</div>
       </div>
       <div v-if="scheduleData.trigger" class="mt-2">
         <strong>Trigger:</strong>
@@ -33,12 +43,14 @@
           <div><strong>Service:</strong> {{ scheduleData.trigger.service || 'any' }}</div>
           <div v-if="scheduleData.trigger.properties">
             <strong>Properties:</strong>
-            <pre class="text-xs bg-surface-100 dark:bg-surface-700 p-1 rounded mt-1">{{ JSON.stringify(scheduleData.trigger.properties, null, 2) }}</pre>
+            <pre class="text-xs bg-surface-100 dark:bg-surface-700 p-1 rounded mt-1">
+              {{ JSON.stringify(scheduleData.trigger.properties, null, 2) }}
+            </pre>
           </div>
         </div>
       </div>
       
-      <!-- RunState for this Schedule -->
+      <!-- RunState for this Interval -->
       <div v-if="runStateData" class="mt-2">
         <strong>Current Run State:</strong>
         <div class="ml-2 text-sm p-2 bg-surface-100 dark:bg-surface-700 rounded">
@@ -55,14 +67,37 @@
           </div>
         </div>
       </div>
+
+      <div v-if="scheduleInfoData" class="mt-2 grid grid-cols-1 gap-1 text-sm">
+        <div v-if="scheduleInfoData.lastRun">
+          <strong>Last Run: </strong>
+          <span :title="lastRunAbsolute || undefined">{{ lastRunDisplay }}</span>
+        </div>
+        <div v-if="scheduleInfoData.nextRun">
+          <strong>Next Run: </strong>
+          <span :title="nextRunAbsolute || undefined">{{ nextRunDisplay }}</span>
+        </div>
+      </div>
+
+      <div v-if="tasksData?.length" class="mt-2">
+        <strong>Last 5 Tasks:</strong>
+        <div class="ml-2 text-sm">
+          <div v-for="task in tasksData" :key="task.id">
+            <TaskAdminCard :task="task" class="mt-1" />
+          </div>
+        </div>
+      </div>
+
+      <pre>{{ JSON.stringify(intervalData, null, 2) }}</pre>
     </div>
   </div>
 </template>
 
 <script setup>
-  import { ref, computed, onMounted, watch } from 'vue'
+  import { ref, computed, onMounted, onUnmounted } from 'vue'
   import Button from 'primevue/button'
   import { usePath, live } from '@live-change/vue3-ssr'
+  import { currentTime } from "@live-change/frontend-base"
 
   const props = defineProps({
     schedule: {
@@ -73,43 +108,23 @@
 
   const scheduleData = computed(() => props.schedule)
   const isExpanded = ref(false)
-  const runStateData = ref(null)
-  const path = usePath()
-
-  // Watch for schedule changes and fetch run state
-  watch(() => props.schedule?.id, async (newId) => {
-    if (newId) {
-      try {
-        // Get the run state for this specific schedule
-        const runStatePath = path.cron_RunState.to(['cron_Schedule', newId])
-        runStateData.value = await live(runStatePath)
-      } catch (error) {
-        console.error('Error fetching run state:', error)
-        runStateData.value = null
-      }
-    }
-  }, { immediate: true })
+
+  const daysOfWeek = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]
+  const months = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
 
   function formatSchedule(schedule) {
     const parts = []
-    if (schedule.minute !== undefined && schedule.minute !== null) parts.push(schedule.minute)
-    else parts.push('*')
-    
-    if (schedule.hour !== undefined && schedule.hour !== null) parts.push(schedule.hour)
-    else parts.push('*')
-    
-    if (schedule.day !== undefined && schedule.day !== null) parts.push(schedule.day)
-    else parts.push('*')
-    
-    if (schedule.month !== undefined && schedule.month !== null) parts.push(schedule.month)
-    else parts.push('*')
-    
-    if (schedule.dayOfWeek !== undefined && schedule.dayOfWeek !== null) parts.push(schedule.dayOfWeek)
-    else parts.push('*')
-    
+    if(Number.isInteger(schedule.minute)) parts.push(`${schedule.minute}m`)
+    if(Number.isInteger(schedule.hour)) parts.push(`${schedule.hour}h`)
+    if(Number.isInteger(schedule.day)) parts.push(`${schedule.day}`)
+    if(Number.isInteger(schedule.dayOfWeek)) parts.push(`${daysOfWeek[schedule.dayOfWeek - 1]}`)
+    if(Number.isInteger(schedule.month)) parts.push(`${months[schedule.month - 1]}`)
+    if(parts.length === 0) parts.push('every minute')
     return parts.join(' ')
   }
 
+  const runStateData = computed(() => scheduleData.value?.runState)
+
   const runStateIcon = computed(() => {
     switch(runStateData.value?.state) {
       case 'running': return 'pi-play'
@@ -125,4 +140,71 @@
       default: return ''
     }
   })
+
+  const scheduleInfoData = computed(() => scheduleData.value?.info)
+
+
+  function formatAbsoluteMoment(timestamp) {
+    if (!timestamp) return ''
+    const date = new Date(timestamp)
+    if (Number.isNaN(date.getTime())) return ''
+    return date.toLocaleString()
+  }
+
+  function formatRelativeMoment(timestamp) {
+    if (!timestamp) return 'N/A'
+    const target = new Date(timestamp).getTime()
+    if (Number.isNaN(target)) return 'N/A'
+
+    const diff = target - currentTime.value
+    const absDiff = Math.abs(diff)
+    const dayMs = 24 * 60 * 60 * 1000
+
+    if (absDiff < dayMs) {
+      const hourMs = 60 * 60 * 1000
+      const minuteMs = 60 * 1000
+      const hours = Math.floor(absDiff / hourMs)
+      const minutes = Math.floor((absDiff % hourMs) / minuteMs)
+      const seconds = Math.floor((absDiff % minuteMs) / 1000)
+      const parts = []
+      if (hours > 0) parts.push(`${hours}h`)
+      if (minutes > 0) parts.push(`${minutes}m`)
+      parts.push(`${seconds}s`)
+      const relative = parts.join(' ')
+      if (diff > 0) return `in ${relative}`
+      if (diff < 0) return `${relative} ago`
+      return 'now'
+    }
+
+    return new Date(target).toLocaleString()
+  }
+
+  const lastRunDisplay = computed(() => formatRelativeMoment(scheduleInfoData.value?.lastRun))
+  const nextRunDisplay = computed(() => formatRelativeMoment(scheduleInfoData.value?.nextRun))
+  const lastRunAbsolute = computed(() => formatAbsoluteMoment(scheduleInfoData.value?.lastRun))
+  const nextRunAbsolute = computed(() => formatAbsoluteMoment(scheduleInfoData.value?.nextRun))
+
+  const tasksData = computed(() => scheduleData.value?.tasks)
+
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+
+  function deleteSchedule() {
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you want to delete this schedule?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        console.log("deleteSchedule", scheduleData.value.id)
+        await api.actions.cron.deleteSchedule({ schedule: scheduleData.value.id })
+        toast.add({ severity:'info', summary: 'Schedule deleted', life: 1500 })
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
 </script>

package/front/src/components/TaskAdminDetails.vue

@@ -35,6 +35,7 @@
           {{ (new Date(taskData.doneAt).getTime() - new Date(taskData.startedAt).getTime()) / 1000 }}s
         </div>
       </div>      
+
       
       <div class="grid grid-cols-2 gap-2 text-sm" v-if="taskData.doneAt">
         <div v-if="taskData.doneAt">Done:</div>
@@ -47,6 +48,11 @@
           {{ taskData.client }}
         </div>
       </div>
+
+      <div class="grid grid-cols-2 gap-2 text-sm" v-if="taskData.cause">
+        <div>Cause:</div>
+        <div>{{ taskData.causeType }} - {{ taskData.cause }}</div>
+      </div>
     </div>
 
     <div v-if="taskData.properties" class="mt-2">

package/front/src/pages/CronAdmin.vue

@@ -1,83 +1,20 @@
 <template>
-  <div class="w-full">
-
-    <ActionForm
-      service="cron"
-      action="setInterval"
-      :parameters="intervalParameters"
-      @done="handleActionDone" />
-    
-
-    <div class="bg-surface-0 dark:bg-surface-900 p-3 shadow mb-1">
-      <h3>{{ t('cron.intervals') }}</h3>
-      <range-viewer :pathFunction="intervalsPathFunction" :key="JSON.stringify(intervalsPathConfig)"
-                    :canLoadTop="false" :canDropBottom="false"
-                    loadBottomSensorSize="3000px" dropBottomSensorSize="12000px">
-        <template #empty>
-          <div class="bg-surface-0 p-3 shadow text-center text-gray-500 text-lg">
-            No intervals found...
-          </div>
-        </template>
-
-        <template #default="{ item: interval }">     
-          <IntervalCard :interval="interval" class="mt-1" />
-        </template>
-      </range-viewer>
+  <div class="w-full px-4 py-5 flex flex-col items-center justify-center">
+    <div class="bg-surface-0 dark:bg-surface-900 p-3 shadow mb-1 w-60 text-center mb-4">
+      <h1 class="my-1 text-center">Cron Admin</h1>
     </div>
-    
+    <div class="flex flex-row gap-4 items-center justify-center">
+      <router-link :to="{ name: 'cron:admin:intervals' }" class="no-underline">
+        <Button label="Intervals" icon="pi pi-clock" size="large" />
+      </router-link>
+      <router-link :to="{ name: 'cron:admin:schedules' }" class="no-underline">
+        <Button label="Schedules" icon="pi pi-calendar" size="large" />
+      </router-link>
+    </div>
+     
   </div>
 </template>
 
 <script setup>
-  
-  import ScheduleCard from '../components/ScheduleCard.vue'
-  import IntervalCard from '../components/IntervalCard.vue'
-  import Select from 'primevue/select'
-  import InputText from 'primevue/inputtext'
-  import InputNumber from 'primevue/inputnumber'
-  import Dropdown from 'primevue/dropdown'
-  import Button from 'primevue/button'
-
-
-  import { ActionForm } from '@live-change/frontend-auto-form'
-
-  import { useI18n } from 'vue-i18n'    
-  const { t } = useI18n()
-
-  import { ref, computed } from 'vue'
-  import { RangeViewer } from "@live-change/vue3-components"
-
-  import { inject } from 'vue'
-  const workingZone = inject('workingZone')
-
-  import { usePath, live, useClient, useActions, reverseRange, useApi } from '@live-change/vue3-ssr'
-  const path = usePath()
-  const client = useClient()
-  const actions = useActions()
-  const api = useApi()
-
-  const taskType = ref('all')
-
-  // Available test tasks
-  const taskOptions = ref([
-    { label: 'Build Shelter', value: 'buildShelter' },
-    { label: 'Get Wood', value: 'getWood' },
-    { label: 'Cut Wood', value: 'cutWood' },
-    { label: 'Make Planks', value: 'makePlanks' },
-    { label: 'Build Wall', value: 'buildWall' },
-    { label: 'Build Roof', value: 'buildRoof' }
-  ])
-
-  const schedulesPathFunction = computed(() => (range) => 
-    path.cron.schedules({ ...reverseRange(range) })
-  )
-
-  const intervalsPathFunction = computed(() => (range) => 
-    path.cron.intervals({ ...reverseRange(range) })
-  )
-
-  const services = computed(() => Object.keys(api.metadata.api.value.services))
-
-
 
-</script>
+</script>

package/front/src/pages/CronIntervalsAdmin.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="w-full px-4 py-5">
+
+    <AdminTopMenu />
+
+    <div class="bg-surface-0 dark:bg-surface-900 p-3 shadow mb-1">
+      <ActionForm
+        service="cron"
+        action="setInterval" />
+
+    </div>
+    
+
+    <div class="bg-surface-0 dark:bg-surface-900 p-3 shadow mb-1">
+      <h3>{{ t('cron.intervals') }}</h3>
+      <range-viewer :pathFunction="intervalsPathFunction" key="intervals"
+                    :canLoadTop="false" :canDropBottom="false"
+                    loadBottomSensorSize="3000px" dropBottomSensorSize="12000px">
+        <template #empty>
+          <div class="bg-surface-0 p-3 shadow text-center text-gray-500 text-lg">
+            No intervals found...
+          </div>
+        </template>
+
+        <template #default="{ item: interval }">     
+          <IntervalCard :interval="interval" class="mt-1" />
+        </template>
+      </range-viewer>
+    </div>
+    
+  </div>
+</template>
+
+<script setup>
+  
+  import ScheduleCard from '../components/ScheduleCard.vue'
+  import IntervalCard from '../components/IntervalCard.vue'
+  import Select from 'primevue/select'
+  import InputText from 'primevue/inputtext'
+  import InputNumber from 'primevue/inputnumber'
+  import Dropdown from 'primevue/dropdown'
+  import Button from 'primevue/button'
+
+  import AdminTopMenu from '../components/AdminTopMenu.vue'
+  import { ActionForm } from '@live-change/frontend-auto-form'
+
+  import { useI18n } from 'vue-i18n'    
+  const { t } = useI18n()
+
+  import { ref, computed } from 'vue'
+  import { RangeViewer } from "@live-change/vue3-components"
+
+  import { inject } from 'vue'
+  const workingZone = inject('workingZone')
+
+  import { usePath, live, useClient, useActions, reverseRange, useApi } from '@live-change/vue3-ssr'
+  const path = usePath()
+  const client = useClient()
+  const actions = useActions()
+  const api = useApi()
+
+  const intervalsPathFunction = computed(() => (range) => 
+    path.cron.intervals({ ...reverseRange(range) })
+      .with(interval => path.cron.intervalInfo({ interval: interval.id }).bind('info'))
+      .with(interval => path.cron.runState({ jobType: 'cron_Interval', job: interval.id }).bind('runState'))
+      .with(interval => path.task.tasksByCauseAndCreatedAt({
+        causeType: 'cron_Interval', cause: interval.id, reverse: true, limit: 5
+      }).bind('tasks'))
+  )
+
+  const services = computed(() => Object.keys(api.metadata.api.value.services))
+
+
+
+</script>

package/front/src/pages/CronSchedulesAdmin.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="w-full px-4 py-5">
+
+    <AdminTopMenu />
+
+    <div class="bg-surface-0 dark:bg-surface-900 p-3 shadow mb-1">
+      <ActionForm
+        service="cron"
+        action="setSchedule" />
+
+    </div>
+    
+
+    <div class="bg-surface-0 dark:bg-surface-900 p-3 shadow mb-1">
+      <h3>{{ t('cron.schedules') }}</h3>
+      <range-viewer :pathFunction="schedulesPathFunction" key="schedules"
+                    :canLoadTop="false" :canDropBottom="false"
+                    loadBottomSensorSize="3000px" dropBottomSensorSize="12000px">
+        <template #empty>
+          <div class="bg-surface-0 p-3 shadow text-center text-gray-500 text-lg">
+            No schedules found...
+          </div>
+        </template>
+
+        <template #default="{ item: schedule }">     
+          <ScheduleCard :schedule="schedule" class="mt-1" />
+        </template>
+      </range-viewer>
+    </div>
+    
+  </div>
+</template>
+
+<script setup>
+  
+  import ScheduleCard from '../components/ScheduleCard.vue'
+  import IntervalCard from '../components/IntervalCard.vue'
+  import Select from 'primevue/select'
+  import InputText from 'primevue/inputtext'
+  import InputNumber from 'primevue/inputnumber'
+  import Dropdown from 'primevue/dropdown'
+  import Button from 'primevue/button'
+
+  import AdminTopMenu from '../components/AdminTopMenu.vue'
+  import { ActionForm } from '@live-change/frontend-auto-form'
+
+  import { useI18n } from 'vue-i18n'    
+  const { t } = useI18n()
+
+  import { ref, computed } from 'vue'
+  import { RangeViewer } from "@live-change/vue3-components"
+
+  import { inject } from 'vue'
+  const workingZone = inject('workingZone')
+
+  import { usePath, live, useClient, useActions, reverseRange, useApi } from '@live-change/vue3-ssr'
+  const path = usePath()
+  const client = useClient()
+  const actions = useActions()
+  const api = useApi()
+
+  const schedulesPathFunction = computed(() => (range) => 
+    path.cron.schedules({ ...reverseRange(range) })
+      .with(schedule => path.cron.scheduleInfo({ schedule: schedule.id }).bind('info'))
+      .with(schedule => path.cron.runState({ jobType: 'cron_Schedule', job: schedule.id }).bind('runState'))
+      .with(schedule => path.task.tasksByCauseAndCreatedAt({ 
+        causeType: 'cron_Schedule', cause: schedule.id, reverse: true, limit: 5 
+      }).bind('tasks'))
+  )
+
+  const services = computed(() => Object.keys(api.metadata.api.value.services))
+
+
+
+</script>

package/front/src/router.js

@@ -3,7 +3,7 @@ export function taskAdminRoutes(config = {}) {
   return [
 
     route({
-      name: 'task:admin', path: prefix, meta: { },
+      name: 'task:admin', path: prefix, meta: { requireRoles: ['admin'] },
       component: () => import("./pages/TaskAdmin.vue"),
       props: true
     }),
@@ -14,10 +14,20 @@ export function cronAdminRoutes(config = {}) {
   const { prefix = '/', route = (r) => r } = config
   return [
     route({
-      name: 'cron:admin', path: prefix, meta: { },
+      name: 'cron:admin', path: prefix, meta: { requireRoles: ['admin'] },
       component: () => import("./pages/CronAdmin.vue"),
       props: true
     }),
+    route({
+      name: 'cron:admin:intervals', path: prefix+'/intervals', meta: { requireRoles: ['admin'] },
+      component: () => import("./pages/CronIntervalsAdmin.vue"),
+      props: true
+    }),
+    route({
+      name: 'cron:admin:schedules', path: prefix+'/schedules', meta: { requireRoles: ['admin'] },
+      component: () => import("./pages/CronSchedulesAdmin.vue"),
+      props: true
+    }),
   ]
 }
 
@@ -56,8 +66,8 @@ export function routes(config = {}) {
 
     ...contentEditRoutes({ ...config }),
 
-    ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) }),
-    ...taskAdminRoutes({ prefix: '/_task', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) }),
+    ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, pageType: 'wide' }}) }),
+    ...taskAdminRoutes({ prefix: '/_task', route: r => ({ ...r, meta: { ...r.meta, pageType: 'wide' }}) }),
     ...cronAdminRoutes({ prefix: '/_cron', route: r => ({ ...r, meta: { ...r.meta, pageType: 'wide' }}) }),
     ...catchAllPagesRoute({ ...config }),
   ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/task-frontend",
-  "version": "0.9.163",
+  "version": "0.9.165",
   "scripts": {
     "memDev": "tsx --inspect --expose-gc server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "tsx server/start.js localDev --enableSessions --initScript ./init.js --dbAccess",
@@ -37,43 +37,43 @@
     "@codemirror/language": "6.10.1",
     "@dotenvx/dotenvx": "0.27.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "@live-change/access-control-frontend": "^0.9.163",
-    "@live-change/access-control-service": "^0.9.163",
-    "@live-change/backup-service": "^0.9.163",
-    "@live-change/blog-frontend": "^0.9.163",
-    "@live-change/blog-service": "^0.9.163",
-    "@live-change/cli": "^0.9.163",
-    "@live-change/content-frontend": "^0.9.163",
-    "@live-change/content-service": "^0.9.163",
-    "@live-change/cron-service": "^0.9.163",
-    "@live-change/dao": "^0.9.163",
-    "@live-change/dao-vue3": "^0.9.163",
-    "@live-change/dao-websocket": "^0.9.163",
-    "@live-change/db-client": "^0.9.163",
-    "@live-change/draft-service": "^0.9.163",
-    "@live-change/email-service": "^0.9.163",
-    "@live-change/framework": "^0.9.163",
-    "@live-change/frontend-auto-form": "^0.9.163",
-    "@live-change/frontend-base": "^0.9.163",
-    "@live-change/geoip-service": "^0.9.163",
-    "@live-change/image-frontend": "^0.9.163",
-    "@live-change/locale-settings-service": "^0.9.163",
-    "@live-change/password-authentication-service": "^0.9.163",
-    "@live-change/prosemirror-service": "^0.9.163",
-    "@live-change/secret-code-service": "^0.9.163",
-    "@live-change/secret-link-service": "^0.9.163",
-    "@live-change/session-service": "^0.9.163",
-    "@live-change/task-service": "^0.9.163",
-    "@live-change/upload-frontend": "^0.9.163",
-    "@live-change/url-frontend": "^0.9.163",
-    "@live-change/url-service": "^0.9.163",
-    "@live-change/user-frontend": "^0.9.163",
-    "@live-change/user-identification-service": "^0.9.163",
-    "@live-change/user-service": "^0.9.163",
-    "@live-change/vote-service": "^0.9.163",
-    "@live-change/vue3-components": "^0.9.163",
-    "@live-change/vue3-ssr": "^0.9.163",
-    "@live-change/wysiwyg-frontend": "^0.9.163",
+    "@live-change/access-control-frontend": "^0.9.165",
+    "@live-change/access-control-service": "^0.9.165",
+    "@live-change/backup-service": "^0.9.165",
+    "@live-change/blog-frontend": "^0.9.165",
+    "@live-change/blog-service": "^0.9.165",
+    "@live-change/cli": "^0.9.165",
+    "@live-change/content-frontend": "^0.9.165",
+    "@live-change/content-service": "^0.9.165",
+    "@live-change/cron-service": "^0.9.165",
+    "@live-change/dao": "^0.9.165",
+    "@live-change/dao-vue3": "^0.9.165",
+    "@live-change/dao-websocket": "^0.9.165",
+    "@live-change/db-client": "^0.9.165",
+    "@live-change/draft-service": "^0.9.165",
+    "@live-change/email-service": "^0.9.165",
+    "@live-change/framework": "^0.9.165",
+    "@live-change/frontend-auto-form": "^0.9.165",
+    "@live-change/frontend-base": "^0.9.165",
+    "@live-change/geoip-service": "^0.9.165",
+    "@live-change/image-frontend": "^0.9.165",
+    "@live-change/locale-settings-service": "^0.9.165",
+    "@live-change/password-authentication-service": "^0.9.165",
+    "@live-change/prosemirror-service": "^0.9.165",
+    "@live-change/secret-code-service": "^0.9.165",
+    "@live-change/secret-link-service": "^0.9.165",
+    "@live-change/session-service": "^0.9.165",
+    "@live-change/task-service": "^0.9.165",
+    "@live-change/upload-frontend": "^0.9.165",
+    "@live-change/url-frontend": "^0.9.165",
+    "@live-change/url-service": "^0.9.165",
+    "@live-change/user-frontend": "^0.9.165",
+    "@live-change/user-identification-service": "^0.9.165",
+    "@live-change/user-service": "^0.9.165",
+    "@live-change/vote-service": "^0.9.165",
+    "@live-change/vue3-components": "^0.9.165",
+    "@live-change/vue3-ssr": "^0.9.165",
+    "@live-change/wysiwyg-frontend": "^0.9.165",
     "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.5",
@@ -95,7 +95,7 @@
     "vue3-scroll-border": "0.1.7"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.163",
+    "@live-change/codeceptjs-helper": "^0.9.165",
     "codeceptjs": "^3.6.10",
     "generate-password": "1.7.1",
     "playwright": "1.49.1",
@@ -106,5 +106,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "c410e1dacd07daed9a5c55367abd7f19d9a575cc"
+  "gitHead": "687dab16bd0c6594544cdab70cd7eecc17bb510c"
 }

package/server/app.config.js

@@ -8,6 +8,9 @@ import documentTypePage from './page.documentType.js'
 
 app.config = {
   services: [
+    {
+      name: 'timer',
+    },
     {
       name: 'session',
       createSessionOnUpdate: true

package/server/services.list.js

@@ -1,3 +1,4 @@
+import timer from '@live-change/timer-service'
 import session from '@live-change/session-service'
 import user from '@live-change/user-service'
 import email from '@live-change/email-service'
@@ -25,6 +26,7 @@ import cron from '@live-change/cron-service'
 import init from './init.js'
 
 export {
+  timer,
   session,
   user,
   email,

package/server/testTasks.js

@@ -22,12 +22,45 @@ const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
 const workerQueue = new PQueue({ concurrency: workersCount })
 
+const woodTypes = ['oak', 'birch', 'spruce', 'acacia']
+
+
+const wait = task({
+  name: 'wait',
+  properties: {
+    duration: {
+      type: Number,
+      validation: ['nonEmpty', 'integer'],
+      input: 'integer',
+      inputConfig: {
+        attributes: {
+          suffix: ' ms',
+          showButtons: true,
+          step: 1000,
+          min: 0,
+        }
+      },
+      defaultValue: 10000
+    }
+  },
+  returns: {
+    type: 'void',
+  },
+  async execute({ duration }, { service, task }, emit) {
+    console.log("WAIT", duration)
+    await sleep(duration)
+  }
+}, definition)
+
+
 const getWood = task({
   name: 'getWood',
   properties: {
     woodType: {
       type: String,
-      validation: ['nonEmpty']
+      validation: ['nonEmpty'],
+      options: woodTypes,
+      input: 'select'
     },
   },
   returns: {
@@ -39,6 +72,7 @@ const getWood = task({
     }
   },
   async execute({ woodType }, { service, task }, emit) {
+    console.log("GET WOOD", woodType)
     task.progress(0, 1, 'finding tree')
     await sleep(workDuration)
     if(Math.random() < 0.1) {
@@ -61,7 +95,9 @@ const cutWood = task({
       type: 'Wood',
       properties: {
         woodType: {
-          type: String
+          type: String,
+          options: woodTypes,
+          input: 'select'
         }
       }
     },