Overhaul user settings page
This commit is contained in:
@@ -31,7 +31,9 @@ const load_transactions = async () => {
|
||||
let month = {
|
||||
rows: await resp.json(),
|
||||
total_subscription_charge: 0,
|
||||
total_storage_used: 0,
|
||||
total_storage_charge: 0,
|
||||
total_bandwidth_used: 0,
|
||||
total_bandwidth_charge: 0,
|
||||
total_deposited: 0,
|
||||
total_deducted: 0,
|
||||
@@ -41,10 +43,15 @@ const load_transactions = async () => {
|
||||
row.time = new Date(row.time)
|
||||
month.total_deposited += row.deposit_amount
|
||||
month.total_subscription_charge += row.subscription_charge
|
||||
month.total_storage_used += row.storage_used
|
||||
month.total_storage_charge += row.storage_charge
|
||||
month.total_bandwidth_used += row.bandwidth_used
|
||||
month.total_bandwidth_charge += row.bandwidth_charge
|
||||
month.total_deducted += row.subscription_charge + row.storage_charge + row.bandwidth_charge
|
||||
})
|
||||
|
||||
month.total_storage_used /= month.rows.length
|
||||
|
||||
transactions = month
|
||||
} catch (err) {
|
||||
alert(err)
|
||||
@@ -71,162 +78,33 @@ const next_month = () => {
|
||||
load_transactions()
|
||||
}
|
||||
|
||||
let credit_amount = 10
|
||||
|
||||
const checkout = async (network) => {
|
||||
loading = true
|
||||
const form = new FormData()
|
||||
form.set("amount", credit_amount*1e6)
|
||||
form.set("network", network)
|
||||
|
||||
try {
|
||||
const resp = await fetch(
|
||||
window.api_endpoint+"/btcpay/deposit",
|
||||
{ method: "POST", body: form },
|
||||
)
|
||||
if(resp.status >= 400) {
|
||||
let json = await resp.json()
|
||||
throw json.message
|
||||
}
|
||||
|
||||
window.location = (await resp.json()).checkout_url
|
||||
} catch (err) {
|
||||
alert(err)
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
}
|
||||
|
||||
let show_expired = false
|
||||
let invoices = []
|
||||
const load_invoices = async () => {
|
||||
loading = true
|
||||
try {
|
||||
const resp = await fetch(window.api_endpoint+"/btcpay/invoice")
|
||||
if(resp.status >= 400) {
|
||||
throw new Error((await resp.json()).message)
|
||||
}
|
||||
|
||||
let invoices_tmp = await resp.json()
|
||||
invoices_tmp.forEach(row => {
|
||||
row.time = new Date(row.time)
|
||||
})
|
||||
invoices_tmp.sort((a, b) => {
|
||||
return b.time - a.time
|
||||
})
|
||||
invoices = invoices_tmp
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert(err)
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
let now = new Date()
|
||||
year = now.getFullYear()
|
||||
month = now.getMonth()+1
|
||||
|
||||
load_transactions()
|
||||
load_invoices()
|
||||
})
|
||||
</script>
|
||||
|
||||
<LoadingIndicator loading={loading}/>
|
||||
|
||||
<section>
|
||||
<h2>Deposit credits</h2>
|
||||
<p>
|
||||
You can deposit credit on your pixeldrain account with Bitcoin,
|
||||
Lightning network (<a
|
||||
href="https://btcpay.pixeldrain.com/embed/uS2mbWjXUuaAqMh8XLjkjwi8oehFuxeBZxekMxv68LN/BTC/ln"
|
||||
target="_blank">node info</a>) and Dogecoin. You must pay the full
|
||||
amount as stated on the invoice, else your payment will fail.
|
||||
</p>
|
||||
<p>
|
||||
Do note that it is not possible to withdraw coins from your
|
||||
pixeldrain account. It's not a wallet. Any amount of money you
|
||||
deposit has to be used up.
|
||||
</p>
|
||||
<div style="text-align: center;">
|
||||
Deposit amount €
|
||||
<input type="number" bind:value={credit_amount} min="1"/>
|
||||
<br/>
|
||||
Pay with:<br/>
|
||||
<button on:click={() => {checkout("btc")}}>
|
||||
<span class="icon_unicode">₿</span> Bitcoin
|
||||
</button>
|
||||
<button on:click={() => {checkout("btc_lightning")}}>
|
||||
<i class="icon">bolt</i> Lightning network
|
||||
</button>
|
||||
<button on:click={() => {checkout("doge")}}>
|
||||
<span class="icon_unicode">Ð</span> Dogecoin
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h3>Open invoices</h3>
|
||||
<div class="table_scroll">
|
||||
<table style="text-align: left;">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Created</td>
|
||||
<td>Amount</td>
|
||||
<td>Status</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each invoices as row (row.id)}
|
||||
{#if row.status === "New" ||
|
||||
row.status === "InvoiceCreated" ||
|
||||
row.status === "InvoiceProcessing" ||
|
||||
show_expired
|
||||
}
|
||||
<tr>
|
||||
<td>{formatDate(row.time, true, true, false)}</td>
|
||||
<td><Euro amount={row.amount}></Euro></td>
|
||||
<td>
|
||||
{#if row.status === "InvoiceCreated"}
|
||||
New (waiting for payment)
|
||||
{:else if row.status === "InvoiceProcessing"}
|
||||
Payment received, waiting for confirmations
|
||||
{:else if row.status === "InvoiceSettled"}
|
||||
Paid
|
||||
{:else if row.status === "InvoiceExpired"}
|
||||
Expired
|
||||
{:else}
|
||||
{row.status}
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if row.status === "New" || row.status === "InvoiceCreated"}
|
||||
<a href={row.checkout_url} class="button button_highlight">
|
||||
<i class="icon">paid</i> Pay
|
||||
</a>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="text-align: center;">
|
||||
<button on:click={() => {show_expired = !show_expired}}>
|
||||
{#if show_expired}
|
||||
Hide
|
||||
{:else}
|
||||
Show
|
||||
{/if}
|
||||
expired and settled invoices
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Transaction log</h2>
|
||||
<p>
|
||||
Here is a log of all transactions on your account balance.
|
||||
Here is a log of all transactions on your account balance. Usage is
|
||||
calculated per day. The storage charge is divided by the average number
|
||||
of months in a day (30.4375).
|
||||
</p>
|
||||
<p>
|
||||
Example: If you have 2 TB stored on your pixeldrain account at €3 per TB
|
||||
then the daily charge will be:<br/>
|
||||
|
||||
2 TB * € 3 = € 6<br/>
|
||||
|
||||
€ 6 / 30.4375 = € 0.197125 per day<br/>
|
||||
|
||||
Similarly the subscription charge of €1 per month is also charged at € 1
|
||||
/ 30.4375 = € 0.032854 per day.
|
||||
</p>
|
||||
|
||||
<h3>{month_str}</h3>
|
||||
@@ -242,11 +120,23 @@ onMount(() => {
|
||||
</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>Deposited: <Euro amount={transactions.total_deposited}></Euro></li>
|
||||
<li>
|
||||
Subscription charge: <Euro amount={transactions.total_subscription_charge} precision="4"/>
|
||||
</li>
|
||||
<li>
|
||||
Storage charge: <Euro amount={transactions.total_storage_charge} precision="4"/>
|
||||
(used {formatDataVolume(transactions.total_storage_used, 3)})
|
||||
</li>
|
||||
<li>
|
||||
Bandwidth charge: <Euro amount={transactions.total_bandwidth_charge} precision="4"/>
|
||||
(used {formatDataVolume(transactions.total_bandwidth_used, 3)})
|
||||
</li>
|
||||
<li>
|
||||
Total charge: <Euro amount={transactions.total_deducted} precision="4"/>
|
||||
</li>
|
||||
<li>
|
||||
Deposited: <Euro amount={transactions.total_deposited} precision="4"/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="table_scroll">
|
||||
@@ -276,10 +166,10 @@ onMount(() => {
|
||||
<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><Euro amount={row.subscription_charge} precision="6"></Euro></td>
|
||||
<td><Euro amount={row.storage_charge} precision="6"></Euro></td>
|
||||
<td>{formatDataVolume(row.storage_used, 3)}</td>
|
||||
<td><Euro amount={row.bandwidth_charge} precision="4"></Euro></td>
|
||||
<td><Euro amount={row.bandwidth_charge} precision="6"></Euro></td>
|
||||
<td>{formatDataVolume(row.bandwidth_used, 3)}</td>
|
||||
<td><Euro amount={row.deposit_amount}></Euro></td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user