up

Paused

App Files Files Community

semuthitamku commited on Sep 6

Commit

7c3fa30

verified ·

1 Parent(s): 5058376

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +31 -7

public/index.html CHANGED Viewed

@@ -26,7 +26,7 @@
     .bread a { color: var(--link); text-decoration:none; }
     .bread span.sep { margin: 0 6px; color: var(--muted); }
     main { padding:18px 20px; max-width:1100px; margin:auto; }
-    .bar { display:flex; gap:8px; flex-wrap: wrap; margin-bottom:12px; }
     .bar input[type="text"] { background:var(--panel-alt); color:var(--txt);
       border:1px solid var(--border); border-radius:8px; padding:8px 10px; min-width: 220px; }
     .btn { background:var(--btn-bg); color:var(--txt); border:1px solid var(--border2);
@@ -42,19 +42,19 @@
     tbody tr:hover { background:var(--panel-alt); }
     .name { display:flex; align-items:center; gap:10px; }
     .name a { color: var(--txt); text-decoration:none; }
-    .muted { color: var(--muted); }
     .right { text-align:right; }
     .actions { display:flex; gap:6px; }
     .chip { font-size:12px; color:#0f172a; background:#a7f3d0; padding:2px 8px; border-radius:999px; }
     footer { color: var(--muted); text-align:center; padding:12px; font-size:12px; }
-    .flex-gap { display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
     .spacer { flex:1; }
     .hidden { display:none; }
     .note { font-size:12px; color:var(--muted); }
-    .checkbox { width:18px; height:18px; }
     .icon { width:18px; text-align:center; }
     .toast { position:fixed; right:16px; bottom:16px; background:var(--panel); border:1px solid var(--border2);
       padding:10px 12px; border-radius:8px; color:var(--txt); box-shadow:var(--shadow); }
   </style>
 </head>
 <body class="theme-dark">
@@ -71,6 +71,8 @@
       <input type="text" id="urlInput" placeholder="https://contoh.com/file.tgz" />
       <input type="text" id="filenameInput" placeholder="Nama file (opsional)" />
       <button class="btn pri" id="fetchBtn">Save dari URL</button>
       <input type="file" id="fileInput" multiple />
       <button class="btn" id="uploadBtn">Upload</button>
@@ -119,6 +121,8 @@
     const urlInput = document.getElementById("urlInput");
     const filenameInput = document.getElementById("filenameInput");
     const fetchBtn = document.getElementById("fetchBtn");
     const fileInput = document.getElementById("fileInput");
     const uploadBtn = document.getElementById("uploadBtn");
     const newFolderBtn = document.getElementById("newFolderBtn");
@@ -181,6 +185,14 @@
       history.replaceState(null, "", url);
       load();
     }
     async function load() {
       const res = await fetch(`/api/list?path=${encodeURIComponent(currentPath)}`);
@@ -189,6 +201,7 @@
     }
     function render(data) {
       breadcrumb.innerHTML = "";
       data.breadcrumb.forEach((c, idx) => {
         const a = document.createElement("a");
@@ -204,6 +217,7 @@
         }
       });
       tbody.innerHTML = "";
       if (!data.items.length) emptyState.classList.remove("hidden"); else emptyState.classList.add("hidden");
@@ -287,7 +301,7 @@
           unzipBtn.className = "btn warn";
           unzipBtn.textContent = "Unarchive";
           unzipBtn.onclick = async () => {
-            const defaultName = item.name.replace(/(\.tar\.gz|\.tgz|\.zip|\.tar)$/i, "");
             const destDefault = `${currentPath ? currentPath + "/" : ""}${defaultName}`;
             const dest = prompt("Extract ke folder (opsional):", destDefault);
             const body = dest ? { zipPath: item.relPath, destDir: dest } : { zipPath: item.relPath };
@@ -352,8 +366,15 @@
       const url = urlInput.value.trim();
       const filename = filenameInput.value.trim();
       if (!url) return showToast("URL kosong");
-      const body = { url, destDir: currentPath };
       if (filename) body.filename = filename;
       const res = await fetch("/api/fetch-url", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -361,7 +382,10 @@
       });
       const j = await res.json();
       if (!res.ok) return showToast(j.error || "Gagal download dari URL");
-      showToast("Berhasil diunduh ke folder ini");
       urlInput.value = ""; filenameInput.value = "";
       load();
     };

     .bread a { color: var(--link); text-decoration:none; }
     .bread span.sep { margin: 0 6px; color: var(--muted); }
     main { padding:18px 20px; max-width:1100px; margin:auto; }
+    .bar { display:flex; gap:8px; flex-wrap: wrap; margin-bottom:12px; align-items:center; }
     .bar input[type="text"] { background:var(--panel-alt); color:var(--txt);
       border:1px solid var(--border); border-radius:8px; padding:8px 10px; min-width: 220px; }
     .btn { background:var(--btn-bg); color:var(--txt); border:1px solid var(--border2);
     tbody tr:hover { background:var(--panel-alt); }
     .name { display:flex; align-items:center; gap:10px; }
     .name a { color: var(--txt); text-decoration:none; }
+    .muted { color:var(--muted); }
     .right { text-align:right; }
     .actions { display:flex; gap:6px; }
     .chip { font-size:12px; color:#0f172a; background:#a7f3d0; padding:2px 8px; border-radius:999px; }
     footer { color: var(--muted); text-align:center; padding:12px; font-size:12px; }
     .spacer { flex:1; }
     .hidden { display:none; }
     .note { font-size:12px; color:var(--muted); }
+    .checkbox { width:18px; height:18px; vertical-align: middle; }
     .icon { width:18px; text-align:center; }
     .toast { position:fixed; right:16px; bottom:16px; background:var(--panel); border:1px solid var(--border2);
       padding:10px 12px; border-radius:8px; color:var(--txt); box-shadow:var(--shadow); }
+    label.inline { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
   </style>
 </head>
 <body class="theme-dark">
       <input type="text" id="urlInput" placeholder="https://contoh.com/file.tgz" />
       <input type="text" id="filenameInput" placeholder="Nama file (opsional)" />
       <button class="btn pri" id="fetchBtn">Save dari URL</button>
+      <label class="inline"><input type="checkbox" id="autoExtract" class="checkbox" checked /> Auto extract</label>
+      <label class="inline"><input type="checkbox" id="removeArchive" class="checkbox" /> Hapus arsip</label>
       <input type="file" id="fileInput" multiple />
       <button class="btn" id="uploadBtn">Upload</button>
     const urlInput = document.getElementById("urlInput");
     const filenameInput = document.getElementById("filenameInput");
     const fetchBtn = document.getElementById("fetchBtn");
+    const autoExtractEl = document.getElementById("autoExtract");
+    const removeArchiveEl = document.getElementById("removeArchive");
     const fileInput = document.getElementById("fileInput");
     const uploadBtn = document.getElementById("uploadBtn");
     const newFolderBtn = document.getElementById("newFolderBtn");
       history.replaceState(null, "", url);
       load();
     }
+    function stripArchiveExt(name) {
+      const lower = String(name).toLowerCase();
+      if (lower.endsWith(".tar.gz")) return name.slice(0, -7);
+      if (lower.endsWith(".tgz")) return name.slice(0, -4);
+      if (lower.endsWith(".zip")) return name.slice(0, -4);
+      if (lower.endsWith(".tar")) return name.slice(0, -4);
+      return name;
+    }
     async function load() {
       const res = await fetch(`/api/list?path=${encodeURIComponent(currentPath)}`);
     }
     function render(data) {
+      // Breadcrumb
       breadcrumb.innerHTML = "";
       data.breadcrumb.forEach((c, idx) => {
         const a = document.createElement("a");
         }
       });
+      // Rows
       tbody.innerHTML = "";
       if (!data.items.length) emptyState.classList.remove("hidden"); else emptyState.classList.add("hidden");
           unzipBtn.className = "btn warn";
           unzipBtn.textContent = "Unarchive";
           unzipBtn.onclick = async () => {
+            const defaultName = stripArchiveExt(item.name);
             const destDefault = `${currentPath ? currentPath + "/" : ""}${defaultName}`;
             const dest = prompt("Extract ke folder (opsional):", destDefault);
             const body = dest ? { zipPath: item.relPath, destDir: dest } : { zipPath: item.relPath };
       const url = urlInput.value.trim();
       const filename = filenameInput.value.trim();
       if (!url) return showToast("URL kosong");
+      const body = {
+        url,
+        destDir: currentPath,
+        autoExtract: autoExtractEl.checked,
+        removeArchive: removeArchiveEl.checked
+      };
       if (filename) body.filename = filename;
       const res = await fetch("/api/fetch-url", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
       });
       const j = await res.json();
       if (!res.ok) return showToast(j.error || "Gagal download dari URL");
+      if (j.extractedTo) showToast(`Diunduh & diextract ke: ${j.extractedTo}`);
+      else showToast("Berhasil diunduh ke folder ini");
       urlInput.value = ""; filenameInput.value = "";
       load();
     };