generated from VLADIMIR/template_frontend
288 lines
7.7 KiB
Vue
288 lines
7.7 KiB
Vue
<script setup lang="ts">
|
|
import { NDynamicInput, NInput, NInputGroup, NSpace, NSwitch } from 'naive-ui'
|
|
import type { PropType } from 'vue'
|
|
import { LockOutlined } from '@vicons/material'
|
|
import { Icon } from '@vicons/utils'
|
|
import { Key24Regular } from '@vicons/fluent'
|
|
import type { Application, Door, Key, Place } from '@/api/generated/crabs/evening_detective_server'
|
|
|
|
const props = defineProps({
|
|
newPlaceCode: {
|
|
type: String,
|
|
},
|
|
newPlaceName: {
|
|
type: String,
|
|
},
|
|
newPlaceText: {
|
|
type: String,
|
|
},
|
|
place: {
|
|
type: Object as PropType<Place>,
|
|
},
|
|
mode: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'update:newPlaceCode': [value: string],
|
|
'update:newPlaceName': [value: string],
|
|
'update:newPlaceText': [value: string],
|
|
'update:mode': [value: string]
|
|
}>()
|
|
const updateCode = (code: string) => {
|
|
emit('update:newPlaceCode', code)
|
|
}
|
|
const updateName = (name: string) => {
|
|
emit('update:newPlaceName', name)
|
|
}
|
|
const updateText = (text: string) => {
|
|
emit('update:newPlaceText', text)
|
|
}
|
|
const updateMode = (mode: string) => {
|
|
emit('update:mode', mode)
|
|
}
|
|
|
|
function onCreateApplication(): Application {
|
|
return {
|
|
name: undefined,
|
|
image: undefined,
|
|
}
|
|
}
|
|
|
|
function onCreateDoor(): Door {
|
|
return {
|
|
code: undefined,
|
|
name: undefined,
|
|
keys: undefined,
|
|
}
|
|
}
|
|
|
|
function onCreateKey(): Key {
|
|
return {
|
|
name: undefined,
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="mode == 'mini-add'" class="place-block-hover show-editor-block" @click="updateMode('add')">
|
|
<p class="place-image-plus">+</p>
|
|
</div>
|
|
|
|
<div v-if="mode == 'add'" class="place-block">
|
|
<n-space vertical>
|
|
<n-input-group>
|
|
<n-input :style="{ width: '20%' }" :value="newPlaceCode" @update:value="updateCode" type="text"
|
|
placeholder="Ы-1" />
|
|
<n-input :style="{ width: '80%' }" :value="newPlaceName" @update:value="updateName" type="text"
|
|
placeholder="Дом №Ы" />
|
|
</n-input-group>
|
|
<n-input :value="newPlaceText" @update:value="updateText" type="textarea" :autosize="{ minRows: 3 }"
|
|
placeholder="В начале было слово..." />
|
|
<slot></slot>
|
|
</n-space>
|
|
</div>
|
|
|
|
<div v-if="mode == 'show-editor'" class="place-block-hover show-editor-block" @click="updateMode('edit')">
|
|
<p>[{{ props.place.code }}] - {{ props.place.name }}</p>
|
|
<div class="message-content">{{ props.place.text }}</div>
|
|
|
|
<div v-for="door in props.place.doors" v-bind:key="door.code" class="door-block">
|
|
{{ door.name }} <span v-for="key in door.keys" class="key-block">
|
|
<Icon class="lock-icon">
|
|
<LockOutlined />
|
|
</Icon> {{ key.name }}
|
|
</span>
|
|
</div>
|
|
|
|
<div v-for="application in props.place.applications" v-bind:key="application.name" class="application-block">
|
|
Приложение: {{ application.name }}
|
|
</div>
|
|
|
|
<p class="gray-block">
|
|
<span v-if="place.hidden">
|
|
Скрытая точка
|
|
</span>
|
|
<span v-for="key in place.keys" class="key-block">
|
|
<Icon class="lock-icon">
|
|
<Key24Regular />
|
|
</Icon> {{ key.name }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div v-if="mode == 'edit'" class="place-block">
|
|
<n-space vertical>
|
|
<n-input-group>
|
|
<n-input :style="{ width: '20%' }" v-model:value="props.place.code" type="text" placeholder="Ы-1" />
|
|
<n-input :style="{ width: '80%' }" v-model:value="props.place.name" type="text" placeholder="Дом №Ы" />
|
|
</n-input-group>
|
|
<n-input v-model:value="props.place.text" type="textarea" :autosize="{ minRows: 3 }"
|
|
placeholder="В начале было слово..." />
|
|
<n-switch v-model:value="props.place.hidden">
|
|
<template #checked>
|
|
Скрытая точка
|
|
</template>
|
|
<template #unchecked>
|
|
Обычная точка
|
|
</template>
|
|
</n-switch>
|
|
|
|
Улики
|
|
<n-dynamic-input v-model:value="props.place.applications" :on-create="onCreateApplication">
|
|
<template #create-button-default> Добавить улику </template>
|
|
<template #default="{ value }">
|
|
<div style="display: flex; align-items: center; width: 100%">
|
|
<n-input v-model:value="value.name" type="text" />
|
|
</div>
|
|
</template>
|
|
</n-dynamic-input>
|
|
|
|
Действия
|
|
<n-dynamic-input v-model:value="props.place.doors" :on-create="onCreateDoor">
|
|
<template #create-button-default> Добавить действие </template>
|
|
<template #action="{ index, create, remove }">
|
|
<div style="display: flex; flex-direction: column;">
|
|
<n-button @click="() => create(index)" class="plus-minus-buttons">+</n-button>
|
|
<n-button disabled @click="() => remove(index)" class="plus-minus-buttons">-</n-button>
|
|
</div>
|
|
</template>
|
|
<template #default="{ value: door }">
|
|
<div style="display: flex; flex-direction: column; width: 100%">
|
|
|
|
<div class="door-add-block">
|
|
<n-input-group>
|
|
<n-input :style="{ width: '30%' }" v-model:value="door.code" type="text" placeholder="Код" />
|
|
<n-input :style="{ width: '70%' }" v-model:value="door.name" type="text" placeholder="Название" />
|
|
</n-input-group>
|
|
|
|
<p class="need-keys-text">Требуемые ключи</p>
|
|
<div class="door-field">
|
|
<n-dynamic-input v-model:value="door.keys" :on-create="onCreateKey">
|
|
<template #create-button-default> Добавить ключ </template>
|
|
<template #default="{ value: key }">
|
|
<div style="display: flex; align-items: center; width: 100%">
|
|
<n-input v-model:value="key.name" type="text" placeholder="Название" />
|
|
</div>
|
|
</template>
|
|
</n-dynamic-input>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
</n-dynamic-input>
|
|
|
|
Получаемые ключи
|
|
<n-dynamic-input v-model:value="props.place.keys" :on-create="onCreateKey">
|
|
<template #create-button-default> Добавить ключ </template>
|
|
<template #default="{ value: key }">
|
|
<div style="display: flex; align-items: center; width: 100%">
|
|
<n-input v-model:value="key.name" type="text" placeholder="Название" />
|
|
</div>
|
|
</template>
|
|
</n-dynamic-input>
|
|
|
|
<div class="slot-block">
|
|
<slot></slot>
|
|
</div>
|
|
</n-space>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.place-block-hover,
|
|
.place-block {
|
|
margin: 10px 0;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
border: 1px solid #444;
|
|
}
|
|
|
|
.place-block-hover:hover {
|
|
color: #63e2b7;
|
|
}
|
|
|
|
.place-image-plus {
|
|
font-size: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.show-editor-block {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.message-content {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.gray-block {
|
|
margin-top: 5px;
|
|
color: #777;
|
|
}
|
|
|
|
.application-block {
|
|
margin-right: 5px;
|
|
color: burlywood;
|
|
}
|
|
|
|
.door-block {
|
|
display: inline-block;
|
|
margin: 10px 5px 10px 0;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
background-color: #222;
|
|
color: #eee;
|
|
}
|
|
|
|
.door-add-block {
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
background-color: #222;
|
|
color: #eee;
|
|
}
|
|
|
|
.key-block {
|
|
color: gold;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.lock-icon {
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
.door-field {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.need-keys-text {
|
|
color: gold;
|
|
margin: 15px 0 0 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.slot-block {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.plus-minus-buttons {
|
|
border: 1px solid #444;
|
|
padding: 0 13px;
|
|
margin: 0 0 10px 5px;
|
|
text-align: center;
|
|
color: #eee;
|
|
font-size: 25px;
|
|
border-radius: 40px;
|
|
}
|
|
|
|
.plus-minus-buttons:hover {
|
|
cursor: pointer;
|
|
color: #63e2b7;
|
|
}
|
|
</style>
|