locations desktop ready

udk-berlin · Jun 25, 2024 · a58f0fc · a58f0fc
1 parent 321860d
commit a58f0fc
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 50 deletions.
diff --git a/src/api/rest/location.ts b/src/api/rest/location.ts
@@ -41,7 +41,13 @@ export const getLocation = cache(async (id: string): Promise<any> => {
   const path = await getLocationPathList(id);
   const item = await getLocationContext(id);
   const building = await getContextTree(path[2].id);
-  const selectedLevel =
+  let level = null;
+  if (item.template == 'location-room') {
+    level = await getLocationContext(path[3].id);
+  } else if (item.template == 'location-level') {
+    level = item;
+  }
+  const levelWithChildren =
     item.template != 'location-building'
       ? Object.values(building.children).find((item) => item.id == path[3].id)
       : null;
@@ -52,25 +58,22 @@ export const getLocation = cache(async (id: string): Promise<any> => {
         (r) => Object.keys(r.children).length !== 0,
       ),
   );
-  const rooms = selectedLevel
-    ? Object.values(selectedLevel.children).filter(
+  const rooms = levelWithChildren
+    ? Object.values(levelWithChildren.children).filter(
         (item) =>
           item.template == 'location-room' &&
           Object.keys(item.children).length !== 0,
       )
     : null;
+
   return {
     id: building.id,
     name: building.name,
     image: FLOORPLANS[building.id],
     room: item.template == 'location-room' ? path[4] : null,
-    level: selectedLevel,
+    level: level,
     levels: levels,
-    floorplan: item.thumbnail_full_size,
-    margin:
-      selectedLevel?.id in FLOORPLAN_MARGINS
-        ? FLOORPLAN_MARGINS[selectedLevel?.id]
-        : '0',
+    margin: level?.id in FLOORPLAN_MARGINS ? FLOORPLAN_MARGINS[level?.id] : '0',
     rooms: rooms,
   };
 });
diff --git a/src/app/[locale]/locations/[place]/page.tsx b/src/app/[locale]/locations/[place]/page.tsx
@@ -9,8 +9,9 @@ type LocationsPageProps = {
 
 export default async function LocationsPage(props: LocationsPageProps) {
   const location = await getLocation(props.params.place);
+
   return (
-    <div className="h-contentpages col-span-3 w-full overflow-y-scroll overscroll-contain bg-primary p-border">
+    <div className="col-span-3 h-contentpages w-full overflow-y-scroll overscroll-contain bg-primary p-border">
       <LocationsMap mapCut={600} />
       <div className="mt-border flex h-full items-start rounded-md bg-secondary p-border">
         <Subnavigation location={location} />

diff --git a/src/app/[locale]/locations/components/floorplan/index.server.tsx b/src/app/[locale]/locations/components/floorplan/index.server.tsx
@@ -11,7 +11,7 @@ export default function Floorplan({ location }: any) {
         placeholder="empty"
         src={`/assets/svg/map/ground_plan/popup/${location.image}.svg`}
       />
-      <Rooms location={location} />
+      {location.rooms && <Rooms location={location} />}
     </div>
   );
 }
diff --git a/src/app/[locale]/locations/components/floorplan/rooms.tsx b/src/app/[locale]/locations/components/floorplan/rooms.tsx
@@ -1,45 +1,48 @@
 'use client';
+import { useRouter } from '@/navigation';
 import cx from 'classnames';
 import { useCallback, useEffect } from 'react';
 import { ReactSVG } from 'react-svg';
 
 export default function Rooms({ location }: any) {
-  console.log(
-    cx(
-      'absolute left-0 top-0 h-fit w-full fill-highlight',
-      location.margin,
-      ...location.rooms.map(
-        (room) => `[&_[data-name="${room.name}"]]:fill-white`,
-      ),
-    ),
-  );
-
-  useEffect(() => {
-    let roomRect = document.querySelectorAll(`[data-id="${location.room}"]`)[0];
-    if (roomRect) {
-      roomRect.style.fill = '#fff';
-    }
-  }, [location.room]);
-
+  const router = useRouter();
   const handleSelectRoom = useCallback(
-    (e) => {
-      console.log(e.target);
+    (e: MouseEvent<HTMLWrapperType, MouseEvent>) => {
+      let room = location.rooms.find((r) => r.name == e?.target?.dataset?.name);
+      router.push(`/locations/${room?.id}`);
     },
-    [location.room, location.rooms],
+    [location.rooms],
   );
   return (
-    location.floorplan && (
+    location.level && (
       <ReactSVG
-        src={location.floorplan}
-        className={cx(
-          'absolute left-0 top-0 h-fit w-full fill-highlight',
-          location.margin,
-          location.rooms
-            .map((room) => `[&_[data-name="${room.name}"]]:fill-white`)
-            .join(' '),
-          `[&_[data-name="${location.room.name}"]]:fill-black`,
-        )}
+        src={location.level?.thumbnail_full_size}
+        className={cx('absolute left-0 top-0 h-fit w-full', location.margin)}
         onClick={handleSelectRoom}
+        afterInjection={(svg) => {
+          location.level.context.map((room) => {
+            let roomRect = svg.querySelectorAll(
+              `[data-name="${room.name}"]`,
+            )[0];
+            if (roomRect) {
+              console.log('here');
+              if (room?.id == location.room?.id) {
+                roomRect.classList.add('fill-white');
+              } else if (location.rooms?.find((r) => r.id == room.id)) {
+                roomRect.classList.add(
+                  'fill-black',
+                  'cursor-pointer',
+                  'hover:fill-white',
+                  'stroke-white',
+                  'stroke-[10px]',
+                );
+                roomRect.title = room.name;
+              } else {
+                roomRect.classList.add('fill-highlight', 'pointer-events-none');
+              }
+            }
+          });
+        }}
       />
     )
   );

diff --git a/src/app/[locale]/locations/components/subnavigation/index.server.tsx b/src/app/[locale]/locations/components/subnavigation/index.server.tsx
@@ -14,13 +14,15 @@ export default async function Subnavigation({ location }: any) {
         selected={location.level?.id}
         backToAll={location.id}
       />
-      <SubLocation
-        title={t('rooms')}
-        sublocations={location.rooms}
-        prefix={t('room')}
-        selected={location.room?.id}
-        backToAll={location.level?.id}
-      />
+      {location.rooms && (
+        <SubLocation
+          title={t('rooms')}
+          sublocations={location.rooms}
+          prefix={t('room')}
+          selected={location.room?.id}
+          backToAll={location.level?.id}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/components/image.tsx b/src/components/image.tsx
@@ -19,7 +19,7 @@ export default function ImageWrapper({
       width={500}
       alt={alt ?? 'thumbnail of student project'}
       className={cx(
-        'w-full max-w-[400px] object-contain md:max-w-[800px]',
+        'w-full max-w-[500px] object-contain md:max-w-[800px]',
         className,
       )}
       placeholder="empty"

diff --git a/src/components/project/container.client.tsx b/src/components/project/container.client.tsx
@@ -22,7 +22,7 @@ export default function ProjectCardContainer({
         params: { id: itemId },
       }}
       replace={pathname.includes('project')}
-      className="inline-block "
+      className="inline-block w-full"
     >
       <div
         className={cx(