pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pagination to activity and transactions

Browse Source
This commit is contained in:
Fornax
2022-03-28 12:33:13 +02:00
parent a2f6857d20
commit f14b013932
2 changed files with 240 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
svelte/src/user_home/ActivityLog.svelte
View File

@@ -1,56 +1,60 @@
<script> <script>
import { onMount } from "svelte"; import { onMount } from "svelte";
import { formatDataVolume, formatDate } from "../util/Formatting.svelte"; import { formatDate } from "../util/Formatting.svelte";
import Spinner from "../util/Spinner.svelte"; import Spinner from "../util/Spinner.svelte";
import Euro from "../util/Euro.svelte"
let loading = false let loading = false
let months = []
let year = 0
let month = 0
let month_str = ""
let data = []
const load_activity = async () => { const load_activity = async () => {
loading = true loading = true
month_str = year + "-" + ("00"+(month)).slice(-2)
try { try {
// We keep fetching history until we have fetched two months without const resp = await fetch(window.api_endpoint+"/user/activity/" + month_str)
// any activity if(resp.status >= 400) {
let empty_months = 0 let json = await resp.json()
let now = new Date() if (json.value === "authentication_failed") {
while (empty_months < 2) { window.location = "/login"
const resp = await fetch( return
window.api_endpoint+"/user/activity/" + } else {
now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2), throw new Error(json.message)
)
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),
}
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) { } catch (err) {
alert(err) alert(err)
} finally { } finally {
loading = false 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(() => { onMount(() => {
let now = new Date()
year = now.getFullYear()
month = now.getMonth()+1
load_activity() load_activity()
}) })
</script> </script>
@@ -68,47 +72,71 @@ onMount(() => {
for breaking the content policy. for breaking the content policy.
</p> </p>
{#each months as month} <h3>{month_str}</h3>
<h3>{month.month}</h3> <div class="toolbar">
<div class="table_scroll"> <button on:click={last_month}>
<table style="text-align: left;"> <i class="icon">chevron_left</i>
<thead> 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>
<tr>
<td>Time</td>
<td>Event</td>
<td>File name</td>
<td>File removal reason</td>
</tr>
</thead>
<tbody>
{#each data as row}
<tr> <tr>
<td>Time</td> <td>
<td>Event</td> {formatDate(row.time, true, true, false)}
<td>File name</td> </td>
<td>File removal reason</td> <td>
{#if row.event === "file_instance_blocked"}
File blocked for abuse
{:else if row.event === "file_instance_expired"}
File expired
{/if}
</td>
<td>
{#if row.event === "file_instance_blocked"}
<a href="/u/{row.file_id}">{row.file_name}</a>
{:else}
{row.file_name}
{/if}
</td>
<td>
{row.file_removal_reason}
</td>
</tr> </tr>
</thead> {/each}
<tbody> </tbody>
{#each month.rows as row} </table>
<tr> </div>
<td>
{formatDate(row.time, true, true, false)} {#if data.length > 100}
</td> <div class="toolbar">
<td> <button on:click={last_month}>
{#if row.event === "file_instance_blocked"} <i class="icon">chevron_left</i>
File blocked for abuse Previous month
{:else if row.event === "file_instance_expired"} </button>
File expired <div class="toolbar_spacer"></div>
{/if} <button on:click={next_month}>
</td> Next month
<td> <i class="icon">chevron_right</i>
{#if row.event === "file_instance_blocked"} </button>
<a href="/u/{row.file_id}">{row.file_name}</a>
{:else}
{row.file_name}
{/if}
</td>
<td>
{row.file_removal_reason}
</td>
</tr>
{/each}
</tbody>
</table>
</div> </div>
{/each} {/if}
</section> </section>
<style> <style>
@@ -120,4 +148,11 @@ onMount(() => {
width: 100px; width: 100px;
z-index: 1000; z-index: 1000;
} }
.toolbar {
display: flex;
flex-direction: row;
width: 100%;
}
.toolbar > * { flex: 0 0 auto; }
.toolbar_spacer { flex: 1 1 auto; }
</style> </style>

239
svelte/src/user_home/Transactions.svelte
View File

@@ -5,67 +5,73 @@ import Spinner from "../util/Spinner.svelte";
import Euro from "../util/Euro.svelte" import Euro from "../util/Euro.svelte"
let loading = false let loading = false
let months = []
let year = 0
let month = 0
let month_str = ""
let transactions = {
rows: []
}
const load_transactions = async () => { const load_transactions = async () => {
loading = true loading = true
month_str = year + "-" + ("00"+(month)).slice(-2)
try { try {
// We keep fetching history until we have fetched three months without const resp = await fetch(window.api_endpoint+"/user/transactions/"+month_str)
// any transactions if(resp.status >= 400) {
let empty_months = 0 let json = await resp.json()
let now = new Date() if (json.value === "authentication_failed") {
while (empty_months < 3) { window.location = "/login"
const resp = await fetch( return
window.api_endpoint+"/user/transactions/" + } else {
now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2), throw new Error(json.message)
)
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) { } catch (err) {
alert(err) alert(err)
} finally { } finally {
loading = false 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 let credit_amount = 10
@@ -120,18 +126,21 @@ const load_invoices = async () => {
}; };
onMount(() => { onMount(() => {
let now = new Date()
year = now.getFullYear()
month = now.getMonth()+1
load_transactions() load_transactions()
load_invoices() load_invoices()
}) })
</script> </script>
{#if loading}
<div class="spinner_container">
<Spinner />
</div>
{/if}
<section> <section>
{#if loading}
<div class="spinner_container">
<Spinner />
</div>
{/if}
<h2>Deposit credits</h2> <h2>Deposit credits</h2>
<p> <p>
You can deposit credit on your pixeldrain account with Bitcoin, 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. Here is a log of all transactions on your account balance.
</p> </p>
{#each months as month} <h3>{month_str}</h3>
<h3>{month.month}</h3> <div class="toolbar">
<ul> <button on:click={last_month}>
<li>Subscription charge: <Euro amount={month.total_subscription_charge}></Euro></li> <i class="icon">chevron_left</i>
<li>Storage charge: <Euro amount={month.total_storage_charge}></Euro></li> Previous month
<li>Bandwidth charge: <Euro amount={month.total_bandwidth_charge}></Euro></li> </button>
<li>Total charge: <Euro amount={month.total_deducted}></Euro></li> <div class="toolbar_spacer"></div>
<li>Earned: <Euro amount={month.total_kickback_fee}></Euro></li> <button on:click={next_month}>
<li>Deposited: <Euro amount={month.total_deposited}></Euro></li> Next month
</ul> <i class="icon">chevron_right</i>
</button>
</div>
<ul>
<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"> <div class="table_scroll">
<table style="text-align: left;"> <table style="text-align: left;">
<thead> <thead>
<tr>
<td>Time</td>
<td>Balance</td>
<td>Subscription</td>
<td colspan="2">Storage</td>
<td colspan="2">Bandwidth</td>
<td colspan="2">Kickback</td>
<td>Deposit</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Charge</td>
<td>Charge</td>
<td>Usage</td>
<td>Charge</td>
<td>Usage</td>
<td>Fee</td>
<td>Amount</td>
<td></td>
</tr>
</thead>
<tbody>
{#each transactions.rows as row}
<tr> <tr>
<td>Time</td> <td>{formatDate(row.time, true, true, false)}</td>
<td>Balance</td> <td><Euro amount={row.new_balance}></Euro></td>
<td>Subscription</td> <td><Euro amount={row.subscription_charge} precision="4"></Euro></td>
<td colspan="2">Storage</td> <td><Euro amount={row.storage_charge} precision="4"></Euro></td>
<td colspan="2">Bandwidth</td> <td>{formatDataVolume(row.storage_used, 3)}</td>
<td colspan="2">Kickback</td> <td><Euro amount={row.bandwidth_charge} precision="4"></Euro></td>
<td>Deposit</td> <td>{formatDataVolume(row.bandwidth_used, 3)}</td>
<td><Euro amount={row.kickback_fee} precision="4"></Euro></td>
<td>{formatDataVolume(row.kickback_amount, 3)}</td>
<td><Euro amount={row.deposit_amount}></Euro></td>
</tr> </tr>
<tr> {/each}
<td></td> </tbody>
<td></td> </table>
<td>Charge</td> </div>
<td>Charge</td>
<td>Usage</td>
<td>Charge</td>
<td>Usage</td>
<td>Fee</td>
<td>Amount</td>
<td></td>
</tr>
</thead>
<tbody>
{#each month.rows as row}
<tr>
<td>{formatDate(row.time, true, true, false)}</td>
<td><Euro amount={row.new_balance}></Euro></td>
<td><Euro amount={row.subscription_charge} precision="4"></Euro></td>
<td><Euro amount={row.storage_charge} precision="4"></Euro></td>
<td>{formatDataVolume(row.storage_used, 3)}</td>
<td><Euro amount={row.bandwidth_charge} precision="4"></Euro></td>
<td>{formatDataVolume(row.bandwidth_used, 3)}</td>
<td><Euro amount={row.kickback_fee} precision="4"></Euro></td>
<td>{formatDataVolume(row.kickback_amount, 3)}</td>
<td><Euro amount={row.deposit_amount}></Euro></td>
</tr>
{/each}
</tbody>
</table>
</div>
{/each}
</section> </section>
<style> <style>
@@ -291,4 +309,11 @@ onMount(() => {
width: 100px; width: 100px;
z-index: 1000; z-index: 1000;
} }
.toolbar {
display: flex;
flex-direction: row;
width: 100%;
}
.toolbar > * { flex: 0 0 auto; }
.toolbar_spacer { flex: 1 1 auto; }
</style> </style>