feat: add image preview to rector file list and adjust dispatch time

text colors Signed-off-by: Alexander Trost <[email protected]>
fivenet-app · Aug 27, 2024 · 600e284 · 600e284
1 parent 6c86e03
commit 600e284
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 14 deletions.
diff --git a/app/components/centrum/helpers.ts b/app/components/centrum/helpers.ts
@@ -129,26 +129,29 @@ export function dispatchTimeToTextColor(
     status: StatusDispatch = StatusDispatch.UNSPECIFIED,
     maxTime: number = 600,
 ): string {
-    const time = (Date.now() - toDate(date).getTime()) / 1000;
-
     if (isStatusDispatchCompleted(status)) {
-        return '';
+        return 'text-success-300';
     }
 
+    // Get passed time in minutes
+    const time = (Date.now() - toDate(date).getTime()) / 1000;
+
     const over = time / maxTime;
-    if (over <= 0.15) {
-        return '';
-    } else if (over <= 0.2) {
-        return 'text-orange-300';
-    } else if (over <= 0.3) {
+    if (over >= 0.1) {
+        return 'text-yellow-100';
+    } else if (over >= 0.2) {
         return 'text-yellow-300';
-    } else if (over <= 0.5) {
-        return 'text-orange-500';
-    } else if (over <= 0.8) {
+    } else if (over >= 0.35) {
+        return 'text-orange-300';
+    } else if (over >= 0.55) {
+        return 'text-orange-400';
+    } else if (over >= 0.7) {
         return 'text-red-400';
+    } else if (over > 0.85) {
+        return 'text-red-700 animate-bounce';
     }
 
-    return 'text-red-700 animate-bounce';
+    return '';
 }
 
 export function dispatchTimeToTextColorSidebar(

diff --git a/app/components/citizens/info/CitizenActions.vue b/app/components/citizens/info/CitizenActions.vue
@@ -228,7 +228,7 @@ if (props.registerShortcuts) {
 
         <UDivider />
 
-        <UButton block icon="i-mdi-link" @click="copyLinkToClipboard()">
+        <UButton block icon="i-mdi-link-variant" @click="copyLinkToClipboard()">
             {{ $t('components.citizens.CitizenInfoProfile.copy_profile_link') }}
         </UButton>
     </div>

diff --git a/app/components/rector/filestore/FileList.vue b/app/components/rector/filestore/FileList.vue
@@ -75,6 +75,10 @@ const columns = [
         label: t('common.action', 2),
         sortable: false,
     },
+    {
+        key: 'preview',
+        label: t('common.preview'),
+    },
     {
         key: 'name',
         label: t('common.name'),
@@ -92,6 +96,8 @@ const columns = [
         label: t('common.type'),
     },
 ];
+
+const previewTypes = ['jpg', 'jpeg', 'png', 'webp'];
 </script>
 
 <template>
@@ -146,7 +152,13 @@ const columns = [
             class="flex-1"
         >
             <template #actions-data="{ row: file }">
-                <UButton variant="link" icon="i-mdi-eye" :external="true" target="_blank" :to="`/api/filestore/${file.name}`" />
+                <UButton
+                    variant="link"
+                    icon="i-mdi-link-variant"
+                    :external="true"
+                    target="_blank"
+                    :to="`/api/filestore/${file.name}`"
+                />
                 <UButton
                     variant="link"
                     icon="i-mdi-trash-can"
@@ -157,6 +169,15 @@ const columns = [
                     "
                 />
             </template>
+            <template #name-data="{ row: file }">
+                <span class="text-gray-900 dark:text-white">
+                    {{ file.name }}
+                </span>
+            </template>
+            <template #preview-data="{ row: file }">
+                <span v-if="!previewTypes.some((ext) => file.name.endsWith(ext))"> </span>
+                <img v-else :src="`/api/filestore/${file.name}`" class="max-h-24 max-w-32" />
+            </template>
             <template #fileSize-data="{ row: file }">
                 {{ formatBytes(file.size) }}
             </template>