feat: dashboard can send notes to server log

Author: mayabflannery

src/dashboard/public/dashboard.html

@@ -145,6 +145,7 @@ <h2>Bangle.js watch list</h2>
       <!-- </div> -->
       <!-- <div class="ui-grid info"><h3>Details</h3></div> -->
       <!-- <div class="ui-grid commands"><h2>Commands</h2></div> -->
+      <div class="ui-grid ui-center server-notes" id="serverNotes"></div>
       <div class="ui-grid ui-center footer">BEATLab 2024</div>
     </div>
     <script type="module" src="/javascripts/client.js"></script>

src/dashboard/public/stylesheets/layout.css

@@ -45,6 +45,7 @@ h3 {
     "leftSide watchList na"
     "leftSide watchList na"
     /*"leftSide commands na"*/
+    "leftSide server-notes na"
     "footer footer footer";
   & > * {
     border-left: 2px solid rgba(0, 0, 0, 0);
@@ -56,6 +57,10 @@ h3 {
   /*}*/
 }
 
+.server-notes {
+  grid-area: server-notes;
+}
+
 .footer {
   grid-area: footer;
 }

src/dashboard/src/app/server.ts

@@ -121,6 +121,10 @@ io.on("connection", (socket: Socket) => {
     logger.log("info", `Client Info: ${msg}`);
   });
 
+  socket.on("btn-note", (note): void => {
+    logger.log("info", `SERVER NOTE: {"Performance": ${JSON.stringify(note)}}`);
+  });
+
   socket.on("ui-btn", (msg): void => {
     logger.log("info", `Client UI: ${msg}`);
   });
@@ -129,7 +133,8 @@ io.on("connection", (socket: Socket) => {
     // Handle button presses sent from client
     logger.log(
       "info",
-      `Button click: '${data.cmd}' on device: '${data.device}' [msg: '${data.msg}']`,
+      `SERVER NOTE: {"Command": ${JSON.stringify(data)}}`,
+      // `Button click: '${data.cmd}' on device: '${data.device}' [msg: '${data.msg}']`,
     );
     if (data.device == "all") {
       // Send command to all watches

src/dashboard/src/public/javascripts/client.ts

@@ -354,7 +354,79 @@ let ctlButtons = {
   sendCommand: "Send Cmd: ",
 };
 
+function addServerNotes(id: string) {
+  let selElement = document.getElementById(id)!;
+  const form = document.createElement("form");
+  form.id = "myForm";
+
+  const textLabel = document.createElement("label");
+  textLabel.setAttribute("for", "textInput");
+  textLabel.textContent = "Enter note:";
+
+  const textInput = document.createElement("input");
+  textInput.type = "text";
+  textInput.id = "textInput";
+  textInput.name = "textInput";
+  textInput.required = true;
+
+  const optionLabel = document.createElement("label");
+  optionLabel.textContent = "Section:";
+
+  const option1 = document.createElement("input");
+  option1.type = "radio";
+  option1.id = "option1";
+  option1.name = "options";
+  option1.value = "Start";
+  option1.required = true;
+
+  const option1Label = document.createElement("label");
+  option1Label.setAttribute("for", "option1");
+  option1Label.textContent = "Start";
+
+  const option2 = document.createElement("input");
+  option2.type = "radio";
+  option2.id = "option2";
+  option2.name = "options";
+  option2.value = "End";
+
+  const option2Label = document.createElement("label");
+  option2Label.setAttribute("for", "option2");
+  option2Label.textContent = "End";
+
+  const submitButton = document.createElement("button");
+  submitButton.type = "submit";
+  submitButton.textContent = "Create Note";
+
+  form.appendChild(textLabel);
+  form.appendChild(textInput);
+  form.appendChild(optionLabel);
+  form.appendChild(option1);
+  form.appendChild(option1Label);
+  form.appendChild(option2);
+  form.appendChild(option2Label);
+  form.appendChild(submitButton);
+
+  selElement.appendChild(form);
+
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+    const textInputValue = textInput.value;
+    const selectedOption = document.querySelector(
+      'input[name="options"]:checked',
+    )?.value;
+
+    if (selectedOption) {
+      let note = { text: textInputValue, section: selectedOption };
+      console.log("Sending note:", JSON.stringify(note));
+      socket.emit("btn-note", note);
+    } else {
+      alert("Please select an option");
+    }
+  });
+}
+
 addButtons("main-controls", ctlButtons, "all");
+addServerNotes("serverNotes");
 
 // TODO: collapsible
 // TODO: explain symbols/offsets/...