refactoring admin console #12
This commit is contained in:
@@ -7,9 +7,9 @@
|
||||
<v-btn icon="mdi-plus" variant="text" v-bind="props"></v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item to="/game-objects/add">{{ l.createGameObject }}</v-list-item>
|
||||
<v-list-item to="/scenarios/add">{{ l.createScenario }}</v-list-item>
|
||||
<v-list-item to="/games/add">{{ l.createGame }}</v-list-item>
|
||||
<v-list-item to="/admin/game-objects/add">{{ l.createGameObject }}</v-list-item>
|
||||
<v-list-item to="/admin/scenarios/add">{{ l.createScenario }}</v-list-item>
|
||||
<v-list-item to="/admin/games/add">{{ l.createGame }}</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-app-bar>
|
||||
@@ -20,12 +20,12 @@
|
||||
</v-list>
|
||||
<v-divider></v-divider>
|
||||
<v-list nav>
|
||||
<v-list-item prepend-icon="mdi-database" to="/game-objects/list" :title="l.gameObjects"></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/scenarios/list" :title="l.gameScenarios"></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-database" to="/admin/game-objects/list" :title="l.gameObjects"></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/admin/scenarios/list" :title="l.gameScenarios"></v-list-item>
|
||||
<!-- <v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item> -->
|
||||
<v-divider></v-divider>
|
||||
<v-list-item prepend-icon="mdi-controller" :title="l.games" to="/games/list"></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/preview/list"></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-controller" :title="l.games" to="/admin/games/list"></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/admin/preview/list"></v-list-item>
|
||||
|
||||
</v-list>
|
||||
<v-divider></v-divider>
|
||||
|
||||
@@ -1,118 +1,118 @@
|
||||
<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() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
<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>
|
||||
@@ -1,36 +1,36 @@
|
||||
<template>
|
||||
<AssetBrowser @select="$router.push(`/game-objects/${$event.id}`)" ref="browser">
|
||||
<template v-slot:action-buttons="{ object }">
|
||||
<v-btn variant="tonal" density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/game-objects/${object.id}`" color="blue-lighten-3"></v-btn>
|
||||
<v-btn variant="tonal" density="comfortable" size="small" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red-lighten-2"></v-btn>
|
||||
</template>
|
||||
</AssetBrowser>
|
||||
<v-dialog v-model="confirmDialog" width="auto">
|
||||
<v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
|
||||
<template v-slot:actions>
|
||||
<v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
|
||||
<v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
confirmDialog: false,
|
||||
confirmTarget: null
|
||||
}
|
||||
},
|
||||
|
||||
methods:{
|
||||
async remove(item){
|
||||
await this.$api.gameObject.remove(item.id);
|
||||
this.confirmDialog = false;
|
||||
this.$refs.browser.load();
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<AssetBrowser @select="$router.push(`/admin/game-objects/${$event.id}`)" ref="browser">
|
||||
<template v-slot:action-buttons="{ object }">
|
||||
<v-btn variant="tonal" density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/admin/game-objects/${object.id}`" color="blue-lighten-3"></v-btn>
|
||||
<v-btn variant="tonal" density="comfortable" size="small" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red-lighten-2"></v-btn>
|
||||
</template>
|
||||
</AssetBrowser>
|
||||
<v-dialog v-model="confirmDialog" width="auto">
|
||||
<v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
|
||||
<template v-slot:actions>
|
||||
<v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
|
||||
<v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
confirmDialog: false,
|
||||
confirmTarget: null
|
||||
}
|
||||
},
|
||||
|
||||
methods:{
|
||||
async remove(item){
|
||||
await this.$api.gameObject.remove(item.id);
|
||||
this.confirmDialog = false;
|
||||
this.$refs.browser.load();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,79 +1,79 @@
|
||||
<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
|
||||
},
|
||||
}
|
||||
}
|
||||
<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>
|
||||
@@ -1,49 +1,49 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
|
||||
<router-link :to="`/games/${v.id}`">
|
||||
<v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
|
||||
</router-link>
|
||||
<div class="d-flex">
|
||||
<span class="flex-grow-1">{{ v.name }}</span>
|
||||
<v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/games/${v.id}`" color="primary"></v-btn>
|
||||
<v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-dialog v-model="confirmDialog" width="auto">
|
||||
<v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
|
||||
<template v-slot:actions>
|
||||
<v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
|
||||
<v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items: [],
|
||||
confirmDialog: false,
|
||||
confirmTarget: null
|
||||
}
|
||||
},
|
||||
|
||||
async created(){
|
||||
this.items = (await this.$api.game.search()).data.data
|
||||
},
|
||||
|
||||
methods:{
|
||||
async remove(item){
|
||||
await this.$api.game.remove(item.id);
|
||||
this.confirmDialog = false;
|
||||
this.items.splice(this.items.indexOf(item), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
|
||||
<router-link :to="`/admin/games/${v.id}`">
|
||||
<v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
|
||||
</router-link>
|
||||
<div class="d-flex">
|
||||
<span class="flex-grow-1">{{ v.name }}</span>
|
||||
<v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/admin/games/${v.id}`" color="primary"></v-btn>
|
||||
<v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-dialog v-model="confirmDialog" width="auto">
|
||||
<v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
|
||||
<template v-slot:actions>
|
||||
<v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
|
||||
<v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items: [],
|
||||
confirmDialog: false,
|
||||
confirmTarget: null
|
||||
}
|
||||
},
|
||||
|
||||
async created(){
|
||||
this.items = (await this.$api.game.search()).data.data
|
||||
},
|
||||
|
||||
methods:{
|
||||
async remove(item){
|
||||
await this.$api.game.remove(item.id);
|
||||
this.confirmDialog = false;
|
||||
this.items.splice(this.items.indexOf(item), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -2,7 +2,7 @@
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
|
||||
<router-link :to="`/preview/${v.id}`">
|
||||
<router-link :to="`/admin/preview/${v.id}`">
|
||||
<v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
|
||||
</router-link>
|
||||
<div class="d-flex">
|
||||
@@ -1,75 +1,75 @@
|
||||
<template>
|
||||
<v-container max-width="1400">
|
||||
<v-tabs v-model="panel">
|
||||
<v-tab value="scenario">
|
||||
<v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createScenario : l.editScenario }}
|
||||
</v-tab>
|
||||
<v-tab value="scenes">
|
||||
<v-icon icon="mdi-panorama-outline"></v-icon> {{ l.editScenes }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<v-tabs-window v-model="panel">
|
||||
<v-tabs-window-item value="scenario">
|
||||
<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-form>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="scenes">
|
||||
<SceneDesigner v-model="object" ref="sceneDesigner" ></SceneDesigner>
|
||||
</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: []
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
async panel(n){
|
||||
if ((n||[]).includes('scenes')){
|
||||
await this.$nextTick();
|
||||
this.$refs.sceneDesigner.resize();
|
||||
}
|
||||
}
|
||||
},
|
||||
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
|
||||
},
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<v-container max-width="1400">
|
||||
<v-tabs v-model="panel">
|
||||
<v-tab value="scenario">
|
||||
<v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createScenario : l.editScenario }}
|
||||
</v-tab>
|
||||
<v-tab value="scenes">
|
||||
<v-icon icon="mdi-panorama-outline"></v-icon> {{ l.editScenes }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<v-tabs-window v-model="panel">
|
||||
<v-tabs-window-item value="scenario">
|
||||
<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-form>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="scenes">
|
||||
<SceneDesigner v-model="object" ref="sceneDesigner" ></SceneDesigner>
|
||||
</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: []
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
async panel(n){
|
||||
if ((n||[]).includes('scenes')){
|
||||
await this.$nextTick();
|
||||
this.$refs.sceneDesigner.resize();
|
||||
}
|
||||
}
|
||||
},
|
||||
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>
|
||||
@@ -1,49 +1,49 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
|
||||
<router-link :to="`/scenarios/${v.id}`">
|
||||
<v-img :src="`/asset/thumb/${v.sceneThumb?.[0]}.webp`"></v-img>
|
||||
</router-link>
|
||||
<div class="d-flex">
|
||||
<span class="flex-grow-1">{{ v.name }}</span>
|
||||
<v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/scenarios/${v.id}`" color="primary"></v-btn>
|
||||
<v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-dialog v-model="confirmDialog" width="auto">
|
||||
<v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
|
||||
<template v-slot:actions>
|
||||
<v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
|
||||
<v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items: [],
|
||||
confirmDialog: false,
|
||||
confirmTarget: null
|
||||
}
|
||||
},
|
||||
|
||||
async created(){
|
||||
this.items = (await this.$api.scenario.search()).data.data
|
||||
},
|
||||
|
||||
methods:{
|
||||
async remove(item){
|
||||
await this.$api.scenario.remove(item.id);
|
||||
this.confirmDialog = false;
|
||||
this.items.splice(this.items.indexOf(item), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
|
||||
<router-link :to="`/admin/scenarios/${v.id}`">
|
||||
<v-img :src="`/asset/thumb/${v.sceneThumb?.[0]}.webp`"></v-img>
|
||||
</router-link>
|
||||
<div class="d-flex">
|
||||
<span class="flex-grow-1">{{ v.name }}</span>
|
||||
<v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/admin/scenarios/${v.id}`" color="primary"></v-btn>
|
||||
<v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-dialog v-model="confirmDialog" width="auto">
|
||||
<v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
|
||||
<template v-slot:actions>
|
||||
<v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
|
||||
<v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items: [],
|
||||
confirmDialog: false,
|
||||
confirmTarget: null
|
||||
}
|
||||
},
|
||||
|
||||
async created(){
|
||||
this.items = (await this.$api.scenario.search()).data.data
|
||||
},
|
||||
|
||||
methods:{
|
||||
async remove(item){
|
||||
await this.$api.scenario.remove(item.id);
|
||||
this.confirmDialog = false;
|
||||
this.items.splice(this.items.indexOf(item), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user