181 lines
5.7 KiB
HTML
Executable File
181 lines
5.7 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Transaction History</title>
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Include Chart.js -->
|
|
<style>
|
|
body {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.table {
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.table thead th {
|
|
background-color: #007bff;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background-color: #e2e6ea;
|
|
}
|
|
|
|
.table tbody td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.amount-positive {
|
|
color: rgb(0, 185, 0);
|
|
}
|
|
|
|
.amount-negative {
|
|
color: red;
|
|
}
|
|
|
|
.btn-back {
|
|
margin-top: 20px;
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.btn-back:hover {
|
|
background-color: #5a6268;
|
|
}
|
|
|
|
/* Set a fixed height for the chart */
|
|
#transactionChart {
|
|
width: 100%;
|
|
/* Fill the width of the parent container */
|
|
height: 400px;
|
|
/* Fixed height */
|
|
}
|
|
|
|
.chart-container {
|
|
position: relative;
|
|
margin: auto;
|
|
height: 400px;
|
|
/* Set height for the chart container */
|
|
width: 80%;
|
|
/* Adjust width as needed */
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-light">
|
|
<div class="container mt-5">
|
|
<h1>Transaction History for {{ user['username'] }}#{{ user['discriminator'] }}</h1>
|
|
|
|
<!-- Chart Container -->
|
|
<div class="chart-container">
|
|
<canvas id="transactionChart"></canvas>
|
|
</div>
|
|
<form method="get" action="{{ url_for('transactions') }}">
|
|
<label for="sort">Sort by:</label>
|
|
<select name="sort" id="sort">
|
|
<option value="date" {% if sort_by=='date' %}selected{% endif %}>Date</option>
|
|
<option value="amount" {% if sort_by=='amount' %}selected{% endif %}>Amount</option>
|
|
<!-- Add more sorting options as needed -->
|
|
</select>
|
|
|
|
<label for="order">Order:</label>
|
|
<select name="order" id="order">
|
|
<option value="asc" {% if order=='asc' %}selected{% endif %}>Ascending</option>
|
|
<option value="desc" {% if order=='desc' %}selected{% endif %}>Descending</option>
|
|
</select>
|
|
|
|
<button type="submit">Sort</button>
|
|
</form>
|
|
|
|
|
|
<table class="table table-bordered mt-3">
|
|
<thead>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Amount</th>
|
|
<th>Time</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for transaction in transactions %}
|
|
<tr>
|
|
<td>{{ transaction.TYPE }}</td>
|
|
<td class="{% if transaction.amount < 0 %}amount-negative{% else %}amount-positive{% endif %}">
|
|
${{ transaction.amount }}</td>
|
|
<td>{{ transaction.TIME.strftime('%Y-%m-%d %H:%M:%S') }}</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="3" class="text-center">No transactions found.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<a href="{{ url_for('wallet') }}" class="btn btn-secondary mt-3">Back to Wallet</a>
|
|
</div>
|
|
|
|
<script>
|
|
// Assuming `dates` and `totals` are provided correctly from Flask.
|
|
const dates = {{ dates | tojson }};
|
|
const totals = {{ totals | tojson }};
|
|
|
|
// Log the dates and totals to the console for debugging
|
|
console.log("Dates:", dates);
|
|
console.log("Totals:", totals);
|
|
|
|
// Ensure dates are properly formatted
|
|
const formattedDates = dates.map(date => new Date(date).toLocaleDateString());
|
|
|
|
// Chart.js code
|
|
const ctx = document.getElementById('transactionChart').getContext('2d');
|
|
const transactionChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: formattedDates,
|
|
datasets: [{
|
|
label: 'Daily Transaction Totals',
|
|
data: totals,
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
borderWidth: 1,
|
|
fill: true,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true, // Maintain aspect ratio
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Amount ($)'
|
|
}
|
|
},
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Date'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |