(streampipes) branch dev updated: feat: Add color display for file types in File Management (#2107) (#2216)

[bossenti]

This is an automated email from the ASF dual-hosted git repository.

bossenti pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git


The following commit(s) were added to refs/heads/dev by this push:
     new 993f3717f feat: Add color display for file types in File Management 
(#2107) (#2216)
993f3717f is described below

commit 993f3717f9ca7add12a5216cf7c66d7521dec217
Author: Aamir shaikh <56036364+aamirxsha...@users.noreply.github.com>
AuthorDate: Thu Nov 23 14:32:12 2023 +0530

    feat: Add color display for file types in File Management (#2107) (#2216)
---
 .../file-overview/file-overview.component.html     | 10 +++++++---
 .../file-overview/file-overview.component.ts       | 23 ++++++++++++++++++++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git 
a/ui/src/app/files/components/file-overview/file-overview.component.html 
b/ui/src/app/files/components/file-overview/file-overview.component.html
index d221556f8..00ab831e6 100644
--- a/ui/src/app/files/components/file-overview/file-overview.component.html
+++ b/ui/src/app/files/components/file-overview/file-overview.component.html
@@ -33,9 +33,13 @@
             <ng-container matColumnDef="filetype">
                 <th mat-header-cell *matHeaderCellDef>Filetype</th>
                 <td mat-cell *matCellDef="let fileMetadata">
-                    <span class="filetype-container">{{
-                        fileMetadata.filetype
-                    }}</span>
+                    <span
+                        class="filetype-container"
+                        [style.background-color]="
+                            getFileColor(fileMetadata.filetype)
+                        "
+                        >{{ fileMetadata.filetype }}</span
+                    >
                 </td>
             </ng-container>
             <ng-container matColumnDef="uploaded">
diff --git 
a/ui/src/app/files/components/file-overview/file-overview.component.ts 
b/ui/src/app/files/components/file-overview/file-overview.component.ts
index 5479b5110..472de9117 100644
--- a/ui/src/app/files/components/file-overview/file-overview.component.ts
+++ b/ui/src/app/files/components/file-overview/file-overview.component.ts
@@ -38,6 +38,8 @@ export class FileOverviewComponent implements OnInit {
     paginator: MatPaginator;
     pageSize = 1;
 
+    private fileTypeColors: { [key: string]: string } = {};
+
     constructor(
         private filesService: FilesService,
         private dialog: MatDialog,
@@ -89,6 +91,27 @@ export class FileOverviewComponent implements OnInit {
             });
     }
 
+    getFileColor(fileType: string) {
+        if (!this.fileTypeColors.hasOwnProperty(fileType)) {
+            this.fileTypeColors[fileType] = this.generateColorHash(fileType);
+        }
+
+        return this.fileTypeColors[fileType];
+    }
+
+    private generateColorHash(fileType: string) {
+        let hash = 0;
+
+        fileType.split('').forEach(char => {
+            hash = char.charCodeAt(0) + ((hash << 5) - hash);
+        });
+
+        const color = (Math.abs(hash) & 0x00ffffff).toString(16).toUpperCase();
+        const paddedColor = color.padStart(6, '0');
+
+        return `#${paddedColor}`;
+    }
+
     @ViewChild(MatPaginator) set content(paginator: MatPaginator) {
         this.paginator = paginator;
     }