split javascript files

Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com>

ui/web/static/js/clipboard.js

@@ -0,0 +1,23 @@
+// Copyright (c) Abstract Machines
+// SPDX-License-Identifier: Apache-2.0
+
+//function to copy the ID to the clipboard
+function copyToClipboard(button) {
+  var clientIDElement = button.previousElementSibling.firstChild;
+  var clientId = clientIDElement.textContent;
+
+  navigator.clipboard.writeText(clientId).then(
+    function () {
+      //change the copy icon to indicate success
+      button.innerHTML = `<i class="fas fa-check success-icon">`;
+      setTimeout(function () {
+        //revert the copy icon after a short delay
+        button.innerHTML = `<i class ="far fa-copy">`;
+      }, 1000);
+    },
+    function (error) {
+      //handle error
+      console.error("failed to copy to clipboard: ", error);
+    },
+  );
+}

ui/web/static/js/errors.js

@@ -0,0 +1,13 @@
+// Copyright (c) Abstract Machines
+// SPDX-License-Identifier: Apache-2.0
+
+export function displayErrorMessage(errorMessage, divName) {
+  const errorDiv = document.getElementById(divName);
+  errorDiv.style.display = "block";
+  errorDiv.innerHTML = errorMessage;
+}
+
+export function removeErrorMessage(divName) {
+  const errorDiv = document.getElementById(divName);
+  errorDiv.style.display = "none";
+}

ui/web/static/js/forms.js

@@ -0,0 +1,63 @@
+// Copyright (c) Abstract Machines
+// SPDX-License-Identifier: Apache-2.0
+
+// config parameters are: formId, url, alertDiv, modal
+export function submitCreateForm(config) {
+  const form = document.getElementById(config.formId);
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+    const formData = new FormData(form);
+
+    fetch(config.url, {
+      method: "POST",
+      body: formData,
+    })
+      .then(function (response) {
+        switch (response.status) {
+          case 409:
+            showAlert("entity already exists!", config.alertDiv);
+            break;
+          case 400:
+            showAlert("invalid file contents!", config.alertDiv);
+            break;
+          case 415:
+            showAlert("invalid file type!", config.alertDiv);
+            break;
+          default:
+            form.reset();
+            config.modal.hide();
+            window.location.reload();
+        }
+      })
+      .catch((error) => {
+        console.error("error submitting form: ", error);
+      });
+  });
+}
+
+export function submitUpdateForm(config) {
+  fetch(config.url, {
+    method: "POST",
+    body: JSON.stringify(config.data),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  }).then((response) => {
+    switch (response.status) {
+      case 409:
+        showAlert("entity already exists!", config.alertDiv);
+        break;
+      default:
+        window.location.reload();
+    }
+  });
+}
+
+function showAlert(errorMessage, alertDiv) {
+  const alert = document.getElementById(alertDiv);
+  alert.innerHTML = `
+	<div class="alert alert-danger alert-dismissable fade show d-flex flex-row justify-content-between" role="alert">
+	  <div>${errorMessage}</div>
+	  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
+	</div> `;
+}

ui/web/static/js/infinitescroll.js

@@ -0,0 +1,70 @@
+// Copyright (c) Abstract Machines
+// SPDX-License-Identifier: Apache-2.0
+
+export function fetchIndividualEntity(config) {
+  document.addEventListener("DOMContentLoaded", function () {
+    getEntities(config.item, "");
+    infiniteScroll(config.item);
+  });
+
+  const input = document.getElementById(config.input);
+
+  input.addEventListener("input", function (event) {
+    const itemSelect = document.getElementById(config.itemSelect);
+    if (event.target.value === "") {
+      itemSelect.innerHTML = `<option disabled>select a ${config.type}</option>`;
+      getEntities(config.item, "");
+      infiniteScroll(config.item);
+    } else {
+      itemSelect.innerHTML = "";
+      getEntities(config.item, event.target.value);
+    }
+  });
+}
+
+function getEntities(item, name) {
+  fetchData(item, name, 1);
+}
+
+function infiniteScroll(item) {
+  var selectElement = document.getElementById("infiniteScroll");
+  var singleOptionHeight = selectElement.querySelector("option").offsetHeight;
+  var selectBoxHeight = selectElement.offsetHeight;
+  var numOptionsBeforeLoad = 2;
+  var lastScrollTop = 0;
+  var currentPageNo = 1;
+  var currentScroll = 0;
+
+  selectElement.addEventListener("scroll", function () {
+    var st = selectElement.scrollTop;
+    var totalHeight = selectElement.querySelectorAll("option").length * singleOptionHeight;
+
+    if (st > lastScrollTop) {
+      currentScroll = st + selectBoxHeight;
+      if (currentScroll + numOptionsBeforeLoad * singleOptionHeight >= totalHeight) {
+        currentPageNo++;
+        fetchData(item, "", currentPageNo);
+      }
+    }
+
+    lastScrollTop = st;
+  });
+}
+
+let limit = 5;
+function fetchData(item, name, page) {
+  fetch(`/entities?item=${item}&limit=${limit}&name=${name}&page=${page}`, {
+    method: "GET",
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      const selectElement = document.getElementById("infiniteScroll");
+      data.data.forEach((entity) => {
+        const option = document.createElement("option");
+        option.value = entity.id;
+        option.text = entity.name;
+        selectElement.appendChild(option);
+      });
+    })
+    .catch((error) => console.error("Error:", error));
+}