Update to UIX for alpha version

fe/src/App.vue

@@ -18,7 +18,7 @@
 
 <script setup>
 import MainMenu from '@/components/base/MainMenu.vue'
-import { onMounted, onUpdated, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { RouterView, useRoute } from 'vue-router'
 import { useDeviceStore } from './stores/device'
 import { isLocal } from './services/ApiService'
@@ -37,14 +37,10 @@ onMounted(async () => {
   const hsReq = await device.remoteHandshake()
   handshake.value = hsReq
 
-  device.$subscribe((mutation, state) => {
+  device.$subscribe(() => {
     if (device.key()) handshake.value = true
   })
 })
-
-onUpdated(() => {
-  console.log(device.key())
-})
 </script>
 
 <style scoped>

fe/src/components/base/ContextMenu.vue

@@ -25,8 +25,6 @@ onMounted(() => {
 })
 
 function toggle() {
-  console.log('toggle')
-
   menuOpen.value = !menuOpen.value
 }
 </script>

fe/src/components/devices/RemoteView.vue

@@ -22,7 +22,9 @@
         <div class="grid gap-2">
           <strong>Access requested</strong>
           <ul class="mb-4">
-            <li>Navigate to <em class="font-semibold">http://localhost:6970/devices</em>.</li>
+            <li>
+              Navigate to <em class="font-semibold">http://localhost:{{ server.port }}/devices</em>.
+            </li>
             <li>
               <div class="inline-flex flex-wrap items-center gap-2 w-fit">
                 Click on
@@ -103,6 +105,7 @@ const linkPinInput = ref()
 
 const server = reactive({
   host: '',
+  port: import.meta.env.VITE_MCRM__PORT,
   status: false,
   link: false,
   inputPin: '',

fe/src/components/form/FormSelect.vue

@@ -9,7 +9,6 @@
           <input
             type="search"
             ref="selectSearch"
-            @focus="console.log('focussed')"
             :list="`${name}-search__options`"
             v-model="select.search"
             @change="selectSearchValue($event)"

fe/src/components/macros/components/DeleteKeyDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="delete-key-dialog" class="dialog__content">
-    <h4 class="text-slate-50 mb-4">Delete key</h4>
+    <h4 class="mb-4 text-slate-50">Delete key</h4>
     <div class="flex justify-center w-full mb-4">
       <MacroKey v-if="keyObj" :key-obj="keyObj" />
     </div>
@@ -26,9 +26,6 @@ const keyObj = ref(null)
 
 onMounted(() => {
   keyObj.value = filterKey(macroRecorder.getEditKey())
-  // console.log(macroRecorder.getEditKey());
-  // console.log(keyObj.value);
-  // console.log('---------');
 })
 </script>
 

fe/src/components/macros/components/EditDelayDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="edit-delay-dialog" class="dialog__content">
-    <h4 class="text-slate-50 mb-4">Edit delay</h4>
+    <h4 class="mb-4 text-slate-50">Edit delay</h4>
     <div v-if="editable.delay.value" class="flex justify-center">
       <DelaySpan class="!text-lg" :value="editable.delay.value" />
     </div>
@@ -41,7 +41,6 @@ const editable = reactive({
 onMounted(() => {
   editable.delay = macroRecorder.getEditDelay()
   editable.newDelay.value = editable.delay.value
-  console.log(editable)
 })
 
 const changeDelay = () => {

fe/src/components/macros/components/ValidationErrorDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="validation-error__dialog" class="dialog__content">
-    <h4 class="text-slate-50 mb-4">There's an error in your macro</h4>
+    <h4 class="mb-4 text-slate-50">There's an error in your macro</h4>
 
     <div class="grid gap-4" v-if="(errors && errors.up.length > 0) || errors.down.length > 0">
       <div v-if="errors.down.length > 0">
@@ -50,7 +50,6 @@ onMounted(() => {
       errors.down =
         mutation.events.newValue !== false ? macroRecorder.state.validationErrors.down : []
     }
-    console.log(mutation)
   })
 })
 </script>

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

@@ -5,7 +5,6 @@
       :class="`macro-recorder__input ${macroRecorder.state.record && 'record'}`"
       type="text"
       ref="macroInput"
-      @focus="console.log('focus')"
       @keydown.prevent="macroRecorder.recordStep($event, 'down')"
       @keyup.prevent="macroRecorder.recordStep($event, 'up')"
     />

fe/src/components/panels/PanelEdit.vue

@@ -81,7 +81,7 @@ import {
   StripPanelHTML,
 } from '@/services/PanelService'
 import { usePanelStore } from '@/stores/panel'
-import { onMounted, onUnmounted, onUpdated, reactive, ref } from 'vue'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import AccordionComp from '../base/AccordionComp.vue'
 import FormSelect from '../form/FormSelect.vue'
 import ButtonComp from '../base/ButtonComp.vue'
@@ -140,10 +140,6 @@ onMounted(async () => {
   EditButtonListeners()
 })
 
-onUpdated(() => {
-  console.log('updated')
-})
-
 onUnmounted(() => {
   RemovePanelStyle()
 })
@@ -190,9 +186,7 @@ function savePanelChanges() {
     macros: editPanel.value.macros,
   }
 
-  axios.post(appUrl() + '/panel/save/json', panelData).then((data) => {
-    console.log(data)
-  })
+  axios.post(appUrl() + '/panel/save/json', panelData)
 }
 </script>
 

fe/src/components/panels/PanelsOverview.vue

@@ -54,7 +54,6 @@ const router = useRouter()
 
 onMounted(async () => {
   const panelList = await panel.getList()
-  // console.log(panelList)
 
   panels.list = panelList
 })

fe/src/main.js

@@ -1,15 +1,16 @@
 // import './assets/jemx.scss'
-import "@/assets/main.css";
+import '@/assets/main.css'
+import '@/assets/img/Macrame-Logo-gradient.svg'
 
-import { createApp } from "vue";
-import { createPinia } from "pinia";
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 
-import App from "@/App.vue";
-import router from "@/router";
+import App from '@/App.vue'
+import router from '@/router'
 
-const app = createApp(App);
+const app = createApp(App)
 
-app.use(createPinia());
-app.use(router);
+app.use(createPinia())
+app.use(router)
 
-app.mount("#app");
+app.mount('#app')

fe/src/services/ApiService.js

@@ -2,7 +2,9 @@ import { useDeviceStore } from '@/stores/device'
 import CryptoJS from 'crypto-js'
 
 export const appUrl = () => {
-  return window.location.port !== 6970 ? `http://${window.location.hostname}:6970` : ''
+  return window.location.port !== import.meta.env.VITE_MCRM__PORT
+    ? `http://${window.location.hostname}:${import.meta.env.VITE_MCRM__PORT}`
+    : ''
 }
 
 export const isLocal = () => {

fe/src/services/MacroService.js

@@ -18,7 +18,5 @@ export const RunMacro = async (macro) => {
 }
 
 export const CheckMacroListChange = (oldList, newList) => {
-  console.log(oldList, JSON.stringify(newList))
-
   return oldList !== JSON.stringify(newList)
 }

fe/src/stores/device.js

@@ -58,9 +58,7 @@ export const useDeviceStore = defineStore('device', () => {
   // Server application
   const serverGetRemotes = async (remoteUuid) => {
     axios.post(appUrl() + '/device/list', { uuid: remoteUuid }).then((data) => {
-      // console.log(data.data.devices)
       if (data.data.devices) {
-        console.log(data.data.devices)
         remote.value = data.data.devices
       }
     })

fe/src/stores/macrorecorder.js

@@ -176,11 +176,8 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
 
     if (state.value.validationErrors) return false
 
-    axios
-      .post(appUrl() + '/macro/record', { name: macroName.value, steps: steps.value })
-      .then((data) => {
-        console.log(data)
-      })
+    axios.post(appUrl() + '/macro/record', { name: macroName.value, steps: steps.value })
+
     return true
   }
 

fe/src/views/MacrosView.vue

@@ -13,19 +13,6 @@
 <script setup>
 import MacroOverview from '@/components/macros/MacroOverview.vue'
 import MacroRecorder from '../components/macros/MacroRecorder.vue'
-import { onMounted, ref } from 'vue'
-
-const recordMacro = ref(false)
-
-const macroInput = ref(null)
-
-onMounted(() => {
-  // macroInput.value.focus()
-})
-
-const keyDown = (e) => {
-  console.log(e)
-}
 </script>
 
 <style scoped>