UPD: Profile management del+dup
This commit is contained in:
Robert Kossessa
@@ -2,42 +2,50 @@
|
||||
<div
|
||||
class="h-12 flex profile-row"
|
||||
@mouseenter="hover=true" @mouseleave="hover=false">
|
||||
<form
|
||||
v-if="editing"
|
||||
class="flex-1 flex h-full text-left whitespace-nowrap overflow-hidden"
|
||||
:class="{'bg-zinc-200' : selected}" @submit.prevent="editing=false">
|
||||
<span class="ml-4 mr-1 h-full w-4 flex items-center">
|
||||
<FileDigit
|
||||
:class="{'text-zinc-600': selected,
|
||||
'text-muted-foreground': !selected}"
|
||||
class="w-4 h-4 mb-0.5"
|
||||
/>
|
||||
</span>
|
||||
<input
|
||||
ref="profileNameInput" v-model="profile.name"
|
||||
onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
|
||||
class="flex-1 pl-1 h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none"
|
||||
:class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
|
||||
'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}">
|
||||
<button
|
||||
type="submit"
|
||||
:class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
|
||||
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected}"
|
||||
class="flex w-12 h-12 justify-center items-center flex-shrink-0">
|
||||
<Check class="h-4 w-4" />
|
||||
</button>
|
||||
</form>
|
||||
<button
|
||||
v-else
|
||||
:class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
|
||||
'hover:bg-zinc-900 bg-opacity-50 text-white': !selected,
|
||||
'text-ellipsis': !editing}"
|
||||
class="flex-1 h-full text-left whitespace-nowrap overflow-hidden"
|
||||
'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}"
|
||||
class="flex-1 h-full text-left whitespace-nowrap overflow-hidden text-ellipsis"
|
||||
@click="!editing && $emit('select') && $refs.profileTitle.scramble()">
|
||||
<FileDigit
|
||||
:class="{'text-zinc-600': selected,
|
||||
'text-muted-foreground': !selected,
|
||||
'w-0': hover}"
|
||||
class="h-4 ml-10 mb-1 inline-block" />
|
||||
<input
|
||||
v-if="editing" ref="profileNameInput" v-model="profile.name"
|
||||
onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
|
||||
class="pl-10 w-full h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none"
|
||||
style="color: inherit; background: inherit">
|
||||
<template v-else>
|
||||
<ScrambleText
|
||||
ref="profileTitle"
|
||||
:class="{'text-black': selected, 'text-zinc-100': !selected}"
|
||||
:text="profile.name" />
|
||||
<span
|
||||
class="text-xs text-zinc-600"
|
||||
:class="{'hidden': hover}"> uID:{{ profile.id }}</span>
|
||||
</template>
|
||||
'text-muted-foreground': !selected}"
|
||||
class="ml-4 mr-2 mb-0.5 h-4 w-4 inline-block" />
|
||||
<ScrambleText
|
||||
ref="profileTitle"
|
||||
:class="{'text-black': selected, 'text-zinc-100': !selected}"
|
||||
:text="profile.name" />
|
||||
<span
|
||||
class="text-xs text-zinc-600"
|
||||
:class="{'hidden': hover}"> uID:{{ profile.id }}</span>
|
||||
</button>
|
||||
<template v-if="!confirmDelete">
|
||||
<button
|
||||
:class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
|
||||
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
|
||||
'w-12': editing,
|
||||
'w-0': !editing}"
|
||||
class="flex h-12 justify-center items-center flex-shrink-0"
|
||||
@click="editing=false">
|
||||
<Check class="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
:class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
|
||||
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
|
||||
@@ -50,7 +58,8 @@
|
||||
:class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
|
||||
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
|
||||
'w-12' : hover && !editing}"
|
||||
class="flex w-0 h-12 justify-center items-center flex-shrink-0">
|
||||
class="flex w-0 h-12 justify-center items-center flex-shrink-0"
|
||||
@click="$emit('duplicate')">
|
||||
<Copy class="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
@@ -98,14 +107,18 @@ const profile = defineModel({
|
||||
}),
|
||||
})
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
initEditing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const editing = ref(false)
|
||||
const editing = ref(props.initEditing)
|
||||
|
||||
const confirmDelete = ref(false)
|
||||
|
||||
|
||||
@@ -50,7 +50,9 @@
|
||||
<ProfileButton
|
||||
v-for="(profile, index) in tagProfiles" :key="profile.id" v-model="tagProfiles[index]"
|
||||
:selected="currentProfileId===profile.id"
|
||||
@select="currentProfileId=profile.id" />
|
||||
@select="currentProfileId=profile.id"
|
||||
@duplicate="duplicateProfile(profile.id)"
|
||||
@delete="deleteProfile(profile.id)" />
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
@@ -92,6 +94,41 @@ const filteredProfiles = computed(() => {
|
||||
})
|
||||
})
|
||||
|
||||
function newProfileId() {
|
||||
let id = ''
|
||||
do {
|
||||
id = Math.floor(Math.random() * 9999).toString().padStart(4, '0')
|
||||
} while (store.profileIds.includes(id))
|
||||
return id
|
||||
}
|
||||
|
||||
function newProfileName(originalName) {
|
||||
let name = originalName
|
||||
let i = 1
|
||||
while (profiles.value.find(p => p.name === name)) {
|
||||
name = `${originalName}-${i++}`
|
||||
}
|
||||
return name
|
||||
}
|
||||
|
||||
const duplicateProfile = (id) => {
|
||||
const profile = profiles.value.find(p => p.id === id)
|
||||
const profileIndex = profiles.value.indexOf(profile)
|
||||
const newProfile = JSON.parse(JSON.stringify(profile))
|
||||
newProfile.id = newProfileId()
|
||||
newProfile.name = newProfileName(profile.name)
|
||||
profiles.value.splice(profileIndex + 1, 0, newProfile)
|
||||
}
|
||||
|
||||
const deleteProfile = (id) => {
|
||||
const profile = profiles.value.find(p => p.id === id)
|
||||
const profileIndex = profiles.value.indexOf(profile)
|
||||
profiles.value.splice(profileIndex, 1)
|
||||
if (currentProfileId.value === id && profiles.value.length > 0) {
|
||||
currentProfileId.value = profiles.value[0].id
|
||||
}
|
||||
}
|
||||
|
||||
const filteredProfilesByTag = computed(() => {
|
||||
const map = new Map()
|
||||
filteredProfiles.value.forEach(profile => {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"profiles": [
|
||||
{
|
||||
"id": "5867",
|
||||
"name": "NEW PROFILE",
|
||||
"id": "1732",
|
||||
"name": "Official Profile #1",
|
||||
"profileTag": "Binaris",
|
||||
"profileConfig": {
|
||||
"profileDesc": "KORG MINILOGUE OSCILLATOR 1",
|
||||
@@ -52,10 +52,62 @@
|
||||
"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
|
||||
}
|
||||
},
|
||||
"guiConfig": {
|
||||
"guiEnable": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "1232",
|
||||
"name": "Another",
|
||||
"profileTag": "Binaris",
|
||||
"name": "AN0Th3R Pr0f1l3",
|
||||
"profileTag": "Custom",
|
||||
"profileConfig": {
|
||||
"profileDesc": "KORG MINILOGUE OSCILLATOR 1",
|
||||
"profileType": 1,
|
||||
@@ -156,9 +208,61 @@
|
||||
"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",
|
||||
"name": "sdfsdf (Invalid)",
|
||||
"profileTag": "Uncategorized",
|
||||
"profileConfig": {
|
||||
"profileDesc": "",
|
||||
|
||||
@@ -12,4 +12,5 @@ export const store = reactive({
|
||||
currentProfile: computed(() => {
|
||||
return store.device.profiles.find(p => p.id === store.currentProfileId)
|
||||
}),
|
||||
profileIds: computed(() => store.device.profiles.map(p => p.id)),
|
||||
})
|
||||
Reference in New Issue
Block a user