diff options
Diffstat (limited to 'packages/demobank-ui/src')
-rw-r--r-- | packages/demobank-ui/src/pages/BankFrame.tsx | 4 | ||||
-rw-r--r-- | packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx | 49 | ||||
-rw-r--r-- | packages/demobank-ui/src/pages/admin/AdminHome.tsx | 44 | ||||
-rw-r--r-- | packages/demobank-ui/src/settings.json | 13 | ||||
-rw-r--r-- | packages/demobank-ui/src/settings.ts | 54 |
5 files changed, 91 insertions, 73 deletions
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index 24012cd2b..a21ba4b27 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -17,7 +17,7 @@ import { Amounts, TalerError, TranslatedString } from "@gnu-taler/taler-util"; import { Footer, GlobalNotificationsBanner, Header, Loading, notifyError, notifyException, useTranslationContext } from "@gnu-taler/web-util/browser"; import { ComponentChildren, Fragment, VNode, h } from "preact"; -import { useEffect, useErrorBoundary } from "preact/hooks"; +import { useEffect, useErrorBoundary, useState } from "preact/hooks"; import { useAccountDetails } from "../hooks/access.js"; import { useBackendState } from "../hooks/backend.js"; import { getAllBooleanPreferences, getLabelForPreferences, usePreferences } from "../hooks/preferences.js"; @@ -65,7 +65,7 @@ export function BankFrame({ backend.logOut() updatePreferences("currentWithdrawalOperationId", undefined); }} - sites={settings.demoSites ?? new Array<Array<string>>(new Array<string>())} + sites={!settings.topNavSites ? [] : Object.entries(settings.topNavSites)} supportedLangs={["en", "es", "de"]} > <li> diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 33bf18abc..c93388d57 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -415,8 +415,6 @@ export function doAutoFocus(element: HTMLElement | null) { } } -const FRAC_SEPARATOR = "." - export function InputAmount( { currency, @@ -471,21 +469,48 @@ export function InputAmount( ); } -export function RenderAmount({ value, spec, negative, withColor }: { spec: CurrencySpecification; value: AmountJson, negative?: boolean, withColor?: boolean }): VNode { +const FRAC_SEPARATOR = "." +export function RenderAmount({ value, spec, negative, withColor, allowShort }: { spec: CurrencySpecification; value: AmountJson, allowShort?: boolean, negative?: boolean, withColor?: boolean }): VNode { const neg = !!negative //convert to true or false const str = Amounts.stringifyValue(value) - const sep_pos = str.indexOf(FRAC_SEPARATOR) - if (sep_pos !== -1 && str.length - sep_pos - 1 > spec.num_fractional_normal_digits) { + const pos = str.indexOf(FRAC_SEPARATOR) + const sep_pos = pos < 0 ? 0 : pos; + + let currency = value.currency + const names = Object.keys(spec.alt_unit_names) + let smallerIndex: string = "0" + if (names.length > 1) { + let indexSize = sep_pos + Object.keys(spec.alt_unit_names).forEach(index => { + const i = Number.parseInt(index, 10) + if (Number.isNaN(i)) return; + if (sep_pos - i < indexSize) { + indexSize = sep_pos - i; + smallerIndex = index + } + }) + currency = spec.alt_unit_names[smallerIndex] + } else if (names.length === 1) { + currency = names[0] + } + + let normal: string; + let small: string | undefined; + if (sep_pos && str.length - sep_pos - 1 > spec.num_fractional_normal_digits) { const limit = sep_pos + spec.num_fractional_normal_digits + 1 - const normal = str.substring(0, limit) - const small = str.substring(limit) - return <span data-negative={withColor ? neg : undefined} class="whitespace-nowrap data-[negative=false]:text-green-600 data-[negative=true]:text-red-600"> - {negative ? "-" : undefined} - {value.currency} {normal} <sup class="-ml-1">{small}</sup> - </span> + normal = str.substring(0, limit) + small = str.substring(limit) + } else { + normal = str + small = undefined + } + + + if (allowShort) { + // const int_part = str.substring(0, sep_pos) } return <span data-negative={withColor ? neg : undefined} class="whitespace-nowrap data-[negative=false]:text-green-600 data-[negative=true]:text-red-600"> {negative ? "-" : undefined} - {value.currency} {str} + {currency} {normal} {small && <sup class="-ml-1">{small}</sup>} </span> }
\ No newline at end of file diff --git a/packages/demobank-ui/src/pages/admin/AdminHome.tsx b/packages/demobank-ui/src/pages/admin/AdminHome.tsx index d1b48fb6d..22090f83a 100644 --- a/packages/demobank-ui/src/pages/admin/AdminHome.tsx +++ b/packages/demobank-ui/src/pages/admin/AdminHome.tsx @@ -136,32 +136,8 @@ function Metrics(): VNode { <h1 class="text-base font-semibold leading-7 text-gray-900 mt-5"> <i18n.Translate>Trading volume on {getDateForTimeframe(params.current, metricType)} compared to {getDateForTimeframe(params.previous, metricType)}</i18n.Translate> </h1> - <div class="flex items-center justify-between"> - {/* <span class="flex flex-grow flex-col"> - <span class="text-sm text-black font-medium leading-6 " id="availability-label"> - ASD - </span> - </span> */} - <button type="button" class="bg-gray-200 relative inline-flex h-6 w-48 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false"> - <span class="sr-only">Use setting</span> - {/* <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" --> */} - <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-32 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"> - {/* <!-- Enabled: "opacity-0 duration-100 ease-out", Not Enabled: "opacity-100 duration-200 ease-in" --> */} - <span class="opacity-100 duration-200 ease-in absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" aria-hidden="true"> - Transaction - </span> - {/* <!-- Enabled: "opacity-100 duration-200 ease-in", Not Enabled: "opacity-0 duration-100 ease-out" --> */} - <span class="opacity-0 duration-100 ease-out absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" aria-hidden="true"> - <svg class="h-3 w-3 text-indigo-600" fill="currentColor" viewBox="0 0 12 12"> - <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" /> - </svg> - </span> - </span> - </button> - </div> - </div> - <dl class="mt-5 grid grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-lg md:grid-cols-4 md:divide-x md:divide-y-0"> + <dl class="mt-5 grid grid-cols-1 md:grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-lg md:divide-x md:divide-y-0"> {resp.current.body.type !== "with-conversions" || resp.previous.body.type !== "with-conversions" ? undefined : <Fragment> @@ -222,12 +198,22 @@ function MetricValue({ current, previous }: { current: AmountString | undefined, const negative = cmp === 0 ? undefined : cmp === -1 const rateStr = `${(Math.abs(rate) * 100).toFixed(2)}%` + const pepe = "QWEQWEQWEWw:111111174523848.85229681" + function size(s: string = ""): "lg" | "md" | "sm" { + return s.length < 10 ? "sm" : s.length > 20 ? "lg" : "md"; + } return <Fragment> - - <dd class="mt-1 flex justify-between md:block lg:flex"> - <div class="flex justify-start items-baseline text-2xl font-semibold text-indigo-600"> - {!current ? "-" : <RenderAmount value={Amounts.parseOrThrow(current)} spec={config.currency_specification} />} + <dd class="mt-1 block "> + <div data-size={size(pepe)} class="flex justify-start + data-[size=sm]:text-2xl + data-[size=md]:text-lg + data-[size=lg]:text-sm + items-baseline + font-semibold text-indigo-600"> + {!current ? "-" : <RenderAmount value={Amounts.parseOrThrow(pepe)} spec={config.currency_specification} />} </div> + {pepe.length} + <div style={{ width: 16, height: 16, border: "1px solid red" }} /> <div class="flex flex-col"> <div class="flex justify-end items-baseline text-2xl font-semibold text-indigo-600"> diff --git a/packages/demobank-ui/src/settings.json b/packages/demobank-ui/src/settings.json index 9c0f1f001..a9246bc93 100644 --- a/packages/demobank-ui/src/settings.json +++ b/packages/demobank-ui/src/settings.json @@ -1,12 +1,11 @@ { "backendBaseURL": "http://bank.taler.test:1180/", - "showDemoNav": true, "simplePasswordForRandomAccounts": true, "allowRandomAccountCreation": true, "bankName": "Taler DEVELOPMENT Bank", - "demoSites": [ - ["Exchange", "http://Exchnage.taler.test:1180/"], - ["Bank", "http://bank-ui.taler.test:1180/"], - ["Merchant", "http://merchant.taler.test:1180/"] - ] -} + "topNavSites": { + "Exchange": "http://Exchnage.taler.test:1180/", + "Bank": "http://bank-ui.taler.test:1180/", + "Merchant": "http://merchant.taler.test:1180/" + } +}
\ No newline at end of file diff --git a/packages/demobank-ui/src/settings.ts b/packages/demobank-ui/src/settings.ts index 3a60c48a5..67f926e7f 100644 --- a/packages/demobank-ui/src/settings.ts +++ b/packages/demobank-ui/src/settings.ts @@ -14,23 +14,32 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { Codec, buildCodecForObject, codecForBoolean, codecForList, codecForString, codecOptional } from "@gnu-taler/taler-util"; +import { Codec, buildCodecForObject, codecForBoolean, codecForList, codecForMap, codecForString, codecOptional } from "@gnu-taler/taler-util"; export interface BankUiSettings { - // location of the backend API + // Where libeufin backend is localted + // default: window.origin without "webui/" backendBaseURL?: string; - // where the user is going to be redirected after clicking the Taler icon - iconLinkURL?: string; - // show demo nav - showDemoNav?: boolean; - // links of the demo nav. Array of tuples that contains [name,url] - demoSites?: Array<Array<string>>; - // show a button "create random account" + // Shows a button "create random account" in the registration form + // Useful for testing + // default: false allowRandomAccountCreation?: boolean; - // every random account will have password "123" + // Create all random accounts with password "123" + // Useful for testing + // default: false simplePasswordForRandomAccounts?: boolean; - // bank name in the top + // Bank name shown in the header + // default: "Taler Bank" bankName?: string; + // URL where the user is going to be redirected after + // clicking in Taler Logo + // default: home page + iconLinkURL?: string; + // Mapping for every link shown in the top navitation bar + // - key: link label, what the user will read + // - value: link target, where the user is going to be redirected + // default: empty list + topNavSites?: Record<string, string>; } /** @@ -39,31 +48,30 @@ export interface BankUiSettings { const defaultSettings: BankUiSettings = { backendBaseURL: undefined, iconLinkURL: undefined, - bankName: "Taler TESTING Bank", - showDemoNav: false, - simplePasswordForRandomAccounts: true, - allowRandomAccountCreation: true, - demoSites: [ - ["Demo", "https://demo.taler.net/"], - ], + bankName: "Taler Bank", + simplePasswordForRandomAccounts: false, + allowRandomAccountCreation: false, + topNavSites: {}, }; const codecForBankUISettings = (): Codec<BankUiSettings> => buildCodecForObject<BankUiSettings>() - .property("allowRandomAccountCreation", codecOptional(codecForBoolean())) .property("backendBaseURL", codecOptional(codecForString())) + .property("allowRandomAccountCreation", codecOptional(codecForBoolean())) + .property("simplePasswordForRandomAccounts", codecOptional(codecForBoolean())) .property("bankName", codecOptional(codecForString())) - .property("demoSites", codecOptional(codecForList(codecForList(codecForString())))) .property("iconLinkURL", codecOptional(codecForString())) - .property("showDemoNav", codecOptional(codecForBoolean())) - .property("simplePasswordForRandomAccounts", codecOptional(codecForBoolean())) + .property("topNavSites", codecOptional(codecForMap(codecForString()))) .build("BankUiSettings"); export function fetchSettings(listener: (s: BankUiSettings) => void): void { fetch("./settings.json") .then(resp => resp.json()) .then(json => codecForBankUISettings().decode(json)) - .then(listener) + .then(result => listener({ + ...defaultSettings, + ...result, + })) .catch(e => { console.log("failed to fetch settings", e) listener(defaultSettings) |