diff options
Diffstat (limited to 'frontend/index.html')
| -rw-r--r-- | frontend/index.html | 304 |
1 files changed, 304 insertions, 0 deletions
diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..741f2fc --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,304 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <meta name="description" content=""> + <meta name="author" content=""> + + <title>Galaxy Simulator</title> + + <!-- Bootstrap core CSS --> + <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> + + <!-- Custom styles for this template --> + <link href="css/small-business.css" rel="stylesheet"> + + <script> + function newTree() { + var w = document.getElementById("w").value; + + var url = "http://localhost:8081/newTree"; + var params = "w=" + w; + console.log(params) + var xhr = new XMLHttpRequest(); + xhr.open("POST", url, true); + xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhr.send(params); + } + function deleteAllStars() { + var url = "http://localhost:8081/deleteStars"; + var params = ""; + var xhr = new XMLHttpRequest(); + xhr.open("POST", url, true); + xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhr.send(params); + } + function deleteAllNodes() { + var url = "http://localhost:8081/deleteNodes"; + var params = ""; + var xhr = new XMLHttpRequest(); + xhr.open("POST", url, true); + xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhr.send(params); + } + function updateTotalMass() { + var url = "http://localhost:8081/updateTotalMass"; + var params = "index=1"; + var xhr = new XMLHttpRequest(); + xhr.open("POST", url, true); + xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhr.send(params); + } + function updateCenterOfMass() { + var url = "http://localhost:8081/updateCenterOfMass"; + var params = "index=1"; + var xhr = new XMLHttpRequest(); + xhr.open("POST", url, true); + xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhr.send(params); + } + function generateForest() { + var url = "http://localhost:8081/genForestTree"; + var params = ""; + var xhr = new XMLHttpRequest(); + xhr.open("GET", url, true); + xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhr.send(params); + } + function insertStar() { + var x = document.getElementById("x").value; + var y = document.getElementById("y").value; + var vx = document.getElementById("vx").value; + var vy = document.getElementById("vy").value; + var m = document.getElementById("m").value; + var index = document.getElementById("index").value; + + var url = "http://localhost:8081/insertStar"; + var params = "x=" + x + "&y=" + y + "&vx=" + vx + "&vy=" + vy + "&m=" + m + "&index=" + index; + console.log(params) + var xhr = new XMLHttpRequest(); + xhr.open("POST", url, true); + xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhr.send(params); + } + function insertList() { + var url = "http://localhost:8081/insertList"; + var params = ""; + var xhr = new XMLHttpRequest(); + xhr.open("GET", url, true); + xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhr.send(params); + } + </script> + +</head> + +<body class="bg-secondary"> + +<!-- Navigation --> +<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> + <div class="container"> + <a class="navbar-brand" href="#">Galaxy Simulator</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarResponsive"> + <ul class="navbar-nav ml-auto"> + + <li class="nav-item active"> + <a class="nav-link" href="#">Home + <span class="sr-only">(current)</span> + </a> + </li> + </ul> + </div> + </div> +</nav> + +<br> + +<!-- Page Content --> +<div class="container-fluid"> + + <!-- content row --> + <div class="row"> + + <div class="col-md-3 mb-4"> + <div class="bg-dark card h-100"> + <div class="card-body"> + <form action="http://localhost:8081/newTree" method="post" id="insertform"> + <h2 class="card-title text-light">New tree</h2> + <p class="card-text text-light">Create a new tree</p> + + <div class="row"> + <div class="col"> + <input type="text" class="form-control" name="w" id="w" placeholder="w"> + </div> + </div> + </form> + + </div> + + <div class="card-footer"> + <button class="btn btn-primary" formmethod="post" type="button" onclick="newTree()">Insert star</button> + </div> + + </div> + </div> + + <div class="col-md-3 mb-4"> + <div class="bg-dark card h-100"> + <div class="card-body"> + <h2 class="card-title text-light">Delete all stars</h2> + <p class="card-text text-light">Delete all the stars in the stars table</p> + </div> + <div class="card-footer"> + <button class="btn btn-primary" formmethod="post" type="button" onclick="deleteAllStars()">Delete all stars</button> + </div> + </div> + </div> + + <div class="col-md-3 mb-4"> + <div class="bg-dark card h-100"> + <div class="card-body"> + <h2 class="card-title text-light">Delete all nodes</h2> + <p class="card-text text-light">Delete all the nodes in the nodes table</p> + </div> + <div class="card-footer"> + <button class="btn btn-primary" formmethod="post" type="button" onclick="deleteAllNodes()">Delete all nodes</button> + </div> + </div> + </div> + + + <div class="col-md-3 mb-4"> + <div class="bg-dark card h-100"> + <div class="card-body"> + <h2 class="card-title text-light">Update total mass</h2> + <p class="card-text text-light">Update the total mass of all the nodes in the tree</p> + </div> + <div class="card-footer"> + <button class="btn btn-primary" formmethod="post" type="button" onclick="updateTotalMass()">Update total mass</button> + </div> + </div> + </div> + + </div> + <!-- /.row --> + + <!-- content row --> + <div class="row"> + + <div class="col-md-3 mb-4"> + <div class="bg-dark card h-100"> + <div class="card-body"> + <h2 class="card-title text-light">Update center of mass</h2> + <p class="card-text text-light">Update the center of mass of all nodes in the tree</p> + </div> + <div class="card-footer"> + <button class="btn btn-primary" formmethod="post" type="button" onclick="updateCenterOfMass()">Update center of mass</button> + </div> + </div> + </div> + + <div class="col-md-3 mb-4"> + <div class="bg-dark card h-100"> + <div class="card-body"> + <h2 class="card-title text-light">Generate Forest Tree</h2> + <p class="card-text text-light">Generate a representation of the tree in LaTeX forest syntax</p> + </div> + <div class="card-footer"> + <button class="btn btn-primary" formmethod="post" type="button" onclick="generateForest()">Generate Forest</button> + </div> + </div> + </div> + + + <div class="col-md-3 mb-4"> + <div class="bg-dark card h-100"> + <div class="card-body"> + <form action="http://localhost:8081/insertStar" method="post" id="insertform"> + <h2 class="card-title text-light">Insert star</h2> + <p class="card-text text-light">Insert a single star into the tree</p> + + <div class="row"> + <div class="col"> + <input type="text" class="form-control" name="x" id="x" placeholder="x"> + </div> + <div class="col"> + <input type="text" class="form-control" name="y" id="y" placeholder="y"> + </div> + </div> + <br> + <div class="row"> + <div class="col"> + <input type="text" class="form-control" name="vx" id="vx" placeholder="vx"> + </div> + <div class="col"> + <input type="text" class="form-control" name="vy" id="vy" placeholder="vy"> + </div> + </div> + <br> + <div class="row"> + <div class="col"> + <input type="text" class="form-control" name="m" id="m" placeholder="m"> + </div> + <div class="col"> + <input type="text" class="form-control" name="index" id="index" placeholder="index"> + </div> + </div> + </form> + + </div> + + <div class="card-footer"> + <button class="btn btn-primary" formmethod="post" type="button" onclick="insertStar()">Insert star</button> + </div> + + </div> + </div> + + <div class="col-md-3 mb-4"> + <div class="bg-dark card h-100"> + <div class="card-body"> + <h2 class="card-title text-light">Insert list of stars</h2> + <p class="card-text text-light">Select a .csv to insert into the tree</p> + + <div class="form-group mh-100"> + <select multiple class="form-control mh-100" id="exampleFormControlSelect2"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + </div> + + </div> + <div class="card-footer"> + <button class="btn btn-primary" formmethod="post" type="button" onclick="insertList()">Insert list</button> + </div> + </div> + </div> + + </div> + + <!-- content row --> + <div class="row"> + + + </div> + +</div> +<!-- /.container --> + +<!-- Bootstrap core JavaScript --> +<script src="vendor/jquery/jquery.min.js"></script> +<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> + +</body> + +</html> |
