Skip to content

Commit

Permalink
Create index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@giacomozanatta
giacomozanatta authored Feb 27, 2024
1 parent 59ade6d commit 8fdc548
Showing 1 changed file with 386 additions and 0 deletions.
386 changes: 386 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 8fdc548

Please sign in to comment.