Merge pull request seriousm4x#749 from studiojw/feat/ui-next-cron-time

feat: add function to format next cron execution time as relative string
PithomLabs · Sep 3, 2024 · 0bd16b8 · 0bd16b8
2 parents 8555e08 + e3259b1
commit 0bd16b8
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -46,6 +46,7 @@
 	},
 	"dependencies": {
 		"@fortawesome/free-solid-svg-icons": "^6.6.0",
+		"cron-parser": "^4.9.0",
 		"date-fns": "^3.6.0",
 		"npm-run-all": "^4.1.5",
 		"pocketbase": "^0.21.5",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/lib/components/DeviceCard.svelte b/frontend/src/lib/components/DeviceCard.svelte
@@ -11,8 +11,9 @@
 		faPen,
 		faRotateLeft
 	} from '@fortawesome/free-solid-svg-icons';
+	import cronParser from 'cron-parser';
 	import type { Locale } from 'date-fns';
-	import { formatDistance, parseISO } from 'date-fns';
+	import { formatDistance, formatRelative, parseISO } from 'date-fns';
 	import { de } from 'date-fns/locale/de';
 	import { enUS } from 'date-fns/locale/en-US';
 	import { es } from 'date-fns/locale/es';
@@ -128,6 +129,13 @@
 			toast.error(err.message);
 		});
 	}
+
+	function getNextCronRelativeTime(expression: string, now: number) {
+		const cron = cronParser.parseExpression(expression);
+		return formatRelative(cron.next().toISOString(), now, {
+			locale: dateFnsLocale
+		});
+	}
 </script>
 
 <div class="card rounded-3xl bg-base-300 shadow-md" transition:scale={{ delay: 0, duration: 200 }}>
@@ -144,18 +152,21 @@
 			<DeviceCardNic {device} />
 		</ul>
 		{#if device.wake_cron_enabled || device.shutdown_cron_enabled || device.password}
-			<div class="flex flex-row flex-wrap gap-2">
+			<div class="mt-1 flex flex-row flex-wrap gap-2">
 				{#if device.wake_cron_enabled}
 					<div class="tooltip" data-tip={$LL.device.card_tooltip_wake_cron()}>
 						<span class="badge badge-success gap-1 p-3"
-							><Fa icon={faCircleArrowUp} />{device.wake_cron}</span
+							><Fa icon={faCircleArrowUp} />{getNextCronRelativeTime(device.wake_cron, now)}</span
 						>
 					</div>
 				{/if}
 				{#if device.shutdown_cron_enabled}
 					<div class="tooltip" data-tip={$LL.device.card_tooltip_shutdown_cron()}>
 						<span class="badge badge-error gap-1 p-3"
-							><Fa icon={faCircleArrowDown} />{device.shutdown_cron}</span
+							><Fa icon={faCircleArrowDown} />{getNextCronRelativeTime(
+								device.shutdown_cron,
+								now
+							)}</span
 						>
 					</div>
 				{/if}