added backend

2025-07-09 17:46:47 +07:00
1 parent 9842ccee3d
commit 40bcd02c36
@@ -1,77 +1,86 @@
 const iconsArea = document.querySelector("#icons");
+const servicenameinput = document.querySelector("#servicenameinput");
+const servicelinkinput = document.querySelector("#servicelinkinput");
+const serviceimageinput = document.querySelector("#serviceimageinput");
+const savecardbutton = document.querySelector("#savecardbutton");
+const addcardmodalel = document.querySelector("#addcard");
+const addcardmodal = new bootstrap.Modal(addcardmodalel);

-const icons = [
-  {
-    key: 0,
-    href: "https://web.telegram.org/k/",
-    img: "img/telegram-icon.jpeg",
-    alt: "telegram-icon",
-    text: "Telegram",
-  },
-  {
-    key: 1,
-    href: "https://github.com",
-    img: "img/github-icon.png",
-    alt: "github-icon",
-    text: "github.com",
-  },
-  {
-    key: 0,
-    href: "https://gitea.home.com:3000",
-    img: "img/gitea-icon.png",
-    alt: "gitea-icon",
-    text: "gitea.home.com",
-  },
-  {
-    key: 1,
-    href: "http://jellyfin.home.com:8096",
-    img: "img/jellyfin.png",
-    alt: "jellyfin-icon",
-    text: "jellyfin.home.com",
-  },
-  {
-    key: 2,
-    href: "http://immich.home.com:2283",
-    img: "img/immich-icon.png",
-    alt: "immich-icon",
-    text: "immich.home.com",
-  },
-  {
-    key: 3,
-    href: "http://navidrome.home.com:4533",
-    img: "img/navidrome-icon.png",
-    alt: "navidrome-icon",
-    text: "navidrome.home.com",
-  },
-  {
-    key: 4,
-    href: "https://portainer.home.com:9443",
-    img: "img/portainer-icon.webp",
-    alt: "portainer-icon",
-    text: "portainer.home.com",
-  },
-  {
-    key: 5,
-    href: "https://dns.home.com",
-    img: "img/dnsmasq-icon.jpeg",
-    alt: "dnsmasq-icon",
-    text: "dns.home.com",
-  },
-  {
-    key: 7,
-    href: "http://router.home.com",
-    img: "img/router-icon.svg",
-    alt: "router-icon",
-    text: "router.home.com",
-  },
-];
+var icons = [];

-icons.map((icon) => {
-  iconsArea.innerHTML += `<div class="card" style="width: 16rem;">
-    <img src="${icon.img}" alt="${icon.alt}" class="card-img-top">
-    <div class="card-body">
-      <h5 class="card-title" style="text-align: center;">${icon.text}</h5>
-      <a href="${icon.href}" class="btn btn-primary" style="width: 100%;">Visit</a>
-    </div>
-  </div>`;
+const renderIcons = () => {
+  iconsArea.innerHTML = "";
+  icons.map((icon) => {
+    iconsArea.innerHTML += `<div class="card" style="width: 16rem;">
+      <img src="${icon.img}" alt="${icon.alt}" class="card-img-top">
+      <div class="card-body">
+        <h5 class="card-title" style="text-align: center;">${icon.text}</h5>
+        <div class="d-flex flex-column gap-2">
+          <a href="${icon.href}" class="btn btn-primary" style="width: 100%;">Visit</a>
+          <button class="btn btn-danger delcard" style="width: 100%" id="${icon.key}">Delete</button>
+        </div>
+      </div>
+    </div>`;
+  });
+};
+
+const getIcons = () => {
+  fetch(window.location.origin + "/api/services")
+    .then((data) => data.json())
+    .then((jsondata) => {
+      icons = jsondata;
+      renderIcons();
+    });
+};
+
+getIcons();
+
+savecardbutton.addEventListener("click", () => {
+  if (confirm("Add card?")) {
+    const file = serviceimageinput.files[0];
+    if (!file) {
+      alert("Please select a file to upload");
+      return;
+    }
+
+    const formdata = new FormData();
+    formdata.append("img", file);
+    formdata.append("text", servicenameinput.value);
+    formdata.append("href", servicelinkinput.value);
+    fetch(window.location.origin + "/api/services/add", {
+      method: "POST",
+      body: formdata,
+    })
+      .then((data) => data.json())
+      .then((jsondata) => {
+        if (jsondata.status === "already exists") {
+          alert("Service already exists");
+          return;
+        }
+        icons = jsondata;
+        renderIcons();
+        addcardmodal.hide();
+      })
+      .catch((error) => {
+        alert(error);
+      });
+  }
+});
+
+iconsArea.addEventListener("click", (e) => {
+  if (e.target.classList.contains("delcard")) {
+    if (confirm("Delete card?")) {
+      icons.splice(icons.indexOf(icons.find((i) => i.key === e.target.id)), 1);
+      fetch(window.location.origin + "/api/services", {
+        method: "POST",
+        body: JSON.stringify(icons),
+      })
+        .then((data) => data.json())
+        .then((jsondata) => {
+          icons = jsondata;
+          renderIcons();
+        })
+        .catch((error) => alert(error));
+    }
+  }
 });