files menu wip

for some reason auth was broken when i tested
so if that's still broken ill fix
This commit is contained in:
stringsplit 2023-03-02 21:38:53 +00:00
parent 5ff88d917e
commit a72f7afab9
4 changed files with 38 additions and 23 deletions

View file

@ -2,6 +2,7 @@ import bodyParser from "body-parser";
import { Router } from "express"; import { Router } from "express";
import * as Accounts from "../lib/accounts"; import * as Accounts from "../lib/accounts";
import * as auth from "../lib/auth"; import * as auth from "../lib/auth";
import bytes from "bytes"
import ServeError from "../lib/errors"; import ServeError from "../lib/errors";
import Files from "../lib/files"; import Files from "../lib/files";
@ -31,10 +32,13 @@ fileApiRoutes.get("/list", (req,res) => {
if (!acc) return if (!acc) return
res.send(acc.files.map((e) => { res.send(acc.files.map((e) => {
let fp = files.getFilePointer(e)
return { return {
...files.getFilePointer(e), ...fp,
messageids: null, messageids: null,
id:e owner: null,
id:e,
sizeDisplay: fp.sizeInBytes ? bytes(fp.sizeInBytes) : "[File size unknown]"
} }
})) }))

View file

@ -1,11 +1,11 @@
.pulldown_display[name=files] { .pulldown_display[name=files] {
.notLoggedIn { .notLoggedIn {
position:absolute; position:absolute;
top:100%; top:50%;
transform:translateY(-100%); left:0px;
transform:translateY(-50%);
width:100%; width:100%;
text-align:center; text-align:center;
background-color:#202020;
.flavor { .flavor {
font-size:16px; font-size:16px;

View file

@ -1,33 +1,33 @@
<script> <script>
import Pulldown from "./Pulldown.svelte" import Pulldown from "./Pulldown.svelte"
import { account, pulldownManager } from "../stores.mjs"; import { account, fetchFilePointers, files, pulldownManager } from "../stores.mjs";
fetchFilePointers();
</script> </script>
<Pulldown name="files"> <Pulldown name="files">
{#if !$account.username} {#if !$account.username}
<div class="notLoggedIn"> <div class="notLoggedIn">
<div style:height="2px" style:background-color="#66AAFF" />
<div style:height="10px" /> <div style:height="10px" />
<p class="flavor">Log in to view uploads & collections</p> <p class="flavor">Log in to view uploads</p>
<button on:click={$pulldownManager.openPulldown("account")}>OK</button> <button on:click={$pulldownManager.openPulldown("account")}>OK</button>
<div style:height="14px" /> <div style:height="14px" />
</div> </div>
{:else}
<div class="loggedIn">
<input type="text" placeholder={`Search ${$files.length} file(s)`}>
<div class="fileList">
{#each $files as file (file.id)}
<div class="flFile">
<p class="detail">{file.id}</p>
<h2>{file.filename}</h2>
<p class="detail"><span class="number">{file.mime.split(";")[0]}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="number">{file.sizeDisplay}</span></p>
</div>
{/each}
</div>
</div>
{/if} {/if}
<!--
put scrolling div containing options here
if not logged in, most options will be hidden
& the div containing the options will be resized
(actually, maybe we could use flexbox for this)
-->
<!--
<div>
<h2>Anonymous file deletion</h2>
<p>Enter your deletion code</p>
<input placeholder="0000 0000 0000 0000">
</div>
-->
</Pulldown> </Pulldown>

View file

@ -3,6 +3,7 @@ import { writable } from "svelte/store"
export let pulldownManager = writable(0) export let pulldownManager = writable(0)
export let account = writable({}) export let account = writable({})
export let serverStats = writable({}) export let serverStats = writable({})
export let files = writable([])
export let fetchAccountData = function() { export let fetchAccountData = function() {
fetch("/auth/me").then(async (response) => { fetch("/auth/me").then(async (response) => {
@ -14,6 +15,16 @@ export let fetchAccountData = function() {
}).catch((err) => { console.error(err) }) }).catch((err) => { console.error(err) })
} }
export let fetchFilePointers = function() {
fetch("/files/list").then(async (response) => {
if (response.status == 200) {
files.set(await response.json())
} else {
files.set([])
}
}).catch((err) => { console.error(err) })
}
export let refresh_stats = () => { export let refresh_stats = () => {
fetch("/server").then(async (data) => { fetch("/server").then(async (data) => {
serverStats.set(await data.json()) serverStats.set(await data.json())