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

Convert multiple pages into SPA

Browse Source
This commit is contained in:
Wim Brand
2025-10-09 15:48:23 +02:00
parent c616b2da7f
commit 06d04a1abc
110 changed files with 1245 additions and 1319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
svelte/src/user_home/APIKeys.svelte
View File

@@ -1,13 +1,12 @@
<script>
import { loading_finish, loading_start } from "lib/Loading";
import { formatDate } from "util/Formatting";
import LoadingIndicator from "util/LoadingIndicator.svelte";
let loading = false
let loaded = false
let rows = []
const load_keys = async () => {
loading = true
loading_start()
try {
const resp = await fetch(window.api_endpoint+"/user/session")
if(resp.status >= 400) {
@@ -30,13 +29,13 @@ const load_keys = async () => {
} catch (err) {
alert(err)
} finally {
loading = false
loading_finish()
loaded = true
}
};
const create_key = async () => {
loading = true
loading_start()
try {
let form = new FormData()
form.append("app_name", "website keys page")
@@ -53,14 +52,15 @@ const create_key = async () => {
}
} catch (err) {
alert("Failed to create new API key! "+err)
} finally {
loading_finish()
}
load_keys();
}
const logout = async (key) => {
loading = true
loading_start()
try {
const resp = await fetch(
window.api_endpoint+"/user/session",
@@ -76,14 +76,14 @@ const logout = async (key) => {
}
} catch (err) {
alert("Failed to delete key: "+err)
} finally {
loading_finish()
}
load_keys();
}
</script>
<LoadingIndicator loading={loading}/>
<section>
{#if !loaded}
<div class="highlight_yellow">

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

@@ -1,9 +1,7 @@
<script>
import { loading_finish, loading_start } from "lib/Loading";
import { onMount } from "svelte";
import { formatDate } from "util/Formatting";
import LoadingIndicator from "util/LoadingIndicator.svelte";
let loading = false
let year = 0
let month = 0
@@ -11,7 +9,7 @@ let month_str = ""
let data = []
const load_activity = async () => {
loading = true
loading_start()
month_str = year + "-" + ("00"+(month)).slice(-2)
try {
const resp = await fetch(window.api_endpoint+"/user/activity/" + month_str)
@@ -29,7 +27,7 @@ const load_activity = async () => {
} catch (err) {
alert(err)
} finally {
loading = false
loading_finish()
}
};
const last_month = () => {
@@ -59,8 +57,6 @@ onMount(() => {
})
</script>
<LoadingIndicator loading={loading}/>
<section>
<h2>Account activity log</h2>
<p>

8
svelte/src/user_home/AffiliatePrompt.svelte
View File

@@ -1,14 +1,13 @@
<script lang="ts">
import { onMount } from "svelte";
import Modal from "util/Modal.svelte";
import LoadingIndicator from "util/LoadingIndicator.svelte";
import { get_user, put_user } from "lib/PixeldrainAPI";
import { loading_finish, loading_start } from "lib/Loading";
// When the always flag is set then the pop-up will also show if the user
// already has an affiliate ID set
export let always = false
let modal: Modal
let loading: boolean
let referral: string
let shown = false
@@ -50,7 +49,7 @@ export const prompt = async (ref: string) => {
onMount(() => prompt(new URLSearchParams(document.location.search).get("ref")))
const allow = async () => {
loading = true
loading_start()
try {
await put_user({affiliate_user_name: referral})
@@ -59,7 +58,7 @@ const allow = async () => {
} catch (err) {
alert(err)
} finally {
loading = false
loading_finish()
}
}
@@ -70,7 +69,6 @@ const deny = () => {
</script>
<Modal bind:this={modal} title="Affiliate sponsoring request" width="700px">
<LoadingIndicator bind:loading={loading} />
<section>
<p>
Hi! {referral} wants you to sponsor their pixeldrain account. This

10
svelte/src/user_home/BandwidthSharing.svelte
View File

@@ -2,24 +2,22 @@
import { onMount } from "svelte";
import Pro from "icons/Pro.svelte";
import { formatDataVolume } from "util/Formatting";
import LoadingIndicator from "util/LoadingIndicator.svelte";
import ProgressBar from "util/ProgressBar.svelte";
import SuccessMessage from "util/SuccessMessage.svelte";
import { loading_finish, loading_start } from "lib/Loading";
let loading = false
let success_message
let hotlinking = window.user.hotlinking_enabled
let transfer_cap = window.user.monthly_transfer_cap / 1e12
let skip_viewer = window.user.skip_file_viewer
const update = async () => {
loading = true
const form = new FormData()
form.append("hotlinking_enabled", hotlinking)
form.append("transfer_cap", transfer_cap*1e12)
form.append("skip_file_viewer", skip_viewer)
loading_start()
try {
const resp = await fetch(
window.api_endpoint+"/user",
@@ -37,7 +35,7 @@ const update = async () => {
} catch (err) {
success_message.set(false, "Failed to update subscription: "+err)
} finally {
loading = false
loading_finish()
}
}
@@ -78,8 +76,6 @@ onMount(() => {
</script>
<LoadingIndicator loading={loading}/>
<section>
<h2><Pro/>Hotlinking (bandwidth sharing)</h2>
<SuccessMessage bind:this={success_message}></SuccessMessage>

9
svelte/src/user_home/ConnectApp.svelte
View File

@@ -1,13 +1,12 @@
<script>
import { onMount } from "svelte";
import LoadingIndicator from "util/LoadingIndicator.svelte";
import CopyButton from "layout/CopyButton.svelte";
import { loading_finish, loading_start } from "lib/Loading";
let loading = false
let app_name = ""
let api_key = ""
const create_key = async () => {
loading = true
loading_start()
try {
let form = new FormData()
form.append("app_name", app_name)
@@ -27,7 +26,7 @@ const create_key = async () => {
} catch (err) {
alert("Failed to create new API key! "+err)
} finally {
loading = false
loading_finish()
}
}
@@ -48,8 +47,6 @@ onMount(() => {
})
</script>
<LoadingIndicator loading={loading}/>
<section>
<!-- Show a back button if an app is selected -->
{#if app_name}

14
svelte/src/user_home/DepositCredit.svelte
View File

@@ -1,16 +1,13 @@
<script>
import Checkout from "layout/checkout/Checkout.svelte";
import { loading_finish, loading_start } from "lib/Loading";
import { onMount } from "svelte";
import Euro from "util/Euro.svelte";
import { formatDate } from "util/Formatting";
import LoadingIndicator from "util/LoadingIndicator.svelte";
let loading = false
let credit_amount = 10
const checkout = async (network = "", amount = 0, country = "") => {
loading = true
if (amount < 10) {
alert("Amount needs to be at least €10")
return
@@ -21,6 +18,7 @@ const checkout = async (network = "", amount = 0, country = "") => {
form.set("network", network)
form.set("country", country)
loading_start()
try {
const resp = await fetch(
window.api_endpoint+"/user/invoice",
@@ -35,14 +33,14 @@ const checkout = async (network = "", amount = 0, country = "") => {
} catch (err) {
alert(err)
} finally {
loading = false
loading_finish()
}
}
let invoices = []
let unpaid_invoice = 0
const load_invoices = async () => {
loading = true
loading_start()
try {
const resp = await fetch(window.api_endpoint+"/user/invoice")
if(resp.status >= 400) {
@@ -66,7 +64,7 @@ const load_invoices = async () => {
console.error(err)
alert(err)
} finally {
loading = false
loading_finish()
}
};
@@ -75,8 +73,6 @@ onMount(() => {
})
</script>
<LoadingIndicator loading={loading}/>
<section>
<h2 id="deposit">Deposit credit</h2>
<p>

9
svelte/src/user_home/EmbeddingControls.svelte
View File

@@ -1,20 +1,19 @@
<script>
import { onMount } from "svelte";
import Persistence from "icons/Persistence.svelte";
import LoadingIndicator from "util/LoadingIndicator.svelte";
import SuccessMessage from "util/SuccessMessage.svelte";
import { loading_finish, loading_start } from "lib/Loading";
let loading = false
let success_message
// Embedding settings
let embed_domains = ""
const save_embed = async () => {
loading = true
const form = new FormData()
form.append("embed_domains", embed_domains)
loading_start()
try {
const resp = await fetch(
window.api_endpoint+"/user",
@@ -30,7 +29,7 @@ const save_embed = async () => {
} catch(err) {
success_message.set(false, err)
} finally {
loading = false
loading_finish()
}
}
@@ -39,8 +38,6 @@ onMount(() => {
})
</script>
<LoadingIndicator loading={loading}/>
<section>
<h2><Persistence/>Embedding controls</h2>
<SuccessMessage bind:this={success_message}></SuccessMessage>

10
svelte/src/user_home/Subscription.svelte
View File

@@ -1,20 +1,18 @@
<script>
import Euro from "util/Euro.svelte"
import LoadingIndicator from "util/LoadingIndicator.svelte";
import SuccessMessage from "util/SuccessMessage.svelte";
import PatreonActivationResult from "./PatreonActivationResult.svelte";
import { loading_finish, loading_start } from "lib/Loading";
let loading = false
let subscription = window.user.subscription.id
let subscription_type = window.user.subscription.type
let success_message
const update = async (plan) => {
loading = true
const form = new FormData()
form.append("subscription", plan)
loading_start()
try {
{
const resp = await fetch(
@@ -43,13 +41,11 @@ const update = async (plan) => {
} catch (err) {
success_message.set(false, "Failed to update subscription: "+err)
} finally {
loading = false
loading_finish()
}
}
</script>
<LoadingIndicator loading={loading}/>
<section>
{#if window.location.hash === "#checkout_complete"}
<div class="highlight_green">

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

@@ -2,9 +2,7 @@
import { onMount } from "svelte";
import { formatDataVolume, formatDate } from "util/Formatting";
import Euro from "util/Euro.svelte"
import LoadingIndicator from "util/LoadingIndicator.svelte";
let loading = false
import { loading_finish, loading_start } from "lib/Loading";
let year = 0
let month = 0
@@ -22,7 +20,7 @@ let transactions = {
}
const load_transactions = async () => {
loading = true
loading_start()
month_str = year + "-" + ("00"+(month)).slice(-2)
try {
const resp = await fetch(window.api_endpoint+"/user/transactions/"+month_str)
@@ -67,7 +65,7 @@ const load_transactions = async () => {
} catch (err) {
alert(err)
} finally {
loading = false
loading_finish()
}
};
const last_month = () => {
@@ -97,8 +95,6 @@ onMount(() => {
})
</script>
<LoadingIndicator loading={loading}/>
<section>
<h2>Transaction log</h2>
<p>

10
svelte/src/user_home/dashboard/CardActivity.svelte
View File

@@ -1,10 +1,8 @@
<script>
import { onMount } from "svelte";
import { formatDate } from "util/Formatting";
import LoadingIndicator from "util/LoadingIndicator.svelte";
import Button from "layout/Button.svelte";
let loading = false
import { loading_finish, loading_start } from "lib/Loading";
let year = 0
let month = 0
@@ -12,8 +10,8 @@ let month_str = ""
let data = []
const load_activity = async () => {
loading = true
month_str = year + "-" + ("00"+(month)).slice(-2)
loading_start()
try {
const resp = await fetch(window.api_endpoint+"/user/activity/" + month_str)
if(resp.status >= 400) {
@@ -30,7 +28,7 @@ const load_activity = async () => {
} catch (err) {
alert(err)
} finally {
loading = false
loading_finish()
}
};
const last_month = () => {
@@ -60,8 +58,6 @@ onMount(() => {
})
</script>
<LoadingIndicator loading={loading}/>
<div class="toolbar">
<Button click={last_month} icon="chevron_left"/>
<div class="toolbar_spacer">

2
svelte/src/user_home/dashboard/CardFSHome.svelte
View File

@@ -1,7 +1,7 @@
<script>
import { onMount } from "svelte";
import { FSNavigator } from "filesystem/FSNavigator.ts"
import { fs_encode_path, fs_node_icon, node_is_shared } from "filesystem/FilesystemAPI";
import { fs_encode_path, fs_node_icon, node_is_shared } from "lib/FilesystemAPI";
import Button from "layout/Button.svelte";
import CreateDirectory from "filesystem/filemanager/CreateDirectory.svelte";
import FSUploadWidget from "filesystem/upload_widget/FSUploadWidget.svelte";

10
svelte/src/user_home/dashboard/CardPrepaidTransactions.svelte
View File

@@ -2,10 +2,8 @@
import { onMount } from "svelte";
import { formatDataVolume, formatDate } from "util/Formatting";
import Euro from "util/Euro.svelte"
import LoadingIndicator from "util/LoadingIndicator.svelte";
import Button from "layout/Button.svelte";
let loading = false
import { loading_finish, loading_start } from "lib/Loading";
let year = 0
let month = 0
@@ -25,8 +23,8 @@ let transactions = {
}
const load_transactions = async () => {
loading = true
month_str = year + "-" + ("00"+(month)).slice(-2)
loading_start()
try {
const resp = await fetch(window.api_endpoint+"/user/transactions/"+month_str)
if(resp.status >= 400) {
@@ -79,7 +77,7 @@ const load_transactions = async () => {
} catch (err) {
alert(err)
} finally {
loading = false
loading_finish()
}
};
const last_month = () => {
@@ -109,8 +107,6 @@ onMount(() => {
})
</script>
<LoadingIndicator loading={loading}/>
<div class="toolbar">
<Button click={last_month} icon="chevron_left"/>
<div class="toolbar_spacer">