From b6e774585d32017e5f1ceeeb2b2e2a5e350354d3 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Sun, 28 May 2017 23:15:41 +0200 Subject: move webex specific things in their own directory --- src/webex/pages/tree.tsx | 437 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 437 insertions(+) create mode 100644 src/webex/pages/tree.tsx (limited to 'src/webex/pages/tree.tsx') diff --git a/src/webex/pages/tree.tsx b/src/webex/pages/tree.tsx new file mode 100644 index 000000000..ddf8f2dbc --- /dev/null +++ b/src/webex/pages/tree.tsx @@ -0,0 +1,437 @@ +/* + This file is part of TALER + (C) 2016 Inria + + 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. + + 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 + TALER; see the file COPYING. If not, see + */ + +/** + * Show contents of the wallet as a tree. + * + * @author Florian Dold + */ + + +import { amountToPretty, getTalerStampDate } from "../../helpers"; +import { + CoinRecord, + CoinStatus, + Denomination, + DenominationRecord, + ExchangeRecord, + PreCoinRecord, + ReserveRecord, +} from "../../types"; + +import { ImplicitStateComponent, StateHolder } from "../components"; +import { + getReserves, getExchanges, getCoins, getPreCoins, + refresh, getDenoms, payback, +} from "../wxApi"; +import * as React from "react"; +import * as ReactDOM from "react-dom"; + +interface ReserveViewProps { + reserve: ReserveRecord; +} + +class ReserveView extends React.Component { + render(): JSX.Element { + let r: ReserveRecord = this.props.reserve; + return ( +
+
    +
  • Key: {r.reserve_pub}
    • +
  • Created: {(new Date(r.created * 1000).toString())}
    • +
  • Current: {r.current_amount ? amountToPretty(r.current_amount!) : "null"}
    • +
  • Requested: {amountToPretty(r.requested_amount)}
    • +
  • Confirmed: {r.confirmed}
    • +
+
+ ); + } +} + +interface ReserveListProps { + exchangeBaseUrl: string; +} + +interface ToggleProps { + expanded: StateHolder; +} + +class Toggle extends ImplicitStateComponent { + renderButton() { + let show = () => { + this.props.expanded(true); + this.setState({}); + }; + let hide = () => { + this.props.expanded(false); + this.setState({}); + }; + if (this.props.expanded()) { + return ; + } + return ; + + } + render() { + return ( +
+ {this.renderButton()} + {this.props.expanded() ? this.props.children : []} +
); + } +} + + +interface CoinViewProps { + coin: CoinRecord; +} + +interface RefreshDialogProps { + coin: CoinRecord; +} + +class RefreshDialog extends ImplicitStateComponent { + refreshRequested = this.makeState(false); + render(): JSX.Element { + if (!this.refreshRequested()) { + return ( +
+ +
+ ); + } + return ( +
+ Refresh amount: + + +
+ ); + } +} + +class CoinView extends React.Component { + render() { + let c = this.props.coin; + return ( +
+
    +
  • Key: {c.coinPub}
    • +
  • Current amount: {amountToPretty(c.currentAmount)}
    • +
  • Denomination:
    • +
  • Suspended: {(c.suspended || false).toString()}
    • +
  • Status: {CoinStatus[c.status]}
    • +
    • +
    • +
+
+ ); + } +} + + + +interface PreCoinViewProps { + precoin: PreCoinRecord; +} + +class PreCoinView extends React.Component { + render() { + let c = this.props.precoin; + return ( +
+
    +
  • Key: {c.coinPub}
    • +
+
+ ); + } +} + +interface CoinListProps { + exchangeBaseUrl: string; +} + +class CoinList extends ImplicitStateComponent { + coins = this.makeState(null); + expanded = this.makeState(false); + + constructor(props: CoinListProps) { + super(props); + this.update(props); + } + + async update(props: CoinListProps) { + let coins = await getCoins(props.exchangeBaseUrl); + this.coins(coins); + } + + componentWillReceiveProps(newProps: CoinListProps) { + this.update(newProps); + } + + render(): JSX.Element { + if (!this.coins()) { + return
...
; + } + return ( +
+ Coins ({this.coins() !.length.toString()}) + {" "} + + {this.coins() !.map((c) => )} + +
+ ); + } +} + + +interface PreCoinListProps { + exchangeBaseUrl: string; +} + +class PreCoinList extends ImplicitStateComponent { + precoins = this.makeState(null); + expanded = this.makeState(false); + + constructor(props: PreCoinListProps) { + super(props); + this.update(); + } + + async update() { + let precoins = await getPreCoins(this.props.exchangeBaseUrl); + this.precoins(precoins); + } + + render(): JSX.Element { + if (!this.precoins()) { + return
...
; + } + return ( +
+ Planchets ({this.precoins() !.length.toString()}) + {" "} + + {this.precoins() !.map((c) => )} + +
+ ); + } +} + +interface DenominationListProps { + exchange: ExchangeRecord; +} + +interface ExpanderTextProps { + text: string; +} + +class ExpanderText extends ImplicitStateComponent { + expanded = this.makeState(false); + textArea: any = undefined; + + componentDidUpdate() { + if (this.expanded() && this.textArea) { + this.textArea.focus(); + this.textArea.scrollTop = 0; + } + } + + render(): JSX.Element { + if (!this.expanded()) { + return ( + { this.expanded(true); }}> + {(this.props.text.length <= 10) + ? this.props.text + : ( + + {this.props.text.substring(0,10)} + ... + + ) + } + + ); + } + return ( + + ); + } +} + +class DenominationList extends ImplicitStateComponent { + expanded = this.makeState(false); + denoms = this.makeState(undefined); + + constructor(props: DenominationListProps) { + super(props); + this.update(); + } + + async update() { + let d = await getDenoms(this.props.exchange.baseUrl); + this.denoms(d); + } + + renderDenom(d: DenominationRecord) { + return ( +
+
    +
  • Offered: {d.isOffered ? "yes" : "no"}
    • +
  • Value: {amountToPretty(d.value)}
    • +
  • Withdraw fee: {amountToPretty(d.feeWithdraw)}
    • +
  • Refresh fee: {amountToPretty(d.feeRefresh)}
    • +
  • Deposit fee: {amountToPretty(d.feeDeposit)}
    • +
  • Refund fee: {amountToPretty(d.feeRefund)}
    • +
  • Start: {getTalerStampDate(d.stampStart)!.toString()}
    • +
  • Withdraw expiration: {getTalerStampDate(d.stampExpireWithdraw)!.toString()}
    • +
  • Legal expiration: {getTalerStampDate(d.stampExpireLegal)!.toString()}
    • +
  • Deposit expiration: {getTalerStampDate(d.stampExpireDeposit)!.toString()}
    • +
  • Denom pub:
    • +
+
+ ); + } + + render(): JSX.Element { + let denoms = this.denoms() + if (!denoms) { + return ( +
+ Denominations (...) + {" "} + + ... + +
+ ); + } + return ( +
+ Denominations ({denoms.length.toString()}) + {" "} + + {denoms.map((d) => this.renderDenom(d))} + +
+ ); + } +} + +class ReserveList extends ImplicitStateComponent { + reserves = this.makeState(null); + expanded = this.makeState(false); + + constructor(props: ReserveListProps) { + super(props); + this.update(); + } + + async update() { + let reserves = await getReserves(this.props.exchangeBaseUrl); + this.reserves(reserves); + } + + render(): JSX.Element { + if (!this.reserves()) { + return
...
; + } + return ( +
+ Reserves ({this.reserves() !.length.toString()}) + {" "} + + {this.reserves() !.map((r) => )} + +
+ ); + } +} + +interface ExchangeProps { + exchange: ExchangeRecord; +} + +class ExchangeView extends React.Component { + render(): JSX.Element { + let e = this.props.exchange; + return ( +
+
    +
  • Exchange Base Url: {this.props.exchange.baseUrl}
    • +
  • Master public key:
    • +
+ + + + +
+ ); + } +} + +interface ExchangesListState { + exchanges?: ExchangeRecord[]; +} + +class ExchangesList extends React.Component { + constructor() { + super(); + let port = chrome.runtime.connect(); + port.onMessage.addListener((msg: any) => { + if (msg.notify) { + console.log("got notified"); + this.update(); + } + }); + this.update(); + this.state = {} as any; + } + + async update() { + let exchanges = await getExchanges(); + console.log("exchanges: ", exchanges); + this.setState({ exchanges }); + } + + render(): JSX.Element { + let exchanges = this.state.exchanges; + if (!exchanges) { + return ...; + } + return ( +
+ Exchanges ({exchanges.length.toString()}): + {exchanges.map(e => )} +
+ ); + } +} + +export function main() { + ReactDOM.render(, document.getElementById("container")!); +} + +document.addEventListener("DOMContentLoaded", main); -- cgit v1.2.3