generated from VLADIMIR/template_frontend
471 lines
12 KiB
Vue
471 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { Key24Regular } from '@vicons/fluent'
|
|
import { LockOutlined } from '@vicons/material'
|
|
import MessagePaper from './MessagePaper.vue';
|
|
import { Icon } from '@vicons/utils'
|
|
import { NButton, NDynamicInput, NInput, NInputGroup, NSpace, NSwitch, NText, NUpload, NUploadDragger } from 'naive-ui'
|
|
import type { PropType } from 'vue'
|
|
|
|
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,
|
|
},
|
|
addAction: {
|
|
type: Function as PropType<(param: string) => void>,
|
|
}
|
|
})
|
|
|
|
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')">
|
|
<div class="message-header">
|
|
{{ props.place?.code }}: {{ props.place?.name }}
|
|
</div>
|
|
<hr class="hr" />
|
|
<div class="message-content">
|
|
<div v-if="props.place?.image">
|
|
<div class="message-image-border">
|
|
<img :src="props.place?.image" class="message-image">
|
|
</div>
|
|
</div>
|
|
{{ 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>
|
|
|
|
<hr class="hr" v-if="props.place?.applications?.length" />
|
|
<div class="message-footer application-block" v-for="application in props.place?.applications"
|
|
v-bind:key="application.name">
|
|
Приложение: {{ application.name }}
|
|
</div>
|
|
|
|
<p class="gray-block">
|
|
<span v-if="props.place?.hidden">
|
|
Скрытая точка
|
|
</span>
|
|
<span v-for="key in props.place?.keys" class="key-block">
|
|
<Icon class="lock-icon">
|
|
<Key24Regular />
|
|
</Icon> {{ key.name }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div v-if="mode == 'show'">
|
|
<MessagePaper>
|
|
<div class="message-show-header font">
|
|
{{ place?.code }}: {{ place?.name }}
|
|
<span class="collapse-icon collapse-icon-up" @click="updateMode('show-collapse')"></span>
|
|
</div>
|
|
<hr class="show-hr" />
|
|
<div class="message-show-content font">
|
|
<div v-if="place?.image?.length">
|
|
<div class="message-image-border">
|
|
<img v-bind:src="place?.image" class="message-image" />
|
|
</div>
|
|
</div>
|
|
{{ place?.text }}
|
|
</div>
|
|
<hr class="show-hr" v-if="props.place?.doors?.length" />
|
|
<div v-for="door in props.place?.doors" :key="door.code" class="button-dialog font"
|
|
v-on:click="addAction!(door.code!)">
|
|
<div class="button-dialog-text">
|
|
{{ door.code }} {{ door.name }}
|
|
</div>
|
|
</div>
|
|
<hr class="show-hr" v-if="props.place?.applications?.length" />
|
|
<div class="message-show-footer font" v-for="application in props.place?.applications" :key="application.name">
|
|
Приложение: {{ application.name }}
|
|
<!-- <div class="application-label">{{ application.number }}</div> -->
|
|
</div>
|
|
</MessagePaper>
|
|
</div>
|
|
|
|
<div v-if="mode == 'show-collapse'">
|
|
<MessagePaper>
|
|
<div class="message-header font">
|
|
{{ place?.code }}: {{ place?.name }}
|
|
<span class="collapse-icon" @click="updateMode('show')"></span>
|
|
</div>
|
|
</MessagePaper>
|
|
</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="В начале было слово..." />
|
|
|
|
<p class="settings-header">Картинка</p>
|
|
<div>
|
|
<n-space>
|
|
<n-space vertical>
|
|
<img :src="props.place.image" class="message-edit-image">
|
|
<n-button @click="props.place.image = '', props.place.fileList = null">Убрать картинку</n-button>
|
|
</n-space>
|
|
<n-space vertical>
|
|
<n-input v-model:value="props.place.image" type="text" placeholder="Не задано" disabled />
|
|
<n-upload directory-dnd :max="1" v-model:file-list="props.place.fileList">
|
|
<n-upload-dragger>
|
|
<n-text style="font-size: 16px">
|
|
Щелкните или перетащите файл в эту область для загрузки
|
|
</n-text>
|
|
</n-upload-dragger>
|
|
</n-upload>
|
|
</n-space>
|
|
</n-space>
|
|
</div>
|
|
|
|
<p class="settings-header">Видимость точки</p>
|
|
<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" placeholder="Название" />
|
|
</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>
|
|
.hr {
|
|
margin: 10px 0;
|
|
border: dashed 1px;
|
|
|
|
/* border-color: black; */
|
|
border-color: #eee;
|
|
}
|
|
|
|
.place-block-hover,
|
|
.place-block {
|
|
margin: 10px 0;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
border: 1px solid #444;
|
|
}
|
|
|
|
.place-block-hover:hover {
|
|
color: #63e2b7;
|
|
cursor: pointer;
|
|
border: 1px solid #63e2b7;
|
|
}
|
|
|
|
.place-image-plus {
|
|
font-size: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.show-editor-block {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.message-content {
|
|
font-weight: 500;
|
|
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;
|
|
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;
|
|
}
|
|
|
|
.message-image-border {
|
|
width: 40%;
|
|
max-width: 200px;
|
|
float: left;
|
|
padding: 7px;
|
|
margin-right: 15px;
|
|
background-image: url("@/assets/images/paper_white.jpg");
|
|
background-size: cover;
|
|
box-shadow: 0 3px 15px rgb(98 98 98);
|
|
transform: rotate(-3deg);
|
|
}
|
|
|
|
.message-image {
|
|
width: 100%;
|
|
}
|
|
|
|
.message-edit-image {
|
|
width: 135px;
|
|
height: 135px;
|
|
}
|
|
|
|
.message-header {
|
|
font-size: 20px;
|
|
padding-right: 50px;
|
|
}
|
|
|
|
.message-footer {
|
|
padding-right: 50px;
|
|
font-weight: 400;
|
|
color: burlywood;
|
|
position: relative;
|
|
}
|
|
|
|
.message-show-header {
|
|
font-size: 20px;
|
|
padding-right: 50px;
|
|
}
|
|
|
|
.collapse-icon {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
width: 45px;
|
|
height: 28px;
|
|
cursor: pointer;
|
|
background-image: url("@/assets/images/collapse.png");
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.collapse-icon-up {
|
|
transform: rotate(-180deg);
|
|
}
|
|
|
|
.show-hr {
|
|
margin: 10px 0;
|
|
border: dashed 1px;
|
|
border-color: black;
|
|
}
|
|
|
|
.font {
|
|
font-family: 'font_old_typer';
|
|
font-size: 18px;
|
|
}
|
|
|
|
.message-show-content {
|
|
font-weight: 500;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.message-show-footer {
|
|
padding-right: 50px;
|
|
font-weight: 400;
|
|
color: var(--second-color);
|
|
position: relative;
|
|
}
|
|
|
|
.button-dialog {
|
|
display: inline-block;
|
|
font-weight: 600;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
margin-top: 10px;
|
|
margin-right: 10px;
|
|
background-image: url("@/assets/images/belt.png");
|
|
background-size: cover;
|
|
color: #bfa07d;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button-dialog-text {
|
|
padding: 5px 12px;
|
|
}
|
|
</style>
|