Merge pull request #14 from medzernik/prototype2

Prototype2

data_json.json

@@ -4,13 +4,13 @@
     "icon": "i",
     "macros": [
       {
-        "name": "Macro Name",
+        "name": "auto run",
         "sequence": [],
         "trigger": {
           "type": "KeyPressEvent",
           "data": [
             {
-              "keypress": 7,
+              "keypress": 26,
               "press_duration": 0
             }
           ]
@@ -21,7 +21,13 @@
     "active": true
   },
   {
-    "name": "sfasdfasdasdf",
+    "name": "Fortnite",
+    "icon": "i",
+    "macros": [],
+    "active": false
+  },
+  {
+    "name": "test",
     "icon": "i",
     "macros": [],
     "active": false

src-tauri/src/main.rs

@@ -93,6 +93,7 @@ fn main() {
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 
+
     run_this();
 }
 

src-tauri/tauri.conf.json

@@ -58,7 +58,7 @@
         "height": 600,
         "resizable": true,
         "title": "wooting-macros",
-        "width": 800
+        "width": 1000
       }
     ]
   }

src/App.tsx

@@ -1,5 +1,6 @@
 import {useEffect, useState} from "react";
 import {invoke} from "@tauri-apps/api/tauri";
+import { appWindow, PhysicalSize } from '@tauri-apps/api/window';
 import "./App.css";
 import {Flex} from '@chakra-ui/react'
 import {Route} from "wouter";
@@ -12,6 +13,8 @@ function App() {
   const [collections, setCollections] = useState<Collection[]>([])
   const [isLoading, setLoading] = useState(true);
 
+  appWindow.setMinSize(new PhysicalSize(1000, 600));
+
   useEffect(() => {
     invoke<Collection[]>("get_configuration").then((res) => {
       console.log(res)
@@ -26,7 +29,7 @@ function App() {
   // Loading State is required, since getting data from the backend is async - Update Loading Screen
   if (isLoading) {
     return(
-      <Flex h="100vh">
+      <Flex h="100vh" justifyContent="center" alignItems="center">
         Loading
       </Flex>
     )

src/components/AddMacroView.tsx

@@ -2,8 +2,9 @@ import { BaseSyntheticEvent, useEffect, useState } from 'react';
 import { Link, useLocation, useRoute } from 'wouter';
 import { Collection, Keypress } from "../types";
 import { webCodeHIDLookup, HIDLookup } from '../HIDmap';
-import { Input, Button, Flex, HStack, VStack, Text, Alert, AlertIcon, Kbd } from '@chakra-ui/react'
+import { Input, Button, Flex, HStack, VStack, Text, Alert, AlertIcon, Kbd, Divider, IconButton } from '@chakra-ui/react'
 import { EditIcon } from '@chakra-ui/icons'
+import { updateBackendConfig } from '../utils';
 
 type Props = {
   collections: Collection[]
@@ -49,6 +50,7 @@ const AddMacroView = ({collections}: Props) => {
             collections[parseInt(params.cid)].macros.push({name: macroName, active: true, trigger:{ type: "KeyPressEvent", data: triggerKeys }, sequence: []})
         }
         // update backend here
+        updateBackendConfig(collections)
         setLocation("/")
     }
 
@@ -57,9 +59,9 @@ const AddMacroView = ({collections}: Props) => {
     }
 
     return (
-        <VStack minH="100vh" spacing="16px">
+        <VStack minH="100vh">
             {/** Header */}
-            <HStack w="100%" p="4" borderBottom="1px">
+            <HStack w="100%" p="4" spacing="16px">
                 <Link href='/'><Button>Back</Button></Link>
                 <Flex w="100%" justifyContent="space-between">
                     <Flex w="100%" gap="8px">
@@ -71,21 +73,55 @@ const AddMacroView = ({collections}: Props) => {
                 </Flex>
                 <Button colorScheme="yellow" isDisabled={!(triggerKeys.length > 0)} onClick={onSaveButtonPress}>Save Macro</Button>
             </HStack>
-            {/** Trigger Area */}
-            <VStack spacing="16px">
-                <Text fontWeight="semibold" fontSize="xl">Trigger Key(s)</Text>
-                <Button leftIcon={<EditIcon />} onClick={onRecordButtonPress} colorScheme={recording ? 'red' : 'gray'}>Record</Button>
-                {recording && 
-                    <Alert status='info' rounded="md">
-                        <AlertIcon />
-                        Input recording in progress.
-                    </Alert>
-                }
-            </VStack>
-            <HStack spacing="4px">
-                {triggerKeys.map((key:Keypress, index:number) => 
-                    <Kbd key={index}>{HIDLookup.get(key.keypress)?.displayString}</Kbd>
-                )}
+            <HStack w="100%" spacing="0px">
+                {/** Macro Type Area */}
+                <HStack w="50%" h="full" p="4" justifyContent="space-between" bg="gray.300">
+                    <VStack spacing="16px" alignItems="normal" h="full">
+                        <Text fontWeight="semibold" fontSize="xl">Macro Type</Text>
+                        <HStack>
+                            <IconButton icon={<EditIcon />} aria-label="macro type button"></IconButton>
+                            <IconButton icon={<EditIcon />} aria-label="macro type button"></IconButton>
+                            <IconButton icon={<EditIcon />} aria-label="macro type button"></IconButton>
+                            <IconButton icon={<EditIcon />} aria-label="macro type button"></IconButton>
+                        </HStack>
+                    </VStack>
+                    <VStack maxWidth="50%" alignItems="normal" h="full">
+                        <Text fontWeight="semibold" fontSize="lg">Toggle</Text>
+                        <Text fontSize="md">The macro will loop itself after it finishes until the trigger key(s) is pressed again.</Text>
+                    </VStack>
+                </HStack>
+                {/** Trigger Area */}
+                <HStack w="50%" h="full" p="4" bg="gray.400">
+                    <VStack alignItems="normal" w="full" h="full">
+                        {recording && 
+                            <Alert status='info' rounded="md" h="32px">
+                                <AlertIcon />
+                                Input recording in progress.
+                            </Alert>
+                        }
+                        <Text fontWeight="semibold" fontSize="xl">Trigger Key(s)</Text>
+                        <HStack spacing="4px">
+                            {triggerKeys.map((key:Keypress, index:number) => 
+                                <Kbd key={index}>{HIDLookup.get(key.keypress)?.displayString}</Kbd>
+                                )}
+                        </HStack>
+                    </VStack>
+                    <VStack maxWidth="50%" alignItems="normal">
+                        <Button leftIcon={<EditIcon />} onClick={onRecordButtonPress} colorScheme={recording ? 'red' : 'gray'}>Record</Button>
+                    </VStack>
+                </HStack>
+            </HStack>
+            <Divider />
+            <HStack w="100%" h="full">
+                {/** Left Panel */}
+                <VStack bg="gray.200" w="33%" h="full">
+                </VStack>
+                {/** Center Panel */}
+                <VStack bg="gray.200" w="33%" h="full">
+                </VStack>
+                {/** Right Panel */}
+                <VStack bg="gray.200" w="33%" h="full">
+                </VStack>
             </HStack>
         </VStack>
     )

src/components/EditMacroView.tsx

@@ -4,6 +4,7 @@ import { Collection, Keypress, Macro } from "../types";
 import { webCodeHIDLookup, HIDLookup } from '../HIDmap';
 import { Input, Button, Flex, HStack, VStack, Text, Alert, AlertIcon, Kbd } from '@chakra-ui/react'
 import { EditIcon } from '@chakra-ui/icons'
+import { updateBackendConfig } from '../utils';
 
 type Props = {
   collections: Collection[]
@@ -61,6 +62,7 @@ const EditMacroView = ({collections}: Props) => {
             collections[parseInt(params.cid)].macros[parseInt(params.mid)] = {name: macroName, active: true, trigger: { type: "KeyPressEvent", data: triggerKeys }, sequence: []}
         }
         // update backend here
+        updateBackendConfig(collections)
         setLocation("/")
     }
 

src/components/MacroCard.tsx

@@ -45,6 +45,7 @@ function MacroCard({macro, index, collectionIndex, onDelete}: Props) {
         </Menu>
       </Flex>
       {/** Trigger Keys Display */}
+      <Text fontSize="sm" color="gray.600" alignSelf="self-start">Trigger Keys:</Text>
       <Flex w="100%" gap="4px">
         {trigger?.map((key:Keypress, index:number) =>
           <Kbd key={index}>{HIDLookup.get(key.keypress)?.displayString}</Kbd>

src/components/Overview.tsx

@@ -6,6 +6,7 @@ import { Link } from 'wouter';
 import CollectionButton from './CollectionButton';
 import { Box, Button, Flex, HStack, useColorMode, VStack, Text, IconButton, Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton, useDisclosure, Input } from '@chakra-ui/react'
 import { AddIcon, EditIcon } from '@chakra-ui/icons'
+import { updateBackendConfig } from '../utils';
 
 type Props = {
     collections: Collection[]
@@ -17,7 +18,7 @@ function Overview({collections}: Props) {
     const { isOpen: isOpenRenameCollection, onOpen: onOpenRenameCollection, onClose: onCloseRenameCollection } = useDisclosure()
     const [collectionName, setCollectionName] = useState("")
     const [collectionIndex, setCollectionIndex] = useState(0)
-    const [canUseCollectionName, setCanUseCollectionName] = useState(false)
+    const [canUseCollectionName, setCanUseCollectionName] = useState(true)
 
     useEffect(() => {
         for (let i = 0; i < collections.length; i++) {
@@ -31,12 +32,7 @@ function Overview({collections}: Props) {
     const onAddCollectionButtonPress = () => {
         console.log("add collection button pressed")
         collections.push({active: false, icon:"i", macros: [], name: collectionName })
-        // update backend here
-        invoke("set_configuration", { frontendData: collections }).then((res) => {
-            console.log(res)
-        }).catch(e => {
-        console.error(e)
-        })
+        updateBackendConfig(collections)
         onCloseNewCollection()
     }
 
@@ -62,26 +58,26 @@ function Overview({collections}: Props) {
     const onCollectionToggle = (index:number) => {
         collections[index].active = !collections[index].active
         setCanUseCollectionName(!canUseCollectionName)
-        // update backend here
+        updateBackendConfig(collections)
     }
 
     const onRenameCollection = () => {
         collections[collectionIndex].name = collectionName
         onCloseRenameCollection()
-        // update backend here
+        updateBackendConfig(collections)
     }
 
     const onCollectionDelete = () => {
         collections.splice(collectionIndex, 1)
         collections[0].active = true
         setCollectionIndex(0)
-        // update backend here
+        updateBackendConfig(collections)
     }
 
     const onMacroDelete = (macroIndex:number) => {
         collections[collectionIndex].macros.splice(macroIndex, 1)
         setCollectionName("reset")
-        // update backend here
+        updateBackendConfig(collections)
     }
 
     return (
@@ -136,10 +132,10 @@ function Overview({collections}: Props) {
             <Modal isOpen={isOpenNewCollection} onClose={onCloseNewCollection}>
                 <ModalOverlay />
                 <ModalContent>
-                <ModalHeader>Create New Collection</ModalHeader>
+                <ModalHeader>Give it a unique name</ModalHeader>
                 <ModalCloseButton />
                 <ModalBody>
-                    <Input variant='unstyled' isRequired isInvalid={!canUseCollectionName} onChange={onCollectionNameChange} placeholder='Collection Name'/>
+                    <Input variant='flushed' isRequired isInvalid={!canUseCollectionName} onChange={onCollectionNameChange} placeholder='Collection Name'/>
                 </ModalBody>
                 <ModalFooter>
                     <Button mr={3} onClick={onCloseNewCollection}>
@@ -153,7 +149,7 @@ function Overview({collections}: Props) {
             <Modal isOpen={isOpenRenameCollection} onClose={onCloseRenameCollection}>
                 <ModalOverlay />
                 <ModalContent>
-                <ModalHeader>Rename Collection</ModalHeader>
+                <ModalHeader>Changed your mind?</ModalHeader>
                 <ModalCloseButton />
                 <ModalBody>
                     <Input variant='flushed' isRequired isInvalid={!canUseCollectionName} onChange={onCollectionNameChange} placeholder={collections[collectionIndex].name}/>

src/utils.tsx

@@ -0,0 +1,10 @@
+import { invoke } from "@tauri-apps/api/tauri";
+import { Collection } from "./types";
+
+export const updateBackendConfig = (collections:Collection[]) => {
+        invoke("set_configuration", { frontendData: collections }).then((res) => {
+            console.log(res)
+        }).catch(e => {
+        console.error(e)
+        })
+    }