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({
|
window.app = Vue.createApp({
|
||||||
|
el: '#dcaClient',
|
||||||
mixins: [windowMixin],
|
mixins: [windowMixin],
|
||||||
delimiters: ['${', '}'],
|
delimiters: ['${', '}'],
|
||||||
data() {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
dashboardData: null,
|
dashboardData: null,
|
||||||
transactions: [],
|
transactions: [],
|
||||||
analytics: null,
|
|
||||||
loading: true,
|
loading: true,
|
||||||
error: null
|
error: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
// Utility Methods
|
|
||||||
formatCurrency(amount) {
|
formatCurrency(amount) {
|
||||||
if (!amount) return 'Q 0.00';
|
if (!amount) return 'Q 0.00';
|
||||||
// Convert centavos to quetzales
|
// Convert centavos to quetzales
|
||||||
|
|
@ -27,12 +26,6 @@ window.app = Vue.createApp({
|
||||||
return new Date(dateString).toLocaleDateString()
|
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) {
|
formatSats(amount) {
|
||||||
if (!amount) return '0 sats'
|
if (!amount) return '0 sats'
|
||||||
return new Intl.NumberFormat('en-US').format(amount) + ' 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>
|
<script src="{{ static_url_for('satmachineclient/static', path='js/index.js') }}"></script>
|
||||||
{% endblock %} {% block page %}
|
{% endblock %} {% block page %}
|
||||||
<div class="row q-col-gutter-md" id="dcaClient">
|
<div class="row q-col-gutter-md" id="dcaClient">
|
||||||
<!-- Loading State -->
|
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
|
||||||
<div v-if="loading" class="col-12">
|
|
||||||
<q-card class="q-pa-md text-center">
|
<!-- Loading State -->
|
||||||
<q-spinner size="2em" />
|
<q-card v-if="loading">
|
||||||
<div class="q-mt-md">Loading your DCA dashboard...</div>
|
<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>
|
</q-card>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Error State -->
|
<!-- Error State -->
|
||||||
<div v-if="error && !loading" class="col-12">
|
<q-card v-if="error && !loading" class="bg-negative text-white">
|
||||||
<q-banner class="bg-negative text-white">
|
<q-card-section>
|
||||||
<template v-slot:avatar>
|
<q-icon name="error" class="q-mr-sm" />
|
||||||
<q-icon name="error" />
|
${error}
|
||||||
</template>
|
</q-card-section>
|
||||||
${error}
|
</q-card>
|
||||||
</q-banner>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dashboard Content -->
|
<!-- Dashboard Content -->
|
||||||
<div v-if="hasData" class="col-12">
|
<div v-if="hasData">
|
||||||
<!-- Summary Cards -->
|
<!-- Summary Cards -->
|
||||||
<div class="row q-col-gutter-md q-mb-lg">
|
<q-card class="q-mb-md">
|
||||||
<div class="col-12 col-md-3">
|
<q-card-section>
|
||||||
<q-card class="q-pa-md text-center">
|
<h6 class="text-subtitle1 q-my-none q-mb-md">DCA Overview</h6>
|
||||||
<div class="text-h6">${formatSats(dashboardData.total_sats_accumulated)}</div>
|
<div class="row q-col-gutter-md">
|
||||||
<div class="text-grey">Total Sats Accumulated</div>
|
<div class="col-6 col-md-3">
|
||||||
</q-card>
|
<div class="text-center">
|
||||||
</div>
|
<div class="text-h6">${formatSats(dashboardData.total_sats_accumulated)}</div>
|
||||||
<div class="col-12 col-md-3">
|
<div class="text-grey text-caption">Total Sats</div>
|
||||||
<q-card class="q-pa-md text-center">
|
</div>
|
||||||
<div class="text-h6">${formatCurrency(dashboardData.total_fiat_invested)}</div>
|
</div>
|
||||||
<div class="text-grey">Total Invested</div>
|
<div class="col-6 col-md-3">
|
||||||
</q-card>
|
<div class="text-center">
|
||||||
</div>
|
<div class="text-h6">${formatCurrency(dashboardData.total_fiat_invested)}</div>
|
||||||
<div class="col-12 col-md-3">
|
<div class="text-grey text-caption">Total Invested</div>
|
||||||
<q-card class="q-pa-md text-center">
|
</div>
|
||||||
<div class="text-h6">${formatCurrency(dashboardData.current_fiat_balance)}</div>
|
</div>
|
||||||
<div class="text-grey">Available Balance</div>
|
<div class="col-6 col-md-3">
|
||||||
</q-card>
|
<div class="text-center">
|
||||||
</div>
|
<div class="text-h6">${formatCurrency(dashboardData.current_fiat_balance)}</div>
|
||||||
<div class="col-12 col-md-3">
|
<div class="text-grey text-caption">Available Balance</div>
|
||||||
<q-card class="q-pa-md text-center">
|
</div>
|
||||||
<div class="text-h6">${dashboardData.total_transactions}</div>
|
</div>
|
||||||
<div class="text-grey">Total Transactions</div>
|
<div class="col-6 col-md-3">
|
||||||
</q-card>
|
<div class="text-center">
|
||||||
</div>
|
<div class="text-h6">${dashboardData.total_transactions}</div>
|
||||||
</div>
|
<div class="text-grey text-caption">Transactions</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
<!-- DCA Status -->
|
<!-- DCA Status -->
|
||||||
<div class="row q-col-gutter-md q-mb-lg">
|
<q-card class="q-mb-md">
|
||||||
<div class="col-12">
|
<q-card-section>
|
||||||
<q-card class="q-pa-md">
|
<h6 class="text-subtitle2 q-my-none q-mb-md">DCA Status</h6>
|
||||||
<div class="text-h6 q-mb-md">DCA Status</div>
|
|
||||||
<div class="row q-col-gutter-md">
|
<div class="row q-col-gutter-md">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<div class="text-body2">Mode: <strong>${dashboardData.dca_mode}</strong></div>
|
<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 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 class="text-body2">Average Cost Basis: <strong>${Math.round(dashboardData.average_cost_basis)} sats/GTQ</strong></div>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card-section>
|
||||||
</div>
|
</q-card>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Recent Transactions -->
|
<!-- Recent Transactions -->
|
||||||
<div class="row q-col-gutter-md">
|
<q-card>
|
||||||
<div class="col-12">
|
<q-card-section>
|
||||||
<q-card class="q-pa-md">
|
<h6 class="text-subtitle2 q-my-none q-mb-md">Recent Transactions</h6>
|
||||||
<div class="text-h6 q-mb-md">Recent Transactions</div>
|
|
||||||
<div v-if="transactions.length === 0" class="text-grey text-center q-pa-md">
|
<div v-if="transactions.length === 0" class="text-grey text-center q-pa-md">
|
||||||
No transactions yet
|
No transactions yet
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -108,9 +110,49 @@
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-card>
|
</q-card-section>
|
||||||
</div>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue