folder for frontend

frontend/js/icons.js

@@ -0,0 +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);
+
+var icons = [];
+
+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));
+    }
+  }
+});