scrolling works

This commit is contained in:
callebtc 2022-11-07 15:36:52 +01:00 committed by dni ⚡
parent 4c38bcbcf3
commit b936d122a3
2 changed files with 283 additions and 280 deletions

View File

@ -110,5 +110,6 @@ LNTIPS_API_KEY=LNTIPS_ADMIN_KEY
LNTIPS_API_ENDPOINT=https://ln.tips LNTIPS_API_ENDPOINT=https://ln.tips
# Cashu Mint # Cashu Mint
# Use a long-enough random (!) private key # Use a long-enough random (!) private key.
# Once set, you cannot change this key as for now.
CASHU_PRIVATE_KEY="SuperSecretPrivateKey" CASHU_PRIVATE_KEY="SuperSecretPrivateKey"

View File

@ -5,305 +5,307 @@ page_container %}
<q-page> <q-page>
<div class="row q-col-gutter-md justify-center q-pt-lg"> <div class="row q-col-gutter-md justify-center q-pt-lg">
<div class="col-12 col-sm-8 col-md-9 col-lg-7 text-center q-gutter-y-md"> <div class="col-12 col-sm-8 col-md-9 col-lg-7 text-center q-gutter-y-md">
<q-scroll-area :style="'height: ' + height + 'px; max-width: 1024px'"> <q-card class="q-mb-sm">
<q-card class="q-mb-sm"> <q-card-section>
<q-card-section> <div class="gt-sm">
<div class="gt-sm"> <div class="row">
<div class="row"> <div class="col-3 q-pt-sm">
<div class="col-3 q-pt-sm">
<q-btn
class="full-width"
size="14px"
icon="bolt"
rectangle
color="primary"
@click="showInvoicesDialog"
><strong>Get invoice</strong>
</q-btn>
</div>
<div class="col-6">
<h3 class="q-my-none q-py-none">
<center>
<strong>{% raw %} {{getBalance()}} </strong>
{{tickershort}}{% endraw %}
</center>
</h3>
</div>
<div class="col-3 q-pt-sm">
<q-btn
class="full-width"
@click="showParseDialog"
size="14px"
icon="bolt"
rectangle
color="primary"
class="full-width"
><strong>Pay invoice</strong>
</q-btn>
</div>
</div>
</div>
<div class="lt-md">
<div class="row">
<div class="col-12">
<h3 class="q-my-none q-py-none">
<center>
<strong>{% raw %} {{getBalance()}} </strong>
{{tickershort}}{% endraw %}
</center>
</h3>
</div>
</div>
</div>
</q-card-section>
</q-card>
<q-card>
<q-card-section>
<div class="row items-center no-wrap q-mb-sm">
<div class="col-6 col-sm-5 col-md-4 q-px-xs">
<q-btn <q-btn
size="12px"
rectangle
unelevated
color="primary"
icon="file_download"
class="full-width" class="full-width"
@click="showReceiveTokensDialog" size="14px"
>Get Ecash</q-btn icon="bolt"
> rectangle
color="primary"
@click="showInvoicesDialog"
><strong>Get invoice</strong>
</q-btn>
</div> </div>
<div class="col-0 col-sm-2 col-md-4"></div> <div class="col-6">
<div class="col-6 col-sm-5 col-md-4 q-px-xs"> <h3 class="q-my-none q-py-none">
<center>
<strong>{% raw %} {{getBalance()}} </strong>
{{tickershort}}{% endraw %}
</center>
</h3>
</div>
<div class="col-3 q-pt-sm">
<q-btn <q-btn
size="12px"
rectangle
unelevated
color="primary"
icon="file_upload"
class="full-width" class="full-width"
@click="showSendTokensDialog" @click="showParseDialog"
> size="14px"
Pay Ecash</q-btn icon="bolt"
> rectangle
color="primary"
class="full-width"
><strong>Pay invoice</strong>
</q-btn>
</div> </div>
</div> </div>
</div>
<div class="lt-md">
<div class="row">
<div class="col-12">
<h3 class="q-my-none q-py-none">
<center>
<strong>{% raw %} {{getBalance()}} </strong>
{{tickershort}}{% endraw %}
</center>
</h3>
</div>
</div>
</div>
</q-card-section>
</q-card>
<!-- /////////////////////////////////////////// <q-card>
<q-card-section>
<div class="row items-center no-wrap q-mb-sm">
<div class="col-6 col-sm-5 col-md-4 q-px-xs">
<q-btn
size="12px"
rectangle
unelevated
color="primary"
icon="file_download"
class="full-width"
@click="showReceiveTokensDialog"
>Get Ecash</q-btn
>
</div>
<div class="col-0 col-sm-2 col-md-4"></div>
<div class="col-6 col-sm-5 col-md-4 q-px-xs">
<q-btn
size="12px"
rectangle
unelevated
color="primary"
icon="file_upload"
class="full-width"
@click="showSendTokensDialog"
>
Pay Ecash</q-btn
>
</div>
</div>
<!-- ///////////////////////////////////////////
////////////////// TABLES ///////////////// ////////////////// TABLES /////////////////
/////////////////////////////////////////// --> /////////////////////////////////////////// -->
<q-tabs v-model="tab" no-caps class="bg-dark text-white shadow-2"> <q-tabs v-model="tab" no-caps class="bg-dark text-white shadow-2">
<q-tab name="tokens" label="Tokens"></q-tab> <q-tab name="tokens" label="Tokens"></q-tab>
<q-tab name="invoices" label="Invoices"></q-tab> <q-tab name="invoices" label="Invoices"></q-tab>
<q-tab name="history" label="History"></q-tab> <q-tab name="history" label="History"></q-tab>
</q-tabs> </q-tabs>
<q-tab-panels v-model="tab"> <q-tab-panels v-model="tab">
<!-- ////////////////// TOKEN LIST ///////////////// --> <!-- ////////////////// TOKEN LIST ///////////////// -->
<q-tab-panel name="tokens"> <q-tab-panel name="tokens">
<q-table <q-table
dense dense
flat flat
:data="getTokenList()" :data="getTokenList()"
:columns="tokensTable.columns" :columns="tokensTable.columns"
:pagination.sync="tokensTable.pagination" :pagination.sync="tokensTable.pagination"
no-data-label="No tokens yet" no-data-label="No tokens yet"
:filter="tokensTable.filter" :filter="tokensTable.filter"
> >
{% raw %} {% raw %}
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props"> <q-tr :props="props">
<q-td <q-td
key="value" key="value"
:props="props" :props="props"
:class="props.row.value > 0 ? 'text-green-13 text-weight-bold' : ''" :class="props.row.value > 0 ? 'text-green-13 text-weight-bold' : ''"
> >
<div>{{props.row.value}}</div> <div>{{props.row.value}}</div>
</q-td> </q-td>
<q-td key="count" :props="props"> <q-td key="count" :props="props">
<div>{{props.row.count}}</div> <div>{{props.row.count}}</div>
</q-td> </q-td>
<q-td key="sum" :props="props"> <q-td key="sum" :props="props">
<div>{{props.row.sum}}</div> <div>{{props.row.sum}}</div>
</q-td> </q-td>
<q-td key="memo" :props="props"> <q-td key="memo" :props="props">
<div>{{props.row.memo}}</div> <div>{{props.row.memo}}</div>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
{% endraw %} {% endraw %}
</q-table> </q-table>
</q-tab-panel> </q-tab-panel>
<!-- ////////////////// INVOICE LIST ///////////////// --> <!-- ////////////////// INVOICE LIST ///////////////// -->
<q-tab-panel name="invoices"> <q-tab-panel name="invoices">
<q-table <q-table
dense dense
flat flat
:data="invoicesCashu" :data="invoicesCashu"
:columns="invoicesTable.columns" :columns="invoicesTable.columns"
:pagination.sync="invoicesTable.pagination" :pagination.sync="invoicesTable.pagination"
no-data-label="There are no invoices here yet" no-data-label="There are no invoices here yet"
:filter="invoicesTable.filter" :filter="invoicesTable.filter"
> >
{% raw %} {% raw %}
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props"> <q-tr :props="props">
<q-td key="status" :props="props"> <q-td key="status" :props="props">
<div v-if="props.row.status == 'pending'"> <div v-if="props.row.status == 'pending'">
<q-icon <q-icon
@click="showInvoiceDialog(props.row)" @click="showInvoiceDialog(props.row)"
name="settings_ethernet" name="settings_ethernet"
color="grey" color="grey"
> >
<q-tooltip>Pending</q-tooltip> <q-tooltip>Pending</q-tooltip>
</q-icon> </q-icon>
<q-badge <q-badge
size="lg" size="lg"
color="secondary" color="secondary"
class="q-mr-md cursor-pointer" class="q-mr-md cursor-pointer"
@click="recheckInvoice(props.row.hash)" @click="recheckInvoice(props.row.hash)"
> >
Check Check
</q-badge> </q-badge>
</div> </div>
<div v-if="props.row.status === 'paid'"> <div v-if="props.row.status === 'paid'">
<q-icon <q-icon
v-if="props.row.amount>0" v-if="props.row.amount>0"
name="call_received" name="call_received"
color="green" color="green"
><q-tooltip>Received</q-tooltip></q-icon ><q-tooltip>Received</q-tooltip></q-icon
> >
<q-icon <q-icon
v-if="props.row.amount<0" v-if="props.row.amount<0"
name="call_made" name="call_made"
color="red" color="red"
><q-tooltip>Paid</q-tooltip></q-icon ><q-tooltip>Paid</q-tooltip></q-icon
> >
<!-- <q-icon name="props.row.amount < 0 ? 'call_made' : 'call_received'" color="green"></q-icon> --> <!-- <q-icon name="props.row.amount < 0 ? 'call_made' : 'call_received'" color="green"></q-icon> -->
</div> </div>
</q-td> </q-td>
<q-td <q-td
key="amount" key="amount"
:props="props" :props="props"
:class="props.row.amount > 0 ? 'text-green-13 text-weight-bold' : ''" :class="props.row.amount > 0 ? 'text-green-13 text-weight-bold' : ''"
> >
<div>{{props.row.amount}}</div> <div>{{props.row.amount}}</div>
</q-td> </q-td>
<!-- <q-td key="memo" :props="props"> <!-- <q-td key="memo" :props="props">
<div>{{props.row.memo}}</div> <div>{{props.row.memo}}</div>
</q-td> --> </q-td> -->
<q-td key="date" :props="props"> <q-td key="date" :props="props">
<div>{{props.row.date}}</div> <div>{{props.row.date}}</div>
</q-td> </q-td>
<q-td key="bolt11" :props="props"> <q-td key="bolt11" :props="props">
<div>{{props.row.bolt11}}</div> <div>{{props.row.bolt11}}</div>
</q-td> </q-td>
<q-td key="hash" :props="props"> <q-td key="hash" :props="props">
<div>{{props.row.hash}}</div> <div>{{props.row.hash}}</div>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
{% endraw %} {% endraw %}
</q-table> </q-table>
</q-tab-panel> </q-tab-panel>
<!-- ////////////////// HISTORY LIST ///////////////// --> <!-- ////////////////// HISTORY LIST ///////////////// -->
<q-tab-panel name="history"> <q-tab-panel name="history">
<q-table <q-table
dense dense
flat flat
:data="historyTokens" :data="historyTokens"
:columns="historyTable.columns" :columns="historyTable.columns"
:pagination.sync="historyTable.pagination" :pagination.sync="historyTable.pagination"
no-data-label="There are no tokens here yet" no-data-label="There are no tokens here yet"
:filter="historyTable.filter" :filter="historyTable.filter"
> >
{% raw %} {% raw %}
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props"> <q-tr :props="props">
<q-td key="status" :props="props"> <q-td key="status" :props="props">
<div v-if="props.row.status == 'pending'"> <div v-if="props.row.status == 'pending'">
<q-icon <q-icon
@click="showTokenDialog(props.row.token)" @click="showTokenDialog(props.row.token)"
name="settings_ethernet" name="settings_ethernet"
color="grey" color="grey"
> >
<q-tooltip>Pending</q-tooltip> <q-tooltip>Pending</q-tooltip>
</q-icon> </q-icon>
<q-badge <q-badge
size="lg" size="lg"
color="secondary" color="secondary"
class="q-mr-md cursor-pointer" class="q-mr-md cursor-pointer"
@click="checkTokenSpendable(props.row.token)" @click="checkTokenSpendable(props.row.token)"
> >
Check Check
</q-badge> </q-badge>
</div> </div>
<div v-if="props.row.status === 'paid'"> <div v-if="props.row.status === 'paid'">
<q-icon <q-icon
v-if="props.row.amount>0" v-if="props.row.amount>0"
name="call_received" name="call_received"
color="green" color="green"
><q-tooltip>Received</q-tooltip></q-icon ><q-tooltip>Received</q-tooltip></q-icon
> >
<q-icon <q-icon
v-if="props.row.amount<0" v-if="props.row.amount<0"
name="call_made" name="call_made"
color="red" color="red"
><q-tooltip>Paid</q-tooltip></q-icon ><q-tooltip>Paid</q-tooltip></q-icon
> >
<!-- <q-icon name="props.row.amount < 0 ? 'call_made' : 'call_received'" color="green"></q-icon> --> <!-- <q-icon name="props.row.amount < 0 ? 'call_made' : 'call_received'" color="green"></q-icon> -->
</div> </div>
</q-td> </q-td>
<q-td <q-td
key="amount" key="amount"
:props="props" :props="props"
:class="props.row.amount > 0 ? 'text-green-13 text-weight-bold' : ''" :class="props.row.amount > 0 ? 'text-green-13 text-weight-bold' : ''"
> >
<div>{{props.row.amount}}</div> <div>{{props.row.amount}}</div>
</q-td> </q-td>
<q-td key="date" :props="props"> <q-td key="date" :props="props">
<div>{{props.row.date}}</div> <div>{{props.row.date}}</div>
</q-td> </q-td>
<q-td key="token" :props="props"> <q-td key="token" :props="props">
<div>{{props.row.token}}</div> <div>{{props.row.token}}</div>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
{% endraw %} {% endraw %}
</q-table> </q-table>
</q-tab-panel> </q-tab-panel>
</q-tab-panels> </q-tab-panels>
</q-card-section> </q-card-section>
</q-card> </q-card>
<div class="q-pa-sd q-py-md" align="center"> <div
<q-btn class="q-pa-sd q-pt-md q-mb-xl"
class="q-mx-sm" style="margin-bottom: 5rem"
size="10px" align="center"
rectangle >
color="warning" <q-btn
outline class="q-mx-sm"
@click="showDisclaimerDialog" size="10px"
> rectangle
Warning</q-btn color="warning"
> outline
<q-btn @click="showDisclaimerDialog"
class="q-mx-sm" >
size="10px" Warning</q-btn
outline >
rectangle <q-btn
color="warning" class="q-mx-sm"
@click="getLocalstorageToFile" size="10px"
>Backup<q-tooltip>Download wallet backup</q-tooltip></q-btn outline
> rectangle
</div> color="warning"
</q-scroll-area> @click="getLocalstorageToFile"
>Backup<q-tooltip>Download wallet backup</q-tooltip></q-btn
>
</div>
</div> </div>
<q-tabs <q-tabs