zoeynoort/Macrame
1
0
Fork 0
mirror of https://github.com/Macrame-App/Macrame synced 2025-12-29 07:19:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update to UIX for alpha version

Browse source
This commit is contained in:
Jesse Malotaux 2025-04-11 18:57:25 +02:00
parent 2098aface9
commit 3cc0a2017d
20 changed files with 88 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

4
fe/assets/main.css
View file

@ -1,4 +0,0 @@
html,
body {
background-color: white;
}

2
fe/index.html
View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="src/assets/Macrame-Logo-gradient.svg" /> <link rel="icon" type="image/svg+xml" href="mcrm-icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.bunny.net" /> <link rel="preconnect" href="https://fonts.bunny.net" />
<link <link

60
fe/mcrm-icon.svg Normal file
View file

@ -0,0 +1,60 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 140 80"
style="enable-background:new 0 0 140 80;"
xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
.st2{fill:url(#SVGID_3_);}
.st3{fill:url(#SVGID_4_);}
.st4{fill:url(#SVGID_5_);}
.st5{fill:url(#SVGID_6_);}
.st6{fill:url(#SVGID_7_);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-9.094947e-13" y1="28.05" x2="140" y2="28.05">
<stop offset="0" style="stop-color:#FFB900"/>
<stop offset="1" style="stop-color:#00BCFF"/>
</linearGradient>
<path class="st0" d="M95.5,18.3l-0.2-0.1C95.2,18.1,95,18,94.8,18c-0.3,0-0.5,0.1-0.7,0.3L82.8,29.6l8.5,8.5l12-12L95.5,18.3z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-9.094947e-13" y1="28" x2="140" y2="28">
<stop offset="0" style="stop-color:#FFB900"/>
<stop offset="1" style="stop-color:#00BCFF"/>
</linearGradient>
<path class="st1" d="M57.3,29.5L46,18.3c-0.2-0.2-0.5-0.3-0.7-0.3s-0.4,0-0.5,0.1l-0.2,0.1L36.8,26l12,12L57.3,29.5z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-9.094947e-13" y1="65.25" x2="140" y2="65.25">
<stop offset="0" style="stop-color:#FFB900"/>
<stop offset="1" style="stop-color:#00BCFF"/>
</linearGradient>
<path class="st2" d="M94.7,67l-14-14l-8.5,8.5l11.3,11.3c1,1,2.1,1.8,3.2,2.5c2.5,1.5,5.3,2.2,8.1,2.2s5.6-0.7,8.1-2.2L94.7,67
L94.7,67z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-9.094947e-13" y1="32.9162" x2="140" y2="32.9162">
<stop offset="0" style="stop-color:#FFB900"/>
<stop offset="1" style="stop-color:#00BCFF"/>
</linearGradient>
<path class="st3" d="M114,15.5l-7.8-7.8c-0.2-0.2-0.5-0.5-0.7-0.7c-5.3-4.6-12.8-5.2-18.7-1.8c-1.1,0.7-2.2,1.5-3.2,2.5L72.2,19
l2.6,2.6l5.9,5.9L92,16.2c0.8-0.8,1.8-1.1,2.8-1.1c0.7,0,1.4,0.2,2,0.5l0.1-0.1l8.5,8.5l13.4,13.4c0.8,0.8,1.1,1.8,1.1,2.8
s-0.4,2.1-1.1,2.8l-11.3,11.3l5,5l3.5,3.5l11.3-11.3c3.1-3.1,4.7-7.2,4.7-11.3c0-4.1-1.5-8.2-4.6-11.3L114,15.5z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-9.094947e-13" y1="38.2163" x2="140" y2="38.2163">
<stop offset="0" style="stop-color:#FFB900"/>
<stop offset="1" style="stop-color:#00BCFF"/>
</linearGradient>
<path class="st4" d="M105.4,56.5l-3.5-3.5l-4.5-4.5L81.2,32.2l-8.5-8.5l-2.6-2.6L56.6,7.7c-1-1-2.1-1.8-3.2-2.5
C47.6,1.8,40,2.4,34.8,7c-0.3,0.2-0.5,0.4-0.7,0.7l-7.8,7.8L12.8,28.9C9.7,32,8.1,36.1,8.1,40.2c0,4.1,1.6,8.2,4.7,11.3l11.3,11.3
l3.5-3.5l5-5L21.3,43c-0.8-0.8-1.1-1.8-1.1-2.8s0.4-2.1,1.1-2.8L34.7,24l8.5-8.5l0.1,0.1c1.5-0.9,3.6-0.7,4.8,0.6l11.3,11.3l2.1,2.1
l8.5,8.5l2.1,2.1l8.5,8.5l16.2,16.2L97,65l8.4,8.4c0.3-0.2,0.5-0.4,0.7-0.7l7.8-7.8l-3.5-3.4L105.4,56.5z"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-9.094947e-13" y1="59.85" x2="140" y2="59.85">
<stop offset="0" style="stop-color:#FFB900"/>
<stop offset="1" style="stop-color:#00BCFF"/>
</linearGradient>
<path class="st5" d="M70.1,42.3l-8.5,8.5L45.4,67l-0.1,0.1L40.4,72l-3.2,3.2c2.5,1.5,5.3,2.2,8.1,2.2s5.6-0.8,8.1-2.2
c1.1-0.7,2.2-1.5,3.2-2.5L70,59.3l8.5-8.5L70.1,42.3z"/>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="-9.094947e-13" y1="52.6" x2="140" y2="52.6">
<stop offset="0" style="stop-color:#FFB900"/>
<stop offset="1" style="stop-color:#00BCFF"/>
</linearGradient>
<path class="st6" d="M43.1,65.1l0.1-0.1l16.2-16.2l8.5-8.5l-8.4-8.6L51,40.2L38.2,53l-3.5,3.5l-5,5L26.2,65l7.8,7.8
c0.2,0.2,0.5,0.5,0.7,0.7l3.5-3.5L43.1,65.1z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

8
fe/src/App.vue
View file

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

2
fe/src/components/base/ContextMenu.vue
View file

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

5
fe/src/components/devices/RemoteView.vue
View file

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

1
fe/src/components/form/FormSelect.vue
View file

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

5
fe/src/components/macros/components/DeleteKeyDialog.vue
View file

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

3
fe/src/components/macros/components/EditDelayDialog.vue
View file

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

3
fe/src/components/macros/components/ValidationErrorDialog.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div id="validation-error__dialog" class="dialog__content"> <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 class="grid gap-4" v-if="(errors && errors.up.length > 0) || errors.down.length > 0">
<div v-if="errors.down.length > 0"> <div v-if="errors.down.length > 0">
@ -50,7 +50,6 @@ onMounted(() => {
errors.down = errors.down =
mutation.events.newValue !== false ? macroRecorder.state.validationErrors.down : [] mutation.events.newValue !== false ? macroRecorder.state.validationErrors.down : []
} }
console.log(mutation)
}) })
}) })
</script> </script>

1
fe/src/components/macros/parts/RecorderInput.vue
View file

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

10
fe/src/components/panels/PanelEdit.vue
View file

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

1
fe/src/components/panels/PanelsOverview.vue
View file

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

19
fe/src/main.js
View file

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

4
fe/src/services/ApiService.js
View file

@ -2,7 +2,9 @@ import { useDeviceStore } from '@/stores/device'
import CryptoJS from 'crypto-js' import CryptoJS from 'crypto-js'
export const appUrl = () => { 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 = () => { export const isLocal = () => {

2
fe/src/services/MacroService.js
View file

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

2
fe/src/stores/device.js
View file

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

7
fe/src/stores/macrorecorder.js
View file

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

13
fe/src/views/MacrosView.vue
View file

@ -13,19 +13,6 @@
<script setup> <script setup>
import MacroOverview from '@/components/macros/MacroOverview.vue' import MacroOverview from '@/components/macros/MacroOverview.vue'
import MacroRecorder from '../components/macros/MacroRecorder.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> </script>
<style scoped> <style scoped>

1
fe/vite.config.js
View file

@ -16,6 +16,7 @@ export default defineConfig({
}, },
plugins: [vue(), vueDevTools(), tailwindcss()], plugins: [vue(), vueDevTools(), tailwindcss()],
envDir: '../', envDir: '../',
assets: ['assets'],
resolve: { resolve: {
alias: { alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)), '@': fileURLToPath(new URL('./src', import.meta.url)),