liz/AllenWrench
liz/AllenWrench
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Sub-Menu Elements

Browse Source
This commit is contained in:
Elizabeth Cray 2023-07-23 12:41:15 -04:00
parent 591edda296
commit a847d8c52c
7 changed files with 206 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
package-lock.json generated
View File

@ -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",

9
package.json
View File

@ -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"
}
}

23
src-tauri/src/main.rs
View File

@ -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!())

2
src-tauri/tauri.conf.json
View File

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

138
src/App.tsx
View File

@ -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>
);
}

1
src/main.tsx
View File

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

61
src/styles.css
View File

@ -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 {