All Downloads are FREE. Search and download functionalities are using the official Maven repository.

static.lib.user-interaction.js Maven / Gradle / Ivy

const check = document.getElementById("check");
const convert = document.getElementById("convert");
const downloadCsv = document.getElementById("downloadCsv");

const fileUpload = document.getElementById("formFile");
const appendDocumentation = document.getElementById("appendDocumentation");
const defaultJobTypeEnabled = document.getElementById("defaultJobTypeEnabled");

const resultArea = document.getElementById("checkResults");
const arrangedResultsArea = document.getElementById("arrangedResults");
const rawResultArea = document.getElementById("rawResults");
const backendVersion = document.getElementById("backendVersion");

const severityClasses = {
  WARNING: "text-bg-warning",
  TASK: "text-bg-warning",
  REVIEW: "text-bg-info",
  INFO: "text-bg-secondary",
};

const el = (tagName, attributes, children) => {
  const element = document.createElement(tagName);
  Object.keys(attributes).forEach((key) => (element[key] = attributes[key]));
  element.append(...children);
  return element;
};

const structureMessages = (response) => {
  response.results.forEach((result) => {
    result.references.forEach((reference) => {
      response.results
        .filter((r) => r.elementId === reference)
        .forEach((r) => {
          result.messages.push(...r.messages);
        });
    });
  });
};

const createFormattedResult = (result) => {
  if (result.messages.length && result.referencedBy.length === 0) {
    return el("div", { className: "card m-3" }, [
      el("div", { className: "card-header" }, [
        result.elementType + " ",
        el("code", {}, result.elementId),
        ` ${result.elementName || ""}`,
      ]),
      createFormattedMessages(result.messages),
    ]);
  }
};

const createFormattedMessages = (messages) => {
  return el(
    "ul",
    { className: "list-group list-group-flush" },
    messages.map(createFormattedMessage)
  );
};

const createFormattedMessage = (message) => {
  return el(
    "li",
    { className: `list-group-item ${severityClasses[message.severity]}` },
    `${message.severity}: ${message.message}`
  );
};

const createFormData = async () => {
  const formData = new FormData();
  if (fileUpload.files.length === 0) {
    alert("Please select a .bpmn file");
    return null;
  }
  formData.append("file", fileUpload.files[0]);
  formData.append("appendDocumentation", appendDocumentation.checked);
  formData.append("defaultJobTypeEnabled", defaultJobTypeEnabled.checked)
  return formData;
};
const createFormattedResultWrapper = (file) => {
  arrangedResultsArea.append(...createFormattedResultForFile(file));
};

const createFormattedResultForFile = (file) => {
  return file.results.map(createFormattedResult).filter((e) => e !== undefined);
};

const downloadResponse = async (response) => {
  const contentDisposition = response.headers.get("Content-Disposition");
  const targetFileName = contentDisposition.substring(
    contentDisposition.indexOf('"') + 1,
    contentDisposition.lastIndexOf('"')
  );
  response.blob().then((data) => {
    const a = document.createElement("a");
    a.href = window.URL.createObjectURL(data);
    a.download = targetFileName;
    a.click();
  });
};

fetch("/version")
  .then((res) => {
    return res.text();
  })
  .then((backendVersion) => {
    document
      .getElementById("backendVersion")
      .insertAdjacentText("beforeend", " " + backendVersion);
  })
  .catch((error) => console.log("Error while fetching version: ", error));

check.addEventListener("click", async () => {
  const formData = await createFormData();
  if (!formData) {
    return;
  }
  fetch("/check", {
    body: formData,
    method: "POST",
    headers: {
      Accept: "application/json",
    },
  }).then((response) => {
    response.json().then((json) => {
      rawResultArea.innerHTML = JSON.stringify(json, null, 2);
      arrangedResultsArea.innerHTML = "";
      structureMessages(json);
      createFormattedResultWrapper(json);
      resultArea.hidden = false;
      addElementMarkers(json);
    });
  });
});

downloadCsv.addEventListener("click", async () => {
  const formData = await createFormData();
  if (!formData) {
    return;
  }
  fetch("/check", {
    body: formData,
    method: "POST",
    headers: {
      Accept: "text/csv",
    },
  }).then(downloadResponse);
});

convert.addEventListener("click", async () => {
  const formData = await createFormData();
  if (!formData) {
    return;
  }
  fetch("/convert", {
    body: formData,
    method: "POST",
  }).then(downloadResponse);
});

async function showBpmn(bpmnXML) {
  const bpmnViewer = await getBpmnViewer();
  openDiagram(bpmnXML, bpmnViewer);
  showPropertyInfos(bpmnViewer);
}

// load first diagram from uploaded files
const reader = new FileReader();
reader.onload = showBpmn;

if (fileUpload.files.length > 0) {
  reader.readAsText(fileUpload.files[0]);
}

fileUpload.addEventListener("change", () => {
  if (fileUpload.files.length !== 0) {
    reader.readAsText(fileUpload.files[0]);
    resultArea.hidden = true;
  }
});

async function addElementMarkers(checkResult) {
  const bpmnViewer = await getBpmnViewer();
  var canvas = bpmnViewer.get("canvas");
  checkResult.results.forEach((result) => {
    if (result.elementType !== "process" && result.elementType !== "message") {
      if (result.messages.length > 0) {
        const isWarning = result.messages.some(
          (message) => message.severity === "WARNING"
        );
        const isTask = result.messages.some(
          (message) => message.severity === "TASK"
        );
        const isReview = result.messages.some(
          (message) => message.severity === "REVIEW"
        );
        if (isWarning) {
          canvas.addMarker(result.elementId, "conversion-warning");
        } else if (isTask) {
          canvas.addMarker(result.elementId, "conversion-task");
        } else if (isReview) {
          canvas.addMarker(result.elementId, "conversion-review");
        }
      }
    }
  });
}




© 2015 - 2025 Weber Informatics LLC | Privacy Policy