From b0204b29734a3aeb56789df20109291e0eda639f Mon Sep 17 00:00:00 2001 From: Saksham Gupta Date: Fri, 16 Aug 2024 13:12:16 +0530 Subject: [PATCH 1/2] Show Details implemented --- src/components/Jam.tsx | 23 +++++++++++++++++++++-- src/i18n/locales/en/translation.json | 1 + 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/Jam.tsx b/src/components/Jam.tsx index ddc07d926..408662cff 100644 --- a/src/components/Jam.tsx +++ b/src/components/Jam.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useMemo, useCallback } from 'react' +import React, { useState, useEffect, useMemo, useCallback } from 'react' import * as rb from 'react-bootstrap' import { useTranslation } from 'react-i18next' import { Formik, FormikErrors, FormikValues, useFormikContext } from 'formik' @@ -15,7 +15,7 @@ import Sprite from './Sprite' import Balance from './Balance' import ScheduleProgress from './ScheduleProgress' import FeeConfigModal from './settings/FeeConfigModal' - +import Accordion from './Accordion' import styles from './Jam.module.css' import { useFeeConfigValues } from '../hooks/Fees' @@ -338,6 +338,22 @@ export default function Jam({ wallet }: JamProps) { }) } + function getScheduleDetails(currentSchedule: Schedule) { + const idIndices = currentSchedule.length === 2 ? [1] : [4, 6, 7] + const typeIndices = currentSchedule.length === 2 ? [0] : [1, 3, 5] + + return idIndices.map((idIndex, index) => ( + +

+ Id - {index + 1}: {currentSchedule[idIndex]?.[3]} +

+

+ Type - {index + 1}: {currentSchedule[typeIndices[index]]?.[3]} +

+ + )) + } + return ( <> @@ -369,6 +385,9 @@ export default function Jam({ wallet }: JamProps) { >
{t('scheduler.button_stop')}
+ {currentSchedule.length === 2 || currentSchedule.length === 8 ? ( + {getScheduleDetails(currentSchedule)} + ) : null} )} diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json index fcbdf99f4..d855b3ec8 100644 --- a/src/i18n/locales/en/translation.json +++ b/src/i18n/locales/en/translation.json @@ -643,6 +643,7 @@ "progress_description": "This estimate is the minimum waiting time. Additional delays due to network communication or transaction confirmation are not considered.", "progress_current_state": "Waiting for transaction <1>{{ current }} of <3>{{ total }} to process...", "progress_done": "All transactions completed successfully. The scheduler will stop soon.", + "details": "Schedule Details", "precondition": { "hint_missing_utxos": "To run the scheduler you need UTXOs with {{ minConfirmations }} or more confirmations. $t(scheduler.precondition.nested_hint_fund_wallet, {\"count\": {{ minConfirmations }} })", "hint_missing_confirmations": "The scheduler requires your UTXOs to have {{ minConfirmations }} or more confirmations. $t(scheduler.precondition.nested_hint_wait_for_block, {\"count\": {{ amountOfMissingConfirmations }} })", From 292ea94b667d3671461eb69dd71767c399a698a4 Mon Sep 17 00:00:00 2001 From: Saksham Gupta Date: Tue, 3 Sep 2024 21:59:10 +0530 Subject: [PATCH 2/2] ScheduleDetails --- src/components/Jam.tsx | 33 ++++---- src/components/ScheduleDetails.module.css | 45 +++++++++++ src/components/ScheduleDetails.tsx | 95 +++++++++++++++++++++++ 3 files changed, 154 insertions(+), 19 deletions(-) create mode 100644 src/components/ScheduleDetails.module.css create mode 100644 src/components/ScheduleDetails.tsx diff --git a/src/components/Jam.tsx b/src/components/Jam.tsx index 3510771e2..583d3e3af 100644 --- a/src/components/Jam.tsx +++ b/src/components/Jam.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useMemo, useCallback } from 'react' +import { useState, useEffect, useMemo, useCallback } from 'react' import * as rb from 'react-bootstrap' import { useTranslation } from 'react-i18next' import { Formik, FormikErrors, FormikValues, useFormikContext } from 'formik' @@ -14,10 +14,12 @@ import ToggleSwitch from './ToggleSwitch' import Sprite from './Sprite' import Balance from './Balance' import ScheduleProgress from './ScheduleProgress' +import ScheduleDetails, { TransformedScheduleEntry } from './ScheduleDetails' import { ConfirmModal, ConfirmModalProps } from './Modal' import FeeConfigModal from './settings/FeeConfigModal' import Accordion from './Accordion' import styles from './Jam.module.css' +import { Table, Body, Row, Cell } from '@table-library/react-table-library/table' import { useFeeConfigValues } from '../hooks/Fees' const DEST_ADDRESS_COUNT_PROD = 3 @@ -352,21 +354,14 @@ export default function Jam({ wallet }: JamProps) { }) } - function getScheduleDetails(currentSchedule: Schedule) { - const idIndices = currentSchedule.length === 2 ? [1] : [4, 6, 7] - const typeIndices = currentSchedule.length === 2 ? [0] : [1, 3, 5] - - return idIndices.map((idIndex, index) => ( - -

- Id - {index + 1}: {currentSchedule[idIndex]?.[3]} -

-

- Type - {index + 1}: {currentSchedule[typeIndices[index]]?.[3]} -

- - )) - } + // Add a function to transform the schedule data to include Jar information + const transformScheduleData = useCallback((schedule: Schedule) => { + return schedule.map((item) => ({ + id: item[3], + type: item[4], + jar: item[0], // Assuming item[0] contains the Jar number + })) + }, []) return ( <> @@ -399,9 +394,9 @@ export default function Jam({ wallet }: JamProps) { >
{t('scheduler.button_stop')}
- {currentSchedule.length === 2 || currentSchedule.length === 8 ? ( - {getScheduleDetails(currentSchedule)} - ) : null} + + + )} diff --git a/src/components/ScheduleDetails.module.css b/src/components/ScheduleDetails.module.css new file mode 100644 index 000000000..4e47bfefc --- /dev/null +++ b/src/components/ScheduleDetails.module.css @@ -0,0 +1,45 @@ +.scheduleDetails { + background-color: var(--background-color); + border-radius: 8px; + padding: 16px; + margin-bottom: 16px; + color: var(--text-color); +} + +.scheduleDetailsTitle { + font-size: 18px; + font-weight: bold; + color: var(--text-color); + margin-bottom: 16px; +} + +.scheduleDetailsHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; +} + +.scheduleItem { + display: flex; + justify-content: space-between; + padding: 8px 0; + border-bottom: 1px solid var(--border-color); +} + +.scheduleItem:last-child { + border-bottom: none; +} + +.scheduleItemLabel { + font-weight: 500; + color: var(--secondary-text-color); +} + +.scheduleItemValue { + color: var(--text-color); +} + +.statusIcon { + fill: currentColor; +} diff --git a/src/components/ScheduleDetails.tsx b/src/components/ScheduleDetails.tsx new file mode 100644 index 000000000..76b3644d9 --- /dev/null +++ b/src/components/ScheduleDetails.tsx @@ -0,0 +1,95 @@ +import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table' +import { useTheme } from '@table-library/react-table-library/theme' +import { Schedule } from '../context/ServiceInfoContext' +import { useSettings } from '../context/SettingsContext' +import Sprite from './Sprite' + +import styles from './ScheduleDetails.module.css' + +export interface TransformedScheduleEntry { + id: string + type: number + jar: number +} + +interface ScheduleDetailsProps { + schedule: TransformedScheduleEntry[] +} + +export default function ScheduleDetails({ schedule }: ScheduleDetailsProps) { + const settings = useSettings() + + const theme = { + backgroundColor: settings.theme === 'dark' ? '#333' : '#fff', + alternateBackgroundColor: settings.theme === 'dark' ? '#444' : '#f5f5f5', + textColor: settings.theme === 'dark' ? '#fff' : '#000', + } + + const tableTheme = useTheme({ + Table: ` + --data-table-library_grid-template-columns: repeat(3, 1fr); + `, + HeaderRow: ` + background-color: ${theme.backgroundColor}; + `, + Row: ` + &:nth-of-type(odd) { + background-color: ${theme.alternateBackgroundColor}; + } + `, + Cell: ` + padding: 8px; + color: ${theme.textColor}; + `, + }) + + const data = { + nodes: schedule.map((item, index) => ({ id: index, idValue: item.id, type: item.type, jar: item.jar })), + } + + const getJarLabel = (jarNumber: number) => { + return String.fromCharCode(65 + jarNumber) // 65 is ASCII for 'A' + } + + const getStatusIcon = (type: number) => { + if (type === 2) { + // Assuming type 2 means completed + return + } + return null + } + + if (!schedule || schedule.length === 0) { + return
No schedule available
+ } + + return ( +
+

Schedule Details

+ + {(tableList: any) => ( + <> +
+ + Id + Type + Jar + Status + +
+ + {tableList.map((item: any) => ( + + {item.idValue} + {item.type} + Jar {getJarLabel(item.jar)} + {getStatusIcon(item.type)} + + ))} + + + )} +
+
+ ) +}