wip static files manager

admin-frontend/src/components/manage-files-form.js

@@ -2,30 +2,134 @@
 
 const { fetch_post_file } = require("../xhr");
 
-class ManageFilesForm {
-    constructor(params) {
-        this.params = params;
+class FilesIndexView {
+    constructor(index) {
+        this.index = index;
+        this.show_category = Object.keys(this.index)[0];
+        this.id = "files-index-view";
     }
 
-    render_index_view() {
-        return {
-            tag: "div",
-            contents: Object.entries(this.params.files_index).map(entry => {
-                const [category, urls] = entry;
+    get_files_list_style(category) {
+        const base_style = {
+            listStyleType: "none",
+            margin: 0,
+            padding: 0,
+            overflow: "auto",
+            height: "300px",
+        };
+
+        switch (category) {
+            case "images":
                 return {
-                    tag: "div",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: "5px",
+                    ...base_style,
+                }
+            case "sounds":
+                return base_style // TMP
+            default:
+                return base_style
+        }
+    }
+
+    get_item_view(item) {
+        switch (this.show_category) {
+            case "images":
+                return {
+                    tag: "a",
+                    href: item,
+                    target: "_blank",
+                    style_rules: {
+                        backgroundImage: `url(${item})`,
+                        backgroundRepeat: "no-repeat",
+                        backgroundSize: "cover",
+                        backgroundPosition: "center",
+                        width: "100px",
+                        height: "100px",
+                        display: "block"
+                    }
+                }
+            case "sounds":
+                return {
+                    tag: "a",
+                    href: item,
+                    target: "_blank",
                     contents: [
                         {
-                            tag: "h3",
-                            contents: category
+                            tag: "audio",
+                            src: item
                         }
-                    ].concat(urls.map(url => {
-                        return { tag: "div", contents: url }
-                    }))
+                    ]
+                }
+            default:
+                return {
+                    tag: "a",
+                    href: item,
+                    target: "_blank",
+                    contents: item
                 }
-            })
         }
+    }
 
+    refresh() {
+        obj2htm.subRender(this.render(), document.getElementById(this.id), { mode: "replace" })
+    }
+
+    render() {
+        return {
+            tag: "div",
+            id: this.id,
+            contents: [
+                {
+                    tag: "ul",
+                    style_rules: {
+                        display: "flex",
+                        listStyleType: "none",
+                        margin: 0,
+                        padding: 0,
+                    },
+                    contents: Object.keys(this.index).map(cat => {
+                        return {
+                            tag: "li",
+                            style_rules: {
+                                cursor: "pointer",
+                                fontWeight: "bold",
+                                padding: "20px",
+                                border: cat === this.show_category ? "1px solid black" : "none"
+                            },
+                            contents: cat,
+                            onclick: () => {
+                                this.show_category = cat;
+                                this.refresh();
+                            }
+                        }
+                    })
+                },
+                {
+                    tag: "ul",
+                    style_rules: this.get_files_list_style(this.show_category),
+                    contents: this.index[this.show_category].map(item => {
+                        return {
+                            tag: "li",
+                            contents: [
+                                this.get_item_view(item)
+                            ]
+                        }
+                    }),
+                }
+            ]
+        }
+    }
+}
+
+class ManageFilesForm {
+    constructor(params) {
+        this.params = params;
+    }
+
+    render_index_view() {
+        return new FilesIndexView(this.params.files_index).render()
     }
 
     render() {