118 lines
4.8 KiB
Vue
118 lines
4.8 KiB
Vue
<template>
|
|
<v-container max-width="1400">
|
|
<v-tabs v-model="panel">
|
|
<v-tab value="edit">
|
|
<v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGameObject : l.editGameObject }}
|
|
</v-tab>
|
|
<v-tab value="preview" v-show="object.asset">
|
|
<v-icon icon="mdi-panorama-outline"></v-icon> {{ l.preview }}
|
|
</v-tab>
|
|
</v-tabs>
|
|
<v-tabs-window v-model="panel">
|
|
<v-tabs-window-item value="edit">
|
|
<v-card class="container my-3">
|
|
<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.objectType" v-model="object.type" :items="$p.objectTypes.map(ot=>({title:l[ot.value], value:ot.value}))" tit :rules="[rules.required]">
|
|
</v-select>
|
|
<v-file-input :label="l.objectFile" v-model="object.file" :rules="[rules.requiredFile]"></v-file-input>
|
|
<div v-if="object.asset">{{ object.asset.name }} | {{ object.asset.ofn }}</div>
|
|
</v-form>
|
|
<v-card-actions>
|
|
<v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="success"
|
|
:disabled="!valid">
|
|
{{ l.save }}
|
|
</v-btn>
|
|
<v-btn @click="save({preview: true})" :loading="loading" prepend-icon="mdi-content-save" color="primary"
|
|
:disabled="!valid">
|
|
{{ l.saveAndPreview }}
|
|
</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>
|
|
</v-tabs-window-item>
|
|
<v-tabs-window-item value="preview">
|
|
<v-card :title="l.preview" class="container my-3" v-if="object.asset">
|
|
<AssetPreview :object="object" ref="assetPreview" ></AssetPreview>
|
|
<v-card-actions>
|
|
<v-btn @click="captureThumbnail" v-if="forRendering" prepend-icon="mdi-camera" color="secondary">
|
|
{{ l.captureThumbnail }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-tabs-window-item>
|
|
</v-tabs-window>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
panel: this.$route.query?.tab || 'edit',
|
|
object: {},
|
|
valid: false,
|
|
rules: {
|
|
required: v => v ? true : this.l.fieldRequired,
|
|
requiredFile: v => (v?.size || this.id != 'add') ? true : this.l.fieldRequired
|
|
},
|
|
loading: false
|
|
}
|
|
},
|
|
async mounted() {
|
|
if (this.id && this.id != 'add') {
|
|
this.object = (await this.$api.gameObject.load(this.id)).data;
|
|
}
|
|
},
|
|
computed: {
|
|
fileToUpload() {
|
|
return this.object?.file instanceof File
|
|
},
|
|
id() {
|
|
return this.$route.params?.id;
|
|
},
|
|
forRendering() {
|
|
return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render
|
|
},
|
|
},
|
|
methods: {
|
|
async save(params) {
|
|
this.loading = true;
|
|
try {
|
|
let fd = new FormData();
|
|
let keys = ['name', 'type'];
|
|
if (this.fileToUpload) keys.push('file');
|
|
if (this.id != 'add') keys.push('id');
|
|
if (this.object.thumb) keys.push('thumb');
|
|
|
|
keys.forEach(e => fd.append(e, this.object[e]))
|
|
let result = await this.$api.gameObject.save(fd);
|
|
Object.assign(this.object, result.data.object);
|
|
if (this.id == 'add') {
|
|
this.$router.replace({ params: { id: this.object.id }, query:{ tab:'preview' } });
|
|
}
|
|
// await this.$nextTick();
|
|
// this.panel = 'preview';
|
|
// if (!params?.thumbOnly) await this.$refs.assetPreview.loadAsset();
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
this.loading = false;
|
|
// await this.$nextTick();
|
|
// this.panel = 'preview';
|
|
},
|
|
|
|
async captureThumbnail() {
|
|
this.object.thumb = await this.$refs.assetPreview.gameEngine.captureScreenshot();
|
|
await this.save({ thumbOnly: true });
|
|
},
|
|
|
|
async publish() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script> |