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

Add acknowledgements

Browse Source
This commit is contained in:
Wim Brand
2020-12-15 16:25:20 +01:00
parent e35e6b0f45
commit 75ca29d06b
10 changed files with 397 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
go.mod
View File

@@ -18,6 +18,6 @@ require (
github.com/Fornaxian/pd_mime_type v0.0.0-20200204165508-2815edf3a145 github.com/Fornaxian/pd_mime_type v0.0.0-20200204165508-2815edf3a145
github.com/google/uuid v1.1.1 github.com/google/uuid v1.1.1
github.com/julienschmidt/httprouter v1.3.0 github.com/julienschmidt/httprouter v1.3.0
github.com/microcosm-cc/bluemonday v1.0.3 github.com/microcosm-cc/bluemonday v1.0.4
github.com/russross/blackfriday/v2 v2.0.1 github.com/russross/blackfriday/v2 v2.1.0
) )

43
res/include/md/acknowledgements.md Normal file
View File

@@ -0,0 +1,43 @@
# Acknowledgements
## Software used
* [Go](https://golang.org/)
* [ScyllaDB](https://www.scylladb.com/)
* [CockroachDB](https://www.cockroachlabs.com/)
* [Nginx](https://www.nginx.com/)
* [Ubuntu Server edition](https://ubuntu.com/)
* [Debian](https://www.debian.org/)
## Programming libraries
* [scylladb/gocql](https://github.com/scylladb/gocql)
* [scylladb/gocqlx](https://github.com/scylladb/gocqlx)
* [lib/pq](github.com/lib/pq)
* [jmoiron/sqlx](https://github.com/jmoiron/sqlx)
* [BurntSushi/toml](https://github.com/BurntSushi/toml)
* [julienschmidt/httprouter](https://github.com/julienschmidt/httprouter)
* [gabriel-vasile/mimetype](https://github.com/gabriel-vasile/mimetype)
* [disintegration/imaging](github.com/disintegration/imaging)
* [gorilla/websocket](github.com/gorilla/websocket)
* [shopspring/decimal](github.com/shopspring/decimal)
* [jhillyerd/enmime](github.com/jhillyerd/enmime)
* [russross/blackfriday](https://github.com/russross/blackfriday)
* [microcosm-cc/bluemonday](github.com/microcosm-cc/bluemonday)
### Web framework
* [Svelte](https://svelte.dev/)
## Security work
* 2020-12-06 Security researcher Arian Firoozfar reported a cross-site
scripting vulnerability on the file viewer page. The issue was fixed the
following day.
* 2017-12-04 Security researcher Hangyi reported a cross-site scripting
vulnerability on the file viewer page. The issue was fixed on the 6th.
If you have discovered a security issue in pixeldrain please disclose it
responsibly at [support@pixeldrain.com](mailto:support@pixeldrain.com). We do
not have a bug bounty program.

87
res/include/script/admin.js
View File

@@ -1,32 +1,32 @@
let graphViews = drawGraph(document.getElementById("views_chart"), "Views", "number"); let graphViews = drawGraph(document.getElementById("views_chart"), "Views", "number");
let graphBandwidth = drawGraph(document.getElementById("bandwidth_chart"), "Bandwidth", "bytes"); let graphBandwidth = drawGraph(document.getElementById("bandwidth_chart"), "Bandwidth", "bytes");
let graphTimeout = null; let graphTimeout = null;
function loadGraph(minutes, interval, live){ function loadGraph(minutes, interval, live) {
if (graphTimeout !== null) { clearTimeout(graphTimeout) } if (graphTimeout !== null) { clearTimeout(graphTimeout) }
if (live) { if (live) {
graphTimeout = setTimeout(() => {loadGraph(minutes, interval, true)}, 10000) graphTimeout = setTimeout(() => { loadGraph(minutes, interval, true) }, 10000)
} }
let today = new Date() let today = new Date()
let start = new Date() let start = new Date()
start.setMinutes(start.getMinutes()-minutes) start.setMinutes(start.getMinutes() - minutes)
fetch( fetch(
apiEndpoint+"/admin/files/timeseries" + apiEndpoint + "/admin/files/timeseries" +
"?start="+start.toISOString() + "?start=" + start.toISOString() +
"&end="+today.toISOString() + "&end=" + today.toISOString() +
"&interval="+interval "&interval=" + interval
).then(resp => { ).then(resp => {
if (!resp.ok) { return Promise.reject("Error: "+resp.status);} if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
return resp.json(); return resp.json();
}).then(resp => { }).then(resp => {
resp.views.timestamps.forEach((val, idx) => { resp.views.timestamps.forEach((val, idx) => {
let date = new Date(val); let date = new Date(val);
let dateStr = ("00"+(date.getMonth()+1)).slice(-2); let dateStr = ("00" + (date.getMonth() + 1)).slice(-2);
dateStr += "-"+("00"+date.getDate()).slice(-2); dateStr += "-" + ("00" + date.getDate()).slice(-2);
dateStr += " "+("00"+date.getHours()).slice(-2); dateStr += " " + ("00" + date.getHours()).slice(-2);
dateStr += ":"+("00"+date.getMinutes()).slice(-2); dateStr += ":" + ("00" + date.getMinutes()).slice(-2);
resp.views.timestamps[idx] = " "+dateStr+" "; // Poor man's padding resp.views.timestamps[idx] = " " + dateStr + " "; // Poor man's padding
}); });
graphViews.data.labels = resp.views.timestamps; graphViews.data.labels = resp.views.timestamps;
graphViews.data.datasets[0].data = resp.views.amounts; graphViews.data.datasets[0].data = resp.views.amounts;
@@ -44,30 +44,30 @@ function loadGraph(minutes, interval, live){
resp.views.amounts.forEach(e => { total += e; }); resp.views.amounts.forEach(e => { total += e; });
document.getElementById("total_views").innerText = formatThousands(total); document.getElementById("total_views").innerText = formatThousands(total);
}).catch(e => { }).catch(e => {
alert("Error requesting time series: "+e); alert("Error requesting time series: " + e);
}) })
} }
loadGraph(10080, 60, false); loadGraph(10080, 60, false);
function loadGraphDate(start, end, interval){ function loadGraphDate(start, end, interval) {
fetch( fetch(
apiEndpoint+"/admin/files/timeseries" + apiEndpoint + "/admin/files/timeseries" +
"?start="+start.toISOString() + "?start=" + start.toISOString() +
"&end="+end.toISOString() + "&end=" + end.toISOString() +
"&interval="+interval "&interval=" + interval
).then(resp => { ).then(resp => {
if (!resp.ok) { return Promise.reject("Error: "+resp.status);} if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
return resp.json(); return resp.json();
}).then(resp => { }).then(resp => {
resp.views.timestamps.forEach((val, idx) => { resp.views.timestamps.forEach((val, idx) => {
let date = new Date(val); let date = new Date(val);
let dateStr = date.getUTCFullYear() + let dateStr = date.getUTCFullYear() +
"-"+("00"+(date.getUTCMonth()+1)).slice(-2) + "-" + ("00" + (date.getUTCMonth() + 1)).slice(-2) +
"-"+("00"+date.getUTCDate()).slice(-2) + "-" + ("00" + date.getUTCDate()).slice(-2) +
" "+("00"+date.getUTCHours()).slice(-2) + " " + ("00" + date.getUTCHours()).slice(-2) +
":"+("00"+date.getUTCMinutes()).slice(-2); ":" + ("00" + date.getUTCMinutes()).slice(-2);
resp.views.timestamps[idx] = " "+dateStr+" "; // Poor man's padding resp.views.timestamps[idx] = " " + dateStr + " "; // Poor man's padding
}); });
graphViews.data.labels = resp.views.timestamps; graphViews.data.labels = resp.views.timestamps;
graphViews.data.datasets[0].data = resp.views.amounts; graphViews.data.datasets[0].data = resp.views.amounts;
@@ -85,7 +85,7 @@ function loadGraphDate(start, end, interval){
resp.views.amounts.forEach(e => { total += e; }); resp.views.amounts.forEach(e => { total += e; });
document.getElementById("total_views").innerText = formatThousands(total); document.getElementById("total_views").innerText = formatThousands(total);
}).catch(e => { }).catch(e => {
alert("Error requesting time series: "+e); alert("Error requesting time series: " + e);
}) })
} }
@@ -114,19 +114,19 @@ function loadTimespan(span, base) {
loadGraphDate(monday, sunday, 60); loadGraphDate(monday, sunday, 60);
} else if (span === "month") { } else if (span === "month") {
let start = new Date(Date.UTC(base.getUTCFullYear(), base.getUTCMonth(), 1)); let start = new Date(Date.UTC(base.getUTCFullYear(), base.getUTCMonth(), 1));
let end = new Date(Date.UTC(base.getUTCFullYear(), base.getUTCMonth()+1, 0, 23, 59, 59)); let end = new Date(Date.UTC(base.getUTCFullYear(), base.getUTCMonth() + 1, 0, 23, 59, 59));
tsStart = start; tsStart = start;
loadGraphDate(start, end, 60); loadGraphDate(start, end, 60);
} else if (span === "quarter") { } else if (span === "quarter") {
let start = new Date(Date.UTC(base.getUTCFullYear(), 3.0 * Math.floor(base.getUTCMonth()/3.0), 1)); let start = new Date(Date.UTC(base.getUTCFullYear(), 3.0 * Math.floor(base.getUTCMonth() / 3.0), 1));
let end = new Date(Date.UTC(base.getUTCFullYear(), 3.0 * Math.ceil(base.getUTCMonth()/3.0), 0, 23, 59, 59)); let end = new Date(Date.UTC(base.getUTCFullYear(), 3.0 * Math.ceil(base.getUTCMonth() / 3.0), 0, 23, 59, 59));
tsStart = start; tsStart = start;
loadGraphDate(start, end, 1440); loadGraphDate(start, end, 1440);
} else if (span === "year") { } else if (span === "year") {
let start = new Date(Date.UTC(base.getUTCFullYear(), 0, 1)); let start = new Date(Date.UTC(base.getUTCFullYear(), 0, 1));
let end = new Date(Date.UTC(base.getUTCFullYear()+1, 0, 0, 23, 59, 59)); let end = new Date(Date.UTC(base.getUTCFullYear() + 1, 0, 0, 23, 59, 59));
tsStart = start; tsStart = start;
loadGraphDate(start, end, 1440); loadGraphDate(start, end, 1440);
@@ -165,9 +165,9 @@ function navigateTimespan(forward) {
loadTimespan( loadTimespan(
tsSpan, tsSpan,
new Date(Date.UTC( new Date(Date.UTC(
tsStart.getUTCFullYear()+offYear, tsStart.getUTCFullYear() + offYear,
tsStart.getUTCMonth()+offMonth, tsStart.getUTCMonth() + offMonth,
tsStart.getUTCDay()+offDay, tsStart.getUTCDay() + offDay,
)) ))
) )
} }
@@ -184,7 +184,7 @@ let lastOrder;
function getStats(order) { function getStats(order) {
lastOrder = order lastOrder = order
fetch(apiEndpoint+"/status").then( fetch(apiEndpoint + "/status").then(
resp => resp.json() resp => resp.json()
).then(resp => { ).then(resp => {
document.getElementById("file_stats_watchers").innerText = resp.stats_watcher_threads; document.getElementById("file_stats_watchers").innerText = resp.stats_watcher_threads;
@@ -210,19 +210,8 @@ function getStats(order) {
last_remote_read_size = resp.remote_read_size; last_remote_read_size = resp.remote_read_size;
let c = document.getElementById("tconnstat_body") document.getElementById("db_time").innerText = printDate(new Date(resp.db_time), true, true, true);
c.innerHTML = "" document.getElementById("db_latency").innerText = formatNumber(resp.db_latency / 1000, 3) + " ms";
resp.db_connection_stats.forEach(v => {
let row = document.createElement("tr")
row.innerHTML = `\
<td>${v.name}</td>
<td>${v.available}</td>
<td>${v.max_connections}</td>
<td>${v.open_connections}</td>
<td>${v.connections_in_use}</td>
<td>${v.connections_idle}</td>`
c.appendChild(row)
})
let p = document.getElementById("tbody_peers") let p = document.getElementById("tbody_peers")
p.innerHTML = "" p.innerHTML = ""
@@ -237,7 +226,7 @@ function getStats(order) {
<td>${formatDataVolume(v.free_space, 3)}</td> <td>${formatDataVolume(v.free_space, 3)}</td>
<td>${formatDataVolume(v.min_free_space, 3)}</td>` <td>${formatDataVolume(v.min_free_space, 3)}</td>`
if (v.free_space < v.min_free_space/2 || !v.reachable) { if (v.free_space < v.min_free_space / 2 || !v.reachable) {
row.classList.add("highlight_red") row.classList.add("highlight_red")
} else if (v.free_space < v.min_free_space) { } else if (v.free_space < v.min_free_space) {
row.classList.add("highlight_blue") row.classList.add("highlight_blue")
@@ -248,7 +237,7 @@ function getStats(order) {
}) })
resp.query_statistics.sort((a, b) => { resp.query_statistics.sort((a, b) => {
if (typeof(a[order]) === "number") { if (typeof (a[order]) === "number") {
// Sort ints from high to low // Sort ints from high to low
return b[order] - a[order] return b[order] - a[order]
} else { } else {

7
res/include/style/layout.css
View File

@@ -24,6 +24,7 @@
font-family: 'Material Icons'; font-family: 'Material Icons';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: block;
src: local('Material Icons'), src: local('Material Icons'),
local('MaterialIcons-Regular'), local('MaterialIcons-Regular'),
url(/res/misc/MaterialIcons-Regular.woff2) format('woff2'), url(/res/misc/MaterialIcons-Regular.woff2) format('woff2'),
@@ -95,7 +96,7 @@ body{
position: fixed; position: fixed;
backface-visibility: hidden; backface-visibility: hidden;
z-index: 99; z-index: 99;
width: 250px; width: 18em;
height: 100%; height: 100%;
left: 0; left: 0;
float: left; float: left;
@@ -115,7 +116,7 @@ body{
z-index: 200; z-index: 200;
right: 0; right: 0;
height: auto; height: auto;
left: 250px; left: 18em;
min-width: 300px; min-width: 300px;
display: inline-block; display: inline-block;
text-align: center; /* Center the header and body */ text-align: center; /* Center the header and body */
@@ -127,7 +128,7 @@ body{
} }
@media (max-width: 800px) { @media (max-width: 800px) {
.page_navigation { .page_navigation {
left: -250px; left: -18em;
} }
.page_body { .page_body {
left: 0; left: 0;

17
res/template/admin.html
View File

@@ -15,8 +15,7 @@
<h3>Bandwidth and views</h3> <h3>Bandwidth and views</h3>
</div> </div>
<div class="highlight_dark"> <div class="highlight_dark">
<button onclick="loadGraph(720, 1, true);">Live</button> <button onclick="loadGraph(1440, 1, true);">Day</button>
<button onclick="loadGraph(1440, 10, true);">Day</button>
<button onclick="loadGraph(10080, 10, false);">Week</button> <button onclick="loadGraph(10080, 10, false);">Week</button>
<button onclick="loadGraph(20160, 60, false);">Two Weeks</button> <button onclick="loadGraph(20160, 60, false);">Two Weeks</button>
<button onclick="loadGraph(43200, 60, false);">Month</button> <button onclick="loadGraph(43200, 60, false);">Month</button>
@@ -52,19 +51,13 @@
<br/> <br/>
<div class="limit_width"> <div class="limit_width">
<h3>Database connection statistics</h3>
<table> <table>
<thead>
<tr> <tr>
<td>Name</td> <td>DB Time</td>
<td>Available</td> <td id="db_time"></td>
<td>Max</td> <td>DB Latency</td>
<td>Open</td> <td id="db_latency"></td>
<td>In use</td>
<td>Idle</td>
</tr> </tr>
</thead>
<tbody id="tconnstat_body"></tbody>
</table> </table>
<h3>Pixelstore peers</h3> <h3>Pixelstore peers</h3>
<table> <table>

4
res/template/fragments/page_wrap.html
View File

@@ -15,9 +15,9 @@
{{end}} {{end}}
<hr /> <hr />
<a href="/about">About</a> <a href="/about">About</a>
<!--<a href="/technology">Technology</a>-->
<a href="/api">API</a>
<a href="/appearance">Appearance</a> <a href="/appearance">Appearance</a>
<a href="/api">API</a>
<a href="/acknowledgements">Acknowledgements</a>
</div> </div>
<script> <script>
function toggleMenu() { function toggleMenu() {

2
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -269,7 +269,7 @@ const toggle_select = () => {
} }
.directory :global(.node_icon) { .directory :global(.node_icon) {
height: 32px; height: 32px;
width: auto; width: 32px;
vertical-align: middle; vertical-align: middle;
} }
.directory :global(.node_name) { .directory :global(.node_name) {

249
svelte/src/filesystem/filemanager/FileUploader.svelte
View File

@@ -1,18 +1,18 @@
<script> <script>
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
let dispatch = createEventDispatcher() let dispatch = createEventDispatcher();
export let bucket_id export let bucket_id;
export let target_dir export let target_dir;
let upload_jobs = [] let upload_jobs = [];
let upload_threads = 0 let upload_threads = 0;
let max_upload_threads = 4 let max_upload_threads = 3;
// Adds files to the upload queue. The file_list parameter needs to be of type // Adds files to the upload queue. The file_list parameter needs to be of type
// FileList. Upload will also create the necessary directories to place nested // FileList. Upload will also create the necessary directories to place nested
// files in. // files in.
export const upload = (file_list) => { export const upload = (file_list) => {
for (let i = 0; i < file_list.length; i++) { for (let i = 0; i < file_list.length; i++) {
upload_jobs.push({ upload_jobs.push({
file: file_list[i], file: file_list[i],
@@ -21,103 +21,117 @@ export const upload = (file_list) => {
uploading: false, uploading: false,
finished: false, finished: false,
tries: 0, tries: 0,
}) });
} }
// This updates the UI // This updates the UI
upload_jobs = upload_jobs upload_jobs = upload_jobs;
while (upload_threads < max_upload_threads) { while (upload_threads < max_upload_threads) {
upload_threads++ upload_threads++;
setTimeout(upload_file, 1) setTimeout(upload_file, 1);
} }
} };
const uploads_finished = () => { const uploads_finished = () => {
dispatch("finished") dispatch("finished");
} };
const upload_file = () => { const upload_file = () => {
let job = null let job = null;
for (let i = 0; i < upload_jobs.length; i++) { for (let i = 0; i < upload_jobs.length; i++) {
// If a file is done we remove it from the array // If a file is done we remove it from the array
if (upload_jobs[i].progress >= 1) { if (upload_jobs[i].progress >= 1) {
upload_jobs.splice(i, 1) upload_jobs.splice(i, 1);
continue continue;
} }
if (upload_jobs[i].uploading === false && upload_jobs[i].finished === false) { if (
job = upload_jobs[i] upload_jobs[i].uploading === false &&
job.uploading = true upload_jobs[i].finished === false
upload_jobs = upload_jobs ) {
break job = upload_jobs[i];
job.uploading = true;
upload_jobs = upload_jobs;
break;
} }
} }
if (job === null) { if (job === null) {
upload_threads-- upload_threads--;
if (upload_threads === 0) { if (upload_threads === 0) {
uploads_finished() uploads_finished();
} }
return return;
} }
console.log(job) console.log(job);
let form = new FormData(); let form = new FormData();
form.append("type", "file") form.append("type", "file");
form.append("file", job.file) form.append("file", job.file);
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
xhr.open( xhr.open(
"POST", "POST",
"/api/filesystem/"+bucket_id+encodeURIComponent( "/api/filesystem/" +
job.target_dir+"/"+job.file.name, bucket_id +
), encodeURIComponent(job.target_dir + "/" + job.file.name),
true, true
); );
xhr.timeout = 21600000; // 6 hours, to account for slow connections xhr.timeout = 21600000; // 6 hours, to account for slow connections
// Report progress updates back to the caller // Report progress updates back to the caller
xhr.upload.addEventListener("progress", evt => { xhr.upload.addEventListener("progress", (evt) => {
if (evt.lengthComputable) { if (evt.lengthComputable) {
job.progress = evt.loaded / evt.total job.progress = evt.loaded / evt.total;
upload_jobs = upload_jobs upload_jobs = upload_jobs;
} }
}); });
xhr.onreadystatechange = () => { xhr.onreadystatechange = () => {
// readystate 4 means the upload is done // readystate 4 means the upload is done
if (xhr.readyState !== 4) { return; } if (xhr.readyState !== 4) {
return;
}
if (xhr.status >= 100 && xhr.status < 400) { if (xhr.status >= 100 && xhr.status < 400) {
// Request is a success // Request is a success
// Finish the upload job // Finish the upload job
job.uploading = false job.uploading = false;
job.finished = true job.finished = true;
upload_file() upload_file();
} else if (xhr.status >= 400) { } else if (xhr.status >= 400) {
// Request failed // Request failed
console.log("Upload error. status: " + xhr.status + " response: " + xhr.response); console.log(
"Upload error. status: " +
xhr.status +
" response: " +
xhr.response
);
let resp = JSON.parse(xhr.response); let resp = JSON.parse(xhr.response);
if (job.tries === 3) { // Upload failed if (job.tries === 3) {
return // Upload failed
} else { // Try again return;
} else {
// Try again
job.tries++; job.tries++;
job.uploading = false job.uploading = false;
job.finished = false job.finished = false;
} }
// Sleep the upload thread for 5 seconds // Sleep the upload thread for 5 seconds
setTimeout(upload_file, 5000); setTimeout(upload_file, 5000);
} else { } else {
// Request did not arrive // Request did not arrive
if (job.tries === 3) { // Upload failed if (job.tries === 3) {
alert("upload failed "+xhr.responseText) // Upload failed
job.uploading = false alert("upload failed " + xhr.responseText);
job.finished = false job.uploading = false;
} else { // Try again job.finished = false;
} else {
// Try again
job.tries++; job.tries++;
} }
@@ -125,71 +139,55 @@ const upload_file = () => {
setTimeout(upload_file, 5000); setTimeout(upload_file, 5000);
} }
upload_jobs = upload_jobs upload_jobs = upload_jobs;
}; };
xhr.send(form); xhr.send(form);
} };
// File input dialog handling // File input dialog handling
let file_input let file_input;
export const picker = () => { file_input.click() } export const picker = () => {
const file_input_change = e => { file_input.click();
upload(e.target.files) };
file_input.nodeValue = "" const file_input_change = (e) => {
} upload(e.target.files);
file_input.nodeValue = "";
};
// Drag and drop upload // Drag and drop upload
let hidden = true let hidden = true;
const dragover = e => { hidden = false } const dragover = (e) => {
const dragleave = e => { hidden = true } hidden = false;
const drop = e => { };
hidden = true const dragleave = (e) => {
upload(e.dataTransfer.files) hidden = true;
} };
const paste = e => { const drop = (e) => {
hidden = true;
upload(e.dataTransfer.files);
};
const paste = (e) => {
if (e.clipboardData.files[0]) { if (e.clipboardData.files[0]) {
e.preventDefault() e.preventDefault();
e.stopPropagation() e.stopPropagation();
console.log(e.clipboardData.files[0].getAsFile()) console.log(e.clipboardData.files[0].getAsFile());
} }
} };
</script> </script>
<svelte:body
on:dragover|preventDefault|stopPropagation={dragover}
on:dragleave|preventDefault|stopPropagation={dragleave}
on:drop|preventDefault|stopPropagation={drop}
on:paste={paste}
/>
<div>
<input class="file_input" bind:this={file_input} on:change={file_input_change} type="file" multiple="multiple"/>
<div class:hidden class="highlight_green">
Drop files here to upload them
</div>
{#each upload_jobs as c}
<div class="file_upload">
&nbsp;{c.file.name}&nbsp;<br/>
<div class="upload_progress_bar">
<div class="upload_progress" style="width: {c.progress*100}%"></div>
</div>
</div>
{/each}
</div>
<style> <style>
.hidden {display: none;} .hidden {
display: none;
}
.file_input { .file_input {
display: block; display: block;
visibility: hidden; visibility: hidden;
width: 0; width: 0;
height: 0; height: 0;
} }
.file_upload { .file_upload {
display: block; display: block;
text-align: left; text-align: left;
width: 100%; width: 100%;
@@ -197,14 +195,43 @@ const paste = e => {
padding: 0; padding: 0;
background-color: var(--layer_2_color); background-color: var(--layer_2_color);
box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color); box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color);
} }
.upload_progress_bar { .upload_progress_bar {
width: 100%; width: 100%;
height: 2px; height: 2px;
} }
.upload_progress { .upload_progress {
background-color: var(--highlight_color); background-color: var(--highlight_color);
height: 100%; height: 100%;
} }
</style> </style>
<svelte:body
on:dragover|preventDefault|stopPropagation={dragover}
on:dragleave|preventDefault|stopPropagation={dragleave}
on:drop|preventDefault|stopPropagation={drop}
on:paste={paste} />
<div>
<input
class="file_input"
bind:this={file_input}
on:change={file_input_change}
type="file"
multiple="multiple" />
<div class:hidden class="highlight_green">
Drop files here to upload them
</div>
{#each upload_jobs as c}
<div class="file_upload">
&nbsp;{c.file.name}&nbsp;<br />
<div class="upload_progress_bar">
<div
class="upload_progress"
style="width: {c.progress * 100}%" />
</div>
</div>
{/each}
</div>

68
svelte/src/user_buckets/UserBuckets.svelte
View File

@@ -3,37 +3,81 @@ import { onMount } from "svelte";
import Spinner from "../util/Spinner.svelte"; import Spinner from "../util/Spinner.svelte";
import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte"; import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte";
let loading = true let loading = true;
let buckets = [] let buckets = [];
const get_buckets = async () => { const get_buckets = async () => {
try { try {
let resp = await fs_get_buckets() let resp = await fs_get_buckets();
buckets = resp.buckets buckets = resp.buckets;
} catch (err) { } catch (err) {
alert(err) alert(err);
} finally { } finally {
loading = false loading = false;
} }
};
const expand_bucket = () => {
} }
onMount(get_buckets) onMount(get_buckets);
</script> </script>
<div> <div>
{#if loading} {#if loading}
<div class="spinner_container"><Spinner></Spinner></div> <div class="spinner_container">
<Spinner />
</div>
{/if} {/if}
<div class="limit_width">
{#each buckets as bucket} {#each buckets as bucket}
<a href={"/d/"+bucket.id}>{bucket.name}</a> <a class="bucket_header" href={'/d/' + bucket.id}>
<div class="bucket_title">{bucket.name}</div>
<button class="bucket_expand" on:click|preventDefault={expand_bucket}><i class="icon">expand_more</i></button>
</a>
<div class="bucket_details">
Hello!
</div>
{/each} {/each}
</div>
</div> </div>
<style> <style>
.spinner_container { .spinner_container {
display: inline-block; display: inline-block;
height: 100px; height: 100px;
width: 100px; width: 100px;
} }
.bucket_header {
display: flex;
flex-direction: row;
text-decoration: none;
color: var(--text_color);
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);
}
.bucket_header:hover {
box-shadow: 0 0 2px 2px var(--highlight_color), inset 0 0 1px 1px var(--highlight_color);
color: var(--highlight_color);
text-decoration: none;
}
.bucket_title {
flex: 1 1 auto;
align-self: center;
padding: 0.4em;
}
.bucket_expand {
flex: 0 0 auto;
}
.bucket_details {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--text_color);
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
}
</style> </style>

3
webcontroller/web_controller.go
View File

@@ -108,7 +108,7 @@ func New(
{GET, "api" /* */, wc.serveMarkdown("apidoc.md", false)}, {GET, "api" /* */, wc.serveMarkdown("apidoc.md", false)},
{GET, "history" /* */, wc.serveTemplate("history_cookies", false)}, {GET, "history" /* */, wc.serveTemplate("history_cookies", false)},
{GET, "u/:id" /* */, wc.serveFileViewer}, {GET, "u/:id" /* */, wc.serveFileViewer},
{GET, "u/:id/preview" /**/, wc.serveFilePreview}, {GET, "u/:id/preview" /* */, wc.serveFilePreview},
{GET, "l/:id" /* */, wc.serveListViewer}, {GET, "l/:id" /* */, wc.serveListViewer},
{GET, "s/:id" /* */, wc.serveSkynetViewer}, {GET, "s/:id" /* */, wc.serveSkynetViewer},
{GET, "t" /* */, wc.serveTemplate("text_editor", false)}, {GET, "t" /* */, wc.serveTemplate("text_editor", false)},
@@ -119,6 +119,7 @@ func New(
{GET, "appearance" /* */, wc.serveTemplate("appearance", false)}, {GET, "appearance" /* */, wc.serveTemplate("appearance", false)},
{GET, "hosting" /* */, wc.serveMarkdown("hosting.md", false)}, {GET, "hosting" /* */, wc.serveMarkdown("hosting.md", false)},
{GET, "brave" /* */, wc.serveMarkdown("brave.md", false)}, {GET, "brave" /* */, wc.serveMarkdown("brave.md", false)},
{GET, "acknowledgements" /**/, wc.serveMarkdown("acknowledgements.md", false)},
// User account pages // User account pages
{GET, "register" /* */, wc.serveForm(wc.registerForm, false)}, {GET, "register" /* */, wc.serveForm(wc.registerForm, false)},