matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: Profile drag&drop (includes config restructure)

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-06 16:47:28 +01:00
parent fffa22afea
commit 287444e9b7
4 changed files with 550 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/profile/ProfileButton.vue
View File

@@ -7,7 +7,7 @@
v-if="nameEditable && editing"
class="flex-1 flex h-full text-left whitespace-nowrap overflow-hidden"
:class="{'bg-zinc-300' : selected}"
@submit.prevent="profile.name = nameInput; editing=false">
@submit.prevent="store.renameProfile(profile.id, nameInput); editing=false">
<input
ref="profileNameInput" v-model="nameInput"
onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
@@ -30,7 +30,7 @@
'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
class="flex-1 h-12 rounded-r-lg text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-all"
@click="!editing && $emit('select') && $refs.profileTitle.scramble()">
<span class="ml-2 w-4 mr-2" :class="{'ml-2': !draggable}">
<span class="ml-2 w-4 mr-2 cursor-grab" :class="{'ml-2': !draggable}">
<GripHorizontal
v-if="draggable"
:class="{'text-zinc-600': selected,
@@ -98,21 +98,23 @@
import { Check, Copy, PenLine, Trash2, X, GripHorizontal } from 'lucide-vue-next'
import ScrambleText from '@/components/common/ScrambleText.vue'
import { nextTick, ref } from 'vue'
import { useStore } from '@/store'
const store = useStore()
defineEmits(['select', 'duplicate', 'delete'])
const nameSubmitButton = ref(null)
const profile = defineModel({
type: Object,
required: true,
default: () => ({
id: '1234',
name: 'Profile Name',
}),
})
const props = defineProps({
profile: {
type: Object,
default: () => ({
id: '1234',
name: 'Profile Name',
}),
required: true,
},
selected: {
type: Boolean,
default: false,
@@ -149,7 +151,7 @@ function onNameInputBlur(e) {
const profileNameInput = ref(null)
const nameInput = ref(profile.value.name)
const nameInput = ref(props.profile.name)
const editing = ref(props.initEditing)

50
src/components/profile/ProfileManager.vue
View File

@@ -52,23 +52,35 @@
</div>
<div v-else>
<Collapsible
v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag"
v-model:open="collapse[profileTag]"
v-for="(category, categoryIndex) in store.profileCategories" :key="categoryIndex"
v-model:open="collapse[index]"
:default-open="true">
<!-- TODO: Make profile groups computed instead defining them of using v-for -->
<CollapsibleTrigger
class="w-full h-12 py-2 text-left text-muted-foreground text-sm bg-zinc-900 border-0 border-b">
<ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" />
{{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span>
{{ category.name }}<span class="font-heading text-sm text-zinc-600"> ({{ category.profiles?.length || 0
}})</span>
</CollapsibleTrigger>
<CollapsibleContent>
<draggable
:list="category.profiles"
group="profiles"
item-key="name"
v-bind="dragOptions"
@change="(event)=>onProfileDrop(event, categoryIndex)"
>
<template #item="{ element }">
<ProfileButton
:key="element.id"
:profile="element"
:selected="store.selectedProfile?.id === element.id"
@select="store.selectProfile(element.id); showProfileList=false"
@duplicate="store.duplicateProfile(element.id)"
@delete="store.removeProfile(element.id)" />
</template>
</draggable>
<!-- TODO: Insert draggable component here -->
<ProfileButton
v-for="(profile, index) in tagProfiles" :key="profile.id" v-model="tagProfiles[index]"
:selected="store.selectedProfile?.id === profile.id"
@select="store.selectProfile(profile.id); showProfileList=false"
@duplicate="store.duplicateProfile(profile.id)"
@delete="store.deleteProfile(profile.id)" />
</CollapsibleContent>
</Collapsible>
</div>
@@ -88,6 +100,7 @@ import ScrambleText from '@/components/common/ScrambleText.vue'
import { useStore } from '@/store.js'
import ProfileButton from '@/components/profile/ProfileButton.vue'
import ProfileConfig from '@/components/profile/ProfileConfig.vue'
import draggable from 'vuedraggable'
defineProps({
showFilter: {
@@ -129,6 +142,25 @@ const filteredProfilesByTag = computed(() => {
return map
})
const onProfileDrop = (event, categoryIndex) => {
if (event.moved) {
const profile = event.moved.element
const oldIndex = event.moved.oldIndex
const newIndex = event.moved.newIndex
store.moveProfile(profile.id, oldIndex, newIndex)
}
if (event.added) {
const profile = event.added.element
const newIndex = event.added.newIndex
store.changeProfileCategory(profile.id, categoryIndex, newIndex)
}
}
const dragOptions = {
group: 'profiles',
animation: 150,
}
</script>
<style scoped>
[data-state=open] > .chevrot {

830
src/data/nanoConfig.json
View File

@@ -1,423 +1,443 @@
{
"profiles": [
"categories": [
{
"id": "1732",
"name": "Official Profile #1",
"profileTag": "Binaris",
"profileConfig": {
"profileDesc": "KORG MINILOGUE OSCILLATOR 1",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
"name": "Binaris",
"profiles": [
{
"id": "1732",
"name": "Official Profile #1",
"profileTag": "Binaris",
"profileConfig": {
"profileDesc": "KORG MINILOGUE OSCILLATOR 1",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
}
},
"guiConfig": {
"guiEnable": true
}
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
{
"id": "1232",
"name": "DUPLICATE ID",
"profileTag": "Binaris",
"profileConfig": {
"profileDesc": "KORG MINILOGUE OSCILLATOR 1",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
}
},
"guiConfig": {
"guiEnable": true
}
}
},
"guiConfig": {
"guiEnable": true
}
]
},
{
"id": "5867",
"name": "My First Profile 😳",
"profileTag": "Custom",
"profileConfig": {
"profileDesc": "KORG MINILOGUE OSCILLATOR 1",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
"name": "Third Party",
"profiles": [
{
"id": "2891",
"name": "Color Grading M-2",
"profileTag": "Third Party",
"profileConfig": {
"profileDesc": "KORG MINILOGUE OSCILLATOR 1",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
}
},
"guiConfig": {
"guiEnable": true
}
}
},
"guiConfig": {
"guiEnable": true
}
]
},
{
"id": "1232",
"name": "AN0Th3R Pr0f1l3",
"profileTag": "Custom",
"profileConfig": {
"profileDesc": "KORG MINILOGUE OSCILLATOR 1",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
"name": "Custom",
"profiles": [
{
"id": "5867",
"name": "My First Profile 😳",
"profileTag": "Custom",
"profileConfig": {
"profileDesc": "KORG MINILOGUE OSCILLATOR 1",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
}
},
"guiConfig": {
"guiEnable": true
}
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
{
"id": "1232",
"name": "AN0Th3R Pr0f1l3",
"profileTag": "Custom",
"profileConfig": {
"profileDesc": "KORG MINILOGUE OSCILLATOR 1",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
}
},
"guiConfig": {
"guiEnable": true
}
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
{
"id": "1337",
"name": "Brought to you by...",
"profileTag": "Custom",
"profileConfig": {
"profileDesc": "Hwhawdhuawhdaddjwidjaiwdiawjdijaidjiawjdj",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
}
},
"guiConfig": {
"guiEnable": true
}
},
{
"id": "0420",
"name": "Overflow Testing Inc.",
"profileTag": "Custom",
"profileConfig": {
"profileDesc": "whaduwhawhdwadhwaudhuwahdu huwadhuawhduhwadhuawhu dwaijdwajiawjdijawidiwajidawidiawjddhawgdjzgesfgkhsfsza",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
}
},
"guiConfig": {
"guiEnable": true
}
}
},
"guiConfig": {
"guiEnable": true
}
]
},
{
"id": "1232",
"name": "DUPLICATE ID",
"profileTag": "Binaris",
"profileConfig": {
"profileDesc": "KORG MINILOGUE OSCILLATOR 1",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
"name": "Uncategorized",
"profiles": [
{
"id": "5238",
"name": "sdfsdf (Invalid)",
"profileTag": "Uncategorized",
"profileConfig": {
"profileDesc": "",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"minMaxPos": [
0,
156
],
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 100,
"s": 100,
"v": 100
},
"secondary": {
"h": 120,
"s": 120,
"v": 120
},
"pointer": {
"h": 255,
"s": 255,
"v": 255
}
},
"guiConfig": {
"guiEnable": true
}
}
},
"guiConfig": {
"guiEnable": true
}
},
{
"id": "2891",
"name": "Color Grading M-2",
"profileTag": "Third Party",
"profileConfig": {
"profileDesc": "KORG MINILOGUE OSCILLATOR 1",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
}
},
"guiConfig": {
"guiEnable": true
}
},
{
"id": "5238",
"name": "sdfsdf (Invalid)",
"profileTag": "Uncategorized",
"profileConfig": {
"profileDesc": "",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"minMaxPos": [
0,
156
],
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 100,
"s": 100,
"v": 100
},
"secondary": {
"h": 120,
"s": 120,
"v": 120
},
"pointer": {
"h": 255,
"s": 255,
"v": 255
}
},
"guiConfig": {
"guiEnable": true
}
},
{
"id": "1337",
"name": "Brought to you by...",
"profileTag": "Custom",
"profileConfig": {
"profileDesc": "Hwhawdhuawhdaddjwidjaiwdiawjdijaidjiawjdj",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
}
},
"guiConfig": {
"guiEnable": true
}
},
{
"id": "0420",
"name": "Overflow Testing Inc.",
"profileTag": "Custom",
"profileConfig": {
"profileDesc": "whaduwhawhdwadhwaudhuwahdu huwadhuawhduhwadhuawhu dwaijdwajiawjdijawidiwajidawidiawjddhawgdjzgesfgkhsfsza",
"profileType": 1,
"showDesc": true
},
"feedbackConfig": {
"feedbackEn": true,
"feedbackType": "fd",
"multiRev": false,
"feedbackStrength": 1,
"endstopStrength": 1,
"outputRamp": 10000,
"pos": 140,
"secondaryHaptic": true,
"secondaryVol": 5
},
"mappingConfig": {
"internalMacro": false,
"knobMap": "arrL",
"switchA": "shift",
"switchB": "ctrl",
"switchC": "alt",
"switchD": "esc"
},
"ledConfig": {
"ledEnable": true,
"ledBrightness": 100,
"ledMode": 1,
"primary": {
"h": 255,
"s": 255,
"v": 100
},
"secondary": {
"h": 255,
"s": 255,
"v": 100
},
"pointer": {
"h": 255,
"s": 255,
"v": 10
}
},
"guiConfig": {
"guiEnable": true
}
]
}
]
}

157
src/store.js
View File

@@ -13,7 +13,7 @@ const ajv = new Ajv()
export const useStore = defineStore('main', {
state: () => {
return {
profiles: [],
profileCategories: [],
selectedProfileId: null,
connected: false,
selectedFeature: 'knob',
@@ -22,108 +22,97 @@ export const useStore = defineStore('main', {
configPages: {
knob: {
mapping: {
titleKey: 'config_options.mapping_configuration.title',
component: MappingConfig,
titleKey: 'config_options.mapping_configuration.title', component: MappingConfig,
}, feedback: {
titleKey: 'config_options.feedback_designer.title', component: KnobFeedbackConfig,
}, lighting: {
titleKey: 'config_options.light_designer.title', component: KnobLightConfig,
},
feedback: {
titleKey: 'config_options.feedback_designer.title',
component: KnobFeedbackConfig,
},
lighting: {
titleKey: 'config_options.light_designer.title',
component: KnobLightConfig,
},
},
key: {
}, key: {
mapping: {
titleKey: 'config_options.mapping_configuration.title',
component: MappingConfig,
},
lighting: {
titleKey: 'config_options.light_designer.title',
component: KeyLightConfig,
titleKey: 'config_options.mapping_configuration.title', component: MappingConfig,
}, lighting: {
titleKey: 'config_options.light_designer.title', component: KeyLightConfig,
},
},
},
}
},
getters:
{
profileIds: (state) => state.profiles.map(p => p.id),
selectedProfile: (state) => state.profiles.find(p => p.id === state.selectedProfileId),
currentConfigComponent: (state) => state.configPages[state.selectedFeature][state.currentConfigPage]?.component || WIP,
currentConfigPages: (state) => state.configPages[state.selectedFeature] || {},
}
,
actions: {
}, getters: {
profiles: (state) => state.profileCategories.flatMap(c => c.profiles),
profileIds: (state) => state.profiles.map(p => p.id),
selectedProfileCategory: (state) => state.profileCategories.find(c => c.profiles.find(p => p.id === state.selectedProfileId)),
selectedProfile: (state) => state.profiles.find(p => p.id === state.selectedProfileId),
currentConfigComponent: (state) => state.configPages[state.selectedFeature][state.currentConfigPage]?.component || WIP,
currentConfigPages: (state) => state.configPages[state.selectedFeature] || {},
}, actions: {
selectProfile(id) {
if (!this.profileIds.includes(id)) return false
this.selectedProfileId = id
return true
}
,
addProfile() {
console.log('addProfile is not implemented')
}
,
duplicateProfile(id) {
const originalProfile = this.profiles.find(p => p.id === id)
}, addProfile(profile, categoryIndex, newIndex) {
const category = this.profileCategories[categoryIndex]
category.profiles.splice(newIndex, 0, profile)
}, removeProfile(profileId) {
const category = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
const index = category.profiles.findIndex(p => p.id === profileId)
category.profiles.splice(index, 1)
}, duplicateProfile(profileId) {
const originalProfile = this.profiles.find(p => p.id === profileId)
const newProfile = JSON.parse(JSON.stringify(originalProfile))
newProfile.id = this.newProfileId(originalProfile.id)
newProfile.name = this.newProfileName(originalProfile.name)
this.profiles.push(newProfile)
this.selectedProfileId = newProfile.id
const category = this.categories.find(c => c.profiles.find(p => p.id === profileId))
category.profiles.push(newProfile)
return newProfile.id
}
,
deleteProfile(id) {
const index = this.profiles.findIndex(p => p.id === id)
if (index >= 0) {
this.profiles.splice(index, 1)
if (this.selectedProfileId === id) {
this.selectedProfileId = this.profiles[0]?.id || null
}
return true
}
return false
}
,
fetchProfiles() {
Axios.get('http://localhost:3001/profiles').then((res) => {
const profiles = res.data
console.log(profiles)
}, moveProfile(profileId, oldIndex, newIndex) {
// Find the profile category, then swap the profiles at the old and new indices
const category = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
const tmpProfile = category.profiles[newIndex]
category.profiles[newIndex] = category.profiles[oldIndex]
category.profiles[newIndex] = tmpProfile
}, changeProfileCategory(profileId, newCategoryIndex, newIndex) {
const profile = this.profiles.find(p => p.id === profileId)
const oldCategory = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
const newCategory = this.profileCategories[newCategoryIndex]
oldCategory.profiles = oldCategory.profiles.filter(p => p.id !== profileId)
newCategory.profiles.splice(newIndex, 0, profile)
}, renameProfile(profileId, newName) {
const profile = this.profiles.find(p => p.id === profileId)
profile.name = newName
}, fetchProfiles() {
Axios.get('http://localhost:3001/categories').then((res) => {
const categories = res.data
console.log(categories)
const ids = new Set()
const validate = ajv.compile(schema)
this.$patch({
profiles: profiles.filter((profile) => {
if (!validate(profile)) {
console.error('Failed to validate profile: ' + profile.name, validate.errors)
return false
}
if (ids.has(profile.id)) {
console.error('Duplicate profile id: ' + profile.id + ' for profile: ' + profile.name)
return false
}
ids.add(profile.id)
return true
}),
//selectedProfileId: profiles[0]?.id || null,
profileCategories: categories.map((category) => ({
name: category.name, profiles: category.profiles.filter((profile) => {
// TODO: Validation seems to be broken right now
if (!validate(profile)) {
console.error('Failed to validate profile: ' + profile.name, validate.errors)
return false
}
if (ids.has(profile.id)) {
console.error('Duplicate profile id: ' + profile.id + ' for profile: ' + profile.name)
return false
}
ids.add(profile.id)
return true
}),
})), selectedProfileId: categories[0]?.profiles[0]?.id || null,
})
}).catch((err) => {
console.error(err)
})
}
,
newProfileName(originalName = '') {
}, newProfileName(originalName = '') {
let name = originalName
let i = 1
while (this.profiles.find(p => p.name === name)) {
name = `${originalName} (${i++})`
}
return name
}
,
newProfileId(originalId = '') {
}, newProfileId(originalId = '') {
let id = originalId
if (originalId) {
do {
@@ -135,21 +124,15 @@ export const useStore = defineStore('main', {
} while (this.profileIds.includes(id))
}
return id
}
,
selectConfigFeature(feature) {
}, selectConfigFeature(feature) {
this.selectedFeature = feature
if (!this.currentConfigPages[this.currentConfigPage])
this.setCurrentConfigPage('mapping')
},
selectKey(key) {
if (!this.currentConfigPages[this.currentConfigPage]) this.setCurrentConfigPage('mapping')
}, selectKey(key) {
this.selectedKey = key
this.selectConfigFeature('key')
},
setCurrentConfigPage(page) {
}, setCurrentConfigPage(page) {
this.currentConfigPage = page
},
setConnected(connected) {
}, setConnected(connected) {
this.connected = connected
},
},