From f14b013932c6153ebea060bca7314916a6ea132e Mon Sep 17 00:00:00 2001 From: Fornax Date: Mon, 28 Mar 2022 12:33:13 +0200 Subject: [PATCH] Add pagination to activity and transactions --- svelte/src/user_home/ActivityLog.svelte | 181 ++++++++++------- svelte/src/user_home/Transactions.svelte | 239 +++++++++++++---------- 2 files changed, 240 insertions(+), 180 deletions(-) diff --git a/svelte/src/user_home/ActivityLog.svelte b/svelte/src/user_home/ActivityLog.svelte index 5ab7018..85889eb 100644 --- a/svelte/src/user_home/ActivityLog.svelte +++ b/svelte/src/user_home/ActivityLog.svelte @@ -1,56 +1,60 @@ @@ -68,47 +72,71 @@ onMount(() => { for breaking the content policy.

- {#each months as month} -

{month.month}

-
- - +

{month_str}

+
+ +
+ +
+ +
+
+ + + + + + + + + + {#each data as row} - - - - + + + + - - - {#each month.rows as row} - - - - - - - {/each} - -
TimeEventFile nameFile removal reason
TimeEventFile nameFile removal reason + {formatDate(row.time, true, true, false)} + + {#if row.event === "file_instance_blocked"} + File blocked for abuse + {:else if row.event === "file_instance_expired"} + File expired + {/if} + + {#if row.event === "file_instance_blocked"} + {row.file_name} + {:else} + {row.file_name} + {/if} + + {row.file_removal_reason} +
- {formatDate(row.time, true, true, false)} - - {#if row.event === "file_instance_blocked"} - File blocked for abuse - {:else if row.event === "file_instance_expired"} - File expired - {/if} - - {#if row.event === "file_instance_blocked"} - {row.file_name} - {:else} - {row.file_name} - {/if} - - {row.file_removal_reason} -
+ {/each} + + +
+ + {#if data.length > 100} +
+ +
+
- {/each} + {/if} diff --git a/svelte/src/user_home/Transactions.svelte b/svelte/src/user_home/Transactions.svelte index 4926665..d7eb8cd 100644 --- a/svelte/src/user_home/Transactions.svelte +++ b/svelte/src/user_home/Transactions.svelte @@ -5,67 +5,73 @@ 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), - ) - if(resp.status >= 400) { - let json = await resp.json() - if (json.value === "authentication_failed") { - window.location = "/login" - return - } else { - throw new Error(json.message) - } + 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") { + window.location = "/login" + return + } else { + throw new Error(json.message) } - - 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, - total_kickback_fee: 0, - total_deposited: 0, - 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 - month.total_subscription_charge += row.subscription_charge - month.total_storage_charge += row.storage_charge - month.total_bandwidth_charge += row.bandwidth_charge - 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) } + + let month = { + rows: await resp.json(), + total_subscription_charge: 0, + total_storage_charge: 0, + total_bandwidth_charge: 0, + total_kickback_fee: 0, + total_deposited: 0, + total_deducted: 0, + } + + month.rows.forEach(row => { + row.time = new Date(row.time) + month.total_deposited += row.deposit_amount + month.total_subscription_charge += row.subscription_charge + month.total_storage_charge += row.storage_charge + month.total_bandwidth_charge += row.bandwidth_charge + month.total_kickback_fee += row.kickback_fee + month.total_deducted += row.subscription_charge + row.storage_charge + row.bandwidth_charge + }) + 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() }) -{#if loading} - -{/if} -
+ {#if loading} + + {/if}

Deposit credits

You can deposit credit on your pixeldrain account with Bitcoin, @@ -225,61 +234,70 @@ onMount(() => { Here is a log of all transactions on your account balance.

- {#each months as month} -

{month.month}

- +

{month_str}

+
+ +
+ +
+ -
- - +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + {#each transactions.rows as row} - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - {#each month.rows as row} - - - - - - - - - - - - - {/each} - -
TimeBalanceSubscriptionStorageBandwidthKickbackDeposit
ChargeChargeUsageChargeUsageFeeAmount
TimeBalanceSubscriptionStorageBandwidthKickbackDeposit{formatDate(row.time, true, true, false)}{formatDataVolume(row.storage_used, 3)}{formatDataVolume(row.bandwidth_used, 3)}{formatDataVolume(row.kickback_amount, 3)}
ChargeChargeUsageChargeUsageFeeAmount
{formatDate(row.time, true, true, false)}{formatDataVolume(row.storage_used, 3)}{formatDataVolume(row.bandwidth_used, 3)}{formatDataVolume(row.kickback_amount, 3)}
-
- {/each} + {/each} + + +