diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup/BackupPage.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/popup/BackupPage.tsx | 119 |
1 files changed, 112 insertions, 7 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx index 4bbca9072..d13f5244d 100644 --- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx @@ -15,21 +15,126 @@ */ -import { VNode } from "preact"; -import { useDevContext } from "../context/useDevContext"; -import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; +import { Timestamp } from "@gnu-taler/taler-util"; +// import { ProviderPaymentStatus } from "@gnu-taler/taler-wallet-core/src/operations/backup"; +import { formatDuration, intervalToDuration } from "date-fns"; +import { JSX, VNode } from "preact"; +import { ProvidersByCurrency, useProvidersByCurrency } from "../hooks/useProvidersByCurrency"; export function BackupPage(): VNode { - return <BackupView />; + const providers = useProvidersByCurrency() + return <BackupView deviceName={"thisdevicename"} providers={providers}/>; } export interface ViewProps { + deviceName: string; + providers: ProvidersByCurrency } -export function BackupView({}: ViewProps): VNode { +export function BackupView({ deviceName, providers }: ViewProps): VNode { return ( - <div> - Backup page + <div style={{ height: 'calc(320px - 34px - 16px)', overflow: 'auto' }}> + <div style={{ display: 'flex', flexDirection: 'row', width: '100%', justifyContent: 'space-between' }}> + <h2 style={{ width: 240, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: 10, marginBottom:10 }}> + {deviceName} + </h2> + <div style={{ flexDirection: 'row', marginTop: 'auto', marginBottom: 'auto' }}> + <button class="pure-button button-secondary">rename</button> + </div> + </div> + {Object.keys(providers).map((currency) => { + const provider = providers[currency] + if (!provider) { + return <BackupLayout + id={currency} + title={currency} + /> + } + return <BackupLayout + status={provider.paymentStatus} + timestamp={provider.lastSuccessfulBackupTimestamp} + id={currency} + active={provider.active} + subtitle={provider.syncProviderBaseUrl} + title={currency} + /> + })} </div> ) +} + +interface TransactionLayoutProps { + status?: any; + timestamp?: Timestamp; + title: string; + id: string; + subtitle?: string; + active?: boolean; +} + +function BackupLayout(props: TransactionLayoutProps): JSX.Element { + const date = !props.timestamp ? undefined : new Date(props.timestamp.t_ms); + const dateStr = date?.toLocaleString([], { + dateStyle: "medium", + timeStyle: "short", + } as any); + return ( + <div + style={{ + display: "flex", + flexDirection: "row", + border: "1px solid gray", + borderRadius: "0.5em", + margin: "0.5em 0", + justifyContent: "space-between", + padding: "0.5em", + }} + > + <div + style={{ display: "flex", flexDirection: "column", color: !props.active ? "gray" : undefined }} + > + {dateStr && <div style={{ fontSize: "small", color: "gray" }}>{dateStr}</div>} + {!dateStr && <div style={{ fontSize: "small", color: "red" }}>never synced</div>} + <div style={{ fontVariant: "small-caps", fontSize: "x-large" }}> + <a href=""><span>{props.title}</span></a> + </div> + + <div>{props.subtitle}</div> + </div> + <div style={{ + marginLeft: "auto", + display: "flex", + flexDirection: "column", + alignItems: "center", + alignSelf: "center" + }}> + <div style={{}}> + {!props.status ? "missing" : ( + props.status?.type === 'paid' ? daysUntil(props.status.paidUntil) : 'unpaid' + )} + </div> + </div> + </div> + ); +} + +function daysUntil(d: Timestamp) { + if (d.t_ms === 'never') return undefined + const duration = intervalToDuration({ + start: d.t_ms, + end: new Date(), + }) + const str = formatDuration(duration, { + delimiter: ', ', + format: [ + duration?.years ? 'years' : ( + duration?.months ? 'months' : ( + duration?.days ? 'days' : ( + duration.hours ? 'hours' : 'minutes' + ) + ) + ) + ] + }) + return `${str} left` }
\ No newline at end of file |