Instances and UI: show time ago

UI
==
- MultiInput: getTimeAgo reactive, add type time (WIP)
- ObjectArray: getTimeAgo reactive, show time ago for type time
- custom_utilities: add timeAgo

Server
=====
- Instances: add time with type time and set time

Author: ewowi

interface/src/lib/components/custom/MultiInput.svelte

@@ -12,8 +12,9 @@
 
 
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import FileEdit from '$lib/components/custom/FileEdit.svelte';
-    import {initCap} from '$lib/stores/custom_utilities';
+    import {initCap, getTimeAgo} from '$lib/stores/custom_utilities';
 
     export let property: any;
     export let value: any;
@@ -23,14 +24,24 @@
     export let step = 1;
     export let changeOnInput:boolean = true;
 
+    //make getTimeAgo reactive
+    export let currentTime = Date.now();
+    // Update the dummy variable every second
+    const interval = setInterval(() => {
+        currentTime = Date.now();
+    }, 1000);
+    onDestroy(() => {
+        clearInterval(interval);
+    });
+
 </script>
 
 <label class="label cursor-pointer" for={property.name}>
     <!-- <span class="label-text text-md">{initCap(property.name)}</span> -->
     <span class="mr-4">{initCap(property.name)}</span>
 </label>
 
-{#if property.ro}
+{#if property.ro && false}
     {#if property.type == "ip"}
         <a 
             href="http://{value}"
@@ -123,6 +134,8 @@
         on:change={onChange}
         on:input={(event:any) => {if (changeOnInput) onChange(event)}}
     />
+{:else if property.type == "time"}
+    <span>{value} {getTimeAgo(value, currentTime)}</span> 
 {:else if property.type == "ip"}
     <input 
         type={property.type}

interface/src/lib/components/custom/ObjectArray.svelte

@@ -12,6 +12,7 @@
 
 
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import DragDropList, { VerticalDropZone, reorder, type DropEvent } from 'svelte-dnd-list';
 	import Add from '~icons/tabler/circle-plus';
 	import { user } from '$lib/stores/user';
@@ -23,7 +24,7 @@
 	import Delete from '~icons/tabler/trash';
 	import MultiInput from '$lib/components/custom/MultiInput.svelte';
 	import ObjectArray from '$lib/components/custom/ObjectArray.svelte';
-    import {initCap} from '$lib/stores/custom_utilities';
+    import {initCap, getTimeAgo} from '$lib/stores/custom_utilities';
 
     let { property, data = $bindable(), definition, onChange, changeOnInput} = $props();
 
@@ -51,6 +52,17 @@
         }
     }
 
+    //make getTimeAgo reactive
+    let currentTime = $state(Date.now());
+    // Update the dummy variable every second
+    const interval = setInterval(() => {
+        currentTime = Date.now();
+    }, 1000);
+
+    onDestroy(() => {
+        clearInterval(interval);
+    });
+
 	function onDrop(propertyName: string, { detail: { from, to } }: CustomEvent<DropEvent>) {
 		
 		if (!to || from === to) {
@@ -154,7 +166,11 @@
                         <Router class="text-primary-content h-auto w-full scale-75" />
                     </div>
                     {#each property.n.slice(0, 3) as propertyN}
-                        {#if propertyN.type != "array" && propertyN.type != "password"}
+                        {#if propertyN.type == "time"}
+                            <div>
+                                <div class="font-bold">{getTimeAgo(data[property.name][index][propertyN.name], currentTime)}</div>
+                            </div>
+                        {:else if propertyN.type != "array" && propertyN.type != "password"}
                             <div>
                                 <div class="font-bold">{data[property.name][index][propertyN.name]}</div>
                             </div>

interface/src/lib/stores/custom_utilities.ts

@@ -19,4 +19,18 @@ export function initCap(s: string) {
         result+=s.charAt(i);
     }
     return result;
-}
+}
+
+export function getTimeAgo(timestamp: number, currentTime: number = Date.now()): string {
+    const diff = currentTime - timestamp * 1000; // Convert seconds to milliseconds
+
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`;
+    if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+    if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+    return `${seconds} second${seconds > 1 ? 's' : ''} ago`;
+}