From 8fdc548a23bb6325ccd6a4796827bccf6250a8ef Mon Sep 17 00:00:00 2001
From: Giacomo Zanatta <giacomo.zanatta@unive.it>
Date: Tue, 27 Feb 2024 09:58:15 +0100
Subject: [PATCH] Create index.html

---
 index.html | 386 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 386 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..a7df3011
--- /dev/null
+++ b/index.html
@@ -0,0 +1,386 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <style>
+    .file-upload {
+      width: 100%;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+    }
+
+
+    .file-preview-container {
+      margin: 10px auto 20px;
+    }
+
+    .file-preview {
+      max-width: 1000px;
+    }
+
+    .file-preview .file-preview__el {
+      border: 2px dashed rgb(112, 102, 245);
+      padding: 5px;
+      max-height: 200px;
+    }
+
+    .file-preview .file-preview__el .file-preview__img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .loader {
+      border: 16px solid #f3f3f3;
+      /* Light grey */
+      border-top: 16px solid #3498db;
+      /* Blue */
+      border-radius: 50%;
+      width: 120px;
+      height: 120px;
+      animation: spin 2s linear infinite;
+    }
+
+    .bg-lisa {
+      background-color: #d9ede0;
+    }
+
+    body {
+      padding-top: 70px;
+    }
+
+    .sub-menu {
+      background-color: #d9ede0;
+    }
+
+    .nav-pills .nav-link-lisa.active {
+      background-color: #199a59;
+    }
+
+    .lisa-color {
+      background-color: #199a59;
+    }
+
+    .nav-link-lisa {
+      border-width: 0;
+      background-color: transparent;
+    }
+
+    .navbar {
+      height: 70px;
+    }
+
+    .h-scroll {
+      height: 100%;
+      /* %-height of the viewport */
+      position: fixed;
+      overflow-y: scroll;
+    }
+
+    #cy {
+      width: 100%;
+      height: 600px;
+    }
+
+    .btn-lisa {
+      color: #fff !important;
+      background-color: #199a59 !important;
+      border-color: #199a59 !important;
+    }
+
+    .lisa-color-spinner {
+      color: #199a59;
+    }
+
+    .overlay {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      background: hsla(135, 79%, 50%, 0.217);
+    }
+
+    .drop-container {
+      position: relative;
+      display: flex;
+      gap: 10px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 60%;
+      padding: 20px;
+      border-radius: 10px;
+      border: 2px groove #199a59;
+      cursor: pointer;
+      transition: background .2s ease-in-out, border .2s ease-in-out;
+      margin-top: 40px;
+    }
+
+    .drop-container:hover {
+      background: #199a59;
+      border: 0px;
+    }
+
+    .drop-container:hover .drop-title {
+      color: #f8f8f8;
+    }
+
+    .drop-title {
+      color: #199a59;
+      font-size: 20px;
+      font-weight: bold;
+      text-align: center;
+      transition: color .2s ease-in-out;
+    }
+
+    .logo {
+      max-width: 60px;
+    }
+
+    #multiple_files_upload {
+      visibility: hidden;
+      width: 0px;
+      height: 0px;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+  <title>ROSLiSA | File Uploader</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <link rel="icon" href="logo.png">
+</head>
+
+<body style="font-family: 'Raleway', sans-serif;">
+  <div class="alert alert-danger danger-lisa-error d-none" role="alert">There was an error during analysis.</div>
+  <div class="alert alert-warning warning-file-py d-none" role="alert">We support only .py files.</div>
+  <div class="overlay d-none"></div>
+  <div class="container">
+    <nav class="navbar bg-lisa fixed-top">
+      <div class="container-fluid justify-content-start">
+        <img src="https://raw.githubusercontent.com/lisa-analyzer/lisa/master/logo.png" alt=""
+          class="d-inline-block align-text-top mr-4 logo" />
+        <div class="ml-4">
+          <h4>ROS2 Analyzer</h4>
+        </div>
+      </div>
+    </nav>
+
+    <div class="alert alert-danger danger-file-exists d-none" role="alert">File with this name already exists.</div>
+    <div class>
+      <h2>Examples</h2>
+      <ul>
+        <li>
+          <h3>ROS2 Examples</h3>
+          <p>(Repository: <a href="https://github.com/ros2/examples">https://github.com/ros2/examples</a>)</p>
+          <ul>
+            <li>
+              <b>minimal publisher, minimal subscriber</b> <i>(<a href="/lisaros2-fe/pubsub_minimal/report.html">View Analysis</a> | <a href="/lisaros2-fe/pubsub_minimal/sources.zip">Download sources</a>)</i>
+              <p>Minimal example from ros2 tutorial. We have two nodes that communicate using a topic.</p>
+            </li>
+            <li>
+              <b>minimal publisher, minimal subscriber - old school</b> <i>(<a href="/lisaros2-fe/pubsub_minimal_oldschool/report.html">View Analysis</a> | <a href="/lisaros2-fe/pubsub_minimal_oldschool/sources.zip">Download sources</a>)</i>
+              <p>"old school" variant of the previous example. </p>
+            </li>
+            <li>
+              <b>minimal client, minimal service</b> <i>(<a href="/lisaros2-fe/services_minimal/report.html">View Analysis</a> | <a href="/lisaros2-fe/services_minimal/sources.zip">Download sources</a>)</i>
+              <p>Example of analysis with two nodes and a service.</p>
+            </li>
+            <li>
+              <b>minimal action client, minimal action service</b> <i>(<a href="/lisaros2-fe/actions_minimal/report.html">View Analysis</a> | <a href="/lisaros2-fe/actions_minimal/sources.zip">Download sources</a>)</i>
+              <p>Example of analysis with an action server and an action client.</p>
+            </li>
+        </ul>
+        <li>
+          <h3>Mechaship</h3>
+          <p>(Repository: <a href="https://github.com/mechasolution/mechaship_example/tree/master">https://github.com/mechasolution/mechaship_example</a>)</p>
+          <ul>
+            <li>
+              <i>(<a href="/lisaros2-fe/mechaship/report.html">View Analysis</a> | <a href="/lisaros2-fe/mechaship/sources.zip">Download sources</a>)</i>
+              <p>Five nodes, five topics and three services</p>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <h3>Fruit Collectors</h3>
+          <p>(Repository: <a href="https://github.com/davidwxy62/fruit_collectors">https://github.com/davidwxy62/fruit_collectors</a>)</p>
+          <ul>
+            <li>
+              <i>(<a href="/lisaros2-fe/fruit_collectors/report.html">View Analysis</a> | <a href="/lisaros2-fe/fruit_collectors/sources.zip">Download sources</a>)</i>
+              <p>Two nodes, three topics and one service</p>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <h3>Zumopi Telemetry Systems</h3>
+          <p>(Repository: <a href="https://github.com/renatof25/zumopi_telemetry_system">https://github.com/renatof25/zumopi_telemetry_system</a>)</p>
+          <ul>
+            <li>
+              <i>(<a href="/lisaros2-fe/zumopi/report.html">View Analysis</a> | <a href="/lisaros2-fe/zumopi/sources.zip">Download sources</a>)</i>
+              <p>Five nodes and 19 topics.</p>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <h3>Virtuoso (Virtuoso Perception)</h3>
+          <p>(Repository: <a href="https://github.com/gt-marine-robotics-group/Virtuoso">https://github.com/gt-marine-robotics-group/Virtuoso</a>)</p>
+          <ul>
+            <li>
+              <i>(<a href="/lisaros2-fe/virtuoso_perception/report.html">View Analysis</a> | <a href="/lisaros2-fe/virtuoso_perception/sources.zip">Download sources</a>)</i>
+              <p>Three nodes, three services and five topics.</p>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+    <script>
+      
+      
+      const dropContainer = document.getElementById("dropcontainer");
+      const fileInput = document.getElementById("multiple_files_upload");
+
+      dropContainer.addEventListener("dragover", (e) => {
+        // prevent default to allow drop
+        e.preventDefault();
+      }, false);
+
+      dropContainer.addEventListener("dragenter", () => {
+        dropContainer.classList.add("drag-active");
+      })
+
+      dropContainer.addEventListener("dragleave", () => {
+        dropContainer.classList.remove("drag-active");
+      })
+
+      dropContainer.addEventListener("drop", (e) => {
+        e.preventDefault()
+        dropContainer.classList.remove("drag-active");
+        fileInput.files = e.dataTransfer.files;
+        fileInput.dispatchEvent(new Event("change"));
+      })
+
+      //   Upload Single Image
+      let files = {};
+      // Mulitple File Upload
+
+      document
+        .getElementById("multiple_files_upload")
+        .addEventListener("change", async (event) => {
+          let atLeastOneWrongFile = false;
+          try {
+            for (let key in event.target.files) {
+              console.log(event.target.files[key]);
+              document.getElementsByClassName("danger-lisa-error")[0].classList.add("d-none");
+              document.getElementsByClassName("warning-file-py")[0].classList.add("d-none");
+              if (event.target.files[key] instanceof File) {
+                if (event.target.files[key].name.endsWith('.py')) {
+                  //console.log(event.target.files[key])
+                  if (files[event.target.files[key].name] != null) {
+                    delete files[event.target.files[key].name];
+                    document.getElementById(event.target.files[key].name).parentElement.removeChild(document.getElementById(event.target.files[key].name));
+                  }
+                  const fileDiv = document.createElement("div");
+                  fileDiv.id = event.target.files[key].name;
+                  const fileDivName = document.createElement("span");
+                  fileDivName.classList.add("mr-4");
+                  files[event.target.files[key].name] = event.target.files[key];
+                  const fileDivRemove = document.createElement("button");
+                  fileDivRemove.addEventListener("click", function (ev) {
+                    delete files[this.parentElement.id];
+                    this.parentElement.parentElement.removeChild(this.parentElement);
+                    document.getElementsByClassName("danger-lisa-error")[0].classList.add("d-none");
+                    showOrHideAnalyzeButton();
+                  });
+                  fileDivRemove.classList.add("btn", "btn-outline-danger");
+                  fileDivRemove.textContent = "Remove";
+
+                  fileDivName.textContent = event.target.files[key].name;
+                  fileDiv.appendChild(fileDivName);
+                  fileDiv.appendChild(fileDivRemove)
+                  document.getElementById("file-preview").appendChild(fileDiv);
+
+                  //formData.append("files", event.target.files[key]);
+                } else {
+                  atLeastOneWrongFile = true;
+                }
+              }
+            }
+            if (atLeastOneWrongFile) {
+              document.getElementsByClassName("warning-file-py")[0].classList.remove("d-none");
+            }
+            //document.getElementById("multiple_files_upload").parentElement.reset();
+            showOrHideAnalyzeButton();
+
+            //console.log(files);
+            /*const data = await fetch(`/analyze`, {
+              body: formData,
+              method: "POST",
+            }).then(res => res.json())
+              .then(json => {
+                console.log(json)
+                window.location.href = json.url;
+              });*/
+          } catch (error) {
+            console.log(error);
+            //alert(error.message);
+          }
+        });
+
+      document.getElementById("btn-analyze").addEventListener("click", function (e) {
+        document.getElementsByClassName("danger-lisa-error")[0].classList.add("d-none");
+        document.getElementsByClassName("warning-file-py")[0].classList.add("d-none");
+        document.getElementsByClassName("overlay")[0].classList.remove("d-none");
+        document.getElementsByClassName("lisa-spinner")[0].classList.remove("d-none");
+
+        let formData = new FormData();
+        for (let file in files) {
+          formData.append("files", files[file]);
+        }
+        console.log(formData.getAll("files"));
+        try {
+          const data = fetch(`/analyze`, {
+            body: formData,
+            method: "POST",
+          }).then(res => res.json())
+            .then(json => {
+              console.log(json);
+              if (json.error) {
+                document.getElementsByClassName("danger-lisa-error")[0].classList.remove("d-none");
+                document.getElementsByClassName("overlay")[0].classList.add("d-none");
+                document.getElementsByClassName("lisa-spinner")[0].classList.add("d-none");
+              } else {
+                document.getElementsByClassName("overlay")[0].classList.add("d-none");
+                document.getElementsByClassName("lisa-spinner")[0].classList.add("d-none");
+                window.location.href = json.url;
+              }
+            });
+        } catch (error) {
+          document.getElementsByClassName("danger-lisa-error")[0].classList.remove("d-none");
+          document.getElementsByClassName("overlay")[0].classList.add("d-none");
+          document.getElementsByClassName("lisa-spinner")[0].classList.add("d-none");
+          console.log(error);
+        }
+      });
+      function showOrHideAnalyzeButton() {
+        if (Object.keys(files).length) {
+          document.getElementsByClassName("analyze")[0].classList.remove("d-none");
+        } else {
+          document.getElementsByClassName("analyze")[0].classList.add("d-none");
+        }
+      }
+    </script>
+  </div>
+</body>
+
+</html>
