FileAPI + Frontend

fileControlPanel/src/elements/file-browser.js

@@ -0,0 +1,60 @@
+import * as React from "react";
+
+export class FileBrowser extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            files: props.files,
+        }
+    }
+
+    formatSize(size) {
+        const suffixes = ["B","KiB","MiB","GiB","TiB"];
+        let i = 0;
+        for (; i < suffixes.length && size >= 1024; i++) {
+            size /= 1024.0;
+        }
+
+        return size.toFixed(1) + " " + suffixes[i];
+    }
+
+    render() {
+        
+        let rows = [];
+        for (const [uid, fileElement] of Object.entries(this.state.files)) {
+            let name = fileElement.name;
+            let type = (fileElement.directory ? "Directory" : fileElement.mimeType);
+            let size = (fileElement.directory ? "" : fileElement.size)
+            // let iconUrl = (fileElement.directory ? "/img/icon/")
+            let iconUrl = "";
+
+            rows.push(
+                <tr key={"file-" + uid}>
+                    <td><img src={iconUrl} alt={"[Icon]"} /></td>
+                    <td>{name}</td>
+                    <td>{type}</td>
+                    <td>{this.formatSize(size)}</td>
+                </tr>
+            );
+        }
+
+        return <>
+            <h4>File Browser</h4>
+            <table className={"table"}>
+                <thead>
+                    <tr>
+                        <th/>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Size</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    { rows }
+                </tbody>
+            </table>
+        </>;
+    }
+}

fileControlPanel/src/elements/icon.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+export default function Icon(props) {
+
+    let classes = props.className || [];
+    classes = Array.isArray(classes) ? classes : classes.toString().split(" ");
+    let type = props.type || "fas";
+    let icon = props.icon;
+
+    classes.push(type);
+    classes.push("fa-" + icon);
+
+    if (icon === "spinner" || icon === "circle-notch") {
+        classes.push("fa-spin");
+    }
+
+    let newProps = {...props, className: classes.join(" ") };
+    delete newProps["type"];
+    delete newProps["icon"];
+
+    return (
+        <i {...newProps} />
+    );
+}

fileControlPanel/src/elements/token-list.js

@@ -0,0 +1,49 @@
+import * as React from "react";
+
+export class TokenList extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            api: props.api,
+            tokens: null
+        }
+    }
+
+    render() {
+
+        let rows = [];
+        if (this.state.tokens === null) {
+            this.state.api.listTokens().then((res) => {
+                this.setState({ ...this.state, tokens: res.tokens });
+            });
+        } else {
+            for (const token of this.state.tokens) {
+                rows.push(
+                    <tr key={"token-" + token.uid}>
+                        <td>{token.token}</td>
+                        <td>{token.type}</td>
+                        <td>{token.valid_until}</td>
+                    </tr>
+                );
+            }
+        }
+
+        return <>
+            <h4>Tokens</h4>
+            <table className={"table"}>
+                <thead>
+                    <tr>
+                        <th>Token</th>
+                        <th>Type</th>
+                        <th>Valid Until</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    { rows }
+                </tbody>
+            </table>
+        </>;
+    }
+}