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

Add thead and tbody to every table for svelte 5 compatibility

Browse Source
This commit is contained in:
Wim Brand
2024-11-06 19:12:52 +01:00
parent a6880b528a
commit 83ec1fc516
17 changed files with 1452 additions and 1639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1852
svelte/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

28
svelte/package.json
View File

@@ -7,25 +7,25 @@
"dev": "rollup -c -w"
},
"devDependencies": {
"@babel/core": "^7.22.20",
"@babel/preset-env": "^7.22.20",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^26.0.0",
"@rollup/plugin-node-resolve": "^15.2.1",
"@rollup/plugin-terser": "^0.4.3",
"@babel/core": "^7.26.0",
"@babel/preset-env": "^7.26.0",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^26.0.3",
"@rollup/plugin-node-resolve": "^15.3.0",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "^11.1.6",
"@types/jsmediatags": "^3.9.3",
"rollup": "^4.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.1.6",
"svelte": "^4.2.0"
"@types/jsmediatags": "^3.9.6",
"rollup": "^4.24.4",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-svelte": "^7.2.2",
"svelte": "^4.2.19"
},
"dependencies": {
"behave-js": "^1.5.0",
"chart.js": "^4.2.0",
"chart.js": "^4.4.6",
"pure-color": "^1.3.0",
"rollup-plugin-includepaths": "^0.2.4",
"svelte-preprocess": "^6.0.2",
"tslib": "^2.7.0"
"svelte-preprocess": "^6.0.3",
"tslib": "^2.8.1"
}
}

4
svelte/src/admin_panel/AbuseReport.svelte
View File

@@ -82,6 +82,7 @@ let set_status = async (action, report_type) => {
</div>
<div class="table_scroll">
<table>
<thead>
<tr>
<td>Time</td>
<td>IP</td>
@@ -89,6 +90,8 @@ let set_status = async (action, report_type) => {
<td>Status</td>
<td colspan="2">Reports from this IP</td>
</tr>
</thead>
<tbody>
{#each report.reports as user_report}
<tr>
<td>{formatDate(user_report.time, true, true, false)}</td>
@@ -118,6 +121,7 @@ let set_status = async (action, report_type) => {
</tr>
{/if}
{/each}
</tbody>
</table>
</div>
</div>

4
svelte/src/admin_panel/EmailReportersTable.svelte
View File

@@ -54,6 +54,7 @@ const toggle_preview = (rep) => {
<div class="table_scroll">
<table>
<thead>
<tr>
<td><SortButton field="from_address" active_field={sort_field} asc={asc} sort_func={sort}>Address</SortButton></td>
<td><SortButton field="name" active_field={sort_field} asc={asc} sort_func={sort}>Name</SortButton></td>
@@ -63,6 +64,8 @@ const toggle_preview = (rep) => {
<td><SortButton field="created" active_field={sort_field} asc={asc} sort_func={sort}>Created</SortButton></td>
<td></td>
</tr>
</thead>
<tbody>
{#each reporters as rep (rep.from_address)}
<tr animate:flip={{duration: 500}}>
<td>{rep.from_address}</td>
@@ -94,6 +97,7 @@ const toggle_preview = (rep) => {
</td>
</tr>
{/each}
</tbody>
</table>
</div>

2
svelte/src/admin_panel/Home.svelte
View File

@@ -209,6 +209,7 @@ onDestroy(() => {
<section>
<h3>Process stats</h3>
<table>
<tbody>
<tr>
<td>DB Time</td>
<td>{formatDate(new Date(status.db_time), true, true, true)}</td>
@@ -217,6 +218,7 @@ onDestroy(() => {
<td>PID</td>
<td>{status.pid}</td>
</tr>
</tbody>
</table>
<h3>Pixelstore stats</h3>

4
svelte/src/admin_panel/IPBans.svelte
View File

@@ -157,6 +157,7 @@ onMount(get_bans);
</div>
<div class="table_scroll">
<table>
<thead>
<tr>
<td>Reason</td>
<td>Reporter</td>
@@ -164,6 +165,8 @@ onMount(get_bans);
<td>Expire time</td>
<td>File</td>
</tr>
</thead>
<tbody>
{#each row.offences as offence (offence.ban_time)}
<tr>
<td>{offence.reason}</td>
@@ -179,6 +182,7 @@ onMount(get_bans);
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</Expandable>

12
svelte/src/admin_panel/MollieSettlement.svelte
View File

@@ -71,12 +71,15 @@ onMount(get_payments);
{#if per_country.NL}
<table>
<thead>
<tr>
<td>Bedrag</td>
<td>BTW-code</td>
<td>BTW</td>
<td>Tegenrekening</td>
</tr>
</thead>
<tbody>
<tr>
<td><Euro amount={per_country.NL.amount + per_country.NL.vat}/></td>
<td>BTW hoog 21%</td>
@@ -95,6 +98,7 @@ onMount(get_payments);
<td><Euro amount={0}/></td>
<td>8030 - Omzet Mollie inkomsten</td>
</tr>
</tbody>
</table>
{/if}
@@ -103,6 +107,7 @@ onMount(get_payments);
<div class="table_scroll">
<table>
<thead>
<tr>
<td>Country</td>
<td>Payments</td>
@@ -111,6 +116,8 @@ onMount(get_payments);
<td>VAT%</td>
<td>Total</td>
</tr>
</thead>
<tbody>
{#each Object.entries(per_country) as [country, row]}
<tr>
<td>{country}</td>
@@ -140,12 +147,14 @@ onMount(get_payments);
<td><Euro amount={(totals.vat-per_country.NL.vat)+(totals.amount-per_country.NL.amount)}/></td>
</tr>
{/if}
</tbody>
</table>
</div>
<h3>All payments ({payments.length})</h3>
<div class="table_scroll">
<table>
<thead>
<tr>
<td>ID</td>
<td>Created</td>
@@ -155,6 +164,8 @@ onMount(get_payments);
<td>VAT</td>
<td>Total</td>
</tr>
</thead>
<tbody>
{#each payments as row (row.id)}
<tr>
<td><a href={row._links.dashboard.href} target="_blank">{row.id}</a></td>
@@ -166,5 +177,6 @@ onMount(get_payments);
<td><Euro amount={row.amount.value*1e6}/></td>
</tr>
{/each}
</tbody>
</table>
</div>

8
svelte/src/admin_panel/PayPalTaxes.svelte
View File

@@ -140,12 +140,15 @@ onMount(() => {
{#if per_country.NL}
<h2>Accounting information</h2>
<table>
<thead>
<tr>
<td>Bedrag</td>
<td>BTW-code</td>
<td>BTW</td>
<td>Tegenrekening</td>
</tr>
</thead>
<tbody>
<tr>
<td><Euro amount={per_country.NL.amount + per_country.NL.vat}/></td>
<td>BTW hoog 21%</td>
@@ -164,6 +167,7 @@ onMount(() => {
<td><Euro amount={0}/></td>
<td>8040 - Omzet PayPal inkomsten</td>
</tr>
</tbody>
</table>
{/if}
@@ -171,6 +175,7 @@ onMount(() => {
<div class="table_scroll">
<table>
<thead>
<tr>
<td>Country</td>
<td>Payments</td>
@@ -181,6 +186,8 @@ onMount(() => {
<td>Fee</td>
<td>Total</td>
</tr>
</thead>
<tbody>
{#each Object.entries(per_country) as [country, row]}
<tr>
<td>{country}</td>
@@ -216,6 +223,7 @@ onMount(() => {
<td><Euro amount={(totals.vat-per_country.NL.vat)+(totals.amount-per_country.NL.amount)-(totals.fee-per_country.NL.fee)}/></td>
</tr>
{/if}
</tbody>
</table>
</div>

6
svelte/src/admin_panel/user_bans/BanDetails.svelte
View File

@@ -6,6 +6,7 @@ export let row = {}
</script>
<table>
<tbody>
<tr>
<td>Username</td>
<td>{row.user.username}</td>
@@ -34,10 +35,12 @@ export let row = {}
<td>FS Storage used</td>
<td>{formatDataVolume(row.user.filesystem_storage_used, 3)}</td>
</tr>
</tbody>
</table>
<br/>
<div class="table_scroll">
<table>
<thead>
<tr>
<td>Reason</td>
<td>Reporter</td>
@@ -45,6 +48,8 @@ export let row = {}
<td>Expire time</td>
<td>File</td>
</tr>
</thead>
<tbody>
{#each row.offences as offence (offence.ban_time)}
<tr>
<td>{offence.reason}</td>
@@ -60,5 +65,6 @@ export let row = {}
</td>
</tr>
{/each}
</tbody>
</table>
</div>

2
svelte/src/file_viewer/DetailsWindow.svelte
View File

@@ -117,6 +117,7 @@ onMount(() => {
<div class="indent">
<table>
<tbody>
<tr>
<td>Name</td>
<td>{file.name}</td>
@@ -192,6 +193,7 @@ onMount(() => {
<td>SHA256 hash</td>
<td style="word-break: break-all;">{file.hash_sha256}</td>
</tr>
</tbody>
</table>
<h2>Views and downloads</h2>

2
svelte/src/filesystem/DetailsWindow.svelte
View File

@@ -122,6 +122,7 @@ let update_chart = async (base, timespan, interval) => {
<Modal bind:visible={visible} title="Details" width={($nav.base.type === "file" ? 1000 : 750) + "px"}>
<table style="width: 100%;">
<tbody>
<tr>
<td>Name</td>
<td>{$nav.base.name}</td>
@@ -194,6 +195,7 @@ let update_chart = async (base, timespan, interval) => {
</td>
</tr>
{/if}
</tbody>
</table>
{#if $nav.base.type === "file"}

43
svelte/src/filesystem/SearchView.svelte
View File

@@ -109,36 +109,29 @@ const open_result = index => {
</form>
</div>
<div class="directory center">
<tr>
<td></td>
<td>Name</td>
</tr>
<div class="results center">
{#each search_results as result, index}
<a
href={"/d"+fs_encode_path(result)}
on:click|preventDefault={() => open_result(index)}
class="node"
>
<td>
<img src={fs_thumbnail_url(result, 32, 32)} class="node_icon" alt="icon"/>
</td>
<td class="node_name">
<span class="node_name">
<!-- Remove the search directory from the result -->
{result.slice($nav.base.path.length+1)}
</td>
</span>
</a>
{/each}
{#if search_results.length === last_limit}
<div class="node">
<td></td>
<td class="node_name">
<div class="node_name" style="text-align: center;">
<button on:click={() => {search(last_limit + 100)}}>
<i class="icon">expand_more</i>
More results
</button>
</td>
</div>
</div>
{/if}
</div>
@@ -164,8 +157,9 @@ const open_result = index => {
flex: 1 1 auto;
}
.directory {
display: table;
.results {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
margin: 8px auto 16px auto;
@@ -174,17 +168,18 @@ const open_result = index => {
border-collapse: collapse;
border-radius: 8px;
}
.directory > * {
display: table-row;
}
.directory > * > * {
display: table-cell;
.results > * {
display: flex;
flex-direction: row;
}
.node {
display: table-row;
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
text-decoration: none;
color: var(--text-color);
padding: 6px;
padding: 4px;
}
.node:not(:last-child) {
border-bottom: 1px solid var(--separator);
@@ -194,17 +189,15 @@ const open_result = index => {
color: var(--input_text);
text-decoration: none;
}
td {
padding: 4px;
vertical-align: middle;
}
.node_icon {
flex: 0 0 auto;
height: 32px;
width: 32px;
vertical-align: middle;
border-radius: 4px;
}
.node_name {
flex: 1 1 auto;
width: 100%;
overflow: hidden;
line-height: 1.2em;

8
svelte/src/home_page/AddressReputation.svelte
View File

@@ -33,12 +33,15 @@ onMount(async () => {
<div class="table_scroll">
<table>
<thead>
<tr>
<td>File</td>
<td>Reason</td>
<td>Ban date</td>
<td>Expiry date</td>
</tr>
</thead>
<tbody>
{#each result.user_offences as offence (offence.ban_time)}
<tr>
<td>
@@ -53,6 +56,7 @@ onMount(async () => {
<td>{formatDate(offence.expire_time, false, false, false)}</td>
</tr>
{/each}
</tbody>
</table>
</div>
<p>
@@ -95,12 +99,15 @@ onMount(async () => {
<div class="table_scroll">
<table>
<thead>
<tr>
<td>File</td>
<td>Reason</td>
<td>Ban date</td>
<td>Expiry date</td>
</tr>
</thead>
<tbody>
{#each result.ip_offences as offence (offence.ban_time)}
<tr>
<td>
@@ -115,6 +122,7 @@ onMount(async () => {
<td>{formatDate(offence.expire_time, false, false, false)}</td>
</tr>
{/each}
</tbody>
</table>
</div>

2
svelte/src/layout/SlowDown.svelte
View File

@@ -51,9 +51,11 @@ export let icon_href = ""
<IconBlock icon_href={icon_href}>
<table>
<tbody>
<tr><td colspan="2">{file_name}</td></tr>
<tr><td>Type</td><td>{file_type}</td></tr>
<tr><td>Size</td><td>{formatDataVolume(file_size, 3)}</td></tr>
</tbody>
</table>
<button on:click={() => {dispatch("download")}}>
<i class="icon">download</i> Download

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

@@ -117,6 +117,7 @@ const logout = async (key) => {
</section>
<div class="table_scroll">
<table style="text-align: left;">
<thead>
<tr>
<td>Key</td>
<td>Created</td>
@@ -124,6 +125,8 @@ const logout = async (key) => {
<td>IP address</td>
<td></td>
</tr>
</thead>
<tbody>
{#each rows as row (row.auth_key)}
<tr style="border-bottom: none;">
<td>{row.auth_key}</td>
@@ -157,6 +160,7 @@ const logout = async (key) => {
<td colspan="4">User-Agent: {row.user_agent}</td>
</tr>
{/each}
</tbody>
</table>
<br/>
</div>

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

@@ -117,6 +117,7 @@ onMount(() => {
</div>
<table>
<tbody>
<tr>
<td>Opening balance</td>
<td><Euro amount={transactions.balance_start} precision="4"/></td>
@@ -151,6 +152,7 @@ onMount(() => {
<td>Deposited</td>
<td><Euro amount={transactions.total_deposited} precision="4"/></td>
</tr>
</tbody>
</table>
<style>

56
svelte/src/util/TabBar.svelte Normal file
View File

@@ -0,0 +1,56 @@
<script>
import Button from "../layout/Button.svelte";
// {icon: "", label: ""}
export let tabs = []
export let active = 0
export const open_tab = (name = "") => {
for (let i = 0; i < tabs.length; i++) {
if (tabs[i].name === name) {
active = i
return
}
}
}
</script>
<div class="tab_bar">
{#each tabs as t, i}
<Button
icon={t.icon}
label={t.label}
highlight={i === active}
click={() => active = i}
/>
{/each}
</div>
<!-- Can't find a way to do this dynamically unfortunately-->
{#if active === 0}
<slot name="0"></slot>
{:else if active === 1}
<slot name="1"></slot>
{:else if active === 2}
<slot name="2"></slot>
{:else if active === 3}
<slot name="3"></slot>
{:else if active === 4}
<slot name="4"></slot>
{:else if active === 5}
<slot name="5"></slot>
{:else if active === 6}
<slot name="6"></slot>
{:else if active === 7}
<slot name="7"></slot>
{:else if active === 8}
<slot name="8"></slot>
{:else if active === 9}
<slot name="9"></slot>
{/if}
<style>
.tab_bar {
border-bottom: 2px solid var(--separator);
}
</style>