236 lines
8.6 KiB
HTML
236 lines
8.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
{% for url in INCLUDED_CSS %}
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="{{ static_url_for('static', url ) }}"
|
|
/>
|
|
{% endfor %} {% block styles %}{% endblock %}
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Material Icons';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url("{{ static_url_for('static', 'fonts/material-icons-v50.woff2') }}")
|
|
format('woff2');
|
|
}
|
|
</style>
|
|
<title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"
|
|
/>
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
{% if web_manifest %}
|
|
<link async="async" rel="manifest" href="{{ web_manifest }}" />
|
|
{% endif %} {% block head_scripts %}{% endblock %}
|
|
</head>
|
|
|
|
<body data-theme="bitcoin">
|
|
<div id="vue">
|
|
<q-layout view="hHh lpR lfr" v-cloak>
|
|
<lnbits-header></lnbits-header>
|
|
|
|
{% block drawer %}
|
|
<q-drawer
|
|
v-model="g.visibleDrawer"
|
|
side="left"
|
|
:width="($q.screen.lt.md) ? 260 : 230"
|
|
show-if-above
|
|
:elevated="$q.screen.lt.md"
|
|
>
|
|
<q-scroll-area style="height: 100%">
|
|
<q-item>
|
|
<q-item-section class="cursor-pointer" @click="goToWallets()">
|
|
<q-item-label
|
|
:style="$q.dark.isActive ? 'color:rgba(255, 255, 255, 0.64)' : ''"
|
|
class="q-item__label q-item__label--header q-pa-none"
|
|
header
|
|
v-text="$t('wallets') + ' (' + g.user.wallets.length + ')'"
|
|
></q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-btn
|
|
flat
|
|
:icon=" walletFlip ? 'view_list' : 'view_column'"
|
|
color="grey"
|
|
class=""
|
|
@click="flipWallets($q.screen.lt.md)"
|
|
>
|
|
<q-tooltip
|
|
><span
|
|
v-text="walletFlip ? $t('view_list') : $t('view_column')"
|
|
></span
|
|
></q-tooltip>
|
|
</q-btn>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<lnbits-wallet-list
|
|
v-if="!walletFlip"
|
|
:balance="balance"
|
|
@wallet-action="handleWalletAction"
|
|
></lnbits-wallet-list>
|
|
<lnbits-manage />
|
|
<lnbits-extension-list class="q-pb-xl"></lnbits-extension-list>
|
|
</q-scroll-area>
|
|
</q-drawer>
|
|
{% endblock %} {% block page_container %}
|
|
<q-page-container>
|
|
<q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
|
|
<q-scroll-area
|
|
v-if="g.user && walletFlip"
|
|
style="
|
|
height: 130px;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
hsl(0 0% 0% / 1) 80%,
|
|
hsl(0 0% 0% / 0)
|
|
);
|
|
"
|
|
>
|
|
<div class="row no-wrap q-pr-md">
|
|
<q-card
|
|
@click="showAddNewWalletDialog()"
|
|
class="wallet-list-card cursor-pointer"
|
|
>
|
|
<q-card-section
|
|
class="flex flex-center column full-height text-center"
|
|
>
|
|
<div>
|
|
<q-btn round color="primary" icon="add">
|
|
<q-tooltip
|
|
><span v-text="$t('add_new_wallet')"></span
|
|
></q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div>
|
|
<q-badge
|
|
@click="addWalletDialog.walletType='lightning-shared '"
|
|
dense
|
|
outline
|
|
class="q-mt-sm"
|
|
>
|
|
<span
|
|
v-text="'New wallet invite (' + g.user.walletInvitesCount + ')'"
|
|
></span>
|
|
</q-badge>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
<q-card
|
|
v-for="wallet in g.user.wallets.slice(0, g.user.extra.visible_wallet_count || 10)"
|
|
:key="wallet.id"
|
|
clickable
|
|
@click="selectWallet(wallet)"
|
|
class="wallet-list-card"
|
|
style="text-decoration: none"
|
|
:style="
|
|
g.wallet && g.wallet.id === wallet.id
|
|
? `width: 250px; text-decoration: none; cursor: pointer; background-color: ${
|
|
$q.dark.isActive ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)'
|
|
} !important;`
|
|
: 'width: 250px; text-decoration: none; border: 0px; cursor: pointer;'
|
|
"
|
|
:class="{
|
|
'active-wallet-card': g.wallet && g.wallet.id === wallet.id
|
|
}"
|
|
>
|
|
<q-card-section>
|
|
<div class="row items-center">
|
|
<q-avatar
|
|
size="lg"
|
|
:text-color="$q.dark.isActive ? 'black' : 'grey-3'"
|
|
:class="g.wallet && g.wallet.id === wallet.id
|
|
? ''
|
|
: 'disabled'
|
|
"
|
|
:color="g.wallet && g.wallet.id === wallet.id ? wallet.extra.color : wallet.extra.color"
|
|
:icon="g.wallet && g.wallet.id === wallet.id ? wallet.extra.icon : wallet.extra.icon"
|
|
>
|
|
</q-avatar>
|
|
<div
|
|
class="text-h6 q-pl-md ellipsis"
|
|
style="max-width: 80%"
|
|
:class="{
|
|
'text-bold': g.wallet && g.wallet.id === wallet.id
|
|
}"
|
|
v-text="wallet.name"
|
|
></div>
|
|
</div>
|
|
<div class="row items-center q-pt-sm">
|
|
<h6 class="q-my-none ellipsis full-width">
|
|
<strong v-text="formatBalance(wallet.sat)"></strong>
|
|
</h6>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
<q-card
|
|
v-if="g.user.hiddenWalletsCount"
|
|
class="wallet-list-card"
|
|
>
|
|
<q-card-section
|
|
class="flex flex-center column full-height text-center"
|
|
>
|
|
<div>
|
|
<q-btn
|
|
round
|
|
color="primary"
|
|
icon="more_horiz"
|
|
@click="goToWallets()"
|
|
>
|
|
<q-tooltip
|
|
><span
|
|
v-text="$t('more_count', {count: g.user.hiddenWalletsCount})"
|
|
></span
|
|
></q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</q-scroll-area>
|
|
<q-dialog
|
|
v-model="addWalletDialog.show"
|
|
position="top"
|
|
@hide="addWalletDialog = {show: false}"
|
|
>
|
|
<lnbits-new-user-wallet
|
|
:form-data="formData"
|
|
></lnbits-new-user-wallet>
|
|
</q-dialog>
|
|
|
|
<router-view v-if="isVueRoute"></router-view>
|
|
|
|
<!-- FastAPI Content -->
|
|
<div v-else>{% block page %}{% endblock %}</div>
|
|
</q-page>
|
|
</q-page-container>
|
|
{% endblock %} {% block footer %}
|
|
<lnbits-footer />
|
|
{% endblock %}
|
|
</q-layout>
|
|
</div>
|
|
<script type="text/javascript">
|
|
const WINDOW_SETTINGS = {{ WINDOW_SETTINGS | tojson }}
|
|
Object.keys(WINDOW_SETTINGS).forEach(key => {
|
|
window[key] = WINDOW_SETTINGS[key]
|
|
})
|
|
</script>
|
|
{% include('components.vue') %} {% include('pages.vue') %} {% block
|
|
vue_templates %}{% endblock %} {% for url in INCLUDED_JS %}
|
|
<script src="{{ static_url_for('static', url) }}"></script>
|
|
{% endfor %} {% block scripts %}{% endblock %} {% for url in
|
|
INCLUDED_COMPONENTS %}
|
|
<script src="{{ static_url_for('static', url) }}"></script>
|
|
{% endfor %}
|
|
</body>
|
|
</html>
|