From a847d8c52c982896233fc40c960e38bbd751b45e Mon Sep 17 00:00:00 2001 From: Elizabeth Cray Date: Sun, 23 Jul 2023 12:41:15 -0400 Subject: [PATCH] Sub-Menu Elements --- package-lock.json | 29 ++++++++ package.json | 9 +-- src-tauri/src/main.rs | 23 +++++-- src-tauri/tauri.conf.json | 2 +- src/App.tsx | 138 +++++++++++++++++++++++++++++--------- src/main.tsx | 1 + src/styles.css | 61 ++++++++++++----- 7 files changed, 206 insertions(+), 57 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3a15ebd..be96f79 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 78ba42c..1441471 100644 --- a/package.json +++ b/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", - "@tauri-apps/api": "^1.4.0" + "react-dom": "^18.2.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", - "@tauri-apps/cli": "^1.4.0" + "vite": "^4.4.4" } } diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 5b86bbd..5f21ad8 100644 --- a/src-tauri/src/main.rs +++ b/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')); - enigo.key_up(Key::Control); + + // TODO: Multi-platform paste + #[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!()) diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index ef56c3f..9fc51a5 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -45,7 +45,7 @@ "windows": [ { "fullscreen": false, - "resizable": false, + "resizable": true, "title": "Drone Input", "width": 400, "height": 320 diff --git a/src/App.tsx b/src/App.tsx index 9ff1197..8808f93 100644 --- a/src/App.tsx +++ b/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(""); + const getSubjects = (input: Array) => { + // TODO: Put all single-level elements at bottom let subjects: Array = []; 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 = []; + 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 (
); + } else { + return ( +
+ {getTopicChildren(subTopic).map((text: string, index: number) => { + let displayText: string = text; + displayText = displayText.replace(/.*:: /, ""); + return( +
{ + handleSubClick(subTopic, index) + }} + > + {displayText} +
+ ) + })} +
+ ); + } + } + + 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 (
- {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 ( - { - handleClick(type) - }} - value={dispType} - /> - ); - })} +
+
+ {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 ( + { + handleTopicClick(type) + }} + value={dispType} + /> + ); + })} +
+ +
+
+
{setSubTopic("")}}> + {/*TODO: Drone ID and Credits*/} + 4661 +
+
); } diff --git a/src/main.tsx b/src/main.tsx index 79a3b66..ee78540 100644 --- a/src/main.tsx +++ b/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"; diff --git a/src/styles.css b/src/styles.css index e12ab84..69a12b0 100644 --- a/src/styles.css +++ b/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 {