Homec4science
Diffusion Sesame - Configurator (master) Browse

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

Last Change
Raw File

PartialInterferenceForm.vue
View Options

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { usePartialInterferenceStore, use3DAssetStore, useScenarioStore } from '../stores';
let { editId } = defineProps({
editId: Number
});
// shadowing the forms ref
const form = ref(null);
const interferenceStore = usePartialInterferenceStore();
const asset3DStore = use3DAssetStore();
const scenarioStore = useScenarioStore();
const router = useRouter();
await asset3DStore.fetch();
await scenarioStore.fetch();
const rules = { required: v => !!v || 'Champs requis' };
const ScenarioId = router.currentRoute.value.params.id;
let newInterference = reactive({
interferenceId: '',
startTime: null,
probability: 0,
interval: null,
distractorID: null,
Asset3DId: null,
ScenarioId
});
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);
}
const asset3dPart = asset3DStore.state.filter(v => v.type === 'partial');
const distractors = scenarioStore.state.find(v => v.id == ScenarioId).distractors;
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">
<v-select
v-model="newInterference.distractorID"
:items="distractors"
:rules="[rules.required]"
label="Distracteur"
></v-select>
</v-col>
<v-col cols="6">
<v-select
v-model="newInterference.Asset3DId"
:items="asset3dPart"
item-title="name"
item-value="id"
:rules="[rules.required]"
label="Asset 3D"
></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