From 4ce03f7a4b0afcb0d4a6481161d145843bf6a5e9 Mon Sep 17 00:00:00 2001
From: Jesse Malotaux <jemx@mboutrecht.nl>
Date: Fri, 11 Apr 2025 14:02:07 +0200
Subject: [PATCH] Macro recorder update, Macro service added (for the panels)

---
 be/app/macro.go                               | 14 +++++++----
 be/app/structs/macro-struct.go                |  5 ++++
 fe/src/components/macros/MacroOverview.vue    | 24 ++++++++-----------
 .../macros/parts/RecorderHeader.vue           |  4 ----
 fe/src/services/MacroService.js               | 24 +++++++++++++++++++
 fe/src/stores/macrorecorder.js                |  1 -
 6 files changed, 48 insertions(+), 24 deletions(-)
 create mode 100644 fe/src/services/MacroService.js

diff --git a/be/app/macro.go b/be/app/macro.go
index 4b82e5a..6da6a42 100644
--- a/be/app/macro.go
+++ b/be/app/macro.go
@@ -48,17 +48,21 @@ func ListMacros(w http.ResponseWriter, r *http.Request) {
 		log.Println(err)
 	}
 
-	var fileNames []string
+	var macroList []structs.MacroInfo
 
 	for _, file := range files {
 		filename := filepath.Base(file.Name())
-		filename = strings.TrimSuffix(filename, filepath.Ext(filename))
-		filename = strings.Replace(filename, "_", " ", -1)
+		macroname := strings.TrimSuffix(filename, filepath.Ext(filename))
+		nicename := strings.Replace(macroname, "_", " ", -1)
 
-		fileNames = append(fileNames, filename)
+		log.Println(macroname, nicename)
+		macroList = append(macroList, structs.MacroInfo{
+			Name:      nicename,
+			Macroname: macroname,
+		})
 	}
 
-	json.NewEncoder(w).Encode(fileNames)
+	json.NewEncoder(w).Encode(macroList)
 }
 
 func DeleteMacro(w http.ResponseWriter, r *http.Request) {}
diff --git a/be/app/structs/macro-struct.go b/be/app/structs/macro-struct.go
index a22fa1b..e91a51c 100644
--- a/be/app/structs/macro-struct.go
+++ b/be/app/structs/macro-struct.go
@@ -17,3 +17,8 @@ type NewMacro struct {
 	Name  string `json:"name"`
 	Steps []Step `json:"steps"`
 }
+
+type MacroInfo struct {
+	Name      string `json:"name"`
+	Macroname string `json:"macroname"`
+}
diff --git a/fe/src/components/macros/MacroOverview.vue b/fe/src/components/macros/MacroOverview.vue
index 2f17a95..23d36e2 100644
--- a/fe/src/components/macros/MacroOverview.vue
+++ b/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>
diff --git a/fe/src/components/macros/parts/RecorderHeader.vue b/fe/src/components/macros/parts/RecorderHeader.vue
index 8687fa3..2ab19c6 100644
--- a/fe/src/components/macros/parts/RecorderHeader.vue
+++ b/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
diff --git a/fe/src/services/MacroService.js b/fe/src/services/MacroService.js
new file mode 100644
index 0000000..553f93f
--- /dev/null
+++ b/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)
+}
diff --git a/fe/src/stores/macrorecorder.js b/fe/src/stores/macrorecorder.js
index 54cfa64..266f484 100644
--- a/fe/src/stores/macrorecorder.js
+++ b/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) => {