Sub-Menu Elements

src/App.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { resolveResource } from "@tauri-apps/api/path";
 import { readTextFile } from "@tauri-apps/api/fs";
 import { invoke } from '@tauri-apps/api/tauri'
@@ -9,11 +10,17 @@ type Code = {
   type: string;
   text: string;
 };
+
+// TODO: Make Drone ID Dynamic
+// TODO: Make Drone ID configurable
 const droneId = 4661;
 
 function App() {
 
+  const [subTopic, setSubTopic] = useState<string>("");
+
   const getSubjects = (input: Array<Code>) => {
+    // TODO: Put all single-level elements at bottom
     let subjects: Array<string> = [];
     input.forEach((code: Code) => {
       if (!subjects.includes(code.type)) {
@@ -23,48 +30,115 @@ function App() {
     return subjects;
   };
 
-  const handleClick = (type: string) => {
+  const getTopicChildren = (topic: string) => {
+    let topicChildren: Array<string> = [];
+    codes.forEach((code: Code) => {
+      if (code.type == topic) {
+        if (!topicChildren.includes(code.text)) {
+          topicChildren.push(code.text)
+        }
+      }
+    });
+    return topicChildren;
+  };
+
+  const generatePayload = (code: Code) => {
+    console.dir(code);
+    let assembledStr: string = droneId.toString();
+    let codeId: string = code.code.toString();
+    if (code.code < 10) {
+      codeId = "00" + codeId;
+    }else if (code.code < 100) {
+      codeId = "0" + codeId;
+    }
+    assembledStr += " :: Code " + codeId;
+    assembledStr += " :: " + code.type;
+    if (code.text != "."){
+      assembledStr += " :: " + code.text;
+    }
+    console.log(assembledStr);
+    return assembledStr;
+  };
+
+  const handleSubClick = (topic: string, index: number) => {
+    let text = getTopicChildren(topic)[index];
+    let filtered = codes.filter((code: Code) => code.type === topic && code.text === text);
+    if (filtered.length == 1) {
+      let payload: string = generatePayload(filtered[0]);
+      setSubTopic("");
+      invoke('type_str', {input: payload});
+    }
+  };
+
+  const SubMenu = () => {
+    if (subTopic == "") {
+      return (<div></div>);
+    } else {
+      return (
+        <div className="col-8 menu">
+          {getTopicChildren(subTopic).map((text: string, index: number) => {
+            let displayText: string = text;
+            displayText = displayText.replace(/.*:: /, "");
+            return(
+              <div
+                className="row sub-element"
+                key={index}
+                onClick={() => {
+                  handleSubClick(subTopic, index)
+                }}
+              >
+                {displayText}
+              </div>
+            )
+          })}
+        </div>
+      );
+    }
+  }
+
+  const handleTopicClick = (type: string) => {
     let filtered = codes.filter((code: Code) => code.type === type);
     if (filtered.length == 1) {
-      let assembledStr: string = droneId.toString();
-      let code: string = filtered[0].code;
-      if (filtered[0].code < 10) {
-        code = "00" + code;
-      }else if (filtered[0].code < 100) {
-        code = "0" + code;
-      }
-      assembledStr += " :: Code " + code;
-      assembledStr += " :: " + type;
-      if (filtered[0].text != "."){
-        assembledStr += " :: " + filtered[0].text;
-      }
-      console.log(assembledStr);
+      let assembledStr: string = generatePayload(filtered[0]);
+      setSubTopic("");
       invoke('type_str', {input: assembledStr});
     }else{
       // Open Submenu for type
+      setSubTopic(type);
     }
   };
 
   return (
     <div className="container">
-      {getSubjects(codes).map((type: string, index: number) => {
-        let dispType: string = type;
-        let filtered = codes.filter((code: Code) => code.type === type);
-        if (filtered.length == 1) {
-          dispType += ((filtered[0].text == "")?" :: ...":((filtered[0].text == ".")?"":(" :: "+filtered[0].text)));
-        }
-        return (
-          <input
-            className="row"
-            key={index}
-            type="button"
-            onClick={() =>  {
-              handleClick(type)
-            }}
-            value={dispType}
-            />
-        );
-      })}
+      <div className="row">
+        <div className="col-4">
+          {getSubjects(codes).map((type: string, index: number) => {
+            let dispType: string = type;
+            let filtered = codes.filter((code: Code) => code.type === type);
+            if (filtered.length == 1) {
+              dispType += ((filtered[0].text == "")?" :: ...":((filtered[0].text == ".")?"":(" :: "+filtered[0].text)));
+            }
+            return (
+              <input
+                className="item"
+                key={index}
+                type="button"
+                onClick={() =>  {
+                  handleTopicClick(type)
+                }}
+                value={dispType}
+                />
+            );
+          })}
+        </div>
+        <SubMenu/>
+      </div>
+      <div className="row footer">
+        <div className="col-12 footer-content" onClick={()=>{setSubTopic("")}}>
+        {/*TODO: Drone ID and Credits*/}
+        4661
+        </div>
+      </div>
     </div>
   );
 }

src/main.tsx

@@ -1,3 +1,4 @@
+import 'bootstrap/dist/css/bootstrap.css';
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";

src/styles.css

@@ -3,8 +3,8 @@
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
-
-  color: #ffffff;
+  overflow: hidden;
+  /* color: #ffffff; */
   background-color: #231929;
 
   font-synthesis: none;
@@ -15,18 +15,45 @@
 }
 
 .container {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: left;
-  text-align: left;
+  background-color: #231929;
 }
-/*
-.logo.tauri:hover {
-  filter: drop-shadow(0 0 2em #24c8db);
-} */
 
-.row {
+.sub-element {
+  width: 100%;
+  padding: 2px;
+  border: 0px solid #ffffff00;
+  border-radius: 4px;
+  margin-left: 4px;
+}
+
+.sub-element:hover {
+  background-color: #231929;
+}
+
+.menu {
+  z-index: 1;
+  background-color: #382C44;
+  color: #ffffff;
+  /* filter: drop-shadow(-20px 0 1em #382C44); */
+  box-shadow: -24px 0 1em  6px #382C44;
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 92vh;
+  padding: 8px;
+}
+
+.footer {
+  display: flex;
+  color: #ffffff;
+  background-color: #231929;
+}
+
+.footer-content {
+  z-index: 2;
+  background-color: #231929;
+}
+
+.item {
   display: flex;
   justify-content: left;
   padding-left: 2px;
@@ -34,16 +61,18 @@
   border: 0px solid #ffffff00;
   border-radius: 4px;
   padding: 2px;
+  padding-top: 0;
+  padding-bottom: 0;
   font-size: 18px;
   color: #ffffff;
 }
 
-.row:hover {
-  background-color: #382c44;
+.item:hover {
+  background-color: #534264;
 }
 
-.row:active {
-  background-color: #493a59;
+.item:active {
+  background-color: #59486c;
 }
 
 h1 {