game scenarios

src/pages/scenarios/[[id]].vue

@@ -1,16 +1,13 @@
 <template>
     <v-card :title="id == 'add' ? $l.createScenario : $l.editScenario" class="container my-3">
-        <v-form class="pa-4" v-model="valid">
+        <!-- <v-form class="pa-4" v-model="valid">
             <v-text-field :label="$l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
-        </v-form>
-        <!-- <v-card-actions>
-            <v-btn @click="saveAndPreview" :loading="loading" prepend-icon="mdi-content-save" color="primary"
-                :disabled="!valid">
-                {{ $l.saveAndPreview }}
+        </v-form> -->
+        <v-card-actions>
+            <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">
+                {{ $l.save }}
             </v-btn>
-            <v-btn @click="publish" prepend-icon="mdi-publish" color="success" v-if="false && object.id">{{ $l.publish
-                }}</v-btn>
-        </v-card-actions> -->
+        </v-card-actions>
     </v-card>
     <SceneDesigner v-model="object"></SceneDesigner>
         
@@ -25,7 +22,22 @@ import SceneDesigner from '@/components/SceneDesigner/SceneDesigner.vue';
 export default {
     data() {
         return {
-            object: {},
+            object: {
+                scenes: [
+                {
+                    id: 'test',
+                    vd: { x1: 220, y1: 220 },
+                    data: {
+                        environment: 3, intro: 2,
+                        gameObjects: [
+                            { vd: { x1: 350, y1:350 }, data:{ id: 7, }},
+                            { vd: { x1: 200, y1:400 }, data:{ id: 8, }},
+                            { vd: { x1: 70, y1:350 }, data:{ id: 9, }}
+                        ]
+                    }
+                }
+            ]
+            },
             valid: false,
             rules: {
                 required: v => v ? true : this.$l.fieldRequired,
@@ -34,10 +46,30 @@ export default {
             loading: false,
         }
     },
+    async mounted(){
+        if (this.id && this.id != 'add') {
+            this.object = (await this.$api.scenario.load(this.id)).data;
+        }
+    },
     computed: {
         id() {
             return this.$route.params?.id;
         }
     },
+    methods:{
+        async save(params) {
+            this.loading = true;
+            try {
+                let result = await this.$api.scenario.save(this.object);
+                Object.assign(this.object, result.data.object);
+                if (this.id == 'add') {
+                    this.$router.replace({ params: { id: this.object.id } });
+                }
+            } catch (err) {
+                console.error(err);
+            }
+            this.loading = false
+        },
+    }
 }
 </script>