Skip to content

Commit

Permalink
update osc params (#39)
Browse files Browse the repository at this point in the history 
* move component

* refactor OSCParams

* update dialogs
  • Loading branch information
@fuwako
fuwako authored Jul 22, 2024
1 parent 5949d08 commit 9d9a53b
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 157 deletions.
151 changes: 17 additions & 134 deletions src/pages/settings/OSCParams.vue → ...mponents/settings/oscparams/OSCParams.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,92 +187,13 @@
</v-card>
</v-card-text>

<!-- Profile Add Dialog -->
<!-- Profile Dialog -->
<v-row justify="center">
<v-dialog v-model="profile_add_dialog" width="50vw">
<v-card v-click-outside="closeAddProfileDialog">
<v-card-title>{{ $t('settings.osc.params.profile.dialog.title.add') }}</v-card-title>
<v-card-text>
<v-row>
<v-col :cols="12">
<v-form
v-model="new_profile_name_valid"
@submit.prevent="new_profile_name_valid ? confirmAddProfileDialog() : null"
>
<v-text-field
v-model="new_profile_name"
:label="$t('settings.osc.params.profile.dialog.field_label')"
:rules="[
rules.required,
rules.empty,
rules.already_taken(new_profile_name, oscStore.osc_profiles),
]"
autofocus
spellcheck="false"
/>
</v-form>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn @click="closeAddProfileDialog">
{{ $t('settings.osc.params.button.cancel') }}
</v-btn>
<v-btn
color="primary"
:disabled="!new_profile_name_valid"
@click="confirmAddProfileDialog"
>
{{ $t('settings.osc.params.button.add') }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>

<!-- Profile Edit Dialog -->
<v-row justify="center">
<v-dialog v-model="profile_edit_dialog" width="50vw">
<v-card v-click-outside="closeEditProfileDialog">
<v-card-title>{{ $t('settings.osc.params.profile.dialog.title.edit') }}</v-card-title>
<v-card-text>
<v-row>
<v-col :cols="12">
<v-form
v-model="new_profile_name_valid"
@submit.prevent="new_profile_name_valid ? confirmEditProfileDialog() : null"
>
<v-text-field
v-model="new_profile_name"
:label="$t('settings.osc.params.profile.dialog.field_label')"
:rules="[
rules.required,
rules.empty,
rules.already_taken(new_profile_name, oscStore.osc_profiles),
]"
autofocus
spellcheck="false"
/>
</v-form>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn @click="closeEditProfileDialog">
{{ $t('settings.osc.params.button.cancel') }}
</v-btn>
<v-btn
color="primary"
:disabled="!new_profile_name_valid"
@click="confirmEditProfileDialog"
>
{{ $t('settings.osc.params.button.confirm') }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<Profile
v-model="profile_dialog"
:mode="profile_dialog_mode"
:new_name="profile_dialog_new_name"
/>
</v-row>

<!-- Profile Delete Dialog -->
Expand Down Expand Up @@ -328,24 +249,15 @@

<script setup lang="ts">
import { computed, ref } from 'vue'
import ParameterTrigger from '@/components/settings/oscparams/dialogs/ParameterTrigger.vue'
import { useOSCStore } from '@/stores/osc'
import Profile from '@/components/settings/oscparams/dialogs/Profile.vue'
import ParameterTrigger from '@/components/settings/oscparams/dialogs/ParameterTrigger.vue'
const oscStore = useOSCStore()
const rules = ref({
required: (value: string) => !!value || 'Required',
empty: (value: string) => !!value.trim() || 'Cannot be empty',
already_taken: (value: string, collection: object) => !(value in collection) || 'Already in use',
})
const new_profile_name = ref('')
const new_profile_name_valid = ref(false)
const profile_add_dialog = ref(false)
const profile_edit_dialog = ref(false)
const editing_profile_name = ref('')
const profile_dialog = ref(false)
const profile_dialog_mode = ref('') // "add", "edit"
const profile_dialog_new_name = ref('')
const profile_delete_dialog = ref(false)
const profile_delete_target = ref('')
Expand Down Expand Up @@ -382,48 +294,19 @@ function clearFocus() {
function openAddProfileDialog() {
clearFocus()
new_profile_name.value = ''
profile_dialog_mode.value = 'add'
profile_dialog_new_name.value = ''
profile_add_dialog.value = true
}
function confirmAddProfileDialog() {
oscStore.osc_profiles[new_profile_name.value] = []
oscStore.current_profile = new_profile_name.value
new_profile_name.value = ''
profile_add_dialog.value = false
}
function closeAddProfileDialog() {
profile_add_dialog.value = false
profile_dialog.value = true
}
function openEditProfileDialog(profile_name: string) {
clearFocus()
editing_profile_name.value = profile_name
new_profile_name.value = profile_name
profile_edit_dialog.value = true
}
function confirmEditProfileDialog() {
oscStore.osc_profiles[new_profile_name.value] = oscStore.osc_profiles[editing_profile_name.value]
if (oscStore.current_profile === editing_profile_name.value)
oscStore.current_profile = new_profile_name.value
delete oscStore.osc_profiles[editing_profile_name.value]
new_profile_name.value = ''
profile_edit_dialog.value = false
}
profile_dialog_mode.value = 'edit'
profile_dialog_new_name.value = profile_name
function closeEditProfileDialog() {
profile_edit_dialog.value = false
profile_dialog.value = true
}
function openDeleteProfileDialog(profile_name: string) {
Expand Down
36 changes: 14 additions & 22 deletions src/components/settings/oscparams/dialogs/ParameterTrigger.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-dialog v-model="model" width="50vw" persistent>
<v-dialog v-model="model" width="50vw" max-width="512px" persistent>
<v-card>
<v-card-title v-if="mode === 'add'">
{{ $t('settings.osc.params.param.dialog_title.add') }}
Expand All @@ -12,10 +12,10 @@
<v-col :cols="12">
<v-text-field v-model="new_param.route" :label="$t('settings.osc.params.param.address')" hide-details />
</v-col>
<v-col :cols="12" :md="6">
<v-col :cols="12" :lg="8" :sm="8">
<v-text-field v-model="new_param.ip" label="OSC IP" hide-details />
</v-col>
<v-col>
<v-col :cols="12" :lg="4" :sm="4">
<v-text-field v-model="new_param.port" label="OSC port" hide-details />
</v-col>
</v-row>
Expand Down Expand Up @@ -66,7 +66,7 @@
<v-chip v-if="!new_param.assigns.length" variant="text">
{{ $t('settings.osc.params.param.empty') }}
</v-chip>
<v-list density="compact">
<v-list v-if="new_param.assigns.length" density="compact">
<v-list-item
v-for="(assign, i) in new_param.assigns"
:value="assign"
Expand All @@ -77,7 +77,7 @@
/>
</v-list>
</v-col>
<v-col :cols="12" :lg="6">
<v-col :cols="12" :lg="6" :sm="6">
<v-select
v-model="new_assign.type"
:items="value_types"
Expand All @@ -86,7 +86,7 @@
@update:model-value="validateAssignValueAll"
/>
</v-col>
<v-col :cols="12" :lg="6">
<v-col :cols="12" :lg="6" :sm="6">
<v-select
v-model="new_assign.activation"
:items="[
Expand Down Expand Up @@ -125,7 +125,7 @@

<!-- This row is displayed if the assign activation is "pulse". -->
<v-row v-if="new_assign.activation === 'pulse'">
<v-col :cols="12" :lg="4">
<v-col :cols="12" :lg="4" :md="4">
<v-text-field
v-if="new_assign.type !== 'bool'"
v-model="new_assign.set1"
Expand All @@ -143,20 +143,18 @@
/>
</v-col>

<v-col :cols="12" :lg="4">
<v-col :cols="12" :lg="4" :md="4">
<v-text-field
v-model="new_assign.pulse_duration"
hide-details
:label="$t('settings.osc.params.param.assign.behavior_options.pulse_wait')"
type="number"
suffix="ms"
prepend-icon="mdi-arrow-right-bold"
append-icon="mdi-arrow-right-bold"
@input="new_assign.pulse_duration = Math.round(new_assign.pulse_duration)"
/>
</v-col>

<v-col :cols="12" :lg="4">
<v-col :cols="12" :lg="4" :md="4">
<v-text-field
v-if="new_assign.type !== 'bool'"
v-model="new_assign.set2"
Expand Down Expand Up @@ -189,8 +187,6 @@
</v-row>
</v-card-text>

<v-divider class="mt-4" />

<div v-if="new_param.keywords.length && new_param.assigns.length" class="ma-2">
<v-list-item
:title="`Example phrase: 'set ${new_param.keywords[0]?.text} to ${new_param.assigns[0]?.keyword}'`"
Expand All @@ -199,7 +195,7 @@
</div>
<v-card-actions>
<v-spacer />
<v-btn @click="cancelParamDialog">
<v-btn @click="closeDialog">
{{ $t('settings.osc.params.button.cancel') }}
</v-btn>
<v-btn v-if="mode === 'add'" color="primary" @click="confirmAddParam">
Expand Down Expand Up @@ -291,26 +287,22 @@ watch(model, (enabled) => {
}
})
function cancelParamDialog() {
emit('update:modelValue', false) // Close the dialog.
function closeDialog() {
emit('update:modelValue', false)
}
function confirmAddParam() {
oscStore.osc_profiles[oscStore.current_profile].push(new_param.value)
emit('update:modelValue', false)
closeDialog()
}
function confirmEditParam() {
oscStore.osc_profiles[oscStore.current_profile][props.editingIndex as number] = JSON.parse(JSON.stringify(new_param.value)) // Deep copy
emit('update:modelValue', false)
closeDialog()
}
// function deleteParam(i: number) {
// oscStore.osc_profiles[oscStore.current_profile].splice(i, 1)
// }
function addTrigger() {
if (!trigger_phrase.value.trim()) // The trigger phrase field is empty
return
Expand Down
Loading

0 comments on commit 9d9a53b

Please sign in to comment.