refactoring the route to admin console

2026-01-27 18:33:17 +02:00
parent bf13c37301
commit a796fce032
13 changed files with 164 additions and 28 deletions
@@ -0,0 +1,87 @@
+<template>
+    <v-container max-width="1400">
+        <v-tabs v-model="panel" class="mb-2">
+            <v-tab value="game">
+                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGame : l.editGame }}
+            </v-tab>
+            <v-tab value="gameDesigner" v-if="object.scenario">
+                <v-icon icon="mdi-movie-open-outline"></v-icon> {{ l.gameDesigner }}
+            </v-tab>
+        </v-tabs>
+        <v-tabs-window v-model="panel">
+            <v-tabs-window-item value="game">
+                <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-textarea :label="l.description" v-model="object.description"></v-textarea>
+                    <v-select :label="l.scenario" :items="scenarios" v-model="object.scenario" item-title="name" item-value="id"></v-select>
+                </v-form>
+            </v-tabs-window-item>
+            <v-tabs-window-item value="gameDesigner">
+                <GameDesigner v-model="object" ref="gameDesigner" ></GameDesigner>
+            </v-tabs-window-item>
+        </v-tabs-window>
+        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn>
+    </v-container>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            object: {},
+            valid: false,
+            rules: {
+                required: v => v ? true : this.l.fieldRequired,
+                requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
+            },
+            loading: false,
+            panel: [],
+            scenarios: []
+        }
+    },
+    async mounted(){
+        if (this.id && this.id != 'add') {
+            this.object = (await this.$api.game.load(this.id)).data;
+        }
+        this.scenarios = (await this.$api.scenario.search()).data.data;
+    },
+    watch:{
+        'object.scenario'(v){
+            if (v){
+                this.object.thumb = this.scenarios?.find(s=>s.id == v)?.sceneThumb?.[0];
+            }
+        }
+    },
+    computed: {
+        id() {
+            return this.$route.params?.id;
+        }
+    },
+    methods:{
+        async save(params) {
+            this.loading = true;
+            try {
+                console.log('saving', this.object)
+                let result = await this.$api.game.save(this.object);
+                //Object.assign(this.object, result.data.object);
+                this.object.id = result.data.object.id;
+                if (this.id == 'add') {
+                    this.$router.replace({ params: { id: this.object.id } });
+                }
+            } catch (err) {
+                console.error(err);
+            }
+            this.loading = false
+        },
+    }
+}
+</script>
+
+<route>
+    {
+        meta: {
+            layout: "console"
+        }
+    }
+</route>