MacroView page added, Recorder store and service added, route added.

fe/src/router/index.js

@@ -19,6 +19,11 @@ const router = createRouter({
       name: 'macros',
       component: () => import('../views/MacrosView.vue'),
     },
+    {
+      path: '/devices',
+      name: 'devices',
+      component: () => import('../views/DevicesView.vue'),
+    },
     {
       path: '/settings',
       name: 'settings',

fe/src/services/ApiService.js

@@ -0,0 +1,7 @@
+export const appUrl = () => {
+  return window.location.port !== 6970 ? `http://${window.location.hostname}:6970` : ''
+}
+
+export const isLocal = () => {
+  return window.location.hostname === '127.0.0.1' || window.location.hostname === 'localhost'
+}

fe/src/services/MacroRecordService.js

@@ -104,3 +104,24 @@ export const isRepeat = (lastStep, e, direction) => {
     lastStep.direction === direction
   )
 }
+
+export const invalidMacro = (steps) => {
+  const downKeys = []
+  const upKeys = []
+
+  Object.keys(steps).forEach((stepKey) => {
+    const step = steps[stepKey]
+
+    if (step.type !== 'key') return
+
+    if (step.direction == 'down') downKeys.push(step.key)
+    if (step.direction == 'up') {
+      if (!downKeys.includes(step.key)) upKeys.push(step.key)
+      else downKeys.splice(downKeys.indexOf(step.key), 1)
+    }
+  })
+
+  if (upKeys.length === 0 && downKeys.length === 0) return false
+
+  return { down: downKeys, up: upKeys }
+}

fe/src/stores/macrorecorder.js

@@ -1,7 +1,9 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
-import { filterKey, isRepeat } from '../services/MacroRecordService'
+import { filterKey, isRepeat, invalidMacro } from '../services/MacroRecordService'
+import axios from 'axios'
+import { appUrl } from '@/services/ApiService'
 
 export const useMacroRecorderStore = defineStore('macrorecorder', () => {
   // Properties - State values
@@ -10,8 +12,11 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
     edit: false,
     editKey: false,
     editDelay: false,
+    validationErrors: false,
   })
 
+  const macroName = ref('')
+
   const steps = ref([])
 
   const delay = ref({
@@ -30,7 +35,11 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
 
     if (steps.value[keyIndex]) returnVal = steps.value[keyIndex]
     if (delayIndex && steps.value[delayIndex])
-      returnVal = { delay: steps.value[delayIndex], key: steps.value[keyIndex] }
+      returnVal = {
+        delay: steps.value[delayIndex],
+        key: steps.value[keyIndex],
+        delayIndex: delayIndex,
+      }
 
     return returnVal
   }
@@ -76,8 +85,42 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
     }
   }
 
+  const insertKey = (e, direction, adjacentDelayIndex) => {
+    let min, max, newKeyIndex, newDelayIndex
+
+    if (adjacentDelayIndex === null) {
+      min = state.value.editKey == 0 ? 0 : state.value.editKey
+      max = state.value.editKey == 0 ? 1 : false
+
+      newKeyIndex = max === false ? min + 2 : min
+      newDelayIndex = min + 1
+    } else if (state.value.editKey < adjacentDelayIndex) {
+      min = state.value.editKey
+      max = adjacentDelayIndex
+      newKeyIndex = min + 2
+      newDelayIndex = min + 1
+    } else {
+      min = adjacentDelayIndex
+      max = state.value.editKey
+      newKeyIndex = min + 1
+      newDelayIndex = min + 2
+    }
+
+    if (max !== false) {
+      for (let i = Object.keys(steps.value).length - 1; i >= max; i--) {
+        steps.value[i + 2] = steps.value[i]
+      }
+    }
+
+    recordStep(e, direction, newKeyIndex)
+    recordStep(10, false, newDelayIndex)
+
+    state.value.editKey = false
+  }
+
   const deleteEditKey = () => {
-    steps.value.splice(state.value.editKey, 2)
+    if (state.value.editKey === 0) steps.value.splice(state.value.editKey, 2)
+    else steps.value.splice(state.value.editKey - 1, 2)
     state.value.editKey = false
   }
 
@@ -85,6 +128,11 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
     delay.value.start = performance.now()
   }
 
+  const changeName = (name) => {
+    macroName.value = name
+    console.log(macroName.value)
+  }
+
   const changeDelay = (fixed) => {
     delay.value.fixed = fixed
 
@@ -118,11 +166,25 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
 
   const reset = () => {
     state.value.record = false
+    delay.value.start = 0
     steps.value = []
 
     if (state.value.edit) resetEdit()
   }
 
+  const save = () => {
+    state.value.validationErrors = invalidMacro(steps.value)
+
+    if (state.value.validationErrors) return false
+
+    axios
+      .post(appUrl() + '/macro/record', { name: macroName.value, steps: steps.value })
+      .then((data) => {
+        console.log(data)
+      })
+    return true
+  }
+
   return {
     state,
     steps,
@@ -131,11 +193,14 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
     getAdjacentKey,
     getEditDelay,
     recordStep,
+    insertKey,
     deleteEditKey,
     restartDelay,
+    changeName,
     changeDelay,
     toggleEdit,
     resetEdit,
     reset,
+    save,
   }
 })

fe/src/views/MacrosView.vue

@@ -1,11 +1,17 @@
 <template>
   <div id="macros" class="panel">
-    <h1>Macros</h1>
+    <h1 class="panel__title">Macros</h1>
+    <div class="panel__content !p-0">
+      <div class="macro-panel__content">
+        <MacroOverview />
         <MacroRecorder />
       </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import MacroOverview from '@/components/macros/MacroOverview.vue'
 import MacroRecorder from '../components/macros/MacroRecorder.vue'
 import { onMounted, ref } from 'vue'
 
@@ -25,7 +31,10 @@ const keyDown = (e) => {
 <style scoped>
 @reference "@/assets/main.css";
 
-input {
+.macro-panel__content {
-  @apply border rounded-md bg-white/10 p-2;
+  @apply grid
+  grid-cols-[25ch_1fr]
+  gap-6
+  pt-2;
 }
 </style>