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
|
|
@ -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