Homec4science
Diffusion Sesame - Configurator (master) Browse

sesame-configurator/frontend/src/components/SoundInterferenceForm.vue
5d9c74d79942master

Last Change
Raw File

SoundInterferenceForm.vue
View Options

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useSoundInterferenceStore, useSoundAssetStore } from '../stores';
let { editId } = defineProps({
editId: Number
});
// shadowing the forms ref
const form = ref(null);
const interferenceStore = useSoundInterferenceStore();
const soundAssetStore = useSoundAssetStore();
const router = useRouter();
await soundAssetStore.fetch();
const rules = { required: v => !!v || 'Champs requis' };
let newInterference = reactive({
interferenceId: '',
startTime: null,
probability: 0,
interval: null,
volume: 0,
repetitions: null,
SoundAssetId: null,
ScenarioId: router.currentRoute.value.params.id
});
if (editId) {
await interferenceStore.fetch();
const interference = interferenceStore.state.find(e => e.id == editId);
// if asset doesn't exist, create a new one
if (!interference) editId = null;
else newInterference = reactive(interference);
}
async function submit() {
// maybe not safe
const validate = await form.value.validate();
if (validate.valid) {
if (editId) await interferenceStore.update(newInterference);
else await interferenceStore.add(newInterference);
await router.push('/scenarios');
}
}
</script>
<template>
<v-container>
<v-form ref="form">
<v-row>
<v-col cols="6">
<v-text-field
v-model="newInterference.interferenceId"
:rules="[rules.required]"
label="Nom de l'interférence"
></v-text-field>
</v-col>
<v-col cols="6">
<v-text-field
v-model="newInterference.startTime"
type="number"
min="0.0"
step="0.05"
:rules="[rules.required]"
label="Temps de départ"
></v-text-field>
</v-col>
<v-col cols="6">
<div class="text-caption">Probabilité d'apparition</div>
<v-slider
v-model="newInterference.probability"
:min="0"
:max="1"
:step="0.01"
prepend-icon="mdi-percent"
thumb-label
>
<template #thumb-label="{ modelValue }">
{{ Math.round(modelValue * 100) + '%' }}
</template>
</v-slider>
</v-col>
<v-col cols="6">
<v-text-field
v-model="newInterference.interval"
type="number"
min="0.0"
step="0.05"
:rules="[rules.required]"
label="Intervalle d'apparition"
></v-text-field>
</v-col>
<v-col cols="6">
<div class="text-caption">Volume</div>
<v-slider
v-model="newInterference.volume"
:min="0"
:max="1"
:step="0.01"
prepend-icon="mdi-percent"
thumb-label
>
<template #thumb-label="{ modelValue }">
{{ Math.round(modelValue * 100) + '%' }}
</template>
</v-slider>
</v-col>
<v-col cols="6">
<v-text-field
v-model="newInterference.repetitions"
type="number"
min="0"
:rules="[rules.required]"
label="Répétitions"
></v-text-field>
</v-col>
<v-col cols="6">
<v-select
v-model="newInterference.SoundAssetId"
:items="soundAssetStore.state"
item-title="name"
item-value="id"
:rules="[rules.required]"
label="Asset sonore"
></v-select>
</v-col>
</v-row>
<v-row justify="space-around">
<v-btn
prepend-icon="mdi-content-save"
@click="submit"
>
Sauver
</v-btn>
<v-btn
prepend-icon="mdi-close"
to="/scenarios"
>
Annuler
</v-btn>
</v-row>
</v-form>
</v-container>
</template>
c4science · Help