From 9f13e19e60d0067e8bee2a46f3ee3488c4501f40 Mon Sep 17 00:00:00 2001
From: maiquocthinh <majquocthjnh@gmail.com>
Date: Fri, 30 Jun 2023 19:13:58 +0700
Subject: [PATCH] feat: done ui

---
 src/page/favicon.ico | Bin 0 -> 15406 bytes
 src/page/home.html   | 117 +++++++++++++++++++++++++++++++++
 src/page/script.js   | 149 +++++++++++++++++++++++++++++++++++++++++++
 src/page/style.css   | 148 ++++++++++++++++++++++++++++++++++++++++++
 src/routes/home.ts   |  11 ++--
 wrangler.toml        |   3 +
 6 files changed, 422 insertions(+), 6 deletions(-)
 create mode 100644 src/page/favicon.ico
 create mode 100644 src/page/home.html
 create mode 100644 src/page/script.js
 create mode 100644 src/page/style.css

diff --git a/src/page/favicon.ico b/src/page/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..71db39577688436365d1a23791c769a84c71373f
GIT binary patch
literal 15406
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

literal 0
HcmV?d00001

diff --git a/src/page/home.html b/src/page/home.html
new file mode 100644
index 0000000..a34c8b2
--- /dev/null
+++ b/src/page/home.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+            integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        />
+        <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+        <link rel="stylesheet" href="./style.css" />
+        <title>Get Link</title>
+    </head>
+    <body>
+        <div class="container">
+            <h1>Get Link Terabox</h1>
+            <div class="form-group">
+                <label for="input-url">Enter URL:</label>
+                <input type="text" id="input-url" placeholder="https://terabox.com/s/117NfiRSK_e4ImEEDqQGh_g" />
+            </div>
+            <div class="form-group">
+                <button id="get-link-button">Get Link</button>
+            </div>
+            <div class="output">
+                <div class="tree-view"></div>
+            </div>
+        </div>
+
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"
+            integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        ></script>
+        <script src="./script.js"></script>
+        <script>
+            function fetchDownload({ shareid, uk, sign, timestamp, fs_id }) {
+                return fetch("/api/get-download", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ shareid, uk, sign, timestamp, fs_id }),
+                }).then(async function (res) {
+                    return await res.json()
+                })
+            }
+
+            function fetchInfo(shortUrl){
+                return fetch("/api/get-info?shorturl=" + shortUrl).then(async function (res) {
+                        const body = await res.json()
+
+                        if (!body.ok) return alert(body.message)
+
+                        // handle Info
+                        function recursiveList(list) {
+                            return list.map((item) => ({
+                                isDir: item.is_dir != 0,
+                                name: item.filename,
+                                category: item.is_dir != 0 || parseInt(item.category),
+                                size: item.is_dir != 0 || formatStorageSize(parseInt(item.size)),
+                                children:
+                                    item.children && item.children.length > 0
+                                        ? recursiveList(item.children)
+                                        : undefined,
+                                downloadAction:
+                                    item.is_dir != 0 ||
+                                    async function () {
+                                        const res = await fetchDownload({
+                                            shareid: body.shareid,
+                                            uk: body.uk,
+                                            sign: body.sign,
+                                            timestamp: body.timestamp,
+                                            fs_id: item.fs_id,
+                                        })
+
+                                        if (!res.ok) return alert(res.message)
+
+                                        window.open(res.downloadLink, '_blank')
+                                    },
+                            }))
+                        }
+
+                        return recursiveList(body.list)
+                    })
+
+            }
+
+            const getLinkButton = document.getElementById("get-link-button")
+            const inputUrl = document.getElementById("input-url")
+            const treeViewElement = document.querySelector(".tree-view")
+
+            getLinkButton.addEventListener("click", async function () {
+                const url = inputUrl.value
+
+                if(!url) return alert('Url must not empty!!')
+
+                const regex = /\/([A-Za-z0-9_-]+)$/
+                const match = url.match(regex)
+                if (match) {
+                    const shortUrl = match[1]
+
+                    treeViewElement.innerHTML = '<p style="text-align:center;">Loading...</p>'
+                    
+                    const d = await fetchInfo(shortUrl)
+                    
+                    treeViewElement.innerHTML = ''
+                    
+                    TreeView(d, treeViewElement)
+                } else {
+                    alert("URL not support")
+                }
+            })
+        </script>
+    </body>
+</html>
diff --git a/src/page/script.js b/src/page/script.js
new file mode 100644
index 0000000..c673257
--- /dev/null
+++ b/src/page/script.js
@@ -0,0 +1,149 @@
+const TreeView = (function () {
+    function render(data, rootList) {
+        for (const item of data) {
+            if (item.isDir) {
+                // create <li class="folder">
+                const li = document.createElement("li")
+                li.className = "folder"
+                li.setAttribute("opened", "true")
+
+                // create <div class="folder-header">
+                const folderHeaderDiv = document.createElement("div")
+                folderHeaderDiv.className = "folder-header"
+                folderHeaderDiv.innerHTML = `<span class="icon-arrow">
+                                                <i class="fa-solid fa-caret-right hidden"></i>
+                                                <i class="fa-solid fa-caret-down"></i>
+                                            </span>
+                                            <span class="icon-folder">
+                                                <i class="fa-solid fa-folder hidden"></i>
+                                                <i class="fa-solid fa-folder-open"></i>
+                                            </span>
+                                            <span class="folder-name">${item.name}</span>`
+
+                // append <ul class="children"> to <li class="folder">
+                li.appendChild(folderHeaderDiv)
+
+                // If the folder has children, recursively render them
+                if (item.children && item.children.length > 0) {
+                    // create <ul class="children">
+                    const childrenUl = document.createElement("ul")
+                    childrenUl.className = "children"
+                    // recursively render
+                    render(item.children, childrenUl)
+                    // append <ul class="children"> to <li class="folder">
+                    li.appendChild(childrenUl)
+                }
+
+                // append to rootList
+                rootList.appendChild(li)
+            } else {
+                // create <li class="file">
+                const li = document.createElement("li")
+                li.className = "file"
+
+                li.innerHTML = `<i class="fa-solid ${getFileIcon(item.category)}"></i>
+                                <span class="file-name">${item.name}</span>
+                                <span class="file-size">${item.size}</span>`
+
+                // create <button class="file-download">
+                const fileDownloadBtn = document.createElement("button")
+                fileDownloadBtn.className = "file-download"
+                fileDownloadBtn.innerHTML = '<i class="fa-solid fa-download"></i>'
+                fileDownloadBtn.onclick = item.downloadAction
+
+                // append fileDownloadBtn to li
+                li.appendChild(fileDownloadBtn)
+
+                // append li to rootList
+                rootList.appendChild(li)
+            }
+        }
+    }
+
+    function getFileIcon(category) {
+        switch (category) {
+            case 1:
+                return "fa-file-video"
+            case 2:
+                return "fa-file-audio"
+            case 3:
+                return "fa-file-image"
+            case 4:
+                return "fa-file-lines"
+            default:
+                return "fa-file"
+        }
+    }
+
+    function binding() {
+        const listFuncs = []
+        const listElms = []
+
+        const folderHeaders = document.querySelectorAll(".folder-header")
+        folderHeaders.forEach(function (folderHeader) {
+            const parent = folderHeader.parentNode
+            const children = parent.querySelector(".children")
+            const iconArrow = folderHeader.querySelector(".icon-arrow")
+            const iconFolder = folderHeader.querySelector(".icon-folder")
+            if (!!children) {
+                function cb() {
+                    const isOpen = parent.getAttribute("opened") == "true"
+                    parent.setAttribute("opened", !isOpen)
+                    children.classList.toggle("hidden", isOpen)
+                    iconArrow.querySelector(".fa-caret-right").classList.toggle("hidden", !isOpen)
+                    iconArrow.querySelector(".fa-caret-down").classList.toggle("hidden", isOpen)
+                    iconFolder.querySelector(".fa-folder").classList.toggle("hidden", !isOpen)
+                    iconFolder.querySelector(".fa-folder-open").classList.toggle("hidden", isOpen)
+                }
+                folderHeader.addEventListener("click", cb)
+                listFuncs.push(cb)
+                listElms.push(folderHeader)
+            } else {
+                iconArrow.classList.add("hidden")
+            }
+        })
+
+        return function unbinding() {
+            for (let index = 0; index < listFuncs.length; index++) {
+                const func = listFuncs[index]
+                const elm = listElms[index]
+                elm.removeEventListener("click", func)
+            }
+        }
+    }
+
+    let unbinding = function () {}
+
+    return function (data, treeViewElement) {
+        // remove event listener & clear treeViewElement
+        unbinding()
+        treeViewElement.innerHTML = ""
+
+        // create rootList
+        const rootList = document.createElement("ul")
+        rootList.className = "root"
+
+        // render tree view
+        render(data, rootList)
+
+        // append rootList to treeView
+        treeViewElement.appendChild(rootList)
+
+        // binding
+        unbinding = binding()
+    }
+})()
+
+function formatStorageSize(bytes) {
+    const KB = 1024
+    const MB = KB * 1024
+    const GB = MB * 1024
+
+    if (bytes >= GB) {
+        const gigabytes = bytes / GB
+        return gigabytes.toFixed(2) + "GB"
+    } else {
+        const megabytes = bytes / MB
+        return megabytes.toFixed(2) + "MB"
+    }
+}
diff --git a/src/page/style.css b/src/page/style.css
new file mode 100644
index 0000000..7c011d0
--- /dev/null
+++ b/src/page/style.css
@@ -0,0 +1,148 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Roboto Mono", monospace;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+}
+h1:hover {
+    color: rgb(0, 125, 125);
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    color: #555;
+}
+
+.form-group input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    outline-color: darkcyan;
+}
+
+.form-group input[type="text"]::-webkit-input-placeholder {
+    font-family: "Roboto Mono", monospace;
+}
+
+.form-group button {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: rgb(0, 125, 125);
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.form-group button:hover {
+    background-color: rgb(1, 144, 144);
+}
+
+.output {
+    background-color: #fff;
+    padding: 0 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    min-height: 40px;
+}
+
+/* Tree View */
+
+.hidden {
+    display: none;
+}
+
+.tree-view {
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.tree-view ul {
+    list-style-type: none;
+    padding-left: 20px;
+}
+
+.tree-view li {
+    position: relative;
+}
+
+.tree-view .folder-header {
+    position: relative;
+    cursor: pointer;
+}
+.tree-view .folder-header .icon-arrow {
+    position: absolute;
+    left: -12px;
+}
+
+.tree-view .folder .folder-header,
+.tree-view .file {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-radius: 4px;
+}
+
+.tree-view .folder .folder-header:hover,
+.tree-view .file:hover {
+    background-color: #ccc;
+}
+
+.tree-view .file .file-name {
+    flex-grow: 1;
+}
+
+.tree-view .file .file-size {
+    color: white;
+    font-size: 12px;
+    margin-left: 10px;
+    display: inline-block;
+    background-color: darkcyan;
+    padding: 2px 8px;
+    border-radius: 12px;
+    min-width: 70px;
+    text-align: center;
+}
+.tree-view .file .file-download {
+    border: none;
+    border-radius: 4px;
+    padding: 2px 8px;
+    cursor: pointer;
+}
+.tree-view .fa-folder-open,
+.tree-view .fa-folder,
+.tree-view .fa-file,
+.tree-view .fa-file-video,
+.tree-view .fa-file-audio,
+.tree-view .fa-file-image,
+.tree-view .fa-file-lines,
+.tree-view .fa-download {
+    color: darkcyan;
+}
+.tree-view .fa-folder,
+.tree-view .fa-file {
+    min-width: 16px;
+}
diff --git a/src/routes/home.ts b/src/routes/home.ts
index 9fb9403..cb94243 100644
--- a/src/routes/home.ts
+++ b/src/routes/home.ts
@@ -1,11 +1,10 @@
-import { Context, Hono } from "hono"
+import { Hono } from "hono"
+import { serveStatic } from "hono/cloudflare-workers"
 
 const home = new Hono()
 
-home.get("/", (c: Context) => {
-    console.log(c.env.API_TOKEN)
-
-    return c.json({ ok: true, message: "Home" })
-})
+home.get("/", serveStatic({ root: "./", path: "./home.html" }))
+home.use("/favicon.ico", serveStatic({ path: "./favicon.ico" }))
+home.get("/*", serveStatic({ root: "./" }))
 
 export default home
diff --git a/wrangler.toml b/wrangler.toml
index 67993b8..8319414 100644
--- a/wrangler.toml
+++ b/wrangler.toml
@@ -1,6 +1,9 @@
 name = "terabox-dl"
 compatibility_date = "2023-01-01"
 
+[site]
+bucket = "./src/page"
+
 [vars]
 JS_TOKEN = "5FC6A38CA91FF9C62C03B21E601F4AE347C1EFBEE091C299D3F556F69D526FE85A6F2FFBFE1CF32CCA2734F337E20E6F1C6A5E085004657CBB16B26FC9804C7D"
 DP_LOGID = "92644000694221630014"