77 lines
3.7 KiB
Vue
77 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import { RouterLink, useRoute } from 'vue-router';
|
|
import { usePromoSidebar } from '../stores/promo_sidebar';
|
|
import { usePromoScene } from '../stores/promo_scene';
|
|
|
|
const sidebar = usePromoSidebar()
|
|
const sidebar_scene = usePromoScene()
|
|
const route = useRoute()
|
|
|
|
const clickable_obj = ref()
|
|
|
|
watch(clickable_obj, () => {
|
|
sidebar.open(clickable_obj.value);
|
|
})
|
|
watch(() => sidebar.id_clickable, () => {
|
|
if (sidebar.is_open) {
|
|
clickable_obj.value = sidebar.id_clickable
|
|
}
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="sidebar" :class="[{ 'open': sidebar.is_open }]">
|
|
<template v-if="!sidebar.is_open"></template>
|
|
<template v-else>
|
|
<div class="sidebar-content">
|
|
<h2>{{ sidebar_scene.name }}</h2>
|
|
<div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('clickable') }]" v-if="sidebar_scene.clickable.length > 0">
|
|
<div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('clickable')">
|
|
<i-mdi-minus-circle v-if="sidebar.isAccOpen('clickable')" />
|
|
<i-mdi-plus-circle v-else />
|
|
<h3>Виртуальный тур</h3>
|
|
</div>
|
|
|
|
<div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('clickable')">
|
|
<div class="sidebar-list-item" v-for="(item, index) in sidebar_scene.clickable">
|
|
<input type="radio" name="clickable" v-model="clickable_obj" :value="item.id"
|
|
:id="item.id.toString()" />
|
|
<label :for="item.id.toString()">{{ index + 1 }} {{ item.name }}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('obj') }]" v-if="sidebar_scene.visible.length > 0" >
|
|
<div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('obj')">
|
|
<i-mdi-minus-circle v-if="sidebar.isAccOpen('obj')" />
|
|
<i-mdi-plus-circle v-else />
|
|
<h3>Объекты</h3>
|
|
</div>
|
|
|
|
<div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('obj')">
|
|
<div class="sidebar-list-item" v-for="item in sidebar_scene.visible">
|
|
<input type="checkbox" v-model=item.is_enabled :value="item.id" :id="item.id.toString()" />
|
|
<label :for="item.id.toString()">{{ item.name }}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('desc') }]">
|
|
<div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('desc')">
|
|
<i-mdi-minus-circle v-if="sidebar.isAccOpen('desc')" />
|
|
<i-mdi-plus-circle v-else />
|
|
<h3>Описание</h3>
|
|
</div>
|
|
<div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('desc')">
|
|
<template
|
|
v-for="p in (sidebar.description || sidebar_scene.description || '').replace(/(\n|\r)+/g, '\n').split('\n')">
|
|
<p v-html="p"></p>
|
|
</template>
|
|
<RouterLink :to="`/${route.params.item}/${sidebar.target}`" v-if="sidebar.target">
|
|
Перейти
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template> |