From 06fea11fd2a4feb4285767a74fc4abaffe3e6d90 Mon Sep 17 00:00:00 2001 From: Daria Mikhailova Date: Tue, 12 Mar 2024 20:41:50 +1300 Subject: [PATCH] taking office data from the config --- scripts/client.build.ts | 5 ++ src/client/components/OfficeFloorMap.tsx | 3 +- src/client/components/ui/Map/mapbox/index.ts | 9 ++- src/client/config.ts | 5 ++ .../about/client/components/AboutPage.tsx | 80 +++++++++++++------ .../about/client/components/AboutWidget.tsx | 35 ++++---- src/modules/users/client/helpers/index.ts | 6 -- src/server/app-config/schemas.ts | 9 +++ 8 files changed, 103 insertions(+), 49 deletions(-) diff --git a/scripts/client.build.ts b/scripts/client.build.ts index 1bb65649..d475c071 100644 --- a/scripts/client.build.ts +++ b/scripts/client.build.ts @@ -51,7 +51,12 @@ function getBuildConfig(): BuildOptions { 'icon', 'timezone', 'country', + 'address', + 'coordinates', 'city', + 'directions', + 'workingHours', + 'workingDays', 'allowGuestInvitation', 'allowDeskReservation', 'allowRoomReservation', diff --git a/src/client/components/OfficeFloorMap.tsx b/src/client/components/OfficeFloorMap.tsx index 2a49368f..12197c63 100644 --- a/src/client/components/OfficeFloorMap.tsx +++ b/src/client/components/OfficeFloorMap.tsx @@ -20,7 +20,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 ' + 'rounded 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 +34,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', diff --git a/src/client/components/ui/Map/mapbox/index.ts b/src/client/components/ui/Map/mapbox/index.ts index 710acceb..7fca55d5 100644 --- a/src/client/components/ui/Map/mapbox/index.ts +++ b/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, diff --git a/src/client/config.ts b/src/client/config.ts index 3f00a307..f9088821 100644 --- a/src/client/config.ts +++ b/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' diff --git a/src/modules/about/client/components/AboutPage.tsx b/src/modules/about/client/components/AboutPage.tsx index c0a70435..9da71299 100644 --- a/src/modules/about/client/components/AboutPage.tsx +++ b/src/modules/about/client/components/AboutPage.tsx @@ -4,16 +4,17 @@ import { Background, ComponentWrapper, H1, - P, H2, - Icons, H3, } from '#client/components/ui' -import { EventType, Map } from '#client/components/ui/Map' +import { Map } from '#client/components/ui/Map' import { useStore } from '@nanostores/react' import * as stores from '#client/stores' import { useDocumentTitle, useOffice } from '#client/utils/hooks' import { useVisitsAreas } from '#modules/visits/client/queries' +import { dropMarker } from '#client/components/ui/Map/mapbox' +import dayjs from 'dayjs' +import { useMemo } from 'react' export const AboutPage: React.FC = () => { const page = useStore(stores.router) @@ -23,6 +24,26 @@ export const AboutPage: React.FC = () => { const { data: areas = [] } = useVisitsAreas(office?.id || '') useDocumentTitle(`About ${office?.name}`) + + const onLoad = (mapboxgl: any, map: mapboxgl.Map) => + dropMarker(mapboxgl, map, office?.coordinates) + const events = [ + { + name: 'load', + action: onLoad, + }, + ] + + const coreHours = useMemo(() => { + if (!office || office.workingHours?.length !== 2) { + return '' + } + return `${dayjs(office.workingHours[0], 'HH:mm').format('hA')} - ${dayjs( + office.workingHours[1], + 'HH:mm' + ).format('hA')} ${!!office.workingDays ? `, ${office.workingDays}` : ''}` + }, [office]) + if (!office) { return ( @@ -36,6 +57,7 @@ export const AboutPage: React.FC = () => { ) } + return (
@@ -46,36 +68,46 @@ export const AboutPage: React.FC = () => {

Address

- Glogauer Straße 6, Berlin,
Germany Entrance through the - courtyard + {office.address}, {office?.city}

+ {office.directions && office.directions}
+ + {office && + (office.allowDeskReservation || office?.allowRoomReservation) && ( +
+

Available facilities

+
+
    + {office.allowDeskReservation &&
  • desk bookings
    • } + {office.allowRoomReservation && ( +
  • meeting room bookings
    • + )} +
+
+
+ )}
-

Available facilities

-
- {' '} - {' '} - - -
-
-
-

Opening hours

-

9am - 6pm, Monday - Friday

+ {office.workingHours && ( +
+

Opening hours

+

{coreHours}

+
+ )}

- We recommend use of the office only during 'core' working hours - (9am - 6pm, Monday - Friday). Any earlier or later than this, or - on a weekend, and we are unable to guarantee entrance or exit to - and from the office spaces.{' '} + We recommend use of the hub only during 'core' working hours{' '} + {!!coreHours && `(${coreHours})`}. Any earlier or later than + this, or on a weekend, and we are unable to guarantee entrance + or exit to and from the office spaces.{' '}

@@ -84,13 +116,13 @@ export const AboutPage: React.FC = () => {

Floor plan

{areas.map((area) => { - if (area.id === 'none') { + if (area.id === 'none' || !area.available || !area.bookable) { return } return (

{area.name}

- {area.map} + {area.map}
) })} diff --git a/src/modules/about/client/components/AboutWidget.tsx b/src/modules/about/client/components/AboutWidget.tsx index eba239e7..7d296d7d 100644 --- a/src/modules/about/client/components/AboutWidget.tsx +++ b/src/modules/about/client/components/AboutWidget.tsx @@ -2,41 +2,44 @@ import { FButton, H2, H3, Icons, WidgetWrapper } from '#client/components/ui' import { useStore } from '@nanostores/react' import * as stores from '#client/stores' import { useOffice } from '#client/utils/hooks' +import { useMemo } from 'react' +import dayjs from 'dayjs' export const AboutWidget: React.FC = () => { const officeId = useStore(stores.officeId) const office = useOffice(officeId ?? '') + const coreHours = useMemo(() => { + if (!office || office.workingHours?.length !== 2) { + return '' + } + return `${dayjs(office.workingHours[0], 'HH:mm').format('hA')} - ${dayjs( + office.workingHours[1], + 'HH:mm' + ).format('hA')} ${!!office.workingDays ? `, ${office.workingDays}` : ''}` + }, [office]) return (
- {console.log(office)} {}
{office?.address && (

Address

- {office?.address} + {office?.address}, {office?.city}
- Entrance through the courtyard + {office.directions}

)}
-
-

Available facilities

-
- {' '} - {' '} - - + {coreHours && ( +
+

Opening hours

+

{coreHours}

+
-
-
-

Opening hours

-

9am - 6pm, Mon - Fri

-
-
+ )}