format
This commit is contained in:
Arc
@@ -89,101 +89,101 @@
|
|||||||
</q-scroll-area>
|
</q-scroll-area>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-9 col-12">
|
<div class="col-lg-9 col-12">
|
||||||
|
|
||||||
<q-card
|
<q-card
|
||||||
|
:style="$q.screen.lt.md ? {
|
||||||
:style="$q.screen.lt.md ? {
|
|
||||||
background: $q.screen.lt.md ? 'none !important': ''
|
background: $q.screen.lt.md ? 'none !important': ''
|
||||||
, boxShadow: $q.screen.lt.md ? 'none !important': ''
|
, boxShadow: $q.screen.lt.md ? 'none !important': ''
|
||||||
, margin: $q.screen.lt.md && mobileSimple ? 'auto !important': ''
|
, margin: $q.screen.lt.md && mobileSimple ? 'auto !important': ''
|
||||||
, width: $q.screen.lt.md && mobileSimple ? '90% !important': ''
|
, width: $q.screen.lt.md && mobileSimple ? '90% !important': ''
|
||||||
} : ''"
|
} : ''"
|
||||||
>
|
>
|
||||||
|
<q-card-section>
|
||||||
|
<h3 class="q-my-none text-no-wrap">
|
||||||
|
<strong v-text="formattedBalance"></strong>
|
||||||
|
<small> {{LNBITS_DENOMINATION}}</small>
|
||||||
|
<lnbits-update-balance
|
||||||
|
:wallet_id="this.g.wallet.id"
|
||||||
|
@credit-value="handleBalanceUpdate"
|
||||||
|
class="q-ml-md"
|
||||||
|
></lnbits-update-balance>
|
||||||
|
</h3>
|
||||||
|
|
||||||
<q-card-section>
|
<div class="row">
|
||||||
<h3 class="q-my-none text-no-wrap">
|
<div class="col">
|
||||||
<strong v-text="formattedBalance"></strong>
|
<div v-if="g.wallet.currency">
|
||||||
<small> {{LNBITS_DENOMINATION}}</small>
|
<span
|
||||||
<lnbits-update-balance
|
class="text-h5 text-italic"
|
||||||
:wallet_id="this.g.wallet.id"
|
v-text="formattedFiatBalance"
|
||||||
@credit-value="handleBalanceUpdate"
|
style="opacity: 0.75"
|
||||||
class="q-ml-md"
|
></span>
|
||||||
></lnbits-update-balance>
|
</div>
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<div v-if="g.wallet.currency">
|
|
||||||
<span
|
|
||||||
class="text-h5 text-italic"
|
|
||||||
v-text="formattedFiatBalance"
|
|
||||||
style="opacity: 0.75"
|
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<q-btn
|
||||||
|
@click="mobileSimple = !mobileSimple"
|
||||||
|
color="primary"
|
||||||
|
class="float-right lt-md"
|
||||||
|
size="sm"
|
||||||
|
flat
|
||||||
|
:icon="mobileSimple ? 'unfold_more' : 'unfold_less'"
|
||||||
|
:label="mobileSimple ? $t('more') : $t('less')"
|
||||||
|
></q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
|
||||||
|
<div class="col">
|
||||||
|
<q-btn
|
||||||
|
unelevated
|
||||||
|
color="primary"
|
||||||
|
class="full-width"
|
||||||
|
@click="showParseDialog"
|
||||||
|
:label="$t('paste_request')"
|
||||||
|
></q-btn>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<q-btn
|
<q-btn
|
||||||
@click="mobileSimple = !mobileSimple"
|
unelevated
|
||||||
color="primary"
|
color="primary"
|
||||||
class="float-right lt-md"
|
class="full-width"
|
||||||
size="sm"
|
@click="showReceiveDialog"
|
||||||
flat
|
:label="$t('create_invoice')"
|
||||||
:icon="mobileSimple ? 'unfold_more' : 'unfold_less'"
|
|
||||||
:label="mobileSimple ? $t('more') : $t('less')"
|
|
||||||
></q-btn>
|
></q-btn>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<q-btn
|
||||||
|
unelevated
|
||||||
|
color="secondary"
|
||||||
|
icon="photo_camera"
|
||||||
|
@click="showCamera"
|
||||||
|
:label="$t('scan')"
|
||||||
|
>
|
||||||
|
<q-tooltip
|
||||||
|
><span v-text="$t('camera_tooltip')"></span
|
||||||
|
></q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card>
|
||||||
<div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
|
|
||||||
<div class="col">
|
|
||||||
<q-btn
|
|
||||||
unelevated
|
|
||||||
color="primary"
|
|
||||||
class="full-width"
|
|
||||||
@click="showParseDialog"
|
|
||||||
:label="$t('paste_request')"
|
|
||||||
></q-btn>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-btn
|
|
||||||
unelevated
|
|
||||||
color="primary"
|
|
||||||
class="full-width"
|
|
||||||
@click="showReceiveDialog"
|
|
||||||
:label="$t('create_invoice')"
|
|
||||||
></q-btn>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-btn
|
|
||||||
unelevated
|
|
||||||
color="secondary"
|
|
||||||
icon="photo_camera"
|
|
||||||
@click="showCamera"
|
|
||||||
:label="$t('scan')"
|
|
||||||
>
|
|
||||||
<q-tooltip
|
|
||||||
><span v-text="$t('camera_tooltip')"></span
|
|
||||||
></q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-3" v-show="$q.screen.gt.md">
|
<div class="col-3" v-show="$q.screen.gt.md">
|
||||||
<q-card class="q-ml-md q-pa-none " style="height: 135px;">
|
<q-card class="q-ml-md q-pa-none" style="height: 135px">
|
||||||
<q-card-section style=" padding: 0;">
|
<q-card-section style="padding: 0">
|
||||||
<canvas
|
<canvas
|
||||||
ref="transactionChart"
|
ref="transactionChart"
|
||||||
style="height: 135px; width: 100%; margin: 0; padding: 0; transform: translate(-2%, 4%);"
|
style="
|
||||||
|
height: 135px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
transform: translate(-2%, 4%);
|
||||||
|
"
|
||||||
></canvas>
|
></canvas>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<q-card
|
<q-card
|
||||||
:style="
|
:style="
|
||||||
$q.screen.lt.md
|
$q.screen.lt.md
|
||||||
|
|||||||
+30
-31
@@ -101,11 +101,11 @@ window.app = Vue.createApp({
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
computeCumulativeBalance(transactions) {
|
computeCumulativeBalance(transactions) {
|
||||||
let balance = 0;
|
let balance = 0
|
||||||
return transactions.map(transaction => {
|
return transactions.map(transaction => {
|
||||||
balance += transaction.amount; // Use the amount field for the balance
|
balance += transaction.amount // Use the amount field for the balance
|
||||||
return balance;
|
return balance
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
initCharts() {
|
initCharts() {
|
||||||
@@ -118,49 +118,49 @@ window.app = Vue.createApp({
|
|||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
layout: {
|
layout: {
|
||||||
padding: 0,
|
padding: 0,
|
||||||
margin: 0,
|
margin: 0
|
||||||
},
|
},
|
||||||
plugins: {
|
plugins: {
|
||||||
legend: {
|
legend: {
|
||||||
display: false,
|
display: false
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
display: false,
|
display: false
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
enabled: true, // Enable tooltips to show data on hover
|
enabled: true, // Enable tooltips to show data on hover
|
||||||
callbacks: {
|
callbacks: {
|
||||||
// Custom tooltip callback to show amount and time
|
// Custom tooltip callback to show amount and time
|
||||||
label: (tooltipItem) => {
|
label: tooltipItem => {
|
||||||
const index = tooltipItem.dataIndex;
|
const index = tooltipItem.dataIndex
|
||||||
const transaction = this.transactions[index]; // Match tooltip point with transaction
|
const transaction = this.transactions[index] // Match tooltip point with transaction
|
||||||
const amount = transaction.amount;
|
const amount = transaction.amount
|
||||||
return [
|
return [
|
||||||
`Balance: ${tooltipItem.raw /1000}sats`, // Display cumulative balance
|
`Balance: ${tooltipItem.raw / 1000}sats`, // Display cumulative balance
|
||||||
`Amount: ${amount / 1000}sats`,
|
`Amount: ${amount / 1000}sats`
|
||||||
];
|
]
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
elements: {
|
elements: {
|
||||||
point: {
|
point: {
|
||||||
radius: 4, // Points will now be visible
|
radius: 4, // Points will now be visible
|
||||||
hoverRadius: 6, // Increase point size on hover
|
hoverRadius: 6 // Increase point size on hover
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
x: {
|
x: {
|
||||||
display: false,
|
display: false
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
display: false,
|
display: false
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
labels: this.transactions.map(tx =>
|
labels: this.transactions.map(
|
||||||
new Date(tx.time).toLocaleString() // Use time for labels
|
tx => new Date(tx.time).toLocaleString() // Use time for labels
|
||||||
),
|
),
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
@@ -170,15 +170,14 @@ window.app = Vue.createApp({
|
|||||||
borderColor: this.primaryColor,
|
borderColor: this.primaryColor,
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
fill: true,
|
fill: true,
|
||||||
tension: 0.2,
|
tension: 0.2
|
||||||
},
|
}
|
||||||
],
|
]
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
msatoshiFormat(value) {
|
msatoshiFormat(value) {
|
||||||
return LNbits.utils.formatSat(value / 1000)
|
return LNbits.utils.formatSat(value / 1000)
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user