Refactor DCA dashboard components: Update Vue.js app structure and improve HTML template for better loading and error handling. Enhance dashboard layout with new card sections for summary and recent transactions, and add a sidebar for quick stats. Clean up unused methods and streamline data rendering.
This commit is contained in:
parent
f779d000b4
commit
4f0d2adf2a
2 changed files with 103 additions and 70 deletions
|
|
@ -1,18 +1,17 @@
|
|||
window.app = Vue.createApp({
|
||||
el: '#dcaClient',
|
||||
mixins: [windowMixin],
|
||||
delimiters: ['${', '}'],
|
||||
data() {
|
||||
data: function () {
|
||||
return {
|
||||
dashboardData: null,
|
||||
transactions: [],
|
||||
analytics: null,
|
||||
loading: true,
|
||||
error: null
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// Utility Methods
|
||||
formatCurrency(amount) {
|
||||
if (!amount) return 'Q 0.00';
|
||||
// Convert centavos to quetzales
|
||||
|
|
@ -27,12 +26,6 @@ window.app = Vue.createApp({
|
|||
return new Date(dateString).toLocaleDateString()
|
||||
},
|
||||
|
||||
formatDateTime(dateString) {
|
||||
if (!dateString) return ''
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString('en-US', { hour12: false })
|
||||
},
|
||||
|
||||
formatSats(amount) {
|
||||
if (!amount) return '0 sats'
|
||||
return new Intl.NumberFormat('en-US').format(amount) + ' sats'
|
||||
|
|
@ -87,5 +80,3 @@ window.app = Vue.createApp({
|
|||
}
|
||||
}
|
||||
})
|
||||
|
||||
window.app.mount('#dcaClient')
|
||||
|
|
|
|||
|
|
@ -7,59 +7,63 @@
|
|||
<script src="{{ static_url_for('satmachineclient/static', path='js/index.js') }}"></script>
|
||||
{% endblock %} {% block page %}
|
||||
<div class="row q-col-gutter-md" id="dcaClient">
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="col-12">
|
||||
<q-card class="q-pa-md text-center">
|
||||
<q-spinner size="2em" />
|
||||
<div class="q-mt-md">Loading your DCA dashboard...</div>
|
||||
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
|
||||
|
||||
<!-- Loading State -->
|
||||
<q-card v-if="loading">
|
||||
<q-card-section class="text-center">
|
||||
<q-spinner size="2em" />
|
||||
<div class="q-mt-md">Loading your DCA dashboard...</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-if="error && !loading" class="col-12">
|
||||
<q-banner class="bg-negative text-white">
|
||||
<template v-slot:avatar>
|
||||
<q-icon name="error" />
|
||||
</template>
|
||||
${error}
|
||||
</q-banner>
|
||||
</div>
|
||||
<!-- Error State -->
|
||||
<q-card v-if="error && !loading" class="bg-negative text-white">
|
||||
<q-card-section>
|
||||
<q-icon name="error" class="q-mr-sm" />
|
||||
${error}
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<!-- Dashboard Content -->
|
||||
<div v-if="hasData" class="col-12">
|
||||
<!-- Summary Cards -->
|
||||
<div class="row q-col-gutter-md q-mb-lg">
|
||||
<div class="col-12 col-md-3">
|
||||
<q-card class="q-pa-md text-center">
|
||||
<div class="text-h6">${formatSats(dashboardData.total_sats_accumulated)}</div>
|
||||
<div class="text-grey">Total Sats Accumulated</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-md-3">
|
||||
<q-card class="q-pa-md text-center">
|
||||
<div class="text-h6">${formatCurrency(dashboardData.total_fiat_invested)}</div>
|
||||
<div class="text-grey">Total Invested</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-md-3">
|
||||
<q-card class="q-pa-md text-center">
|
||||
<div class="text-h6">${formatCurrency(dashboardData.current_fiat_balance)}</div>
|
||||
<div class="text-grey">Available Balance</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-md-3">
|
||||
<q-card class="q-pa-md text-center">
|
||||
<div class="text-h6">${dashboardData.total_transactions}</div>
|
||||
<div class="text-grey">Total Transactions</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dashboard Content -->
|
||||
<div v-if="hasData">
|
||||
<!-- Summary Cards -->
|
||||
<q-card class="q-mb-md">
|
||||
<q-card-section>
|
||||
<h6 class="text-subtitle1 q-my-none q-mb-md">DCA Overview</h6>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="text-center">
|
||||
<div class="text-h6">${formatSats(dashboardData.total_sats_accumulated)}</div>
|
||||
<div class="text-grey text-caption">Total Sats</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="text-center">
|
||||
<div class="text-h6">${formatCurrency(dashboardData.total_fiat_invested)}</div>
|
||||
<div class="text-grey text-caption">Total Invested</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="text-center">
|
||||
<div class="text-h6">${formatCurrency(dashboardData.current_fiat_balance)}</div>
|
||||
<div class="text-grey text-caption">Available Balance</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="text-center">
|
||||
<div class="text-h6">${dashboardData.total_transactions}</div>
|
||||
<div class="text-grey text-caption">Transactions</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<!-- DCA Status -->
|
||||
<div class="row q-col-gutter-md q-mb-lg">
|
||||
<div class="col-12">
|
||||
<q-card class="q-pa-md">
|
||||
<div class="text-h6 q-mb-md">DCA Status</div>
|
||||
<!-- DCA Status -->
|
||||
<q-card class="q-mb-md">
|
||||
<q-card-section>
|
||||
<h6 class="text-subtitle2 q-my-none q-mb-md">DCA Status</h6>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-6">
|
||||
<div class="text-body2">Mode: <strong>${dashboardData.dca_mode}</strong></div>
|
||||
|
|
@ -79,15 +83,13 @@
|
|||
<div v-if="dashboardData.average_cost_basis > 0" class="q-mt-md">
|
||||
<div class="text-body2">Average Cost Basis: <strong>${Math.round(dashboardData.average_cost_basis)} sats/GTQ</strong></div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<!-- Recent Transactions -->
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-pa-md">
|
||||
<div class="text-h6 q-mb-md">Recent Transactions</div>
|
||||
<!-- Recent Transactions -->
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<h6 class="text-subtitle2 q-my-none q-mb-md">Recent Transactions</h6>
|
||||
<div v-if="transactions.length === 0" class="text-grey text-center q-pa-md">
|
||||
No transactions yet
|
||||
</div>
|
||||
|
|
@ -108,9 +110,49 @@
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-12 col-md-4 col-lg-5 q-gutter-y-md">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<h6 class="text-subtitle1 q-my-none">
|
||||
{{SITE_TITLE}} DCA Client
|
||||
</h6>
|
||||
<p>
|
||||
Monitor your Dollar Cost Averaging progress and manage your DCA settings.
|
||||
</p>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pa-none">
|
||||
<q-separator></q-separator>
|
||||
<q-list>
|
||||
<q-expansion-item
|
||||
group="info"
|
||||
icon="account_balance_wallet"
|
||||
label="Quick Stats"
|
||||
:content-inset-level="0.5"
|
||||
>
|
||||
<q-card-section class="text-caption" v-if="dashboardData">
|
||||
<div class="row">
|
||||
<div class="col-6">DCA Mode:</div>
|
||||
<div class="col-6">${ dashboardData.dca_mode }</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">Status:</div>
|
||||
<div class="col-6">${ dashboardData.dca_status }</div>
|
||||
</div>
|
||||
<div class="row" v-if="dashboardData.average_cost_basis > 0">
|
||||
<div class="col-6">Avg Cost:</div>
|
||||
<div class="col-6">${ Math.round(dashboardData.average_cost_basis) } sats/GTQ</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue