diff options
Diffstat (limited to 'packages/auditor-backoffice-ui')
| -rw-r--r-- | packages/auditor-backoffice-ui/README.md | 2 | ||||
| -rw-r--r-- | packages/auditor-backoffice-ui/src/Application.tsx | 270 | ||||
| -rw-r--r-- | packages/auditor-backoffice-ui/src/components/menu/SideBar.tsx | 62 | ||||
| -rw-r--r-- | packages/auditor-backoffice-ui/src/components/menu/index.tsx | 107 | ||||
| -rw-r--r-- | packages/auditor-backoffice-ui/src/declaration.d.ts | 44 | ||||
| -rw-r--r-- | packages/auditor-backoffice-ui/src/index.tsx | 38 |
6 files changed, 447 insertions, 76 deletions
diff --git a/packages/auditor-backoffice-ui/README.md b/packages/auditor-backoffice-ui/README.md index b10fa6a94..03f4403b4 100644 --- a/packages/auditor-backoffice-ui/README.md +++ b/packages/auditor-backoffice-ui/README.md @@ -1,4 +1,4 @@ -## AUditor Admin Frontend + ## AUditor Admin Frontend Auditor Admin Frontend is a Single Page Application (SPA) that connects with a running Auditor Backend and lets you audit the exchange. diff --git a/packages/auditor-backoffice-ui/src/Application.tsx b/packages/auditor-backoffice-ui/src/Application.tsx index 43d04ef1c..36059fe1a 100644 --- a/packages/auditor-backoffice-ui/src/Application.tsx +++ b/packages/auditor-backoffice-ui/src/Application.tsx @@ -14,35 +14,261 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import {Fragment, VNode, h, render} from "preact"; +import "./scss/main.scss"; +import { AuditorBackend } from "./declaration.js" + /** * @author Nic Eigel */ -//import { tryConfig } from "hooks/backend.ts" -import type { AuditorBackend } from "./declaration.d.ts"; -import { Fragment, VNode, h, render } from "preact"; +export function Application(): VNode { + return ( + <MyComponent/> + ); +} + + +export class Configer { + name?: string + version?: string + implementation?: string + currency?: string + auditor_public_key?: string + exchange_master_public_key?: string + + public constructor(init?: Partial<Configer>) { + Object.assign(this, init); + } +} + +interface ApiResponse { + Data: Array<Configer> +} + +function tryConfig(): Promise<Configer> { + console.log("getting here"); + const request: RequestInfo = new Request('http://localhost:8083/config', { + method: 'GET' + }) + return fetch(request) + // the JSON body is taken from the response + //.then(res => res.json()) + //.then(res => { + // console.log(res); + // return res as AuditorBackend.Config; + .then(response => { + if (!response.ok) { + throw new Error(response.statusText) + } + return response.json() as Promise<Configer> + }) + +} + +let testers: Array<Configer> = [] + +// Implementation code where T is the returned data shape +function api<T>(url: string): Promise<T> { + return fetch(url) + .then(response => { + if (!response.ok) { + throw new Error(response.statusText) + } + return response.json() + }) + +} + +// Consumer +api<Configer>('http://localhost:8083/config') + .then((r: Configer) => { + let e = structuredClone(r) + testers.push(r) + e.name = "er" + testers.push(e) + teste() + }) + .catch(error => { + /* show error message */ + }) + + +function MyComponent() { + + return <section class="section is-main-section"> + <div> + <div class="card has-table"> + <header class="card-header"> + <p class="card-header-title"> + <span class="icon"> + <i class="mdi mdi-cash-register"/> + </span> + Deposit Confirmations + </p> + </header> + <div class="card-content"> + <div class="b-table has-pagination"> + <div class="table-wrapper has-mobile-cards"> + <div class="table-container"> + <table class="table is-striped is-hoverable is-fullwidth"> + <thead> + <th>Name</th> + <th>Currency</th> + <th>Version</th> + <th>Auditor Pubkey</th> + <th>Exchange Master Pub Key</th> + <th>Implementation</th> + </thead> + <Glossary/> + </table> + </div> + </div> + </div> + </div> + </div> + + <Sidebar/> + <NavigationBar title={"Deposit confirmations"}/> + + </div> + </section>; +} + +function Glossary() { + console.log(testers) + return ( + <tbody> + { + testers.map(item => ( + <Fragment key={item.name}> + <tr> + <td>{item.name}</td> + <td>{item.currency}</td> + <td>{item.version}</td> + <td>test</td> + <td>test</td> + <td>{item.implementation}</td> + <td class="is-actions-cell right-sticky"> + <div class="buttons is-right"> + <button + class="button is-small is-info jb-modal" + type="button" + > + Update + </button> + <button + class="button is-small is-danger jb-modal" + type="button" + > + Delete + </button> + </div> + </td> + </tr> + </Fragment> + )) + } + </tbody> + ); +} + +const App = ( + <ul> + <MyComponent/> + </ul> +); + + +function teste() { + render(App, document.body); +} + + +export function Sidebar(props: any): VNode { + //const config = useConfigContext(); + //const { url: backendURL } = useBackendContext() + //const {i18n} = useTranslationContext(); -function tryConfig(): Promise<AuditorBackend.Config> { - // const request: RequestInfo = new Request('./Config.json', { - // method: 'GET', - // headers: headers - // }) -console.log("getting here"); - return fetch("http://localhost:8083/config") - // the JSON body is taken from the response - .then(res => res.json()) - .then(res => { - // The response has an `any` type, so we need to cast - // it to the `User` type, and return it from the promise - return res as AuditorBackend.Config; - }); + return ( + <aside class="aside is-placed-left is-expanded" style={{overflowY: "scroll"}}> + <div class="aside-tools"> + <div class="aside-tools-label"> + <div> + <b>Taler</b> Backoffice + </div> + <div + class="is-size-7 has-text-right" + style={{lineHeight: 0, marginTop: -10}} + > + Version (0.1) + </div> + </div> + </div> + <div class="menu is-menu-main"> + <Fragment> + <ul class="menu-list"> + <li> + <a href={"/deposit-confirmations"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-cash-register"/> + </span> + <span class="menu-item-label"> + Deposit confirmations + </span> + </a> + </li> + </ul> + </Fragment> + </div> + </aside> + ); +} +interface Props { + title: string; } -let test = tryConfig(); -console.log(test); -// Create your app -const app = h("h1", null, test); +export function NavigationBar({title}: Props): VNode { + return ( + <nav + class="navbar is-fixed-top" + role="navigation" + aria-label="main navigation" + > + <div class="navbar-brand"> + <span class="navbar-item" style={{fontSize: 24, fontWeight: 900}}> + {title} + </span> + + <a + role="button" + class="navbar-burger" + aria-label="menu" + aria-expanded="false" + onClick={(e) => { + e.stopPropagation(); + }} + > + <span aria-hidden="true"/> + <span aria-hidden="true"/> + <span aria-hidden="true"/> + </a> + </div> -render(app, document.body); + <div class="navbar-menu "> + <a + class="navbar-start is-justify-content-center is-flex-grow-1" + href="https://taler.net" + > + <img style={{height: 35, margin: 10}}/> + </a> + <div class="navbar-end"> + <div class="navbar-item" style={{paddingTop: 4, paddingBottom: 4}}> + </div> + </div> + </div> + </nav> + ); +}
\ No newline at end of file diff --git a/packages/auditor-backoffice-ui/src/components/menu/SideBar.tsx b/packages/auditor-backoffice-ui/src/components/menu/SideBar.tsx new file mode 100644 index 000000000..a000cd251 --- /dev/null +++ b/packages/auditor-backoffice-ui/src/components/menu/SideBar.tsx @@ -0,0 +1,62 @@ +/* + This file is part of GNU Taler + (C) 2021-2023 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/> + */ + +/** + * @author Nic Eigel + */ + +import {useTranslationContext} from "@gnu-taler/web-util/browser"; +import {Fragment, h, VNode} from "preact"; + +export function Sidebar(props: any): VNode { + //const config = useConfigContext(); + //const { url: backendURL } = useBackendContext() + const {i18n} = useTranslationContext(); + + return ( + <aside class="aside is-placed-left is-expanded" style={{overflowY: "scroll"}}> + <div class="aside-tools"> + <div class="aside-tools-label"> + <div> + <b>Taler</b> Backoffice + </div> + <div + class="is-size-7 has-text-right" + style={{lineHeight: 0, marginTop: -10}} + > + Version (0.1) + </div> + </div> + </div> + <div class="menu is-menu-main"> + <Fragment> + <ul class="menu-list"> + <li> + <a href={"/deposit-confirmations"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-cash-register"/> + </span> + <span class="menu-item-label"> + <i18n.Translate>Deposit Confirmations</i18n.Translate> + </span> + </a> + </li> + </ul> + </Fragment> + </div> + </aside> + ); +}
\ No newline at end of file diff --git a/packages/auditor-backoffice-ui/src/components/menu/index.tsx b/packages/auditor-backoffice-ui/src/components/menu/index.tsx new file mode 100644 index 000000000..4c02797ab --- /dev/null +++ b/packages/auditor-backoffice-ui/src/components/menu/index.tsx @@ -0,0 +1,107 @@ +/* + +This file is part of GNU Taler +(C) 2021-2024 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/> + +*/ + +/** + * @author Nic Eigel + * + */ +/* +import {ComponentChildren, Fragment, h, VNode} from "preact"; +import {useEffect} from "preact/hooks"; + +function WithTitle({ + title, + children, + }: { + title: string; + children: ComponentChildren; +}): VNode { + useEffect(() => { + document.title = `Taler Backoffice: ${title}`; + }, [title]); + return <Fragment>{children}</Fragment>; +} + +export function Menu({ + onLogout, + onShowSettings, + title, + instance, + path, + admin, + setInstanceName, + isPasswordOk + }: MenuProps): VNode { + const [mobileOpen, setMobileOpen] = useState(false); + + const titleWithSubtitle = title + ? title + : !admin + ? getInstanceTitle(path, instance) + : getAdminTitle(path, instance); + const adminInstance = instance === "default"; + const mimic = admin && !adminInstance; + return ( + <WithTitle title={titleWithSubtitle}> + <div + class={mobileOpen ? "has-aside-mobile-expanded" : ""} + onClick={() => setMobileOpen(false)} + > + <NavigationBar + onMobileMenu={() => setMobileOpen(!mobileOpen)} + title={titleWithSubtitle} + /> + + {onLogout && ( + <Sidebar + onShowSettings={onShowSettings} + onLogout={onLogout} + admin={admin} + mimic={mimic} + instance={instance} + mobile={mobileOpen} + isPasswordOk={isPasswordOk} + /> + )} + + {mimic && ( + <nav class="level" style={{ + zIndex: 100, + position: "fixed", + width: "50%", + marginLeft: "20%" + }}> + <div class="level-item has-text-centered has-background-warning"> + <p class="is-size-5"> + You are viewing the instance <b>"{instance}"</b>.{" "} + <a + href="#/instances" + onClick={(e) => { + setInstanceName("default"); + }} + > + go back + </a> + </p> + </div> + </nav> + )} + </div> + </WithTitle> + ); +}*/
\ No newline at end of file diff --git a/packages/auditor-backoffice-ui/src/declaration.d.ts b/packages/auditor-backoffice-ui/src/declaration.d.ts index 4eea56db8..d5301c115 100644 --- a/packages/auditor-backoffice-ui/src/declaration.d.ts +++ b/packages/auditor-backoffice-ui/src/declaration.d.ts @@ -20,26 +20,26 @@ */ export namespace AuditorBackend { - interface DepositConfirmation { - // identifier - serial_id: number; - - // amount of deposit confirmation - amount: string; - - // timestamp of deposit confirmation - timestamp: string; - - // account - account: string; - } - - interface Config { - name: string; - version: string; - implementation: string; - currency: string; - auditor_public_key: string; - exchange_master_public_key: string; - } + interface DepositConfirmation { + // identifier + serial_id: number; + + // amount of deposit confirmation + amount: string; + + // timestamp of deposit confirmation + timestamp: string; + + // account + account: string; + } + + interface Config { + name: string; + version: string; + implementation: string; + currency: string; + auditor_public_key: string; + exchange_master_public_key: string; + } }
\ No newline at end of file diff --git a/packages/auditor-backoffice-ui/src/index.tsx b/packages/auditor-backoffice-ui/src/index.tsx index 622d008a6..79c0edce4 100644 --- a/packages/auditor-backoffice-ui/src/index.tsx +++ b/packages/auditor-backoffice-ui/src/index.tsx @@ -18,35 +18,11 @@ * @author Nic Eigel */ -//import { tryConfig } from "hooks/backend.ts" -import type { AuditorBackend } from "./declaration.d.ts"; -import { Fragment, VNode, h, render } from "preact"; - - -function tryConfig(): Promise<AuditorBackend.Config> { - console.log("getting here"); - const request: RequestInfo = new Request('http://localhost:8083/config', { - method: 'GET' - }) - return fetch(request) - // the JSON body is taken from the response - .then(res => res.json()) - .then(res => { - console.log(res); - return res as AuditorBackend.Config; - }); - -} -var test2; -let test = tryConfig().then(config => { - test2 = config; -}); -console.log(test); -console.log(test2); -if (test2) { - console.log("now"); - const app = h("h1", null, test2); - - render(app, document.body); -} +import { Application } from "./Application.js"; +import { h, render } from "preact"; +import "./scss/main.scss"; + +const app = document.getElementById("app"); + +render(<Application />, app as any);
\ No newline at end of file |