Page MenuHomec4science
Files F77444363

SceneFormView.vue
No OneTemporary
Actions

File Metadata

Created
Wed, Aug 14, 13:09

SceneFormView.vue
View Options

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useSceneStore } from '../stores';
import { getUpload } from '../stores/utils';
// shadowing the forms ref
const form = ref(null);
const router = useRouter();
const store = useSceneStore();
let editId = router.currentRoute.value.params.id;
const rules = {
required: v => !!v || 'Champs requis',
validImage: v =>
!v || !v.length || v[0].size < 5 * 1024 * 1024 || "La taille de l'imagette ne dois pas dépasser 5 MB"
};
let newScene = reactive({
name: '',
numberOfAnchorPoints: null,
numberOfDistractors: null,
anchorImg: [],
distractorImg: []
});
if (editId) {
await store.fetch();
const scene = store.state.find(e => e.id == editId);
// if scene doesn't exist, create a new one
if (!scene) editId = null;
else {
const anchorImg = [];
const distractorImg = [];
if (scene.urlAnchorSceneImage)
anchorImg.push(await getUpload(scene.urlAnchorSceneImage));
if (scene.urlDistractorSceneImage)
distractorImg.push(await getUpload(scene.urlDistractorSceneImage));
scene.anchorImg = anchorImg;
scene.distractorImg = distractorImg;
newScene = reactive(scene);
}
}
async function submit() {
// maybe not safe
const validate = await form.value.validate();
if (validate.valid) {
newScene.anchorImg = newScene.anchorImg[0];
newScene.distractorImg = newScene.distractorImg[0];
if (editId) await store.update(newScene);
else await store.add(newScene);
newScene.anchorImg = [];
newScene.distractorImg = [];
await router.push('/scenes');
}
}
</script>
<template>
<v-container>
<v-form ref="form">
<v-row>
<v-col cols="12">
<v-text-field
v-model="newScene.name"
:rules="[rules.required]"
label="Nom de la scène"
></v-text-field>
</v-col>
<v-col cols="6">
<v-file-input
v-model="newScene.anchorImg"
:rules="[rules.validImage]"
label="Image des points d'encrage sur la scène"
></v-file-input>
</v-col>
<v-col cols="6">
<v-file-input
v-model="newScene.distractorImg"
:rules="[rules.validImage]"
label="Image des distracteurs sur la scène"
></v-file-input>
</v-col>
<v-col cols="6">
<v-text-field
v-model="newScene.numberOfAnchorPoints"
type="number"
min="1"
:rules="[rules.required]"
label="Nombre de points d'encrage"
></v-text-field>
</v-col>
<v-col cols="6">
<v-text-field
v-model="newScene.numberOfDistractors"
type="number"
min="1"
:rules="[rules.required]"
label="Nombre de distracteurs"
></v-text-field>
</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="/scenes"
>
Annuler
</v-btn>
</v-row>
</v-form>
</v-container>
</template>

Event Timeline

c4science · Help