From 4a9137ad0428a204c3a3b924d6a26af73446804d Mon Sep 17 00:00:00 2001
From: Marcel <67207947+szymczakovv@users.noreply.github.com>
Date: Mon, 6 Feb 2023 15:42:19 +0100
Subject: [PATCH] feat(web/progress): progress bar in context menu's metadata
 (#217)

* feature: progress bar in context menu's metadata

* undefined check `metadata.progress`
---
 web/src/features/dev/debug/context.ts         | 26 +++++++++++++++++++
 .../menu/context/components/ContextButton.tsx | 14 +++++++---
 web/src/interfaces/context.ts                 |  2 +-
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/web/src/features/dev/debug/context.ts b/web/src/features/dev/debug/context.ts
index 0d20746..0a031b0 100644
--- a/web/src/features/dev/debug/context.ts
+++ b/web/src/features/dev/debug/context.ts
@@ -9,6 +9,32 @@ export const debugContext = () => {
         title: 'Vehicle garage',
         options: [
           { title: 'Empty button' },
+          {
+            title: 'Karin Kuruma',
+            image: 'https://cdn.discordapp.com/attachments/1063098499027173461/1064276343585505330/screenshot.jpg',
+            arrow: true,
+            colorScheme: 'blue',
+            metadata: [
+              {
+                ["label"]: "Body",
+                ["value"]: "55%",
+                ["progress"]: 55
+              },
+              {
+                ["label"]: "Engine",
+                ["value"]: "100%",
+                ["progress"]: 100
+              },
+              {
+                ["label"]: "Oil",
+                ["progress"]: 11
+              },
+              {
+                ["label"]: "Fuel",
+                ["progress"]: 87
+              },
+            ],
+          },
           {
             title: 'Example button',
             description: 'Example button description',
diff --git a/web/src/features/menu/context/components/ContextButton.tsx b/web/src/features/menu/context/components/ContextButton.tsx
index afbfda0..6680727 100644
--- a/web/src/features/menu/context/components/ContextButton.tsx
+++ b/web/src/features/menu/context/components/ContextButton.tsx
@@ -90,10 +90,16 @@ const ContextButton: React.FC<{
         <HoverCard.Dropdown className={classes.dropdown}>
           {button.image && <Image src={button.image} />}
           {Array.isArray(button.metadata) ? (
-            button.metadata.map((metadata: string | { label: string; value: any }, index: number) => (
-              <Text key={`context-metadata-${index}`}>
-                {typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata.value}`}
-              </Text>
+            button.metadata.map((metadata: string | { label: string; value?: any; progress?: number }, index: number) => (
+              <>
+                <Text key={`context-metadata-${index}`}>
+                  {typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata?.value ?? ""}`}
+                </Text>
+
+                {typeof metadata === 'object' && metadata.progress !== undefined && (
+                  <Progress value={metadata.progress} size="sm" color={button.colorScheme || 'dark.3'} />
+                )}
+              </>
             ))
           ) : (
             <>
diff --git a/web/src/interfaces/context.ts b/web/src/interfaces/context.ts
index 5d6efb5..b4df357 100644
--- a/web/src/interfaces/context.ts
+++ b/web/src/interfaces/context.ts
@@ -10,7 +10,7 @@ export interface Option {
   iconColor?: string;
   progress?: number;
   colorScheme?: string;
-  metadata?: string[] | { [key: string]: any } | { label: string; value: any }[];
+  metadata?: string[] | { [key: string]: any } | { label: string; value: any; progress: number; }[];
   disabled?: boolean;
   event?: string;
   serverEvent?: string;