105 lines
3.0 KiB
Vue
105 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="relative h-full">
|
||
|
|
<div
|
||
|
|
class="absolute top-0 left-0 z-10 rounded-br-md border-b-2 border-r-2 border-gray-200 bg-white px-2 py-2 shadow-lg"
|
||
|
|
>
|
||
|
|
<div class="flex flex-row items-center space-x-4 px-4">
|
||
|
|
<div class="flex flex-row items-center space-x-4">
|
||
|
|
<label for="building">Building:</label>
|
||
|
|
<select
|
||
|
|
id="building"
|
||
|
|
class="rounded-sm border-gray-300 py-1 focus:ring-2 focus:ring-blue-200"
|
||
|
|
v-model="selectedBuildingId"
|
||
|
|
@change="buildingSelected()"
|
||
|
|
>
|
||
|
|
<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">Floor:</label>
|
||
|
|
<select
|
||
|
|
id="floor"
|
||
|
|
class="rounded-sm border-gray-300 py-1 focus:ring-2 focus:ring-blue-200"
|
||
|
|
v-model="selectedFloorId"
|
||
|
|
>
|
||
|
|
<option v-for="floor of floors" :value="floor.id">
|
||
|
|
{{ floor.displayName }} ({{ floor.number }})
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div v-if="selectedFloorId">{{ status }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<HousePlanner
|
||
|
|
v-if="selectedFloorId"
|
||
|
|
:floor-document="floorPlan"
|
||
|
|
@update="($newValue) => updateDocument($newValue)"
|
||
|
|
@edited="status = 'Modified'"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { storeToRefs } from 'pinia';
|
||
|
|
import { computed, onMounted, ref } from 'vue';
|
||
|
|
import { defaultRoomData } from '../components/house-planner/helpers/default-room';
|
||
|
|
import HousePlanner from '../components/house-planner/HousePlanner.vue';
|
||
|
|
import { FloorDocument } from '../components/house-planner/interfaces/floor-document.interface';
|
||
|
|
import { useBuildingStore } from '../store/building.store';
|
||
|
|
const building = useBuildingStore();
|
||
|
|
|
||
|
|
const { buildings, floors } = storeToRefs(building);
|
||
|
|
const selectedBuildingId = ref<number>();
|
||
|
|
const selectedFloorId = ref<number>();
|
||
|
|
const status = ref('No changes');
|
||
|
|
|
||
|
|
const currentFloor = computed(
|
||
|
|
() =>
|
||
|
|
selectedFloorId.value &&
|
||
|
|
floors.value.find((floor) => floor.id === selectedFloorId.value)
|
||
|
|
);
|
||
|
|
const floorPlan = computed(
|
||
|
|
() =>
|
||
|
|
currentFloor.value &&
|
||
|
|
Object.assign({
|
||
|
|
...defaultRoomData,
|
||
|
|
id: selectedFloorId.value,
|
||
|
|
...JSON.parse(currentFloor.value.plan),
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
const buildingSelected = async () => {
|
||
|
|
if (selectedBuildingId.value == null) return;
|
||
|
|
await building.getFloors(selectedBuildingId.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const updateDocument = async (data: FloorDocument) => {
|
||
|
|
if (
|
||
|
|
!selectedBuildingId.value ||
|
||
|
|
!selectedFloorId.value ||
|
||
|
|
!currentFloor.value
|
||
|
|
)
|
||
|
|
return;
|
||
|
|
|
||
|
|
status.value = 'Saving...';
|
||
|
|
await building.saveFloor(
|
||
|
|
selectedBuildingId.value,
|
||
|
|
currentFloor.value.number,
|
||
|
|
{
|
||
|
|
plan: JSON.stringify(data),
|
||
|
|
}
|
||
|
|
);
|
||
|
|
status.value = 'Saved!';
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
floors.value = [];
|
||
|
|
building.getBuildings();
|
||
|
|
});
|
||
|
|
</script>
|