111 lines
3.8 KiB
Vue
111 lines
3.8 KiB
Vue
<template>
|
|
<div
|
|
class="pointer-events-none absolute left-0 top-0 z-10 w-screen sm:w-auto"
|
|
>
|
|
<Transition
|
|
enter-active-class="transition-max-height ease-out duration-200 overflow-hidden"
|
|
enter-from-class="max-h-0"
|
|
enter-to-class="max-h-14"
|
|
leave-active-class="transition-max-height ease-in duration-150 overflow-hidden"
|
|
leave-from-class="max-h-14"
|
|
leave-to-class="max-h-0"
|
|
>
|
|
<div
|
|
v-if="open"
|
|
class="pointer-events-auto w-full overflow-auto border-2 border-t-0 border-gray-200 bg-white shadow-lg sm:overflow-visible sm:rounded-br-md"
|
|
>
|
|
<div class="h-14 px-2 py-2.5">
|
|
<div class="flex flex-row items-center space-x-4 px-4">
|
|
<button @click="router.go(-1)" :title="$t('common.back')">
|
|
<span class="sr-only">{{ $t('common.back') }}</span
|
|
><ChevronLeftIcon class="-ml-4 h-6 w-6" />
|
|
</button>
|
|
<div class="flex flex-row items-center space-x-4">
|
|
<label for="building">{{ $t('common.building') }}:</label>
|
|
<select
|
|
id="building"
|
|
class="rounded-sm border-gray-300 py-1 focus:ring-2 focus:ring-blue-200"
|
|
:value="selectedBuildingId"
|
|
@change="
|
|
emit(
|
|
'update:selectedBuildingId',
|
|
Number(($event.target as HTMLSelectElement).value),
|
|
)
|
|
"
|
|
>
|
|
<option v-for="building of buildings" :value="building.id">
|
|
{{ building.displayName }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div
|
|
class="flex flex-row items-center space-x-4"
|
|
v-if="selectedBuildingId"
|
|
>
|
|
<label for="floor">{{ $t('common.floor') }}:</label>
|
|
<select
|
|
id="floor"
|
|
class="rounded-sm border-gray-300 py-1 focus:ring-2 focus:ring-blue-200"
|
|
:value="selectedFloorId"
|
|
@change="
|
|
emit(
|
|
'update:selectedFloorId',
|
|
Number(($event.target as HTMLSelectElement).value),
|
|
)
|
|
"
|
|
>
|
|
<option v-for="floor of floors" :value="floor.id">
|
|
{{ floor.displayName }} ({{ floor.number }})
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div v-if="selectedFloorId">
|
|
{{ $t('planner.status.' + status) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
<button
|
|
:class="[
|
|
'bg-white',
|
|
'pointer-events-auto -mt-0.5 ml-2 h-8 rounded-bl-md rounded-br-md px-2 py-2 ring-1 ring-black ring-opacity-5',
|
|
]"
|
|
:title="`${open ? 'Hide' : 'Open'} panel`"
|
|
:aria-expanded="open"
|
|
@click="() => (open = !open)"
|
|
>
|
|
<span class="sr-only">{{ open ? 'Hide' : 'Open' }} panel</span>
|
|
<ChevronDoubleUpIcon class="h-4 w-4" v-if="open" />
|
|
<ChevronDoubleDownIcon class="h-4 w-4" v-else />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import {
|
|
ChevronLeftIcon,
|
|
ChevronDoubleDownIcon,
|
|
ChevronDoubleUpIcon,
|
|
} from '@heroicons/vue/24/outline';
|
|
import { BuildingListItem } from '../../interfaces/building.interfaces';
|
|
import { FloorListItem } from '../../interfaces/floor.interfaces';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const open = ref(true);
|
|
const router = useRouter();
|
|
|
|
const props = defineProps<{
|
|
floors: FloorListItem[];
|
|
buildings: BuildingListItem[];
|
|
selectedBuildingId?: number;
|
|
selectedFloorId?: number;
|
|
status: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:selectedBuildingId', buildingId: number): void;
|
|
(e: 'update:selectedFloorId', buildingId: number): void;
|
|
}>();
|
|
</script>
|