Macro recorder update, Macro service added (for the panels)

fe/src/components/macros/MacroOverview.vue

@@ -3,8 +3,8 @@
     <h4 class="border-b-2 border-transparent">Saved Macros</h4>
     <div class="macro-overview__list">
       <div class="macro-item" v-for="(macro, i) in macros.list" :key="i">
-        <ButtonComp variant="dark" class="w-full" size="sm" @click.prevent="runMacro(macro)">
-          <IconKeyboard /> {{ macro }}
+        <ButtonComp variant="dark" class="w-full" size="sm">
+          <IconKeyboard /> {{ macro.name }}
         </ButtonComp>
       </div>
     </div>
@@ -12,30 +12,26 @@
 </template>
 
 <script setup>
+// TODO
+// - load macro on click
+// - delete macro
+
 import { IconKeyboard } from '@tabler/icons-vue'
 import ButtonComp from '../base/ButtonComp.vue'
 import { onMounted, reactive } from 'vue'
 import axios from 'axios'
 import { appUrl, isLocal } from '@/services/ApiService'
 import { AuthCall } from '@/services/EncryptService'
+import { GetMacroList, RunMacro } from '@/services/MacroService'
 
 const macros = reactive({
   list: [],
 })
 
-onMounted(() => {
-  axios.post(appUrl() + '/macro/list').then((data) => {
-    if (data.data.length > 0) macros.list = data.data
-  })
+onMounted(async () => {
+  const list = await GetMacroList()
+  macros.list = list
 })
-
-function runMacro(macro) {
-  const data = isLocal() ? { macro: macro } : AuthCall({ macro: macro })
-
-  axios.post(appUrl() + '/macro/play', data).then((data) => {
-    console.log(data)
-  })
-}
 </script>
 
 <style scoped>

fe/src/components/macros/parts/RecorderHeader.vue

@@ -14,7 +14,6 @@
         <ButtonComp
           v-if="!macroRecorder.state.record"
           variant="primary"
-          size="sm"
           @click="macroRecorder.state.record = true"
         >
           <IconPlayerRecordFilled class="text-red-500" />Record
@@ -22,7 +21,6 @@
         <ButtonComp
           v-if="macroRecorder.state.record"
           variant="danger"
-          size="sm"
           @click="macroRecorder.state.record = false"
         >
           <IconPlayerStopFilled class="text-white" />Stop
@@ -37,7 +35,6 @@
         <ButtonComp
           v-if="!macroRecorder.state.edit"
           variant="secondary"
-          size="sm"
           @click="macroRecorder.state.edit = true"
         >
           <IconPencil />Edit
@@ -45,7 +42,6 @@
         <ButtonComp
           v-if="macroRecorder.state.edit"
           variant="danger"
-          size="sm"
           @click="macroRecorder.resetEdit()"
         >
           <IconPlayerStopFilled />Stop

fe/src/services/MacroService.js

@@ -0,0 +1,24 @@
+import axios from 'axios'
+import { appUrl, isLocal } from './ApiService'
+import { AuthCall } from './EncryptService'
+
+export const GetMacroList = async () => {
+  const request = await axios.post(appUrl() + '/macro/list')
+  return sortMacroList(request.data)
+}
+
+const sortMacroList = (list) => {
+  return [...list].sort((a, b) => a.name.localeCompare(b.name))
+}
+
+export const RunMacro = async (macro) => {
+  const data = isLocal() ? { macro: macro } : AuthCall({ macro: macro })
+  const request = await axios.post(appUrl() + '/macro/play', data)
+  return request.data
+}
+
+export const CheckMacroListChange = (oldList, newList) => {
+  console.log(oldList, JSON.stringify(newList))
+
+  return oldList !== JSON.stringify(newList)
+}

fe/src/stores/macrorecorder.js

@@ -130,7 +130,6 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
 
   const changeName = (name) => {
     macroName.value = name
-    console.log(macroName.value)
   }
 
   const changeDelay = (fixed) => {