Add pagination to activity and transactions
This commit is contained in:
@@ -1,24 +1,20 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { formatDataVolume, formatDate } from "../util/Formatting.svelte";
|
||||
import { formatDate } from "../util/Formatting.svelte";
|
||||
import Spinner from "../util/Spinner.svelte";
|
||||
import Euro from "../util/Euro.svelte"
|
||||
|
||||
let loading = false
|
||||
let months = []
|
||||
|
||||
let year = 0
|
||||
let month = 0
|
||||
let month_str = ""
|
||||
let data = []
|
||||
|
||||
const load_activity = async () => {
|
||||
loading = true
|
||||
month_str = year + "-" + ("00"+(month)).slice(-2)
|
||||
try {
|
||||
// We keep fetching history until we have fetched two months without
|
||||
// any activity
|
||||
let empty_months = 0
|
||||
let now = new Date()
|
||||
while (empty_months < 2) {
|
||||
const resp = await fetch(
|
||||
window.api_endpoint+"/user/activity/" +
|
||||
now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2),
|
||||
)
|
||||
const resp = await fetch(window.api_endpoint+"/user/activity/" + month_str)
|
||||
if(resp.status >= 400) {
|
||||
let json = await resp.json()
|
||||
if (json.value === "authentication_failed") {
|
||||
@@ -29,28 +25,36 @@ const load_activity = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
let month = {
|
||||
rows: await resp.json(),
|
||||
month: now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2),
|
||||
}
|
||||
|
||||
if (month.rows.length === 0) {
|
||||
empty_months++
|
||||
continue
|
||||
}
|
||||
months.push(month)
|
||||
months = months
|
||||
|
||||
// Fetch the previous month
|
||||
now.setMonth(now.getMonth()-1)
|
||||
}
|
||||
data = await resp.json()
|
||||
} catch (err) {
|
||||
alert(err)
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
};
|
||||
const last_month = () => {
|
||||
month--
|
||||
if (month === 0) {
|
||||
month = 12
|
||||
year--
|
||||
}
|
||||
|
||||
load_activity()
|
||||
}
|
||||
const next_month = () => {
|
||||
month++
|
||||
if (month === 13) {
|
||||
month = 1
|
||||
year++
|
||||
}
|
||||
|
||||
load_activity()
|
||||
}
|
||||
onMount(() => {
|
||||
let now = new Date()
|
||||
year = now.getFullYear()
|
||||
month = now.getMonth()+1
|
||||
|
||||
load_activity()
|
||||
})
|
||||
</script>
|
||||
@@ -68,8 +72,19 @@ onMount(() => {
|
||||
for breaking the content policy.
|
||||
</p>
|
||||
|
||||
{#each months as month}
|
||||
<h3>{month.month}</h3>
|
||||
<h3>{month_str}</h3>
|
||||
<div class="toolbar">
|
||||
<button on:click={last_month}>
|
||||
<i class="icon">chevron_left</i>
|
||||
Previous month
|
||||
</button>
|
||||
<div class="toolbar_spacer"></div>
|
||||
<button on:click={next_month}>
|
||||
Next month
|
||||
<i class="icon">chevron_right</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table_scroll">
|
||||
<table style="text-align: left;">
|
||||
<thead>
|
||||
@@ -81,7 +96,7 @@ onMount(() => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each month.rows as row}
|
||||
{#each data as row}
|
||||
<tr>
|
||||
<td>
|
||||
{formatDate(row.time, true, true, false)}
|
||||
@@ -108,7 +123,20 @@ onMount(() => {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#if data.length > 100}
|
||||
<div class="toolbar">
|
||||
<button on:click={last_month}>
|
||||
<i class="icon">chevron_left</i>
|
||||
Previous month
|
||||
</button>
|
||||
<div class="toolbar_spacer"></div>
|
||||
<button on:click={next_month}>
|
||||
Next month
|
||||
<i class="icon">chevron_right</i>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@@ -120,4 +148,11 @@ onMount(() => {
|
||||
width: 100px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
.toolbar > * { flex: 0 0 auto; }
|
||||
.toolbar_spacer { flex: 1 1 auto; }
|
||||
</style>
|
||||
|
||||
@@ -5,20 +5,19 @@ import Spinner from "../util/Spinner.svelte";
|
||||
import Euro from "../util/Euro.svelte"
|
||||
|
||||
let loading = false
|
||||
let months = []
|
||||
|
||||
let year = 0
|
||||
let month = 0
|
||||
let month_str = ""
|
||||
let transactions = {
|
||||
rows: []
|
||||
}
|
||||
|
||||
const load_transactions = async () => {
|
||||
loading = true
|
||||
month_str = year + "-" + ("00"+(month)).slice(-2)
|
||||
try {
|
||||
// We keep fetching history until we have fetched three months without
|
||||
// any transactions
|
||||
let empty_months = 0
|
||||
let now = new Date()
|
||||
while (empty_months < 3) {
|
||||
const resp = await fetch(
|
||||
window.api_endpoint+"/user/transactions/" +
|
||||
now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2),
|
||||
)
|
||||
const resp = await fetch(window.api_endpoint+"/user/transactions/"+month_str)
|
||||
if(resp.status >= 400) {
|
||||
let json = await resp.json()
|
||||
if (json.value === "authentication_failed") {
|
||||
@@ -31,7 +30,6 @@ const load_transactions = async () => {
|
||||
|
||||
let month = {
|
||||
rows: await resp.json(),
|
||||
month: now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2),
|
||||
total_subscription_charge: 0,
|
||||
total_storage_charge: 0,
|
||||
total_bandwidth_charge: 0,
|
||||
@@ -40,11 +38,6 @@ const load_transactions = async () => {
|
||||
total_deducted: 0,
|
||||
}
|
||||
|
||||
if (month.rows.length === 0) {
|
||||
empty_months++
|
||||
continue
|
||||
}
|
||||
|
||||
month.rows.forEach(row => {
|
||||
row.time = new Date(row.time)
|
||||
month.total_deposited += row.deposit_amount
|
||||
@@ -54,18 +47,31 @@ const load_transactions = async () => {
|
||||
month.total_kickback_fee += row.kickback_fee
|
||||
month.total_deducted += row.subscription_charge + row.storage_charge + row.bandwidth_charge
|
||||
})
|
||||
months.push(month)
|
||||
months = months
|
||||
|
||||
// Fetch the previous month
|
||||
now.setMonth(now.getMonth()-1)
|
||||
}
|
||||
transactions = month
|
||||
} catch (err) {
|
||||
alert(err)
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
};
|
||||
const last_month = () => {
|
||||
month--
|
||||
if (month === 0) {
|
||||
month = 12
|
||||
year--
|
||||
}
|
||||
|
||||
load_transactions()
|
||||
}
|
||||
const next_month = () => {
|
||||
month++
|
||||
if (month === 13) {
|
||||
month = 1
|
||||
year++
|
||||
}
|
||||
|
||||
load_transactions()
|
||||
}
|
||||
|
||||
let credit_amount = 10
|
||||
|
||||
@@ -120,18 +126,21 @@ const load_invoices = async () => {
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
let now = new Date()
|
||||
year = now.getFullYear()
|
||||
month = now.getMonth()+1
|
||||
|
||||
load_transactions()
|
||||
load_invoices()
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if loading}
|
||||
<section>
|
||||
{#if loading}
|
||||
<div class="spinner_container">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<section>
|
||||
{/if}
|
||||
<h2>Deposit credits</h2>
|
||||
<p>
|
||||
You can deposit credit on your pixeldrain account with Bitcoin,
|
||||
@@ -225,15 +234,25 @@ onMount(() => {
|
||||
Here is a log of all transactions on your account balance.
|
||||
</p>
|
||||
|
||||
{#each months as month}
|
||||
<h3>{month.month}</h3>
|
||||
<h3>{month_str}</h3>
|
||||
<div class="toolbar">
|
||||
<button on:click={last_month}>
|
||||
<i class="icon">chevron_left</i>
|
||||
Previous month
|
||||
</button>
|
||||
<div class="toolbar_spacer"></div>
|
||||
<button on:click={next_month}>
|
||||
Next month
|
||||
<i class="icon">chevron_right</i>
|
||||
</button>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Subscription charge: <Euro amount={month.total_subscription_charge}></Euro></li>
|
||||
<li>Storage charge: <Euro amount={month.total_storage_charge}></Euro></li>
|
||||
<li>Bandwidth charge: <Euro amount={month.total_bandwidth_charge}></Euro></li>
|
||||
<li>Total charge: <Euro amount={month.total_deducted}></Euro></li>
|
||||
<li>Earned: <Euro amount={month.total_kickback_fee}></Euro></li>
|
||||
<li>Deposited: <Euro amount={month.total_deposited}></Euro></li>
|
||||
<li>Subscription charge: <Euro amount={transactions.total_subscription_charge}></Euro></li>
|
||||
<li>Storage charge: <Euro amount={transactions.total_storage_charge}></Euro></li>
|
||||
<li>Bandwidth charge: <Euro amount={transactions.total_bandwidth_charge}></Euro></li>
|
||||
<li>Total charge: <Euro amount={transactions.total_deducted}></Euro></li>
|
||||
<li>Earned: <Euro amount={transactions.total_kickback_fee}></Euro></li>
|
||||
<li>Deposited: <Euro amount={transactions.total_deposited}></Euro></li>
|
||||
</ul>
|
||||
|
||||
<div class="table_scroll">
|
||||
@@ -262,7 +281,7 @@ onMount(() => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each month.rows as row}
|
||||
{#each transactions.rows as row}
|
||||
<tr>
|
||||
<td>{formatDate(row.time, true, true, false)}</td>
|
||||
<td><Euro amount={row.new_balance}></Euro></td>
|
||||
@@ -279,7 +298,6 @@ onMount(() => {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@@ -291,4 +309,11 @@ onMount(() => {
|
||||
width: 100px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
.toolbar > * { flex: 0 0 auto; }
|
||||
.toolbar_spacer { flex: 1 1 auto; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user