About widget improvements + HQ Map updates

scripts/client.build.ts

@@ -51,7 +51,12 @@ function getBuildConfig(): BuildOptions {
             'icon',
             'timezone',
             'country',
+            'address',
+            'coordinates',
             'city',
+            'directions',
+            'workingHours',
+            'workingDays',
             'allowGuestInvitation',
             'allowDeskReservation',
             'allowRoomReservation',

src/client/components/Header.tsx

@@ -13,6 +13,7 @@ import MC from './__import-components'
 export const Header: React.FC = () => {
   const me = useStore(stores.me)
   const permissions = useStore(stores.permissions)
+  const isAdmin = useStore(stores.isAdmin)
 
   const menuItems = React.useMemo(() => {
     const canUpdateProfile = permissions.has(Permissions.users.ManageProfile)
@@ -41,6 +42,13 @@ export const Header: React.FC = () => {
         icon: 'Gear',
       })
     }
+    if (isAdmin) {
+      items.push({
+        name: 'Admin',
+        link: '/admin',
+        icon: 'Person',
+      })
+    }
     items.push({
       name: 'Logout',
       icon: 'Logout',

src/client/components/OfficeFloorMap.tsx

@@ -1,7 +1,6 @@
 import React, { MouseEventHandler } from 'react'
 import { Avatar, Button, P } from '#client/components/ui'
 import {
-  ScheduledItemType,
   OfficeArea,
   OfficeAreaDesk,
   OfficeRoom,
@@ -11,6 +10,8 @@ import { cn } from '#client/utils'
 import { useStore } from '@nanostores/react'
 import * as stores from '#client/stores'
 import { ImageWithPanZoom } from './ui/ImageWithPanZoom'
+import { ScheduledItemType } from '#modules/hub-map/types'
+import { ROBOT_USER_ID } from '#client/constants'
 
 type PointComponentFunctionProps = (
   item: OfficeAreaDesk | OfficeRoom,
@@ -20,7 +21,7 @@ type PointComponentFunctionProps = (
 ) => Element | JSX.Element
 
 const pointCommonStyle =
-  'rounded-sm border-2 -translate-y-1/2 -translate-x-1/2 hover:scale-105 transition-all delay-100 '
+  'border-2 -translate-y-1/2 -translate-x-1/2 hover:scale-105 transition-all delay-100'
 
 const PointComponent: Record<
   VisitType.Visit | VisitType.RoomReservation,
@@ -34,6 +35,7 @@ const PointComponent: Record<
       color={isSelected ? 'purple' : 'default'}
       className={cn(
         pointCommonStyle,
+        ' w-fit',
         isSelected
           ? 'border-pink-600 bg-accents-pink'
           : 'bg-violet-300 border-violet-300',
@@ -57,11 +59,14 @@ const PointComponent: Record<
           ? 'border-pink-600 hover:text-white bg-accents-pink hover:bg-accents-pinkDark'
           : 'text-black bg-green-200 border-green-200 hover:bg-cta-jade hover:border-cta-hover-jadeNoOpacity hover:text-white',
         'sm:p-4',
-        pointCommonStyle
+        pointCommonStyle,
+        'absolute'
       )}
       onClick={onClick(item.id, VisitType.RoomReservation)}
     >
-      <p className="font-bold">{item.name}</p>
+      <p className="font-bold">
+        {!isSelected && 'Book'} {item.name}
+      </p>
     </Button>
   ),
 }
@@ -102,7 +107,6 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
     [onToggle]
   )
 
-  // @todo fix types here
   const mapObjects = (scale: number) =>
     !mappablePoints
       ? []
@@ -135,12 +139,20 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
               transform: `scale(${1 / scale})`,
               transformOrigin: 'top left',
             }
-
             if (!!user && !!me) {
+              const userLink =
+                !user.id || user.id === ROBOT_USER_ID
+                  ? ''
+                  : `/profile/${user.id}`
               return (
                 <a
-                  href={`/profile/${user.id}`}
-                  className="absolute -translate-y-1/2 -translate-x-1/2"
+                  href={userLink}
+                  className={cn(
+                    `absolute -translate-y-1/2 -translate-x-1/2`,
+                    !userLink && 'hover:cursor-default',
+                    isSelected &&
+                      'animate-bounce -translate-y-1/2 -translate-x-1/2'
+                  )}
                   style={style}
                   key={user.id + x.position.x + x.position.y}
                 >
@@ -150,7 +162,7 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
                     size="medium"
                     className={cn(
                       '-translate-y-1/2 -translate-x-1/2 ',
-                      'border-2 border-transparent',
+                      'border-2 border-transparent scale-125',
                       `${
                         me?.id === user?.id
                           ? 'border-purple-500 rounded-full'
@@ -183,7 +195,7 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
         <img
           src={area.map}
           alt={`${area.name} floor plan`}
-          className="block w-full opacity-60"
+          className="opacity-80"
         />
         {mapObjects(1)}
       </div>
@@ -196,7 +208,7 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
         <ImageWithPanZoom
           src={area.map}
           alt={`${area.name} floor plan`}
-          className="block w-full opacity-60 object-contain overflow-hidden rounded-sm"
+          className="block w-full object-contain overflow-hidden rounded-sm"
           imageOverlayMappingFn={(scale: number) => mapObjects(scale)}
           initialStartPosition={
             initialStartPosition ? initialStartPosition.position : undefined

src/client/components/ui/Avatar.tsx

@@ -42,7 +42,7 @@ const MinidenticonImg = ({
     [username, saturation, lightness]
   )
   return (
-    <div className="bg-fill-6 rounded-full">
+    <div className="bg-white border border-fill-6 shadow-sm rounded-full">
       <img src={svgURI} alt={username} {...props} />
     </div>
   )

src/client/components/ui/ImageWithPanZoom.tsx

@@ -61,7 +61,10 @@ export const ImageWithPanZoom = ({
             ref={imageRef}
             src={src}
             alt={alt}
-            className={cn('max-w-none h-auto', className)}
+            className={cn(
+              'max-w-auto max-h-[720px] m-auto object-cover',
+              className
+            )}
           />
           <div className="absolute top-0 left-0 w-full h-full">
             {/*  passing scale so we can do reverse scaling on the mapped points */}

src/client/components/ui/Map/mapbox/index.ts

@@ -1,4 +1,3 @@
-import { MutableRefObject } from 'react'
 import { UserMapPin } from '../../../../../modules/users/types'
 import {
   Berlin,
@@ -16,7 +15,13 @@ export const dropMarker = (
   mapboxgl: any,
   map: mapboxgl.Map,
   coords: Coordinates | undefined
-) => (coords ? new mapboxgl.Marker().setLngLat(coords).addTo(map) : null)
+) => {
+  if (coords && coords.length == 2) {
+    return new mapboxgl.Marker({ color: '#E6087B' })
+      .setLngLat(coords)
+      .addTo(map)
+  }
+}
 
 export const getMap = (
   mapboxgl: any,

src/client/config.ts

@@ -21,8 +21,13 @@ export type ClientOfficeConfig = Pick<
   | 'name'
   | 'icon'
   | 'timezone'
+  | 'address'
   | 'country'
   | 'city'
+  | 'coordinates'
+  | 'directions'
+  | 'workingHours'
+  | 'workingDays'
   | 'allowGuestInvitation'
   | 'allowDeskReservation'
   | 'allowRoomReservation'

src/client/constants.ts

@@ -28,3 +28,5 @@ export const ADMIN_ACCESS_PERMISSION_POSTFIX = '__admin'
 export const ADMIN_ACCESS_PERMISSION_RE = new RegExp(
   `^.*\.${ADMIN_ACCESS_PERMISSION_POSTFIX}`
 )
+
+export const ROBOT_USER_ID = '00000000-0000-0000-0000-000000000000'