<!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 url = "http://localhost:8081/newTree";
var params = "w=100";
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>
<!-- 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">
<!-- content row -->
<div class="row">
<div class="col-md-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">New tree</h2>
<p class="card-text">create a new tree</p>
</div>
<div class="card-footer">
<button class="btn btn-primary" formmethod="post" type="button" onclick="newTree()">Create new tree</button>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Delete all stars</h2>
<p class="card-text">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-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Delete all nodes</h2>
<p class="card-text">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>
<!-- /.row -->
<!-- content row -->
<div class="row">
<div class="col-md-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Update total mass</h2>
<p class="card-text">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 class="col-md-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Update center of mass</h2>
<p class="card-text">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-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Generate Forest Tree</h2>
<p class="card-text">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>
<!-- content row -->
<div class="row">
<div class="col-md-4 mb-4">
<div class="card h-100">
<div class="card-body">
<form action="http://localhost:8081/insertStar" method="post" id="insertform">
<h2 class="card-title">Insert star</h2>
<p class="card-text">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-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Insert list of stars</h2>
<p class="card-text">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>
</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>