add navbar and choosers

Frc5572 · Oct 12, 2023 · 62fdf2f · 62fdf2f
1 parent b0e3a88
commit 62fdf2f
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 28 deletions.
diff --git a/src/main/deploy/nodeselector/auto.html b/src/main/deploy/nodeselector/auto.html
@@ -1,16 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html style="height: 100%;">
 
 <head>
-  <!--
-      Copyright (c) 2023 FRC 6328
-      http://github.com/Mechanical-Advantage
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file at
-      the root directory of this project.
-    -->
-
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="icon" type="image/x-icon" href="favicon.ico" />
@@ -22,8 +13,36 @@
   <title>Node Selector &mdash; Banana Split</title>
 </head>
 
-<body>
-  <select id="autoChooser"></select>
+<body style="height: 100%;">
+  <div class="container-fluid d-flex flex-column" style="height: 100%;">
+    <div w3-include-html="nav.html"></div>
+    <div class="row">
+      <div class="col-sm">
+        <select id="autoChooser" class="form-select form-select-lg mb-3"></select>
+      </div>
+      <div class="col-sm">
+        <select id="columnChooser" class="form-select form-select-lg mb-3"></select>
+      </div>
+      <div class="col-sm">
+        <select id="levelChooser" class="form-select form-select-lg mb-3"></select>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" value="" id="enableDock">
+          <label class="form-check-label" for="enableDock">
+            Enable Dock
+          </label>
+        </div>
+      </div>
+      <div class="col-sm">
+        <label for="waitAfterScore" class="form-label">Wait After Score</label>
+        <input type="range" class="form-range" min="0" max="10" step="1" id="waitAfterScore">
+      </div>
+      <div>
+      </div>
+    </div>
 </body>
 
 </html>
diff --git a/src/main/deploy/nodeselector/css/style.css b/src/main/deploy/nodeselector/css/style.css
@@ -75,7 +75,7 @@ div.confirmed.active {
     width: 33%;
     bottom: 0%;
     height: 20%; */
-    font-size: 18vh;
+    font-size: 10vh;
     text-align: center;
 }
 
@@ -133,6 +133,6 @@ div.cone-orientation.tipped svg {
 div#confirm-node>div {
     /* line-height: 1.5;
     display: inline-block; */
-    font-size: 18vh;
+    font-size: 10vh;
     text-align: center;
 }
diff --git a/src/main/deploy/nodeselector/index.html b/src/main/deploy/nodeselector/index.html
@@ -1,16 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html style="height: 100%;">
 
 <head>
-  <!--
-      Copyright (c) 2023 FRC 6328
-      http://github.com/Mechanical-Advantage
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file at
-      the root directory of this project.
-    -->
-
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="icon" type="image/x-icon" href="favicon.ico" />
@@ -22,8 +13,9 @@
   <title>Node Selector &mdash; Banana Split</title>
 </head>
 
-<body>
-  <div class="container-fluid h-100 d-flex flex-column">
+<body style="height: 100%;">
+  <div class="container-fluid d-flex flex-column" style="height: 100%;">
+    <div w3-include-html="nav.html"></div>
     <div class="row h-25" id="row-high">
       <div class="col-sm node cone high">
         H1
@@ -116,7 +108,7 @@
       <div id="confirm-node" class="col-sm">
         <div class="btn btn-lg btn-block btn-danger">CONFIRM</div>
       </div>
-      <div class="cone-orientation col-sm" align="center">
+      <div class="cone-orientation col-sm text-center">
         <svg viewbox="0 0 16 16" width="50%">
           <path
             d="M7.03 1.88c.252-1.01 1.688-1.01 1.94 0l2.905 11.62H14a.5.5 0 0 1 0 1H2a.5.5 0 0 1 0-1h2.125L7.03 1.88z" />

diff --git a/src/main/deploy/nodeselector/js/index.js b/src/main/deploy/nodeselector/js/index.js
@@ -15,6 +15,14 @@ const isAutoTopic = "/nodeselector/is_auto";
 const autoChooserOptions = "/Shuffleboard/Auto/Auto Chooser/options";
 const autoChooserActive = "/Shuffleboard/Auto/Auto Chooser/active";
 const autoChooserSelected = "/Shuffleboard/Auto/Auto Chooser/selected";
+const LevelOptions = "/Shuffleboard/Auto/Level/options";
+const LevelActive = "/Shuffleboard/Auto/Level/active";
+const LevelSelected = "/Shuffleboard/Auto/Level/selected";
+const ColumnOptions = "/Shuffleboard/Auto/Column/options";
+const ColumnActive = "/Shuffleboard/Auto/Column/active";
+const ColumnSelected = "/Shuffleboard/Auto/Column/selected";
+const fieldPos = "/Shuffleboard/Auto/Field Pos/Robot";
+const enableDock = "/Shuffleboard/Auto/Enable Dock";
 
 
 let active = null;
@@ -134,6 +142,29 @@ let client = new NT4_Client(
     } else if (topic.name == autoChooserActive) {
       // console.log("Auto Chooser Active - " + value);
       $("#autoChooser").val(value);
+    } else if (topic.name == enableDock) {
+      // console.log("Auto Chooser Active - " + value);
+      $("#enableDock").prop('checked', value);
+    } else if (topic.name == ColumnOptions) {
+      // console.log("Auto Chooser Options - " + value);
+      // let values = value.split(",");
+      $("#columnChooser").children("option").remove();
+      for (let i = 0; i < value.length; i++) {
+        $("#columnChooser").append(new Option(value[i], value[i]));
+      }
+    } else if (topic.name == ColumnActive) {
+      // console.log("Auto Chooser Active - " + value);
+      $("#columnChooser").val(value);
+    } else if (topic.name == LevelOptions) {
+      // console.log("Auto Chooser Options - " + value);
+      // let values = value.split(",");
+      $("#levelChooser").children("option").remove();
+      for (let i = 0; i < value.length; i++) {
+        $("#levelChooser").append(new Option(value[i], value[i]));
+      }
+    } else if (topic.name == LevelActive) {
+      // console.log("Auto Chooser Active - " + value);
+      $("#levelChooser").val(value);
     }
   },
   () => {
@@ -149,7 +180,20 @@ let client = new NT4_Client(
   }
 );
 
+function includeHTML() {
+  $("[w3-include-html]").each(function (i, el) {
+    // `this` is the div
+    $.get($(el).attr("w3-include-html"), function (data) {
+      $(el).html(data)
+      $(el).removeAttr("w3-include-html")
+    });
+  });
+}
+
+
+
 window.addEventListener("load", () => {
+  includeHTML()
   // Start NT connection
   client.subscribe(
     [
@@ -160,7 +204,15 @@ window.addEventListener("load", () => {
       isAutoTopic,
       autoChooserActive,
       autoChooserOptions,
-      autoChooserSelected
+      autoChooserSelected,
+      fieldPos,
+      enableDock,
+      LevelActive,
+      LevelOptions,
+      LevelSelected,
+      ColumnActive,
+      ColumnOptions,
+      ColumnSelected,
     ],
     false,
     false,
@@ -171,6 +223,9 @@ window.addEventListener("load", () => {
   client.publishTopic(coneTippeddTopic, "boolean");
   // client.publishTopic(autoChooserActive, "string");
   client.publishTopic(autoChooserSelected, "string");
+  client.publishTopic(enableDock, "boolean");
+  client.publishTopic(LevelSelected, "string");
+  client.publishTopic(ColumnSelected, "string");
   client.connect();
 
   // Add node click listeners
@@ -204,6 +259,18 @@ window.addEventListener("load", () => {
     let value = $("#autoChooser").val();
     client.addSample(autoChooserSelected, value);
   })
+  $("#columnChooser").change(function () {
+    let value = $("#columnChooser").val();
+    client.addSample(ColumnSelected, value);
+  })
+  $("#levelChooser").change(function () {
+    let value = $("#levelChooser").val();
+    client.addSample(LevelSelected, value);
+  })
+  $("#enableDock").change(function () {
+    let value = $("#enableDock").prop('checked');
+    client.addSample(enableDock, value);
+  })
   // each((cell, index) => {
   //   cell.addEventListener("click", () => {
   //     sendActive(index);

diff --git a/src/main/deploy/nodeselector/nav.html b/src/main/deploy/nodeselector/nav.html
@@ -0,0 +1,14 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <a class="navbar-brand" href="/">Navbar</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
+        aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+        <div class="navbar-nav">
+            <a class="nav-item nav-link" href="index.html">Home</a>
+            <a class="nav-item nav-link" href="auto.html">Auto</a>
+            <a class="nav-item nav-link" href="#">TeleOp</a>
+        </div>
+    </div>
+</nav>