Sub-Menu Elements

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tauri-apps/api": "^1.4.0",
+        "bootstrap": "^5.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -769,6 +770,16 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@tauri-apps/api": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.4.0.tgz",
@@ -1033,6 +1044,24 @@
         "node": ">=4"
       }
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz",
+      "integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.7"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.21.9",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz",

package.json

@@ -10,16 +10,17 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@tauri-apps/api": "^1.4.0",
+    "bootstrap": "^5.3.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.2.0"
-    "@tauri-apps/api": "^1.4.0"
   },
   "devDependencies": {
+    "@tauri-apps/cli": "^1.4.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
     "typescript": "^5.0.2",
-    "vite": "^4.4.4",
+    "vite": "^4.4.4"
-    "@tauri-apps/cli": "^1.4.0"
   }
 }

src-tauri/src/main.rs

@@ -9,24 +9,39 @@ use arboard::Clipboard;
 // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
 #[tauri::command]
 fn type_str(input: String) {
-    println!("Type this: {}", input);
+    #[cfg(dev)]
+    println!(">: {}", input);
+
     let mut enigo = Enigo::new();
     let mut clipboard = Clipboard::new().unwrap();
+
+    // Load input into clipboard
     clipboard.set_text(input).unwrap();
 
+    // TODO: Multi-platform window switch
     enigo.key_down(Key::Alt);
     enigo.key_click(Key::Tab);
     enigo.key_up(Key::Alt);
 
     thread::sleep(Duration::from_millis(200));
-    enigo.key_down(Key::Control);
+
-    enigo.key_click(Key::Layout('v'));
+    // TODO: Multi-platform paste
-    enigo.key_up(Key::Control);
+    #[cfg(not(dev))]{
+        enigo.key_down(Key::Control);
+        enigo.key_click(Key::Layout('v'));
+        enigo.key_up(Key::Control);
+    }
+
     thread::sleep(Duration::from_millis(20));
+
+    // Close program
+    #[cfg(not(dev))]
     std::process::exit(0);
+
 }
 
 fn main() {
+    // TODO: Set Window location on launch
     tauri::Builder::default()
         .invoke_handler(tauri::generate_handler![type_str])
         .run(tauri::generate_context!())

src-tauri/tauri.conf.json

@@ -45,7 +45,7 @@
     "windows": [
       {
         "fullscreen": false,
-        "resizable": false,
+        "resizable": true,
         "title": "Drone Input",
         "width": 400,
         "height": 320

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 assembledStr: string = generatePayload(filtered[0]);
-      let code: string = filtered[0].code;
+      setSubTopic("");
-      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);
       invoke('type_str', {input: assembledStr});
     }else{
       // Open Submenu for type
+      setSubTopic(type);
     }
   };
 
   return (
     <div className="container">
-      {getSubjects(codes).map((type: string, index: number) => {
+      <div className="row">
-        let dispType: string = type;
+        <div className="col-4">
-        let filtered = codes.filter((code: Code) => code.type === type);
+          {getSubjects(codes).map((type: string, index: number) => {
-        if (filtered.length == 1) {
+            let dispType: string = type;
-          dispType += ((filtered[0].text == "")?" :: ...":((filtered[0].text == ".")?"":(" :: "+filtered[0].text)));
+            let filtered = codes.filter((code: Code) => code.type === type);
-        }
+            if (filtered.length == 1) {
-        return (
+              dispType += ((filtered[0].text == "")?" :: ...":((filtered[0].text == ".")?"":(" :: "+filtered[0].text)));
-          <input
+            }
-            className="row"
+            return (
-            key={index}
+              <input
-            type="button"
+                className="item"
-            onClick={() =>  {
+                key={index}
-              handleClick(type)
+                type="button"
-            }}
+                onClick={() =>  {
-            value={dispType}
+                  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;
-
+  overflow: hidden;
-  color: #ffffff;
+  /* color: #ffffff; */
   background-color: #231929;
 
   font-synthesis: none;
@@ -15,18 +15,45 @@
 }
 
 .container {
-  margin: 0;
+  background-color: #231929;
-  display: flex;
-  flex-direction: column;
-  justify-content: left;
-  text-align: left;
 }
-/*
-.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 {
+.item:hover {
-  background-color: #382c44;
+  background-color: #534264;
 }
 
-.row:active {
+.item:active {
-  background-color: #493a59;
+  background-color: #59486c;
 }
 
 h1 {