Navigation, creation and removal of bookmarks/folders

static/js/mainpage.js

@@ -2,53 +2,73 @@ if (!localStorage.getItem("SessionID")) {
   window.location.href = "/login.html";
 }
 
+const Q = (selector) => document.querySelector(selector);
+
 window.addEventListener("load", async () => {
-  console.log("loading...");
-  const rootFolder = await getFolder();
-  const bm = document.getElementById("bookmarks");
-  if (!rootFolder.success) {
-    bm.textContent = "Нет закладок";
-    return;
-  }
-  if (!bookmark || !folder) {
-    return;
-  }
-  for (let f of rootFolder.folder.ChildFolders) {
-    const clone = createFolderElement(f);
-    bm.appendChild(clone);
-  }
-  for (let b of rootFolder.folder.ChildBookmarks) {
-    const clone = createBookmarkElement(b);
-    bm.appendChild(clone);
-  }
-  feather.replace();
+  await refreshFolder();
 });
 
+function mapFolder(folder, element) {
+  element.innerHTML = "";
+  if (folder.Folder.Name != "root") {
+    document.getElementById("title").textContent = folder.Folder.Name;
+    const uplevel = {
+      id: folder.Folder.ParentID,
+      Name: "Go back",
+      Persistent: true,
+    };
+    const clone = createFolderElement(uplevel);
+    element.appendChild(clone);
+  } else {
+    document.getElementById("title").textContent = "Dashboard Prototype";
+  }
+  for (let f of folder.ChildFolders) {
+    const clone = createFolderElement(f);
+    element.appendChild(clone);
+  }
+  for (let b of folder.ChildBookmarks) {
+    const clone = createBookmarkElement(b);
+    element.appendChild(clone);
+  }
+  element.appendChild(newFolderItem(folder));
+  element.appendChild(newBookmarkItem(folder));
+  feather.replace();
+}
+
 function createFolderElement(folder) {
-  const template = document.querySelector("#folder");
+  const template = Q("#folder");
   const clone = template.content.firstElementChild.cloneNode(true);
   clone.querySelector("#folder_name").textContent = folder.Name;
-  clone.addEventListener("click", () => {
-    alert(folder.Name);
+  clone.addEventListener("click", async () => {
+    console.log(folder);
+    const newFolder = await getFolder(folder.id);
+    mapFolder(newFolder.folder, document.getElementById("bookmarks"));
   });
   for (let el of clone.querySelectorAll("[data-feather-t]")) {
     el.setAttribute("data-feather", el.getAttribute("data-feather-t"));
   }
-  clone.querySelector(".xmark").addEventListener("click", (e) => {
-    alert(`${folder.Name} was deleted`);
-    e.stopPropagation();
-  });
+  if (folder.Persistent) {
+    clone.querySelector(".xmark").remove();
+  } else {
+    clone.querySelector(".xmark").addEventListener("click", async (e) => {
+      e.stopPropagation();
+      await delFolder(folder);
+    });
+  }
   return clone;
 }
 
 function createBookmarkElement(bookmark) {
-  const template = document.querySelector("#bookmark");
-  const tagtempl = document.querySelector("#booktag");
+  const template = Q("#bookmark");
+  const tagtempl = Q("#booktag");
   const clone = template.content.firstElementChild.cloneNode(true);
   clone.querySelector("#bookmark_name").textContent = bookmark.Name;
   const link = clone.querySelector("#bookmark_link");
   link.setAttribute("href", bookmark.Url);
   link.textContent = bookmark.Url;
+  clone.addEventListener("click", async () => {
+    window.location.href = bookmark.Url;
+  });
   for (let tag of bookmark.Tags) {
     const t = tagtempl.content.cloneNode(true);
     const el = t.querySelector("span");
@@ -59,9 +79,111 @@ function createBookmarkElement(bookmark) {
   for (let el of clone.querySelectorAll("[data-feather-t]")) {
     el.setAttribute("data-feather", el.getAttribute("data-feather-t"));
   }
-  clone.querySelector(".xmark").addEventListener("click", (e) => {
-    alert(`${bookmark.Name} was deleted`);
+  clone.querySelector(".xmark").addEventListener("click", async (e) => {
     e.stopPropagation();
+    await delBookmark(bookmark);
   });
   return clone;
 }
+
+function newFolderItem(folder) {
+  const template = document.getElementById("newFolder");
+  const clone = template.content.firstElementChild.cloneNode(true);
+  clone.addEventListener("click", () => {
+    const folderForm = document.getElementById("folder_form");
+    const el = folderForm.content.firstElementChild.cloneNode(true);
+    el.querySelector("form").setAttribute("folderid", folder.Folder.id);
+    const m = Q("#modal");
+    m.appendChild(el);
+    m.classList.add("show");
+
+    // console.log("New folder called for " + folder.Folder.Name);
+  });
+  for (let el of clone.querySelectorAll("[data-feather-t]")) {
+    el.setAttribute("data-feather", el.getAttribute("data-feather-t"));
+  }
+  return clone;
+}
+
+function newBookmarkItem(folder) {
+  const template = document.getElementById("newBookmark");
+  const clone = template.content.firstElementChild.cloneNode(true);
+  clone.addEventListener("click", () => {
+    const bookmarkForm = document.getElementById("bookmark_form");
+    const el = bookmarkForm.content.firstElementChild.cloneNode(true);
+    el.querySelector("form").setAttribute("folderid", folder.Folder.id);
+    const m = Q("#modal");
+    m.appendChild(el);
+    m.classList.add("show");
+  });
+  for (let el of clone.querySelectorAll("[data-feather-t]")) {
+    el.setAttribute("data-feather", el.getAttribute("data-feather-t"));
+  }
+  return clone;
+}
+
+function closeModal(event) {
+  const m = Q("#modal");
+  if (event) if (event.target != m) return;
+  m.classList.remove("show");
+  m.innerHTML = "";
+}
+
+async function newFolder(event) {
+  event.preventDefault();
+  const form = event.target;
+  const parentID = form.getAttribute("folderid");
+  const name = form.querySelector("#folder_name").value;
+  console.log(name);
+  const result = await createFolder(parentID, name);
+  if (result.success) {
+    await refreshFolder(parentID);
+    closeModal();
+  }
+}
+
+async function newBookmark(event) {
+  event.preventDefault();
+  const form = event.target;
+  const parentID = form.getAttribute("folderid");
+  const name = form.querySelector("#bookmark_name").value;
+  const url = form.querySelector("#bookmark_url").value;
+  const tags = form.querySelector("#bookmark_tags").value.split(",");
+  console.log(name);
+  const result = await createBookmark(parentID, {
+    Name: name,
+    Url: url,
+    FolderID: parentID,
+    Tags: tags,
+  });
+  if (result.success) {
+    await refreshFolder(parentID);
+    closeModal();
+  }
+}
+
+async function refreshFolder(id) {
+  const folder = await getFolder(id);
+  const bm = document.getElementById("bookmarks");
+  if (!folder.success) {
+    bm.textContent = "Нет закладок";
+    return;
+  }
+  mapFolder(folder.folder, bm);
+}
+
+async function delFolder(folder) {
+  if (!confirm(`Delete folder "${folder.Name}"?`)) return;
+  const result = await deleteFolder(folder.id);
+  if (result.success) {
+    await refreshFolder(folder.ParentID);
+  }
+}
+
+async function delBookmark(bookmark) {
+  if (!confirm(`Delete bookmark "${bookmark.Name}"?`)) return;
+  const result = await deleteBookmark(bookmark.id);
+  if (result.success) {
+    await refreshFolder(bookmark.FolderID);
+  }
+}

static/js/nashboard.js

@@ -44,7 +44,7 @@ async function login(username, password) {
 
 async function getFolder(id) {
   let url = "f";
-  if (id) url = `f/{id}`;
+  if (id) url = `f/${id}`;
   const r = request(url);
   try {
     const result = await fetch(r);
@@ -55,3 +55,53 @@ async function getFolder(id) {
     return { success: false, err };
   }
 }
+
+async function createFolder(parent, name) {
+  if (name == "root") {
+    return { success: false, err: "can't create folder with that name" };
+  }
+  const r = request("f", "POST", {
+    ParentID: parent,
+    Name: name,
+  });
+  try {
+    const result = await fetch(r);
+    return { success: true };
+  } catch (err) {
+    console.error(err);
+    return { success: false, err };
+  }
+}
+
+async function createBookmark(parent, bookmark) {
+  const r = request("bookmark", "POST", bookmark);
+  try {
+    const result = await fetch(r);
+    return { success: true };
+  } catch (err) {
+    console.error(err);
+    return { success: false, err };
+  }
+}
+
+async function deleteFolder(id) {
+  const r = request(`f/${id}`, "DELETE");
+  try {
+    const result = await fetch(r);
+    return { success: true };
+  } catch (err) {
+    console.error(err);
+    return { success: false, err };
+  }
+}
+
+async function deleteBookmark(id) {
+  const r = request(`bookmark/${id}`, "DELETE");
+  try {
+    const result = await fetch(r);
+    return { success: true };
+  } catch (err) {
+    console.error(err);
+    return { success: false, err };
+  }
+}