refactor: move /wallets into vue component (#3462)
This commit is contained in:
dni ⚡
GitHub
parent
82307c4839
commit
4ad89396cc
9 changed files with 171 additions and 196 deletions
|
|
@ -1,165 +0,0 @@
|
||||||
{% if not ajax %} {% extends "base.html" %} {% endif %}
|
|
||||||
<!---->
|
|
||||||
{% from "macros.jinja" import window_vars with context %}
|
|
||||||
<!---->
|
|
||||||
{% block scripts %} {{ window_vars(user) }}{% endblock %} {% block page %}
|
|
||||||
|
|
||||||
<div class="row q-col-gutter-md q-mb-md">
|
|
||||||
<div class="col-12">
|
|
||||||
<q-card>
|
|
||||||
<div class="q-pa-sm q-pl-lg">
|
|
||||||
<div class="row items-center justify-between q-gutter-xs">
|
|
||||||
<div class="col">
|
|
||||||
<q-btn
|
|
||||||
@click="showAddWalletDialog.show = true"
|
|
||||||
:label="$t('add_wallet')"
|
|
||||||
color="primary"
|
|
||||||
>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
<div class="float-left">
|
|
||||||
<q-input
|
|
||||||
:label="$t('search_wallets')"
|
|
||||||
dense
|
|
||||||
class="float-right q-pr-xl"
|
|
||||||
v-model="walletsTable.search"
|
|
||||||
>
|
|
||||||
<template v-slot:before>
|
|
||||||
<q-icon name="search"> </q-icon>
|
|
||||||
</template>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon
|
|
||||||
v-if="walletsTable.search !== ''"
|
|
||||||
name="close"
|
|
||||||
@click="walletsTable.search = ''"
|
|
||||||
class="cursor-pointer"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<q-table
|
|
||||||
grid
|
|
||||||
grid-header
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
:rows="wallets"
|
|
||||||
:columns="walletsTable.columns"
|
|
||||||
v-model:pagination="walletsTable.pagination"
|
|
||||||
:loading="walletsTable.loading"
|
|
||||||
@request="getUserWallets"
|
|
||||||
row-key="id"
|
|
||||||
:filter="filter"
|
|
||||||
hide-header
|
|
||||||
>
|
|
||||||
<template v-slot:item="props">
|
|
||||||
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
|
|
||||||
<q-card
|
|
||||||
class="q-ma-sm cursor-pointer wallet-list-card"
|
|
||||||
style="text-decoration: none"
|
|
||||||
@click="goToWallet(props.row.id)"
|
|
||||||
>
|
|
||||||
<q-card-section>
|
|
||||||
<div class="row items-center">
|
|
||||||
<q-avatar
|
|
||||||
size="lg"
|
|
||||||
:text-color="$q.dark.isActive ? 'black' : 'grey-3'"
|
|
||||||
:color="props.row.extra.color"
|
|
||||||
:icon="props.row.extra.icon"
|
|
||||||
>
|
|
||||||
</q-avatar>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="text-h6 q-pl-md ellipsis"
|
|
||||||
class="text-bold"
|
|
||||||
v-text="props.row.name"
|
|
||||||
></div>
|
|
||||||
<q-space> </q-space>
|
|
||||||
<q-btn
|
|
||||||
v-if="props.row.extra.pinned"
|
|
||||||
round
|
|
||||||
color="primary"
|
|
||||||
text-color="black"
|
|
||||||
size="xs"
|
|
||||||
icon="push_pin"
|
|
||||||
class="float-right"
|
|
||||||
style="transform: rotate(30deg)"
|
|
||||||
></q-btn>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row items-center q-pt-sm">
|
|
||||||
<h6 class="q-my-none ellipsis full-width">
|
|
||||||
<strong
|
|
||||||
v-text="formatBalance(props.row.balance_msat / 1000)"
|
|
||||||
></strong>
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-separator />
|
|
||||||
|
|
||||||
<q-card-section class="text-left">
|
|
||||||
<small>
|
|
||||||
<strong>
|
|
||||||
<span v-text="$t('currency')"></span>
|
|
||||||
</strong>
|
|
||||||
<span v-text="props.row.currency || 'sat'"></span>
|
|
||||||
</small>
|
|
||||||
<br />
|
|
||||||
<small>
|
|
||||||
<strong>
|
|
||||||
<span v-text="$t('id')"></span>
|
|
||||||
:
|
|
||||||
</strong>
|
|
||||||
<span v-text="props.row.id"></span>
|
|
||||||
</small>
|
|
||||||
</q-card-section>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</q-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-dialog
|
|
||||||
v-model="showAddWalletDialog.show"
|
|
||||||
persistent
|
|
||||||
@hide="showAddWalletDialog = {show: false}"
|
|
||||||
>
|
|
||||||
<q-card style="min-width: 350px">
|
|
||||||
<q-card-section>
|
|
||||||
<div class="text-h6">
|
|
||||||
<span v-text="$t('wallet_name')"></span>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
|
|
||||||
<q-card-section class="q-pt-none">
|
|
||||||
<q-input
|
|
||||||
dense
|
|
||||||
v-model="showAddWalletDialog.name"
|
|
||||||
autofocus
|
|
||||||
@keyup.enter="submitAddWallet()"
|
|
||||||
></q-input>
|
|
||||||
</q-card-section>
|
|
||||||
|
|
||||||
<q-card-actions align="right" class="text-primary">
|
|
||||||
<q-btn flat :label="$t('cancel')" v-close-popup></q-btn>
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
:label="$t('add_wallet')"
|
|
||||||
v-close-popup
|
|
||||||
@click="submitAddWallet()"
|
|
||||||
></q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
{% endblock %}
|
|
||||||
|
|
@ -119,25 +119,6 @@ async def get_user_wallet(
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
@generic_router.get(
|
|
||||||
"/wallets",
|
|
||||||
response_class=HTMLResponse,
|
|
||||||
description="show wallets page",
|
|
||||||
)
|
|
||||||
async def wallets(
|
|
||||||
request: Request,
|
|
||||||
user: User = Depends(check_user_exists),
|
|
||||||
):
|
|
||||||
return template_renderer().TemplateResponse(
|
|
||||||
request,
|
|
||||||
"core/wallets.html",
|
|
||||||
{
|
|
||||||
"user": user.json(),
|
|
||||||
"ajax": _is_ajax_request(request),
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
@generic_router.get("/first_install", response_class=HTMLResponse)
|
@generic_router.get("/first_install", response_class=HTMLResponse)
|
||||||
async def first_install(request: Request):
|
async def first_install(request: Request):
|
||||||
if not settings.first_install:
|
if not settings.first_install:
|
||||||
|
|
@ -463,6 +444,7 @@ async def users_index(request: Request, user: User = Depends(check_admin)):
|
||||||
|
|
||||||
|
|
||||||
@generic_router.get("/payments", response_class=HTMLResponse)
|
@generic_router.get("/payments", response_class=HTMLResponse)
|
||||||
|
@generic_router.get("/wallets", response_class=HTMLResponse)
|
||||||
async def empty_index(request: Request, user: User = Depends(check_user_exists)):
|
async def empty_index(request: Request, user: User = Depends(check_user_exists)):
|
||||||
return template_renderer().TemplateResponse(
|
return template_renderer().TemplateResponse(
|
||||||
request,
|
request,
|
||||||
|
|
|
||||||
2
lnbits/static/bundle-components.min.js
vendored
2
lnbits/static/bundle-components.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -184,15 +184,6 @@ const routes = [
|
||||||
scripts: ['/static/js/account.js']
|
scripts: ['/static/js/account.js']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/wallets',
|
|
||||||
name: 'Wallets',
|
|
||||||
component: DynamicComponent,
|
|
||||||
props: {
|
|
||||||
fetchUrl: '/wallets',
|
|
||||||
scripts: ['/static/js/wallets.js']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/node',
|
path: '/node',
|
||||||
name: 'Node',
|
name: 'Node',
|
||||||
|
|
@ -212,6 +203,11 @@ const routes = [
|
||||||
path: '/audit',
|
path: '/audit',
|
||||||
name: 'Audit',
|
name: 'Audit',
|
||||||
component: PageAudit
|
component: PageAudit
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/wallets',
|
||||||
|
name: 'Wallets',
|
||||||
|
component: PageWallets
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
window.WalletsPageLogic = {
|
window.PageWallets = {
|
||||||
|
template: '#page-wallets',
|
||||||
mixins: [window.windowMixin],
|
mixins: [window.windowMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -47,6 +47,7 @@
|
||||||
"js/pages/node.js",
|
"js/pages/node.js",
|
||||||
"js/pages/node-public.js",
|
"js/pages/node-public.js",
|
||||||
"js/pages/audit.js",
|
"js/pages/audit.js",
|
||||||
|
"js/pages/wallets.js",
|
||||||
"js/components/lnbits-qrcode.js",
|
"js/components/lnbits-qrcode.js",
|
||||||
"js/components/lnbits-qrcode-lnurl.js",
|
"js/components/lnbits-qrcode-lnurl.js",
|
||||||
"js/components/lnbits-funding-sources.js",
|
"js/components/lnbits-funding-sources.js",
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
{% include('pages/payments.vue') %} {% include('pages/node.vue') %} {%
|
{% include('pages/payments.vue') %} {% include('pages/node.vue') %} {%
|
||||||
include('pages/audit.vue') %}
|
include('pages/audit.vue') %} {% include('pages/wallets.vue') %}
|
||||||
|
|
|
||||||
159
lnbits/templates/pages/wallets.vue
Normal file
159
lnbits/templates/pages/wallets.vue
Normal file
|
|
@ -0,0 +1,159 @@
|
||||||
|
<template id="page-wallets">
|
||||||
|
<div class="row q-col-gutter-md q-mb-md">
|
||||||
|
<div class="col-12">
|
||||||
|
<q-card>
|
||||||
|
<div class="q-pa-sm q-pl-lg">
|
||||||
|
<div class="row items-center justify-between q-gutter-xs">
|
||||||
|
<div class="col">
|
||||||
|
<q-btn
|
||||||
|
@click="showAddWalletDialog.show = true"
|
||||||
|
:label="$t('add_wallet')"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<div class="float-left">
|
||||||
|
<q-input
|
||||||
|
:label="$t('search_wallets')"
|
||||||
|
dense
|
||||||
|
class="float-right q-pr-xl"
|
||||||
|
v-model="walletsTable.search"
|
||||||
|
>
|
||||||
|
<template v-slot:before>
|
||||||
|
<q-icon name="search"> </q-icon>
|
||||||
|
</template>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="walletsTable.search !== ''"
|
||||||
|
name="close"
|
||||||
|
@click="walletsTable.search = ''"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<q-table
|
||||||
|
grid
|
||||||
|
grid-header
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:rows="wallets"
|
||||||
|
:columns="walletsTable.columns"
|
||||||
|
v-model:pagination="walletsTable.pagination"
|
||||||
|
:loading="walletsTable.loading"
|
||||||
|
@request="getUserWallets"
|
||||||
|
row-key="id"
|
||||||
|
:filter="filter"
|
||||||
|
hide-header
|
||||||
|
>
|
||||||
|
<template v-slot:item="props">
|
||||||
|
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
|
||||||
|
<q-card
|
||||||
|
class="q-ma-sm cursor-pointer wallet-list-card"
|
||||||
|
style="text-decoration: none"
|
||||||
|
@click="goToWallet(props.row.id)"
|
||||||
|
>
|
||||||
|
<q-card-section>
|
||||||
|
<div class="row items-center">
|
||||||
|
<q-avatar
|
||||||
|
size="lg"
|
||||||
|
:text-color="$q.dark.isActive ? 'black' : 'grey-3'"
|
||||||
|
:color="props.row.extra.color"
|
||||||
|
:icon="props.row.extra.icon"
|
||||||
|
>
|
||||||
|
</q-avatar>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="text-h6 q-pl-md ellipsis"
|
||||||
|
class="text-bold"
|
||||||
|
v-text="props.row.name"
|
||||||
|
></div>
|
||||||
|
<q-space> </q-space>
|
||||||
|
<q-btn
|
||||||
|
v-if="props.row.extra.pinned"
|
||||||
|
round
|
||||||
|
color="primary"
|
||||||
|
text-color="black"
|
||||||
|
size="xs"
|
||||||
|
icon="push_pin"
|
||||||
|
class="float-right"
|
||||||
|
style="transform: rotate(30deg)"
|
||||||
|
></q-btn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row items-center q-pt-sm">
|
||||||
|
<h6 class="q-my-none ellipsis full-width">
|
||||||
|
<strong
|
||||||
|
v-text="formatBalance(props.row.balance_msat / 1000)"
|
||||||
|
></strong>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section class="text-left">
|
||||||
|
<small>
|
||||||
|
<strong>
|
||||||
|
<span v-text="$t('currency')"></span>
|
||||||
|
</strong>
|
||||||
|
<span v-text="props.row.currency || 'sat'"></span>
|
||||||
|
</small>
|
||||||
|
<br />
|
||||||
|
<small>
|
||||||
|
<strong>
|
||||||
|
<span v-text="$t('id')"></span>
|
||||||
|
:
|
||||||
|
</strong>
|
||||||
|
<span v-text="props.row.id"></span>
|
||||||
|
</small>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-dialog
|
||||||
|
v-model="showAddWalletDialog.show"
|
||||||
|
persistent
|
||||||
|
@hide="showAddWalletDialog = {show: false}"
|
||||||
|
>
|
||||||
|
<q-card style="min-width: 350px">
|
||||||
|
<q-card-section>
|
||||||
|
<div class="text-h6">
|
||||||
|
<span v-text="$t('wallet_name')"></span>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-section class="q-pt-none">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
v-model="showAddWalletDialog.name"
|
||||||
|
autofocus
|
||||||
|
@keyup.enter="submitAddWallet()"
|
||||||
|
></q-input>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="text-primary">
|
||||||
|
<q-btn flat :label="$t('cancel')" v-close-popup></q-btn>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
:label="$t('add_wallet')"
|
||||||
|
v-close-popup
|
||||||
|
@click="submitAddWallet()"
|
||||||
|
></q-btn>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
@ -99,6 +99,7 @@
|
||||||
"js/pages/node.js",
|
"js/pages/node.js",
|
||||||
"js/pages/node-public.js",
|
"js/pages/node-public.js",
|
||||||
"js/pages/audit.js",
|
"js/pages/audit.js",
|
||||||
|
"js/pages/wallets.js",
|
||||||
"js/components/lnbits-qrcode.js",
|
"js/components/lnbits-qrcode.js",
|
||||||
"js/components/lnbits-qrcode-lnurl.js",
|
"js/components/lnbits-qrcode-lnurl.js",
|
||||||
"js/components/lnbits-funding-sources.js",
|
"js/components/lnbits-funding-sources.js",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue