diff options
Diffstat (limited to 'packages/demobank-ui/src/components')
-rw-r--r-- | packages/demobank-ui/src/components/Cashouts/views.tsx | 60 | ||||
-rw-r--r-- | packages/demobank-ui/src/components/Time.tsx | 71 | ||||
-rw-r--r-- | packages/demobank-ui/src/components/Transactions/views.tsx | 15 |
3 files changed, 109 insertions, 37 deletions
diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx b/packages/demobank-ui/src/components/Cashouts/views.tsx index 90ee6bc2f..09e986dd4 100644 --- a/packages/demobank-ui/src/components/Cashouts/views.tsx +++ b/packages/demobank-ui/src/components/Cashouts/views.tsx @@ -15,7 +15,9 @@ */ import { + AbsoluteTime, Amounts, + Duration, HttpStatusCode, TalerError, assertUnreachable, @@ -31,6 +33,7 @@ import { useConversionInfo } from "../../hooks/circuit.js"; import { RenderAmount } from "../../pages/PaytoWireTransferForm.js"; import { ErrorLoadingWithDebug } from "../ErrorLoadingWithDebug.js"; import { State } from "./index.js"; +import { Time } from "../Time.js"; export function FailedView({ error }: State.Failed) { const { i18n } = useTranslationContext(); @@ -141,12 +144,6 @@ export function ReadyView({ </th> </tr> {txs.map((item) => { - const creationTime = - item.creation_time.t_s === "never" - ? "" - : format(item.creation_time.t_s * 1000, "HH:mm:ss", { - locale: dateLocale, - }); return ( <a name="cashout details" @@ -157,14 +154,17 @@ export function ReadyView({ cid: String(item.id), })} > - <td class="relative py-2 pl-2 pr-2 text-sm "> - <div class="font-medium text-gray-900"> - {creationTime} - </div> - { - //FIXME: implement responsive view - } - {/* <dl class="font-normal sm:hidden"> + <td class="relative py-2 pl-2 pr-2 text-sm "> + <div class="font-medium text-gray-900"> + <Time format="HH:mm:ss" + timestamp={AbsoluteTime.fromProtocolTimestamp(item.creation_time)} + // relative={Duration.fromSpec({ days: 1 })} + /> + </div> + { + //FIXME: implement responsive view + } + {/* <dl class="font-normal sm:hidden"> <dt class="sr-only sm:hidden"><i18n.Translate>Amount</i18n.Translate></dt> <dd class="mt-1 truncate text-gray-700"> {item.negative ? i18n.str`sent` : i18n.str`received`} {item.amount ? ( @@ -185,24 +185,24 @@ export function ReadyView({ </pre> </dd> </dl> */} - </td> - <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-red-600 cursor-pointer"> - <RenderAmount - value={Amounts.parseOrThrow(item.amount_debit)} - spec={resp.body.regional_currency_specification} - /> - </td> - <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-green-600 cursor-pointer"> - <RenderAmount - value={Amounts.parseOrThrow(item.amount_credit)} - spec={resp.body.fiat_currency_specification} - /> - </td> + </td> + <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-red-600 cursor-pointer"> + <RenderAmount + value={Amounts.parseOrThrow(item.amount_debit)} + spec={resp.body.regional_currency_specification} + /> + </td> + <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-green-600 cursor-pointer"> + <RenderAmount + value={Amounts.parseOrThrow(item.amount_credit)} + spec={resp.body.fiat_currency_specification} + /> + </td> - <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all min-w-md"> + <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all min-w-md"> - {item.subject} - </td> + {item.subject} + </td> </a> ); })} diff --git a/packages/demobank-ui/src/components/Time.tsx b/packages/demobank-ui/src/components/Time.tsx new file mode 100644 index 000000000..39ce33f60 --- /dev/null +++ b/packages/demobank-ui/src/components/Time.tsx @@ -0,0 +1,71 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +import { AbsoluteTime, Duration } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { formatISO, format, formatDuration, intervalToDuration } from "date-fns"; +import { Fragment, h, VNode } from "preact"; + +/** + * + * @param timestamp time to be formatted + * @param relative duration threshold, if the difference is lower + * the timestamp will be formatted as relative time from "now" + * + * @returns + */ +export function Time({ + timestamp, + relative, + format: formatString, +}: { + timestamp: AbsoluteTime | undefined; + relative?: Duration, + format: string; +}): VNode { + const { i18n, dateLocale } = useTranslationContext() + if (!timestamp) return <Fragment /> + + if (timestamp.t_ms === "never") { + return <time >{i18n.str`never`}</time> + } + + const now = AbsoluteTime.now(); + const diff = AbsoluteTime.difference(now, timestamp) + if (relative && now.t_ms !== "never" && Duration.cmp(diff, relative) === -1) { + const d = intervalToDuration({ + start: now.t_ms, + end: timestamp.t_ms + }) + d.seconds = 0 + const duration = formatDuration(d, { locale: dateLocale }) + const isFuture = AbsoluteTime.cmp(now, timestamp) < 0 + if (isFuture) { + return <time dateTime={formatISO(timestamp.t_ms)}> + <i18n.Translate>in {duration}</i18n.Translate> + </time> + } else { + return <time dateTime={formatISO(timestamp.t_ms)}> + <i18n.Translate>{duration} ago</i18n.Translate> + </time> + } + } + return ( + <time dateTime={formatISO(timestamp.t_ms)}> + {format(timestamp.t_ms, formatString, { locale: dateLocale })} + </time> + ); +} diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx index cdf134b2f..7da9fc5a9 100644 --- a/packages/demobank-ui/src/components/Transactions/views.tsx +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -20,6 +20,8 @@ import { Fragment, VNode, h } from "preact"; import { useBankCoreApiContext } from "../../context/config.js"; import { RenderAmount } from "../../pages/PaytoWireTransferForm.js"; import { State } from "./index.js"; +import { Duration } from "@gnu-taler/taler-util"; +import { Time } from "../Time.js"; export function ReadyView({ transactions, @@ -107,19 +109,18 @@ export function ReadyView({ </th> </tr> {txs.map((item) => { - const time = - item.when.t_ms === "never" - ? "" - : format(item.when.t_ms, "HH:mm:ss", { - locale: dateLocale, - }); return ( <tr key={idx} class="border-b border-gray-200 last:border-none" > <td class="relative py-2 pl-2 pr-2 text-sm "> - <div class="font-medium text-gray-900">{time}</div> + <div class="font-medium text-gray-900"> + <Time format="HH:mm:ss" + timestamp={item.when} + // relative={Duration.fromSpec({ days: 1 })} + /> + </div> <dl class="font-normal sm:hidden"> <dt class="sr-only sm:hidden"> <i18n.Translate>Amount</i18n.Translate> |