about summary refs log tree commit diff
path: root/frontend/index.html
diff options
context:
space:
mode:
authorEmile <hanemile@protonmail.com>2019-03-15 20:29:28 +0100
committerEmile <hanemile@protonmail.com>2019-03-15 20:29:28 +0100
commitf8cb2a4d3a5fdb56aeeeeb087afa939762637149 (patch)
tree249970605d6d04fa61da89abb94d68b507b8c467 /frontend/index.html
parentef0beb88ead85c024fbc271962d0ffb0ec1e1e19 (diff)
created a simple frontend for the db-controller backend
Diffstat (limited to 'frontend/index.html')
-rw-r--r--frontend/index.html304


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>

 
  

		

			generated by cgit-pink 1.4.1
		

		

			rss feed of @hanemile@chaos.social mastodon
			lieu webring search engine
			XXIIVV webring
			activitypub