File manager frontend

2023-05-15 16:37:03 +03:00
parent 851229ce9b
commit db900d6a33
11 changed files with 215 additions and 37 deletions
@@ -0,0 +1,38 @@
+import { Accessor, Component, createResource, JSXElement } from "solid-js";
+import { apiHost } from "../consts";
+
+export const FileContent: Component<{getFileName: Accessor<string>}> = (props) => {
+    const fetchFileContent = async (fileName: string) => {
+        if (fileName === "") return;
+        await new Promise(resolve => setTimeout(resolve, 500))
+        const response = await fetch(`${apiHost}/api/show/file/${fileName}`);
+        const text = await response.text();
+        return text;
+    }
+
+    const [contentResource] = createResource(props.getFileName, fetchFileContent);
+    
+    return (
+        <div>
+            { contentResource.loading && (
+                <div>
+                    <span class="spinner"></span>
+                    <span style={{ "padding-left": "16px" }}>load content</span>
+                </div>
+            )}
+            { contentResource.error && (
+                <div>Error while loading file content: ${contentResource.error}</div>
+            )}
+            { contentResource() && (
+                <div>{splitLines(contentResource())}</div>
+            )}
+        </div>
+    )
+}
+
+function splitLines(str?: string): JSXElement {
+    const lines = str?.split("<br/>") ?? ["empty..."]
+    return lines.map(line =>
+        <div>{line}</div>
+    );
+}