changes

package-lock.json

@@ -12,6 +12,8 @@
         "@heroicons/vue": "^2.0.13",
         "@vueuse/core": "^9.10.0",
         "jwt-decode": "^3.1.2",
+        "lodash.omit": "^4.5.0",
+        "lodash.pick": "^4.4.0",
         "pinia": "^2.0.28",
         "sass": "^1.57.1",
         "vue": "^3.2.45",
@@ -20,6 +22,8 @@
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/line-clamp": "^0.4.2",
+        "@types/lodash.omit": "^4.5.7",
+        "@types/lodash.pick": "^4.4.7",
         "@vitejs/plugin-vue": "^4.0.0",
         "autoprefixer": "^10.4.13",
         "postcss": "^8.4.21",
@@ -469,6 +473,30 @@
         "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
       }
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
+      "dev": true
+    },
+    "node_modules/@types/lodash.omit": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash.omit/-/lodash.omit-4.5.7.tgz",
+      "integrity": "sha512-6q6cNg0tQ6oTWjSM+BcYMBhan54P/gLqBldG4AuXd3nKr0oeVekWNS4VrNEu3BhCSDXtGapi7zjhnna0s03KpA==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/lodash.pick": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash.pick/-/lodash.pick-4.4.7.tgz",
+      "integrity": "sha512-HgdyKz7/1+oeoVzbpu1XiX/Bti9AUksHtOILH38T07aKvqoirzcdOsrO2+Yg3L51Hv/8m1MetvHZEUGeABiTiQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.16",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
@@ -1220,6 +1248,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg=="
+    },
+    "node_modules/lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q=="
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -2174,6 +2212,30 @@
       "dev": true,
       "requires": {}
     },
+    "@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
+      "dev": true
+    },
+    "@types/lodash.omit": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash.omit/-/lodash.omit-4.5.7.tgz",
+      "integrity": "sha512-6q6cNg0tQ6oTWjSM+BcYMBhan54P/gLqBldG4AuXd3nKr0oeVekWNS4VrNEu3BhCSDXtGapi7zjhnna0s03KpA==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
+    "@types/lodash.pick": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash.pick/-/lodash.pick-4.4.7.tgz",
+      "integrity": "sha512-HgdyKz7/1+oeoVzbpu1XiX/Bti9AUksHtOILH38T07aKvqoirzcdOsrO2+Yg3L51Hv/8m1MetvHZEUGeABiTiQ==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/web-bluetooth": {
       "version": "0.0.16",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
@@ -2724,6 +2786,16 @@
       "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
       "dev": true
     },
+    "lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg=="
+    },
+    "lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q=="
+    },
     "magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",

package.json

@@ -13,6 +13,8 @@
     "@heroicons/vue": "^2.0.13",
     "@vueuse/core": "^9.10.0",
     "jwt-decode": "^3.1.2",
+    "lodash.omit": "^4.5.0",
+    "lodash.pick": "^4.4.0",
     "pinia": "^2.0.28",
     "sass": "^1.57.1",
     "vue": "^3.2.45",
@@ -21,6 +23,8 @@
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
+    "@types/lodash.omit": "^4.5.7",
+    "@types/lodash.pick": "^4.4.7",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",

src/components/house-planner/HousePlanner.vue

@@ -131,6 +131,7 @@ const emit = defineEmits<{
     boundingBox?: Vec2Box
   ): void;
   (e: 'edited'): void;
+  (e: 'zoom', scale: number): void;
 }>();
 
 const localFloorDocument = ref(deepUnref(props.floorDocument));
@@ -258,6 +259,7 @@ const events: Record<string, (e: CustomEvent) => void> = {
   'hpc:position': (e: CustomEvent<RepositionEvent>) => {
     canvasPos.value = e.detail.position;
     canvasZoom.value = e.detail.zoom;
+    emit('zoom', e.detail.zoom);
   },
   'hpc:save': (e: CustomEvent) => {
     updateLocalDocument();
@@ -297,6 +299,7 @@ onMounted(() => {
   );
   canvasPos.value = setPos;
   canvasZoom.value = setZoom;
+  emit('zoom', setZoom);
 
   Object.keys(events).forEach((event) =>
     canvas.value.addEventListener(event, events[event])

src/enums/item-type.enum.ts

@@ -0,0 +1,14 @@
+export enum ItemType {
+  ITEM = 'ITEM',
+  OBJECT = 'OBJECT',
+  TECHNOLOGY = 'TECHNOLOGY',
+  TOOL = 'TOOL',
+  FOOD = 'FOOD',
+  MEDICINE = 'MEDICINE',
+  ART = 'ART',
+  CRAFT = 'CRAFT',
+  COMPOSITION = 'COMPOSITION',
+  CLOTHING = 'CLOTHING',
+  SERVICE = 'SERVICE',
+  OTHER = 'OTHER',
+}

src/enums/storage-set-type.enum.ts

@@ -0,0 +1,11 @@
+export enum StorageSetType {
+  DRAWERS = 'DRAWERS',
+  SHELVES = 'SHELVES',
+  CUPBOARD = 'CUPBOARD',
+  CLOSET = 'CLOSET',
+  FRIDGE = 'FRIDGE',
+  FREEZER = 'FREEZER',
+  BOX = 'BOX',
+  BOXES = 'BOXES',
+  OTHER = 'OTHER',
+}

src/enums/storage-type.enum.ts

@@ -0,0 +1,14 @@
+export enum StorageType {
+  DRAWER = 'DRAWER',
+  SHELF = 'SHELF',
+  ASSEMBLY = 'ASSEMBLY',
+  CUPBOARD = 'CUPBOARD',
+  CLOSET = 'CLOSET',
+  FRIDGE = 'FRIDGE',
+  FREEZER = 'FREEZER',
+  TABLE = 'TABLE',
+  BOX = 'BOX',
+  VIRTUAL = 'VIRTUAL',
+  PERSON = 'PERSON',
+  OTHER = 'OTHER',
+}

src/enums/transaction-type.enum.ts

@@ -0,0 +1,8 @@
+export enum TransactionType {
+  ACQUIRED = 'ACQUIRED',
+  SOLD = 'SOLD',
+  DESTROYED = 'DESTROYED',
+  BINNED = 'BINNED',
+  MOVED = 'MOVED',
+  TRANSFERRED = 'TRANSFERRED',
+}

src/interfaces/storage.interfaces.ts

@@ -1,11 +1,66 @@
-export interface StorageListItem {
+import { ItemType } from '../enums/item-type.enum';
+import { StorageSetType } from '../enums/storage-set-type.enum';
+import { StorageType } from '../enums/storage-type.enum';
+import { TransactionType } from '../enums/transaction-type.enum';
+import { AddedBy } from './user.interfaces';
+
+export interface StorageSharedType {
   id: number;
   displayName: string;
-  type: string;
   location: string;
   locationDescription: string;
   color: string;
-  itemCount: number;
   createdAt: string;
   updatedAt: string;
 }
+
+export interface StorageListItem extends StorageSharedType {
+  type: StorageType;
+  items?: StoredItem[];
+  itemCount: number;
+}
+
+export interface StorageSetListItem extends StorageSharedType {
+  type: StorageSetType;
+  storages: StorageListItem[];
+}
+
+export interface StorageItem {
+  id: number;
+  displayName: string;
+  type: ItemType;
+  barcode?: string;
+  consumable?: boolean;
+  image?: string;
+  weight?: number;
+  url?: string;
+  notes?: string;
+  public: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface StoredItemTransaction {
+  id: number;
+  type: TransactionType;
+  price?: number;
+  currency?: string;
+  notes?: string;
+  actionAt: string;
+  createdAt: string;
+  updatedAt: string;
+  actor?: AddedBy;
+}
+
+export interface StoredItem {
+  id: number;
+  notes: string;
+  expiresAt?: string;
+  acquiredAt?: string;
+  consumedAt?: string;
+  item: StorageItem;
+  addedBy: AddedBy;
+  createdAt: string;
+  updatedAt: string;
+  transactions?: StoredItemTransaction[];
+}

src/interfaces/user.interfaces.ts

@@ -5,3 +5,10 @@ export interface User {
   picture?: string;
   color?: string;
 }
+
+export interface AddedBy {
+  sub: string;
+  name: string;
+  picture?: string;
+  color?: string;
+}

src/utils/is-storage-set.ts

@@ -0,0 +1,8 @@
+import {
+  StorageSetListItem,
+  StorageSharedType,
+} from '../interfaces/storage.interfaces';
+
+export default function isSet(storage: StorageSharedType) {
+  return !!(storage as StorageSetListItem).storages;
+}

src/utils/jfetch.ts

@@ -1,3 +1,5 @@
+import deepUnref from './deep-unref';
+
 export class JFetchResponse<T> {
   constructor(
     public statusCode: number,
@@ -24,7 +26,7 @@ export default async function jfetch<T = any>(
   if (opts['body'] && typeof opts['body'] === 'object') {
     opts['body'] = JSON.stringify(opts['body']);
     opts['headers'] = {
-      ...(opts['headers'] || {}),
+      ...deepUnref(opts['headers'] || {}),
       'Content-Type': 'application/json',
     };
   }

src/views/building/floors/FloorView.vue

@@ -53,67 +53,67 @@
         transparent
         headless
         :floor-document="floorDocument"
-        @click="clickOnRoom(undefined, $event)"
+        @click="clickOnRoom()"
+        @zoom="(newZoom) => (canvasZoom = newZoom)"
       >
         <RoomPolygon
           v-for="room of rooms"
           :room="room"
+          :zoom="canvasZoom"
           :highlighted="selectedRoom?.id"
-          @clicked-in="(ev) => clickOnRoom(room, ev)"
+          @clicked-in="(x, y) => clickOnRoom(room, x, y)"
+          @mouse-moved-in="(x, y) => mouseMovedInRoom(room, x, y)"
         >
           <template v-if="selectedRoom?.id === room.id">
-            <StorageBubble
+            <template v-for="storage of storages">
-              :storage="storage"
+              <StorageBubble
-              v-for="storage of storages"
+                v-if="!movingBubble || storage.id === movingBubble?.id"
-              :class="{ 'z-20': storage.id === hoveredBubble }"
+                :storage="storage"
-              @mouseenter="() => (hoveredBubble = storage.id)"
+                :class="{
-              @mouseleave="() => (hoveredBubble = undefined)"
+                  'z-20': storage.id === hoveredBubble?.id,
-            >
+                  'pointer-events-none': !!movingBubble,
-              <span class="text-md font-bold">{{ storage.displayName }}</span>
+                }"
-              <span class="text-sm">Stored items: {{ storage.itemCount }}</span>
+                @mouseenter="() => (hoveredBubble = storage)"
-            </StorageBubble>
+                @start-moving="moveBubble(storage)"
+              >
+                <div class="flex items-center space-x-1">
+                  <span class="text-md font-bold">{{
+                    storage.displayName
+                  }}</span>
+                  <span
+                    v-if="isSet(storage)"
+                    class="text-[0.75rem] font-bold uppercase text-gray-400"
+                    >(Storage Set)</span
+                  >
+                </div>
+                <span class="text-sm" v-if="!isSet(storage)"
+                  >Stored items:
+                  {{ (storage as StorageListItem).itemCount }}</span
+                >
+                <span class="text-sm" v-else
+                  >Storages:
+                  {{ (storage as StorageSetListItem).storages.length }}</span
+                >
+              </StorageBubble>
+            </template>
           </template>
         </RoomPolygon>
       </HousePlanner>
     </div>
   </Transition>
 
-  <div class="grid grid-cols-3">
+  <ItemSelector
-    <div class="flex flex-col">
+    :rooms="rooms"
-      <button
+    :storages="storages"
-        v-for="room of rooms"
+    :selected-room="selectedRoom"
-        @click="selectRoomFromList(room)"
+    :selected-storage="selectedStorage"
-        :class="[
+    @select-room="(room) => selectRoomFromList(room)"
-          selectedRoom?.id === room.id
+    @select-storage="(storage) => selectStorage(storage)"
-            ? 'bg-blue-100 hover:bg-blue-200'
+  />
-            : 'hover:bg-blue-100',
-          'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
-        ]"
-      >
-        {{ room.displayName }} <ChevronRightIcon class="h-4 w-4" />
-      </button>
-    </div>
-
-    <div class="flex flex-col" v-if="selectedRoom?.id">
-      <button
-        v-for="storage of storages"
-        :class="[
-          'hover:bg-blue-100',
-          'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
-        ]"
-      >
-        {{ storage.displayName }} ({{ storage.itemCount }})
-        <ChevronRightIcon class="h-4 w-4" />
-      </button>
-    </div>
-  </div>
 </template>
+
 <script setup lang="ts">
-import {
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/outline';
-  ChevronDownIcon,
-  ChevronRightIcon,
-  ChevronUpIcon,
-} from '@heroicons/vue/24/outline';
 import { storeToRefs } from 'pinia';
 import PageHead from '../../../components/PageHead.vue';
 import { useRoute } from 'vue-router';
@@ -122,26 +122,34 @@ import { computed, ref } from '@vue/reactivity';
 import HousePlanner from '../../../components/house-planner/HousePlanner.vue';
 import { boundingBox } from '../../../modules/house-planner/utils';
 import { Vec2 } from '../../../modules/house-planner/interfaces';
-import { watch } from 'vue';
 import { RoomLayoutObject } from '../../../interfaces/room.interfaces';
 import jfetch from '../../../utils/jfetch';
 import { BACKEND_URL } from '../../../constants';
 import { useAccessToken } from '../../../composables/useAccessToken';
-import { StorageListItem } from '../../../interfaces/storage.interfaces';
+import {
+  StorageListItem,
+  StorageSetListItem,
+  StorageSharedType,
+} from '../../../interfaces/storage.interfaces';
 import StorageBubble from './StorageBubble.vue';
 import RoomPolygon from './RoomPolygon.vue';
 import { useLocalStorage } from '@vueuse/core';
+import isSet from '../../../utils/is-storage-set';
+import ItemSelector from './ItemSelector.vue';
 
 const route = useRoute();
 const buildingStore = useBuildingStore();
 const { building } = storeToRefs(buildingStore);
 const { authHeader } = useAccessToken();
 const canvas = ref<InstanceType<typeof HousePlanner>>();
-const storages = ref<StorageListItem[]>([]);
-const selectedRoom = ref<RoomLayoutObject>();
 const showMap = useLocalStorage('showRoomMap', true, { writeDefaults: false });
-const hoveredBubble = ref<number>();
+const canvasZoom = ref(1);
-const selectedStorage = ref<number>();
+const storages = ref<StorageSharedType[]>([]);
+const selectedRoom = ref<RoomLayoutObject>();
+const hoveredBubble = ref<StorageSharedType>();
+const movingBubble = ref<StorageSharedType>();
+const selectedSet = ref<StorageSetListItem>();
+const selectedStorage = ref<StorageListItem>();
 
 const floor = computed(() =>
   building.value?.floors.find(
@@ -153,32 +161,75 @@ const floorDocument = computed(
   () => floor.value?.plan && JSON.parse(floor.value.plan)
 );
 
-const roomCoordinate = (ev: MouseEvent) => {
+const clickOnRoom = (room?: RoomLayoutObject, x?: number, y?: number) => {
-  const rect = (ev.target as HTMLElement).getBoundingClientRect();
-  const [x, y] = [ev.clientX - rect.left, ev.clientY - rect.top];
-  console.log(x, y);
-};
-
-const clickOnRoom = (room: RoomLayoutObject | undefined, ev: MouseEvent) => {
   canvas.value?.setViewRectangle(room?.boundingBox);
   selectedStorage.value = undefined;
+  selectedSet.value = undefined;
   if (room && (!selectedRoom.value || room.id !== selectedRoom.value?.id)) {
     getRoomStorages(room);
   } else if (room?.id == selectedRoom.value?.id) {
-    roomCoordinate(ev);
+    if (movingBubble.value && x != null && y != null) {
+      setBubbleLocation(x, y);
+    }
   } else {
     storages.value = [];
   }
   selectedRoom.value = room;
 };
 
+const mouseMovedInRoom = (room: RoomLayoutObject, x: number, y: number) => {
+  if (movingBubble.value) {
+    const storage = storages.value.find(
+      (item) => item.id === movingBubble.value?.id
+    );
+    if (!storage) return;
+    storage.location = `${x},${y}`;
+  }
+};
+
+const moveBubble = (bubble: StorageSharedType) => {
+  movingBubble.value = bubble;
+};
+
+const setBubbleLocation = async (x: number, y: number) => {
+  if (!movingBubble.value) return;
+  await jfetch(
+    `${BACKEND_URL}/storage/${
+      (movingBubble.value as StorageSetListItem).storages ? 'set' : 'storages'
+    }/${movingBubble.value.id}`,
+    {
+      method: 'PATCH',
+      body: {
+        location: `${x},${y}`,
+      },
+      headers: authHeader.value,
+    }
+  );
+  movingBubble.value = undefined;
+};
+
 const selectRoomFromList = (room: RoomLayoutObject) => {
   canvas.value?.setViewRectangle(room?.boundingBox);
   selectedStorage.value = undefined;
+  selectedSet.value = undefined;
   getRoomStorages(room);
   selectedRoom.value = room;
 };
 
+const selectStorage = (storage: StorageSharedType) => {
+  if (isSet(storage)) {
+    selectedSet.value = storage as StorageSetListItem;
+    return;
+  }
+
+  selectedStorage.value = storage as StorageListItem;
+  jfetch(`${BACKEND_URL}/storage/storages/${storage.id}`, {
+    headers: authHeader.value,
+  }).then(({ data: storage }) => {
+    selectedStorage.value = storage;
+  });
+};
+
 const rooms = computed<RoomLayoutObject[]>(
   () =>
     (floor.value &&

src/views/building/floors/ItemSelector.vue

@@ -0,0 +1,94 @@
+<template>
+  <div :class="['grid', selectedSet ? 'grid-cols-4' : 'grid-cols-3']">
+    <div class="flex flex-col">
+      <button
+        v-for="room of rooms"
+        @click="emit('selectRoom', room)"
+        :class="[
+          selectedRoom?.id === room.id
+            ? 'bg-blue-100 hover:bg-blue-200'
+            : 'hover:bg-blue-100',
+          'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
+        ]"
+      >
+        <span>{{ room.displayName }}</span> <ChevronRightIcon class="h-4 w-4" />
+      </button>
+    </div>
+
+    <div class="flex flex-col" v-if="selectedRoom?.id">
+      <button
+        v-for="storage of storages"
+        @click="emit('selectStorage', storage)"
+        :class="[
+          selectedSet?.id === storage.id || selectedStorage?.id === storage.id
+            ? 'bg-blue-100 hover:bg-blue-200'
+            : 'hover:bg-blue-100',
+          'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
+        ]"
+      >
+        <span
+          >{{ storage.displayName }}
+
+          <span v-if="!isSet(storage)"
+            >({{ (storage as StorageListItem).itemCount }})</span
+          >
+          <span v-else>
+            (set) ({{ (storage as StorageSetListItem).storages.length }})</span
+          >
+        </span>
+        <ChevronRightIcon class="h-4 w-4" />
+      </button>
+    </div>
+
+    <div class="flex flex-col" v-if="selectedSet">
+      <button
+        v-for="storage of selectedSet.storages"
+        @click="emit('selectStorage', storage)"
+        :class="[
+          'hover:bg-blue-100',
+          'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
+        ]"
+      >
+        <span>{{ storage.displayName }} ({{ storage.itemCount }})</span>
+        <ChevronRightIcon class="h-4 w-4" />
+      </button>
+    </div>
+
+    <div class="flex flex-col" v-if="selectedStorage?.items">
+      <button
+        v-for="item of selectedStorage.items"
+        :class="[
+          'hover:bg-blue-100',
+          'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
+        ]"
+      >
+        <span>{{ item.item.displayName }}</span>
+        <ChevronRightIcon class="h-4 w-4" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronRightIcon } from '@heroicons/vue/24/outline';
+import isSet from '../../../utils/is-storage-set';
+import {
+  StorageListItem,
+  StorageSetListItem,
+  StorageSharedType,
+} from '../../../interfaces/storage.interfaces';
+import { RoomLayoutObject } from '../../../interfaces/room.interfaces';
+
+const props = defineProps<{
+  rooms: RoomLayoutObject[];
+  storages: StorageSharedType[];
+  selectedRoom?: RoomLayoutObject;
+  selectedSet?: StorageSetListItem;
+  selectedStorage?: StorageListItem;
+}>();
+
+const emit = defineEmits<{
+  (e: 'selectStorage', storage: StorageSharedType): void;
+  (e: 'selectRoom', room: RoomLayoutObject): void;
+}>();
+</script>

src/views/building/floors/RoomPolygon.vue

@@ -13,6 +13,7 @@
       class="absolute"
       :style="roomPolygonCSS"
       @click.stop="clickOnRoom($event)"
+      @mousemove="moveOverRoom($event)"
     ></div>
     <span class="pointer-events-none z-10" v-if="!highlighted">{{
       room.displayName
@@ -27,14 +28,25 @@ import { RoomLayoutObject } from '../../../interfaces/room.interfaces';
 
 const props = defineProps<{
   room: RoomLayoutObject;
+  zoom: number;
   highlighted?: number;
 }>();
 
 const emit = defineEmits<{
-  (e: 'clickedIn', ev: MouseEvent): void;
+  (e: 'clickedIn', x: number, y: number): void;
+  (e: 'mouseMovedIn', x: number, y: number): void;
 }>();
-
+const mouseCoordsFromEvent = (ev: MouseEvent): [number, number] => {
-const clickOnRoom = (ev: MouseEvent) => emit('clickedIn', ev);
+  const rect = (ev.target as HTMLElement).getBoundingClientRect();
+  return [
+    (ev.clientX - rect.left) / props.zoom,
+    (ev.clientY - rect.top) / props.zoom,
+  ];
+};
+const clickOnRoom = (ev: MouseEvent) =>
+  emit('clickedIn', ...mouseCoordsFromEvent(ev));
+const moveOverRoom = (ev: MouseEvent) =>
+  emit('mouseMovedIn', ...mouseCoordsFromEvent(ev));
 
 const roomPolygonCSS = computed(() => {
   if (!props.room) return {};

src/views/building/floors/StorageBubble.vue

@@ -12,15 +12,26 @@
       <div
         class="absolute -bottom-2 left-1/2 h-0 w-0 -translate-x-1/2 border-x-8 border-t-[16px] border-x-transparent border-t-white"
       ></div>
+      <button
+        class="absolute left-1/2 bottom-0.5 -translate-x-1/2 rounded-full bg-gray-50 px-1 py-1 ring-1 ring-black ring-opacity-5"
+        @click.stop="emit('startMoving')"
+      >
+        <ArrowsPointingOutIcon class="h-4 w-4" />
+      </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { StorageListItem } from '../../../interfaces/storage.interfaces';
+import { ArrowsPointingOutIcon } from '@heroicons/vue/24/outline';
+import { StorageSharedType } from '../../../interfaces/storage.interfaces';
 
 const props = defineProps<{
-  storage: StorageListItem;
+  storage: StorageSharedType;
+}>();
+
+const emit = defineEmits<{
+  (e: 'startMoving'): void;
 }>();
 
 const getStoragePosition = (storage: any) => {

vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue'
+import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
-})
+});