Modify the page layout

- Use the Bootstrap library. - Add buttons to start and stop the simulation.
input-output-hk · Jul 3, 2024 · 8b62a4e · 8b62a4e
1 parent 271f4ef
commit 8b62a4e
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 23 deletions.
diff --git a/leios-sim/index.html b/leios-sim/index.html
@@ -1,24 +1,64 @@
-<!DOCTYPE HTML>
-<html>
+<!DOCTYPE html>
+<html lang="en">
+
   <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Leios</title>
-    <link rel="stylesheet" href="leios.css" >
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+
+    <script type="text/javascript" id="MathJax-script" async
+	    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
+    </script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
     <script src="index.js"></script>
   </head>
+
   <body>
-    <div  style="width: 80%; margin: auto;">
-      <canvas id="throughput"></canvas>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+
+    <div class="row" style="width: 90%; margin: auto;" >
+      <canvas id="main_chart"></canvas>
     </div>
-    <div>
-      <form id="parameters">
-        <label for="lambda">Diffusion length (λ): </label>
-        <input type="number" id="lambda" value="12" />
-        <label for="bps">Node bandwidth (bits per second): </label>
-        <input type="number" id="capacity" value="10" />
-      </form>
+
+    <div class="row g-3" style="width: 95%; margin: auto;">
+
+      <div class="col-md-3">
+	<label for="inputLambda" class="form-label">$$\lambda_{\ }$$</label>
+	<input type="number" class="form-control" id="input_λ">
+      </div>
+
+      <div class="col-md-3">
+	<label for="inputL" class="form-label">$$L_{\ }$$</label>
+	<input type="number" class="form-control" id="input_L">
+      </div>
+
+      <div class="col-md-3">
+	<label for="input_f_I" class="form-label">$$f_I$$</label>
+	<input type="number" min="1" max="5" class="form-control" id="input_F_I">
+      </div>
+
+      <div class="col-md-3">
+	<label for="input_f_E" class="form-label">$$f_E$$</label>
+	<input type="number" min="1" max="5" class="form-control" id="input_f_E">
+      </div>
+
+      <!-- Buttons -->
+
+      <div class="col-2">
+	<button type="submit" onclick="startSimulation()" class="btn btn-success">Start</button>
+      </div>
+
+      <div class="col-8">
+
+      </div>
+
+      <div class="col-2">
+	<button type="button" onclick="stopSimulation()" class="btn btn-danger">Stop</button>
+      </div>
     </div>
+
   </body>
+
 </html>
diff --git a/leios-sim/index.js b/leios-sim/index.js
@@ -9,7 +9,7 @@ document.addEventListener('DOMContentLoaded', () => {
     return Math.floor(slot / parameters.L);
   }
 
-  const node = document.getElementById('throughput');
+  const node = document.getElementById('main_chart');
 
   // throughput chart
   const chart = new Chart(node, {
@@ -141,21 +141,26 @@ document.addEventListener('DOMContentLoaded', () => {
   };
 
   // handle parameters change
-  const lambda = document.getElementById('lambda');
-  lambda.addEventListener('change', function() {
-    parameters.λ = lambda.value;
+  const input_λ = document.getElementById('input_λ');
+  input_λ.addEventListener('change', function() {
+    parameters.λ = input_λ.value;
     postJSON("http://" + window.location.hostname + ":" +
-      window.location.port + "/api/lambda", parseInt(lambda.value));
-  });
-
-  const bps = document.getElementById('bps');
-  capacity.addEventListener('change', function() {
-    postJSON("http://" + window.location.hostname + ":" +
-      window.location.port + "/api/node-bandwidth", parseInt(capacity.value));
+      window.location.port + "/api/lambda", parseInt(input_λ.value));
   });
 
 });
 
+async function startSimulation() {
+  const L = document.getElementById('input_L');
+  const λ = document.getElementById('input_λ');
+  console.log(L.value);
+  console.log(λ.value);
+}
+
+async function stopSimulation() {
+
+}
+
 async function postJSON(url, data) {
   try {
     const response = await fetch(url, {