From 483d9636d85853543a06560ede32099dba158417 Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Thu, 26 Sep 2024 13:58:18 +0800 Subject: [PATCH 01/17] [BOOKINGSG-6090-timetable][JZ|FY] Update popover-trigger to allow configuring popover delay/offset, also overwrite outline to none --- src/popover-v2/popover-trigger.tsx | 8 ++++++-- src/popover-v2/types.ts | 3 +++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/popover-v2/popover-trigger.tsx b/src/popover-v2/popover-trigger.tsx index a20671ac4..cff9842c8 100644 --- a/src/popover-v2/popover-trigger.tsx +++ b/src/popover-v2/popover-trigger.tsx @@ -45,7 +45,7 @@ export const PopoverTrigger = ({ placement: position, whileElementsMounted: autoUpdate, middleware: [ - offset(16), + offset(otherProps.offset ?? 16), flip(), shift({ limiter: limitShift(), @@ -71,7 +71,10 @@ export const PopoverTrigger = ({ const hover = useHover(context, { enabled: trigger === "hover", // short window to enter the floating element without it closing - delay: { close: 500 }, + delay: { + open: otherProps?.delay?.open ?? 0, + close: otherProps?.delay?.close ?? 500, + }, }); const { getReferenceProps, getFloatingProps } = useInteractions([ @@ -136,6 +139,7 @@ export const PopoverTrigger = ({ }} style={{ ...floatingStyles, + outline: "none", zIndex: zIndex ?? parentZIndex, }} {...getFloatingProps()} diff --git a/src/popover-v2/types.ts b/src/popover-v2/types.ts index b6102eb5b..37555e6f7 100644 --- a/src/popover-v2/types.ts +++ b/src/popover-v2/types.ts @@ -33,6 +33,9 @@ export interface PopoverV2TriggerProps { * the popover may not be visible. Specify the parent element here instead */ rootNode?: RefObject | undefined; + offset?: number | undefined; + // in milliseconds + delay?: { open: number; close: number } | undefined; onPopoverAppear?: (() => void) | undefined; onPopoverDismiss?: (() => void) | undefined; } From 14cf696f486c27e1f3a11e5ab85707790ae8940b Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Thu, 26 Sep 2024 13:59:26 +0800 Subject: [PATCH 02/17] [BOOKINGSG-6090-timetable][JZ|FY] Update popover props table --- stories/popover-v2/props-table.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/stories/popover-v2/props-table.tsx b/stories/popover-v2/props-table.tsx index 550b7a9d2..b6c6e98d4 100644 --- a/stories/popover-v2/props-table.tsx +++ b/stories/popover-v2/props-table.tsx @@ -127,6 +127,24 @@ const POPOVER_TRIGGER_DATA: ApiTableSectionProps[] = [ propTypes: ["React.ReactNode"], mandatory: true, }, + { + name: "offset", + description: "How much offset to apply for the popover (in px)", + propTypes: ["number"], + defaultValue: "16", + }, + { + name: "delay", + description: ( + <> + How much delay for popover to appear/dismiss
+ Note: When trigger is of type click, + delay is not applied. + + ), + propTypes: ["{ open: number, close: number }"], + defaultValue: "{ open: 0, close: 500 }", + }, ...COMMON_POPOVER_ATTRIBUTES, ], }, From ed24543f9cc4645f2a151724157541d0721a36fe Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Thu, 26 Sep 2024 14:00:46 +0800 Subject: [PATCH 03/17] [BOOKINGSG-6090-timetable][JZ|FY] Add TimeTable component and its types along with its mock data --- .../timetable-navigator.style.tsx | 40 + .../timetable-navigator.tsx | 107 + src/timetable/timetable-row/row-bar.style.tsx | 6 + src/timetable/timetable-row/row-bar.tsx | 122 + .../timetable-row/row-cell.style.tsx | 116 + src/timetable/timetable-row/row-cell.tsx | 147 + src/timetable/timetable.style.tsx | 275 ++ src/timetable/timetable.tsx | 394 ++ src/timetable/types.ts | 75 + stories/timetable/mock-data.tsx | 173 + .../timetable/timetable-data-even-days.json | 2214 +++++++++++ .../timetable/timetable-data-odd-days.json | 2751 +++++++++++++ .../timetable/timetable-lazy-load-data.json | 3468 +++++++++++++++++ 13 files changed, 9888 insertions(+) create mode 100644 src/timetable/timetable-navigator/timetable-navigator.style.tsx create mode 100644 src/timetable/timetable-navigator/timetable-navigator.tsx create mode 100644 src/timetable/timetable-row/row-bar.style.tsx create mode 100644 src/timetable/timetable-row/row-bar.tsx create mode 100644 src/timetable/timetable-row/row-cell.style.tsx create mode 100644 src/timetable/timetable-row/row-cell.tsx create mode 100644 src/timetable/timetable.style.tsx create mode 100644 src/timetable/timetable.tsx create mode 100644 src/timetable/types.ts create mode 100644 stories/timetable/mock-data.tsx create mode 100644 stories/timetable/timetable-data-even-days.json create mode 100644 stories/timetable/timetable-data-odd-days.json create mode 100644 stories/timetable/timetable-lazy-load-data.json diff --git a/src/timetable/timetable-navigator/timetable-navigator.style.tsx b/src/timetable/timetable-navigator/timetable-navigator.style.tsx new file mode 100644 index 000000000..57c5445f5 --- /dev/null +++ b/src/timetable/timetable-navigator/timetable-navigator.style.tsx @@ -0,0 +1,40 @@ +import styled, { css } from "styled-components"; +import { Color } from "../../color"; +import { IconButton } from "../../icon-button"; +import { Text } from "../../text"; + +export const StyledRefreshButton = styled(IconButton)<{ $isLoading: boolean }>` + color: ${Color.Neutral[3]}; + @keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + svg { + ${(props) => { + if (props.$isLoading) { + return css` + -webkit-animation: spin 4s linear infinite; + -moz-animation: spin 4s linear infinite; + `; + } + }} + } +`; + +export const NavigationHeaderWrapper = styled.div` + width: 252px; + padding-bottom: 1rem; +`; + +export const NavigationHeaderSubtitleWrapper = styled.div` + display: flex; + align-items: center; + justify-content: center; + gap: 0.625rem; +`; + +export const StyledResultText = styled(Text.H6)` + color: ${Color.Neutral[3]}; +`; diff --git a/src/timetable/timetable-navigator/timetable-navigator.tsx b/src/timetable/timetable-navigator/timetable-navigator.tsx new file mode 100644 index 000000000..0317fec30 --- /dev/null +++ b/src/timetable/timetable-navigator/timetable-navigator.tsx @@ -0,0 +1,107 @@ +import { RefreshIcon } from "@lifesg/react-icons"; +import { MutableRefObject } from "react"; +import { DateNavigator } from "../../date-navigator/date-navigator"; +import { + NavigationHeaderSubtitleWrapper, + NavigationHeaderWrapper, + StyledRefreshButton, + StyledResultText, +} from "./timetable-navigator.style"; + +interface TimeTableNavigatorProps { + selectedDate: string; + isLoading: boolean; + tableContainerRef: MutableRefObject; + minDate?: string | undefined; + maxDate?: string | undefined; + totalRecords?: number | undefined; + onLeftArrowClick?: (currentDate: string) => void | undefined; + onRightArrowClick?: (currentDate: string) => void | undefined; + onRefresh?: (() => void) | undefined; +} + +export const TimeTableNavigator = ({ + selectedDate, + isLoading, + tableContainerRef, + ...optionalProps +}: TimeTableNavigatorProps) => { + // ============================================================================= + // EVENT HANDLERS + // ============================================================================= + + const scrollToTop = () => { + if (tableContainerRef.current) { + tableContainerRef.current.scrollTop = 0; + } + }; + + const onRefresh = () => { + if (!optionalProps.onRefresh) return; + scrollToTop(); + optionalProps.onRefresh(); + }; + + const handleRightArrowClick = (date: string) => { + scrollToTop(); + optionalProps.onRightArrowClick(date); + }; + + const handleLeftArrowClick = (date: string) => { + scrollToTop(); + optionalProps.onLeftArrowClick(date); + }; + // ============================================================================= + // RENDER FUNCTIONS + // ============================================================================= + const renderRecordsSection = () => { + if (optionalProps.totalRecords === undefined) return <>; + return ( + + + {optionalProps.totalRecords} results found + + {optionalProps.onRefresh && ( + + + + )} + + ); + }; + + return ( + + { + + } + {renderRecordsSection()} + + ); +}; diff --git a/src/timetable/timetable-row/row-bar.style.tsx b/src/timetable/timetable-row/row-bar.style.tsx new file mode 100644 index 000000000..07fd0baca --- /dev/null +++ b/src/timetable/timetable-row/row-bar.style.tsx @@ -0,0 +1,6 @@ +import styled from "styled-components"; + +export const RowCellContainer = styled.div` + display: flex; + width: 100%; +`; diff --git a/src/timetable/timetable-row/row-bar.tsx b/src/timetable/timetable-row/row-bar.tsx new file mode 100644 index 000000000..b86a5bdd8 --- /dev/null +++ b/src/timetable/timetable-row/row-bar.tsx @@ -0,0 +1,122 @@ +import dayjs from "dayjs"; +import { MutableRefObject } from "react"; +import { + CustomPopoverProps, + RowBarColors, + RowCellData, + RowData, +} from "../types"; +import { RowCellContainer } from "./row-bar.style"; +import { RowCell } from "./row-cell"; + +interface RowBarProps extends RowData { + timetableMinTime: string; + timetableMaxTime: string; + intervalWidth: number; + containerRef: MutableRefObject; + rowBarColor: RowBarColors; + outsideOpHoursCellCustomPopover?: CustomPopoverProps | undefined; + "data-testid"?: string | undefined; + onCellClick?: (data: RowCellData, e: React.MouseEvent) => void; +} + +export const RowBar = ({ + id, + timetableMinTime, + timetableMaxTime, + rowMinTime = timetableMinTime, + rowMaxTime = timetableMaxTime, + rowCells, + rowBarColor, + intervalWidth, + containerRef, + ...optionalProps +}: RowBarProps) => { + // ============================================================================= + // CONST, STATE, REF + // ============================================================================= + const rowCellArray: RowCellData[] = []; + + // =========================================================================== + // HELPER FUNCTIONS + // =========================================================================== + + const isOnTheSameHour = ( + time1: dayjs.Dayjs, + time2: dayjs.Dayjs + ): boolean => { + return time1.get("hour") == time2.get("hour"); + }; + + // Handle non-op before hours + if (dayjs(timetableMinTime, "HH:mm").isBefore(dayjs(rowMinTime, "HH:mm"))) { + rowCellArray.push({ + id, + startTime: timetableMinTime, + endTime: rowMinTime, + status: "blocked", + customPopover: optionalProps.outsideOpHoursCellCustomPopover, + }); + } + + rowCells.forEach((cell, index) => { + const { endTime } = cell; + rowCellArray.push(cell); + + const nextSlotStartTime = dayjs( + rowCells[index + 1]?.startTime, + "HH:mm" + ); + const parsedEndTime = dayjs(endTime, "HH:mm"); + + let curr = parsedEndTime; + while (curr.isBefore(nextSlotStartTime)) { + if (!isOnTheSameHour(curr, nextSlotStartTime)) { + const nextHour = curr.add(1, "hour").startOf("hour"); // Round to the next hour + rowCellArray.push({ + id, + startTime: curr.format("HH:mm").toString(), + endTime: nextHour.format("HH:mm").toString(), + status: undefined, + }); + curr = nextHour; + } else { + rowCellArray.push({ + id, + startTime: curr.format("HH:mm").toString(), + endTime: nextSlotStartTime.format("HH:mm").toString(), + status: undefined, + }); + curr = nextSlotStartTime; + } + } + }); + + // Handle non-op after hours + if (dayjs(timetableMaxTime, "HH:mm").isAfter(dayjs(rowMaxTime, "HH:mm"))) { + rowCellArray.push({ + id, + startTime: rowMaxTime, + endTime: timetableMaxTime, + status: "blocked", + customPopover: optionalProps.outsideOpHoursCellCustomPopover, + }); + } + + return ( + + {rowCellArray.map((cell, index) => { + return ( + + ); + })} + + ); +}; diff --git a/src/timetable/timetable-row/row-cell.style.tsx b/src/timetable/timetable-row/row-cell.style.tsx new file mode 100644 index 000000000..d60440e05 --- /dev/null +++ b/src/timetable/timetable-row/row-cell.style.tsx @@ -0,0 +1,116 @@ +import styled, { css } from "styled-components"; +import { Color } from "../../color"; +import { PopoverTrigger } from "../../popover-v2"; +import { PopoverCard } from "../../popover-v2/popover.styles"; +import { Text } from "../../text"; +import { CellType } from "../types"; + +interface BlockStyleProps { + $width: number; + $status: CellType; + $bgColour: string; + $clickableCell?: boolean; +} + +interface BlockContainerProps { + $isOnTheHour: boolean; +} + +export const BlockContainer = styled.div` + border-bottom: 1px solid ${Color.Neutral[5]}; + ${(props) => { + if (props.$isOnTheHour) { + return css` + box-shadow: inset -0.5px 0px ${Color.Accent.Light[1]}; + `; + } + }} +`; + +export const Wrapper = styled.div` + display: flex; + margin-bottom: 2px; + height: 65px; +`; + +export const Gap = styled.div` + width: 2px; + height: 100%; +`; + +export const Block = styled.div` + height: 100%; + width: ${({ $width }) => `${$width}px`}; + font-size: 11px; + border-radius: 4px; + box-sizing: border-box; + padding: 4px; + ${({ $status, $bgColour, $clickableCell }) => { + switch ($status) { + case "blocked": + return css` + background: repeating-linear-gradient( + 135deg, + #e0e4e5 0px 6px, + #ecefef 6px 12px + ); + &:hover { + cursor: ${$clickableCell ? "pointer" : "not-allowed"}; + } + `; + case "filled": + return css` + background: ${$bgColour}; + &:hover { + cursor: ${$clickableCell ? "pointer" : "default"}; + } + `; + case "default": + return css` + &:hover { + cursor: ${$clickableCell ? "pointer" : "default"}; + } + `; + default: + return css` + background: ${Color.Neutral[6]}; + &:hover { + cursor: not-allowed; + } + `; + } + }} +`; + +export const BlockTitle = styled(Text.H6)` + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +`; + +export const BlockDescription = styled(Text.XSmall)` + color: #686868; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +`; + +export const StyledPopoverTrigger = styled(PopoverTrigger)` + padding: 0; + max-height: 62px; + &:hover { + cursor: pointer; + } +`; + +interface StyledPopoverContentProps { + $width?: string; + $padding?: string; +} + +export const StyledPopoverContent = styled( + PopoverCard +)` + width: ${(props) => props.$width ?? ""}; + padding: ${(props) => props.$padding ?? ""}; +`; diff --git a/src/timetable/timetable-row/row-cell.tsx b/src/timetable/timetable-row/row-cell.tsx new file mode 100644 index 000000000..26baa103e --- /dev/null +++ b/src/timetable/timetable-row/row-cell.tsx @@ -0,0 +1,147 @@ +import dayjs from "dayjs"; +import React, { MutableRefObject } from "react"; +import { PopoverTrigger, PopoverV2TriggerProps } from "../../popover-v2"; +import { DateHelper } from "../../util"; +import { ROW_CELL_GAP, ROW_INTERVAL, RowCellData } from "../types"; +import { + Block, + BlockContainer, + BlockDescription, + BlockTitle, + Gap, + StyledPopoverContent, + Wrapper, +} from "./row-cell.style"; + +interface RowCellProps extends RowCellData { + containerRef: MutableRefObject; + intervalWidth: number; + rowBarColor: string; + onCellClick?: (data: RowCellData, e: React.MouseEvent) => void; +} + +const Component = ({ + id, + startTime, + endTime, + title, + subtitle, + status, + intervalWidth, + rowBarColor, + containerRef, + customPopover, + onCellClick, +}: RowCellProps) => { + // ============================================================================= + // CONST, STATE, REF + // ============================================================================= + const isOnTheHour = dayjs(endTime, "HH:mm").get("minutes") === 0; + const isNotAvailable = status !== "default" || !status; + const numberOfIntervals = + DateHelper.getTimeDiffInMinutes(startTime, endTime) / ROW_INTERVAL; + const totalCellWidth = numberOfIntervals * intervalWidth; + const adjustedCellWidth = isNotAvailable + ? totalCellWidth - ROW_CELL_GAP + : totalCellWidth; + + // ============================================================================= + // EVENT HANDLERS + // ============================================================================= + const handleCellClick = (event: React.MouseEvent) => { + if (status && status !== "blocked" && onCellClick) { + onCellClick( + { + id, + startTime, + endTime, + status, + title, + subtitle, + customPopover, + }, + event + ); + } + }; + + // ============================================================================= + // RENDER FUNCTIONS + // ============================================================================= + + const ConditionalCellWrapper = ({ + wrapper, + children, + }: { + wrapper: (child: JSX.Element) => JSX.Element; + children: JSX.Element; + }) => { + if (!customPopover) { + return children; + } + + return wrapper(children); + }; + + const buildPopoverContent = (content: string | JSX.Element) => { + return ( + + {content} + + ); + }; + + const buildPopoverTrigger = (child: JSX.Element) => { + const popoverTriggerProps: PopoverV2TriggerProps = { + position: "bottom-start", + rootNode: containerRef, + offset: customPopover.offset, + children: child, + trigger: customPopover.trigger, + delay: customPopover.delay, + popoverContent: () => buildPopoverContent(customPopover.content), + }; + + return ( + {child} + ); + }; + + return ( + buildPopoverTrigger(child)} + > + + + + {title && ( + {title} + )} + {subtitle && ( + + {subtitle} + + )} + + {isNotAvailable && } + + + + ); +}; + +export const RowCell = React.memo(Component); diff --git a/src/timetable/timetable.style.tsx b/src/timetable/timetable.style.tsx new file mode 100644 index 000000000..e316d8230 --- /dev/null +++ b/src/timetable/timetable.style.tsx @@ -0,0 +1,275 @@ +import styled, { css, keyframes } from "styled-components"; +import { LoadingDotsSpinner } from "../animations"; +import { Color } from "../color"; +import { ErrorDisplay } from "../error-display"; +import { PopoverTrigger } from "../popover-v2"; +import { Text } from "../text"; + +interface ColumnHeaderRowProps { + $numOfColumns: number; + $isScrolled: boolean; +} + +interface RowHeaderColumnProps { + $numOfRows: number; + $isScrolled: boolean; +} + +interface TimeTableContainerProps { + $loading: boolean; + $width: string; + $height: string; + $allRecordsLoaded: boolean; +} + +interface EmptyTableContainerProps { + $width: string; + $height: string; +} + +interface RowColumnHeaderProps { + $isScrolledY: boolean; + $isScrolledX: boolean; +} + +interface RowHeaderProps { + $isScrolled: boolean; +} + +interface LoadingCellWrapperProps { + $width: number; +} + +interface ContentContainerPopoverProps { + $numOfRows: number; +} + +interface LoaderProps { + $isEmptyContent: boolean; +} + +export const EmptyTableContainer = styled.div` + display: grid; + grid-template-columns: 252px auto; + min-height: 600px; // REVIEW + min-width: 1000px; // REVIEW + height: ${(props) => props.$height}; + width: ${(props) => props.$width}; +`; + +export const EmptyTableRowHeader = styled.div` + display: flex; + height: fit-content; + grid-column: 1 / -1; + border-bottom: 1px solid ${Color.Neutral[5]}; +`; + +export const TimeTableContainer = styled.div` + display: grid; + overflow: scroll; + position: relative; + grid-template-columns: 252px fit-content(100%); + height: ${(props) => props.$height}; + width: ${(props) => props.$width}; + padding-bottom: ${(props) => (props.$allRecordsLoaded ? "0" : "128px")}; + min-height: 600px; // REVIEW + min-width: 900px; // REVIEW + ${(props) => { + if (props.$loading) { + return css` + :hover { + cursor: not-allowed; + padding-bottom: 0; + } + `; + } + }} +`; + +export const RowColumnHeader = styled.div` + position: sticky; + top: 0; + left: 0; + background-color: white; + width: 252px; + z-index: 2; + border-bottom: 1px solid ${Color.Neutral[5]}; + ${(props) => { + if (props.$isScrolledX || props.$isScrolledY) { + return css` + box-shadow: 0.125rem 0.125rem 0.5rem ${Color.Neutral[5]}; + clip-path: inset( + 0 ${props.$isScrolledX ? "-0.75rem" : "0"} + ${props.$isScrolledY ? "-0.75rem" : "0"} 0 + ); + transition: box-shadow 0.5s ease-in-out, + clip-path 0.5s ease-in-out; + `; + } else { + return css` + box-shadow: none; + clip-path: inset(0); + transition: box-shadow 0.5s ease-in-out, + clip-path 0.5s ease-in-out; + `; + } + }}; +`; + +export const RowHeaderColumn = styled.div` + display: grid; + position: sticky; + grid-column: 1 / 1; + left: 0; + z-index: 1; + background-color: white; + grid-template-rows: repeat(${(props) => props.$numOfRows}, 68px); +`; + +export const ColumnHeaderRow = styled.div` + display: grid; + position: sticky; + grid-column: 2 / 2; + grid-row: 1 / 1; + top: 0; + z-index: 1; + background-color: white; + grid-template-columns: repeat(${(props) => props.$numOfColumns}, 1fr); + width: 100%; + border-bottom: 1px solid ${Color.Neutral[5]}; + transition: all 0.5s ease-in-out; + ${(props) => { + if (props.$isScrolled) { + return css` + box-shadow: 0rem 0.125rem 0.5rem ${Color.Neutral[5]}; + `; + } + }}; +`; + +export const ColumnHeader = styled.div` + min-width: 84px; + align-content: end; + margin-bottom: 0.25rem; +`; + +export const ColumnHeaderTitle = styled(Text.H6)` + color: ${Color.Neutral[3]}; +`; + +export const ContentContainer = styled.div` + display: grid; + grid-template-rows: repeat(${(props) => props.$numOfRows}, 68px); +`; + +export const RowHeader = styled.div` + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: center; + position: sticky; + left: 0; + background-color: white; + width: 252px; + height: 68px; + text-align: right; + padding: 0 1rem 0 2rem; + border-bottom: 1px solid ${Color.Neutral[5]}; + border-left: 1px solid ${Color.Accent.Light[1]}; + transition: all 0.5s ease-in-out; + ${(props) => { + if (props.$isScrolled) { + return css` + box-shadow: 0.125rem 0.125rem 0.5rem ${Color.Neutral[5]}; + `; + } else { + return css` + box-shadow: inset -0.5px 0px ${Color.Accent.Light[1]}; + `; + } + }}; +`; + +export const ClickableRowHeaderTitle = styled(Text.H5)<{ + $isClickable: boolean; +}>` + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + color: ${Color.Primary}; + :hover { + cursor: ${(props) => (props.$isClickable ? "pointer" : "default")}; + } +`; + +export const RowHeaderSubtitle = styled(Text.XSmall)<{ $show: boolean }>` + display: inline-flex; + gap: 6px; + align-items: center; + color: ${Color.Neutral[3]}; + ${(props) => { + if (!props.$show) { + return css` + display: none; + `; + } + }} +`; + +export const Loader = styled(LoadingDotsSpinner)` + display: flex; + align-items: center; + justify-content: center; + grid-column: ${(props) => (props.$isEmptyContent ? "1 / -1" : "2 / -1")}; + grid-row: 2; + width: 100%; + height: 100%; +`; + +export const NoResultsFound = styled(ErrorDisplay)` + grid-column: 1 / -1; + grid-row: 2; + padding: 5rem 0 5rem 0; +`; + +export const LoadingWrapper = styled.div` + display: flex; + border-bottom: 1px solid ${Color.Neutral[5]}; +`; + +export const LoadingCell = styled.div` + border-right: 0.5px solid ${Color.Accent.Light[1]}; + width: ${(props) => `${props.$width}px`}; + height: 100%; + padding: 20px 12px 20px 12px; +`; + +const gradientAnimation = keyframes` + 0% { + background-position: -468px 0; + } + 100% { + background-position: 468px 0; + } +`; + +export const LoadingBar = styled.div` + height: 28px; + width: 100%; + background: linear-gradient( + to right, + ${Color.Neutral[6]} 8%, + ${Color.Neutral[7]} 18%, + ${Color.Neutral[6]} 33% + ); + background-size: 800px 104px; + animation: ${gradientAnimation} 1.5s forwards infinite; +`; + +export const StyledPopoverTrigger = styled(PopoverTrigger)` + max-width: 24rem !important; + :hover { + cursor: default; + } +`; diff --git a/src/timetable/timetable.tsx b/src/timetable/timetable.tsx new file mode 100644 index 000000000..6f3693e3c --- /dev/null +++ b/src/timetable/timetable.tsx @@ -0,0 +1,394 @@ +import { isEmpty, throttle } from "lodash"; +import { useEffect, useRef, useState } from "react"; +import { useResizeDetector } from "react-resize-detector"; +import { PopoverV2TriggerProps } from "../popover-v2"; +import { CalendarHelper } from "../util"; +import { TimeTableNavigator } from "./timetable-navigator/timetable-navigator"; +import { RowBar } from "./timetable-row/row-bar"; +import { StyledPopoverContent } from "./timetable-row/row-cell.style"; +import { + ClickableRowHeaderTitle, + ColumnHeader, + ColumnHeaderRow, + ColumnHeaderTitle, + ContentContainer, + EmptyTableContainer, + EmptyTableRowHeader, + Loader, + LoadingBar, + LoadingCell, + LoadingWrapper, + NoResultsFound, + RowColumnHeader, + RowHeader, + RowHeaderColumn, + RowHeaderSubtitle, + StyledPopoverTrigger, + TimeTableContainer, +} from "./timetable.style"; +import { + CustomPopoverProps, + ROW_BAR_COLOR_SEQUENCE, + ROW_INTERVAL, + RowData, + TimeTableProps, +} from "./types"; + +export const TimeTable = ({ + date, + rowData, + isLoading, + minTime = "00:00", + maxTime = "23:00", + onPage, + ...optionalProps +}: TimeTableProps) => { + // ============================================================================= + // CONST, STATE, REF + // ============================================================================= + const timetableMinTime = CalendarHelper.roundToNearestHour(minTime); + const timetableMaxTime = CalendarHelper.roundToNearestHour(maxTime, true); + const hourlyIntervals = CalendarHelper.generateHourlyIntervals( + timetableMinTime, + timetableMaxTime + ); + const isEmptyContent = optionalProps.totalRecords === 0 || isEmpty(rowData); + const allRecordsLoaded = + isEmptyContent || rowData.length === optionalProps.totalRecords; + const tableContainerRef = useRef(null); + const contentContainerRef = useRef(null); + const [isScrolledX, setIsScrolledX] = useState(false); + const [isScrolledY, setIsScrolledY] = useState(false); + const [intervalWidth, setIntervalWidth] = useState(0); + const [loadMore, setLoadMore] = useState(false); + + // ============================================================================= + // EFFECTS + // ============================================================================= + + useEffect(() => { + const handleScroll = throttle(() => { + if (tableContainerRef.current) { + setIsScrolledX(tableContainerRef.current.scrollLeft > 0); + setIsScrolledY(tableContainerRef.current.scrollTop > 0); + } + + if (loadMore) return; + + const { scrollTop, clientHeight, scrollHeight } = + tableContainerRef.current; + const isEndReached = + Math.ceil(scrollTop + clientHeight) >= scrollHeight; + const shouldLoadMore = + isEndReached && !allRecordsLoaded && onPage && !isLoading; + + if (shouldLoadMore) { + setLoadMore(true); + onPage(); + } + }, 100); + + const tableContainer = tableContainerRef.current; + + if (tableContainer) { + tableContainer.addEventListener("scroll", handleScroll); + } + + return () => { + if (tableContainer) { + tableContainer.removeEventListener("scroll", handleScroll); + } + }; + }, [allRecordsLoaded, loadMore, isLoading, onPage]); + + useEffect(() => { + setLoadMore(false); + }, [rowData]); + + // ============================================================================= + // EVENT HANDLERS + // ============================================================================= + const handleResize = () => { + if (tableContainerRef.current) { + const numberOfIntervalsPerRowBar = Math.ceil( + (hourlyIntervals.length * 60) / ROW_INTERVAL + ); + const tableContainerWidth = + tableContainerRef.current.clientWidth - 252; + const width = + tableContainerWidth / numberOfIntervalsPerRowBar > 21 + ? tableContainerWidth / numberOfIntervalsPerRowBar + : 21; + setIntervalWidth(width); + } + }; + + useResizeDetector({ + onResize: handleResize, + targetRef: tableContainerRef, + refreshMode: "debounce", + refreshRate: 50, + }); + + const handleRowNameClick = (data: RowData, event: React.MouseEvent) => { + if (optionalProps.onNameClick) { + optionalProps.onNameClick(data, event); + } + }; + + // =========================================================================== + // HELPER FUNCTIONS + // =========================================================================== + /** + * Using closures to more efficiently loop through and wrap the color sequencing instead of modding large numbers repeatedly + * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure + */ + const getColorFromSequence = (() => { + let colorIndex = 0; + const colorSequenceLength = ROW_BAR_COLOR_SEQUENCE.length; + + return () => { + const color = ROW_BAR_COLOR_SEQUENCE[colorIndex]; + colorIndex = (colorIndex + 1) % colorSequenceLength; + return color; + }; + })(); + + const buildPopoverContent = (customPopoverProps: CustomPopoverProps) => { + return ( + + {customPopoverProps.content} + + ); + }; + + const buildPopoverTrigger = (data: RowData, child: JSX.Element) => { + if (!data.rowHeaderCustomPopover) { + return child; + } + + const popoverTriggerProps: PopoverV2TriggerProps = { + position: "bottom-start", + rootNode: tableContainerRef, + offset: data.rowHeaderCustomPopover.offset, + children: child, + trigger: data.rowHeaderCustomPopover.trigger, + delay: data.rowHeaderCustomPopover.delay, + popoverContent: () => + buildPopoverContent(data.rowHeaderCustomPopover), + }; + + return ( + + {child} + + ); + }; + + // ============================================================================= + // RENDER FUNCTIONS + // ============================================================================= + + const ConditionalCellWrapper = ({ + wrapper, + children, + }: { + wrapper: (child: JSX.Element) => JSX.Element; + children: JSX.Element; + }) => { + return wrapper(children); + }; + + const renderRowHeaderColumn = () => { + return ( + <> + {rowData.map((data, index) => { + return ( + + buildPopoverTrigger(data, child) + } + > + + + handleRowNameClick(data, event) + } + weight="semibold" + id={`${data.id}-row-header-title-id`} + data-testid={`${data.id}-row-header-title`} + > + {data.name} + + + + {data.subtitle} + + + + ); + })} + {renderRowHeaderColumnLazyLoad()} + + ); + }; + + const renderRowHeaderColumnLazyLoad = () => { + if (isLoading || !loadMore) return; + return ( + + + + ); + }; + + const renderColumnHeaders = () => { + // Don't render first column if there are no rows + return hourlyIntervals.map((columnHeader: string) => { + return ( + + + {columnHeader} + + + ); + }); + }; + + const renderRowBarData = () => { + if (isLoading) return ; + return ( + + {rowData.map((data, _) => { + return ( + + ); + })} + {renderRowDataLazyLoad()} + + ); + }; + + const renderRowDataLazyLoad = () => { + if (isLoading || !loadMore) return; + return ( + + {hourlyIntervals.map((_, index) => ( + + + + ))} + + ); + }; + + if (isEmptyContent) { + return ( + + + + + {!isLoading ? ( + + ) : ( + + )} + + ); + } + + return ( + + + + + + {renderRowHeaderColumn()} + + + {renderColumnHeaders()} + + {renderRowBarData()} + + ); +}; diff --git a/src/timetable/types.ts b/src/timetable/types.ts new file mode 100644 index 000000000..398a08946 --- /dev/null +++ b/src/timetable/types.ts @@ -0,0 +1,75 @@ +import { PopoverV2TriggerType } from "../popover-v2"; +import { ResourceScheme } from "../theme"; + +export const ROW_BAR_COLOR_SEQUENCE = [ + "#FFE6BB", + "#D8EFEB", + "#E6EAFE", + "#FAE4E5", + "#D3EEFC", +] as const; // Assert to be a readonly tuple +export const ROW_CELL_GAP = 2; +export const ROW_INTERVAL = 15; +export type RowBarColors = (typeof ROW_BAR_COLOR_SEQUENCE)[number]; +export type CellType = "filled" | "blocked" | "default"; + +interface EmptyContentProps { + description: string; + illustrationScheme: ResourceScheme; +} + +export interface RowData { + id: string; + name: string; + rowCells: RowCellData[]; + subtitle?: string | JSX.Element | undefined; + rowHeaderCustomPopover?: CustomPopoverProps; + // HH:mm format, defaults to minTime + rowMinTime?: string; + // HH:mm format, defaults to maxTime + rowMaxTime?: string; +} + +export interface CustomPopoverProps { + trigger: PopoverV2TriggerType; + content: string | JSX.Element; + width?: string | undefined; + padding?: string | undefined; + delay?: { open: number; close: number } | undefined; + offset?: number | undefined; +} + +export interface TimeTableProps { + date: string; + emptyContent: EmptyContentProps; + rowData: RowData[]; + isLoading: boolean; + // HH:mm format + minTime?: string; + // HH:mm format + maxTime?: string; + minDate?: string | undefined; + maxDate?: string | undefined; + totalRecords?: number | undefined; + width?: string | undefined; + height?: string | undefined; + outsideOpHoursCellCustomPopover?: CustomPopoverProps | undefined; + onRefresh?: () => void; + onPage?: () => void; + onLeftArrowClick?: (currentDate: string) => void; + onRightArrowClick?: (currentDate: string) => void; + onNameClick?: (rowData: RowData, e: React.MouseEvent) => void; + onCellClick?: (data: RowCellData, e: React.MouseEvent) => void; +} + +export interface RowCellData { + id: string; + // HH:mm format + startTime: string; + // HH:mm format + endTime: string; + status?: CellType | undefined; + title?: string | undefined; + subtitle?: string | undefined; + customPopover?: CustomPopoverProps | undefined; +} diff --git a/stories/timetable/mock-data.tsx b/stories/timetable/mock-data.tsx new file mode 100644 index 000000000..d57146fdb --- /dev/null +++ b/stories/timetable/mock-data.tsx @@ -0,0 +1,173 @@ +import { Person2Icon, PinIcon } from "@lifesg/react-icons"; +import dayjs, { Dayjs } from "dayjs"; +import styled from "styled-components"; +import { Color } from "../../src/color"; +import { Text } from "../../src/text"; +import { CellType, TimeTableProps } from "../../src/timetable/types"; +import timeTableEvenDays from "./timetable-data-even-days.json"; +import timeTableOddDays from "./timetable-data-odd-days.json"; +import lazyLoadData from "./timetable-lazy-load-data.json"; + +export const StyledHoverContent = styled.div` + display: flex; + align-items: center; + column-gap: 5px; +`; + +const cellTypeMap: Record = { + OCCUPIED: "filled", + DISABLED: "blocked", + DEFAULT: "default", +}; + +const mapper = (resource) => { + return { + id: resource.id, + name: resource.title, + rowMinTime: resource.timelines[0].startTime, + rowMaxTime: resource.timelines[0].endTime, + subtitle: ( + <> + + {resource.capacity} + + ), + rowCells: resource.timelines[0].slots.map((slot) => { + return { + id: slot.id, + startTime: slot.startTime, + endTime: slot.endTime, + title: slot.title, + subtitle: slot.label, + status: cellTypeMap[slot.status], + }; + }), + }; +}; + +const fetchRowData = (date: Dayjs) => { + const isEven = date.day() % 2 === 0; + if (isEven) { + return timeTableEvenDays.resources.map((resource) => mapper(resource)); + } + return timeTableOddDays.resources.map((resource) => mapper(resource)); +}; + +export const getTimeTableData = (currentDate?: string): TimeTableProps => { + const date = dayjs(currentDate); + + return { + date: date.format("YYYY-MM-DD"), + minTime: "06:20:00", + maxTime: "22:00:00", + maxDate: date.add(1, "month").format("YYYY-MM-DD"), + minDate: date.add(-11, "month").format("YYYY-MM-DD"), + totalRecords: 10, + rowData: fetchRowData(date), + emptyContent: { + illustrationScheme: "bookingsg", + description: + "There’s no data to show. You may need to adjust your search or filters. If you believe this is a mistake, try refreshing the page.", + }, + isLoading: false, + }; +}; + +export const lazyLoad = (page: number) => { + const limit = 10; + const pageStart = (page - 1) * limit; + const pageEnd = page * limit; + + const currentPageItems = lazyLoadData.resources.slice(pageStart, pageEnd); + + return currentPageItems.map((resource) => { + return { + id: resource.id, + name: resource.title, + rowMinTime: resource.timelines[0].startTime, + rowMaxTime: resource.timelines[0].endTime, + subtitle: ( + <> + + {resource.capacity} + + ), + rowHeaderHoverContent: ( + <> + {resource.title} + + + + {resource.subtitle} + + + + ), + rowCells: resource.timelines[0].slots.map((slot) => { + return { + id: slot.id, + startTime: slot.startTime, + endTime: slot.endTime, + title: slot.label, + subtitle: slot.label, + status: cellTypeMap[slot.status], + ...(slot.status === "OCCUPIED" && { + filledBlockClickContent: ( +
+
+ + {resource.title} + + + {dayjs().format("D MMM YYYY, ddd")}{" "} + {`${dayjs( + slot.startTime, + "HH:mm" + ).format("HH:mma")} - ${dayjs( + slot.endTime, + "HH:mm" + ).format("HH:mma")}`} + +
+ +
+ + Booking title + + {slot.title} +
+
+ ), + }), + }; + }), + }; + }); +}; diff --git a/stories/timetable/timetable-data-even-days.json b/stories/timetable/timetable-data-even-days.json new file mode 100644 index 000000000..b0f53bbfc --- /dev/null +++ b/stories/timetable/timetable-data-even-days.json @@ -0,0 +1,2214 @@ +{ + "page": 1, + "rowsPerPage": 8, + "totalPages": 2, + "totalRows": 10, + "resources": [ + { + "_provider": "rmbme", + "id": "Dy3E3RvQY0", + "title": "2Hr-interval", + "organisationId": "0B8E79PbpK", + "subtitle": "Eclipse", + "resourceSubtype": "Meeting Room", + "resourceType": "Rooms", + "resourceTypeId": "kd6PRJPJzZ", + "images": [ + "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/Dy3E3RvQY0/3be74a40-1932-4a44-b571-59259d3b256c/c988ab16-3dd2-4f17-9f88-c70958f2a338/9fecf77f-e454-4c86-815f-08d9eb2ec8a9_ActiveSG1.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=2035d9424ac6a7db9a32c53bb056951917339626e209eb442176fb77c3534103&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": false + }, + "unavailableAfterDays": "", + "availableAfterDays": "", + "capacity": "8", + "additionalDescription": [ + { + "key": "Built-in amenities", + "title": "Built-in amenities", + "items": [ + { + "label": "DVD Player" + }, + { + "label": "LAN Point" + } + ] + }, + { + "key": "Available layouts", + "title": "Available layouts", + "description": "Additional time may be added when checking for availability due to setup and teardown of layout.", + "items": [ + { + "label": "Test createdAt (10 pax)" + } + ] + }, + { + "key": "View layout details", + "title": "View layout details", + "items": [ + { + "label": "Test createdAt (10 pax)", + "description": [ + { + "label": "Setup time", + "value": "15 minutes" + }, + { + "label": "Teardown time", + "value": "15 minutes" + } + ], + "imageUrls": [ + "https://dev.rbs.ccubesg.io/rbs/api/v1/layout/mOkQkkAQYZ/layout-url?path=resource-layouts%2FmOkQkkAQYZ%2F3be74a40-1932-4a44-b571-59259d3b256c%2F2222f4a5-cf01-4f0e-990c-1df31c3f057e%2Foffice%20photo.jpg" + ] + } + ] + } + ], + "timelines": [ + { + "date": "2024-08-19", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "08:15:00", + "status": "OCCUPIED", + "label": "booking owner name", + "title": "booking title" + }, + { + "startTime": "08:15:00", + "endTime": "08:30:00", + "status": "OCCUPIED", + "label": "booking owner name", + "title": "booking title" + }, + { + "startTime": "08:30:00", + "endTime": "08:45:00", + "status": "OCCUPIED", + "label": "booking owner name", + "title": "booking title" + }, + { + "startTime": "08:45:00", + "endTime": "09:00:00", + "status": "OCCUPIED", + "label": "booking owner name", + "title": "booking title" + }, + { + "startTime": "09:30:00", + "endTime": "10:30:00", + "status": "OCCUPIED", + "label": "booking owner name", + "title": "booking title" + }, + { + "startTime": "10:45:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "booking owner name", + "title": "booking title" + }, + { + "startTime": "11:00:00", + "endTime": "11:30:00", + "status": "OCCUPIED", + "label": "booking owner name", + "title": "booking title" + }, + { + "startTime": "16:00:00", + "endTime": "16:30:00", + "status": "OCCUPIED", + "label": "booking owner name", + "title": "booking title" + } + ], + "startTime": "08:00:00", + "endTime": "16:30:00", + "interval": 120 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/Dy3E3RvQY0?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=Dy3E3RvQY0&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/Dy3E3RvQY0?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=Dy3E3RvQY0&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "ZlJQyXWP6z", + "title": "4 Hr interval", + "organisationId": "0B8E79PbpK", + "subtitle": "Eclipse", + "resourceSubtype": "Meeting Room", + "resourceType": "Rooms", + "resourceTypeId": "kd6PRJPJzZ", + "images": [ + "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/ZlJQyXWP6z/3be74a40-1932-4a44-b571-59259d3b256c/a2b46cf3-c488-4f63-a3d2-cbdf2300af76/9fecf77f-e454-4c86-815f-08d9eb2ec8a9_ActiveSG1.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=6ab9c75269a4b5759ee55a3b9d05fa27b76f27528d87c2f9354c1f067234541e&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": false + }, + "unavailableAfterDays": "12", + "availableAfterDays": "", + "capacity": "16", + "additionalDescription": [], + "timelines": [ + { + "date": "2024-08-19", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "12:00:00", + "status": "DEFAULT" + }, + { + "startTime": "12:00:00", + "endTime": "16:00:00", + "status": "OCCUPIED", + "label": "booking owner name", + "title": "booking title" + }, + { + "startTime": "16:00:00", + "endTime": "20:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 240 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/ZlJQyXWP6z?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=ZlJQyXWP6z&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/ZlJQyXWP6z?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=ZlJQyXWP6z&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "9znPmRxQBv", + "title": "acs", + "organisationId": "0B8E79PbpK", + "subtitle": "City", + "resourceSubtype": "[E2E]Room Type 1", + "resourceType": "Rooms", + "resourceTypeId": "kd6PRJPJzZ", + "images": [ + "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/9znPmRxQBv/3be74a40-1932-4a44-b571-59259d3b256c/4b9a9679-2004-44c0-bad2-9bc36aec0519/Screenshot%202024-03-19%20at%209.44.51%20AMScreenshot%202024-03-19%20at%209.44.51%20AMScreenshot%202024-03-19%20at%209.44.51%20AMScreenshot%202024-03-19%20at%209.44.51%20AMScreenshot%202024-03-19%20at%209.44.51%20AMScreenshot%202024-03-19%20at%209.44.51%20AMScreenshot%202024-03-19%20at%209.44.51%20AM.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=ee8323f7150b897fb80a2edb1370a58947d25350f4bd77901e3dd37cb07cd4bc&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": false + }, + "unavailableAfterDays": "30", + "availableAfterDays": "", + "capacity": "4", + "additionalDescription": [ + { + "key": "Additional amenities", + "title": "Additional services", + "description": "Only available upon request.", + "items": [ + { + "label": "002d37f7d618-test" + } + ] + }, + { + "key": "Available layouts", + "title": "Available layouts", + "description": "Additional time may be added when checking for availability due to setup and teardown of layout.", + "items": [ + { + "label": "layout x (4 pax)" + } + ] + }, + { + "key": "View layout details", + "title": "View layout details", + "items": [ + { + "label": "layout x (4 pax)", + "description": [ + { + "label": "Setup time", + "value": "15 minutes" + }, + { + "label": "Teardown time", + "value": "15 minutes" + } + ] + } + ] + } + ], + "timelines": [ + { + "date": "2024-08-19", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "13:00:00", + "status": "OCCUPIED" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "OCCUPIED" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT" + }, + { + "startTime": "20:00:00", + "endTime": "21:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "21:00:00", + "interval": 60 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/9znPmRxQBv?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=9znPmRxQBv&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/9znPmRxQBv?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=9znPmRxQBv&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "B8E79Z6Pbp", + "title": "Fixed Session Resource1", + "organisationId": "0B8E79PbpK", + "subtitle": "Eclipse", + "resourceSubtype": "Meeting Room", + "resourceType": "Rooms", + "resourceTypeId": "kd6PRJPJzZ", + "images": [ + "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/B8E79Z6Pbp/3be74a40-1932-4a44-b571-59259d3b256c/b782ddaa-65a4-46a9-a6e5-42d9753f100b/jagabee_stik.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSG3HXRZB6%2F20240904%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240904T053142Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjELb%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkYwRAIgDwWdoPPRGUkF1Xr9DCkR1zgC%2BBuswSfwuvYoMm8%2Ba48CICRBaUNXTVGdXcsIa4YUIV7A8Z1vYKYHKkH1Cy9aYngmKvMDCM%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQAhoMNTAzNzc5NTQ0MTAwIgyKZ0dmAk0xnfTAzCQqxwMbp9YqdBCEwz7tSyhmZ1xIdWAsD52yCyNw5%2FaMR6YWKeJHHyJb8kgWvuOt2p1LWLSi2N2JzhdguFIDRlBcby%2BHxzQ%2FUXZRBd9bz9CZN0XIhCh5Znmck1KLzuzO5uDJgfPYG1Fs71DNo2sK5HIfbHJnE5fNQwht5P68cbAnZ4PSLkBgJbnU09mU6AxhJmOlssURyKcyCKoNAfjpBv3HLwQwADBh6cf4rwIR0T4HYV31Z5wvvRufp4pQezWL6x6fLNKTuxl94lpraooooGU0imMqg0XWh1Hg86tXESl0mV3nz2xfHBVAcked3gixp9K%2BZASuy90sKZaMK%2FKH3HnG8tEI8Ih%2FUthiE47f6ylthOHaRfzr%2FPLSPQo5aeH0hMq%2BzFu10oS0YCZZBgUHRFiaghWKCzgxqmiUSZoc7ABqqR5%2BdTVwy9XgdcQQgmsFYdjaDBbedUA3Bfy6BjYub%2FLPcYlITqCnQQjpxGMkPpBRBnzxHIquTTrL1kQ8%2BEgbVqMJLg5W0UItqwLPV4kP88HIbbjqQb3Tfd%2Fc7le3G%2BlWhCaE3p8sIVwiymCARjhBxWUiGAlg3j6HGXKHGzWxGRK0Rl1oUYR09kSMITCv39%2B2BjqmAQgIDZfwIghilh3PXOP3eqbc5KQ0CrIJECqfRHGW8%2BZV8nh5RHcnA4iCo%2FgqXIZ0bqucKOMn2LEosCPjD62FkDaTnKw4n9OmePfUBRQEi3etlVN6YgXAyhxH6hX931uI8FKdlK%2B4oP2blLsSHPzFx%2FLZbh0Fpim7EszB4A63Yeq%2FvZ8prv8IQB75R0UlXX23nmlznmhnbqSf%2F4E7B2jQ5JU%2FIR79XBc%3D&X-Amz-Signature=cf58bfb464bf84e43096aa85073cfb5c6f6101b9b67542f4d746903ef5bbb212&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": false + }, + "unavailableAfterDays": "30", + "availableAfterDays": "", + "capacity": "3", + "additionalDescription": [], + "timelines": [ + { + "date": "2024-09-04", + "disabled": false, + "slots": [ + { + "startTime": "10:00", + "endTime": "12:00", + "status": "OCCUPIED" + }, + { + "startTime": "15:00", + "endTime": "17:00", + "status": "DEFAULT" + } + ], + "startTime": "10:00", + "endTime": "17:00" + } + ], + "itemTemplate": "rooms-fixedSessions", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/B8E79Z6Pbp?date=2024-09-04&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=B8E79Z6Pbp&selectedDate=2024-09-04&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/B8E79Z6Pbp?date=2024-09-04&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=B8E79Z6Pbp&selectedDate=2024-09-04&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "bJxrj7JPqL", + "title": "Apple", + "organisationId": "0B8E79PbpK", + "subtitle": "Eclipse", + "resourceSubtype": "Meeting Room", + "resourceType": "Rooms", + "resourceTypeId": "kd6PRJPJzZ", + "images": [ + "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/bJxrj7JPqL/3be74a40-1932-4a44-b571-59259d3b256c/a3a8618a-8be3-4d59-bb75-71962e4e9ff3/hachi.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=bf0bae5559a13510eac9f528777a29eb41f3430037105256273a30662778b8ab&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": true + }, + "unavailableAfterDays": "", + "availableAfterDays": "", + "capacity": "6", + "additionalDescription": [ + { + "key": "Booking usage", + "title": "Booking usage", + "items": [ + { + "label": "Meeting" + } + ] + }, + { + "key": "Additional amenities", + "title": "Additional services", + "description": "Only available upon request.", + "items": [ + { + "label": "MC Services" + }, + { + "label": "002d37f7d618-test" + }, + { + "label": "Barista Services" + }, + { + "label": "Coffee" + }, + { + "label": "a" + } + ] + }, + { + "key": "Available layouts", + "title": "Available layouts", + "description": "Additional time may be added when checking for availability due to setup and teardown of layout.", + "items": [ + { + "label": "Default (5 pax)" + }, + { + "label": "tt (1 pax)" + }, + { + "label": "With setup time (10 pax)" + } + ] + }, + { + "key": "View layout details", + "title": "View layout details", + "items": [ + { + "label": "Default (5 pax)", + "description": [ + { + "label": "Setup time", + "value": "None" + }, + { + "label": "Teardown time", + "value": "None" + } + ], + "imageUrls": [ + "https://dev.rbs.ccubesg.io/rbs/api/v1/layout/Dy3E38OrY0/layout-url?path=resource-layouts%2FDy3E38OrY0%2F3be74a40-1932-4a44-b571-59259d3b256c%2F71193987-ece6-4351-b25f-410851a72daf%2Ftest%20with%20white%20space.png" + ] + }, + { + "label": "tt (1 pax)", + "description": [ + { + "label": "Setup time", + "value": "None" + }, + { + "label": "Teardown time", + "value": "None" + } + ], + "imageUrls": [ + "https://dev.rbs.ccubesg.io/rbs/api/v1/layout/B0XrnDmQmz/layout-url?path=resource-layouts%2FB0XrnDmQmz%2F3be74a40-1932-4a44-b571-59259d3b256c%2Fafe6d37a-2cb6-402d-a8e8-ed5c1afc58ef%2Fwaffle.png" + ] + }, + { + "label": "With setup time (10 pax)", + "description": [ + { + "label": "Setup time", + "value": "30 minutes" + }, + { + "label": "Teardown time", + "value": "30 minutes" + } + ], + "imageUrls": [ + "https://dev.rbs.ccubesg.io/rbs/api/v1/layout/5oJQMZGERj/layout-url?path=resource-layouts%2F5oJQMZGERj%2F3be74a40-1932-4a44-b571-59259d3b256c%2F376de4ea-c825-4eac-a947-aca2c4430012%2F769aacaa-f20a-40af-8eab-65d15bbb7c09.jpg" + ] + } + ] + } + ], + "timelines": [ + { + "date": "2024-08-19", + "disabled": false, + "slots": [ + { + "startTime": "08:00", + "endTime": "08:30", + "status": "DEFAULT" + }, + { + "startTime": "08:30", + "endTime": "09:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00", + "endTime": "09:30", + "status": "DEFAULT" + }, + { + "startTime": "09:30", + "endTime": "10:00", + "status": "OCCUPIED" + }, + { + "startTime": "10:00", + "endTime": "10:30", + "status": "OCCUPIED" + }, + { + "startTime": "10:30", + "endTime": "11:00", + "status": "DEFAULT" + }, + { + "startTime": "13:00", + "endTime": "13:30", + "status": "DEFAULT" + }, + { + "startTime": "13:30", + "endTime": "14:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00", + "endTime": "14:30", + "status": "DISABLED" + }, + { + "startTime": "14:30", + "endTime": "15:00", + "status": "DISABLED" + }, + { + "startTime": "15:00", + "endTime": "15:30", + "status": "OCCUPIED" + }, + { + "startTime": "15:30", + "endTime": "16:00", + "status": "OCCUPIED" + }, + { + "startTime": "16:00", + "endTime": "16:30", + "status": "OCCUPIED" + }, + { + "startTime": "16:30", + "endTime": "17:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00", + "endTime": "17:30", + "status": "DEFAULT" + }, + { + "startTime": "17:30", + "endTime": "18:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00", + "endTime": "18:00" + } + ], + "itemTemplate": "rooms-fixedSessions", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/bJxrj7JPqL?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=bJxrj7JPqL&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/bJxrj7JPqL?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=bJxrj7JPqL&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "mx0Ex4xE9Y", + "title": "apple+dragonfruit", + "organisationId": "0B8E79PbpK", + "subtitle": "Eclipse", + "resourceSubtype": "Meeting Room", + "resourceType": "Rooms", + "resourceTypeId": "kd6PRJPJzZ", + "images": [ + "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/mx0Ex4xE9Y/3be74a40-1932-4a44-b571-59259d3b256c/e0f84078-9e75-4136-9829-44fc3cb8f52f/9fecf77f-e454-4c86-815f-08d9eb2ec8a9_ActiveSG1.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=a79860558fe680db2db7cd6882eed2788be9efb372135f22fd1d848e778f953b&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": false + }, + "unavailableAfterDays": "12", + "availableAfterDays": "", + "capacity": "10", + "additionalDescription": [ + { + "key": "Built-in amenities", + "title": "Built-in amenities", + "items": [ + { + "label": "Common built-in amenity" + }, + { + "label": "Chairs (Additional)" + }, + { + "label": "Phone phone" + } + ] + } + ], + "timelines": [ + { + "date": "2024-08-19", + "disabled": false, + "slots": [ + { + "startTime": "08:00", + "endTime": "09:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00", + "endTime": "10:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00", + "endTime": "11:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00", + "endTime": "12:00", + "status": "DEFAULT" + }, + { + "id": "jingzhi-id", + "startTime": "13:00", + "endTime": "14:00", + "status": "OCCUPIED", + "label": "Jing Zhi", + "action": [ + { + "type": "SHOW_MODAL", + "continueOnError": true, + "payload": { + "message": "", + "cancelActionLabel": "", + "renderContent": { + "type": "html", + "html": "

Booking details for apple+dragonfruit

19 Aug 2024, Mon 1:00pm - 2:00pm

Eclipse

Status

Confirmed

Booking owner

Jing Zhi

jingzhi.t_dcube@scientecpeople.com

Booking title

Test Combined Reschedule

" + }, + "confirmActionLabel": "Close" + } + } + ] + }, + { + "startTime": "14:00", + "endTime": "15:00", + "status": "OCCUPIED", + "label": "Jing Zhi", + "action": [ + { + "type": "SHOW_MODAL", + "continueOnError": true, + "payload": { + "message": "", + "cancelActionLabel": "", + "renderContent": { + "type": "html", + "html": "

Booking details for apple+dragonfruit

19 Aug 2024, Mon 2:00pm - 3:00pm

Eclipse

Status

Confirmed

Booking owner

Jing Zhi

jingzhi.t_dcube@scientecpeople.com

Booking title

Test1235125

" + }, + "confirmActionLabel": "Close" + } + } + ] + }, + { + "startTime": "15:00", + "endTime": "16:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00", + "endTime": "17:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00", + "endTime": "18:00", + "status": "DISABLED" + }, + { + "startTime": "18:00", + "endTime": "19:00", + "status": "OCCUPIED", + "label": "" + }, + { + "startTime": "19:00", + "endTime": "20:00", + "status": "DEFAULT" + }, + { + "startTime": "20:00", + "endTime": "21:00", + "status": "DEFAULT" + }, + { + "startTime": "21:00", + "endTime": "22:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00", + "endTime": "22:00" + } + ], + "itemTemplate": "rooms-fixedSessions", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/mx0Ex4xE9Y?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=mx0Ex4xE9Y&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/mx0Ex4xE9Y?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=mx0Ex4xE9Y&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "RBP5eeePm6", + "title": "Coconut", + "organisationId": "0B8E79PbpK", + "subtitle": "Eclipse", + "resourceSubtype": "Meeting Room", + "resourceType": "Rooms", + "resourceTypeId": "kd6PRJPJzZ", + "images": [ + "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/RBP5eeePm6/3be74a40-1932-4a44-b571-59259d3b256c/0fae6789-9237-4306-bb33-db6d0af75b04/Double19.PNG%20%281%29.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=330bd9d1ae1640873d8e6628fd5797a8f32d447110e6d24f40f309e6c6f490a0&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": true + }, + "unavailableAfterDays": "120", + "availableAfterDays": "", + "capacity": "12", + "additionalDescription": [], + "timelines": [ + { + "date": "2024-08-19", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "08:15:00", + "status": "DEFAULT" + }, + { + "startTime": "08:15:00", + "endTime": "08:30:00", + "status": "DEFAULT" + }, + { + "startTime": "08:30:00", + "endTime": "08:45:00", + "status": "DEFAULT" + }, + { + "startTime": "08:45:00", + "endTime": "09:00:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "DEFAULT" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "DEFAULT" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "DEFAULT" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00:00", + "endTime": "10:15:00", + "status": "DEFAULT" + }, + { + "startTime": "10:15:00", + "endTime": "10:30:00", + "status": "DEFAULT" + }, + { + "startTime": "10:30:00", + "endTime": "10:45:00", + "status": "DEFAULT" + }, + { + "startTime": "10:45:00", + "endTime": "11:00:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "11:15:00", + "status": "DEFAULT" + }, + { + "startTime": "11:15:00", + "endTime": "11:30:00", + "status": "DEFAULT" + }, + { + "startTime": "11:30:00", + "endTime": "11:45:00", + "status": "DEFAULT" + }, + { + "startTime": "11:45:00", + "endTime": "12:00:00", + "status": "DEFAULT" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DISABLED" + }, + { + "startTime": "13:00:00", + "endTime": "13:15:00", + "status": "DEFAULT" + }, + { + "startTime": "13:15:00", + "endTime": "13:30:00", + "status": "DEFAULT" + }, + { + "startTime": "13:30:00", + "endTime": "13:45:00", + "status": "DEFAULT" + }, + { + "startTime": "13:45:00", + "endTime": "14:00:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00:00", + "endTime": "14:15:00", + "status": "DEFAULT" + }, + { + "startTime": "14:15:00", + "endTime": "14:30:00", + "status": "DEFAULT" + }, + { + "startTime": "14:30:00", + "endTime": "14:45:00", + "status": "DEFAULT" + }, + { + "startTime": "14:45:00", + "endTime": "15:00:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00:00", + "endTime": "16:30:00", + "status": "OCCUPIED", + "label": "booking label" + }, + { + "startTime": "16:30:00", + "endTime": "16:45:00", + "status": "DEFAULT" + }, + { + "startTime": "16:45:00", + "endTime": "17:00:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00:00", + "endTime": "17:15:00", + "status": "DEFAULT" + }, + { + "startTime": "17:15:00", + "endTime": "17:30:00", + "status": "DEFAULT" + }, + { + "startTime": "17:30:00", + "endTime": "17:45:00", + "status": "DEFAULT" + }, + { + "startTime": "17:45:00", + "endTime": "18:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "18:00:00", + "interval": 15 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/RBP5eeePm6?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=RBP5eeePm6&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/RBP5eeePm6?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=RBP5eeePm6&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "DAPBjGgPqd", + "title": "Coconut Approval Required", + "organisationId": "0B8E79PbpK", + "subtitle": "GovTech Headquarters", + "resourceSubtype": "Meeting Room", + "resourceType": "Rooms", + "resourceTypeId": "kd6PRJPJzZ", + "images": [ + "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/DAPBjGgPqd/3be74a40-1932-4a44-b571-59259d3b256c/febf8918-25be-437a-bc7c-33abc09b63e6/Double19.PNG%20%281%29.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=f42fdd1ee37cb8c85b6aa1b12299c8cac79026a1b649037cffd835bdfcbfc350&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": true, + "Manual start": true + }, + "unavailableAfterDays": "30", + "availableAfterDays": "", + "capacity": "12", + "additionalDescription": [], + "timelines": [ + { + "date": "2024-08-19", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "16:30:00", + "status": "OCCUPIED", + "label": "a very long booking text that spans across the entire universe beyond the horizon into the blackhole transcending time and space" + }, + { + "startTime": "16:30:00", + "endTime": "16:45:00", + "status": "DEFAULT" + }, + { + "startTime": "16:45:00", + "endTime": "17:00:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00:00", + "endTime": "17:15:00", + "status": "DEFAULT" + }, + { + "startTime": "17:15:00", + "endTime": "17:30:00", + "status": "DEFAULT" + }, + { + "startTime": "17:30:00", + "endTime": "17:45:00", + "status": "DEFAULT" + }, + { + "startTime": "17:45:00", + "endTime": "18:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "18:00:00", + "interval": 15 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/DAPBjGgPqd?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=DAPBjGgPqd&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/DAPBjGgPqd?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=DAPBjGgPqd&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "ajlEo56PqA", + "title": "Default test", + "organisationId": "0B8E79PbpK", + "subtitle": "Eclipse", + "resourceSubtype": "Meeting Room", + "resourceType": "Rooms", + "resourceTypeId": "kd6PRJPJzZ", + "images": [ + "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/ajlEo56PqA/3be74a40-1932-4a44-b571-59259d3b256c/7e6e379a-2318-4b9c-885b-df45c47b926e/Square_-_black_simple.svg.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=97fbd54ff50ccfba7e83cd7727cf7d52af5dc030f0f39730260c4c11c9dcb950&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": true + }, + "unavailableAfterDays": "30", + "availableAfterDays": "", + "capacity": "12", + "additionalDescription": [], + "timelines": [ + { + "date": "2024-08-19", + "disabled": false, + "slots": [ + { + "startTime": "08:00", + "endTime": "09:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00", + "endTime": "10:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00", + "endTime": "11:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00", + "endTime": "12:00", + "status": "DEFAULT" + }, + { + "startTime": "13:00", + "endTime": "14:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00", + "endTime": "15:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00", + "endTime": "16:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00", + "endTime": "17:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00", + "endTime": "18:00", + "status": "DEFAULT" + }, + { + "startTime": "18:00", + "endTime": "19:00", + "status": "DEFAULT" + }, + { + "startTime": "19:00", + "endTime": "20:00", + "status": "DEFAULT" + }, + { + "startTime": "20:00", + "endTime": "21:00", + "status": "DEFAULT" + }, + { + "startTime": "21:00", + "endTime": "22:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00", + "endTime": "22:00" + } + ], + "itemTemplate": "rooms-fixedSessions", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/ajlEo56PqA?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=ajlEo56PqA&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/ajlEo56PqA?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=ajlEo56PqA&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "ewGEKbeQVa", + "title": "delet", + "organisationId": "0B8E79PbpK", + "subtitle": "Eclipse, Level 8", + "resourceSubtype": "test default fallback", + "resourceType": "Rooms", + "resourceTypeId": "kd6PRJPJzZ", + "images": null, + "tags": { + "Approval required": false, + "Manual start": true + }, + "unavailableAfterDays": "9", + "availableAfterDays": "", + "capacity": "14", + "additionalDescription": [], + "timelines": [ + { + "date": "2024-08-19", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "08:15:00", + "status": "DEFAULT" + }, + { + "startTime": "08:15:00", + "endTime": "08:30:00", + "status": "DEFAULT" + }, + { + "startTime": "08:30:00", + "endTime": "08:45:00", + "status": "DEFAULT" + }, + { + "startTime": "08:45:00", + "endTime": "09:00:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "DEFAULT" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "DEFAULT" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "DEFAULT" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00:00", + "endTime": "10:15:00", + "status": "DEFAULT" + }, + { + "startTime": "10:15:00", + "endTime": "10:30:00", + "status": "DEFAULT" + }, + { + "startTime": "10:30:00", + "endTime": "10:45:00", + "status": "DEFAULT" + }, + { + "startTime": "10:45:00", + "endTime": "11:00:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "11:15:00", + "status": "DEFAULT" + }, + { + "startTime": "11:15:00", + "endTime": "11:30:00", + "status": "DEFAULT" + }, + { + "startTime": "11:30:00", + "endTime": "11:45:00", + "status": "DEFAULT" + }, + { + "startTime": "11:45:00", + "endTime": "12:00:00", + "status": "DEFAULT" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DISABLED" + }, + { + "startTime": "13:00:00", + "endTime": "13:15:00", + "status": "DEFAULT" + }, + { + "startTime": "13:15:00", + "endTime": "13:30:00", + "status": "DEFAULT" + }, + { + "startTime": "13:30:00", + "endTime": "13:45:00", + "status": "DEFAULT" + }, + { + "startTime": "13:45:00", + "endTime": "14:00:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00:00", + "endTime": "14:15:00", + "status": "DEFAULT" + }, + { + "startTime": "14:15:00", + "endTime": "14:30:00", + "status": "DEFAULT" + }, + { + "startTime": "14:30:00", + "endTime": "14:45:00", + "status": "DEFAULT" + }, + { + "startTime": "14:45:00", + "endTime": "15:00:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00:00", + "endTime": "15:15:00", + "status": "DEFAULT" + }, + { + "startTime": "15:15:00", + "endTime": "15:30:00", + "status": "DEFAULT" + }, + { + "startTime": "15:30:00", + "endTime": "15:45:00", + "status": "DEFAULT" + }, + { + "startTime": "15:45:00", + "endTime": "16:00:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00:00", + "endTime": "16:15:00", + "status": "DEFAULT" + }, + { + "startTime": "16:15:00", + "endTime": "16:30:00", + "status": "DEFAULT" + }, + { + "startTime": "16:30:00", + "endTime": "16:45:00", + "status": "DEFAULT" + }, + { + "startTime": "16:45:00", + "endTime": "17:00:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00:00", + "endTime": "17:15:00", + "status": "DEFAULT" + }, + { + "startTime": "17:15:00", + "endTime": "17:30:00", + "status": "DEFAULT" + }, + { + "startTime": "17:30:00", + "endTime": "17:45:00", + "status": "DEFAULT" + }, + { + "startTime": "17:45:00", + "endTime": "18:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "18:00:00", + "interval": 15 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/ewGEKbeQVa?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=ewGEKbeQVa&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/rbs/web/book/ewGEKbeQVa?date=2024-08-19&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=ewGEKbeQVa&selectedDate=2024-08-19&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + } + ] +} diff --git a/stories/timetable/timetable-data-odd-days.json b/stories/timetable/timetable-data-odd-days.json new file mode 100644 index 000000000..91141bfe6 --- /dev/null +++ b/stories/timetable/timetable-data-odd-days.json @@ -0,0 +1,2751 @@ +{ + "page": 1, + "rowsPerPage": 10, + "totalPages": 3, + "totalRows": 10, + "resources": [ + { + "_provider": "rmbme", + "id": "9l4P1dOr16", + "title": "Apple", + "organisationId": "ylWEXKQNDX", + "subtitle": "Mapletree Business City 10, Floor 8", + "resourceSubtype": "Conference Room", + "resourceType": "Rooms", + "resourceTypeId": "vmoQAgr9Dl", + "images": [ + "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/9l4P1dOr16/5d53aabc-48ab-4e38-8036-b3d000f7c123/e4fc7335-232b-4a2e-99a7-2d47d52d5663/apple-washington-size-113-per-piece-fruits-vegetables-fresh-produce-509590_1024x.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=98ada84cc0f8bb9ebfff9b4ba372925ca44ad78293889b7aa47d543876b751bd&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": true, + "Manual start": false + }, + "unavailableAfterDays": "60", + "availableAfterDays": "", + "capacity": "3", + "additionalDescription": [ + { + "key": "Booking usage", + "title": "Booking usage", + "items": [ + { + "label": "Event (Internal)" + }, + { + "label": "Event (External)" + }, + { + "label": "Annual General Meeting" + } + ] + }, + { + "key": "Built-in amenities", + "title": "Built-in amenities", + "items": [ + { + "label": "Chairs (Additional)" + }, + { + "label": "Deskphone" + }, + { + "label": "Chair" + } + ] + }, + { + "key": "Additional amenities", + "title": "Additional services", + "description": "Only available upon request.", + "items": [ + { + "label": "Coffee" + }, + { + "label": "Barista Services" + }, + { + "label": "Tea" + } + ] + } + ], + "timelines": [ + { + "date": "2024-09-06", + "disabled": false, + "slots": [ + { + "startTime": "08:00", + "endTime": "08:45", + "status": "DEFAULT" + }, + { + "startTime": "08:45:00", + "endTime": "09:30:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "11:45:00", + "status": "DEFAULT" + }, + { + "id": "RBP5g87Em6", + "title": "Weekly Huddle #7", + "label": "Shawn TAY (GOVTECH)", + "hosts": [], + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "OCCUPIED", + "action": [ + { + "type": "SHOW_MODAL", + "continueOnError": true, + "payload": { + "message": "", + "cancelActionLabel": "", + "renderContent": { + "type": "html", + "html": "

Booking details for Apple

6 Sep 2024, Fri 11:00am - 12:00pm

Mapletree Business City 10, Floor 8

Status

Confirmed

Booking owner

Shawn TAY (GOVTECH)

Shawn_TAY@tech.gov.sg

Booking title

Weekly Huddle #7

" + }, + "confirmActionLabel": "Close" + } + } + ] + }, + { + "startTime": "13:00:00", + "endTime": "13:45:00", + "status": "DEFAULT" + }, + { + "startTime": "13:45:00", + "endTime": "14:30:00", + "status": "DEFAULT" + }, + { + "startTime": "14:30:00", + "endTime": "15:15:00", + "status": "OCCUPIED" + }, + { + "startTime": "16:45:00", + "endTime": "17:15:00", + "status": "DEFAULT" + }, + { + "startTime": "17:15:00", + "endTime": "18:00:00", + "status": "DEFAULT" + }, + { + "startTime": "18:00:00", + "endTime": "18:45:00", + "status": "DEFAULT" + }, + { + "startTime": "18:45:00", + "endTime": "19:30:00", + "status": "DEFAULT" + }, + { + "startTime": "19:30:00", + "endTime": "20:15:00", + "status": "DEFAULT" + }, + { + "startTime": "20:15:00", + "endTime": "21:00:00", + "status": "DEFAULT" + }, + { + "startTime": "21:00:00", + "endTime": "21:45:00", + "status": "DEFAULT" + }, + { + "startTime": "21:45:00", + "endTime": "22:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "22:30:00", + "interval": 30 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/9l4P1dOr16?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=9l4P1dOr16&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/9l4P1dOr16?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=9l4P1dOr16&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "Dy3E3vRQY0", + "title": "Avocado", + "organisationId": "ylWEXKQNDX", + "subtitle": "Eclipse Building", + "resourceSubtype": "Conference Room", + "resourceType": "Rooms", + "resourceTypeId": "vmoQAgr9Dl", + "images": [ + "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/Dy3E3vRQY0/5d53aabc-48ab-4e38-8036-b3d000f7c123/a5bb9b71-289b-4216-a2cb-74e24451d200/Avocado2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=56a94f9a88cf5680133f2d96c5961aad53925ac97890707509c297c6d71c7042&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": false + }, + "unavailableAfterDays": "", + "availableAfterDays": "", + "capacity": "18", + "additionalDescription": [ + { + "key": "Booking usage", + "title": "Booking usage", + "items": [ + { + "label": "Internal meeting" + }, + { + "label": "External meeting" + } + ] + }, + { + "key": "Additional amenities", + "title": "Additional services", + "description": "Only available upon request.", + "items": [ + { + "label": "Barista Services" + } + ] + } + ], + "timelines": [ + { + "date": "2024-09-06", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "08:30:00", + "status": "DEFAULT" + }, + { + "startTime": "08:30:00", + "endTime": "09:00:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00:00", + "endTime": "09:30:00", + "status": "DEFAULT" + }, + { + "startTime": "09:30:00", + "endTime": "10:00:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00:00", + "endTime": "10:30:00", + "status": "DEFAULT" + }, + { + "startTime": "10:30:00", + "endTime": "11:00:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "11:30:00", + "status": "DEFAULT" + }, + { + "startTime": "11:30:00", + "endTime": "12:00:00", + "status": "DEFAULT" + }, + { + "startTime": "12:00:00", + "endTime": "12:30:00", + "status": "DEFAULT" + }, + { + "startTime": "12:30:00", + "endTime": "13:00:00", + "status": "DEFAULT" + }, + { + "startTime": "13:00:00", + "endTime": "13:30:00", + "status": "DEFAULT" + }, + { + "startTime": "13:30:00", + "endTime": "14:00:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00:00", + "endTime": "14:30:00", + "status": "DEFAULT" + }, + { + "startTime": "14:30:00", + "endTime": "15:00:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00:00", + "endTime": "15:30:00", + "status": "DEFAULT" + }, + { + "startTime": "15:30:00", + "endTime": "16:00:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00:00", + "endTime": "16:30:00", + "status": "DEFAULT" + }, + { + "startTime": "16:30:00", + "endTime": "17:00:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00:00", + "endTime": "17:30:00", + "status": "DEFAULT" + }, + { + "startTime": "17:30:00", + "endTime": "18:00:00", + "status": "DEFAULT" + }, + { + "startTime": "18:00:00", + "endTime": "18:30:00", + "status": "DEFAULT" + }, + { + "startTime": "18:30:00", + "endTime": "19:00:00", + "status": "DEFAULT" + }, + { + "startTime": "19:00:00", + "endTime": "19:30:00", + "status": "DEFAULT" + }, + { + "startTime": "19:30:00", + "endTime": "20:00:00", + "status": "DEFAULT" + }, + { + "startTime": "20:00:00", + "endTime": "20:30:00", + "status": "DEFAULT" + }, + { + "startTime": "20:30:00", + "endTime": "21:00:00", + "status": "DEFAULT" + }, + { + "startTime": "21:00:00", + "endTime": "21:30:00", + "status": "DEFAULT" + }, + { + "startTime": "21:30:00", + "endTime": "22:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "22:00:00", + "interval": 30 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/Dy3E3vRQY0?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=Dy3E3vRQY0&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/Dy3E3vRQY0?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=Dy3E3vRQY0&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "GN9P0vME6K", + "title": "Banana", + "organisationId": "ylWEXKQNDX", + "subtitle": "Mapletree Business City 10, Floor 8", + "resourceSubtype": "Conference Room", + "resourceType": "Rooms", + "resourceTypeId": "vmoQAgr9Dl", + "images": [ + "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/GN9P0vME6K/5d53aabc-48ab-4e38-8036-b3d000f7c123/378a92b9-7901-4a55-8123-c8decb1477fb/Banana.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=6e438cfce49a468cc061d95b44f7ab775051001a917076b16fadb9e11fcad968&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": false + }, + "unavailableAfterDays": "", + "availableAfterDays": "", + "capacity": "6", + "additionalDescription": [ + { + "key": "Booking usage", + "title": "Booking usage", + "items": [ + { + "label": "Internal meeting" + }, + { + "label": "External meeting" + } + ] + }, + { + "key": "Additional amenities", + "title": "Additional services", + "description": "Only available upon request.", + "items": [ + { + "label": "Coffee" + }, + { + "label": "Tea" + } + ] + } + ], + "timelines": [ + { + "date": "2024-09-06", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "08:30:00", + "status": "DEFAULT" + }, + { + "startTime": "08:30:00", + "endTime": "09:00:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00:00", + "endTime": "09:30:00", + "status": "DEFAULT" + }, + { + "startTime": "09:30:00", + "endTime": "10:00:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00:00", + "endTime": "10:30:00", + "status": "DEFAULT" + }, + { + "startTime": "10:30:00", + "endTime": "11:00:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "11:30:00", + "status": "DEFAULT" + }, + { + "startTime": "11:30:00", + "endTime": "12:00:00", + "status": "DEFAULT" + }, + { + "startTime": "12:00:00", + "endTime": "12:30:00", + "status": "DEFAULT" + }, + { + "startTime": "12:30:00", + "endTime": "13:00:00", + "status": "DEFAULT" + }, + { + "startTime": "13:00:00", + "endTime": "13:30:00", + "status": "DEFAULT" + }, + { + "startTime": "13:30:00", + "endTime": "14:00:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00:00", + "endTime": "14:30:00", + "status": "DEFAULT" + }, + { + "startTime": "14:30:00", + "endTime": "15:00:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00:00", + "endTime": "15:30:00", + "status": "DEFAULT" + }, + { + "startTime": "15:30:00", + "endTime": "16:00:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00:00", + "endTime": "16:30:00", + "status": "DEFAULT" + }, + { + "startTime": "16:30:00", + "endTime": "17:00:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00:00", + "endTime": "17:30:00", + "status": "DEFAULT" + }, + { + "startTime": "17:30:00", + "endTime": "18:00:00", + "status": "DEFAULT" + }, + { + "startTime": "18:00:00", + "endTime": "18:30:00", + "status": "DEFAULT" + }, + { + "startTime": "18:30:00", + "endTime": "19:00:00", + "status": "DEFAULT" + }, + { + "startTime": "19:00:00", + "endTime": "19:30:00", + "status": "DEFAULT" + }, + { + "startTime": "19:30:00", + "endTime": "20:00:00", + "status": "DEFAULT" + }, + { + "startTime": "20:00:00", + "endTime": "20:30:00", + "status": "DEFAULT" + }, + { + "startTime": "20:30:00", + "endTime": "21:00:00", + "status": "DEFAULT" + }, + { + "startTime": "21:00:00", + "endTime": "21:30:00", + "status": "DEFAULT" + }, + { + "startTime": "21:30:00", + "endTime": "22:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "22:00:00", + "interval": 30 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/GN9P0vME6K?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=GN9P0vME6K&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/GN9P0vME6K?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=GN9P0vME6K&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "mx0ExmWr9Y", + "title": "Cantaloupe", + "organisationId": "ylWEXKQNDX", + "subtitle": "Mapletree Business City 10, Floor 9", + "resourceSubtype": "Conference Room", + "resourceType": "Rooms", + "resourceTypeId": "vmoQAgr9Dl", + "images": [ + "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/mx0ExmWr9Y/5d53aabc-48ab-4e38-8036-b3d000f7c123/5fad9460-c166-4a82-9aed-0a4579af632c/Cantaloupe.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=af8510ba0a0872726a4ffb86efc6d264b48be9dc13569018e91b1a4441d0afb6&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": false + }, + "unavailableAfterDays": "", + "availableAfterDays": "", + "capacity": "10", + "additionalDescription": [ + { + "key": "Booking usage", + "title": "Booking usage", + "items": [ + { + "label": "Internal meeting" + }, + { + "label": "External meeting" + } + ] + }, + { + "key": "Available layouts", + "title": "Available layouts", + "description": "Additional time may be added when checking for availability due to setup and teardown of layout.", + "items": [ + { + "label": "Boardroom (10 pax)" + }, + { + "label": "Classroom (10 pax)" + }, + { + "label": "U-shape (10 pax)" + } + ] + }, + { + "key": "View layout details", + "title": "View layout details", + "items": [ + { + "label": "Boardroom (10 pax)", + "description": [ + { + "label": "Setup time", + "value": "None" + }, + { + "label": "Teardown time", + "value": "None" + } + ], + "imageUrls": [ + "https://rbs-stg.dwp.gov.sg/rbs/api/v1/layout/9l4P1xbr16/layout-url?path=resource-layouts/9l4P1xbr16/5d53aabc-48ab-4e38-8036-b3d000f7c123/1e64e6e8-a4bf-4668-b4e0-c2c83dd75cdd/Boardroom.png" + ] + }, + { + "label": "Classroom (10 pax)", + "description": [ + { + "label": "Setup time", + "value": "15 minutes" + }, + { + "label": "Teardown time", + "value": "15 minutes" + } + ], + "imageUrls": [ + "https://rbs-stg.dwp.gov.sg/rbs/api/v1/layout/mOkQkXAEYZ/layout-url?path=resource-layouts/mOkQkXAEYZ/5d53aabc-48ab-4e38-8036-b3d000f7c123/1e64e6e8-a4bf-4668-b4e0-c2c83dd75cdd/Classroom.png" + ] + }, + { + "label": "U-shape (10 pax)", + "description": [ + { + "label": "Setup time", + "value": "15 minutes" + }, + { + "label": "Teardown time", + "value": "15 minutes" + } + ], + "imageUrls": [ + "https://rbs-stg.dwp.gov.sg/rbs/api/v1/layout/NgYrJodP0w/layout-url?path=resource-layouts/NgYrJodP0w/5d53aabc-48ab-4e38-8036-b3d000f7c123/1e64e6e8-a4bf-4668-b4e0-c2c83dd75cdd/U-shape.png" + ] + } + ] + } + ], + "timelines": [ + { + "date": "2024-09-06", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT" + }, + { + "startTime": "20:00:00", + "endTime": "21:00:00", + "status": "DEFAULT" + }, + { + "startTime": "21:00:00", + "endTime": "22:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "22:00:00", + "interval": 60 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/mx0ExmWr9Y?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=mx0ExmWr9Y&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/mx0ExmWr9Y?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=mx0ExmWr9Y&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "An0rbeOElJ", + "title": "Cherry", + "organisationId": "ylWEXKQNDX", + "subtitle": "Mapletree Business City 10, Floor 8", + "resourceSubtype": "Conference Room", + "resourceType": "Rooms", + "resourceTypeId": "vmoQAgr9Dl", + "images": [ + "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/An0rbeOElJ/5d53aabc-48ab-4e38-8036-b3d000f7c123/7053dc86-153f-4194-9ac1-73d2b07a6236/Cherry.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=5a94a0ec3089214927586c4f5add8b2162a31a0c84933728abf45608831f748a&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": true + }, + "unavailableAfterDays": "90", + "availableAfterDays": "", + "capacity": "10", + "additionalDescription": [ + { + "key": "Booking usage", + "title": "Booking usage", + "items": [ + { + "label": "Internal meeting" + }, + { + "label": "External meeting" + } + ] + } + ], + "timelines": [ + { + "date": "2024-09-06", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "08:30:00", + "status": "DEFAULT" + }, + { + "startTime": "08:30:00", + "endTime": "09:00:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00:00", + "endTime": "09:30:00", + "status": "DEFAULT" + }, + { + "startTime": "09:30:00", + "endTime": "10:00:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00:00", + "endTime": "10:30:00", + "status": "DEFAULT" + }, + { + "startTime": "10:30:00", + "endTime": "11:00:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "11:30:00", + "status": "DEFAULT" + }, + { + "startTime": "11:30:00", + "endTime": "12:00:00", + "status": "DEFAULT" + }, + { + "startTime": "12:00:00", + "endTime": "12:30:00", + "status": "DEFAULT" + }, + { + "startTime": "12:30:00", + "endTime": "13:00:00", + "status": "DEFAULT" + }, + { + "startTime": "13:00:00", + "endTime": "13:30:00", + "status": "DEFAULT" + }, + { + "startTime": "13:30:00", + "endTime": "14:00:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00:00", + "endTime": "14:30:00", + "status": "DEFAULT" + }, + { + "startTime": "14:30:00", + "endTime": "15:00:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00:00", + "endTime": "15:30:00", + "status": "DEFAULT" + }, + { + "startTime": "15:30:00", + "endTime": "16:00:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00:00", + "endTime": "16:30:00", + "status": "DEFAULT" + }, + { + "startTime": "16:30:00", + "endTime": "17:00:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00:00", + "endTime": "17:30:00", + "status": "DEFAULT" + }, + { + "startTime": "17:30:00", + "endTime": "18:00:00", + "status": "DEFAULT" + }, + { + "startTime": "18:00:00", + "endTime": "18:30:00", + "status": "DEFAULT" + }, + { + "startTime": "18:30:00", + "endTime": "19:00:00", + "status": "DEFAULT" + }, + { + "startTime": "19:00:00", + "endTime": "19:30:00", + "status": "DEFAULT" + }, + { + "startTime": "19:30:00", + "endTime": "20:00:00", + "status": "DEFAULT" + }, + { + "startTime": "20:00:00", + "endTime": "20:30:00", + "status": "DEFAULT" + }, + { + "startTime": "20:30:00", + "endTime": "21:00:00", + "status": "DEFAULT" + }, + { + "startTime": "21:00:00", + "endTime": "21:30:00", + "status": "DEFAULT" + }, + { + "startTime": "21:30:00", + "endTime": "22:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "22:00:00", + "interval": 30 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/An0rbeOElJ?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=An0rbeOElJ&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/An0rbeOElJ?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=An0rbeOElJ&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "GN9P0vDE6K", + "title": "Dragonfruit", + "organisationId": "ylWEXKQNDX", + "subtitle": "Mapletree Business City 10, Floor 8", + "resourceSubtype": "Conference Room", + "resourceType": "Rooms", + "resourceTypeId": "vmoQAgr9Dl", + "images": [ + "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/GN9P0vDE6K/5d53aabc-48ab-4e38-8036-b3d000f7c123/02c7fa54-9d6a-4a50-892c-0d1071d94d5f/Dragonfruit.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=6a12f85542e0563c2d9a39181e5ac5ccc001fed925512a9bf495bc667795b5e4&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": false + }, + "unavailableAfterDays": "", + "availableAfterDays": "", + "capacity": "10", + "additionalDescription": [ + { + "key": "Booking usage", + "title": "Booking usage", + "items": [ + { + "label": "Internal meeting" + }, + { + "label": "External meeting" + } + ] + }, + { + "key": "Built-in amenities", + "title": "Built-in amenities", + "items": [ + { + "label": "Projector" + }, + { + "label": "Laser pointer" + }, + { + "label": "Table" + }, + { + "label": "Microphone" + }, + { + "label": "Chair" + } + ] + }, + { + "key": "Additional amenities", + "title": "Additional services", + "description": "Only available upon request.", + "items": [ + { + "label": "Coffee" + }, + { + "label": "Tea" + } + ] + }, + { + "key": "Available layouts", + "title": "Available layouts", + "description": "Additional time may be added when checking for availability due to setup and teardown of layout.", + "items": [ + { + "label": "Classroom (12 pax)" + }, + { + "label": "Default (10 pax)" + }, + { + "label": "Cabaret (16 pax)" + } + ] + }, + { + "key": "View layout details", + "title": "View layout details", + "items": [ + { + "label": "Classroom (12 pax)", + "description": [ + { + "label": "Setup time", + "value": "15 minutes" + }, + { + "label": "Teardown time", + "value": "15 minutes" + } + ], + "imageUrls": [ + "https://rbs-stg.dwp.gov.sg/rbs/api/v1/layout/9znPmNeQBv/layout-url?path=resource-layouts/9znPmNeQBv/5d53aabc-48ab-4e38-8036-b3d000f7c123/0ed1cf96-f8cf-4f5a-bb9f-b448a6246f1f/Classroom.png" + ] + }, + { + "label": "Default (10 pax)", + "description": [ + { + "label": "Setup time", + "value": "None" + }, + { + "label": "Teardown time", + "value": "None" + } + ], + "imageUrls": [ + "https://rbs-stg.dwp.gov.sg/rbs/api/v1/layout/0B8E716Pbp/layout-url?path=resource-layouts/0B8E716Pbp/5d53aabc-48ab-4e38-8036-b3d000f7c123/021a5edb-99ba-4870-bb49-cf56762b652e/Boardroom.png" + ] + }, + { + "label": "Cabaret (16 pax)", + "description": [ + { + "label": "Setup time", + "value": "15 minutes" + }, + { + "label": "Teardown time", + "value": "15 minutes" + } + ], + "imageUrls": [ + "https://rbs-stg.dwp.gov.sg/rbs/api/v1/layout/vmoQAgyr9D/layout-url?path=resource-layouts/vmoQAgyr9D/5d53aabc-48ab-4e38-8036-b3d000f7c123/7e99c61a-7102-4ba6-bb69-7619491b8509/Cabaret.png" + ] + } + ] + } + ], + "timelines": [ + { + "date": "2024-09-06", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "08:30:00", + "status": "DEFAULT" + }, + { + "startTime": "08:30:00", + "endTime": "09:00:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00:00", + "endTime": "09:30:00", + "status": "DEFAULT" + }, + { + "startTime": "09:30:00", + "endTime": "10:00:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00:00", + "endTime": "10:30:00", + "status": "DEFAULT" + }, + { + "startTime": "10:30:00", + "endTime": "11:00:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "11:30:00", + "status": "DEFAULT" + }, + { + "startTime": "11:30:00", + "endTime": "12:00:00", + "status": "DEFAULT" + }, + { + "startTime": "12:00:00", + "endTime": "12:30:00", + "status": "DEFAULT" + }, + { + "startTime": "12:30:00", + "endTime": "13:00:00", + "status": "DEFAULT" + }, + { + "startTime": "13:00:00", + "endTime": "13:30:00", + "status": "DEFAULT" + }, + { + "startTime": "13:30:00", + "endTime": "14:00:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00:00", + "endTime": "14:30:00", + "status": "DEFAULT" + }, + { + "startTime": "14:30:00", + "endTime": "15:00:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00:00", + "endTime": "15:30:00", + "status": "DEFAULT" + }, + { + "startTime": "15:30:00", + "endTime": "16:00:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00:00", + "endTime": "16:30:00", + "status": "DEFAULT" + }, + { + "startTime": "16:30:00", + "endTime": "17:00:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00:00", + "endTime": "17:30:00", + "status": "DEFAULT" + }, + { + "startTime": "17:30:00", + "endTime": "18:00:00", + "status": "DEFAULT" + }, + { + "startTime": "18:00:00", + "endTime": "18:30:00", + "status": "DEFAULT" + }, + { + "startTime": "18:30:00", + "endTime": "19:00:00", + "status": "DEFAULT" + }, + { + "startTime": "19:00:00", + "endTime": "19:30:00", + "status": "DEFAULT" + }, + { + "startTime": "19:30:00", + "endTime": "20:00:00", + "status": "DEFAULT" + }, + { + "startTime": "20:00:00", + "endTime": "20:30:00", + "status": "DEFAULT" + }, + { + "startTime": "20:30:00", + "endTime": "21:00:00", + "status": "DEFAULT" + }, + { + "startTime": "21:00:00", + "endTime": "21:30:00", + "status": "DEFAULT" + }, + { + "startTime": "21:30:00", + "endTime": "22:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "22:00:00", + "interval": 30 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/GN9P0vDE6K?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=GN9P0vDE6K&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/GN9P0vDE6K?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=GN9P0vDE6K&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "vK4rGewQ02", + "title": "Durian", + "organisationId": "ylWEXKQNDX", + "subtitle": "Eclipse Building", + "resourceSubtype": "Meeting Room", + "resourceType": "Rooms", + "resourceTypeId": "vmoQAgr9Dl", + "images": [ + "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/vK4rGewQ02/5d53aabc-48ab-4e38-8036-b3d000f7c123/e7be5a59-bff3-43f0-b86c-f375775a054b/Durian.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=68d3552e5f82364ff858fb2a537f7ccc4c0d5fe5db054a9d24d990b74861bd7a&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": false + }, + "unavailableAfterDays": "", + "availableAfterDays": "", + "capacity": "10", + "additionalDescription": [], + "timelines": [ + { + "date": "2024-09-06", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "08:30:00", + "status": "DEFAULT" + }, + { + "startTime": "08:30:00", + "endTime": "09:00:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00:00", + "endTime": "09:30:00", + "status": "DEFAULT" + }, + { + "startTime": "09:30:00", + "endTime": "10:00:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00:00", + "endTime": "10:30:00", + "status": "DEFAULT" + }, + { + "startTime": "10:30:00", + "endTime": "11:00:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "11:30:00", + "status": "DEFAULT" + }, + { + "startTime": "11:30:00", + "endTime": "12:00:00", + "status": "DEFAULT" + }, + { + "startTime": "12:00:00", + "endTime": "12:30:00", + "status": "DEFAULT" + }, + { + "startTime": "12:30:00", + "endTime": "13:00:00", + "status": "DEFAULT" + }, + { + "startTime": "13:00:00", + "endTime": "13:30:00", + "status": "DEFAULT" + }, + { + "startTime": "13:30:00", + "endTime": "14:00:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00:00", + "endTime": "14:30:00", + "status": "DEFAULT" + }, + { + "startTime": "14:30:00", + "endTime": "15:00:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00:00", + "endTime": "15:30:00", + "status": "DEFAULT" + }, + { + "startTime": "15:30:00", + "endTime": "16:00:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00:00", + "endTime": "16:30:00", + "status": "DEFAULT" + }, + { + "startTime": "16:30:00", + "endTime": "17:00:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00:00", + "endTime": "17:30:00", + "status": "DEFAULT" + }, + { + "startTime": "17:30:00", + "endTime": "18:00:00", + "status": "DEFAULT" + }, + { + "startTime": "18:00:00", + "endTime": "18:30:00", + "status": "DEFAULT" + }, + { + "startTime": "18:30:00", + "endTime": "19:00:00", + "status": "DEFAULT" + }, + { + "startTime": "19:00:00", + "endTime": "19:30:00", + "status": "DEFAULT" + }, + { + "startTime": "19:30:00", + "endTime": "20:00:00", + "status": "DEFAULT" + }, + { + "startTime": "20:00:00", + "endTime": "20:30:00", + "status": "DEFAULT" + }, + { + "startTime": "20:30:00", + "endTime": "21:00:00", + "status": "DEFAULT" + }, + { + "startTime": "21:00:00", + "endTime": "21:30:00", + "status": "DEFAULT" + }, + { + "startTime": "21:30:00", + "endTime": "22:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "22:00:00", + "interval": 30 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/vK4rGewQ02?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=vK4rGewQ02&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/vK4rGewQ02?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=vK4rGewQ02&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "0B8E719Pbp", + "title": "Executive room 1", + "organisationId": "ylWEXKQNDX", + "subtitle": "Eclipse Building", + "resourceSubtype": "Executive Room", + "resourceType": "Rooms", + "resourceTypeId": "vmoQAgr9Dl", + "images": null, + "tags": { + "Approval required": false, + "Manual start": true + }, + "unavailableAfterDays": "90", + "availableAfterDays": "", + "capacity": "5", + "additionalDescription": [ + { + "key": "Booking usage", + "title": "Booking usage", + "items": [ + { + "label": "Internal meeting" + }, + { + "label": "External meeting" + } + ] + } + ], + "timelines": [ + { + "date": "2024-09-06", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT" + }, + { + "startTime": "20:00:00", + "endTime": "21:00:00", + "status": "DEFAULT" + }, + { + "startTime": "21:00:00", + "endTime": "22:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "22:00:00", + "interval": 60 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/0B8E719Pbp?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=0B8E719Pbp&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/0B8E719Pbp?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=0B8E719Pbp&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "vK4rGoMr02", + "title": "Executive room 6", + "organisationId": "ylWEXKQNDX", + "subtitle": "Eclipse Building", + "resourceSubtype": "Executive Room", + "resourceType": "Rooms", + "resourceTypeId": "vmoQAgr9Dl", + "images": null, + "tags": { + "Approval required": true, + "Manual start": false + }, + "unavailableAfterDays": "90", + "availableAfterDays": "", + "capacity": "6", + "additionalDescription": [ + { + "key": "Booking usage", + "title": "Booking usage", + "items": [ + { + "label": "Internal meeting" + }, + { + "label": "External meeting" + } + ] + } + ], + "timelines": [ + { + "date": "2024-09-06", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT" + }, + { + "startTime": "20:00:00", + "endTime": "21:00:00", + "status": "DEFAULT" + }, + { + "startTime": "21:00:00", + "endTime": "22:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "22:00:00", + "interval": 60 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/vK4rGoMr02?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=vK4rGoMr02&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/vK4rGoMr02?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=vK4rGoMr02&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + }, + { + "_provider": "rmbme", + "id": "YRVPVjVPGe", + "title": "Grape", + "organisationId": "ylWEXKQNDX", + "subtitle": "Mapletree Business City 10, Floor 8", + "resourceSubtype": "Conference Room", + "resourceType": "Rooms", + "resourceTypeId": "vmoQAgr9Dl", + "images": [ + "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/YRVPVjVPGe/5d53aabc-48ab-4e38-8036-b3d000f7c123/b7635427-9512-4205-9c78-1480e4953c73/Grape.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=b44aaa42675bae307a1bfcc72475cc435b4d2e2db5abec6f3d99c6508bc0d05e&X-Amz-SignedHeaders=host&x-id=GetObject" + ], + "tags": { + "Approval required": false, + "Manual start": false + }, + "unavailableAfterDays": "", + "availableAfterDays": "", + "capacity": "10", + "additionalDescription": [ + { + "key": "Booking usage", + "title": "Booking usage", + "items": [ + { + "label": "Internal meeting" + }, + { + "label": "External meeting" + } + ] + }, + { + "key": "Built-in amenities", + "title": "Built-in amenities", + "items": [ + { + "label": "Projector" + }, + { + "label": "Laser pointer" + }, + { + "label": "Chair" + } + ] + } + ], + "timelines": [ + { + "date": "2024-09-06", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "08:30:00", + "status": "DEFAULT" + }, + { + "startTime": "08:30:00", + "endTime": "09:00:00", + "status": "DEFAULT" + }, + { + "startTime": "09:00:00", + "endTime": "09:30:00", + "status": "DEFAULT" + }, + { + "startTime": "09:30:00", + "endTime": "10:00:00", + "status": "DEFAULT" + }, + { + "startTime": "10:00:00", + "endTime": "10:30:00", + "status": "DEFAULT" + }, + { + "startTime": "10:30:00", + "endTime": "11:00:00", + "status": "DEFAULT" + }, + { + "startTime": "11:00:00", + "endTime": "11:30:00", + "status": "DEFAULT" + }, + { + "startTime": "11:30:00", + "endTime": "12:00:00", + "status": "DEFAULT" + }, + { + "startTime": "12:00:00", + "endTime": "12:30:00", + "status": "DEFAULT" + }, + { + "startTime": "12:30:00", + "endTime": "13:00:00", + "status": "DEFAULT" + }, + { + "startTime": "13:00:00", + "endTime": "13:30:00", + "status": "DEFAULT" + }, + { + "startTime": "13:30:00", + "endTime": "14:00:00", + "status": "DEFAULT" + }, + { + "startTime": "14:00:00", + "endTime": "14:30:00", + "status": "DEFAULT" + }, + { + "startTime": "14:30:00", + "endTime": "15:00:00", + "status": "DEFAULT" + }, + { + "startTime": "15:00:00", + "endTime": "15:30:00", + "status": "DEFAULT" + }, + { + "startTime": "15:30:00", + "endTime": "16:00:00", + "status": "DEFAULT" + }, + { + "startTime": "16:00:00", + "endTime": "16:30:00", + "status": "DEFAULT" + }, + { + "startTime": "16:30:00", + "endTime": "17:00:00", + "status": "DEFAULT" + }, + { + "startTime": "17:00:00", + "endTime": "17:30:00", + "status": "DEFAULT" + }, + { + "startTime": "17:30:00", + "endTime": "18:00:00", + "status": "DEFAULT" + }, + { + "startTime": "18:00:00", + "endTime": "18:30:00", + "status": "DEFAULT" + }, + { + "startTime": "18:30:00", + "endTime": "19:00:00", + "status": "DEFAULT" + }, + { + "startTime": "19:00:00", + "endTime": "19:30:00", + "status": "DEFAULT" + }, + { + "startTime": "19:30:00", + "endTime": "20:00:00", + "status": "DEFAULT" + }, + { + "startTime": "20:00:00", + "endTime": "20:30:00", + "status": "DEFAULT" + }, + { + "startTime": "20:30:00", + "endTime": "21:00:00", + "status": "DEFAULT" + }, + { + "startTime": "21:00:00", + "endTime": "21:30:00", + "status": "DEFAULT" + }, + { + "startTime": "21:30:00", + "endTime": "22:00:00", + "status": "DEFAULT" + } + ], + "startTime": "08:00:00", + "endTime": "22:00:00", + "interval": 30 + } + ], + "itemTemplate": "rooms-interval", + "callToActions": { + "desktop": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/YRVPVjVPGe?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Unavailable", + "style": "default", + "enabled": false, + "visible": false, + "icon": null + } + }, + "actions": [] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=YRVPVjVPGe&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ], + "mobile": [ + { + "trigger": { + "type": "BUTTON", + "value": { + "label": "Book", + "style": "default", + "enabled": true, + "visible": true, + "icon": null + } + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/YRVPVjVPGe?date=2024-09-06&startTime=&endTime=" + }, + "continueOnError": null + } + ] + }, + { + "trigger": { + "type": "LIST_ITEM", + "value": null + }, + "actions": [ + { + "type": "REDIRECT", + "payload": { + "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=YRVPVjVPGe&selectedDate=2024-09-06&calendarMode=day" + }, + "continueOnError": null + } + ] + } + ] + } + } + ] +} diff --git a/stories/timetable/timetable-lazy-load-data.json b/stories/timetable/timetable-lazy-load-data.json new file mode 100644 index 000000000..1149e39fb --- /dev/null +++ b/stories/timetable/timetable-lazy-load-data.json @@ -0,0 +1,3468 @@ +{ + "page": 1, + "rowsPerPage": 10, + "totalPages": 5, + "totalRows": 50, + "resources": [ + { + "id": "1", + "title": "Apple", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + } + ], + "startTime": "08:00:00", + "endTime": "14:00:00", + "interval": 30 + } + ] + }, + { + "id": "2", + "title": "Banana", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "3", + "title": "Cherry", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "17:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "3" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "4", + "title": "Date", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "2" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "5", + "title": "Elderberry", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "13:00:00", + "endTime": "15:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "4" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 60 + } + ] + }, + { + "id": "6", + "title": "Fig", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "18:00:00", + "interval": 60 + } + ] + }, + { + "id": "7", + "title": "Grape", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "8" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "9" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT", + "id": "10" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "11" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "8", + "title": "Honeydew", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "17:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "4" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "9", + "title": "Indian Fig", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "2" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "8" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "9" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "10" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "11" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "10", + "title": "Jackfruit", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "2" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "8" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "9" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT", + "id": "10" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "11" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "11", + "title": "Kiwi", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "8" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "9" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT", + "id": "10" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "11" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "12", + "title": "Lemon", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "17:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "3" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "13", + "title": "Mango", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "18:00:00", + "interval": 30 + } + ] + }, + { + "id": "14", + "title": "Nectarine", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "18:00:00", + "interval": 30 + } + ] + }, + { + "id": "15", + "title": "Olive", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "2" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "16", + "title": "Papaya", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "18:00:00", + "interval": 30 + } + ] + }, + { + "id": "17", + "title": "Quince", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "18", + "title": "Raspberry", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + } + ], + "startTime": "08:00:00", + "endTime": "14:00:00", + "interval": 30 + } + ] + }, + { + "id": "19", + "title": "Strawberry", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "18:00:00", + "interval": 30 + } + ] + }, + { + "id": "20", + "title": "Tangerine", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "15:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "6" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "21", + "title": "Uva", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "2" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "22", + "title": "Voavanga", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "15:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "6" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "23", + "title": "Watermelon", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "24", + "title": "Ximenia", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "2" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "9" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "10" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT", + "id": "11" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "12" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "25", + "title": "Yarrow", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "8" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT", + "id": "9" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "10" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "26", + "title": "Zucchini", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "18:00:00", + "interval": 30 + } + ] + }, + { + "id": "27", + "title": "Apricot", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "28", + "title": "Blackberry", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "18:00:00", + "interval": 30 + } + ] + }, + { + "id": "29", + "title": "Cantaloupe", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + } + ], + "startTime": "08:00:00", + "endTime": "14:00:00", + "interval": 30 + } + ] + }, + { + "id": "30", + "title": "Dragonfruit", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "15:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "6" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "31", + "title": "Elderberry", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "2" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "8" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "9" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "10" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "32", + "title": "Figs", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "33", + "title": "Grapefruit", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "2" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "8" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "9" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "10" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "34", + "title": "Huckleberry", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + } + ], + "startTime": "08:00:00", + "endTime": "14:00:00", + "interval": 30 + } + ] + }, + { + "id": "35", + "title": "Ice Cream Bean", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "2" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "36", + "title": "Jujube", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "15:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "6" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "37", + "title": "Kumquat", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "38", + "title": "Lime", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + } + ], + "startTime": "08:00:00", + "endTime": "14:00:00", + "interval": 30 + } + ] + }, + { + "id": "39", + "title": "Melon", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "18:00:00", + "interval": 30 + } + ] + }, + { + "id": "40", + "title": "Noni", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "41", + "title": "Orange", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "15:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "6" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "42", + "title": "Peach", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + } + ], + "startTime": "08:00:00", + "endTime": "14:00:00", + "interval": 30 + } + ] + }, + { + "id": "43", + "title": "Pear", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "2" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "44", + "title": "Pineapple", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "45", + "title": "Pomegranate", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "18:00:00", + "interval": 30 + } + ] + }, + { + "id": "46", + "title": "Quince", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + } + ], + "startTime": "08:00:00", + "endTime": "14:00:00", + "interval": 30 + } + ] + }, + { + "id": "47", + "title": "Raisin", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "09:15:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "09:15:00", + "endTime": "09:30:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "2" + }, + { + "startTime": "09:30:00", + "endTime": "09:45:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "3" + }, + { + "startTime": "09:45:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "48", + "title": "Salak", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + }, + { + "id": "49", + "title": "Tomato", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "0" + }, + { + "startTime": "09:00:00", + "endTime": "11:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "1" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "4" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "16:00:00", + "endTime": "17:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "17:00:00", + "endTime": "18:00:00", + "status": "DEFAULT", + "id": "8" + }, + { + "startTime": "18:00:00", + "endTime": "19:00:00", + "status": "DEFAULT", + "id": "9" + }, + { + "startTime": "19:00:00", + "endTime": "20:00:00", + "status": "DEFAULT", + "id": "10" + } + ], + "startTime": "08:00:00", + "endTime": "20:00:00", + "interval": 30 + } + ] + }, + { + "id": "50", + "title": "Uva Ursi", + "subtitle": "Eclipse", + "capacity": "8", + "timelines": [ + { + "date": "2024-09-10", + "disabled": false, + "slots": [ + { + "startTime": "08:00:00", + "endTime": "09:00:00", + "status": "DEFAULT", + "id": "1" + }, + { + "startTime": "09:00:00", + "endTime": "10:00:00", + "status": "DEFAULT", + "id": "2" + }, + { + "startTime": "10:00:00", + "endTime": "11:00:00", + "status": "DEFAULT", + "id": "3" + }, + { + "startTime": "11:00:00", + "endTime": "12:00:00", + "status": "OCCUPIED", + "label": "Booking owner name", + "title": "booking title", + "id": "4" + }, + { + "startTime": "12:00:00", + "endTime": "13:00:00", + "status": "DEFAULT", + "id": "5" + }, + { + "startTime": "13:00:00", + "endTime": "14:00:00", + "status": "DEFAULT", + "id": "6" + }, + { + "startTime": "14:00:00", + "endTime": "15:00:00", + "status": "DEFAULT", + "id": "7" + }, + { + "startTime": "15:00:00", + "endTime": "16:00:00", + "status": "DEFAULT", + "id": "8" + } + ], + "startTime": "08:00:00", + "endTime": "16:00:00", + "interval": 30 + } + ] + } + ] +} From fa6d683b53799b4a9a21096a165e449bd54b8755 Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Thu, 26 Sep 2024 14:01:25 +0800 Subject: [PATCH 04/17] [BOOKINGSG-6090-timetable][JZ|FY] Re-export TimeTable --- src/index.ts | 1 + src/timetable/index.ts | 2 ++ 2 files changed, 3 insertions(+) create mode 100644 src/timetable/index.ts diff --git a/src/index.ts b/src/index.ts index d6a3b0832..cd62bffaf 100644 --- a/src/index.ts +++ b/src/index.ts @@ -74,6 +74,7 @@ export * from "./time-slot-bar-week"; export * from "./time-slot-week-view"; export * from "./timeline"; export * from "./timepicker"; +export * from "./timetable"; export * from "./toast"; export * from "./toggle"; export * from "./tooltip"; diff --git a/src/timetable/index.ts b/src/timetable/index.ts new file mode 100644 index 000000000..7df3938bc --- /dev/null +++ b/src/timetable/index.ts @@ -0,0 +1,2 @@ +export * from "./timetable"; +export * from "./types"; From 56685cdfb61a22ecc0f14c78d18dcf4fb2b32ae0 Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Thu, 26 Sep 2024 14:01:54 +0800 Subject: [PATCH 05/17] [BOOKINGSG-6090-timetable][JZ|FY] Add stories and docs for TimeTable component --- stories/timetable/props-table.tsx | 367 ++++++++++++++++++++++++ stories/timetable/timetable.mdx | 60 ++++ stories/timetable/timetable.stories.tsx | 351 ++++++++++++++++++++++ 3 files changed, 778 insertions(+) create mode 100644 stories/timetable/props-table.tsx create mode 100644 stories/timetable/timetable.mdx create mode 100644 stories/timetable/timetable.stories.tsx diff --git a/stories/timetable/props-table.tsx b/stories/timetable/props-table.tsx new file mode 100644 index 000000000..855c6ffa5 --- /dev/null +++ b/stories/timetable/props-table.tsx @@ -0,0 +1,367 @@ +import { ApiTable } from "../storybook-common/api-table"; +import { ApiTableSectionProps } from "../storybook-common/api-table/types"; + +const DATA: ApiTableSectionProps[] = [ + { + name: "TimeTableProps", + attributes: [ + { + name: "date", + mandatory: true, + description: ( + <> + The date string to display, any format that is + acceptable by Dayjswill work. + + ), + propTypes: ["string"], + }, + { + name: "emptyContent", + mandatory: true, + description: ( + <> + The props to determine what this component should render + if there is no content. Note that it is determined as + empty when totalRecords=0or + rowData=[]. + + ), + propTypes: ["EmptyContentProps"], + }, + { + name: "rowData", + mandatory: true, + description: "The data used to render each unique rows", + propTypes: ["RowData[]"], + }, + { + name: "isLoading", + mandatory: true, + description: + "The loading toggle to render the loading animation.", + propTypes: ["boolean"], + }, + { + name: "minTime", + description: + "The start time of this time table in HH:mm format.", + propTypes: ["string"], + }, + { + name: "maxTime", + description: "The end time of this time table in HH:mm format.", + propTypes: ["string"], + }, + { + name: "minDate", + description: "The minimum date allowed for date navigation.", + propTypes: ["string"], + }, + { + name: "maxDate", + description: "The maximum date allowed for date navigation,", + propTypes: ["string"], + }, + { + name: "totalRecords", + description: ( + <> + To display the total number of records and also to let + this component know when it is fully loaded.
+ Note: Total records section will not be rendered + if this prop is not passed in. + + ), + propTypes: ["number"], + }, + { + name: "width", + description: "The width of this time table component.", + propTypes: ["string"], + }, + { + name: "height", + description: "The height of this time table component.", + propTypes: ["string"], + }, + { + name: "outsideOpHoursCellCustomPopover", + description: ( + <> + The props for rendering any custom popover for the + automatically filled blockedcells. + + ), + propTypes: ["CustomPopoverProps"], + }, + { + name: "onRefresh", + description: ( + <> + The callback function to trigger when the refresh button + is clicked.
+ Note: Refresh button will not be rendered if this + prop is not passed in. + + ), + propTypes: ["() => void"], + }, + { + name: "onPage", + description: + "The callback function to trigger when pagination happens.", + propTypes: ["() => void"], + }, + { + name: "onLeftArrowClick", + description: ( + <> + The callback function to trigger when the left arrow has + been clicked on the date navigator component. +
+ Note: Arrow button will not be rendered if this + prop is not passed in. + + ), + propTypes: ["(currentDate: string) => void"], + }, + { + name: "onRightArrowClick", + description: ( + <> + The callback function to trigger when the right arrow + has been clicked on the date navigator component. +
+ Note: Arrow button will not be rendered if this + prop is not passed in. + + ), + propTypes: ["(currentDate: string) => void"], + }, + { + name: "onNameClick", + description: + "The callback function to trigger when the row header name has been clicked.", + propTypes: ["(rowData: RowData, e: React.MouseEvent) => void"], + }, + { + name: "onCellClick", + description: + "The callback function to trigger when a cell has been clicked.", + propTypes: ["(data: RowCellData, e: React.MouseEvent) => void"], + }, + ], + }, + { + name: "EmptyContentProps", + attributes: [ + { + name: "description", + mandatory: true, + description: + "The description text to show when there is no content to display", + propTypes: ["string"], + }, + { + name: "illustrationScheme", + mandatory: true, + description: + "The scheme to use, which decides what image to display for empty content", + propTypes: [ + `"base"`, + `"bookingsg"`, + `"ccube"`, + `"rbs"`, + `"mylegacy"`, + ], + }, + ], + }, + { + name: "RowData", + attributes: [ + { + name: "id", + mandatory: true, + description: ( + <> + The identifier for this row. This can be useful if you + intend to utilise the onNameClickcallback, + as the RowDatawill get passed to the + callback. + + ), + propTypes: ["string"], + }, + { + name: "name", + mandatory: true, + description: "The row header name to be rendered.", + propTypes: ["string"], + }, + { + name: "rowCells", + mandatory: true, + description: + "The array of row cells to be rendered in this row of data.", + propTypes: ["RowCellData[]"], + }, + { + name: "subtitle", + description: "The row header subtitle to be rendered.", + propTypes: ["string", "JSX.Element"], + }, + { + name: "rowHeaderCustomPopover", + description: + "The props for rendering any custom popover for this row header", + propTypes: ["CustomPopoverProps"], + }, + { + name: "rowMinTime", + description: ( + <> + The starting time for this row in HH:mm format.
+ Defaults to minTimefrom + TimeTableProps.
+ This component will automatically fill + blockedcells fromminTimeto + this time. + + ), + propTypes: ["string"], + }, + { + name: "rowMaxTime", + description: ( + <> + The ending time for this row in HH:mm format.
+ Defaults to maxTimefrom + TimeTableProps.
+ This component will automatically fill + blockedcells tillmaxTimefrom + this time. + + ), + propTypes: ["string"], + }, + ], + }, + { + name: "RowCellData", + attributes: [ + { + name: "id", + mandatory: true, + description: ( + <> + The identifier for this cell. This can be useful if you + intend to utilise the onCellClickcallback, + as the RowCellDatawill get passed to the + callback. + + ), + propTypes: ["string"], + }, + { + name: "startTime", + mandatory: true, + description: "The starting time of this cell. In HH:mm format.", + propTypes: ["string"], + }, + { + name: "endTime", + mandatory: true, + description: "The ending time of this cell. In HH:mm format.", + propTypes: ["string"], + }, + { + name: "status", + description: ( + <> + The status of this cell, which determines the style it + will be rendered in. +
+ NOTE: undefined or blocked cells will have mouse + disabled hover interaction and will not trigger the + onCellClickcallback. + + ), + propTypes: [`"filled"`, `"blocked"`, `"default"`], + }, + { + name: "title", + description: "The title to show for this cell.", + propTypes: ["string"], + }, + { + name: "subtitle", + description: "The subtitle to show for this cell.", + propTypes: ["string"], + }, + { + name: "customPopover", + description: ( + <> + The props for rendering any custom popover for the cell. +
+ Warning: Ensure that there is no conflict when + handlingonClickcallback and a popover + trigger=click for this cell. + + ), + propTypes: ["CustomPopoverProps"], + }, + ], + }, + { + name: "CustomPopoverProps", + attributes: [ + { + name: "trigger", + mandatory: true, + description: "The interaction to trigger the popover.", + propTypes: [`"click"`, `"hover"`], + }, + { + name: "content", + mandatory: true, + description: "The content to be rendered within the popover.", + propTypes: ["string", "JSX.Element"], + }, + { + name: "width", + description: + "The custom width for this popover, can be in any units (px/rem..)", + propTypes: ["string"], + }, + { + name: "padding", + description: + "The custom padding for this popover, can be in any units (px/rem..)", + propTypes: ["string"], + }, + { + name: "delay", + description: ( + <> + The delay for the popover to appear upon hover in + milliseconds.
+ Note: This delay only applies for when the + trigger type is of typehover. + + ), + propTypes: ["{ open: number, close: number }"], + }, + { + name: "offset", + description: + "How much offset (in px) to apply for the popover.", + propTypes: ["number"], + }, + ], + }, +]; + +export const PropsTable = () => ; diff --git a/stories/timetable/timetable.mdx b/stories/timetable/timetable.mdx new file mode 100644 index 000000000..f2d76f195 --- /dev/null +++ b/stories/timetable/timetable.mdx @@ -0,0 +1,60 @@ +import { Canvas, Meta } from "@storybook/blocks"; +import { Heading3, Secondary, Title } from "../storybook-common"; +import * as TimeTableStories from "./timetable.stories"; +import { PropsTable } from "./props-table"; + + + +TimeTable + +Overview + +A component that displays a timetable to view a schedule for a specific day + +```tsx +import { TimeTable } from "@lifesg/react-design-system/timetable"; +``` + + + +TimeTable with navigation arrows +The timetable is using the `DateNavigator` component when `onRightArrowClick` and +`onLeftArrowClick` props are passed in. + +You may use `minDate` and `maxDate` to specify +how far in the future or past the timetable can be viewed until. + +_(In this example, +the user can only view the timetable 2 days before today and 2 days after today)_ + + + +Lazy Load + +Clicking onto the refresh icon on the top left-hand corner will trigger a refresh on the component level. + +Lazy load is also enabled if `onPage` callback is passed in + + + +Customisable popover width and padding + +You may choose to customise the padding and width of the popover for filled and disabled cells through `filledCellPopoverSize` and `blockedCellPopoverSize` respectively + +Do note that if the custom popover trigger is set to click, it will override the behaviour with the onClick callback for each cell + + + +TimeTable with no popover content + +If there's no `blockedCellHoverContent` or `filledBlockClickContent` provided, the popover will not appear + + + +No results found + + + +Component API + + diff --git a/stories/timetable/timetable.stories.tsx b/stories/timetable/timetable.stories.tsx new file mode 100644 index 000000000..359ef9676 --- /dev/null +++ b/stories/timetable/timetable.stories.tsx @@ -0,0 +1,351 @@ +import { PinIcon } from "@lifesg/react-icons"; +import type { Meta, StoryObj } from "@storybook/react"; +import dayjs from "dayjs"; +import { useEffect, useState } from "react"; +import { Color, PopoverV2TriggerType, Text } from "../../src"; +import { TimeTable } from "../../src/timetable/timetable"; +import { RowCellData, RowData } from "../../src/timetable/types"; +import { StyledHoverContent, getTimeTableData, lazyLoad } from "./mock-data"; + +type Component = typeof TimeTable; + +const meta: Meta = { + title: "Modules/TimeTable", + component: TimeTable, +}; + +export default meta; + +export const Default: StoryObj = { + render: () => { + return ( + <> + + + ); + }, +}; + +export const TimeTableWithNavigation: StoryObj = { + render: () => { + const timeTableData = getTimeTableData(); + + const [results, setResults] = useState(getTimeTableData().rowData); + const [date, setDate] = useState(timeTableData.date); + const [loading, setLoading] = useState(timeTableData.isLoading); + + const onLeftArrowClick = (currentDate: string) => { + const newDate = dayjs(currentDate) + .add(-1, "day") + .format("YYYY-MM-DD"); + setDate(newDate); + setLoading(true); + setTimeout(() => { + setResults(getTimeTableData(newDate).rowData); + setLoading(false); + }, 1000); + }; + + const onRightArrowClick = (currentDate: string) => { + const newDate = dayjs(currentDate) + .add(1, "day") + .format("YYYY-MM-DD"); + setDate(newDate); + setLoading(true); + setTimeout(() => { + setResults(getTimeTableData(newDate).rowData); + setLoading(false); + }, 1000); + }; + + const onCellClick = (data: RowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }; + + return ( + <> + + + ); + }, +}; + +export const TimeTableWithLazyLoad: StoryObj = { + render: () => { + const timeTableData = getTimeTableData(); + const [results, setResults] = useState([]); + const [date, setDate] = useState(timeTableData.date); + const [loading, setLoading] = useState(false); + const [page, setPage] = useState(1); + + useEffect(() => { + setTimeout(() => { + const results = lazyLoad(page); + setResults((prev) => [...prev, ...results]); + }, 2000); + }, [page]); + + const onLeftArrowClick = (currentDate: string) => { + const newDate = dayjs(currentDate) + .add(-1, "day") + .format("YYYY-MM-DD"); + setDate(newDate); + setLoading(true); + setTimeout(() => { + setResults(lazyLoad(1)); + setLoading(false); + }, 1000); + }; + + const onRightArrowClick = (currentDate: string) => { + const newDate = dayjs(currentDate) + .add(1, "day") + .format("YYYY-MM-DD"); + setDate(newDate); + setLoading(true); + setTimeout(() => { + setResults(lazyLoad(1)); + setLoading(false); + }, 1000); + }; + + const onRefresh = () => { + setLoading(true); + setTimeout(() => { + setResults(lazyLoad(1)); + setLoading(false); + }, 5000); + }; + + const onCellClick = (data: RowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }; + + return ( + <> + setPage(page + 1)} + totalRecords={50} + onCellClick={onCellClick} + onRightArrowClick={onRightArrowClick} + onLeftArrowClick={onLeftArrowClick} + /> + + ); + }, +}; + +export const TimeTableWithNoPopoverContent: StoryObj = { + render: () => { + const onCellClick = (data: RowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }; + return ( + <> + + + ); + }, +}; + +export const TimeTableWithStyledPopovers: StoryObj = { + render: () => { + const onCellClick = (data: RowCellData) => { + if (data.status === "filled") return; + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }; + + const onNameClick = (rowData: RowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }; + + const buildCustomPopover = (row: RowData, cell: RowCellData) => { + switch (cell.status) { + case "filled": { + return { + customPopover: { + trigger: "hover" as PopoverV2TriggerType, + content: ( +
+
+ + {row.name} + + + {dayjs().format("D MMM YYYY, ddd")}{" "} + {`${dayjs( + cell.startTime, + "HH:mm" + ).format("HH:mma")} - ${dayjs( + cell.endTime, + "HH:mm" + ).format("HH:mma")}`} + +
+ +
+ + Booking title + + {cell.title} +
+
+ ), + width: "400px", + padding: "3rem", + offset: 0, + delay: { open: 1250, close: 1250 }, + }, + }; + } + case "default": { + return { + customPopover: { + trigger: "hover" as PopoverV2TriggerType, + content: "Available", + offset: 0, + delay: { open: 0, close: 0 }, + }, + }; + } + } + }; + + const rowData = getTimeTableData().rowData.map((row) => { + return { + ...row, + rowHeaderCustomPopover: { + trigger: "hover" as PopoverV2TriggerType, + content: ( + <> + {row.name} + + + Eclipse + + + ), + offset: 0, + delay: { open: 500, close: 0 }, + }, + outsideOpHoursCellCustomPopover: { + trigger: "hover" as PopoverV2TriggerType, + content: "Outside operating hours", + offset: 0, + delay: { open: 0, close: 0 }, + }, + rowCells: row.rowCells.map((cell) => { + return { + ...cell, + ...buildCustomPopover(row, cell), + }; + }), + }; + }); + + return ( + <> + + + ); + }, +}; + +export const TimeTableWithEmptyContent: StoryObj = { + render: () => { + return ( + <> + + + ); + }, +}; From 162f24532f3cd0119db1b2fbe9bf27e4330d3165 Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Thu, 26 Sep 2024 14:02:19 +0800 Subject: [PATCH 06/17] [BOOKINGSG-6090-timetable][JZ|FY] Add tests for TimeTable --- tests/timetable/timetable.spec.tsx | 269 +++++++++++++++++++++++++++++ 1 file changed, 269 insertions(+) create mode 100644 tests/timetable/timetable.spec.tsx diff --git a/tests/timetable/timetable.spec.tsx b/tests/timetable/timetable.spec.tsx new file mode 100644 index 000000000..0844760fd --- /dev/null +++ b/tests/timetable/timetable.spec.tsx @@ -0,0 +1,269 @@ +import { act, fireEvent, render, screen } from "@testing-library/react"; +import dayjs from "dayjs"; +import { TimeTable } from "../../src/timetable/timetable"; +import { RowData, TimeTableProps } from "../../src/timetable/types"; +import { lazyLoad } from "../../stories/timetable/mock-data"; + +describe("TimeTable", () => { + const date = dayjs("2024-09-11"); + + const timeTableMockData = { + date: date.format("YYYY-MM-DD"), + minTime: "06:20:00", + maxTime: "22:00:00", + maxDate: date.add(1, "month").format("YYYY-MM-DD"), + minDate: date.add(-11, "month").format("YYYY-MM-DD"), + totalRecords: 10, + rowData: [], + onNameClick: function (rowData: RowData): void { + alert(`Clicked on ${JSON.stringify(rowData)}`); + }, + emptyContent: { + illustrationScheme: "bookingsg", + description: + "There’s no data to show. You may need to adjust your search or filters. If you believe this is a mistake, try refreshing the page.", + }, + isLoading: false, + } as TimeTableProps; + + beforeEach(() => { + jest.resetAllMocks(); + jest.useFakeTimers().setSystemTime(new Date("2024-09-11")); + + global.ResizeObserver = jest.fn().mockImplementation(() => ({ + observe: jest.fn(), + unobserve: jest.fn(), + disconnect: jest.fn(), + })); + }); + + afterEach(() => { + jest.useRealTimers(); + }); + + it("should render default timetable without errors", () => { + render( + + ); + expect(screen.getByText("11 September 2024")).toBeVisible(); + }); + + it("should have date navigator component visible if onRightArrowClick and onLeftArrowClick props are passed in", () => { + const onRightArrowClick = jest.fn(); + const onLeftArrowClick = jest.fn(); + + render( + + ); + const leftBtn = screen.getByTestId("date-navigator-left-arrow-btn"); + const rightBtn = screen.getByTestId("date-navigator-right-arrow-btn"); + expect(screen.getByText("11 September 2024")).toBeVisible(); + expect(leftBtn).toBeVisible(); + expect(rightBtn).toBeVisible(); + }); + + it("should not have have popover appear if there's no popover content", () => { + render( + + ); + const rowHeaderParent = screen.getByTestId("row-header-column-id"); + const firstRowHeader = rowHeaderParent.firstElementChild; + + const contentContainer = screen.getByTestId("content-container-id"); + const firstRowBar = contentContainer.firstElementChild; + const blockedCell = firstRowBar.children[0]; + const filledCell = firstRowBar.children[1]; + + fireEvent.mouseOver(firstRowHeader); + expect( + screen.queryByTestId("row-header-popover-card") + ).not.toBeInTheDocument(); + + fireEvent.mouseOver(blockedCell); + expect( + screen.queryByTestId("blocked-popover-card") + ).not.toBeInTheDocument(); + + fireEvent.mouseOver(filledCell); + expect( + screen.queryByTestId("filled-popover-card") + ).not.toBeInTheDocument(); + }); + + it("should have popover appear if there's popover content", () => { + render( + + ); + const rowHeaderParent = screen.getByTestId("row-header-column-id"); + const firstRowHeader = rowHeaderParent.firstElementChild; + const contentContainer = screen.getByTestId("content-container-id"); + const firstRowBar = contentContainer.firstElementChild; + const blockedCell = firstRowBar.children[0]; + const filledCell = firstRowBar.children[1]; + + fireEvent.mouseEnter(firstRowHeader); + expect(screen.queryByText("hello world123")).toBeVisible(); + expect( + screen.queryByTestId("row-header-popover-card") + ).toBeInTheDocument(); + + fireEvent.mouseEnter(blockedCell); + expect(screen.queryByText("skibididiidi ohio")).toBeVisible(); + expect( + screen.queryByTestId("blocked-popover-card") + ).toBeInTheDocument(); + + fireEvent.mouseEnter(filledCell); + expect(screen.queryByText("beeeboobeebooo")).toBeVisible(); + expect( + screen.queryByTestId("blocked-popover-card") + ).toBeInTheDocument(); + }); + + it("should trigger onNameClick if row header name are clicked", () => { + const onNameClick = jest.fn(); + + render( + + ); + const rowHeaderName = screen.getByTestId("1-row-header-title"); + + fireEvent.click(rowHeaderName); + expect(onNameClick).toHaveBeenCalledTimes(1); + }); + + it("should have show empty content display if no rowData is passed into TimeTable", () => { + render( + + ); + const emptyContent = screen.getByTestId("error-display"); + expect(screen.getByText("No results found")).toBeVisible(); + expect(emptyContent).toBeVisible(); + }); + + it("should have lazy load and a lazy loader should appear when user scrolls to the bottom of the TimeTable", async () => { + render( + lazyLoad(2)} + /> + ); + const container = screen.getByTestId("timetable-container-id"); + expect(screen.queryByTestId("lazy-loader")).toBeNull(); + + // Scroll to the bottom of the container + act(() => { + container.scrollTop = container.scrollHeight; + container.dispatchEvent(new Event("scroll")); // Trigger scroll event + }); + + expect(await screen.findByTestId("lazy-loader")).toBeInTheDocument(); + }); +}); From e3ad33a691ba763874d63c1ae328b1706e226b69 Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Thu, 3 Oct 2024 17:41:54 +0800 Subject: [PATCH 07/17] [BOOKINGSG-6090-timetable][JZ] Apply PR comments --- src/popover-v2/popover-trigger.tsx | 8 +- src/popover-v2/types.ts | 6 +- src/timetable/const.ts | 10 + src/timetable/timetable-row/row-bar.tsx | 27 +- .../timetable-row/row-cell.style.tsx | 16 +- src/timetable/timetable-row/row-cell.tsx | 18 +- src/timetable/timetable.style.tsx | 23 +- src/timetable/timetable.tsx | 89 +- src/timetable/types.ts | 67 +- stories/timetable/mock-data.tsx | 89 +- stories/timetable/new-even-days.tsx | 1772 +++++++++++ stories/timetable/new-odd-days.tsx | 2652 +++++++++++++++++ stories/timetable/props-table.tsx | 50 +- stories/timetable/timetable.stories.tsx | 181 +- tests/timetable/timetable.spec.tsx | 20 +- 15 files changed, 4662 insertions(+), 366 deletions(-) create mode 100644 src/timetable/const.ts create mode 100644 stories/timetable/new-even-days.tsx create mode 100644 stories/timetable/new-odd-days.tsx diff --git a/src/popover-v2/popover-trigger.tsx b/src/popover-v2/popover-trigger.tsx index cff9842c8..83152e2c8 100644 --- a/src/popover-v2/popover-trigger.tsx +++ b/src/popover-v2/popover-trigger.tsx @@ -27,6 +27,8 @@ export const PopoverTrigger = ({ position = "top", zIndex, rootNode, + customOffset, + delay, onPopoverAppear, onPopoverDismiss, ...otherProps @@ -45,7 +47,7 @@ export const PopoverTrigger = ({ placement: position, whileElementsMounted: autoUpdate, middleware: [ - offset(otherProps.offset ?? 16), + offset(customOffset ?? 16), flip(), shift({ limiter: limitShift(), @@ -72,8 +74,8 @@ export const PopoverTrigger = ({ enabled: trigger === "hover", // short window to enter the floating element without it closing delay: { - open: otherProps?.delay?.open ?? 0, - close: otherProps?.delay?.close ?? 500, + open: delay?.open ?? 0, + close: delay?.close ?? 500, }, }); diff --git a/src/popover-v2/types.ts b/src/popover-v2/types.ts index 37555e6f7..6460c2e47 100644 --- a/src/popover-v2/types.ts +++ b/src/popover-v2/types.ts @@ -33,9 +33,11 @@ export interface PopoverV2TriggerProps { * the popover may not be visible. Specify the parent element here instead */ rootNode?: RefObject | undefined; - offset?: number | undefined; + customOffset?: number | undefined; // in milliseconds - delay?: { open: number; close: number } | undefined; + delay?: + | { open?: number | undefined; close?: number | undefined } + | undefined; onPopoverAppear?: (() => void) | undefined; onPopoverDismiss?: (() => void) | undefined; } diff --git a/src/timetable/const.ts b/src/timetable/const.ts new file mode 100644 index 000000000..872a49406 --- /dev/null +++ b/src/timetable/const.ts @@ -0,0 +1,10 @@ +export const ROW_BAR_COLOR_SEQUENCE = [ + "#FFE6BB", + "#D8EFEB", + "#E6EAFE", + "#FAE4E5", + "#D3EEFC", +] as const; // Assert to be a readonly tuple +export const ROW_CELL_GAP = 2; +export const ROW_INTERVAL = 15; +export type RowBarColors = (typeof ROW_BAR_COLOR_SEQUENCE)[number]; diff --git a/src/timetable/timetable-row/row-bar.tsx b/src/timetable/timetable-row/row-bar.tsx index b86a5bdd8..34e753dc5 100644 --- a/src/timetable/timetable-row/row-bar.tsx +++ b/src/timetable/timetable-row/row-bar.tsx @@ -1,23 +1,21 @@ import dayjs from "dayjs"; import { MutableRefObject } from "react"; +import { RowBarColors } from "../const"; import { CustomPopoverProps, - RowBarColors, - RowCellData, - RowData, + TimeTableRowCellData, + TimeTableRowData, } from "../types"; import { RowCellContainer } from "./row-bar.style"; import { RowCell } from "./row-cell"; -interface RowBarProps extends RowData { +interface RowBarProps extends TimeTableRowData { timetableMinTime: string; timetableMaxTime: string; intervalWidth: number; containerRef: MutableRefObject; rowBarColor: RowBarColors; outsideOpHoursCellCustomPopover?: CustomPopoverProps | undefined; - "data-testid"?: string | undefined; - onCellClick?: (data: RowCellData, e: React.MouseEvent) => void; } export const RowBar = ({ @@ -30,12 +28,14 @@ export const RowBar = ({ rowBarColor, intervalWidth, containerRef, - ...optionalProps + outsideOpHoursCellCustomPopover, + ...otherProps }: RowBarProps) => { // ============================================================================= // CONST, STATE, REF // ============================================================================= - const rowCellArray: RowCellData[] = []; + const testId = otherProps["data-testid"] || `${id}-row`; + const rowCellArray: TimeTableRowCellData[] = []; // =========================================================================== // HELPER FUNCTIONS @@ -55,7 +55,7 @@ export const RowBar = ({ startTime: timetableMinTime, endTime: rowMinTime, status: "blocked", - customPopover: optionalProps.outsideOpHoursCellCustomPopover, + customPopover: outsideOpHoursCellCustomPopover, }); } @@ -77,7 +77,7 @@ export const RowBar = ({ id, startTime: curr.format("HH:mm").toString(), endTime: nextHour.format("HH:mm").toString(), - status: undefined, + status: "disabled", }); curr = nextHour; } else { @@ -85,7 +85,7 @@ export const RowBar = ({ id, startTime: curr.format("HH:mm").toString(), endTime: nextSlotStartTime.format("HH:mm").toString(), - status: undefined, + status: "disabled", }); curr = nextSlotStartTime; } @@ -99,12 +99,12 @@ export const RowBar = ({ startTime: rowMaxTime, endTime: timetableMaxTime, status: "blocked", - customPopover: optionalProps.outsideOpHoursCellCustomPopover, + customPopover: outsideOpHoursCellCustomPopover, }); } return ( - + {rowCellArray.map((cell, index) => { return ( ); })} diff --git a/src/timetable/timetable-row/row-cell.style.tsx b/src/timetable/timetable-row/row-cell.style.tsx index d60440e05..0eaad2eb3 100644 --- a/src/timetable/timetable-row/row-cell.style.tsx +++ b/src/timetable/timetable-row/row-cell.style.tsx @@ -9,7 +9,7 @@ interface BlockStyleProps { $width: number; $status: CellType; $bgColour: string; - $clickableCell?: boolean; + $isClickable?: boolean; } interface BlockContainerProps { @@ -45,7 +45,7 @@ export const Block = styled.div` border-radius: 4px; box-sizing: border-box; padding: 4px; - ${({ $status, $bgColour, $clickableCell }) => { + ${({ $status, $bgColour, $isClickable }) => { switch ($status) { case "blocked": return css` @@ -55,27 +55,27 @@ export const Block = styled.div` #ecefef 6px 12px ); &:hover { - cursor: ${$clickableCell ? "pointer" : "not-allowed"}; + cursor: ${$isClickable ? "pointer" : "not-allowed"}; } `; case "filled": return css` background: ${$bgColour}; &:hover { - cursor: ${$clickableCell ? "pointer" : "default"}; + cursor: ${$isClickable ? "pointer" : "default"}; } `; - case "default": + case "disabled": return css` + background: ${Color.Neutral[6]}; &:hover { - cursor: ${$clickableCell ? "pointer" : "default"}; + cursor: ${$isClickable ? "pointer" : "not-allowed"}; } `; default: return css` - background: ${Color.Neutral[6]}; &:hover { - cursor: not-allowed; + cursor: ${$isClickable ? "pointer" : "default"}; } `; } diff --git a/src/timetable/timetable-row/row-cell.tsx b/src/timetable/timetable-row/row-cell.tsx index 26baa103e..5b78ffd46 100644 --- a/src/timetable/timetable-row/row-cell.tsx +++ b/src/timetable/timetable-row/row-cell.tsx @@ -2,7 +2,8 @@ import dayjs from "dayjs"; import React, { MutableRefObject } from "react"; import { PopoverTrigger, PopoverV2TriggerProps } from "../../popover-v2"; import { DateHelper } from "../../util"; -import { ROW_CELL_GAP, ROW_INTERVAL, RowCellData } from "../types"; +import { ROW_CELL_GAP, ROW_INTERVAL } from "../const"; +import { TimeTableRowCellData } from "../types"; import { Block, BlockContainer, @@ -13,11 +14,10 @@ import { Wrapper, } from "./row-cell.style"; -interface RowCellProps extends RowCellData { +interface RowCellProps extends TimeTableRowCellData { containerRef: MutableRefObject; intervalWidth: number; rowBarColor: string; - onCellClick?: (data: RowCellData, e: React.MouseEvent) => void; } const Component = ({ @@ -31,7 +31,7 @@ const Component = ({ rowBarColor, containerRef, customPopover, - onCellClick, + onClick, }: RowCellProps) => { // ============================================================================= // CONST, STATE, REF @@ -44,13 +44,15 @@ const Component = ({ const adjustedCellWidth = isNotAvailable ? totalCellWidth - ROW_CELL_GAP : totalCellWidth; + const isClickable = + !!onClick || (customPopover && customPopover.trigger === "click"); // ============================================================================= // EVENT HANDLERS // ============================================================================= const handleCellClick = (event: React.MouseEvent) => { - if (status && status !== "blocked" && onCellClick) { - onCellClick( + if (onClick) { + onClick( { id, startTime, @@ -99,7 +101,7 @@ const Component = ({ const popoverTriggerProps: PopoverV2TriggerProps = { position: "bottom-start", rootNode: containerRef, - offset: customPopover.offset, + customOffset: customPopover.offset, children: child, trigger: customPopover.trigger, delay: customPopover.delay, @@ -125,7 +127,7 @@ const Component = ({ $width={adjustedCellWidth} $status={status} $bgColour={rowBarColor} - $clickableCell={!!handleCellClick && !!customPopover} + $isClickable={isClickable} onClick={handleCellClick} > {title && ( diff --git a/src/timetable/timetable.style.tsx b/src/timetable/timetable.style.tsx index e316d8230..90e712111 100644 --- a/src/timetable/timetable.style.tsx +++ b/src/timetable/timetable.style.tsx @@ -17,16 +17,9 @@ interface RowHeaderColumnProps { interface TimeTableContainerProps { $loading: boolean; - $width: string; - $height: string; $allRecordsLoaded: boolean; } -interface EmptyTableContainerProps { - $width: string; - $height: string; -} - interface RowColumnHeaderProps { $isScrolledY: boolean; $isScrolledX: boolean; @@ -48,17 +41,19 @@ interface LoaderProps { $isEmptyContent: boolean; } -export const EmptyTableContainer = styled.div` +export const EmptyTableContainer = styled.div` display: grid; + overflow: scroll; + position: relative; grid-template-columns: 252px auto; - min-height: 600px; // REVIEW - min-width: 1000px; // REVIEW - height: ${(props) => props.$height}; - width: ${(props) => props.$width}; `; export const EmptyTableRowHeader = styled.div` display: flex; + position: sticky; + top: 0; + background-color: white; + z-index: 1; height: fit-content; grid-column: 1 / -1; border-bottom: 1px solid ${Color.Neutral[5]}; @@ -69,11 +64,7 @@ export const TimeTableContainer = styled.div` overflow: scroll; position: relative; grid-template-columns: 252px fit-content(100%); - height: ${(props) => props.$height}; - width: ${(props) => props.$width}; padding-bottom: ${(props) => (props.$allRecordsLoaded ? "0" : "128px")}; - min-height: 600px; // REVIEW - min-width: 900px; // REVIEW ${(props) => { if (props.$loading) { return css` diff --git a/src/timetable/timetable.tsx b/src/timetable/timetable.tsx index 6f3693e3c..cc7c7760f 100644 --- a/src/timetable/timetable.tsx +++ b/src/timetable/timetable.tsx @@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react"; import { useResizeDetector } from "react-resize-detector"; import { PopoverV2TriggerProps } from "../popover-v2"; import { CalendarHelper } from "../util"; +import { ROW_BAR_COLOR_SEQUENCE, ROW_INTERVAL } from "./const"; import { TimeTableNavigator } from "./timetable-navigator/timetable-navigator"; import { RowBar } from "./timetable-row/row-bar"; import { StyledPopoverContent } from "./timetable-row/row-cell.style"; @@ -26,35 +27,36 @@ import { StyledPopoverTrigger, TimeTableContainer, } from "./timetable.style"; -import { - CustomPopoverProps, - ROW_BAR_COLOR_SEQUENCE, - ROW_INTERVAL, - RowData, - TimeTableProps, -} from "./types"; +import { CustomPopoverProps, TimeTableProps, TimeTableRowData } from "./types"; export const TimeTable = ({ date, + emptyContent, rowData, isLoading, minTime = "00:00", maxTime = "23:00", + minDate, + maxDate, + totalRecords, onPage, - ...optionalProps -}: TimeTableProps) => { + onRefresh, + onNextDayClick, + onPreviousDayClick, + ...otherProps +}: TimeTableProps): JSX.Element => { // ============================================================================= // CONST, STATE, REF // ============================================================================= + const testId = otherProps["data-testid"] || "timetable-container-id"; const timetableMinTime = CalendarHelper.roundToNearestHour(minTime); const timetableMaxTime = CalendarHelper.roundToNearestHour(maxTime, true); const hourlyIntervals = CalendarHelper.generateHourlyIntervals( timetableMinTime, timetableMaxTime ); - const isEmptyContent = optionalProps.totalRecords === 0 || isEmpty(rowData); - const allRecordsLoaded = - isEmptyContent || rowData.length === optionalProps.totalRecords; + const isEmptyContent = totalRecords === 0 || isEmpty(rowData); + const allRecordsLoaded = isEmptyContent || rowData.length === totalRecords; const tableContainerRef = useRef(null); const contentContainerRef = useRef(null); const [isScrolledX, setIsScrolledX] = useState(false); @@ -65,7 +67,6 @@ export const TimeTable = ({ // ============================================================================= // EFFECTS // ============================================================================= - useEffect(() => { const handleScroll = throttle(() => { if (tableContainerRef.current) { @@ -130,9 +131,12 @@ export const TimeTable = ({ refreshRate: 50, }); - const handleRowNameClick = (data: RowData, event: React.MouseEvent) => { - if (optionalProps.onNameClick) { - optionalProps.onNameClick(data, event); + const handleRowNameClick = ( + data: TimeTableRowData, + event: React.MouseEvent + ) => { + if (data.onRowNameClick) { + data.onRowNameClick(data, event); } }; @@ -166,7 +170,10 @@ export const TimeTable = ({ ); }; - const buildPopoverTrigger = (data: RowData, child: JSX.Element) => { + const buildPopoverTrigger = ( + data: TimeTableRowData, + child: JSX.Element + ) => { if (!data.rowHeaderCustomPopover) { return child; } @@ -174,7 +181,7 @@ export const TimeTable = ({ const popoverTriggerProps: PopoverV2TriggerProps = { position: "bottom-start", rootNode: tableContainerRef, - offset: data.rowHeaderCustomPopover.offset, + customOffset: data.rowHeaderCustomPopover.offset, children: child, trigger: data.rowHeaderCustomPopover.trigger, delay: data.rowHeaderCustomPopover.delay, @@ -223,12 +230,11 @@ export const TimeTable = ({ key={`${data.id}-row-header`} > handleRowNameClick(data, event) } weight="semibold" - id={`${data.id}-row-header-title-id`} data-testid={`${data.id}-row-header-title`} > {data.name} @@ -237,7 +243,6 @@ export const TimeTable = ({ {data.subtitle} @@ -266,7 +271,6 @@ export const TimeTable = ({ return ( @@ -285,20 +289,15 @@ export const TimeTable = ({ ref={contentContainerRef} $numOfRows={rowData.length} > - {rowData.map((data, _) => { + {rowData.map((data, index) => { return ( ); @@ -326,26 +325,25 @@ export const TimeTable = ({ if (isEmptyContent) { return ( - + {!isLoading ? ( ) : ( @@ -357,11 +355,9 @@ export const TimeTable = ({ return ( void) + | undefined; } export interface CustomPopoverProps { @@ -35,41 +29,44 @@ export interface CustomPopoverProps { content: string | JSX.Element; width?: string | undefined; padding?: string | undefined; - delay?: { open: number; close: number } | undefined; + delay?: + | { open?: number | undefined; close?: number | undefined } + | undefined; offset?: number | undefined; } export interface TimeTableProps { + id?: string | undefined; + className?: string | undefined; + "data-testid"?: string | undefined; date: string; - emptyContent: EmptyContentProps; - rowData: RowData[]; - isLoading: boolean; + emptyContent?: EmptyContentProps | undefined; + rowData: TimeTableRowData[]; + isLoading?: boolean | undefined; // HH:mm format - minTime?: string; + minTime?: string | undefined; // HH:mm format - maxTime?: string; + maxTime?: string | undefined; minDate?: string | undefined; maxDate?: string | undefined; totalRecords?: number | undefined; - width?: string | undefined; - height?: string | undefined; - outsideOpHoursCellCustomPopover?: CustomPopoverProps | undefined; - onRefresh?: () => void; - onPage?: () => void; - onLeftArrowClick?: (currentDate: string) => void; - onRightArrowClick?: (currentDate: string) => void; - onNameClick?: (rowData: RowData, e: React.MouseEvent) => void; - onCellClick?: (data: RowCellData, e: React.MouseEvent) => void; + onRefresh?: (() => void) | undefined; + onPage?: (() => void) | undefined; + onPreviousDayClick?: ((currentDate: string) => void) | undefined; + onNextDayClick?: ((currentDate: string) => void) | undefined; } -export interface RowCellData { - id: string; +export interface TimeTableRowCellData { + id?: string | undefined; // HH:mm format startTime: string; // HH:mm format endTime: string; - status?: CellType | undefined; + status: CellType; title?: string | undefined; subtitle?: string | undefined; customPopover?: CustomPopoverProps | undefined; + onClick?: + | ((data: TimeTableRowCellData, e: React.MouseEvent) => void) + | undefined; } diff --git a/stories/timetable/mock-data.tsx b/stories/timetable/mock-data.tsx index d57146fdb..0abda2549 100644 --- a/stories/timetable/mock-data.tsx +++ b/stories/timetable/mock-data.tsx @@ -1,11 +1,10 @@ import { Person2Icon, PinIcon } from "@lifesg/react-icons"; import dayjs, { Dayjs } from "dayjs"; import styled from "styled-components"; -import { Color } from "../../src/color"; import { Text } from "../../src/text"; import { CellType, TimeTableProps } from "../../src/timetable/types"; -import timeTableEvenDays from "./timetable-data-even-days.json"; -import timeTableOddDays from "./timetable-data-odd-days.json"; +import { evenDaysData } from "./new-even-days"; +import { oddDaysData } from "./new-odd-days"; import lazyLoadData from "./timetable-lazy-load-data.json"; export const StyledHoverContent = styled.div` @@ -20,37 +19,12 @@ const cellTypeMap: Record = { DEFAULT: "default", }; -const mapper = (resource) => { - return { - id: resource.id, - name: resource.title, - rowMinTime: resource.timelines[0].startTime, - rowMaxTime: resource.timelines[0].endTime, - subtitle: ( - <> - - {resource.capacity} - - ), - rowCells: resource.timelines[0].slots.map((slot) => { - return { - id: slot.id, - startTime: slot.startTime, - endTime: slot.endTime, - title: slot.title, - subtitle: slot.label, - status: cellTypeMap[slot.status], - }; - }), - }; -}; - const fetchRowData = (date: Dayjs) => { const isEven = date.day() % 2 === 0; if (isEven) { - return timeTableEvenDays.resources.map((resource) => mapper(resource)); + return evenDaysData; } - return timeTableOddDays.resources.map((resource) => mapper(resource)); + return oddDaysData; }; export const getTimeTableData = (currentDate?: string): TimeTableProps => { @@ -111,61 +85,6 @@ export const lazyLoad = (page: number) => { title: slot.label, subtitle: slot.label, status: cellTypeMap[slot.status], - ...(slot.status === "OCCUPIED" && { - filledBlockClickContent: ( -
-
- - {resource.title} - - - {dayjs().format("D MMM YYYY, ddd")}{" "} - {`${dayjs( - slot.startTime, - "HH:mm" - ).format("HH:mma")} - ${dayjs( - slot.endTime, - "HH:mm" - ).format("HH:mma")}`} - -
- -
- - Booking title - - {slot.title} -
-
- ), - }), }; }), }; diff --git a/stories/timetable/new-even-days.tsx b/stories/timetable/new-even-days.tsx new file mode 100644 index 000000000..a2a4e5d5b --- /dev/null +++ b/stories/timetable/new-even-days.tsx @@ -0,0 +1,1772 @@ +import { Person2Icon } from "@lifesg/react-icons"; +import { CellType, TimeTableRowCellData, TimeTableRowData } from "../../src"; + +export const evenDaysData = [ + { + id: "Dy3E3RvQY0", + name: "2Hr-interval", + rowMinTime: "08:00:00", + rowMaxTime: "16:30:00", + subtitle: ( + <> + + {"8"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "Dy3E3RvQY0", + startTime: "08:00:00", + endTime: "08:15:00", + title: "booking title", + subtitle: "booking owner name", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3RvQY0", + startTime: "08:15:00", + endTime: "08:30:00", + title: "booking title", + subtitle: "booking owner name", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3RvQY0", + startTime: "08:30:00", + endTime: "08:45:00", + title: "booking title", + subtitle: "booking owner name", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3RvQY0", + startTime: "08:45:00", + endTime: "09:00:00", + title: "booking title", + subtitle: "booking owner name", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3RvQY0", + startTime: "09:30:00", + endTime: "10:30:00", + title: "booking title", + subtitle: "booking owner name", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3RvQY0", + startTime: "10:45:00", + endTime: "11:00:00", + title: "booking title", + subtitle: "booking owner name", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3RvQY0", + startTime: "11:00:00", + endTime: "11:30:00", + title: "booking title", + subtitle: "booking owner name", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3RvQY0", + startTime: "16:00:00", + endTime: "16:30:00", + title: "booking title", + subtitle: "booking owner name", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "ZlJQyXWP6z", + name: "4 Hr interval", + rowMinTime: "08:00:00", + rowMaxTime: "20:00:00", + subtitle: ( + <> + + {"16"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "ZlJQyXWP6z", + startTime: "08:00:00", + endTime: "12:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ZlJQyXWP6z", + startTime: "12:00:00", + endTime: "16:00:00", + title: "booking title", + subtitle: "booking owner name", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ZlJQyXWP6z", + startTime: "16:00:00", + endTime: "20:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "9znPmRxQBv", + name: "acs", + rowMinTime: "08:00:00", + rowMaxTime: "21:00:00", + subtitle: ( + <> + + {"4"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "9znPmRxQBv", + startTime: "08:00:00", + endTime: "09:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9znPmRxQBv", + startTime: "09:00:00", + endTime: "10:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9znPmRxQBv", + startTime: "10:00:00", + endTime: "11:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9znPmRxQBv", + startTime: "11:00:00", + endTime: "13:00:00", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9znPmRxQBv", + startTime: "13:00:00", + endTime: "14:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9znPmRxQBv", + startTime: "14:00:00", + endTime: "15:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9znPmRxQBv", + startTime: "15:00:00", + endTime: "16:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9znPmRxQBv", + startTime: "16:00:00", + endTime: "17:00:00", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9znPmRxQBv", + startTime: "17:00:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9znPmRxQBv", + startTime: "18:00:00", + endTime: "19:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9znPmRxQBv", + startTime: "19:00:00", + endTime: "20:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9znPmRxQBv", + startTime: "20:00:00", + endTime: "21:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "B8E79Z6Pbp", + name: "Fixed Session Resource1", + rowMinTime: "10:00", + rowMaxTime: "17:00", + subtitle: ( + <> + + {"3"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "B8E79Z6Pbp", + startTime: "10:00", + endTime: "12:00", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "B8E79Z6Pbp", + startTime: "15:00", + endTime: "17:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "bJxrj7JPqL", + name: "Apple", + rowMinTime: "08:00", + rowMaxTime: "18:00", + subtitle: ( + <> + + {"6"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "bJxrj7JPqL", + startTime: "08:00", + endTime: "08:30", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "08:30", + endTime: "09:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "09:00", + endTime: "09:30", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "09:30", + endTime: "10:00", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "10:00", + endTime: "10:30", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "10:30", + endTime: "11:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "13:00", + endTime: "13:30", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "13:30", + endTime: "14:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "14:00", + endTime: "14:30", + status: "blocked" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "14:30", + endTime: "15:00", + status: "blocked" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "15:00", + endTime: "15:30", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "15:30", + endTime: "16:00", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "16:00", + endTime: "16:30", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "16:30", + endTime: "17:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "17:00", + endTime: "17:30", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "bJxrj7JPqL", + startTime: "17:30", + endTime: "18:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "mx0Ex4xE9Y", + name: "apple+dragonfruit", + rowMinTime: "08:00", + rowMaxTime: "22:00", + subtitle: ( + <> + + {"10"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "mx0Ex4xE9Y", + startTime: "08:00", + endTime: "09:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0Ex4xE9Y", + startTime: "09:00", + endTime: "10:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0Ex4xE9Y", + startTime: "10:00", + endTime: "11:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0Ex4xE9Y", + startTime: "11:00", + endTime: "12:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "jingzhi-id", + startTime: "13:00", + endTime: "14:00", + subtitle: "Jing Zhi", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0Ex4xE9Y", + startTime: "14:00", + endTime: "15:00", + subtitle: "Jing Zhi", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0Ex4xE9Y", + startTime: "15:00", + endTime: "16:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0Ex4xE9Y", + startTime: "16:00", + endTime: "17:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0Ex4xE9Y", + startTime: "17:00", + endTime: "18:00", + status: "blocked" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0Ex4xE9Y", + startTime: "18:00", + endTime: "19:00", + subtitle: "", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0Ex4xE9Y", + startTime: "19:00", + endTime: "20:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0Ex4xE9Y", + startTime: "20:00", + endTime: "21:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0Ex4xE9Y", + startTime: "21:00", + endTime: "22:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "RBP5eeePm6", + name: "Coconut", + rowMinTime: "08:00:00", + rowMaxTime: "18:00:00", + subtitle: ( + <> + + {"12"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "RBP5eeePm6", + startTime: "08:00:00", + endTime: "08:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "08:15:00", + endTime: "08:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "08:30:00", + endTime: "08:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "08:45:00", + endTime: "09:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "09:00:00", + endTime: "09:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "09:15:00", + endTime: "09:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "09:30:00", + endTime: "09:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "09:45:00", + endTime: "10:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "10:00:00", + endTime: "10:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "10:15:00", + endTime: "10:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "10:30:00", + endTime: "10:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "10:45:00", + endTime: "11:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "11:00:00", + endTime: "11:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "11:15:00", + endTime: "11:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "11:30:00", + endTime: "11:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "11:45:00", + endTime: "12:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "12:00:00", + endTime: "13:00:00", + status: "blocked" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "13:00:00", + endTime: "13:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "13:15:00", + endTime: "13:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "13:30:00", + endTime: "13:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "13:45:00", + endTime: "14:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "14:00:00", + endTime: "14:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "14:15:00", + endTime: "14:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "14:30:00", + endTime: "14:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "14:45:00", + endTime: "15:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "15:00:00", + endTime: "16:30:00", + subtitle: "booking label", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "16:30:00", + endTime: "16:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "16:45:00", + endTime: "17:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "17:00:00", + endTime: "17:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "17:15:00", + endTime: "17:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "17:30:00", + endTime: "17:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5eeePm6", + startTime: "17:45:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "DAPBjGgPqd", + name: "Coconut Approval Required", + rowMinTime: "08:00:00", + rowMaxTime: "18:00:00", + subtitle: ( + <> + + {"12"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "DAPBjGgPqd", + startTime: "08:00:00", + endTime: "16:30:00", + subtitle: + "a very long booking text that spans across the entire universe beyond the horizon into the blackhole transcending time and space", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "DAPBjGgPqd", + startTime: "16:30:00", + endTime: "16:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "DAPBjGgPqd", + startTime: "16:45:00", + endTime: "17:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "DAPBjGgPqd", + startTime: "17:00:00", + endTime: "17:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "DAPBjGgPqd", + startTime: "17:15:00", + endTime: "17:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "DAPBjGgPqd", + startTime: "17:30:00", + endTime: "17:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "DAPBjGgPqd", + startTime: "17:45:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "ajlEo56PqA", + name: "Default test", + rowMinTime: "08:00", + rowMaxTime: "22:00", + subtitle: ( + <> + + {"12"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "ajlEo56PqA", + startTime: "08:00", + endTime: "09:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ajlEo56PqA", + startTime: "09:00", + endTime: "10:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ajlEo56PqA", + startTime: "10:00", + endTime: "11:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ajlEo56PqA", + startTime: "11:00", + endTime: "12:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ajlEo56PqA", + startTime: "13:00", + endTime: "14:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ajlEo56PqA", + startTime: "14:00", + endTime: "15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ajlEo56PqA", + startTime: "15:00", + endTime: "16:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ajlEo56PqA", + startTime: "16:00", + endTime: "17:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ajlEo56PqA", + startTime: "17:00", + endTime: "18:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ajlEo56PqA", + startTime: "18:00", + endTime: "19:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ajlEo56PqA", + startTime: "19:00", + endTime: "20:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ajlEo56PqA", + startTime: "20:00", + endTime: "21:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ajlEo56PqA", + startTime: "21:00", + endTime: "22:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "ewGEKbeQVa", + name: "delet", + rowMinTime: "08:00:00", + rowMaxTime: "18:00:00", + subtitle: ( + <> + + {"14"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "ewGEKbeQVa", + startTime: "08:00:00", + endTime: "08:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "08:15:00", + endTime: "08:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "08:30:00", + endTime: "08:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "08:45:00", + endTime: "09:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "09:00:00", + endTime: "09:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "09:15:00", + endTime: "09:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "09:30:00", + endTime: "09:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "09:45:00", + endTime: "10:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "10:00:00", + endTime: "10:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "10:15:00", + endTime: "10:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "10:30:00", + endTime: "10:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "10:45:00", + endTime: "11:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "11:00:00", + endTime: "11:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "11:15:00", + endTime: "11:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "11:30:00", + endTime: "11:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "11:45:00", + endTime: "12:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "12:00:00", + endTime: "13:00:00", + status: "blocked" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "13:00:00", + endTime: "13:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "13:15:00", + endTime: "13:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "13:30:00", + endTime: "13:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "13:45:00", + endTime: "14:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "14:00:00", + endTime: "14:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "14:15:00", + endTime: "14:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "14:30:00", + endTime: "14:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "14:45:00", + endTime: "15:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "15:00:00", + endTime: "15:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "15:15:00", + endTime: "15:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "15:30:00", + endTime: "15:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "15:45:00", + endTime: "16:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "16:00:00", + endTime: "16:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "16:15:00", + endTime: "16:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "16:30:00", + endTime: "16:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "16:45:00", + endTime: "17:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "17:00:00", + endTime: "17:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "17:15:00", + endTime: "17:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "17:30:00", + endTime: "17:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "ewGEKbeQVa", + startTime: "17:45:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, +]; diff --git a/stories/timetable/new-odd-days.tsx b/stories/timetable/new-odd-days.tsx new file mode 100644 index 000000000..8bfd12cb6 --- /dev/null +++ b/stories/timetable/new-odd-days.tsx @@ -0,0 +1,2652 @@ +import { Person2Icon } from "@lifesg/react-icons"; +import { CellType, TimeTableRowCellData, TimeTableRowData } from "../../src"; + +export const oddDaysData = [ + { + id: "9l4P1dOr16", + name: "Apple", + rowMinTime: "08:00:00", + rowMaxTime: "22:30:00", + subtitle: ( + <> + + {"3"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "9l4P1dOr16", + startTime: "08:00", + endTime: "08:45", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "08:45:00", + endTime: "09:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "11:00:00", + endTime: "11:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "RBP5g87Em6", + startTime: "12:00:00", + endTime: "13:00:00", + title: "Weekly Huddle #7", + subtitle: "Shawn TAY (GOVTECH)", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "13:00:00", + endTime: "13:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "13:45:00", + endTime: "14:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "14:30:00", + endTime: "15:15:00", + status: "filled" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "16:45:00", + endTime: "17:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "17:15:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "18:00:00", + endTime: "18:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "18:45:00", + endTime: "19:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "19:30:00", + endTime: "20:15:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "20:15:00", + endTime: "21:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "21:00:00", + endTime: "21:45:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "9l4P1dOr16", + startTime: "21:45:00", + endTime: "22:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "Dy3E3vRQY0", + name: "Avocado", + rowMinTime: "08:00:00", + rowMaxTime: "22:00:00", + subtitle: ( + <> + + {"18"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "Dy3E3vRQY0", + startTime: "08:00:00", + endTime: "08:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "08:30:00", + endTime: "09:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "09:00:00", + endTime: "09:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "09:30:00", + endTime: "10:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "10:00:00", + endTime: "10:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "10:30:00", + endTime: "11:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "11:00:00", + endTime: "11:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "11:30:00", + endTime: "12:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "12:00:00", + endTime: "12:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "12:30:00", + endTime: "13:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "13:00:00", + endTime: "13:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "13:30:00", + endTime: "14:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "14:00:00", + endTime: "14:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "14:30:00", + endTime: "15:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "15:00:00", + endTime: "15:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "15:30:00", + endTime: "16:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "16:00:00", + endTime: "16:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "16:30:00", + endTime: "17:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "17:00:00", + endTime: "17:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "17:30:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "18:00:00", + endTime: "18:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "18:30:00", + endTime: "19:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "19:00:00", + endTime: "19:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "19:30:00", + endTime: "20:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "20:00:00", + endTime: "20:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "20:30:00", + endTime: "21:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "21:00:00", + endTime: "21:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "Dy3E3vRQY0", + startTime: "21:30:00", + endTime: "22:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "GN9P0vME6K", + name: "Banana", + rowMinTime: "08:00:00", + rowMaxTime: "22:00:00", + subtitle: ( + <> + + {"6"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "GN9P0vME6K", + startTime: "08:00:00", + endTime: "08:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "08:30:00", + endTime: "09:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "09:00:00", + endTime: "09:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "09:30:00", + endTime: "10:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "10:00:00", + endTime: "10:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "10:30:00", + endTime: "11:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "11:00:00", + endTime: "11:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "11:30:00", + endTime: "12:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "12:00:00", + endTime: "12:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "12:30:00", + endTime: "13:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "13:00:00", + endTime: "13:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "13:30:00", + endTime: "14:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "14:00:00", + endTime: "14:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "14:30:00", + endTime: "15:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "15:00:00", + endTime: "15:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "15:30:00", + endTime: "16:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "16:00:00", + endTime: "16:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "16:30:00", + endTime: "17:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "17:00:00", + endTime: "17:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "17:30:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "18:00:00", + endTime: "18:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "18:30:00", + endTime: "19:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "19:00:00", + endTime: "19:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "19:30:00", + endTime: "20:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "20:00:00", + endTime: "20:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "20:30:00", + endTime: "21:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "21:00:00", + endTime: "21:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vME6K", + startTime: "21:30:00", + endTime: "22:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "mx0ExmWr9Y", + name: "Cantaloupe", + rowMinTime: "08:00:00", + rowMaxTime: "22:00:00", + subtitle: ( + <> + + {"10"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "mx0ExmWr9Y", + startTime: "08:00:00", + endTime: "09:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "09:00:00", + endTime: "10:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "10:00:00", + endTime: "11:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "11:00:00", + endTime: "12:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "12:00:00", + endTime: "13:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "13:00:00", + endTime: "14:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "14:00:00", + endTime: "15:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "15:00:00", + endTime: "16:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "16:00:00", + endTime: "17:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "17:00:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "18:00:00", + endTime: "19:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "19:00:00", + endTime: "20:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "20:00:00", + endTime: "21:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "mx0ExmWr9Y", + startTime: "21:00:00", + endTime: "22:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "An0rbeOElJ", + name: "Cherry", + rowMinTime: "08:00:00", + rowMaxTime: "22:00:00", + subtitle: ( + <> + + {"10"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "An0rbeOElJ", + startTime: "08:00:00", + endTime: "08:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "08:30:00", + endTime: "09:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "09:00:00", + endTime: "09:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "09:30:00", + endTime: "10:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "10:00:00", + endTime: "10:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "10:30:00", + endTime: "11:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "11:00:00", + endTime: "11:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "11:30:00", + endTime: "12:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "12:00:00", + endTime: "12:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "12:30:00", + endTime: "13:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "13:00:00", + endTime: "13:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "13:30:00", + endTime: "14:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "14:00:00", + endTime: "14:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "14:30:00", + endTime: "15:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "15:00:00", + endTime: "15:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "15:30:00", + endTime: "16:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "16:00:00", + endTime: "16:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "16:30:00", + endTime: "17:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "17:00:00", + endTime: "17:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "17:30:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "18:00:00", + endTime: "18:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "18:30:00", + endTime: "19:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "19:00:00", + endTime: "19:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "19:30:00", + endTime: "20:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "20:00:00", + endTime: "20:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "20:30:00", + endTime: "21:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "21:00:00", + endTime: "21:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "An0rbeOElJ", + startTime: "21:30:00", + endTime: "22:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "GN9P0vDE6K", + name: "Dragonfruit", + rowMinTime: "08:00:00", + rowMaxTime: "22:00:00", + subtitle: ( + <> + + {"10"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "GN9P0vDE6K", + startTime: "08:00:00", + endTime: "08:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "08:30:00", + endTime: "09:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "09:00:00", + endTime: "09:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "09:30:00", + endTime: "10:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "10:00:00", + endTime: "10:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "10:30:00", + endTime: "11:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "11:00:00", + endTime: "11:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "11:30:00", + endTime: "12:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "12:00:00", + endTime: "12:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "12:30:00", + endTime: "13:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "13:00:00", + endTime: "13:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "13:30:00", + endTime: "14:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "14:00:00", + endTime: "14:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "14:30:00", + endTime: "15:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "15:00:00", + endTime: "15:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "15:30:00", + endTime: "16:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "16:00:00", + endTime: "16:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "16:30:00", + endTime: "17:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "17:00:00", + endTime: "17:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "17:30:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "18:00:00", + endTime: "18:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "18:30:00", + endTime: "19:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "19:00:00", + endTime: "19:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "19:30:00", + endTime: "20:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "20:00:00", + endTime: "20:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "20:30:00", + endTime: "21:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "21:00:00", + endTime: "21:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "GN9P0vDE6K", + startTime: "21:30:00", + endTime: "22:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "vK4rGewQ02", + name: "Durian", + rowMinTime: "08:00:00", + rowMaxTime: "22:00:00", + subtitle: ( + <> + + {"10"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "vK4rGewQ02", + startTime: "08:00:00", + endTime: "08:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "08:30:00", + endTime: "09:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "09:00:00", + endTime: "09:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "09:30:00", + endTime: "10:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "10:00:00", + endTime: "10:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "10:30:00", + endTime: "11:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "11:00:00", + endTime: "11:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "11:30:00", + endTime: "12:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "12:00:00", + endTime: "12:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "12:30:00", + endTime: "13:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "13:00:00", + endTime: "13:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "13:30:00", + endTime: "14:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "14:00:00", + endTime: "14:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "14:30:00", + endTime: "15:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "15:00:00", + endTime: "15:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "15:30:00", + endTime: "16:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "16:00:00", + endTime: "16:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "16:30:00", + endTime: "17:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "17:00:00", + endTime: "17:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "17:30:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "18:00:00", + endTime: "18:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "18:30:00", + endTime: "19:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "19:00:00", + endTime: "19:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "19:30:00", + endTime: "20:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "20:00:00", + endTime: "20:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "20:30:00", + endTime: "21:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "21:00:00", + endTime: "21:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGewQ02", + startTime: "21:30:00", + endTime: "22:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "0B8E719Pbp", + name: "Executive room 1", + rowMinTime: "08:00:00", + rowMaxTime: "22:00:00", + subtitle: ( + <> + + {"5"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "0B8E719Pbp", + startTime: "08:00:00", + endTime: "09:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "09:00:00", + endTime: "10:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "10:00:00", + endTime: "11:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "11:00:00", + endTime: "12:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "12:00:00", + endTime: "13:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "13:00:00", + endTime: "14:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "14:00:00", + endTime: "15:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "15:00:00", + endTime: "16:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "16:00:00", + endTime: "17:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "17:00:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "18:00:00", + endTime: "19:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "19:00:00", + endTime: "20:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "20:00:00", + endTime: "21:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "0B8E719Pbp", + startTime: "21:00:00", + endTime: "22:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "vK4rGoMr02", + name: "Executive room 6", + rowMinTime: "08:00:00", + rowMaxTime: "22:00:00", + subtitle: ( + <> + + {"6"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "vK4rGoMr02", + startTime: "08:00:00", + endTime: "09:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "09:00:00", + endTime: "10:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "10:00:00", + endTime: "11:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "11:00:00", + endTime: "12:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "12:00:00", + endTime: "13:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "13:00:00", + endTime: "14:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "14:00:00", + endTime: "15:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "15:00:00", + endTime: "16:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "16:00:00", + endTime: "17:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "17:00:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "18:00:00", + endTime: "19:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "19:00:00", + endTime: "20:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "20:00:00", + endTime: "21:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "vK4rGoMr02", + startTime: "21:00:00", + endTime: "22:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, + { + id: "YRVPVjVPGe", + name: "Grape", + rowMinTime: "08:00:00", + rowMaxTime: "22:00:00", + subtitle: ( + <> + + {"10"} + + ), + onRowNameClick: (rowData: TimeTableRowData, e: React.MouseEvent) => { + alert(`Clicked on row header for ${rowData.name}`); + }, + rowCells: [ + { + id: "YRVPVjVPGe", + startTime: "08:00:00", + endTime: "08:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "08:30:00", + endTime: "09:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "09:00:00", + endTime: "09:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "09:30:00", + endTime: "10:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "10:00:00", + endTime: "10:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "10:30:00", + endTime: "11:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "11:00:00", + endTime: "11:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "11:30:00", + endTime: "12:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "12:00:00", + endTime: "12:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "12:30:00", + endTime: "13:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "13:00:00", + endTime: "13:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "13:30:00", + endTime: "14:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "14:00:00", + endTime: "14:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "14:30:00", + endTime: "15:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "15:00:00", + endTime: "15:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "15:30:00", + endTime: "16:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "16:00:00", + endTime: "16:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "16:30:00", + endTime: "17:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "17:00:00", + endTime: "17:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "17:30:00", + endTime: "18:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "18:00:00", + endTime: "18:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "18:30:00", + endTime: "19:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "19:00:00", + endTime: "19:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "19:30:00", + endTime: "20:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "20:00:00", + endTime: "20:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "20:30:00", + endTime: "21:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "21:00:00", + endTime: "21:30:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + { + id: "YRVPVjVPGe", + startTime: "21:30:00", + endTime: "22:00:00", + status: "default" as CellType, + onClick: (data: TimeTableRowCellData) => { + alert( + `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + ); + }, + }, + ], + }, +]; diff --git a/stories/timetable/props-table.tsx b/stories/timetable/props-table.tsx index 855c6ffa5..fab8c1055 100644 --- a/stories/timetable/props-table.tsx +++ b/stories/timetable/props-table.tsx @@ -33,7 +33,7 @@ const DATA: ApiTableSectionProps[] = [ name: "rowData", mandatory: true, description: "The data used to render each unique rows", - propTypes: ["RowData[]"], + propTypes: ["TimeTableRowData[]"], }, { name: "isLoading", @@ -139,18 +139,6 @@ const DATA: ApiTableSectionProps[] = [ ), propTypes: ["(currentDate: string) => void"], }, - { - name: "onNameClick", - description: - "The callback function to trigger when the row header name has been clicked.", - propTypes: ["(rowData: RowData, e: React.MouseEvent) => void"], - }, - { - name: "onCellClick", - description: - "The callback function to trigger when a cell has been clicked.", - propTypes: ["(data: RowCellData, e: React.MouseEvent) => void"], - }, ], }, { @@ -179,7 +167,7 @@ const DATA: ApiTableSectionProps[] = [ ], }, { - name: "RowData", + name: "TimeTableRowData", attributes: [ { name: "id", @@ -188,8 +176,8 @@ const DATA: ApiTableSectionProps[] = [ <> The identifier for this row. This can be useful if you intend to utilise the onNameClickcallback, - as the RowDatawill get passed to the - callback. + as the TimeTableRowDatawill get passed to + the callback. ), propTypes: ["string"], @@ -205,7 +193,7 @@ const DATA: ApiTableSectionProps[] = [ mandatory: true, description: "The array of row cells to be rendered in this row of data.", - propTypes: ["RowCellData[]"], + propTypes: ["TimeTableRowCellData[]"], }, { name: "subtitle", @@ -246,10 +234,18 @@ const DATA: ApiTableSectionProps[] = [ ), propTypes: ["string"], }, + { + name: "onRowNameClick", + description: + "The callback function to trigger when the row header name has been clicked.", + propTypes: [ + "(rowData: TimeTableRowData, e: React.MouseEvent) => void", + ], + }, ], }, { - name: "RowCellData", + name: "TimeTableRowCellData", attributes: [ { name: "id", @@ -257,9 +253,9 @@ const DATA: ApiTableSectionProps[] = [ description: ( <> The identifier for this cell. This can be useful if you - intend to utilise the onCellClickcallback, - as the RowCellDatawill get passed to the - callback. + intend to utilise the onClickcallback, as + the TimeTableRowCellDatawill get passed to + the callback. ), propTypes: ["string"], @@ -282,10 +278,6 @@ const DATA: ApiTableSectionProps[] = [ <> The status of this cell, which determines the style it will be rendered in. -
- NOTE: undefined or blocked cells will have mouse - disabled hover interaction and will not trigger the - onCellClickcallback. ), propTypes: [`"filled"`, `"blocked"`, `"default"`], @@ -313,6 +305,14 @@ const DATA: ApiTableSectionProps[] = [ ), propTypes: ["CustomPopoverProps"], }, + { + name: "onClick", + description: + "The callback function to trigger when a cell has been clicked.", + propTypes: [ + "(data: TimeTableRowCellData, e: React.MouseEvent) => void", + ], + }, ], }, { diff --git a/stories/timetable/timetable.stories.tsx b/stories/timetable/timetable.stories.tsx index 359ef9676..8f52d9942 100644 --- a/stories/timetable/timetable.stories.tsx +++ b/stories/timetable/timetable.stories.tsx @@ -2,10 +2,16 @@ import { PinIcon } from "@lifesg/react-icons"; import type { Meta, StoryObj } from "@storybook/react"; import dayjs from "dayjs"; import { useEffect, useState } from "react"; -import { Color, PopoverV2TriggerType, Text } from "../../src"; +import { + Color, + PopoverV2TriggerType, + Text, + TimeTableRowCellData, + TimeTableRowData, +} from "../../src"; import { TimeTable } from "../../src/timetable/timetable"; -import { RowCellData, RowData } from "../../src/timetable/types"; import { StyledHoverContent, getTimeTableData, lazyLoad } from "./mock-data"; +import styled from "styled-components"; type Component = typeof TimeTable; @@ -16,20 +22,20 @@ const meta: Meta = { export default meta; +const StyledTimeTable = styled(TimeTable)` + width: 900px; + height: 500px; +`; + export const Default: StoryObj = { render: () => { return ( - <> - - + ); }, }; @@ -42,7 +48,7 @@ export const TimeTableWithNavigation: StoryObj = { const [date, setDate] = useState(timeTableData.date); const [loading, setLoading] = useState(timeTableData.isLoading); - const onLeftArrowClick = (currentDate: string) => { + const onPreviousDayClick = (currentDate: string) => { const newDate = dayjs(currentDate) .add(-1, "day") .format("YYYY-MM-DD"); @@ -54,7 +60,7 @@ export const TimeTableWithNavigation: StoryObj = { }, 1000); }; - const onRightArrowClick = (currentDate: string) => { + const onNextDayClick = (currentDate: string) => { const newDate = dayjs(currentDate) .add(1, "day") .format("YYYY-MM-DD"); @@ -66,32 +72,21 @@ export const TimeTableWithNavigation: StoryObj = { }, 1000); }; - const onCellClick = (data: RowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }; - return ( - <> - - + ); }, }; @@ -111,7 +106,7 @@ export const TimeTableWithLazyLoad: StoryObj = { }, 2000); }, [page]); - const onLeftArrowClick = (currentDate: string) => { + const onPreviousDayClick = (currentDate: string) => { const newDate = dayjs(currentDate) .add(-1, "day") .format("YYYY-MM-DD"); @@ -123,7 +118,7 @@ export const TimeTableWithLazyLoad: StoryObj = { }, 1000); }; - const onRightArrowClick = (currentDate: string) => { + const onNextDayClick = (currentDate: string) => { const newDate = dayjs(currentDate) .add(1, "day") .format("YYYY-MM-DD"); @@ -143,73 +138,40 @@ export const TimeTableWithLazyLoad: StoryObj = { }, 5000); }; - const onCellClick = (data: RowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }; - return ( - <> - setPage(page + 1)} - totalRecords={50} - onCellClick={onCellClick} - onRightArrowClick={onRightArrowClick} - onLeftArrowClick={onLeftArrowClick} - /> - + setPage(page + 1)} + totalRecords={50} + onNextDayClick={onNextDayClick} + onPreviousDayClick={onPreviousDayClick} + /> ); }, }; export const TimeTableWithNoPopoverContent: StoryObj = { render: () => { - const onCellClick = (data: RowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }; - return ( - <> - - - ); + return ; }, }; export const TimeTableWithStyledPopovers: StoryObj = { render: () => { - const onCellClick = (data: RowCellData) => { - if (data.status === "filled") return; - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }; - - const onNameClick = (rowData: RowData, e: React.MouseEvent) => { - alert(`Clicked on row header for ${rowData.name}`); - }; - - const buildCustomPopover = (row: RowData, cell: RowCellData) => { + const buildCustomPopover = ( + row: TimeTableRowData, + cell: TimeTableRowCellData + ) => { switch (cell.status) { case "filled": { return { @@ -321,31 +283,18 @@ export const TimeTableWithStyledPopovers: StoryObj = { }; }); - return ( - <> - - - ); + return ; }, }; export const TimeTableWithEmptyContent: StoryObj = { render: () => { return ( - <> - - + ); }, }; diff --git a/tests/timetable/timetable.spec.tsx b/tests/timetable/timetable.spec.tsx index 0844760fd..55114840a 100644 --- a/tests/timetable/timetable.spec.tsx +++ b/tests/timetable/timetable.spec.tsx @@ -1,7 +1,7 @@ import { act, fireEvent, render, screen } from "@testing-library/react"; import dayjs from "dayjs"; import { TimeTable } from "../../src/timetable/timetable"; -import { RowData, TimeTableProps } from "../../src/timetable/types"; +import { TimeTableProps, TimeTableRowData } from "../../src/timetable/types"; import { lazyLoad } from "../../stories/timetable/mock-data"; describe("TimeTable", () => { @@ -15,7 +15,7 @@ describe("TimeTable", () => { minDate: date.add(-11, "month").format("YYYY-MM-DD"), totalRecords: 10, rowData: [], - onNameClick: function (rowData: RowData): void { + onNameClick: function (rowData: TimeTableRowData): void { alert(`Clicked on ${JSON.stringify(rowData)}`); }, emptyContent: { @@ -67,8 +67,8 @@ describe("TimeTable", () => { rowData={[]} isLoading={false} emptyContent={timeTableMockData.emptyContent} - onRightArrowClick={onRightArrowClick} - onLeftArrowClick={onLeftArrowClick} + onNextDayClick={onRightArrowClick} + onPreviousDayClick={onLeftArrowClick} /> ); const leftBtn = screen.getByTestId("date-navigator-left-arrow-btn"); @@ -158,13 +158,13 @@ describe("TimeTable", () => { content: "hello world123", delay: { open: 0, close: 0 }, }, + outsideOpHoursCellCustomPopover: { + trigger: "hover", + content: "skibididiidi ohio", + delay: { open: 0, close: 0 }, + }, }, ]} - outsideOpHoursCellCustomPopover={{ - trigger: "hover", - content: "skibididiidi ohio", - delay: { open: 0, close: 0 }, - }} isLoading={false} emptyContent={timeTableMockData.emptyContent} /> @@ -207,6 +207,7 @@ describe("TimeTable", () => { name: "Test", rowMinTime: "08:00:00", rowMaxTime: "09:00:00", + onRowNameClick: onNameClick, rowCells: [ { id: "1", @@ -219,7 +220,6 @@ describe("TimeTable", () => { ]} isLoading={false} emptyContent={timeTableMockData.emptyContent} - onNameClick={onNameClick} /> ); const rowHeaderName = screen.getByTestId("1-row-header-title"); From e5792e93c2c0e4bf407eb27f29c7259d502b1aa7 Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Thu, 3 Oct 2024 17:44:48 +0800 Subject: [PATCH 08/17] [BOOKINGSG-6090][JZ] Remove and rename files --- stories/timetable/mock-data.tsx | 4 +- .../timetable/timetable-data-even-days.json | 2214 ------------- .../timetable/timetable-data-odd-days.json | 2751 ----------------- ...-days.tsx => timetable-even-days-data.tsx} | 0 ...d-days.tsx => timetable-odd-days-data.tsx} | 0 5 files changed, 2 insertions(+), 4967 deletions(-) delete mode 100644 stories/timetable/timetable-data-even-days.json delete mode 100644 stories/timetable/timetable-data-odd-days.json rename stories/timetable/{new-even-days.tsx => timetable-even-days-data.tsx} (100%) rename stories/timetable/{new-odd-days.tsx => timetable-odd-days-data.tsx} (100%) diff --git a/stories/timetable/mock-data.tsx b/stories/timetable/mock-data.tsx index 0abda2549..8c16bba7e 100644 --- a/stories/timetable/mock-data.tsx +++ b/stories/timetable/mock-data.tsx @@ -3,8 +3,8 @@ import dayjs, { Dayjs } from "dayjs"; import styled from "styled-components"; import { Text } from "../../src/text"; import { CellType, TimeTableProps } from "../../src/timetable/types"; -import { evenDaysData } from "./new-even-days"; -import { oddDaysData } from "./new-odd-days"; +import { evenDaysData } from "./timetable-even-days-data"; +import { oddDaysData } from "./timetable-odd-days-data"; import lazyLoadData from "./timetable-lazy-load-data.json"; export const StyledHoverContent = styled.div` diff --git a/stories/timetable/timetable-data-even-days.json b/stories/timetable/timetable-data-even-days.json deleted file mode 100644 index b0f53bbfc..000000000 --- a/stories/timetable/timetable-data-even-days.json +++ /dev/null @@ -1,2214 +0,0 @@ -{ - "page": 1, - "rowsPerPage": 8, - "totalPages": 2, - "totalRows": 10, - "resources": [ - { - "_provider": "rmbme", - "id": "Dy3E3RvQY0", - "title": "2Hr-interval", - "organisationId": "0B8E79PbpK", - "subtitle": "Eclipse", - "resourceSubtype": "Meeting Room", - "resourceType": "Rooms", - "resourceTypeId": "kd6PRJPJzZ", - "images": [ - "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/Dy3E3RvQY0/3be74a40-1932-4a44-b571-59259d3b256c/c988ab16-3dd2-4f17-9f88-c70958f2a338/9fecf77f-e454-4c86-815f-08d9eb2ec8a9_ActiveSG1.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=2035d9424ac6a7db9a32c53bb056951917339626e209eb442176fb77c3534103&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": false - }, - "unavailableAfterDays": "", - "availableAfterDays": "", - "capacity": "8", - "additionalDescription": [ - { - "key": "Built-in amenities", - "title": "Built-in amenities", - "items": [ - { - "label": "DVD Player" - }, - { - "label": "LAN Point" - } - ] - }, - { - "key": "Available layouts", - "title": "Available layouts", - "description": "Additional time may be added when checking for availability due to setup and teardown of layout.", - "items": [ - { - "label": "Test createdAt (10 pax)" - } - ] - }, - { - "key": "View layout details", - "title": "View layout details", - "items": [ - { - "label": "Test createdAt (10 pax)", - "description": [ - { - "label": "Setup time", - "value": "15 minutes" - }, - { - "label": "Teardown time", - "value": "15 minutes" - } - ], - "imageUrls": [ - "https://dev.rbs.ccubesg.io/rbs/api/v1/layout/mOkQkkAQYZ/layout-url?path=resource-layouts%2FmOkQkkAQYZ%2F3be74a40-1932-4a44-b571-59259d3b256c%2F2222f4a5-cf01-4f0e-990c-1df31c3f057e%2Foffice%20photo.jpg" - ] - } - ] - } - ], - "timelines": [ - { - "date": "2024-08-19", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "08:15:00", - "status": "OCCUPIED", - "label": "booking owner name", - "title": "booking title" - }, - { - "startTime": "08:15:00", - "endTime": "08:30:00", - "status": "OCCUPIED", - "label": "booking owner name", - "title": "booking title" - }, - { - "startTime": "08:30:00", - "endTime": "08:45:00", - "status": "OCCUPIED", - "label": "booking owner name", - "title": "booking title" - }, - { - "startTime": "08:45:00", - "endTime": "09:00:00", - "status": "OCCUPIED", - "label": "booking owner name", - "title": "booking title" - }, - { - "startTime": "09:30:00", - "endTime": "10:30:00", - "status": "OCCUPIED", - "label": "booking owner name", - "title": "booking title" - }, - { - "startTime": "10:45:00", - "endTime": "11:00:00", - "status": "OCCUPIED", - "label": "booking owner name", - "title": "booking title" - }, - { - "startTime": "11:00:00", - "endTime": "11:30:00", - "status": "OCCUPIED", - "label": "booking owner name", - "title": "booking title" - }, - { - "startTime": "16:00:00", - "endTime": "16:30:00", - "status": "OCCUPIED", - "label": "booking owner name", - "title": "booking title" - } - ], - "startTime": "08:00:00", - "endTime": "16:30:00", - "interval": 120 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/Dy3E3RvQY0?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=Dy3E3RvQY0&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/Dy3E3RvQY0?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=Dy3E3RvQY0&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "ZlJQyXWP6z", - "title": "4 Hr interval", - "organisationId": "0B8E79PbpK", - "subtitle": "Eclipse", - "resourceSubtype": "Meeting Room", - "resourceType": "Rooms", - "resourceTypeId": "kd6PRJPJzZ", - "images": [ - "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/ZlJQyXWP6z/3be74a40-1932-4a44-b571-59259d3b256c/a2b46cf3-c488-4f63-a3d2-cbdf2300af76/9fecf77f-e454-4c86-815f-08d9eb2ec8a9_ActiveSG1.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=6ab9c75269a4b5759ee55a3b9d05fa27b76f27528d87c2f9354c1f067234541e&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": false - }, - "unavailableAfterDays": "12", - "availableAfterDays": "", - "capacity": "16", - "additionalDescription": [], - "timelines": [ - { - "date": "2024-08-19", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "12:00:00", - "status": "DEFAULT" - }, - { - "startTime": "12:00:00", - "endTime": "16:00:00", - "status": "OCCUPIED", - "label": "booking owner name", - "title": "booking title" - }, - { - "startTime": "16:00:00", - "endTime": "20:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "20:00:00", - "interval": 240 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/ZlJQyXWP6z?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=ZlJQyXWP6z&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/ZlJQyXWP6z?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=ZlJQyXWP6z&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "9znPmRxQBv", - "title": "acs", - "organisationId": "0B8E79PbpK", - "subtitle": "City", - "resourceSubtype": "[E2E]Room Type 1", - "resourceType": "Rooms", - "resourceTypeId": "kd6PRJPJzZ", - "images": [ - "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/9znPmRxQBv/3be74a40-1932-4a44-b571-59259d3b256c/4b9a9679-2004-44c0-bad2-9bc36aec0519/Screenshot%202024-03-19%20at%209.44.51%20AMScreenshot%202024-03-19%20at%209.44.51%20AMScreenshot%202024-03-19%20at%209.44.51%20AMScreenshot%202024-03-19%20at%209.44.51%20AMScreenshot%202024-03-19%20at%209.44.51%20AMScreenshot%202024-03-19%20at%209.44.51%20AMScreenshot%202024-03-19%20at%209.44.51%20AM.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=ee8323f7150b897fb80a2edb1370a58947d25350f4bd77901e3dd37cb07cd4bc&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": false - }, - "unavailableAfterDays": "30", - "availableAfterDays": "", - "capacity": "4", - "additionalDescription": [ - { - "key": "Additional amenities", - "title": "Additional services", - "description": "Only available upon request.", - "items": [ - { - "label": "002d37f7d618-test" - } - ] - }, - { - "key": "Available layouts", - "title": "Available layouts", - "description": "Additional time may be added when checking for availability due to setup and teardown of layout.", - "items": [ - { - "label": "layout x (4 pax)" - } - ] - }, - { - "key": "View layout details", - "title": "View layout details", - "items": [ - { - "label": "layout x (4 pax)", - "description": [ - { - "label": "Setup time", - "value": "15 minutes" - }, - { - "label": "Teardown time", - "value": "15 minutes" - } - ] - } - ] - } - ], - "timelines": [ - { - "date": "2024-08-19", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "09:00:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00:00", - "endTime": "10:00:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00:00", - "endTime": "11:00:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "13:00:00", - "status": "OCCUPIED" - }, - { - "startTime": "13:00:00", - "endTime": "14:00:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00:00", - "endTime": "15:00:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00:00", - "endTime": "16:00:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00:00", - "endTime": "17:00:00", - "status": "OCCUPIED" - }, - { - "startTime": "17:00:00", - "endTime": "18:00:00", - "status": "DEFAULT" - }, - { - "startTime": "18:00:00", - "endTime": "19:00:00", - "status": "DEFAULT" - }, - { - "startTime": "19:00:00", - "endTime": "20:00:00", - "status": "DEFAULT" - }, - { - "startTime": "20:00:00", - "endTime": "21:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "21:00:00", - "interval": 60 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/9znPmRxQBv?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=9znPmRxQBv&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/9znPmRxQBv?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=9znPmRxQBv&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "B8E79Z6Pbp", - "title": "Fixed Session Resource1", - "organisationId": "0B8E79PbpK", - "subtitle": "Eclipse", - "resourceSubtype": "Meeting Room", - "resourceType": "Rooms", - "resourceTypeId": "kd6PRJPJzZ", - "images": [ - "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/B8E79Z6Pbp/3be74a40-1932-4a44-b571-59259d3b256c/b782ddaa-65a4-46a9-a6e5-42d9753f100b/jagabee_stik.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSG3HXRZB6%2F20240904%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240904T053142Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjELb%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkYwRAIgDwWdoPPRGUkF1Xr9DCkR1zgC%2BBuswSfwuvYoMm8%2Ba48CICRBaUNXTVGdXcsIa4YUIV7A8Z1vYKYHKkH1Cy9aYngmKvMDCM%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQAhoMNTAzNzc5NTQ0MTAwIgyKZ0dmAk0xnfTAzCQqxwMbp9YqdBCEwz7tSyhmZ1xIdWAsD52yCyNw5%2FaMR6YWKeJHHyJb8kgWvuOt2p1LWLSi2N2JzhdguFIDRlBcby%2BHxzQ%2FUXZRBd9bz9CZN0XIhCh5Znmck1KLzuzO5uDJgfPYG1Fs71DNo2sK5HIfbHJnE5fNQwht5P68cbAnZ4PSLkBgJbnU09mU6AxhJmOlssURyKcyCKoNAfjpBv3HLwQwADBh6cf4rwIR0T4HYV31Z5wvvRufp4pQezWL6x6fLNKTuxl94lpraooooGU0imMqg0XWh1Hg86tXESl0mV3nz2xfHBVAcked3gixp9K%2BZASuy90sKZaMK%2FKH3HnG8tEI8Ih%2FUthiE47f6ylthOHaRfzr%2FPLSPQo5aeH0hMq%2BzFu10oS0YCZZBgUHRFiaghWKCzgxqmiUSZoc7ABqqR5%2BdTVwy9XgdcQQgmsFYdjaDBbedUA3Bfy6BjYub%2FLPcYlITqCnQQjpxGMkPpBRBnzxHIquTTrL1kQ8%2BEgbVqMJLg5W0UItqwLPV4kP88HIbbjqQb3Tfd%2Fc7le3G%2BlWhCaE3p8sIVwiymCARjhBxWUiGAlg3j6HGXKHGzWxGRK0Rl1oUYR09kSMITCv39%2B2BjqmAQgIDZfwIghilh3PXOP3eqbc5KQ0CrIJECqfRHGW8%2BZV8nh5RHcnA4iCo%2FgqXIZ0bqucKOMn2LEosCPjD62FkDaTnKw4n9OmePfUBRQEi3etlVN6YgXAyhxH6hX931uI8FKdlK%2B4oP2blLsSHPzFx%2FLZbh0Fpim7EszB4A63Yeq%2FvZ8prv8IQB75R0UlXX23nmlznmhnbqSf%2F4E7B2jQ5JU%2FIR79XBc%3D&X-Amz-Signature=cf58bfb464bf84e43096aa85073cfb5c6f6101b9b67542f4d746903ef5bbb212&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": false - }, - "unavailableAfterDays": "30", - "availableAfterDays": "", - "capacity": "3", - "additionalDescription": [], - "timelines": [ - { - "date": "2024-09-04", - "disabled": false, - "slots": [ - { - "startTime": "10:00", - "endTime": "12:00", - "status": "OCCUPIED" - }, - { - "startTime": "15:00", - "endTime": "17:00", - "status": "DEFAULT" - } - ], - "startTime": "10:00", - "endTime": "17:00" - } - ], - "itemTemplate": "rooms-fixedSessions", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/B8E79Z6Pbp?date=2024-09-04&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=B8E79Z6Pbp&selectedDate=2024-09-04&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/B8E79Z6Pbp?date=2024-09-04&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=B8E79Z6Pbp&selectedDate=2024-09-04&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "bJxrj7JPqL", - "title": "Apple", - "organisationId": "0B8E79PbpK", - "subtitle": "Eclipse", - "resourceSubtype": "Meeting Room", - "resourceType": "Rooms", - "resourceTypeId": "kd6PRJPJzZ", - "images": [ - "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/bJxrj7JPqL/3be74a40-1932-4a44-b571-59259d3b256c/a3a8618a-8be3-4d59-bb75-71962e4e9ff3/hachi.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=bf0bae5559a13510eac9f528777a29eb41f3430037105256273a30662778b8ab&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": true - }, - "unavailableAfterDays": "", - "availableAfterDays": "", - "capacity": "6", - "additionalDescription": [ - { - "key": "Booking usage", - "title": "Booking usage", - "items": [ - { - "label": "Meeting" - } - ] - }, - { - "key": "Additional amenities", - "title": "Additional services", - "description": "Only available upon request.", - "items": [ - { - "label": "MC Services" - }, - { - "label": "002d37f7d618-test" - }, - { - "label": "Barista Services" - }, - { - "label": "Coffee" - }, - { - "label": "a" - } - ] - }, - { - "key": "Available layouts", - "title": "Available layouts", - "description": "Additional time may be added when checking for availability due to setup and teardown of layout.", - "items": [ - { - "label": "Default (5 pax)" - }, - { - "label": "tt (1 pax)" - }, - { - "label": "With setup time (10 pax)" - } - ] - }, - { - "key": "View layout details", - "title": "View layout details", - "items": [ - { - "label": "Default (5 pax)", - "description": [ - { - "label": "Setup time", - "value": "None" - }, - { - "label": "Teardown time", - "value": "None" - } - ], - "imageUrls": [ - "https://dev.rbs.ccubesg.io/rbs/api/v1/layout/Dy3E38OrY0/layout-url?path=resource-layouts%2FDy3E38OrY0%2F3be74a40-1932-4a44-b571-59259d3b256c%2F71193987-ece6-4351-b25f-410851a72daf%2Ftest%20with%20white%20space.png" - ] - }, - { - "label": "tt (1 pax)", - "description": [ - { - "label": "Setup time", - "value": "None" - }, - { - "label": "Teardown time", - "value": "None" - } - ], - "imageUrls": [ - "https://dev.rbs.ccubesg.io/rbs/api/v1/layout/B0XrnDmQmz/layout-url?path=resource-layouts%2FB0XrnDmQmz%2F3be74a40-1932-4a44-b571-59259d3b256c%2Fafe6d37a-2cb6-402d-a8e8-ed5c1afc58ef%2Fwaffle.png" - ] - }, - { - "label": "With setup time (10 pax)", - "description": [ - { - "label": "Setup time", - "value": "30 minutes" - }, - { - "label": "Teardown time", - "value": "30 minutes" - } - ], - "imageUrls": [ - "https://dev.rbs.ccubesg.io/rbs/api/v1/layout/5oJQMZGERj/layout-url?path=resource-layouts%2F5oJQMZGERj%2F3be74a40-1932-4a44-b571-59259d3b256c%2F376de4ea-c825-4eac-a947-aca2c4430012%2F769aacaa-f20a-40af-8eab-65d15bbb7c09.jpg" - ] - } - ] - } - ], - "timelines": [ - { - "date": "2024-08-19", - "disabled": false, - "slots": [ - { - "startTime": "08:00", - "endTime": "08:30", - "status": "DEFAULT" - }, - { - "startTime": "08:30", - "endTime": "09:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00", - "endTime": "09:30", - "status": "DEFAULT" - }, - { - "startTime": "09:30", - "endTime": "10:00", - "status": "OCCUPIED" - }, - { - "startTime": "10:00", - "endTime": "10:30", - "status": "OCCUPIED" - }, - { - "startTime": "10:30", - "endTime": "11:00", - "status": "DEFAULT" - }, - { - "startTime": "13:00", - "endTime": "13:30", - "status": "DEFAULT" - }, - { - "startTime": "13:30", - "endTime": "14:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00", - "endTime": "14:30", - "status": "DISABLED" - }, - { - "startTime": "14:30", - "endTime": "15:00", - "status": "DISABLED" - }, - { - "startTime": "15:00", - "endTime": "15:30", - "status": "OCCUPIED" - }, - { - "startTime": "15:30", - "endTime": "16:00", - "status": "OCCUPIED" - }, - { - "startTime": "16:00", - "endTime": "16:30", - "status": "OCCUPIED" - }, - { - "startTime": "16:30", - "endTime": "17:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00", - "endTime": "17:30", - "status": "DEFAULT" - }, - { - "startTime": "17:30", - "endTime": "18:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00", - "endTime": "18:00" - } - ], - "itemTemplate": "rooms-fixedSessions", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/bJxrj7JPqL?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=bJxrj7JPqL&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/bJxrj7JPqL?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=bJxrj7JPqL&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "mx0Ex4xE9Y", - "title": "apple+dragonfruit", - "organisationId": "0B8E79PbpK", - "subtitle": "Eclipse", - "resourceSubtype": "Meeting Room", - "resourceType": "Rooms", - "resourceTypeId": "kd6PRJPJzZ", - "images": [ - "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/mx0Ex4xE9Y/3be74a40-1932-4a44-b571-59259d3b256c/e0f84078-9e75-4136-9829-44fc3cb8f52f/9fecf77f-e454-4c86-815f-08d9eb2ec8a9_ActiveSG1.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=a79860558fe680db2db7cd6882eed2788be9efb372135f22fd1d848e778f953b&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": false - }, - "unavailableAfterDays": "12", - "availableAfterDays": "", - "capacity": "10", - "additionalDescription": [ - { - "key": "Built-in amenities", - "title": "Built-in amenities", - "items": [ - { - "label": "Common built-in amenity" - }, - { - "label": "Chairs (Additional)" - }, - { - "label": "Phone phone" - } - ] - } - ], - "timelines": [ - { - "date": "2024-08-19", - "disabled": false, - "slots": [ - { - "startTime": "08:00", - "endTime": "09:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00", - "endTime": "10:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00", - "endTime": "11:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00", - "endTime": "12:00", - "status": "DEFAULT" - }, - { - "id": "jingzhi-id", - "startTime": "13:00", - "endTime": "14:00", - "status": "OCCUPIED", - "label": "Jing Zhi", - "action": [ - { - "type": "SHOW_MODAL", - "continueOnError": true, - "payload": { - "message": "", - "cancelActionLabel": "", - "renderContent": { - "type": "html", - "html": "

Booking details for apple+dragonfruit

19 Aug 2024, Mon 1:00pm - 2:00pm

Eclipse

Status

Confirmed

Booking owner

Jing Zhi

jingzhi.t_dcube@scientecpeople.com

Booking title

Test Combined Reschedule

" - }, - "confirmActionLabel": "Close" - } - } - ] - }, - { - "startTime": "14:00", - "endTime": "15:00", - "status": "OCCUPIED", - "label": "Jing Zhi", - "action": [ - { - "type": "SHOW_MODAL", - "continueOnError": true, - "payload": { - "message": "", - "cancelActionLabel": "", - "renderContent": { - "type": "html", - "html": "

Booking details for apple+dragonfruit

19 Aug 2024, Mon 2:00pm - 3:00pm

Eclipse

Status

Confirmed

Booking owner

Jing Zhi

jingzhi.t_dcube@scientecpeople.com

Booking title

Test1235125

" - }, - "confirmActionLabel": "Close" - } - } - ] - }, - { - "startTime": "15:00", - "endTime": "16:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00", - "endTime": "17:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00", - "endTime": "18:00", - "status": "DISABLED" - }, - { - "startTime": "18:00", - "endTime": "19:00", - "status": "OCCUPIED", - "label": "" - }, - { - "startTime": "19:00", - "endTime": "20:00", - "status": "DEFAULT" - }, - { - "startTime": "20:00", - "endTime": "21:00", - "status": "DEFAULT" - }, - { - "startTime": "21:00", - "endTime": "22:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00", - "endTime": "22:00" - } - ], - "itemTemplate": "rooms-fixedSessions", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/mx0Ex4xE9Y?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=mx0Ex4xE9Y&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/mx0Ex4xE9Y?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=mx0Ex4xE9Y&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "RBP5eeePm6", - "title": "Coconut", - "organisationId": "0B8E79PbpK", - "subtitle": "Eclipse", - "resourceSubtype": "Meeting Room", - "resourceType": "Rooms", - "resourceTypeId": "kd6PRJPJzZ", - "images": [ - "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/RBP5eeePm6/3be74a40-1932-4a44-b571-59259d3b256c/0fae6789-9237-4306-bb33-db6d0af75b04/Double19.PNG%20%281%29.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=330bd9d1ae1640873d8e6628fd5797a8f32d447110e6d24f40f309e6c6f490a0&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": true - }, - "unavailableAfterDays": "120", - "availableAfterDays": "", - "capacity": "12", - "additionalDescription": [], - "timelines": [ - { - "date": "2024-08-19", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "08:15:00", - "status": "DEFAULT" - }, - { - "startTime": "08:15:00", - "endTime": "08:30:00", - "status": "DEFAULT" - }, - { - "startTime": "08:30:00", - "endTime": "08:45:00", - "status": "DEFAULT" - }, - { - "startTime": "08:45:00", - "endTime": "09:00:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00:00", - "endTime": "09:15:00", - "status": "DEFAULT" - }, - { - "startTime": "09:15:00", - "endTime": "09:30:00", - "status": "DEFAULT" - }, - { - "startTime": "09:30:00", - "endTime": "09:45:00", - "status": "DEFAULT" - }, - { - "startTime": "09:45:00", - "endTime": "10:00:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00:00", - "endTime": "10:15:00", - "status": "DEFAULT" - }, - { - "startTime": "10:15:00", - "endTime": "10:30:00", - "status": "DEFAULT" - }, - { - "startTime": "10:30:00", - "endTime": "10:45:00", - "status": "DEFAULT" - }, - { - "startTime": "10:45:00", - "endTime": "11:00:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "11:15:00", - "status": "DEFAULT" - }, - { - "startTime": "11:15:00", - "endTime": "11:30:00", - "status": "DEFAULT" - }, - { - "startTime": "11:30:00", - "endTime": "11:45:00", - "status": "DEFAULT" - }, - { - "startTime": "11:45:00", - "endTime": "12:00:00", - "status": "DEFAULT" - }, - { - "startTime": "12:00:00", - "endTime": "13:00:00", - "status": "DISABLED" - }, - { - "startTime": "13:00:00", - "endTime": "13:15:00", - "status": "DEFAULT" - }, - { - "startTime": "13:15:00", - "endTime": "13:30:00", - "status": "DEFAULT" - }, - { - "startTime": "13:30:00", - "endTime": "13:45:00", - "status": "DEFAULT" - }, - { - "startTime": "13:45:00", - "endTime": "14:00:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00:00", - "endTime": "14:15:00", - "status": "DEFAULT" - }, - { - "startTime": "14:15:00", - "endTime": "14:30:00", - "status": "DEFAULT" - }, - { - "startTime": "14:30:00", - "endTime": "14:45:00", - "status": "DEFAULT" - }, - { - "startTime": "14:45:00", - "endTime": "15:00:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00:00", - "endTime": "16:30:00", - "status": "OCCUPIED", - "label": "booking label" - }, - { - "startTime": "16:30:00", - "endTime": "16:45:00", - "status": "DEFAULT" - }, - { - "startTime": "16:45:00", - "endTime": "17:00:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00:00", - "endTime": "17:15:00", - "status": "DEFAULT" - }, - { - "startTime": "17:15:00", - "endTime": "17:30:00", - "status": "DEFAULT" - }, - { - "startTime": "17:30:00", - "endTime": "17:45:00", - "status": "DEFAULT" - }, - { - "startTime": "17:45:00", - "endTime": "18:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "18:00:00", - "interval": 15 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/RBP5eeePm6?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=RBP5eeePm6&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/RBP5eeePm6?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=RBP5eeePm6&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "DAPBjGgPqd", - "title": "Coconut Approval Required", - "organisationId": "0B8E79PbpK", - "subtitle": "GovTech Headquarters", - "resourceSubtype": "Meeting Room", - "resourceType": "Rooms", - "resourceTypeId": "kd6PRJPJzZ", - "images": [ - "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/DAPBjGgPqd/3be74a40-1932-4a44-b571-59259d3b256c/febf8918-25be-437a-bc7c-33abc09b63e6/Double19.PNG%20%281%29.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=f42fdd1ee37cb8c85b6aa1b12299c8cac79026a1b649037cffd835bdfcbfc350&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": true, - "Manual start": true - }, - "unavailableAfterDays": "30", - "availableAfterDays": "", - "capacity": "12", - "additionalDescription": [], - "timelines": [ - { - "date": "2024-08-19", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "16:30:00", - "status": "OCCUPIED", - "label": "a very long booking text that spans across the entire universe beyond the horizon into the blackhole transcending time and space" - }, - { - "startTime": "16:30:00", - "endTime": "16:45:00", - "status": "DEFAULT" - }, - { - "startTime": "16:45:00", - "endTime": "17:00:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00:00", - "endTime": "17:15:00", - "status": "DEFAULT" - }, - { - "startTime": "17:15:00", - "endTime": "17:30:00", - "status": "DEFAULT" - }, - { - "startTime": "17:30:00", - "endTime": "17:45:00", - "status": "DEFAULT" - }, - { - "startTime": "17:45:00", - "endTime": "18:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "18:00:00", - "interval": 15 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/DAPBjGgPqd?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=DAPBjGgPqd&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/DAPBjGgPqd?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=DAPBjGgPqd&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "ajlEo56PqA", - "title": "Default test", - "organisationId": "0B8E79PbpK", - "subtitle": "Eclipse", - "resourceSubtype": "Meeting Room", - "resourceType": "Rooms", - "resourceTypeId": "kd6PRJPJzZ", - "images": [ - "https://mol-dev-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/ajlEo56PqA/3be74a40-1932-4a44-b571-59259d3b256c/7e6e379a-2318-4b9c-885b-df45c47b926e/Square_-_black_simple.svg.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSOOIGMMFT%2F20240819%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240819T052315Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEDUaDmFwLXNvdXRoZWFzdC0xIkcwRQIhAJv2SAwVoSPwMmO2O807cHLgX8nvXY1H0MpDoy8Xc3DzAiA5IPjHSx6AxZHWErHkEIGxCR5DAJUOAJEomVw2sVhw9irqAwg%2BEAIaDDUwMzc3OTU0NDEwMCIMaWFQ1Y1utrGnRt5zKscDV7EQ0Ur1oIbCtKQGh3T3qKebL%2BksKpPUEFIo7Svys2a91MSBqFh7CJiFF%2BZjLPGi10Oz9mg668pEQHde9LPmVNkxwDrYoerHXwW3BgNyNzB4OYuR8Q4C6gWDpr%2Fds5pdyZFHcL2pBoeuD96zyNlXWp368PU0pbB1U0N0Xh9jY4sjEdu%2FnaMFy9zzDEl3upQj3f7XBATFb1jWV0Xqubtd4jPuyBAIc7QAsG6s3na27fdyZQrsoX1tcp44190zOpzY5%2FO51%2BgkrhX0RDNS%2B1gDG6EwME%2FH727Pnzci8OO%2BSIoKdyrIEm4%2BkOpxZpI8SucM98RNE9LRVd%2FItYXtaQNrJjVlYM0IzEHJrJ0qyVLoKbmfEEmgKpTVd7aogdzViI5RGEOts%2BI1eRl2CLOjYRuVYKT6dplep1EYA%2FmeaJWdR4Azg5IWlAvQimZ1lBhUck%2B9qXswbIF%2BBwH2jmu9n9z6Uh7dVeP3enQ95Po8SSoRwJxA4CzMpgYVGS%2B59wTrPY7gAft%2Fdc2fWjIhdRMITTtZad3%2Bhp%2FSyLV14q69J7My44wI94K%2Fj7cCNMXmY6MsJBuFnjkq1%2BFQ%2B5ZZi8%2FweDoSFtGexlagUYEwxqaLtgY6pQFCrOyo2wcQqBHqu9mMp2Yg7FuzJn7o9Pw9LOqbxkEXfMDEdffdSsXnGxHq%2BelGL1YEeM6GAp57B1k6RSngsX%2BACZlVvmCA1oiHq6FLuNdCEefrbI9teD9LzQDZxKEouU4doZyA%2FZEnQi8YWbWJZvd1tluUT%2FRgYhgHhl%2FV%2Bqf3Mk%2FB7bHUJJMCE5UXcz45J4NCvwFUK2qzDRsS6eS4gpgLoHwo1YQ%3D&X-Amz-Signature=97fbd54ff50ccfba7e83cd7727cf7d52af5dc030f0f39730260c4c11c9dcb950&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": true - }, - "unavailableAfterDays": "30", - "availableAfterDays": "", - "capacity": "12", - "additionalDescription": [], - "timelines": [ - { - "date": "2024-08-19", - "disabled": false, - "slots": [ - { - "startTime": "08:00", - "endTime": "09:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00", - "endTime": "10:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00", - "endTime": "11:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00", - "endTime": "12:00", - "status": "DEFAULT" - }, - { - "startTime": "13:00", - "endTime": "14:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00", - "endTime": "15:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00", - "endTime": "16:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00", - "endTime": "17:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00", - "endTime": "18:00", - "status": "DEFAULT" - }, - { - "startTime": "18:00", - "endTime": "19:00", - "status": "DEFAULT" - }, - { - "startTime": "19:00", - "endTime": "20:00", - "status": "DEFAULT" - }, - { - "startTime": "20:00", - "endTime": "21:00", - "status": "DEFAULT" - }, - { - "startTime": "21:00", - "endTime": "22:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00", - "endTime": "22:00" - } - ], - "itemTemplate": "rooms-fixedSessions", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/ajlEo56PqA?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=ajlEo56PqA&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/ajlEo56PqA?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=ajlEo56PqA&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "ewGEKbeQVa", - "title": "delet", - "organisationId": "0B8E79PbpK", - "subtitle": "Eclipse, Level 8", - "resourceSubtype": "test default fallback", - "resourceType": "Rooms", - "resourceTypeId": "kd6PRJPJzZ", - "images": null, - "tags": { - "Approval required": false, - "Manual start": true - }, - "unavailableAfterDays": "9", - "availableAfterDays": "", - "capacity": "14", - "additionalDescription": [], - "timelines": [ - { - "date": "2024-08-19", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "08:15:00", - "status": "DEFAULT" - }, - { - "startTime": "08:15:00", - "endTime": "08:30:00", - "status": "DEFAULT" - }, - { - "startTime": "08:30:00", - "endTime": "08:45:00", - "status": "DEFAULT" - }, - { - "startTime": "08:45:00", - "endTime": "09:00:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00:00", - "endTime": "09:15:00", - "status": "DEFAULT" - }, - { - "startTime": "09:15:00", - "endTime": "09:30:00", - "status": "DEFAULT" - }, - { - "startTime": "09:30:00", - "endTime": "09:45:00", - "status": "DEFAULT" - }, - { - "startTime": "09:45:00", - "endTime": "10:00:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00:00", - "endTime": "10:15:00", - "status": "DEFAULT" - }, - { - "startTime": "10:15:00", - "endTime": "10:30:00", - "status": "DEFAULT" - }, - { - "startTime": "10:30:00", - "endTime": "10:45:00", - "status": "DEFAULT" - }, - { - "startTime": "10:45:00", - "endTime": "11:00:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "11:15:00", - "status": "DEFAULT" - }, - { - "startTime": "11:15:00", - "endTime": "11:30:00", - "status": "DEFAULT" - }, - { - "startTime": "11:30:00", - "endTime": "11:45:00", - "status": "DEFAULT" - }, - { - "startTime": "11:45:00", - "endTime": "12:00:00", - "status": "DEFAULT" - }, - { - "startTime": "12:00:00", - "endTime": "13:00:00", - "status": "DISABLED" - }, - { - "startTime": "13:00:00", - "endTime": "13:15:00", - "status": "DEFAULT" - }, - { - "startTime": "13:15:00", - "endTime": "13:30:00", - "status": "DEFAULT" - }, - { - "startTime": "13:30:00", - "endTime": "13:45:00", - "status": "DEFAULT" - }, - { - "startTime": "13:45:00", - "endTime": "14:00:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00:00", - "endTime": "14:15:00", - "status": "DEFAULT" - }, - { - "startTime": "14:15:00", - "endTime": "14:30:00", - "status": "DEFAULT" - }, - { - "startTime": "14:30:00", - "endTime": "14:45:00", - "status": "DEFAULT" - }, - { - "startTime": "14:45:00", - "endTime": "15:00:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00:00", - "endTime": "15:15:00", - "status": "DEFAULT" - }, - { - "startTime": "15:15:00", - "endTime": "15:30:00", - "status": "DEFAULT" - }, - { - "startTime": "15:30:00", - "endTime": "15:45:00", - "status": "DEFAULT" - }, - { - "startTime": "15:45:00", - "endTime": "16:00:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00:00", - "endTime": "16:15:00", - "status": "DEFAULT" - }, - { - "startTime": "16:15:00", - "endTime": "16:30:00", - "status": "DEFAULT" - }, - { - "startTime": "16:30:00", - "endTime": "16:45:00", - "status": "DEFAULT" - }, - { - "startTime": "16:45:00", - "endTime": "17:00:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00:00", - "endTime": "17:15:00", - "status": "DEFAULT" - }, - { - "startTime": "17:15:00", - "endTime": "17:30:00", - "status": "DEFAULT" - }, - { - "startTime": "17:30:00", - "endTime": "17:45:00", - "status": "DEFAULT" - }, - { - "startTime": "17:45:00", - "endTime": "18:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "18:00:00", - "interval": 15 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/ewGEKbeQVa?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=ewGEKbeQVa&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/rbs/web/book/ewGEKbeQVa?date=2024-08-19&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://dev.rbs.ccubesg.io/listing/rbs/detail?provider=rmbme&resourceId=ewGEKbeQVa&selectedDate=2024-08-19&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - } - ] -} diff --git a/stories/timetable/timetable-data-odd-days.json b/stories/timetable/timetable-data-odd-days.json deleted file mode 100644 index 91141bfe6..000000000 --- a/stories/timetable/timetable-data-odd-days.json +++ /dev/null @@ -1,2751 +0,0 @@ -{ - "page": 1, - "rowsPerPage": 10, - "totalPages": 3, - "totalRows": 10, - "resources": [ - { - "_provider": "rmbme", - "id": "9l4P1dOr16", - "title": "Apple", - "organisationId": "ylWEXKQNDX", - "subtitle": "Mapletree Business City 10, Floor 8", - "resourceSubtype": "Conference Room", - "resourceType": "Rooms", - "resourceTypeId": "vmoQAgr9Dl", - "images": [ - "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/9l4P1dOr16/5d53aabc-48ab-4e38-8036-b3d000f7c123/e4fc7335-232b-4a2e-99a7-2d47d52d5663/apple-washington-size-113-per-piece-fruits-vegetables-fresh-produce-509590_1024x.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=98ada84cc0f8bb9ebfff9b4ba372925ca44ad78293889b7aa47d543876b751bd&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": true, - "Manual start": false - }, - "unavailableAfterDays": "60", - "availableAfterDays": "", - "capacity": "3", - "additionalDescription": [ - { - "key": "Booking usage", - "title": "Booking usage", - "items": [ - { - "label": "Event (Internal)" - }, - { - "label": "Event (External)" - }, - { - "label": "Annual General Meeting" - } - ] - }, - { - "key": "Built-in amenities", - "title": "Built-in amenities", - "items": [ - { - "label": "Chairs (Additional)" - }, - { - "label": "Deskphone" - }, - { - "label": "Chair" - } - ] - }, - { - "key": "Additional amenities", - "title": "Additional services", - "description": "Only available upon request.", - "items": [ - { - "label": "Coffee" - }, - { - "label": "Barista Services" - }, - { - "label": "Tea" - } - ] - } - ], - "timelines": [ - { - "date": "2024-09-06", - "disabled": false, - "slots": [ - { - "startTime": "08:00", - "endTime": "08:45", - "status": "DEFAULT" - }, - { - "startTime": "08:45:00", - "endTime": "09:30:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "11:45:00", - "status": "DEFAULT" - }, - { - "id": "RBP5g87Em6", - "title": "Weekly Huddle #7", - "label": "Shawn TAY (GOVTECH)", - "hosts": [], - "startTime": "12:00:00", - "endTime": "13:00:00", - "status": "OCCUPIED", - "action": [ - { - "type": "SHOW_MODAL", - "continueOnError": true, - "payload": { - "message": "", - "cancelActionLabel": "", - "renderContent": { - "type": "html", - "html": "

Booking details for Apple

6 Sep 2024, Fri 11:00am - 12:00pm

Mapletree Business City 10, Floor 8

Status

Confirmed

Booking owner

Shawn TAY (GOVTECH)

Shawn_TAY@tech.gov.sg

Booking title

Weekly Huddle #7

" - }, - "confirmActionLabel": "Close" - } - } - ] - }, - { - "startTime": "13:00:00", - "endTime": "13:45:00", - "status": "DEFAULT" - }, - { - "startTime": "13:45:00", - "endTime": "14:30:00", - "status": "DEFAULT" - }, - { - "startTime": "14:30:00", - "endTime": "15:15:00", - "status": "OCCUPIED" - }, - { - "startTime": "16:45:00", - "endTime": "17:15:00", - "status": "DEFAULT" - }, - { - "startTime": "17:15:00", - "endTime": "18:00:00", - "status": "DEFAULT" - }, - { - "startTime": "18:00:00", - "endTime": "18:45:00", - "status": "DEFAULT" - }, - { - "startTime": "18:45:00", - "endTime": "19:30:00", - "status": "DEFAULT" - }, - { - "startTime": "19:30:00", - "endTime": "20:15:00", - "status": "DEFAULT" - }, - { - "startTime": "20:15:00", - "endTime": "21:00:00", - "status": "DEFAULT" - }, - { - "startTime": "21:00:00", - "endTime": "21:45:00", - "status": "DEFAULT" - }, - { - "startTime": "21:45:00", - "endTime": "22:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "22:30:00", - "interval": 30 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/9l4P1dOr16?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=9l4P1dOr16&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/9l4P1dOr16?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=9l4P1dOr16&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "Dy3E3vRQY0", - "title": "Avocado", - "organisationId": "ylWEXKQNDX", - "subtitle": "Eclipse Building", - "resourceSubtype": "Conference Room", - "resourceType": "Rooms", - "resourceTypeId": "vmoQAgr9Dl", - "images": [ - "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/Dy3E3vRQY0/5d53aabc-48ab-4e38-8036-b3d000f7c123/a5bb9b71-289b-4216-a2cb-74e24451d200/Avocado2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=56a94f9a88cf5680133f2d96c5961aad53925ac97890707509c297c6d71c7042&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": false - }, - "unavailableAfterDays": "", - "availableAfterDays": "", - "capacity": "18", - "additionalDescription": [ - { - "key": "Booking usage", - "title": "Booking usage", - "items": [ - { - "label": "Internal meeting" - }, - { - "label": "External meeting" - } - ] - }, - { - "key": "Additional amenities", - "title": "Additional services", - "description": "Only available upon request.", - "items": [ - { - "label": "Barista Services" - } - ] - } - ], - "timelines": [ - { - "date": "2024-09-06", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "08:30:00", - "status": "DEFAULT" - }, - { - "startTime": "08:30:00", - "endTime": "09:00:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00:00", - "endTime": "09:30:00", - "status": "DEFAULT" - }, - { - "startTime": "09:30:00", - "endTime": "10:00:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00:00", - "endTime": "10:30:00", - "status": "DEFAULT" - }, - { - "startTime": "10:30:00", - "endTime": "11:00:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "11:30:00", - "status": "DEFAULT" - }, - { - "startTime": "11:30:00", - "endTime": "12:00:00", - "status": "DEFAULT" - }, - { - "startTime": "12:00:00", - "endTime": "12:30:00", - "status": "DEFAULT" - }, - { - "startTime": "12:30:00", - "endTime": "13:00:00", - "status": "DEFAULT" - }, - { - "startTime": "13:00:00", - "endTime": "13:30:00", - "status": "DEFAULT" - }, - { - "startTime": "13:30:00", - "endTime": "14:00:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00:00", - "endTime": "14:30:00", - "status": "DEFAULT" - }, - { - "startTime": "14:30:00", - "endTime": "15:00:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00:00", - "endTime": "15:30:00", - "status": "DEFAULT" - }, - { - "startTime": "15:30:00", - "endTime": "16:00:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00:00", - "endTime": "16:30:00", - "status": "DEFAULT" - }, - { - "startTime": "16:30:00", - "endTime": "17:00:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00:00", - "endTime": "17:30:00", - "status": "DEFAULT" - }, - { - "startTime": "17:30:00", - "endTime": "18:00:00", - "status": "DEFAULT" - }, - { - "startTime": "18:00:00", - "endTime": "18:30:00", - "status": "DEFAULT" - }, - { - "startTime": "18:30:00", - "endTime": "19:00:00", - "status": "DEFAULT" - }, - { - "startTime": "19:00:00", - "endTime": "19:30:00", - "status": "DEFAULT" - }, - { - "startTime": "19:30:00", - "endTime": "20:00:00", - "status": "DEFAULT" - }, - { - "startTime": "20:00:00", - "endTime": "20:30:00", - "status": "DEFAULT" - }, - { - "startTime": "20:30:00", - "endTime": "21:00:00", - "status": "DEFAULT" - }, - { - "startTime": "21:00:00", - "endTime": "21:30:00", - "status": "DEFAULT" - }, - { - "startTime": "21:30:00", - "endTime": "22:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "22:00:00", - "interval": 30 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/Dy3E3vRQY0?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=Dy3E3vRQY0&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/Dy3E3vRQY0?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=Dy3E3vRQY0&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "GN9P0vME6K", - "title": "Banana", - "organisationId": "ylWEXKQNDX", - "subtitle": "Mapletree Business City 10, Floor 8", - "resourceSubtype": "Conference Room", - "resourceType": "Rooms", - "resourceTypeId": "vmoQAgr9Dl", - "images": [ - "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/GN9P0vME6K/5d53aabc-48ab-4e38-8036-b3d000f7c123/378a92b9-7901-4a55-8123-c8decb1477fb/Banana.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=6e438cfce49a468cc061d95b44f7ab775051001a917076b16fadb9e11fcad968&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": false - }, - "unavailableAfterDays": "", - "availableAfterDays": "", - "capacity": "6", - "additionalDescription": [ - { - "key": "Booking usage", - "title": "Booking usage", - "items": [ - { - "label": "Internal meeting" - }, - { - "label": "External meeting" - } - ] - }, - { - "key": "Additional amenities", - "title": "Additional services", - "description": "Only available upon request.", - "items": [ - { - "label": "Coffee" - }, - { - "label": "Tea" - } - ] - } - ], - "timelines": [ - { - "date": "2024-09-06", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "08:30:00", - "status": "DEFAULT" - }, - { - "startTime": "08:30:00", - "endTime": "09:00:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00:00", - "endTime": "09:30:00", - "status": "DEFAULT" - }, - { - "startTime": "09:30:00", - "endTime": "10:00:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00:00", - "endTime": "10:30:00", - "status": "DEFAULT" - }, - { - "startTime": "10:30:00", - "endTime": "11:00:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "11:30:00", - "status": "DEFAULT" - }, - { - "startTime": "11:30:00", - "endTime": "12:00:00", - "status": "DEFAULT" - }, - { - "startTime": "12:00:00", - "endTime": "12:30:00", - "status": "DEFAULT" - }, - { - "startTime": "12:30:00", - "endTime": "13:00:00", - "status": "DEFAULT" - }, - { - "startTime": "13:00:00", - "endTime": "13:30:00", - "status": "DEFAULT" - }, - { - "startTime": "13:30:00", - "endTime": "14:00:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00:00", - "endTime": "14:30:00", - "status": "DEFAULT" - }, - { - "startTime": "14:30:00", - "endTime": "15:00:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00:00", - "endTime": "15:30:00", - "status": "DEFAULT" - }, - { - "startTime": "15:30:00", - "endTime": "16:00:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00:00", - "endTime": "16:30:00", - "status": "DEFAULT" - }, - { - "startTime": "16:30:00", - "endTime": "17:00:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00:00", - "endTime": "17:30:00", - "status": "DEFAULT" - }, - { - "startTime": "17:30:00", - "endTime": "18:00:00", - "status": "DEFAULT" - }, - { - "startTime": "18:00:00", - "endTime": "18:30:00", - "status": "DEFAULT" - }, - { - "startTime": "18:30:00", - "endTime": "19:00:00", - "status": "DEFAULT" - }, - { - "startTime": "19:00:00", - "endTime": "19:30:00", - "status": "DEFAULT" - }, - { - "startTime": "19:30:00", - "endTime": "20:00:00", - "status": "DEFAULT" - }, - { - "startTime": "20:00:00", - "endTime": "20:30:00", - "status": "DEFAULT" - }, - { - "startTime": "20:30:00", - "endTime": "21:00:00", - "status": "DEFAULT" - }, - { - "startTime": "21:00:00", - "endTime": "21:30:00", - "status": "DEFAULT" - }, - { - "startTime": "21:30:00", - "endTime": "22:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "22:00:00", - "interval": 30 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/GN9P0vME6K?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=GN9P0vME6K&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/GN9P0vME6K?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=GN9P0vME6K&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "mx0ExmWr9Y", - "title": "Cantaloupe", - "organisationId": "ylWEXKQNDX", - "subtitle": "Mapletree Business City 10, Floor 9", - "resourceSubtype": "Conference Room", - "resourceType": "Rooms", - "resourceTypeId": "vmoQAgr9Dl", - "images": [ - "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/mx0ExmWr9Y/5d53aabc-48ab-4e38-8036-b3d000f7c123/5fad9460-c166-4a82-9aed-0a4579af632c/Cantaloupe.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=af8510ba0a0872726a4ffb86efc6d264b48be9dc13569018e91b1a4441d0afb6&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": false - }, - "unavailableAfterDays": "", - "availableAfterDays": "", - "capacity": "10", - "additionalDescription": [ - { - "key": "Booking usage", - "title": "Booking usage", - "items": [ - { - "label": "Internal meeting" - }, - { - "label": "External meeting" - } - ] - }, - { - "key": "Available layouts", - "title": "Available layouts", - "description": "Additional time may be added when checking for availability due to setup and teardown of layout.", - "items": [ - { - "label": "Boardroom (10 pax)" - }, - { - "label": "Classroom (10 pax)" - }, - { - "label": "U-shape (10 pax)" - } - ] - }, - { - "key": "View layout details", - "title": "View layout details", - "items": [ - { - "label": "Boardroom (10 pax)", - "description": [ - { - "label": "Setup time", - "value": "None" - }, - { - "label": "Teardown time", - "value": "None" - } - ], - "imageUrls": [ - "https://rbs-stg.dwp.gov.sg/rbs/api/v1/layout/9l4P1xbr16/layout-url?path=resource-layouts/9l4P1xbr16/5d53aabc-48ab-4e38-8036-b3d000f7c123/1e64e6e8-a4bf-4668-b4e0-c2c83dd75cdd/Boardroom.png" - ] - }, - { - "label": "Classroom (10 pax)", - "description": [ - { - "label": "Setup time", - "value": "15 minutes" - }, - { - "label": "Teardown time", - "value": "15 minutes" - } - ], - "imageUrls": [ - "https://rbs-stg.dwp.gov.sg/rbs/api/v1/layout/mOkQkXAEYZ/layout-url?path=resource-layouts/mOkQkXAEYZ/5d53aabc-48ab-4e38-8036-b3d000f7c123/1e64e6e8-a4bf-4668-b4e0-c2c83dd75cdd/Classroom.png" - ] - }, - { - "label": "U-shape (10 pax)", - "description": [ - { - "label": "Setup time", - "value": "15 minutes" - }, - { - "label": "Teardown time", - "value": "15 minutes" - } - ], - "imageUrls": [ - "https://rbs-stg.dwp.gov.sg/rbs/api/v1/layout/NgYrJodP0w/layout-url?path=resource-layouts/NgYrJodP0w/5d53aabc-48ab-4e38-8036-b3d000f7c123/1e64e6e8-a4bf-4668-b4e0-c2c83dd75cdd/U-shape.png" - ] - } - ] - } - ], - "timelines": [ - { - "date": "2024-09-06", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "09:00:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00:00", - "endTime": "10:00:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00:00", - "endTime": "11:00:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "12:00:00", - "status": "DEFAULT" - }, - { - "startTime": "12:00:00", - "endTime": "13:00:00", - "status": "DEFAULT" - }, - { - "startTime": "13:00:00", - "endTime": "14:00:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00:00", - "endTime": "15:00:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00:00", - "endTime": "16:00:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00:00", - "endTime": "17:00:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00:00", - "endTime": "18:00:00", - "status": "DEFAULT" - }, - { - "startTime": "18:00:00", - "endTime": "19:00:00", - "status": "DEFAULT" - }, - { - "startTime": "19:00:00", - "endTime": "20:00:00", - "status": "DEFAULT" - }, - { - "startTime": "20:00:00", - "endTime": "21:00:00", - "status": "DEFAULT" - }, - { - "startTime": "21:00:00", - "endTime": "22:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "22:00:00", - "interval": 60 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/mx0ExmWr9Y?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=mx0ExmWr9Y&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/mx0ExmWr9Y?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=mx0ExmWr9Y&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "An0rbeOElJ", - "title": "Cherry", - "organisationId": "ylWEXKQNDX", - "subtitle": "Mapletree Business City 10, Floor 8", - "resourceSubtype": "Conference Room", - "resourceType": "Rooms", - "resourceTypeId": "vmoQAgr9Dl", - "images": [ - "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/An0rbeOElJ/5d53aabc-48ab-4e38-8036-b3d000f7c123/7053dc86-153f-4194-9ac1-73d2b07a6236/Cherry.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=5a94a0ec3089214927586c4f5add8b2162a31a0c84933728abf45608831f748a&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": true - }, - "unavailableAfterDays": "90", - "availableAfterDays": "", - "capacity": "10", - "additionalDescription": [ - { - "key": "Booking usage", - "title": "Booking usage", - "items": [ - { - "label": "Internal meeting" - }, - { - "label": "External meeting" - } - ] - } - ], - "timelines": [ - { - "date": "2024-09-06", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "08:30:00", - "status": "DEFAULT" - }, - { - "startTime": "08:30:00", - "endTime": "09:00:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00:00", - "endTime": "09:30:00", - "status": "DEFAULT" - }, - { - "startTime": "09:30:00", - "endTime": "10:00:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00:00", - "endTime": "10:30:00", - "status": "DEFAULT" - }, - { - "startTime": "10:30:00", - "endTime": "11:00:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "11:30:00", - "status": "DEFAULT" - }, - { - "startTime": "11:30:00", - "endTime": "12:00:00", - "status": "DEFAULT" - }, - { - "startTime": "12:00:00", - "endTime": "12:30:00", - "status": "DEFAULT" - }, - { - "startTime": "12:30:00", - "endTime": "13:00:00", - "status": "DEFAULT" - }, - { - "startTime": "13:00:00", - "endTime": "13:30:00", - "status": "DEFAULT" - }, - { - "startTime": "13:30:00", - "endTime": "14:00:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00:00", - "endTime": "14:30:00", - "status": "DEFAULT" - }, - { - "startTime": "14:30:00", - "endTime": "15:00:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00:00", - "endTime": "15:30:00", - "status": "DEFAULT" - }, - { - "startTime": "15:30:00", - "endTime": "16:00:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00:00", - "endTime": "16:30:00", - "status": "DEFAULT" - }, - { - "startTime": "16:30:00", - "endTime": "17:00:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00:00", - "endTime": "17:30:00", - "status": "DEFAULT" - }, - { - "startTime": "17:30:00", - "endTime": "18:00:00", - "status": "DEFAULT" - }, - { - "startTime": "18:00:00", - "endTime": "18:30:00", - "status": "DEFAULT" - }, - { - "startTime": "18:30:00", - "endTime": "19:00:00", - "status": "DEFAULT" - }, - { - "startTime": "19:00:00", - "endTime": "19:30:00", - "status": "DEFAULT" - }, - { - "startTime": "19:30:00", - "endTime": "20:00:00", - "status": "DEFAULT" - }, - { - "startTime": "20:00:00", - "endTime": "20:30:00", - "status": "DEFAULT" - }, - { - "startTime": "20:30:00", - "endTime": "21:00:00", - "status": "DEFAULT" - }, - { - "startTime": "21:00:00", - "endTime": "21:30:00", - "status": "DEFAULT" - }, - { - "startTime": "21:30:00", - "endTime": "22:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "22:00:00", - "interval": 30 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/An0rbeOElJ?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=An0rbeOElJ&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/An0rbeOElJ?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=An0rbeOElJ&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "GN9P0vDE6K", - "title": "Dragonfruit", - "organisationId": "ylWEXKQNDX", - "subtitle": "Mapletree Business City 10, Floor 8", - "resourceSubtype": "Conference Room", - "resourceType": "Rooms", - "resourceTypeId": "vmoQAgr9Dl", - "images": [ - "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/GN9P0vDE6K/5d53aabc-48ab-4e38-8036-b3d000f7c123/02c7fa54-9d6a-4a50-892c-0d1071d94d5f/Dragonfruit.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=6a12f85542e0563c2d9a39181e5ac5ccc001fed925512a9bf495bc667795b5e4&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": false - }, - "unavailableAfterDays": "", - "availableAfterDays": "", - "capacity": "10", - "additionalDescription": [ - { - "key": "Booking usage", - "title": "Booking usage", - "items": [ - { - "label": "Internal meeting" - }, - { - "label": "External meeting" - } - ] - }, - { - "key": "Built-in amenities", - "title": "Built-in amenities", - "items": [ - { - "label": "Projector" - }, - { - "label": "Laser pointer" - }, - { - "label": "Table" - }, - { - "label": "Microphone" - }, - { - "label": "Chair" - } - ] - }, - { - "key": "Additional amenities", - "title": "Additional services", - "description": "Only available upon request.", - "items": [ - { - "label": "Coffee" - }, - { - "label": "Tea" - } - ] - }, - { - "key": "Available layouts", - "title": "Available layouts", - "description": "Additional time may be added when checking for availability due to setup and teardown of layout.", - "items": [ - { - "label": "Classroom (12 pax)" - }, - { - "label": "Default (10 pax)" - }, - { - "label": "Cabaret (16 pax)" - } - ] - }, - { - "key": "View layout details", - "title": "View layout details", - "items": [ - { - "label": "Classroom (12 pax)", - "description": [ - { - "label": "Setup time", - "value": "15 minutes" - }, - { - "label": "Teardown time", - "value": "15 minutes" - } - ], - "imageUrls": [ - "https://rbs-stg.dwp.gov.sg/rbs/api/v1/layout/9znPmNeQBv/layout-url?path=resource-layouts/9znPmNeQBv/5d53aabc-48ab-4e38-8036-b3d000f7c123/0ed1cf96-f8cf-4f5a-bb9f-b448a6246f1f/Classroom.png" - ] - }, - { - "label": "Default (10 pax)", - "description": [ - { - "label": "Setup time", - "value": "None" - }, - { - "label": "Teardown time", - "value": "None" - } - ], - "imageUrls": [ - "https://rbs-stg.dwp.gov.sg/rbs/api/v1/layout/0B8E716Pbp/layout-url?path=resource-layouts/0B8E716Pbp/5d53aabc-48ab-4e38-8036-b3d000f7c123/021a5edb-99ba-4870-bb49-cf56762b652e/Boardroom.png" - ] - }, - { - "label": "Cabaret (16 pax)", - "description": [ - { - "label": "Setup time", - "value": "15 minutes" - }, - { - "label": "Teardown time", - "value": "15 minutes" - } - ], - "imageUrls": [ - "https://rbs-stg.dwp.gov.sg/rbs/api/v1/layout/vmoQAgyr9D/layout-url?path=resource-layouts/vmoQAgyr9D/5d53aabc-48ab-4e38-8036-b3d000f7c123/7e99c61a-7102-4ba6-bb69-7619491b8509/Cabaret.png" - ] - } - ] - } - ], - "timelines": [ - { - "date": "2024-09-06", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "08:30:00", - "status": "DEFAULT" - }, - { - "startTime": "08:30:00", - "endTime": "09:00:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00:00", - "endTime": "09:30:00", - "status": "DEFAULT" - }, - { - "startTime": "09:30:00", - "endTime": "10:00:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00:00", - "endTime": "10:30:00", - "status": "DEFAULT" - }, - { - "startTime": "10:30:00", - "endTime": "11:00:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "11:30:00", - "status": "DEFAULT" - }, - { - "startTime": "11:30:00", - "endTime": "12:00:00", - "status": "DEFAULT" - }, - { - "startTime": "12:00:00", - "endTime": "12:30:00", - "status": "DEFAULT" - }, - { - "startTime": "12:30:00", - "endTime": "13:00:00", - "status": "DEFAULT" - }, - { - "startTime": "13:00:00", - "endTime": "13:30:00", - "status": "DEFAULT" - }, - { - "startTime": "13:30:00", - "endTime": "14:00:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00:00", - "endTime": "14:30:00", - "status": "DEFAULT" - }, - { - "startTime": "14:30:00", - "endTime": "15:00:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00:00", - "endTime": "15:30:00", - "status": "DEFAULT" - }, - { - "startTime": "15:30:00", - "endTime": "16:00:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00:00", - "endTime": "16:30:00", - "status": "DEFAULT" - }, - { - "startTime": "16:30:00", - "endTime": "17:00:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00:00", - "endTime": "17:30:00", - "status": "DEFAULT" - }, - { - "startTime": "17:30:00", - "endTime": "18:00:00", - "status": "DEFAULT" - }, - { - "startTime": "18:00:00", - "endTime": "18:30:00", - "status": "DEFAULT" - }, - { - "startTime": "18:30:00", - "endTime": "19:00:00", - "status": "DEFAULT" - }, - { - "startTime": "19:00:00", - "endTime": "19:30:00", - "status": "DEFAULT" - }, - { - "startTime": "19:30:00", - "endTime": "20:00:00", - "status": "DEFAULT" - }, - { - "startTime": "20:00:00", - "endTime": "20:30:00", - "status": "DEFAULT" - }, - { - "startTime": "20:30:00", - "endTime": "21:00:00", - "status": "DEFAULT" - }, - { - "startTime": "21:00:00", - "endTime": "21:30:00", - "status": "DEFAULT" - }, - { - "startTime": "21:30:00", - "endTime": "22:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "22:00:00", - "interval": 30 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/GN9P0vDE6K?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=GN9P0vDE6K&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/GN9P0vDE6K?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=GN9P0vDE6K&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "vK4rGewQ02", - "title": "Durian", - "organisationId": "ylWEXKQNDX", - "subtitle": "Eclipse Building", - "resourceSubtype": "Meeting Room", - "resourceType": "Rooms", - "resourceTypeId": "vmoQAgr9Dl", - "images": [ - "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/vK4rGewQ02/5d53aabc-48ab-4e38-8036-b3d000f7c123/e7be5a59-bff3-43f0-b86c-f375775a054b/Durian.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=68d3552e5f82364ff858fb2a537f7ccc4c0d5fe5db054a9d24d990b74861bd7a&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": false - }, - "unavailableAfterDays": "", - "availableAfterDays": "", - "capacity": "10", - "additionalDescription": [], - "timelines": [ - { - "date": "2024-09-06", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "08:30:00", - "status": "DEFAULT" - }, - { - "startTime": "08:30:00", - "endTime": "09:00:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00:00", - "endTime": "09:30:00", - "status": "DEFAULT" - }, - { - "startTime": "09:30:00", - "endTime": "10:00:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00:00", - "endTime": "10:30:00", - "status": "DEFAULT" - }, - { - "startTime": "10:30:00", - "endTime": "11:00:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "11:30:00", - "status": "DEFAULT" - }, - { - "startTime": "11:30:00", - "endTime": "12:00:00", - "status": "DEFAULT" - }, - { - "startTime": "12:00:00", - "endTime": "12:30:00", - "status": "DEFAULT" - }, - { - "startTime": "12:30:00", - "endTime": "13:00:00", - "status": "DEFAULT" - }, - { - "startTime": "13:00:00", - "endTime": "13:30:00", - "status": "DEFAULT" - }, - { - "startTime": "13:30:00", - "endTime": "14:00:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00:00", - "endTime": "14:30:00", - "status": "DEFAULT" - }, - { - "startTime": "14:30:00", - "endTime": "15:00:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00:00", - "endTime": "15:30:00", - "status": "DEFAULT" - }, - { - "startTime": "15:30:00", - "endTime": "16:00:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00:00", - "endTime": "16:30:00", - "status": "DEFAULT" - }, - { - "startTime": "16:30:00", - "endTime": "17:00:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00:00", - "endTime": "17:30:00", - "status": "DEFAULT" - }, - { - "startTime": "17:30:00", - "endTime": "18:00:00", - "status": "DEFAULT" - }, - { - "startTime": "18:00:00", - "endTime": "18:30:00", - "status": "DEFAULT" - }, - { - "startTime": "18:30:00", - "endTime": "19:00:00", - "status": "DEFAULT" - }, - { - "startTime": "19:00:00", - "endTime": "19:30:00", - "status": "DEFAULT" - }, - { - "startTime": "19:30:00", - "endTime": "20:00:00", - "status": "DEFAULT" - }, - { - "startTime": "20:00:00", - "endTime": "20:30:00", - "status": "DEFAULT" - }, - { - "startTime": "20:30:00", - "endTime": "21:00:00", - "status": "DEFAULT" - }, - { - "startTime": "21:00:00", - "endTime": "21:30:00", - "status": "DEFAULT" - }, - { - "startTime": "21:30:00", - "endTime": "22:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "22:00:00", - "interval": 30 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/vK4rGewQ02?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=vK4rGewQ02&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/vK4rGewQ02?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=vK4rGewQ02&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "0B8E719Pbp", - "title": "Executive room 1", - "organisationId": "ylWEXKQNDX", - "subtitle": "Eclipse Building", - "resourceSubtype": "Executive Room", - "resourceType": "Rooms", - "resourceTypeId": "vmoQAgr9Dl", - "images": null, - "tags": { - "Approval required": false, - "Manual start": true - }, - "unavailableAfterDays": "90", - "availableAfterDays": "", - "capacity": "5", - "additionalDescription": [ - { - "key": "Booking usage", - "title": "Booking usage", - "items": [ - { - "label": "Internal meeting" - }, - { - "label": "External meeting" - } - ] - } - ], - "timelines": [ - { - "date": "2024-09-06", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "09:00:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00:00", - "endTime": "10:00:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00:00", - "endTime": "11:00:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "12:00:00", - "status": "DEFAULT" - }, - { - "startTime": "12:00:00", - "endTime": "13:00:00", - "status": "DEFAULT" - }, - { - "startTime": "13:00:00", - "endTime": "14:00:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00:00", - "endTime": "15:00:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00:00", - "endTime": "16:00:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00:00", - "endTime": "17:00:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00:00", - "endTime": "18:00:00", - "status": "DEFAULT" - }, - { - "startTime": "18:00:00", - "endTime": "19:00:00", - "status": "DEFAULT" - }, - { - "startTime": "19:00:00", - "endTime": "20:00:00", - "status": "DEFAULT" - }, - { - "startTime": "20:00:00", - "endTime": "21:00:00", - "status": "DEFAULT" - }, - { - "startTime": "21:00:00", - "endTime": "22:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "22:00:00", - "interval": 60 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/0B8E719Pbp?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=0B8E719Pbp&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/0B8E719Pbp?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=0B8E719Pbp&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "vK4rGoMr02", - "title": "Executive room 6", - "organisationId": "ylWEXKQNDX", - "subtitle": "Eclipse Building", - "resourceSubtype": "Executive Room", - "resourceType": "Rooms", - "resourceTypeId": "vmoQAgr9Dl", - "images": null, - "tags": { - "Approval required": true, - "Manual start": false - }, - "unavailableAfterDays": "90", - "availableAfterDays": "", - "capacity": "6", - "additionalDescription": [ - { - "key": "Booking usage", - "title": "Booking usage", - "items": [ - { - "label": "Internal meeting" - }, - { - "label": "External meeting" - } - ] - } - ], - "timelines": [ - { - "date": "2024-09-06", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "09:00:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00:00", - "endTime": "10:00:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00:00", - "endTime": "11:00:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "12:00:00", - "status": "DEFAULT" - }, - { - "startTime": "12:00:00", - "endTime": "13:00:00", - "status": "DEFAULT" - }, - { - "startTime": "13:00:00", - "endTime": "14:00:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00:00", - "endTime": "15:00:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00:00", - "endTime": "16:00:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00:00", - "endTime": "17:00:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00:00", - "endTime": "18:00:00", - "status": "DEFAULT" - }, - { - "startTime": "18:00:00", - "endTime": "19:00:00", - "status": "DEFAULT" - }, - { - "startTime": "19:00:00", - "endTime": "20:00:00", - "status": "DEFAULT" - }, - { - "startTime": "20:00:00", - "endTime": "21:00:00", - "status": "DEFAULT" - }, - { - "startTime": "21:00:00", - "endTime": "22:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "22:00:00", - "interval": 60 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/vK4rGoMr02?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=vK4rGoMr02&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/vK4rGoMr02?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=vK4rGoMr02&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - }, - { - "_provider": "rmbme", - "id": "YRVPVjVPGe", - "title": "Grape", - "organisationId": "ylWEXKQNDX", - "subtitle": "Mapletree Business City 10, Floor 8", - "resourceSubtype": "Conference Room", - "resourceType": "Rooms", - "resourceTypeId": "vmoQAgr9Dl", - "images": [ - "https://mol-stg-rbs-backend-files.s3.ap-southeast-1.amazonaws.com/resource/YRVPVjVPGe/5d53aabc-48ab-4e38-8036-b3d000f7c123/b7635427-9512-4205-9c78-1480e4953c73/Grape.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAXKS4ZZQSD7BMLLBM%2F20240903%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20240903T023753Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkcwRQIgfBMojE3SRXwhEN4Z332Q6Wo0Qg3EMh2Y6qF1Yj0CpQwCIQCa3nEw%2BwK7TXMTgAzYZe%2BAzDWxerb%2Bdo5DS2ouNRyJJyrzAwi0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAIaDDUwMzc3OTU0NDEwMCIMrVWU%2BpHyl02dUNsrKscDdFEBk11jllrTFNthtU%2Fc%2Bo09CAXSFvHTPiQZAM1Eboy8BUzx4TYmaV7BBR4KvuMTtbCk6DyLlSJATmJIJp90JIIXEAw0iJ%2FWdnF0E3%2BLtgXoYpL0eDeLZulu2YfIKFGdNBUFumdljKFORqJ5DjcFzE41WjuNwB%2B%2FE0KAUmruNP3ZHLLldW4CJI6w2tMk%2BJz8%2FqlXXVXa4wQMveyQg0KPXGbfPiUqaFSubr117ohi9t6r8S0kWBeDttTXoTDIkPAf4dVpJ%2FcpzxbWd0V30Geu6jQrFqAdZuptMplj4Imb4cSxoxL4EHMU2Alt4qMJxMoIUZR%2BkAr8uOl03GV2q8iUwqE8mEPIFT%2BDZh9avXKTJCeIIYSx325bAO3TfHAe89Sj456ZUQ8%2FNX8RPamm8lPO3ES8PDlDncN%2FuZztxbxL4olXHutwuhwn49zlLviT7KUV32JThtZFbyGJo2Wl8EhhOHT3jAnQ4RJCit%2BXpGVHnuMXc6H%2Ft4l09oTUxzYdHwyLBE%2BUH6FQMtEVvEcCILjmtsVd52tQ8DsqPkWnhdA9x5A9F7GpGMdCiT7C5CjlnMjxDb%2BNKFu5GSSDx7VLY9I1g5lAHn29ezIwm%2BbZtgY6pQE7VzZ8tdgt9RRMTCIhpPZLUQynKIC1yeqOT6ZenOyMzL6V8nunnwVSV4%2BiSrKj6r%2FmiGPbIZZp9RN2SIZdHiHk%2F1wdYKpsZ7kVNazpLFccBc6siBikiMUzU2%2FRRawKazkRFY6j5TKN%2B7mcLvfaUy8TFIPs7q1Z9sF9893LxH9HXmIirayN%2Byg7GW93ORK7i3uQ09SnTiABmJAkswGOu%2Br1cAjOa0s%3D&X-Amz-Signature=b44aaa42675bae307a1bfcc72475cc435b4d2e2db5abec6f3d99c6508bc0d05e&X-Amz-SignedHeaders=host&x-id=GetObject" - ], - "tags": { - "Approval required": false, - "Manual start": false - }, - "unavailableAfterDays": "", - "availableAfterDays": "", - "capacity": "10", - "additionalDescription": [ - { - "key": "Booking usage", - "title": "Booking usage", - "items": [ - { - "label": "Internal meeting" - }, - { - "label": "External meeting" - } - ] - }, - { - "key": "Built-in amenities", - "title": "Built-in amenities", - "items": [ - { - "label": "Projector" - }, - { - "label": "Laser pointer" - }, - { - "label": "Chair" - } - ] - } - ], - "timelines": [ - { - "date": "2024-09-06", - "disabled": false, - "slots": [ - { - "startTime": "08:00:00", - "endTime": "08:30:00", - "status": "DEFAULT" - }, - { - "startTime": "08:30:00", - "endTime": "09:00:00", - "status": "DEFAULT" - }, - { - "startTime": "09:00:00", - "endTime": "09:30:00", - "status": "DEFAULT" - }, - { - "startTime": "09:30:00", - "endTime": "10:00:00", - "status": "DEFAULT" - }, - { - "startTime": "10:00:00", - "endTime": "10:30:00", - "status": "DEFAULT" - }, - { - "startTime": "10:30:00", - "endTime": "11:00:00", - "status": "DEFAULT" - }, - { - "startTime": "11:00:00", - "endTime": "11:30:00", - "status": "DEFAULT" - }, - { - "startTime": "11:30:00", - "endTime": "12:00:00", - "status": "DEFAULT" - }, - { - "startTime": "12:00:00", - "endTime": "12:30:00", - "status": "DEFAULT" - }, - { - "startTime": "12:30:00", - "endTime": "13:00:00", - "status": "DEFAULT" - }, - { - "startTime": "13:00:00", - "endTime": "13:30:00", - "status": "DEFAULT" - }, - { - "startTime": "13:30:00", - "endTime": "14:00:00", - "status": "DEFAULT" - }, - { - "startTime": "14:00:00", - "endTime": "14:30:00", - "status": "DEFAULT" - }, - { - "startTime": "14:30:00", - "endTime": "15:00:00", - "status": "DEFAULT" - }, - { - "startTime": "15:00:00", - "endTime": "15:30:00", - "status": "DEFAULT" - }, - { - "startTime": "15:30:00", - "endTime": "16:00:00", - "status": "DEFAULT" - }, - { - "startTime": "16:00:00", - "endTime": "16:30:00", - "status": "DEFAULT" - }, - { - "startTime": "16:30:00", - "endTime": "17:00:00", - "status": "DEFAULT" - }, - { - "startTime": "17:00:00", - "endTime": "17:30:00", - "status": "DEFAULT" - }, - { - "startTime": "17:30:00", - "endTime": "18:00:00", - "status": "DEFAULT" - }, - { - "startTime": "18:00:00", - "endTime": "18:30:00", - "status": "DEFAULT" - }, - { - "startTime": "18:30:00", - "endTime": "19:00:00", - "status": "DEFAULT" - }, - { - "startTime": "19:00:00", - "endTime": "19:30:00", - "status": "DEFAULT" - }, - { - "startTime": "19:30:00", - "endTime": "20:00:00", - "status": "DEFAULT" - }, - { - "startTime": "20:00:00", - "endTime": "20:30:00", - "status": "DEFAULT" - }, - { - "startTime": "20:30:00", - "endTime": "21:00:00", - "status": "DEFAULT" - }, - { - "startTime": "21:00:00", - "endTime": "21:30:00", - "status": "DEFAULT" - }, - { - "startTime": "21:30:00", - "endTime": "22:00:00", - "status": "DEFAULT" - } - ], - "startTime": "08:00:00", - "endTime": "22:00:00", - "interval": 30 - } - ], - "itemTemplate": "rooms-interval", - "callToActions": { - "desktop": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/YRVPVjVPGe?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Unavailable", - "style": "default", - "enabled": false, - "visible": false, - "icon": null - } - }, - "actions": [] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=YRVPVjVPGe&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ], - "mobile": [ - { - "trigger": { - "type": "BUTTON", - "value": { - "label": "Book", - "style": "default", - "enabled": true, - "visible": true, - "icon": null - } - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/rbs/web/book/YRVPVjVPGe?date=2024-09-06&startTime=&endTime=" - }, - "continueOnError": null - } - ] - }, - { - "trigger": { - "type": "LIST_ITEM", - "value": null - }, - "actions": [ - { - "type": "REDIRECT", - "payload": { - "path": "https://rbs-stg.dwp.gov.sg/listing/rbs/detail?provider=rmbme&resourceId=YRVPVjVPGe&selectedDate=2024-09-06&calendarMode=day" - }, - "continueOnError": null - } - ] - } - ] - } - } - ] -} diff --git a/stories/timetable/new-even-days.tsx b/stories/timetable/timetable-even-days-data.tsx similarity index 100% rename from stories/timetable/new-even-days.tsx rename to stories/timetable/timetable-even-days-data.tsx diff --git a/stories/timetable/new-odd-days.tsx b/stories/timetable/timetable-odd-days-data.tsx similarity index 100% rename from stories/timetable/new-odd-days.tsx rename to stories/timetable/timetable-odd-days-data.tsx From c7a056b0ee8156a24e292349137e9c225f6e9e3c Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Fri, 4 Oct 2024 13:11:15 +0800 Subject: [PATCH 09/17] [BOOKINGSG-6090][JZ] Improve mocks and some clean up --- src/timetable/timetable-row/row-bar.tsx | 2 +- stories/timetable/mock-data.tsx | 12 +- stories/timetable/timetable-default-data.tsx | 284 +++ .../timetable/timetable-even-days-data.tsx | 507 ++--- .../timetable/timetable-lazy-load-data.json | 288 +-- stories/timetable/timetable-odd-days-data.tsx | 1760 +++++++---------- stories/timetable/timetable.mdx | 30 +- stories/timetable/timetable.stories.tsx | 21 +- 8 files changed, 1305 insertions(+), 1599 deletions(-) create mode 100644 stories/timetable/timetable-default-data.tsx diff --git a/src/timetable/timetable-row/row-bar.tsx b/src/timetable/timetable-row/row-bar.tsx index 34e753dc5..a6ea1ee1b 100644 --- a/src/timetable/timetable-row/row-bar.tsx +++ b/src/timetable/timetable-row/row-bar.tsx @@ -64,7 +64,7 @@ export const RowBar = ({ rowCellArray.push(cell); const nextSlotStartTime = dayjs( - rowCells[index + 1]?.startTime, + rowCells[index + 1]?.startTime || rowMaxTime, // Get next cell start time, if next cell don't exist, use current row max time "HH:mm" ); const parsedEndTime = dayjs(endTime, "HH:mm"); diff --git a/stories/timetable/mock-data.tsx b/stories/timetable/mock-data.tsx index 8c16bba7e..ea53eba30 100644 --- a/stories/timetable/mock-data.tsx +++ b/stories/timetable/mock-data.tsx @@ -4,8 +4,8 @@ import styled from "styled-components"; import { Text } from "../../src/text"; import { CellType, TimeTableProps } from "../../src/timetable/types"; import { evenDaysData } from "./timetable-even-days-data"; -import { oddDaysData } from "./timetable-odd-days-data"; import lazyLoadData from "./timetable-lazy-load-data.json"; +import { oddDaysData } from "./timetable-odd-days-data"; export const StyledHoverContent = styled.div` display: flex; @@ -32,18 +32,14 @@ export const getTimeTableData = (currentDate?: string): TimeTableProps => { return { date: date.format("YYYY-MM-DD"), - minTime: "06:20:00", - maxTime: "22:00:00", - maxDate: date.add(1, "month").format("YYYY-MM-DD"), - minDate: date.add(-11, "month").format("YYYY-MM-DD"), - totalRecords: 10, + minTime: "06:00:00", + maxTime: "23:00:00", rowData: fetchRowData(date), emptyContent: { illustrationScheme: "bookingsg", description: "There’s no data to show. You may need to adjust your search or filters. If you believe this is a mistake, try refreshing the page.", }, - isLoading: false, }; }; @@ -82,7 +78,7 @@ export const lazyLoad = (page: number) => { id: slot.id, startTime: slot.startTime, endTime: slot.endTime, - title: slot.label, + title: slot.title, subtitle: slot.label, status: cellTypeMap[slot.status], }; diff --git a/stories/timetable/timetable-default-data.tsx b/stories/timetable/timetable-default-data.tsx new file mode 100644 index 000000000..6112ac51d --- /dev/null +++ b/stories/timetable/timetable-default-data.tsx @@ -0,0 +1,284 @@ +import { CellType } from "../../src"; + +export const timetableDefaultData = [ + { + name: "lorem", + rowMinTime: "08:00", + rowMaxTime: "18:00", + rowCells: [ + { + startTime: "08:00", + endTime: "09:00", + status: "default" as CellType, + }, + { + title: "15 mins", + startTime: "09:00", + endTime: "09:15", + status: "filled" as CellType, + }, + { + title: "60 mins", + startTime: "09:15", + endTime: "10:15", + status: "filled" as CellType, + }, + { + startTime: "10:15", + endTime: "11:00", + status: "default" as CellType, + }, + { + title: "15 mins", + startTime: "13:00", + endTime: "13:15", + status: "filled" as CellType, + }, + { + title: "30 mins", + startTime: "13:15", + endTime: "13:45", + status: "filled" as CellType, + }, + { + startTime: "13:45", + endTime: "14:00", + status: "default" as CellType, + }, + { + startTime: "14:00", + endTime: "15:00", + status: "default" as CellType, + }, + { + startTime: "15:00", + endTime: "16:00", + status: "default" as CellType, + }, + { + title: "120 mins", + startTime: "16:00", + endTime: "18:00", + status: "filled" as CellType, + }, + ], + }, + { + name: "ipsum", + rowMinTime: "06:00", + rowMaxTime: "17:45", + rowCells: [ + { + startTime: "06:00", + endTime: "07:00", + status: "default" as CellType, + }, + { + startTime: "07:00", + endTime: "08:00", + status: "default" as CellType, + }, + { + startTime: "08:00", + endTime: "09:00", + status: "default" as CellType, + }, + { + title: "300 mins", + startTime: "09:00", + endTime: "14:00", + status: "filled" as CellType, + }, + { + startTime: "14:00", + endTime: "16:15", + status: "blocked" as CellType, + }, + { + title: "60 mins", + startTime: "16:45", + endTime: "17:45", + status: "filled" as CellType, + }, + ], + }, + { + name: "dolor", + rowMinTime: "07:30", + rowMaxTime: "19:30", + rowCells: [ + { + startTime: "07:30", + endTime: "08:00", + status: "default" as CellType, + }, + { + startTime: "08:00", + endTime: "09:00", + status: "default" as CellType, + }, + { + title: "45 mins", + startTime: "09:00", + endTime: "09:45", + status: "filled" as CellType, + }, + { + startTime: "10:15", + endTime: "11:00", + status: "default" as CellType, + }, + { + startTime: "11:00", + endTime: "12:00", + status: "default" as CellType, + }, + { + title: "30 mins", + startTime: "13:15", + endTime: "13:45", + status: "filled" as CellType, + }, + { + startTime: "14:00", + endTime: "15:00", + status: "default" as CellType, + }, + { + startTime: "15:00", + endTime: "16:00", + status: "default" as CellType, + }, + { + title: "210 mins", + startTime: "16:00", + endTime: "19:30", + status: "filled" as CellType, + }, + ], + }, + { + name: "sit", + rowMinTime: "08:30", + rowMaxTime: "21:00", + rowCells: [ + { + title: "330 mins", + startTime: "08:30", + endTime: "14:00", + status: "filled" as CellType, + }, + { + startTime: "14:00", + endTime: "15:00", + status: "default" as CellType, + }, + { + startTime: "15:00", + endTime: "16:00", + status: "default" as CellType, + }, + { + startTime: "16:00", + endTime: "17:00", + status: "default" as CellType, + }, + { + startTime: "17:00", + endTime: "18:00", + status: "default" as CellType, + }, + ], + }, + { + name: "amet", + rowMinTime: "06:15", + rowMaxTime: "22:30", + rowCells: [ + { + startTime: "06:15", + endTime: "07:00", + status: "default" as CellType, + }, + { + title: "15 mins", + startTime: "08:00", + endTime: "08:15", + status: "filled" as CellType, + }, + { + title: "15 mins", + startTime: "08:15", + endTime: "08:30", + status: "filled" as CellType, + }, + { + title: "15 mins", + startTime: "08:30", + endTime: "08:45", + status: "filled" as CellType, + }, + { + title: "15 mins", + startTime: "08:45", + endTime: "09:00", + status: "filled" as CellType, + }, + { + title: "15 mins", + startTime: "09:00", + endTime: "09:15", + status: "filled" as CellType, + }, + { + title: "60 mins", + startTime: "09:15", + endTime: "10:15", + status: "filled" as CellType, + }, + { + startTime: "10:15", + endTime: "11:00", + status: "default" as CellType, + }, + { + startTime: "11:00", + endTime: "12:00", + status: "default" as CellType, + }, + { + title: "15 mins", + startTime: "13:00", + endTime: "13:15", + status: "filled" as CellType, + }, + { + title: "30 mins", + startTime: "13:15", + endTime: "13:45", + status: "filled" as CellType, + }, + { + startTime: "13:45", + endTime: "14:00", + status: "default" as CellType, + }, + { + startTime: "14:00", + endTime: "15:00", + status: "default" as CellType, + }, + { + startTime: "15:00", + endTime: "16:00", + status: "default" as CellType, + }, + { + title: "390 mins", + startTime: "16:00", + endTime: "22:30", + status: "filled" as CellType, + }, + ], + }, +]; diff --git a/stories/timetable/timetable-even-days-data.tsx b/stories/timetable/timetable-even-days-data.tsx index a2a4e5d5b..1b4980b65 100644 --- a/stories/timetable/timetable-even-days-data.tsx +++ b/stories/timetable/timetable-even-days-data.tsx @@ -3,8 +3,7 @@ import { CellType, TimeTableRowCellData, TimeTableRowData } from "../../src"; export const evenDaysData = [ { - id: "Dy3E3RvQY0", - name: "2Hr-interval", + name: "Roti Prata", rowMinTime: "08:00:00", rowMaxTime: "16:30:00", subtitle: ( @@ -18,114 +17,105 @@ export const evenDaysData = [ }, rowCells: [ { - id: "Dy3E3RvQY0", startTime: "08:00:00", endTime: "08:15:00", - title: "booking title", - subtitle: "booking owner name", + title: "title", + subtitle: "subtitle", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3RvQY0", startTime: "08:15:00", endTime: "08:30:00", - title: "booking title", - subtitle: "booking owner name", + title: "title", + subtitle: "subtitle", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3RvQY0", startTime: "08:30:00", endTime: "08:45:00", - title: "booking title", - subtitle: "booking owner name", + title: "title", + subtitle: "subtitle", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3RvQY0", startTime: "08:45:00", endTime: "09:00:00", - title: "booking title", - subtitle: "booking owner name", + title: "title", + subtitle: "subtitle", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3RvQY0", startTime: "09:30:00", endTime: "10:30:00", - title: "booking title", - subtitle: "booking owner name", + title: "title", + subtitle: "subtitle", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3RvQY0", startTime: "10:45:00", endTime: "11:00:00", - title: "booking title", - subtitle: "booking owner name", + title: "title", + subtitle: "subtitle", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3RvQY0", startTime: "11:00:00", endTime: "11:30:00", - title: "booking title", - subtitle: "booking owner name", + title: "title", + subtitle: "subtitle", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3RvQY0", startTime: "16:00:00", endTime: "16:30:00", - title: "booking title", - subtitle: "booking owner name", + title: "title", + subtitle: "subtitle", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "ZlJQyXWP6z", - name: "4 Hr interval", + name: "Chicken Rice", rowMinTime: "08:00:00", rowMaxTime: "20:00:00", subtitle: ( @@ -139,45 +129,41 @@ export const evenDaysData = [ }, rowCells: [ { - id: "ZlJQyXWP6z", startTime: "08:00:00", endTime: "12:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ZlJQyXWP6z", startTime: "12:00:00", endTime: "16:00:00", - title: "booking title", - subtitle: "booking owner name", + title: "title", + subtitle: "subtitle", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ZlJQyXWP6z", startTime: "16:00:00", endTime: "20:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "9znPmRxQBv", - name: "acs", + name: "Bak Chor Mee", rowMinTime: "08:00:00", rowMaxTime: "21:00:00", subtitle: ( @@ -191,142 +177,129 @@ export const evenDaysData = [ }, rowCells: [ { - id: "9znPmRxQBv", startTime: "08:00:00", endTime: "09:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9znPmRxQBv", startTime: "09:00:00", endTime: "10:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9znPmRxQBv", startTime: "10:00:00", endTime: "11:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9znPmRxQBv", startTime: "11:00:00", endTime: "13:00:00", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9znPmRxQBv", startTime: "13:00:00", endTime: "14:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9znPmRxQBv", startTime: "14:00:00", endTime: "15:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9znPmRxQBv", startTime: "15:00:00", endTime: "16:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9znPmRxQBv", startTime: "16:00:00", endTime: "17:00:00", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9znPmRxQBv", startTime: "17:00:00", endTime: "18:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9znPmRxQBv", startTime: "18:00:00", endTime: "19:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9znPmRxQBv", startTime: "19:00:00", endTime: "20:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9znPmRxQBv", startTime: "20:00:00", endTime: "21:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "B8E79Z6Pbp", - name: "Fixed Session Resource1", + name: "Chilli Ban Mee", rowMinTime: "10:00", rowMaxTime: "17:00", subtitle: ( @@ -340,32 +313,29 @@ export const evenDaysData = [ }, rowCells: [ { - id: "B8E79Z6Pbp", startTime: "10:00", endTime: "12:00", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "B8E79Z6Pbp", startTime: "15:00", endTime: "17:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "bJxrj7JPqL", - name: "Apple", + name: "Economic Rice", rowMinTime: "08:00", rowMaxTime: "18:00", subtitle: ( @@ -379,186 +349,169 @@ export const evenDaysData = [ }, rowCells: [ { - id: "bJxrj7JPqL", startTime: "08:00", endTime: "08:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "08:30", endTime: "09:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "09:00", endTime: "09:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "09:30", endTime: "10:00", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "10:00", endTime: "10:30", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "10:30", endTime: "11:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "13:00", endTime: "13:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "13:30", endTime: "14:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "14:00", endTime: "14:30", status: "blocked" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "14:30", endTime: "15:00", status: "blocked" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "15:00", endTime: "15:30", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "15:30", endTime: "16:00", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "16:00", endTime: "16:30", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "16:30", endTime: "17:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "17:00", endTime: "17:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "bJxrj7JPqL", startTime: "17:30", endTime: "18:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "mx0Ex4xE9Y", - name: "apple+dragonfruit", + name: "Chilli Crab", rowMinTime: "08:00", rowMaxTime: "22:00", subtitle: ( @@ -572,156 +525,144 @@ export const evenDaysData = [ }, rowCells: [ { - id: "mx0Ex4xE9Y", startTime: "08:00", endTime: "09:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0Ex4xE9Y", startTime: "09:00", endTime: "10:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0Ex4xE9Y", startTime: "10:00", endTime: "11:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0Ex4xE9Y", startTime: "11:00", endTime: "12:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "jingzhi-id", startTime: "13:00", endTime: "14:00", - subtitle: "Jing Zhi", + title: "title", + subtitle: "subtitle", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0Ex4xE9Y", startTime: "14:00", endTime: "15:00", - subtitle: "Jing Zhi", + title: "title", + subtitle: "subtitle", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0Ex4xE9Y", startTime: "15:00", endTime: "16:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0Ex4xE9Y", startTime: "16:00", endTime: "17:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0Ex4xE9Y", startTime: "17:00", endTime: "18:00", status: "blocked" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0Ex4xE9Y", startTime: "18:00", endTime: "19:00", subtitle: "", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0Ex4xE9Y", startTime: "19:00", endTime: "20:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0Ex4xE9Y", startTime: "20:00", endTime: "21:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0Ex4xE9Y", startTime: "21:00", endTime: "22:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "RBP5eeePm6", - name: "Coconut", + name: "Rojak", rowMinTime: "08:00:00", rowMaxTime: "18:00:00", subtitle: ( @@ -735,363 +676,331 @@ export const evenDaysData = [ }, rowCells: [ { - id: "RBP5eeePm6", startTime: "08:00:00", endTime: "08:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "08:15:00", endTime: "08:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "08:30:00", endTime: "08:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "08:45:00", endTime: "09:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "09:00:00", endTime: "09:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "09:15:00", endTime: "09:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "09:30:00", endTime: "09:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "09:45:00", endTime: "10:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "10:00:00", endTime: "10:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "10:15:00", endTime: "10:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "10:30:00", endTime: "10:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "10:45:00", endTime: "11:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "11:00:00", endTime: "11:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "11:15:00", endTime: "11:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "11:30:00", endTime: "11:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "11:45:00", endTime: "12:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "12:00:00", endTime: "13:00:00", status: "blocked" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "13:00:00", endTime: "13:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "13:15:00", endTime: "13:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "13:30:00", endTime: "13:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "13:45:00", endTime: "14:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "14:00:00", endTime: "14:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "14:15:00", endTime: "14:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "14:30:00", endTime: "14:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "14:45:00", endTime: "15:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "15:00:00", endTime: "16:30:00", - subtitle: "booking label", + title: "title", + subtitle: "subtitle", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "16:30:00", endTime: "16:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "16:45:00", endTime: "17:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "17:00:00", endTime: "17:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "17:15:00", endTime: "17:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "17:30:00", endTime: "17:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "RBP5eeePm6", startTime: "17:45:00", endTime: "18:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "DAPBjGgPqd", - name: "Coconut Approval Required", + name: "Nasi Lemak", rowMinTime: "08:00:00", rowMaxTime: "18:00:00", subtitle: ( @@ -1105,89 +1014,82 @@ export const evenDaysData = [ }, rowCells: [ { - id: "DAPBjGgPqd", startTime: "08:00:00", endTime: "16:30:00", + title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", subtitle: - "a very long booking text that spans across the entire universe beyond the horizon into the blackhole transcending time and space", + "a very long text that spans across the entire universe beyond the horizon into the blackhole transcending time and space", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "DAPBjGgPqd", startTime: "16:30:00", endTime: "16:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "DAPBjGgPqd", startTime: "16:45:00", endTime: "17:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "DAPBjGgPqd", startTime: "17:00:00", endTime: "17:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "DAPBjGgPqd", startTime: "17:15:00", endTime: "17:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "DAPBjGgPqd", startTime: "17:30:00", endTime: "17:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "DAPBjGgPqd", startTime: "17:45:00", endTime: "18:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "ajlEo56PqA", - name: "Default test", + name: "Popiah", rowMinTime: "08:00", rowMaxTime: "22:00", subtitle: ( @@ -1201,153 +1103,139 @@ export const evenDaysData = [ }, rowCells: [ { - id: "ajlEo56PqA", startTime: "08:00", endTime: "09:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ajlEo56PqA", startTime: "09:00", endTime: "10:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ajlEo56PqA", startTime: "10:00", endTime: "11:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ajlEo56PqA", startTime: "11:00", endTime: "12:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ajlEo56PqA", startTime: "13:00", endTime: "14:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ajlEo56PqA", startTime: "14:00", endTime: "15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ajlEo56PqA", startTime: "15:00", endTime: "16:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ajlEo56PqA", startTime: "16:00", endTime: "17:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ajlEo56PqA", startTime: "17:00", endTime: "18:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ajlEo56PqA", startTime: "18:00", endTime: "19:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ajlEo56PqA", startTime: "19:00", endTime: "20:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ajlEo56PqA", startTime: "20:00", endTime: "21:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ajlEo56PqA", startTime: "21:00", endTime: "22:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "ewGEKbeQVa", - name: "delet", + name: "Laksa", rowMinTime: "08:00:00", rowMaxTime: "18:00:00", subtitle: ( @@ -1361,409 +1249,372 @@ export const evenDaysData = [ }, rowCells: [ { - id: "ewGEKbeQVa", startTime: "08:00:00", endTime: "08:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "08:15:00", endTime: "08:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "08:30:00", endTime: "08:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "08:45:00", endTime: "09:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "09:00:00", endTime: "09:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "09:15:00", endTime: "09:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "09:30:00", endTime: "09:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "09:45:00", endTime: "10:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "10:00:00", endTime: "10:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "10:15:00", endTime: "10:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "10:30:00", endTime: "10:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "10:45:00", endTime: "11:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "11:00:00", endTime: "11:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "11:15:00", endTime: "11:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "11:30:00", endTime: "11:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "11:45:00", endTime: "12:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "12:00:00", endTime: "13:00:00", status: "blocked" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "13:00:00", endTime: "13:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "13:15:00", endTime: "13:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "13:30:00", endTime: "13:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "13:45:00", endTime: "14:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "14:00:00", endTime: "14:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "14:15:00", endTime: "14:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "14:30:00", endTime: "14:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "14:45:00", endTime: "15:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "15:00:00", endTime: "15:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "15:15:00", endTime: "15:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "15:30:00", endTime: "15:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "15:45:00", endTime: "16:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "16:00:00", endTime: "16:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "16:15:00", endTime: "16:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "16:30:00", endTime: "16:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "16:45:00", endTime: "17:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "17:00:00", endTime: "17:15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "17:15:00", endTime: "17:30:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "17:30:00", endTime: "17:45:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "ewGEKbeQVa", startTime: "17:45:00", endTime: "18:00:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, diff --git a/stories/timetable/timetable-lazy-load-data.json b/stories/timetable/timetable-lazy-load-data.json index 1149e39fb..dfd4bbd01 100644 --- a/stories/timetable/timetable-lazy-load-data.json +++ b/stories/timetable/timetable-lazy-load-data.json @@ -24,8 +24,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -85,8 +85,8 @@ "startTime": "11:00:00", "endTime": "12:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "4" }, { @@ -140,8 +140,8 @@ "startTime": "09:00:00", "endTime": "17:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -183,24 +183,24 @@ "startTime": "09:00:00", "endTime": "09:15:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { "startTime": "09:15:00", "endTime": "09:30:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "2" }, { "startTime": "09:30:00", "endTime": "09:45:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -278,8 +278,8 @@ "startTime": "13:00:00", "endTime": "15:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -327,8 +327,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -412,8 +412,8 @@ "startTime": "11:00:00", "endTime": "12:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -491,8 +491,8 @@ "startTime": "09:00:00", "endTime": "17:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -540,24 +540,24 @@ "startTime": "09:00:00", "endTime": "09:15:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { "startTime": "09:15:00", "endTime": "09:30:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "2" }, { "startTime": "09:30:00", "endTime": "09:45:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -629,24 +629,24 @@ "startTime": "09:00:00", "endTime": "09:15:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { "startTime": "09:15:00", "endTime": "09:30:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "2" }, { "startTime": "09:30:00", "endTime": "09:45:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -742,8 +742,8 @@ "startTime": "11:00:00", "endTime": "12:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -821,8 +821,8 @@ "startTime": "09:00:00", "endTime": "17:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -864,8 +864,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -937,8 +937,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -1010,24 +1010,24 @@ "startTime": "09:00:00", "endTime": "09:15:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { "startTime": "09:15:00", "endTime": "09:30:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "2" }, { "startTime": "09:30:00", "endTime": "09:45:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -1087,8 +1087,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -1172,8 +1172,8 @@ "startTime": "11:00:00", "endTime": "12:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "4" }, { @@ -1227,8 +1227,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -1276,8 +1276,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -1349,8 +1349,8 @@ "startTime": "09:00:00", "endTime": "15:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -1410,24 +1410,24 @@ "startTime": "09:00:00", "endTime": "09:15:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { "startTime": "09:15:00", "endTime": "09:30:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "2" }, { "startTime": "09:30:00", "endTime": "09:45:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -1487,8 +1487,8 @@ "startTime": "09:00:00", "endTime": "15:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -1560,8 +1560,8 @@ "startTime": "11:00:00", "endTime": "12:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "4" }, { @@ -1615,24 +1615,24 @@ "startTime": "09:00:00", "endTime": "09:15:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { "startTime": "09:15:00", "endTime": "09:30:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "2" }, { "startTime": "09:30:00", "endTime": "09:45:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -1716,8 +1716,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -1801,8 +1801,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -1886,8 +1886,8 @@ "startTime": "11:00:00", "endTime": "12:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "4" }, { @@ -1941,8 +1941,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -2014,8 +2014,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -2063,8 +2063,8 @@ "startTime": "09:00:00", "endTime": "15:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -2124,24 +2124,24 @@ "startTime": "09:00:00", "endTime": "09:15:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { "startTime": "09:15:00", "endTime": "09:30:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "2" }, { "startTime": "09:30:00", "endTime": "09:45:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -2225,8 +2225,8 @@ "startTime": "11:00:00", "endTime": "12:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "4" }, { @@ -2280,24 +2280,24 @@ "startTime": "09:00:00", "endTime": "09:15:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { "startTime": "09:15:00", "endTime": "09:30:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "2" }, { "startTime": "09:30:00", "endTime": "09:45:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -2369,8 +2369,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -2418,24 +2418,24 @@ "startTime": "09:00:00", "endTime": "09:15:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { "startTime": "09:15:00", "endTime": "09:30:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "2" }, { "startTime": "09:30:00", "endTime": "09:45:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -2495,8 +2495,8 @@ "startTime": "09:00:00", "endTime": "15:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -2568,8 +2568,8 @@ "startTime": "11:00:00", "endTime": "12:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "4" }, { @@ -2623,8 +2623,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -2672,8 +2672,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -2757,8 +2757,8 @@ "startTime": "11:00:00", "endTime": "12:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "4" }, { @@ -2812,8 +2812,8 @@ "startTime": "09:00:00", "endTime": "15:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -2873,8 +2873,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -2922,24 +2922,24 @@ "startTime": "09:00:00", "endTime": "09:15:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { "startTime": "09:15:00", "endTime": "09:30:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "2" }, { "startTime": "09:30:00", "endTime": "09:45:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -3011,8 +3011,8 @@ "startTime": "11:00:00", "endTime": "12:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "4" }, { @@ -3066,8 +3066,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -3139,8 +3139,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -3188,24 +3188,24 @@ "startTime": "09:00:00", "endTime": "09:15:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { "startTime": "09:15:00", "endTime": "09:30:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "2" }, { "startTime": "09:30:00", "endTime": "09:45:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "3" }, { @@ -3277,8 +3277,8 @@ "startTime": "11:00:00", "endTime": "12:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "4" }, { @@ -3332,8 +3332,8 @@ "startTime": "09:00:00", "endTime": "11:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "1" }, { @@ -3429,8 +3429,8 @@ "startTime": "11:00:00", "endTime": "12:00:00", "status": "OCCUPIED", - "label": "Booking owner name", - "title": "booking title", + "label": "subtitle", + "title": "title", "id": "4" }, { diff --git a/stories/timetable/timetable-odd-days-data.tsx b/stories/timetable/timetable-odd-days-data.tsx index 8bfd12cb6..58ddb13c2 100644 --- a/stories/timetable/timetable-odd-days-data.tsx +++ b/stories/timetable/timetable-odd-days-data.tsx @@ -3,10 +3,9 @@ import { CellType, TimeTableRowCellData, TimeTableRowData } from "../../src"; export const oddDaysData = [ { - id: "9l4P1dOr16", name: "Apple", - rowMinTime: "08:00:00", - rowMaxTime: "22:30:00", + rowMinTime: "08:00", + rowMaxTime: "22:00", subtitle: ( <> @@ -18,179 +17,155 @@ export const oddDaysData = [ }, rowCells: [ { - id: "9l4P1dOr16", startTime: "08:00", endTime: "08:45", - status: "default" as CellType, + status: "filled" as CellType, + title: "title", + subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9l4P1dOr16", - startTime: "08:45:00", - endTime: "09:30:00", + startTime: "08:45", + endTime: "09:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9l4P1dOr16", - startTime: "11:00:00", - endTime: "11:45:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, + startTime: "09:30", + endTime: "10:00", + status: "blocked" as CellType, }, { - id: "RBP5g87Em6", - startTime: "12:00:00", - endTime: "13:00:00", - title: "Weekly Huddle #7", - subtitle: "Shawn TAY (GOVTECH)", - status: "filled" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, + startTime: "10:00", + endTime: "11:00", + status: "blocked" as CellType, }, { - id: "9l4P1dOr16", - startTime: "13:00:00", - endTime: "13:45:00", + startTime: "11:00", + endTime: "11:45", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9l4P1dOr16", - startTime: "13:45:00", - endTime: "14:30:00", - status: "default" as CellType, + startTime: "12:00", + endTime: "14:00", + title: "title", + subtitle: "subtitle", + status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9l4P1dOr16", - startTime: "14:30:00", - endTime: "15:15:00", + startTime: "14:30", + endTime: "15:15", status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9l4P1dOr16", - startTime: "16:45:00", - endTime: "17:15:00", + startTime: "16:45", + endTime: "17:15", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9l4P1dOr16", - startTime: "17:15:00", - endTime: "18:00:00", + startTime: "17:15", + endTime: "18:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9l4P1dOr16", - startTime: "18:00:00", - endTime: "18:45:00", + startTime: "18:00", + endTime: "18:45", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9l4P1dOr16", - startTime: "18:45:00", - endTime: "19:30:00", + startTime: "18:45", + endTime: "19:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9l4P1dOr16", - startTime: "19:30:00", - endTime: "20:15:00", + startTime: "19:30", + endTime: "20:15", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9l4P1dOr16", - startTime: "20:15:00", - endTime: "21:00:00", + startTime: "20:15", + endTime: "21:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9l4P1dOr16", - startTime: "21:00:00", - endTime: "21:45:00", + startTime: "21:00", + endTime: "21:45", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "9l4P1dOr16", - startTime: "21:45:00", - endTime: "22:00:00", + startTime: "21:45", + endTime: "22:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "Dy3E3vRQY0", name: "Avocado", - rowMinTime: "08:00:00", - rowMaxTime: "22:00:00", + rowMinTime: "08:00", + rowMaxTime: "22:00", subtitle: ( <> @@ -202,320 +177,225 @@ export const oddDaysData = [ }, rowCells: [ { - id: "Dy3E3vRQY0", - startTime: "08:00:00", - endTime: "08:30:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "Dy3E3vRQY0", - startTime: "08:30:00", - endTime: "09:00:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "Dy3E3vRQY0", - startTime: "09:00:00", - endTime: "09:30:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "Dy3E3vRQY0", - startTime: "09:30:00", - endTime: "10:00:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "Dy3E3vRQY0", - startTime: "10:00:00", - endTime: "10:30:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "Dy3E3vRQY0", - startTime: "10:30:00", - endTime: "11:00:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "Dy3E3vRQY0", - startTime: "11:00:00", - endTime: "11:30:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "Dy3E3vRQY0", - startTime: "11:30:00", - endTime: "12:00:00", + startTime: "08:00", + endTime: "08:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "12:00:00", - endTime: "12:30:00", + startTime: "08:30", + endTime: "09:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "12:30:00", - endTime: "13:00:00", - status: "default" as CellType, + startTime: "09:00", + endTime: "11:00", + title: "title", + subtitle: "subtitle", + status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "13:00:00", - endTime: "13:30:00", + startTime: "11:00", + endTime: "11:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "13:30:00", - endTime: "14:00:00", + startTime: "11:30", + endTime: "12:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "14:00:00", - endTime: "14:30:00", + startTime: "12:00", + endTime: "12:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "14:30:00", - endTime: "15:00:00", + startTime: "12:30", + endTime: "13:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "15:00:00", - endTime: "15:30:00", + startTime: "14:00", + endTime: "14:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "15:30:00", - endTime: "16:00:00", + startTime: "14:30", + endTime: "15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "16:00:00", - endTime: "16:30:00", - status: "default" as CellType, + startTime: "15:00", + endTime: "16:30", + title: "title", + subtitle: "subtitle", + status: "filled" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "16:30:00", - endTime: "17:00:00", + startTime: "16:30", + endTime: "17:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "17:00:00", - endTime: "17:30:00", + startTime: "17:00", + endTime: "17:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "17:30:00", - endTime: "18:00:00", + startTime: "17:30", + endTime: "18:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "18:00:00", - endTime: "18:30:00", + startTime: "18:00", + endTime: "18:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "18:30:00", - endTime: "19:00:00", + startTime: "18:30", + endTime: "19:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "19:00:00", - endTime: "19:30:00", + startTime: "19:00", + endTime: "19:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "19:30:00", - endTime: "20:00:00", + startTime: "19:30", + endTime: "20:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "20:00:00", - endTime: "20:30:00", + startTime: "20:00", + endTime: "20:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "20:30:00", - endTime: "21:00:00", + startTime: "20:30", + endTime: "21:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "21:00:00", - endTime: "21:30:00", + startTime: "21:00", + endTime: "21:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "Dy3E3vRQY0", - startTime: "21:30:00", - endTime: "22:00:00", + startTime: "21:30", + endTime: "22:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "GN9P0vME6K", name: "Banana", - rowMinTime: "08:00:00", - rowMaxTime: "22:00:00", + rowMinTime: "08:00", + rowMaxTime: "22:00", subtitle: ( <> @@ -527,320 +407,206 @@ export const oddDaysData = [ }, rowCells: [ { - id: "GN9P0vME6K", - startTime: "08:00:00", - endTime: "08:30:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "GN9P0vME6K", - startTime: "08:30:00", - endTime: "09:00:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "GN9P0vME6K", - startTime: "09:00:00", - endTime: "09:30:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "GN9P0vME6K", - startTime: "09:30:00", - endTime: "10:00:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "GN9P0vME6K", - startTime: "10:00:00", - endTime: "10:30:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "GN9P0vME6K", - startTime: "10:30:00", - endTime: "11:00:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "GN9P0vME6K", - startTime: "11:00:00", - endTime: "11:30:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "GN9P0vME6K", - startTime: "11:30:00", - endTime: "12:00:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "GN9P0vME6K", - startTime: "12:00:00", - endTime: "12:30:00", + startTime: "08:00", + endTime: "08:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "12:30:00", - endTime: "13:00:00", + startTime: "08:30", + endTime: "09:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "13:00:00", - endTime: "13:30:00", + startTime: "09:00", + endTime: "09:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "13:30:00", - endTime: "14:00:00", + startTime: "09:30", + endTime: "10:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "14:00:00", - endTime: "14:30:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, + startTime: "10:00", + endTime: "13:00", + status: "blocked" as CellType, }, { - id: "GN9P0vME6K", - startTime: "14:30:00", - endTime: "15:00:00", + startTime: "13:00", + endTime: "13:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "15:00:00", - endTime: "15:30:00", + startTime: "13:30", + endTime: "14:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "15:30:00", - endTime: "16:00:00", + startTime: "14:00", + endTime: "14:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "16:00:00", - endTime: "16:30:00", + startTime: "14:30", + endTime: "15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "16:30:00", - endTime: "17:00:00", - status: "default" as CellType, + startTime: "15:00", + endTime: "17:00", + status: "blocked" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "17:00:00", - endTime: "17:30:00", + startTime: "17:00", + endTime: "17:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "17:30:00", - endTime: "18:00:00", + startTime: "17:30", + endTime: "18:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "18:00:00", - endTime: "18:30:00", + startTime: "18:00", + endTime: "18:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "18:30:00", - endTime: "19:00:00", + startTime: "18:30", + endTime: "19:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "19:00:00", - endTime: "19:30:00", + startTime: "19:00", + endTime: "19:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "19:30:00", - endTime: "20:00:00", + startTime: "19:30", + endTime: "20:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "20:00:00", - endTime: "20:30:00", + startTime: "20:00", + endTime: "20:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "20:30:00", - endTime: "21:00:00", + startTime: "20:30", + endTime: "21:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "21:00:00", - endTime: "21:30:00", + startTime: "21:00", + endTime: "21:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vME6K", - startTime: "21:30:00", - endTime: "22:00:00", + startTime: "21:30", + endTime: "22:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "mx0ExmWr9Y", name: "Cantaloupe", - rowMinTime: "08:00:00", - rowMaxTime: "22:00:00", + rowMinTime: "08:00", + rowMaxTime: "22:00", subtitle: ( <> @@ -852,166 +618,151 @@ export const oddDaysData = [ }, rowCells: [ { - id: "mx0ExmWr9Y", - startTime: "08:00:00", - endTime: "09:00:00", + startTime: "08:00", + endTime: "09:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "09:00:00", - endTime: "10:00:00", + startTime: "09:00", + endTime: "10:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "10:00:00", - endTime: "11:00:00", + startTime: "10:00", + endTime: "11:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "11:00:00", - endTime: "12:00:00", + startTime: "11:00", + endTime: "12:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "12:00:00", - endTime: "13:00:00", + startTime: "12:00", + endTime: "13:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "13:00:00", - endTime: "14:00:00", + startTime: "13:00", + endTime: "14:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "14:00:00", - endTime: "15:00:00", + startTime: "14:00", + endTime: "15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "15:00:00", - endTime: "16:00:00", + startTime: "15:00", + endTime: "16:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "16:00:00", - endTime: "17:00:00", + startTime: "16:00", + endTime: "17:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "17:00:00", - endTime: "18:00:00", + startTime: "17:00", + endTime: "18:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "18:00:00", - endTime: "19:00:00", + startTime: "18:00", + endTime: "19:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "19:00:00", - endTime: "20:00:00", + startTime: "19:00", + endTime: "20:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "20:00:00", - endTime: "21:00:00", + startTime: "20:00", + endTime: "21:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "mx0ExmWr9Y", - startTime: "21:00:00", - endTime: "22:00:00", + startTime: "21:00", + endTime: "22:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "An0rbeOElJ", name: "Cherry", - rowMinTime: "08:00:00", - rowMaxTime: "22:00:00", + rowMinTime: "08:00", + rowMaxTime: "22:00", subtitle: ( <> @@ -1023,320 +774,263 @@ export const oddDaysData = [ }, rowCells: [ { - id: "An0rbeOElJ", - startTime: "08:00:00", - endTime: "08:30:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "An0rbeOElJ", - startTime: "08:30:00", - endTime: "09:00:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "An0rbeOElJ", - startTime: "09:00:00", - endTime: "09:30:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "An0rbeOElJ", - startTime: "09:30:00", - endTime: "10:00:00", - status: "default" as CellType, - onClick: (data: TimeTableRowCellData) => { - alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` - ); - }, - }, - { - id: "An0rbeOElJ", - startTime: "10:00:00", - endTime: "10:30:00", - status: "default" as CellType, + startTime: "08:00", + endTime: "08:30", + status: "filled" as CellType, + title: "title", + subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "10:30:00", - endTime: "11:00:00", - status: "default" as CellType, + startTime: "08:30", + endTime: "09:00", + status: "filled" as CellType, + title: "title", + subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "11:00:00", - endTime: "11:30:00", - status: "default" as CellType, + startTime: "09:00", + endTime: "09:15", + status: "filled" as CellType, + title: "title", + subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "11:30:00", - endTime: "12:00:00", - status: "default" as CellType, + startTime: "09:15", + endTime: "09:30", + status: "filled" as CellType, + title: "title", + subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "12:00:00", - endTime: "12:30:00", - status: "default" as CellType, + startTime: "09:30", + endTime: "09:45", + status: "filled" as CellType, + title: "title", + subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "12:30:00", - endTime: "13:00:00", - status: "default" as CellType, + startTime: "09:45", + endTime: "10:00", + status: "filled" as CellType, + title: "title", + subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "13:00:00", - endTime: "13:30:00", + startTime: "10:00", + endTime: "10:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "13:30:00", - endTime: "14:00:00", + startTime: "10:30", + endTime: "11:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "14:00:00", - endTime: "14:30:00", + startTime: "11:00", + endTime: "11:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "14:30:00", - endTime: "15:00:00", + startTime: "11:30", + endTime: "12:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "15:00:00", - endTime: "15:30:00", + startTime: "15:00", + endTime: "15:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "15:30:00", - endTime: "16:00:00", + startTime: "15:30", + endTime: "16:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "16:00:00", - endTime: "16:30:00", + startTime: "16:00", + endTime: "16:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "16:30:00", - endTime: "17:00:00", + startTime: "16:30", + endTime: "17:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "17:00:00", - endTime: "17:30:00", + startTime: "17:00", + endTime: "17:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "17:30:00", - endTime: "18:00:00", + startTime: "17:30", + endTime: "18:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "18:00:00", - endTime: "18:30:00", + startTime: "18:00", + endTime: "18:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "18:30:00", - endTime: "19:00:00", + startTime: "18:30", + endTime: "19:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "19:00:00", - endTime: "19:30:00", + startTime: "19:00", + endTime: "19:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "19:30:00", - endTime: "20:00:00", + startTime: "19:30", + endTime: "20:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "20:00:00", - endTime: "20:30:00", + startTime: "20:00", + endTime: "20:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "20:30:00", - endTime: "21:00:00", + startTime: "20:30", + endTime: "21:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "21:00:00", - endTime: "21:30:00", + startTime: "21:00", + endTime: "21:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "An0rbeOElJ", - startTime: "21:30:00", - endTime: "22:00:00", + startTime: "21:30", + endTime: "22:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "GN9P0vDE6K", name: "Dragonfruit", - rowMinTime: "08:00:00", - rowMaxTime: "22:00:00", + rowMinTime: "08:00", + rowMaxTime: "22:00", subtitle: ( <> @@ -1348,320 +1042,291 @@ export const oddDaysData = [ }, rowCells: [ { - id: "GN9P0vDE6K", - startTime: "08:00:00", - endTime: "08:30:00", + startTime: "08:00", + endTime: "08:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "08:30:00", - endTime: "09:00:00", + startTime: "08:30", + endTime: "09:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "09:00:00", - endTime: "09:30:00", + startTime: "09:00", + endTime: "09:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "09:30:00", - endTime: "10:00:00", + startTime: "09:30", + endTime: "10:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "10:00:00", - endTime: "10:30:00", + startTime: "10:00", + endTime: "10:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "10:30:00", - endTime: "11:00:00", + startTime: "10:30", + endTime: "11:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "11:00:00", - endTime: "11:30:00", + startTime: "11:00", + endTime: "11:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "11:30:00", - endTime: "12:00:00", + startTime: "11:30", + endTime: "12:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "12:00:00", - endTime: "12:30:00", + startTime: "12:00", + endTime: "12:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "12:30:00", - endTime: "13:00:00", + startTime: "12:30", + endTime: "13:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "13:00:00", - endTime: "13:30:00", + startTime: "13:00", + endTime: "13:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "13:30:00", - endTime: "14:00:00", + startTime: "13:30", + endTime: "14:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "14:00:00", - endTime: "14:30:00", + startTime: "14:00", + endTime: "14:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "14:30:00", - endTime: "15:00:00", + startTime: "14:30", + endTime: "15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "15:00:00", - endTime: "15:30:00", + startTime: "15:00", + endTime: "15:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "15:30:00", - endTime: "16:00:00", + startTime: "15:30", + endTime: "16:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "16:00:00", - endTime: "16:30:00", + startTime: "16:00", + endTime: "16:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "16:30:00", - endTime: "17:00:00", + startTime: "16:30", + endTime: "17:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "17:00:00", - endTime: "17:30:00", + startTime: "17:00", + endTime: "17:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "17:30:00", - endTime: "18:00:00", + startTime: "17:30", + endTime: "18:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "18:00:00", - endTime: "18:30:00", + startTime: "18:00", + endTime: "18:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "18:30:00", - endTime: "19:00:00", + startTime: "18:30", + endTime: "19:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "19:00:00", - endTime: "19:30:00", + startTime: "19:00", + endTime: "19:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "19:30:00", - endTime: "20:00:00", + startTime: "19:30", + endTime: "20:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "20:00:00", - endTime: "20:30:00", + startTime: "20:00", + endTime: "20:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "20:30:00", - endTime: "21:00:00", + startTime: "20:30", + endTime: "21:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "21:00:00", - endTime: "21:30:00", + startTime: "21:00", + endTime: "21:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "GN9P0vDE6K", - startTime: "21:30:00", - endTime: "22:00:00", + startTime: "21:30", + endTime: "22:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "vK4rGewQ02", name: "Durian", - rowMinTime: "08:00:00", - rowMaxTime: "22:00:00", + rowMinTime: "08:00", + rowMaxTime: "22:00", subtitle: ( <> @@ -1673,320 +1338,291 @@ export const oddDaysData = [ }, rowCells: [ { - id: "vK4rGewQ02", - startTime: "08:00:00", - endTime: "08:30:00", + startTime: "08:00", + endTime: "08:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "08:30:00", - endTime: "09:00:00", + startTime: "08:30", + endTime: "09:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "09:00:00", - endTime: "09:30:00", + startTime: "09:00", + endTime: "09:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "09:30:00", - endTime: "10:00:00", + startTime: "09:30", + endTime: "10:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "10:00:00", - endTime: "10:30:00", + startTime: "10:00", + endTime: "10:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "10:30:00", - endTime: "11:00:00", + startTime: "10:30", + endTime: "11:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "11:00:00", - endTime: "11:30:00", + startTime: "11:00", + endTime: "11:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "11:30:00", - endTime: "12:00:00", + startTime: "11:30", + endTime: "12:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "12:00:00", - endTime: "12:30:00", + startTime: "12:00", + endTime: "12:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "12:30:00", - endTime: "13:00:00", + startTime: "12:30", + endTime: "13:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "13:00:00", - endTime: "13:30:00", + startTime: "13:00", + endTime: "13:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "13:30:00", - endTime: "14:00:00", + startTime: "13:30", + endTime: "14:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "14:00:00", - endTime: "14:30:00", + startTime: "14:00", + endTime: "14:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "14:30:00", - endTime: "15:00:00", + startTime: "14:30", + endTime: "15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "15:00:00", - endTime: "15:30:00", + startTime: "15:00", + endTime: "15:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "15:30:00", - endTime: "16:00:00", + startTime: "15:30", + endTime: "16:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "16:00:00", - endTime: "16:30:00", + startTime: "16:00", + endTime: "16:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "16:30:00", - endTime: "17:00:00", + startTime: "16:30", + endTime: "17:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "17:00:00", - endTime: "17:30:00", + startTime: "17:00", + endTime: "17:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "17:30:00", - endTime: "18:00:00", + startTime: "17:30", + endTime: "18:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "18:00:00", - endTime: "18:30:00", + startTime: "18:00", + endTime: "18:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "18:30:00", - endTime: "19:00:00", + startTime: "18:30", + endTime: "19:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "19:00:00", - endTime: "19:30:00", + startTime: "19:00", + endTime: "19:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "19:30:00", - endTime: "20:00:00", + startTime: "19:30", + endTime: "20:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "20:00:00", - endTime: "20:30:00", + startTime: "20:00", + endTime: "20:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "20:30:00", - endTime: "21:00:00", + startTime: "20:30", + endTime: "21:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "21:00:00", - endTime: "21:30:00", + startTime: "21:00", + endTime: "21:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGewQ02", - startTime: "21:30:00", - endTime: "22:00:00", + startTime: "21:30", + endTime: "22:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "0B8E719Pbp", - name: "Executive room 1", - rowMinTime: "08:00:00", - rowMaxTime: "22:00:00", + name: "Elderberry", + rowMinTime: "08:00", + rowMaxTime: "22:00", subtitle: ( <> @@ -1998,166 +1634,151 @@ export const oddDaysData = [ }, rowCells: [ { - id: "0B8E719Pbp", - startTime: "08:00:00", - endTime: "09:00:00", + startTime: "08:00", + endTime: "09:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "09:00:00", - endTime: "10:00:00", + startTime: "09:00", + endTime: "10:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "10:00:00", - endTime: "11:00:00", + startTime: "10:00", + endTime: "11:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "11:00:00", - endTime: "12:00:00", + startTime: "11:00", + endTime: "12:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "12:00:00", - endTime: "13:00:00", + startTime: "12:00", + endTime: "13:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "13:00:00", - endTime: "14:00:00", + startTime: "13:00", + endTime: "14:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "14:00:00", - endTime: "15:00:00", + startTime: "14:00", + endTime: "15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "15:00:00", - endTime: "16:00:00", + startTime: "15:00", + endTime: "16:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "16:00:00", - endTime: "17:00:00", + startTime: "16:00", + endTime: "17:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "17:00:00", - endTime: "18:00:00", + startTime: "17:00", + endTime: "18:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "18:00:00", - endTime: "19:00:00", + startTime: "18:00", + endTime: "19:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "19:00:00", - endTime: "20:00:00", + startTime: "19:00", + endTime: "20:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "20:00:00", - endTime: "21:00:00", + startTime: "20:00", + endTime: "21:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "0B8E719Pbp", - startTime: "21:00:00", - endTime: "22:00:00", + startTime: "21:00", + endTime: "22:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "vK4rGoMr02", - name: "Executive room 6", - rowMinTime: "08:00:00", - rowMaxTime: "22:00:00", + name: "Fig", + rowMinTime: "08:00", + rowMaxTime: "22:00", subtitle: ( <> @@ -2169,166 +1790,151 @@ export const oddDaysData = [ }, rowCells: [ { - id: "vK4rGoMr02", - startTime: "08:00:00", - endTime: "09:00:00", + startTime: "08:00", + endTime: "09:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "09:00:00", - endTime: "10:00:00", + startTime: "09:00", + endTime: "10:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "10:00:00", - endTime: "11:00:00", + startTime: "10:00", + endTime: "11:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "11:00:00", - endTime: "12:00:00", + startTime: "11:00", + endTime: "12:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "12:00:00", - endTime: "13:00:00", + startTime: "12:00", + endTime: "13:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "13:00:00", - endTime: "14:00:00", + startTime: "13:00", + endTime: "14:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "14:00:00", - endTime: "15:00:00", + startTime: "14:00", + endTime: "15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "15:00:00", - endTime: "16:00:00", + startTime: "15:00", + endTime: "16:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "16:00:00", - endTime: "17:00:00", + startTime: "16:00", + endTime: "17:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "17:00:00", - endTime: "18:00:00", + startTime: "17:00", + endTime: "18:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "18:00:00", - endTime: "19:00:00", + startTime: "18:00", + endTime: "19:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "19:00:00", - endTime: "20:00:00", + startTime: "19:00", + endTime: "20:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "20:00:00", - endTime: "21:00:00", + startTime: "20:00", + endTime: "21:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "vK4rGoMr02", - startTime: "21:00:00", - endTime: "22:00:00", + startTime: "21:00", + endTime: "22:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, ], }, { - id: "YRVPVjVPGe", name: "Grape", - rowMinTime: "08:00:00", - rowMaxTime: "22:00:00", + rowMinTime: "08:00", + rowMaxTime: "22:00", subtitle: ( <> @@ -2340,310 +1946,282 @@ export const oddDaysData = [ }, rowCells: [ { - id: "YRVPVjVPGe", - startTime: "08:00:00", - endTime: "08:30:00", + startTime: "08:00", + endTime: "08:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "08:30:00", - endTime: "09:00:00", + startTime: "08:30", + endTime: "09:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "09:00:00", - endTime: "09:30:00", + startTime: "09:00", + endTime: "09:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "09:30:00", - endTime: "10:00:00", + startTime: "09:30", + endTime: "10:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "10:00:00", - endTime: "10:30:00", + startTime: "10:00", + endTime: "10:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "10:30:00", - endTime: "11:00:00", + startTime: "10:30", + endTime: "11:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "11:00:00", - endTime: "11:30:00", + startTime: "11:00", + endTime: "11:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "11:30:00", - endTime: "12:00:00", + startTime: "11:30", + endTime: "12:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "12:00:00", - endTime: "12:30:00", + startTime: "12:00", + endTime: "12:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "12:30:00", - endTime: "13:00:00", + startTime: "12:30", + endTime: "13:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "13:00:00", - endTime: "13:30:00", + startTime: "13:00", + endTime: "13:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "13:30:00", - endTime: "14:00:00", + startTime: "13:30", + endTime: "14:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "14:00:00", - endTime: "14:30:00", + startTime: "14:00", + endTime: "14:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "14:30:00", - endTime: "15:00:00", + startTime: "14:30", + endTime: "15:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "15:00:00", - endTime: "15:30:00", + startTime: "15:00", + endTime: "15:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "15:30:00", - endTime: "16:00:00", + startTime: "15:30", + endTime: "16:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "16:00:00", - endTime: "16:30:00", + startTime: "16:00", + endTime: "16:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "16:30:00", - endTime: "17:00:00", + startTime: "16:30", + endTime: "17:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "17:00:00", - endTime: "17:30:00", + startTime: "17:00", + endTime: "17:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "17:30:00", - endTime: "18:00:00", + startTime: "17:30", + endTime: "18:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "18:00:00", - endTime: "18:30:00", + startTime: "18:00", + endTime: "18:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "18:30:00", - endTime: "19:00:00", + startTime: "18:30", + endTime: "19:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "19:00:00", - endTime: "19:30:00", + startTime: "19:00", + endTime: "19:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "19:30:00", - endTime: "20:00:00", + startTime: "19:30", + endTime: "20:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "20:00:00", - endTime: "20:30:00", + startTime: "20:00", + endTime: "20:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "20:30:00", - endTime: "21:00:00", + startTime: "20:30", + endTime: "21:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "21:00:00", - endTime: "21:30:00", + startTime: "21:00", + endTime: "21:30", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, { - id: "YRVPVjVPGe", - startTime: "21:30:00", - endTime: "22:00:00", + startTime: "21:30", + endTime: "22:00", status: "default" as CellType, onClick: (data: TimeTableRowCellData) => { alert( - `Clicked on cell for ${data.id}, start: ${data.startTime}, end: ${data.endTime}, should redirect user to booking form with these data` + `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` ); }, }, diff --git a/stories/timetable/timetable.mdx b/stories/timetable/timetable.mdx index f2d76f195..a14188206 100644 --- a/stories/timetable/timetable.mdx +++ b/stories/timetable/timetable.mdx @@ -15,14 +15,15 @@ A component that displays a timetable to view a schedule for a specific day import { TimeTable } from "@lifesg/react-design-system/timetable"; ``` +> This component auto generates blocked cells based on the difference in start/end time between each row and the overall timetable, and disabled cells when there are missing gaps between each row cell's start/end time. + TimeTable with navigation arrows -The timetable is using the `DateNavigator` component when `onRightArrowClick` and -`onLeftArrowClick` props are passed in. +Date navigational arrows can be interacted with when `onNextDayClick` and `onPreviousDayClick` +props are passed in. -You may use `minDate` and `maxDate` to specify -how far in the future or past the timetable can be viewed until. +You may use `minDate` and `maxDate` to limit the range of date navigation _(In this example, the user can only view the timetable 2 days before today and 2 days after today)_ @@ -31,28 +32,27 @@ the user can only view the timetable 2 days before today and 2 days after today) Lazy Load -Clicking onto the refresh icon on the top left-hand corner will trigger a refresh on the component level. +Optional `onRefresh` and `totalRecords` props can also be passed in to show the total count and for refreshing results. -Lazy load is also enabled if `onPage` callback is passed in +This is especially useful when lazy loading is enabled through the `onPage` callback. -Customisable popover width and padding - -You may choose to customise the padding and width of the popover for filled and disabled cells through `filledCellPopoverSize` and `blockedCellPopoverSize` respectively - -Do note that if the custom popover trigger is set to click, it will override the behaviour with the onClick callback for each cell +With popover interactions - +Custom popovers can be added onto row header names and row cells. +There is also the flexibility to have custom popovers on auto generated blocked cells through the `outsideOpHoursCellCustomPopover` prop. -TimeTable with no popover content +However, auto generated disabled cells will not have any popover interaction. -If there's no `blockedCellHoverContent` or `filledBlockClickContent` provided, the popover will not appear +Do note that if the custom popover trigger is set to click, it could conflict with the onClick callback for each cell. - + No results found +`emptyContent` can be passed in to control what to show when there are no results to display. + Component API diff --git a/stories/timetable/timetable.stories.tsx b/stories/timetable/timetable.stories.tsx index 8f52d9942..a2002dafe 100644 --- a/stories/timetable/timetable.stories.tsx +++ b/stories/timetable/timetable.stories.tsx @@ -2,6 +2,7 @@ import { PinIcon } from "@lifesg/react-icons"; import type { Meta, StoryObj } from "@storybook/react"; import dayjs from "dayjs"; import { useEffect, useState } from "react"; +import styled from "styled-components"; import { Color, PopoverV2TriggerType, @@ -11,7 +12,7 @@ import { } from "../../src"; import { TimeTable } from "../../src/timetable/timetable"; import { StyledHoverContent, getTimeTableData, lazyLoad } from "./mock-data"; -import styled from "styled-components"; +import { timetableDefaultData } from "./timetable-default-data"; type Component = typeof TimeTable; @@ -24,17 +25,19 @@ export default meta; const StyledTimeTable = styled(TimeTable)` width: 900px; - height: 500px; + height: 400px; `; export const Default: StoryObj = { render: () => { + const date = dayjs().format("YYYY-MM-DD"); + return ( ); }, @@ -160,12 +163,6 @@ export const TimeTableWithLazyLoad: StoryObj = { }, }; -export const TimeTableWithNoPopoverContent: StoryObj = { - render: () => { - return ; - }, -}; - export const TimeTableWithStyledPopovers: StoryObj = { render: () => { const buildCustomPopover = ( From 96b5da397ef96f8a9e05f11d49d7eff5653c8516 Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Fri, 4 Oct 2024 13:50:41 +0800 Subject: [PATCH 10/17] [BOOKINGSG-6090][JZ] Clean up lazy loading story --- stories/timetable/timetable.stories.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/stories/timetable/timetable.stories.tsx b/stories/timetable/timetable.stories.tsx index a2002dafe..f639a26dc 100644 --- a/stories/timetable/timetable.stories.tsx +++ b/stories/timetable/timetable.stories.tsx @@ -96,9 +96,8 @@ export const TimeTableWithNavigation: StoryObj = { export const TimeTableWithLazyLoad: StoryObj = { render: () => { - const timeTableData = getTimeTableData(); const [results, setResults] = useState([]); - const [date, setDate] = useState(timeTableData.date); + const [date, setDate] = useState(dayjs().format("YYYY-MM-DD")); const [loading, setLoading] = useState(false); const [page, setPage] = useState(1); @@ -110,6 +109,7 @@ export const TimeTableWithLazyLoad: StoryObj = { }, [page]); const onPreviousDayClick = (currentDate: string) => { + setPage(1); const newDate = dayjs(currentDate) .add(-1, "day") .format("YYYY-MM-DD"); @@ -122,6 +122,7 @@ export const TimeTableWithLazyLoad: StoryObj = { }; const onNextDayClick = (currentDate: string) => { + setPage(1); const newDate = dayjs(currentDate) .add(1, "day") .format("YYYY-MM-DD"); @@ -135,6 +136,7 @@ export const TimeTableWithLazyLoad: StoryObj = { const onRefresh = () => { setLoading(true); + setPage(1); setTimeout(() => { setResults(lazyLoad(1)); setLoading(false); @@ -143,14 +145,11 @@ export const TimeTableWithLazyLoad: StoryObj = { return ( Date: Tue, 8 Oct 2024 11:48:48 +0800 Subject: [PATCH 11/17] [BOOKINGSG-6090][JZ] Apply comments --- src/popover-v2/popover-trigger.tsx | 1 + .../timetable-navigator.style.tsx | 18 +- .../timetable-navigator.tsx | 40 +- src/timetable/timetable-row/row-bar.tsx | 13 +- .../timetable-row/row-cell.style.tsx | 4 +- src/timetable/timetable-row/row-cell.tsx | 15 +- src/timetable/timetable.tsx | 26 +- src/timetable/types.ts | 14 +- stories/timetable/mock-data.tsx | 4 +- stories/timetable/props-table.tsx | 12 +- stories/timetable/timetable-default-data.tsx | 92 ++-- .../timetable/timetable-even-days-data.tsx | 294 ++++++------ stories/timetable/timetable-odd-days-data.tsx | 418 +++++++++--------- stories/timetable/timetable.mdx | 2 +- stories/timetable/timetable.stories.tsx | 45 +- tests/timetable/timetable.spec.tsx | 25 +- 16 files changed, 499 insertions(+), 524 deletions(-) diff --git a/src/popover-v2/popover-trigger.tsx b/src/popover-v2/popover-trigger.tsx index 83152e2c8..29e3686d0 100644 --- a/src/popover-v2/popover-trigger.tsx +++ b/src/popover-v2/popover-trigger.tsx @@ -42,6 +42,7 @@ export const PopoverTrigger = ({ const isMobile = useMediaQuery({ maxWidth: MediaWidths.mobileL, }); + const { refs, floatingStyles, context } = useFloating({ open: visible, placement: position, diff --git a/src/timetable/timetable-navigator/timetable-navigator.style.tsx b/src/timetable/timetable-navigator/timetable-navigator.style.tsx index 57c5445f5..bcc8be824 100644 --- a/src/timetable/timetable-navigator/timetable-navigator.style.tsx +++ b/src/timetable/timetable-navigator/timetable-navigator.style.tsx @@ -1,22 +1,22 @@ -import styled, { css } from "styled-components"; +import styled, { css, keyframes } from "styled-components"; import { Color } from "../../color"; import { IconButton } from "../../icon-button"; import { Text } from "../../text"; +const spin = keyframes` + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +`; + export const StyledRefreshButton = styled(IconButton)<{ $isLoading: boolean }>` color: ${Color.Neutral[3]}; - @keyframes spin { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } - } svg { ${(props) => { if (props.$isLoading) { return css` - -webkit-animation: spin 4s linear infinite; - -moz-animation: spin 4s linear infinite; + animation: ${spin} 4s linear infinite; `; } }} diff --git a/src/timetable/timetable-navigator/timetable-navigator.tsx b/src/timetable/timetable-navigator/timetable-navigator.tsx index 0317fec30..5c369bf70 100644 --- a/src/timetable/timetable-navigator/timetable-navigator.tsx +++ b/src/timetable/timetable-navigator/timetable-navigator.tsx @@ -24,7 +24,11 @@ export const TimeTableNavigator = ({ selectedDate, isLoading, tableContainerRef, - ...optionalProps + totalRecords, + onLeftArrowClick, + onRightArrowClick, + onRefresh, + ...otherProps }: TimeTableNavigatorProps) => { // ============================================================================= // EVENT HANDLERS @@ -36,43 +40,41 @@ export const TimeTableNavigator = ({ } }; - const onRefresh = () => { - if (!optionalProps.onRefresh) return; + const handleRefresh = () => { + if (!onRefresh) return; scrollToTop(); - optionalProps.onRefresh(); + onRefresh(); }; const handleRightArrowClick = (date: string) => { scrollToTop(); - optionalProps.onRightArrowClick(date); + onRightArrowClick(date); }; const handleLeftArrowClick = (date: string) => { scrollToTop(); - optionalProps.onLeftArrowClick(date); + onLeftArrowClick(date); }; // ============================================================================= // RENDER FUNCTIONS // ============================================================================= const renderRecordsSection = () => { - if (optionalProps.totalRecords === undefined) return <>; + if (totalRecords === undefined) return <>; return ( - + - {optionalProps.totalRecords} results found + {totalRecords} results found - {optionalProps.onRefresh && ( + {onRefresh && ( @@ -83,21 +85,17 @@ export const TimeTableNavigator = ({ }; return ( - + { } diff --git a/src/timetable/timetable-row/row-bar.tsx b/src/timetable/timetable-row/row-bar.tsx index a6ea1ee1b..3f47a7f17 100644 --- a/src/timetable/timetable-row/row-bar.tsx +++ b/src/timetable/timetable-row/row-bar.tsx @@ -1,11 +1,7 @@ import dayjs from "dayjs"; import { MutableRefObject } from "react"; import { RowBarColors } from "../const"; -import { - CustomPopoverProps, - TimeTableRowCellData, - TimeTableRowData, -} from "../types"; +import { TimeTableRowCellData, TimeTableRowData } from "../types"; import { RowCellContainer } from "./row-bar.style"; import { RowCell } from "./row-cell"; @@ -15,7 +11,6 @@ interface RowBarProps extends TimeTableRowData { intervalWidth: number; containerRef: MutableRefObject; rowBarColor: RowBarColors; - outsideOpHoursCellCustomPopover?: CustomPopoverProps | undefined; } export const RowBar = ({ @@ -28,7 +23,7 @@ export const RowBar = ({ rowBarColor, intervalWidth, containerRef, - outsideOpHoursCellCustomPopover, + outOfRangeCellPopover, ...otherProps }: RowBarProps) => { // ============================================================================= @@ -55,7 +50,7 @@ export const RowBar = ({ startTime: timetableMinTime, endTime: rowMinTime, status: "blocked", - customPopover: outsideOpHoursCellCustomPopover, + customPopover: outOfRangeCellPopover, }); } @@ -99,7 +94,7 @@ export const RowBar = ({ startTime: rowMaxTime, endTime: timetableMaxTime, status: "blocked", - customPopover: outsideOpHoursCellCustomPopover, + customPopover: outOfRangeCellPopover, }); } diff --git a/src/timetable/timetable-row/row-cell.style.tsx b/src/timetable/timetable-row/row-cell.style.tsx index 0eaad2eb3..54894f71b 100644 --- a/src/timetable/timetable-row/row-cell.style.tsx +++ b/src/timetable/timetable-row/row-cell.style.tsx @@ -3,11 +3,11 @@ import { Color } from "../../color"; import { PopoverTrigger } from "../../popover-v2"; import { PopoverCard } from "../../popover-v2/popover.styles"; import { Text } from "../../text"; -import { CellType } from "../types"; +import { TimeTableCellType } from "../types"; interface BlockStyleProps { $width: number; - $status: CellType; + $status: TimeTableCellType; $bgColour: string; $isClickable?: boolean; } diff --git a/src/timetable/timetable-row/row-cell.tsx b/src/timetable/timetable-row/row-cell.tsx index 5b78ffd46..aa7253cdc 100644 --- a/src/timetable/timetable-row/row-cell.tsx +++ b/src/timetable/timetable-row/row-cell.tsx @@ -10,7 +10,6 @@ import { BlockDescription, BlockTitle, Gap, - StyledPopoverContent, Wrapper, } from "./row-cell.style"; @@ -85,18 +84,6 @@ const Component = ({ return wrapper(children); }; - const buildPopoverContent = (content: string | JSX.Element) => { - return ( - - {content} - - ); - }; - const buildPopoverTrigger = (child: JSX.Element) => { const popoverTriggerProps: PopoverV2TriggerProps = { position: "bottom-start", @@ -105,7 +92,7 @@ const Component = ({ children: child, trigger: customPopover.trigger, delay: customPopover.delay, - popoverContent: () => buildPopoverContent(customPopover.content), + popoverContent: customPopover.content, }; return ( diff --git a/src/timetable/timetable.tsx b/src/timetable/timetable.tsx index cc7c7760f..0dc4c0acc 100644 --- a/src/timetable/timetable.tsx +++ b/src/timetable/timetable.tsx @@ -6,7 +6,6 @@ import { CalendarHelper } from "../util"; import { ROW_BAR_COLOR_SEQUENCE, ROW_INTERVAL } from "./const"; import { TimeTableNavigator } from "./timetable-navigator/timetable-navigator"; import { RowBar } from "./timetable-row/row-bar"; -import { StyledPopoverContent } from "./timetable-row/row-cell.style"; import { ClickableRowHeaderTitle, ColumnHeader, @@ -27,7 +26,7 @@ import { StyledPopoverTrigger, TimeTableContainer, } from "./timetable.style"; -import { CustomPopoverProps, TimeTableProps, TimeTableRowData } from "./types"; +import { TimeTableProps, TimeTableRowData } from "./types"; export const TimeTable = ({ date, @@ -158,35 +157,22 @@ export const TimeTable = ({ }; })(); - const buildPopoverContent = (customPopoverProps: CustomPopoverProps) => { - return ( - - {customPopoverProps.content} - - ); - }; - const buildPopoverTrigger = ( data: TimeTableRowData, child: JSX.Element ) => { - if (!data.rowHeaderCustomPopover) { + if (!data.rowHeaderPopover) { return child; } const popoverTriggerProps: PopoverV2TriggerProps = { position: "bottom-start", rootNode: tableContainerRef, - customOffset: data.rowHeaderCustomPopover.offset, + customOffset: data.rowHeaderPopover.offset, children: child, - trigger: data.rowHeaderCustomPopover.trigger, - delay: data.rowHeaderCustomPopover.delay, - popoverContent: () => - buildPopoverContent(data.rowHeaderCustomPopover), + trigger: data.rowHeaderPopover.trigger, + delay: data.rowHeaderPopover.delay, + popoverContent: data.rowHeaderPopover.content, }; return ( diff --git a/src/timetable/types.ts b/src/timetable/types.ts index 373dca03c..6d65ad468 100644 --- a/src/timetable/types.ts +++ b/src/timetable/types.ts @@ -1,7 +1,7 @@ import { PopoverV2TriggerType } from "../popover-v2"; import { ResourceScheme } from "../theme"; -export type CellType = "filled" | "blocked" | "default" | "disabled"; +export type TimeTableCellType = "filled" | "blocked" | "default" | "disabled"; interface EmptyContentProps { description: string; @@ -13,8 +13,8 @@ export interface TimeTableRowData { name: string; rowCells: TimeTableRowCellData[]; subtitle?: string | JSX.Element | undefined; - rowHeaderCustomPopover?: CustomPopoverProps | undefined; - outsideOpHoursCellCustomPopover?: CustomPopoverProps | undefined; + rowHeaderPopover?: TimeTablePopoverProps | undefined; + outOfRangeCellPopover?: TimeTablePopoverProps | undefined; // HH:mm format, defaults to minTime rowMinTime?: string | undefined; // HH:mm format, defaults to maxTime @@ -24,9 +24,9 @@ export interface TimeTableRowData { | undefined; } -export interface CustomPopoverProps { +export interface TimeTablePopoverProps { trigger: PopoverV2TriggerType; - content: string | JSX.Element; + content: string | JSX.Element | (() => React.ReactNode); width?: string | undefined; padding?: string | undefined; delay?: @@ -62,10 +62,10 @@ export interface TimeTableRowCellData { startTime: string; // HH:mm format endTime: string; - status: CellType; + status: TimeTableCellType; title?: string | undefined; subtitle?: string | undefined; - customPopover?: CustomPopoverProps | undefined; + customPopover?: TimeTablePopoverProps | undefined; onClick?: | ((data: TimeTableRowCellData, e: React.MouseEvent) => void) | undefined; diff --git a/stories/timetable/mock-data.tsx b/stories/timetable/mock-data.tsx index ea53eba30..5f08ba914 100644 --- a/stories/timetable/mock-data.tsx +++ b/stories/timetable/mock-data.tsx @@ -2,7 +2,7 @@ import { Person2Icon, PinIcon } from "@lifesg/react-icons"; import dayjs, { Dayjs } from "dayjs"; import styled from "styled-components"; import { Text } from "../../src/text"; -import { CellType, TimeTableProps } from "../../src/timetable/types"; +import { TimeTableCellType, TimeTableProps } from "../../src/timetable/types"; import { evenDaysData } from "./timetable-even-days-data"; import lazyLoadData from "./timetable-lazy-load-data.json"; import { oddDaysData } from "./timetable-odd-days-data"; @@ -13,7 +13,7 @@ export const StyledHoverContent = styled.div` column-gap: 5px; `; -const cellTypeMap: Record = { +const cellTypeMap: Record = { OCCUPIED: "filled", DISABLED: "blocked", DEFAULT: "default", diff --git a/stories/timetable/props-table.tsx b/stories/timetable/props-table.tsx index fab8c1055..9a49a9812 100644 --- a/stories/timetable/props-table.tsx +++ b/stories/timetable/props-table.tsx @@ -86,14 +86,14 @@ const DATA: ApiTableSectionProps[] = [ propTypes: ["string"], }, { - name: "outsideOpHoursCellCustomPopover", + name: "outOfRangeCellPopover", description: ( <> The props for rendering any custom popover for the automatically filled blockedcells. ), - propTypes: ["CustomPopoverProps"], + propTypes: ["TimeTablePopoverProps"], }, { name: "onRefresh", @@ -201,10 +201,10 @@ const DATA: ApiTableSectionProps[] = [ propTypes: ["string", "JSX.Element"], }, { - name: "rowHeaderCustomPopover", + name: "rowHeaderPopover", description: "The props for rendering any custom popover for this row header", - propTypes: ["CustomPopoverProps"], + propTypes: ["TimeTablePopoverProps"], }, { name: "rowMinTime", @@ -303,7 +303,7 @@ const DATA: ApiTableSectionProps[] = [ trigger=click for this cell. ), - propTypes: ["CustomPopoverProps"], + propTypes: ["TimeTablePopoverProps"], }, { name: "onClick", @@ -316,7 +316,7 @@ const DATA: ApiTableSectionProps[] = [ ], }, { - name: "CustomPopoverProps", + name: "TimeTablePopoverProps", attributes: [ { name: "trigger", diff --git a/stories/timetable/timetable-default-data.tsx b/stories/timetable/timetable-default-data.tsx index 6112ac51d..7f7199cd7 100644 --- a/stories/timetable/timetable-default-data.tsx +++ b/stories/timetable/timetable-default-data.tsx @@ -1,4 +1,4 @@ -import { CellType } from "../../src"; +import { TimeTableCellType } from "../../src"; export const timetableDefaultData = [ { @@ -9,57 +9,57 @@ export const timetableDefaultData = [ { startTime: "08:00", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { title: "15 mins", startTime: "09:00", endTime: "09:15", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { title: "60 mins", startTime: "09:15", endTime: "10:15", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { startTime: "10:15", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { title: "15 mins", startTime: "13:00", endTime: "13:15", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { title: "30 mins", startTime: "13:15", endTime: "13:45", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { startTime: "13:45", endTime: "14:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "14:00", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "15:00", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { title: "120 mins", startTime: "16:00", endTime: "18:00", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, ], }, @@ -71,34 +71,34 @@ export const timetableDefaultData = [ { startTime: "06:00", endTime: "07:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "07:00", endTime: "08:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "08:00", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { title: "300 mins", startTime: "09:00", endTime: "14:00", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { startTime: "14:00", endTime: "16:15", - status: "blocked" as CellType, + status: "blocked" as TimeTableCellType, }, { title: "60 mins", startTime: "16:45", endTime: "17:45", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, ], }, @@ -110,50 +110,50 @@ export const timetableDefaultData = [ { startTime: "07:30", endTime: "08:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "08:00", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { title: "45 mins", startTime: "09:00", endTime: "09:45", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { startTime: "10:15", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "11:00", endTime: "12:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { title: "30 mins", startTime: "13:15", endTime: "13:45", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { startTime: "14:00", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "15:00", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { title: "210 mins", startTime: "16:00", endTime: "19:30", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, ], }, @@ -166,27 +166,27 @@ export const timetableDefaultData = [ title: "330 mins", startTime: "08:30", endTime: "14:00", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { startTime: "14:00", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "15:00", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "16:00", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "17:00", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, ], }, @@ -198,86 +198,86 @@ export const timetableDefaultData = [ { startTime: "06:15", endTime: "07:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { title: "15 mins", startTime: "08:00", endTime: "08:15", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { title: "15 mins", startTime: "08:15", endTime: "08:30", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { title: "15 mins", startTime: "08:30", endTime: "08:45", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { title: "15 mins", startTime: "08:45", endTime: "09:00", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { title: "15 mins", startTime: "09:00", endTime: "09:15", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { title: "60 mins", startTime: "09:15", endTime: "10:15", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { startTime: "10:15", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "11:00", endTime: "12:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { title: "15 mins", startTime: "13:00", endTime: "13:15", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { title: "30 mins", startTime: "13:15", endTime: "13:45", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, { startTime: "13:45", endTime: "14:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "14:00", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { startTime: "15:00", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, }, { title: "390 mins", startTime: "16:00", endTime: "22:30", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, }, ], }, diff --git a/stories/timetable/timetable-even-days-data.tsx b/stories/timetable/timetable-even-days-data.tsx index 1b4980b65..e5b54dedf 100644 --- a/stories/timetable/timetable-even-days-data.tsx +++ b/stories/timetable/timetable-even-days-data.tsx @@ -1,9 +1,13 @@ import { Person2Icon } from "@lifesg/react-icons"; -import { CellType, TimeTableRowCellData, TimeTableRowData } from "../../src"; +import { + TimeTableCellType, + TimeTableRowCellData, + TimeTableRowData, +} from "../../src"; export const evenDaysData = [ { - name: "Roti Prata", + name: "Roti Prata oh ya be ya som ba leh yah roti prata char kway teow", rowMinTime: "08:00:00", rowMaxTime: "16:30:00", subtitle: ( @@ -21,7 +25,7 @@ export const evenDaysData = [ endTime: "08:15:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -33,7 +37,7 @@ export const evenDaysData = [ endTime: "08:30:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -45,7 +49,7 @@ export const evenDaysData = [ endTime: "08:45:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -57,7 +61,7 @@ export const evenDaysData = [ endTime: "09:00:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -69,7 +73,7 @@ export const evenDaysData = [ endTime: "10:30:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -81,7 +85,7 @@ export const evenDaysData = [ endTime: "11:00:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -93,7 +97,7 @@ export const evenDaysData = [ endTime: "11:30:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -105,7 +109,7 @@ export const evenDaysData = [ endTime: "16:30:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -131,7 +135,7 @@ export const evenDaysData = [ { startTime: "08:00:00", endTime: "12:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -143,7 +147,7 @@ export const evenDaysData = [ endTime: "16:00:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -153,7 +157,7 @@ export const evenDaysData = [ { startTime: "16:00:00", endTime: "20:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -179,7 +183,7 @@ export const evenDaysData = [ { startTime: "08:00:00", endTime: "09:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -189,7 +193,7 @@ export const evenDaysData = [ { startTime: "09:00:00", endTime: "10:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -199,7 +203,7 @@ export const evenDaysData = [ { startTime: "10:00:00", endTime: "11:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -209,7 +213,7 @@ export const evenDaysData = [ { startTime: "11:00:00", endTime: "13:00:00", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -219,7 +223,7 @@ export const evenDaysData = [ { startTime: "13:00:00", endTime: "14:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -229,7 +233,7 @@ export const evenDaysData = [ { startTime: "14:00:00", endTime: "15:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -239,7 +243,7 @@ export const evenDaysData = [ { startTime: "15:00:00", endTime: "16:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -249,7 +253,7 @@ export const evenDaysData = [ { startTime: "16:00:00", endTime: "17:00:00", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -259,7 +263,7 @@ export const evenDaysData = [ { startTime: "17:00:00", endTime: "18:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -269,7 +273,7 @@ export const evenDaysData = [ { startTime: "18:00:00", endTime: "19:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -279,7 +283,7 @@ export const evenDaysData = [ { startTime: "19:00:00", endTime: "20:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -289,7 +293,7 @@ export const evenDaysData = [ { startTime: "20:00:00", endTime: "21:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -315,7 +319,7 @@ export const evenDaysData = [ { startTime: "10:00", endTime: "12:00", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -325,7 +329,7 @@ export const evenDaysData = [ { startTime: "15:00", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -351,7 +355,7 @@ export const evenDaysData = [ { startTime: "08:00", endTime: "08:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -361,7 +365,7 @@ export const evenDaysData = [ { startTime: "08:30", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -371,7 +375,7 @@ export const evenDaysData = [ { startTime: "09:00", endTime: "09:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -381,7 +385,7 @@ export const evenDaysData = [ { startTime: "09:30", endTime: "10:00", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -391,7 +395,7 @@ export const evenDaysData = [ { startTime: "10:00", endTime: "10:30", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -401,7 +405,7 @@ export const evenDaysData = [ { startTime: "10:30", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -411,7 +415,7 @@ export const evenDaysData = [ { startTime: "13:00", endTime: "13:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -421,7 +425,7 @@ export const evenDaysData = [ { startTime: "13:30", endTime: "14:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -431,7 +435,7 @@ export const evenDaysData = [ { startTime: "14:00", endTime: "14:30", - status: "blocked" as CellType, + status: "blocked" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -441,7 +445,7 @@ export const evenDaysData = [ { startTime: "14:30", endTime: "15:00", - status: "blocked" as CellType, + status: "blocked" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -451,7 +455,7 @@ export const evenDaysData = [ { startTime: "15:00", endTime: "15:30", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -461,7 +465,7 @@ export const evenDaysData = [ { startTime: "15:30", endTime: "16:00", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -471,7 +475,7 @@ export const evenDaysData = [ { startTime: "16:00", endTime: "16:30", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -481,7 +485,7 @@ export const evenDaysData = [ { startTime: "16:30", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -491,7 +495,7 @@ export const evenDaysData = [ { startTime: "17:00", endTime: "17:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -501,7 +505,7 @@ export const evenDaysData = [ { startTime: "17:30", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -527,7 +531,7 @@ export const evenDaysData = [ { startTime: "08:00", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -537,7 +541,7 @@ export const evenDaysData = [ { startTime: "09:00", endTime: "10:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -547,7 +551,7 @@ export const evenDaysData = [ { startTime: "10:00", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -557,7 +561,7 @@ export const evenDaysData = [ { startTime: "11:00", endTime: "12:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -569,7 +573,7 @@ export const evenDaysData = [ endTime: "14:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -581,7 +585,7 @@ export const evenDaysData = [ endTime: "15:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -591,7 +595,7 @@ export const evenDaysData = [ { startTime: "15:00", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -601,7 +605,7 @@ export const evenDaysData = [ { startTime: "16:00", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -611,7 +615,7 @@ export const evenDaysData = [ { startTime: "17:00", endTime: "18:00", - status: "blocked" as CellType, + status: "blocked" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -622,7 +626,7 @@ export const evenDaysData = [ startTime: "18:00", endTime: "19:00", subtitle: "", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -632,7 +636,7 @@ export const evenDaysData = [ { startTime: "19:00", endTime: "20:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -642,7 +646,7 @@ export const evenDaysData = [ { startTime: "20:00", endTime: "21:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -652,7 +656,7 @@ export const evenDaysData = [ { startTime: "21:00", endTime: "22:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -678,7 +682,7 @@ export const evenDaysData = [ { startTime: "08:00:00", endTime: "08:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -688,7 +692,7 @@ export const evenDaysData = [ { startTime: "08:15:00", endTime: "08:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -698,7 +702,7 @@ export const evenDaysData = [ { startTime: "08:30:00", endTime: "08:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -708,7 +712,7 @@ export const evenDaysData = [ { startTime: "08:45:00", endTime: "09:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -718,7 +722,7 @@ export const evenDaysData = [ { startTime: "09:00:00", endTime: "09:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -728,7 +732,7 @@ export const evenDaysData = [ { startTime: "09:15:00", endTime: "09:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -738,7 +742,7 @@ export const evenDaysData = [ { startTime: "09:30:00", endTime: "09:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -748,7 +752,7 @@ export const evenDaysData = [ { startTime: "09:45:00", endTime: "10:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -758,7 +762,7 @@ export const evenDaysData = [ { startTime: "10:00:00", endTime: "10:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -768,7 +772,7 @@ export const evenDaysData = [ { startTime: "10:15:00", endTime: "10:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -778,7 +782,7 @@ export const evenDaysData = [ { startTime: "10:30:00", endTime: "10:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -788,7 +792,7 @@ export const evenDaysData = [ { startTime: "10:45:00", endTime: "11:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -798,7 +802,7 @@ export const evenDaysData = [ { startTime: "11:00:00", endTime: "11:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -808,7 +812,7 @@ export const evenDaysData = [ { startTime: "11:15:00", endTime: "11:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -818,7 +822,7 @@ export const evenDaysData = [ { startTime: "11:30:00", endTime: "11:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -828,7 +832,7 @@ export const evenDaysData = [ { startTime: "11:45:00", endTime: "12:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -838,7 +842,7 @@ export const evenDaysData = [ { startTime: "12:00:00", endTime: "13:00:00", - status: "blocked" as CellType, + status: "blocked" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -848,7 +852,7 @@ export const evenDaysData = [ { startTime: "13:00:00", endTime: "13:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -858,7 +862,7 @@ export const evenDaysData = [ { startTime: "13:15:00", endTime: "13:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -868,7 +872,7 @@ export const evenDaysData = [ { startTime: "13:30:00", endTime: "13:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -878,7 +882,7 @@ export const evenDaysData = [ { startTime: "13:45:00", endTime: "14:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -888,7 +892,7 @@ export const evenDaysData = [ { startTime: "14:00:00", endTime: "14:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -898,7 +902,7 @@ export const evenDaysData = [ { startTime: "14:15:00", endTime: "14:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -908,7 +912,7 @@ export const evenDaysData = [ { startTime: "14:30:00", endTime: "14:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -918,7 +922,7 @@ export const evenDaysData = [ { startTime: "14:45:00", endTime: "15:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -930,7 +934,7 @@ export const evenDaysData = [ endTime: "16:30:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -940,7 +944,7 @@ export const evenDaysData = [ { startTime: "16:30:00", endTime: "16:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -950,7 +954,7 @@ export const evenDaysData = [ { startTime: "16:45:00", endTime: "17:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -960,7 +964,7 @@ export const evenDaysData = [ { startTime: "17:00:00", endTime: "17:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -970,7 +974,7 @@ export const evenDaysData = [ { startTime: "17:15:00", endTime: "17:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -980,7 +984,7 @@ export const evenDaysData = [ { startTime: "17:30:00", endTime: "17:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -990,7 +994,7 @@ export const evenDaysData = [ { startTime: "17:45:00", endTime: "18:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1019,7 +1023,7 @@ export const evenDaysData = [ title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", subtitle: "a very long text that spans across the entire universe beyond the horizon into the blackhole transcending time and space", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1029,7 +1033,7 @@ export const evenDaysData = [ { startTime: "16:30:00", endTime: "16:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1039,7 +1043,7 @@ export const evenDaysData = [ { startTime: "16:45:00", endTime: "17:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1049,7 +1053,7 @@ export const evenDaysData = [ { startTime: "17:00:00", endTime: "17:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1059,7 +1063,7 @@ export const evenDaysData = [ { startTime: "17:15:00", endTime: "17:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1069,7 +1073,7 @@ export const evenDaysData = [ { startTime: "17:30:00", endTime: "17:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1079,7 +1083,7 @@ export const evenDaysData = [ { startTime: "17:45:00", endTime: "18:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1105,7 +1109,7 @@ export const evenDaysData = [ { startTime: "08:00", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1115,7 +1119,7 @@ export const evenDaysData = [ { startTime: "09:00", endTime: "10:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1125,7 +1129,7 @@ export const evenDaysData = [ { startTime: "10:00", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1135,7 +1139,7 @@ export const evenDaysData = [ { startTime: "11:00", endTime: "12:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1145,7 +1149,7 @@ export const evenDaysData = [ { startTime: "13:00", endTime: "14:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1155,7 +1159,7 @@ export const evenDaysData = [ { startTime: "14:00", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1165,7 +1169,7 @@ export const evenDaysData = [ { startTime: "15:00", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1175,7 +1179,7 @@ export const evenDaysData = [ { startTime: "16:00", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1185,7 +1189,7 @@ export const evenDaysData = [ { startTime: "17:00", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1195,7 +1199,7 @@ export const evenDaysData = [ { startTime: "18:00", endTime: "19:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1205,7 +1209,7 @@ export const evenDaysData = [ { startTime: "19:00", endTime: "20:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1215,7 +1219,7 @@ export const evenDaysData = [ { startTime: "20:00", endTime: "21:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1225,7 +1229,7 @@ export const evenDaysData = [ { startTime: "21:00", endTime: "22:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1251,7 +1255,7 @@ export const evenDaysData = [ { startTime: "08:00:00", endTime: "08:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1261,7 +1265,7 @@ export const evenDaysData = [ { startTime: "08:15:00", endTime: "08:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1271,7 +1275,7 @@ export const evenDaysData = [ { startTime: "08:30:00", endTime: "08:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1281,7 +1285,7 @@ export const evenDaysData = [ { startTime: "08:45:00", endTime: "09:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1291,7 +1295,7 @@ export const evenDaysData = [ { startTime: "09:00:00", endTime: "09:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1301,7 +1305,7 @@ export const evenDaysData = [ { startTime: "09:15:00", endTime: "09:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1311,7 +1315,7 @@ export const evenDaysData = [ { startTime: "09:30:00", endTime: "09:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1321,7 +1325,7 @@ export const evenDaysData = [ { startTime: "09:45:00", endTime: "10:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1331,7 +1335,7 @@ export const evenDaysData = [ { startTime: "10:00:00", endTime: "10:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1341,7 +1345,7 @@ export const evenDaysData = [ { startTime: "10:15:00", endTime: "10:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1351,7 +1355,7 @@ export const evenDaysData = [ { startTime: "10:30:00", endTime: "10:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1361,7 +1365,7 @@ export const evenDaysData = [ { startTime: "10:45:00", endTime: "11:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1371,7 +1375,7 @@ export const evenDaysData = [ { startTime: "11:00:00", endTime: "11:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1381,7 +1385,7 @@ export const evenDaysData = [ { startTime: "11:15:00", endTime: "11:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1391,7 +1395,7 @@ export const evenDaysData = [ { startTime: "11:30:00", endTime: "11:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1401,7 +1405,7 @@ export const evenDaysData = [ { startTime: "11:45:00", endTime: "12:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1411,7 +1415,7 @@ export const evenDaysData = [ { startTime: "12:00:00", endTime: "13:00:00", - status: "blocked" as CellType, + status: "blocked" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1421,7 +1425,7 @@ export const evenDaysData = [ { startTime: "13:00:00", endTime: "13:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1431,7 +1435,7 @@ export const evenDaysData = [ { startTime: "13:15:00", endTime: "13:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1441,7 +1445,7 @@ export const evenDaysData = [ { startTime: "13:30:00", endTime: "13:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1451,7 +1455,7 @@ export const evenDaysData = [ { startTime: "13:45:00", endTime: "14:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1461,7 +1465,7 @@ export const evenDaysData = [ { startTime: "14:00:00", endTime: "14:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1471,7 +1475,7 @@ export const evenDaysData = [ { startTime: "14:15:00", endTime: "14:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1481,7 +1485,7 @@ export const evenDaysData = [ { startTime: "14:30:00", endTime: "14:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1491,7 +1495,7 @@ export const evenDaysData = [ { startTime: "14:45:00", endTime: "15:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1501,7 +1505,7 @@ export const evenDaysData = [ { startTime: "15:00:00", endTime: "15:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1511,7 +1515,7 @@ export const evenDaysData = [ { startTime: "15:15:00", endTime: "15:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1521,7 +1525,7 @@ export const evenDaysData = [ { startTime: "15:30:00", endTime: "15:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1531,7 +1535,7 @@ export const evenDaysData = [ { startTime: "15:45:00", endTime: "16:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1541,7 +1545,7 @@ export const evenDaysData = [ { startTime: "16:00:00", endTime: "16:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1551,7 +1555,7 @@ export const evenDaysData = [ { startTime: "16:15:00", endTime: "16:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1561,7 +1565,7 @@ export const evenDaysData = [ { startTime: "16:30:00", endTime: "16:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1571,7 +1575,7 @@ export const evenDaysData = [ { startTime: "16:45:00", endTime: "17:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1581,7 +1585,7 @@ export const evenDaysData = [ { startTime: "17:00:00", endTime: "17:15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1591,7 +1595,7 @@ export const evenDaysData = [ { startTime: "17:15:00", endTime: "17:30:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1601,7 +1605,7 @@ export const evenDaysData = [ { startTime: "17:30:00", endTime: "17:45:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1611,7 +1615,7 @@ export const evenDaysData = [ { startTime: "17:45:00", endTime: "18:00:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` diff --git a/stories/timetable/timetable-odd-days-data.tsx b/stories/timetable/timetable-odd-days-data.tsx index 58ddb13c2..7937d0e54 100644 --- a/stories/timetable/timetable-odd-days-data.tsx +++ b/stories/timetable/timetable-odd-days-data.tsx @@ -1,5 +1,9 @@ import { Person2Icon } from "@lifesg/react-icons"; -import { CellType, TimeTableRowCellData, TimeTableRowData } from "../../src"; +import { + TimeTableCellType, + TimeTableRowCellData, + TimeTableRowData, +} from "../../src"; export const oddDaysData = [ { @@ -19,7 +23,7 @@ export const oddDaysData = [ { startTime: "08:00", endTime: "08:45", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, title: "title", subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { @@ -31,7 +35,7 @@ export const oddDaysData = [ { startTime: "08:45", endTime: "09:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -41,17 +45,17 @@ export const oddDaysData = [ { startTime: "09:30", endTime: "10:00", - status: "blocked" as CellType, + status: "blocked" as TimeTableCellType, }, { startTime: "10:00", endTime: "11:00", - status: "blocked" as CellType, + status: "blocked" as TimeTableCellType, }, { startTime: "11:00", endTime: "11:45", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -63,7 +67,7 @@ export const oddDaysData = [ endTime: "14:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -73,7 +77,7 @@ export const oddDaysData = [ { startTime: "14:30", endTime: "15:15", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -83,7 +87,7 @@ export const oddDaysData = [ { startTime: "16:45", endTime: "17:15", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -93,7 +97,7 @@ export const oddDaysData = [ { startTime: "17:15", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -103,7 +107,7 @@ export const oddDaysData = [ { startTime: "18:00", endTime: "18:45", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -113,7 +117,7 @@ export const oddDaysData = [ { startTime: "18:45", endTime: "19:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -123,7 +127,7 @@ export const oddDaysData = [ { startTime: "19:30", endTime: "20:15", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -133,7 +137,7 @@ export const oddDaysData = [ { startTime: "20:15", endTime: "21:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -143,7 +147,7 @@ export const oddDaysData = [ { startTime: "21:00", endTime: "21:45", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -153,7 +157,7 @@ export const oddDaysData = [ { startTime: "21:45", endTime: "22:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -179,7 +183,7 @@ export const oddDaysData = [ { startTime: "08:00", endTime: "08:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -189,7 +193,7 @@ export const oddDaysData = [ { startTime: "08:30", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -201,7 +205,7 @@ export const oddDaysData = [ endTime: "11:00", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -211,7 +215,7 @@ export const oddDaysData = [ { startTime: "11:00", endTime: "11:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -221,7 +225,7 @@ export const oddDaysData = [ { startTime: "11:30", endTime: "12:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -231,7 +235,7 @@ export const oddDaysData = [ { startTime: "12:00", endTime: "12:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -241,7 +245,7 @@ export const oddDaysData = [ { startTime: "12:30", endTime: "13:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -251,7 +255,7 @@ export const oddDaysData = [ { startTime: "14:00", endTime: "14:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -261,7 +265,7 @@ export const oddDaysData = [ { startTime: "14:30", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -273,7 +277,7 @@ export const oddDaysData = [ endTime: "16:30", title: "title", subtitle: "subtitle", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -283,7 +287,7 @@ export const oddDaysData = [ { startTime: "16:30", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -293,7 +297,7 @@ export const oddDaysData = [ { startTime: "17:00", endTime: "17:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -303,7 +307,7 @@ export const oddDaysData = [ { startTime: "17:30", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -313,7 +317,7 @@ export const oddDaysData = [ { startTime: "18:00", endTime: "18:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -323,7 +327,7 @@ export const oddDaysData = [ { startTime: "18:30", endTime: "19:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -333,7 +337,7 @@ export const oddDaysData = [ { startTime: "19:00", endTime: "19:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -343,7 +347,7 @@ export const oddDaysData = [ { startTime: "19:30", endTime: "20:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -353,7 +357,7 @@ export const oddDaysData = [ { startTime: "20:00", endTime: "20:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -363,7 +367,7 @@ export const oddDaysData = [ { startTime: "20:30", endTime: "21:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -373,7 +377,7 @@ export const oddDaysData = [ { startTime: "21:00", endTime: "21:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -383,7 +387,7 @@ export const oddDaysData = [ { startTime: "21:30", endTime: "22:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -409,7 +413,7 @@ export const oddDaysData = [ { startTime: "08:00", endTime: "08:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -419,7 +423,7 @@ export const oddDaysData = [ { startTime: "08:30", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -429,7 +433,7 @@ export const oddDaysData = [ { startTime: "09:00", endTime: "09:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -439,7 +443,7 @@ export const oddDaysData = [ { startTime: "09:30", endTime: "10:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -449,12 +453,12 @@ export const oddDaysData = [ { startTime: "10:00", endTime: "13:00", - status: "blocked" as CellType, + status: "blocked" as TimeTableCellType, }, { startTime: "13:00", endTime: "13:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -464,7 +468,7 @@ export const oddDaysData = [ { startTime: "13:30", endTime: "14:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -474,7 +478,7 @@ export const oddDaysData = [ { startTime: "14:00", endTime: "14:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -484,7 +488,7 @@ export const oddDaysData = [ { startTime: "14:30", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -494,7 +498,7 @@ export const oddDaysData = [ { startTime: "15:00", endTime: "17:00", - status: "blocked" as CellType, + status: "blocked" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -504,7 +508,7 @@ export const oddDaysData = [ { startTime: "17:00", endTime: "17:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -514,7 +518,7 @@ export const oddDaysData = [ { startTime: "17:30", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -524,7 +528,7 @@ export const oddDaysData = [ { startTime: "18:00", endTime: "18:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -534,7 +538,7 @@ export const oddDaysData = [ { startTime: "18:30", endTime: "19:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -544,7 +548,7 @@ export const oddDaysData = [ { startTime: "19:00", endTime: "19:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -554,7 +558,7 @@ export const oddDaysData = [ { startTime: "19:30", endTime: "20:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -564,7 +568,7 @@ export const oddDaysData = [ { startTime: "20:00", endTime: "20:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -574,7 +578,7 @@ export const oddDaysData = [ { startTime: "20:30", endTime: "21:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -584,7 +588,7 @@ export const oddDaysData = [ { startTime: "21:00", endTime: "21:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -594,7 +598,7 @@ export const oddDaysData = [ { startTime: "21:30", endTime: "22:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -620,7 +624,7 @@ export const oddDaysData = [ { startTime: "08:00", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -630,7 +634,7 @@ export const oddDaysData = [ { startTime: "09:00", endTime: "10:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -640,7 +644,7 @@ export const oddDaysData = [ { startTime: "10:00", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -650,7 +654,7 @@ export const oddDaysData = [ { startTime: "11:00", endTime: "12:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -660,7 +664,7 @@ export const oddDaysData = [ { startTime: "12:00", endTime: "13:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -670,7 +674,7 @@ export const oddDaysData = [ { startTime: "13:00", endTime: "14:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -680,7 +684,7 @@ export const oddDaysData = [ { startTime: "14:00", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -690,7 +694,7 @@ export const oddDaysData = [ { startTime: "15:00", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -700,7 +704,7 @@ export const oddDaysData = [ { startTime: "16:00", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -710,7 +714,7 @@ export const oddDaysData = [ { startTime: "17:00", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -720,7 +724,7 @@ export const oddDaysData = [ { startTime: "18:00", endTime: "19:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -730,7 +734,7 @@ export const oddDaysData = [ { startTime: "19:00", endTime: "20:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -740,7 +744,7 @@ export const oddDaysData = [ { startTime: "20:00", endTime: "21:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -750,7 +754,7 @@ export const oddDaysData = [ { startTime: "21:00", endTime: "22:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -776,7 +780,7 @@ export const oddDaysData = [ { startTime: "08:00", endTime: "08:30", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, title: "title", subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { @@ -788,7 +792,7 @@ export const oddDaysData = [ { startTime: "08:30", endTime: "09:00", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, title: "title", subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { @@ -800,7 +804,7 @@ export const oddDaysData = [ { startTime: "09:00", endTime: "09:15", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, title: "title", subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { @@ -812,7 +816,7 @@ export const oddDaysData = [ { startTime: "09:15", endTime: "09:30", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, title: "title", subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { @@ -824,7 +828,7 @@ export const oddDaysData = [ { startTime: "09:30", endTime: "09:45", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, title: "title", subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { @@ -836,7 +840,7 @@ export const oddDaysData = [ { startTime: "09:45", endTime: "10:00", - status: "filled" as CellType, + status: "filled" as TimeTableCellType, title: "title", subtitle: "subtitle", onClick: (data: TimeTableRowCellData) => { @@ -848,7 +852,7 @@ export const oddDaysData = [ { startTime: "10:00", endTime: "10:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -858,7 +862,7 @@ export const oddDaysData = [ { startTime: "10:30", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -868,7 +872,7 @@ export const oddDaysData = [ { startTime: "11:00", endTime: "11:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -878,7 +882,7 @@ export const oddDaysData = [ { startTime: "11:30", endTime: "12:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -888,7 +892,7 @@ export const oddDaysData = [ { startTime: "15:00", endTime: "15:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -898,7 +902,7 @@ export const oddDaysData = [ { startTime: "15:30", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -908,7 +912,7 @@ export const oddDaysData = [ { startTime: "16:00", endTime: "16:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -918,7 +922,7 @@ export const oddDaysData = [ { startTime: "16:30", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -928,7 +932,7 @@ export const oddDaysData = [ { startTime: "17:00", endTime: "17:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -938,7 +942,7 @@ export const oddDaysData = [ { startTime: "17:30", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -948,7 +952,7 @@ export const oddDaysData = [ { startTime: "18:00", endTime: "18:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -958,7 +962,7 @@ export const oddDaysData = [ { startTime: "18:30", endTime: "19:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -968,7 +972,7 @@ export const oddDaysData = [ { startTime: "19:00", endTime: "19:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -978,7 +982,7 @@ export const oddDaysData = [ { startTime: "19:30", endTime: "20:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -988,7 +992,7 @@ export const oddDaysData = [ { startTime: "20:00", endTime: "20:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -998,7 +1002,7 @@ export const oddDaysData = [ { startTime: "20:30", endTime: "21:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1008,7 +1012,7 @@ export const oddDaysData = [ { startTime: "21:00", endTime: "21:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1018,7 +1022,7 @@ export const oddDaysData = [ { startTime: "21:30", endTime: "22:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1044,7 +1048,7 @@ export const oddDaysData = [ { startTime: "08:00", endTime: "08:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1054,7 +1058,7 @@ export const oddDaysData = [ { startTime: "08:30", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1064,7 +1068,7 @@ export const oddDaysData = [ { startTime: "09:00", endTime: "09:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1074,7 +1078,7 @@ export const oddDaysData = [ { startTime: "09:30", endTime: "10:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1084,7 +1088,7 @@ export const oddDaysData = [ { startTime: "10:00", endTime: "10:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1094,7 +1098,7 @@ export const oddDaysData = [ { startTime: "10:30", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1104,7 +1108,7 @@ export const oddDaysData = [ { startTime: "11:00", endTime: "11:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1114,7 +1118,7 @@ export const oddDaysData = [ { startTime: "11:30", endTime: "12:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1124,7 +1128,7 @@ export const oddDaysData = [ { startTime: "12:00", endTime: "12:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1134,7 +1138,7 @@ export const oddDaysData = [ { startTime: "12:30", endTime: "13:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1144,7 +1148,7 @@ export const oddDaysData = [ { startTime: "13:00", endTime: "13:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1154,7 +1158,7 @@ export const oddDaysData = [ { startTime: "13:30", endTime: "14:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1164,7 +1168,7 @@ export const oddDaysData = [ { startTime: "14:00", endTime: "14:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1174,7 +1178,7 @@ export const oddDaysData = [ { startTime: "14:30", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1184,7 +1188,7 @@ export const oddDaysData = [ { startTime: "15:00", endTime: "15:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1194,7 +1198,7 @@ export const oddDaysData = [ { startTime: "15:30", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1204,7 +1208,7 @@ export const oddDaysData = [ { startTime: "16:00", endTime: "16:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1214,7 +1218,7 @@ export const oddDaysData = [ { startTime: "16:30", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1224,7 +1228,7 @@ export const oddDaysData = [ { startTime: "17:00", endTime: "17:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1234,7 +1238,7 @@ export const oddDaysData = [ { startTime: "17:30", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1244,7 +1248,7 @@ export const oddDaysData = [ { startTime: "18:00", endTime: "18:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1254,7 +1258,7 @@ export const oddDaysData = [ { startTime: "18:30", endTime: "19:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1264,7 +1268,7 @@ export const oddDaysData = [ { startTime: "19:00", endTime: "19:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1274,7 +1278,7 @@ export const oddDaysData = [ { startTime: "19:30", endTime: "20:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1284,7 +1288,7 @@ export const oddDaysData = [ { startTime: "20:00", endTime: "20:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1294,7 +1298,7 @@ export const oddDaysData = [ { startTime: "20:30", endTime: "21:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1304,7 +1308,7 @@ export const oddDaysData = [ { startTime: "21:00", endTime: "21:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1314,7 +1318,7 @@ export const oddDaysData = [ { startTime: "21:30", endTime: "22:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1340,7 +1344,7 @@ export const oddDaysData = [ { startTime: "08:00", endTime: "08:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1350,7 +1354,7 @@ export const oddDaysData = [ { startTime: "08:30", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1360,7 +1364,7 @@ export const oddDaysData = [ { startTime: "09:00", endTime: "09:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1370,7 +1374,7 @@ export const oddDaysData = [ { startTime: "09:30", endTime: "10:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1380,7 +1384,7 @@ export const oddDaysData = [ { startTime: "10:00", endTime: "10:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1390,7 +1394,7 @@ export const oddDaysData = [ { startTime: "10:30", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1400,7 +1404,7 @@ export const oddDaysData = [ { startTime: "11:00", endTime: "11:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1410,7 +1414,7 @@ export const oddDaysData = [ { startTime: "11:30", endTime: "12:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1420,7 +1424,7 @@ export const oddDaysData = [ { startTime: "12:00", endTime: "12:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1430,7 +1434,7 @@ export const oddDaysData = [ { startTime: "12:30", endTime: "13:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1440,7 +1444,7 @@ export const oddDaysData = [ { startTime: "13:00", endTime: "13:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1450,7 +1454,7 @@ export const oddDaysData = [ { startTime: "13:30", endTime: "14:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1460,7 +1464,7 @@ export const oddDaysData = [ { startTime: "14:00", endTime: "14:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1470,7 +1474,7 @@ export const oddDaysData = [ { startTime: "14:30", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1480,7 +1484,7 @@ export const oddDaysData = [ { startTime: "15:00", endTime: "15:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1490,7 +1494,7 @@ export const oddDaysData = [ { startTime: "15:30", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1500,7 +1504,7 @@ export const oddDaysData = [ { startTime: "16:00", endTime: "16:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1510,7 +1514,7 @@ export const oddDaysData = [ { startTime: "16:30", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1520,7 +1524,7 @@ export const oddDaysData = [ { startTime: "17:00", endTime: "17:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1530,7 +1534,7 @@ export const oddDaysData = [ { startTime: "17:30", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1540,7 +1544,7 @@ export const oddDaysData = [ { startTime: "18:00", endTime: "18:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1550,7 +1554,7 @@ export const oddDaysData = [ { startTime: "18:30", endTime: "19:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1560,7 +1564,7 @@ export const oddDaysData = [ { startTime: "19:00", endTime: "19:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1570,7 +1574,7 @@ export const oddDaysData = [ { startTime: "19:30", endTime: "20:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1580,7 +1584,7 @@ export const oddDaysData = [ { startTime: "20:00", endTime: "20:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1590,7 +1594,7 @@ export const oddDaysData = [ { startTime: "20:30", endTime: "21:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1600,7 +1604,7 @@ export const oddDaysData = [ { startTime: "21:00", endTime: "21:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1610,7 +1614,7 @@ export const oddDaysData = [ { startTime: "21:30", endTime: "22:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1636,7 +1640,7 @@ export const oddDaysData = [ { startTime: "08:00", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1646,7 +1650,7 @@ export const oddDaysData = [ { startTime: "09:00", endTime: "10:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1656,7 +1660,7 @@ export const oddDaysData = [ { startTime: "10:00", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1666,7 +1670,7 @@ export const oddDaysData = [ { startTime: "11:00", endTime: "12:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1676,7 +1680,7 @@ export const oddDaysData = [ { startTime: "12:00", endTime: "13:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1686,7 +1690,7 @@ export const oddDaysData = [ { startTime: "13:00", endTime: "14:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1696,7 +1700,7 @@ export const oddDaysData = [ { startTime: "14:00", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1706,7 +1710,7 @@ export const oddDaysData = [ { startTime: "15:00", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1716,7 +1720,7 @@ export const oddDaysData = [ { startTime: "16:00", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1726,7 +1730,7 @@ export const oddDaysData = [ { startTime: "17:00", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1736,7 +1740,7 @@ export const oddDaysData = [ { startTime: "18:00", endTime: "19:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1746,7 +1750,7 @@ export const oddDaysData = [ { startTime: "19:00", endTime: "20:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1756,7 +1760,7 @@ export const oddDaysData = [ { startTime: "20:00", endTime: "21:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1766,7 +1770,7 @@ export const oddDaysData = [ { startTime: "21:00", endTime: "22:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1792,7 +1796,7 @@ export const oddDaysData = [ { startTime: "08:00", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1802,7 +1806,7 @@ export const oddDaysData = [ { startTime: "09:00", endTime: "10:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1812,7 +1816,7 @@ export const oddDaysData = [ { startTime: "10:00", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1822,7 +1826,7 @@ export const oddDaysData = [ { startTime: "11:00", endTime: "12:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1832,7 +1836,7 @@ export const oddDaysData = [ { startTime: "12:00", endTime: "13:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1842,7 +1846,7 @@ export const oddDaysData = [ { startTime: "13:00", endTime: "14:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1852,7 +1856,7 @@ export const oddDaysData = [ { startTime: "14:00", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1862,7 +1866,7 @@ export const oddDaysData = [ { startTime: "15:00", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1872,7 +1876,7 @@ export const oddDaysData = [ { startTime: "16:00", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1882,7 +1886,7 @@ export const oddDaysData = [ { startTime: "17:00", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1892,7 +1896,7 @@ export const oddDaysData = [ { startTime: "18:00", endTime: "19:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1902,7 +1906,7 @@ export const oddDaysData = [ { startTime: "19:00", endTime: "20:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1912,7 +1916,7 @@ export const oddDaysData = [ { startTime: "20:00", endTime: "21:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1922,7 +1926,7 @@ export const oddDaysData = [ { startTime: "21:00", endTime: "22:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1948,7 +1952,7 @@ export const oddDaysData = [ { startTime: "08:00", endTime: "08:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1958,7 +1962,7 @@ export const oddDaysData = [ { startTime: "08:30", endTime: "09:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1968,7 +1972,7 @@ export const oddDaysData = [ { startTime: "09:00", endTime: "09:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1978,7 +1982,7 @@ export const oddDaysData = [ { startTime: "09:30", endTime: "10:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1988,7 +1992,7 @@ export const oddDaysData = [ { startTime: "10:00", endTime: "10:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -1998,7 +2002,7 @@ export const oddDaysData = [ { startTime: "10:30", endTime: "11:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2008,7 +2012,7 @@ export const oddDaysData = [ { startTime: "11:00", endTime: "11:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2018,7 +2022,7 @@ export const oddDaysData = [ { startTime: "11:30", endTime: "12:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2028,7 +2032,7 @@ export const oddDaysData = [ { startTime: "12:00", endTime: "12:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2038,7 +2042,7 @@ export const oddDaysData = [ { startTime: "12:30", endTime: "13:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2048,7 +2052,7 @@ export const oddDaysData = [ { startTime: "13:00", endTime: "13:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2058,7 +2062,7 @@ export const oddDaysData = [ { startTime: "13:30", endTime: "14:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2068,7 +2072,7 @@ export const oddDaysData = [ { startTime: "14:00", endTime: "14:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2078,7 +2082,7 @@ export const oddDaysData = [ { startTime: "14:30", endTime: "15:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2088,7 +2092,7 @@ export const oddDaysData = [ { startTime: "15:00", endTime: "15:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2098,7 +2102,7 @@ export const oddDaysData = [ { startTime: "15:30", endTime: "16:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2108,7 +2112,7 @@ export const oddDaysData = [ { startTime: "16:00", endTime: "16:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2118,7 +2122,7 @@ export const oddDaysData = [ { startTime: "16:30", endTime: "17:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2128,7 +2132,7 @@ export const oddDaysData = [ { startTime: "17:00", endTime: "17:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2138,7 +2142,7 @@ export const oddDaysData = [ { startTime: "17:30", endTime: "18:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2148,7 +2152,7 @@ export const oddDaysData = [ { startTime: "18:00", endTime: "18:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2158,7 +2162,7 @@ export const oddDaysData = [ { startTime: "18:30", endTime: "19:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2168,7 +2172,7 @@ export const oddDaysData = [ { startTime: "19:00", endTime: "19:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2178,7 +2182,7 @@ export const oddDaysData = [ { startTime: "19:30", endTime: "20:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2188,7 +2192,7 @@ export const oddDaysData = [ { startTime: "20:00", endTime: "20:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2198,7 +2202,7 @@ export const oddDaysData = [ { startTime: "20:30", endTime: "21:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2208,7 +2212,7 @@ export const oddDaysData = [ { startTime: "21:00", endTime: "21:30", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` @@ -2218,7 +2222,7 @@ export const oddDaysData = [ { startTime: "21:30", endTime: "22:00", - status: "default" as CellType, + status: "default" as TimeTableCellType, onClick: (data: TimeTableRowCellData) => { alert( `Clicked on cell start: ${data.startTime}, end: ${data.endTime}` diff --git a/stories/timetable/timetable.mdx b/stories/timetable/timetable.mdx index a14188206..d6af2d4ab 100644 --- a/stories/timetable/timetable.mdx +++ b/stories/timetable/timetable.mdx @@ -41,7 +41,7 @@ This is especially useful when lazy loading is enabled through the `onPage` call With popover interactions Custom popovers can be added onto row header names and row cells. -There is also the flexibility to have custom popovers on auto generated blocked cells through the `outsideOpHoursCellCustomPopover` prop. +There is also the flexibility to have custom popovers on auto generated blocked cells through the `outOfRangeCellPopover` prop. However, auto generated disabled cells will not have any popover interaction. diff --git a/stories/timetable/timetable.stories.tsx b/stories/timetable/timetable.stories.tsx index f639a26dc..ab81ab168 100644 --- a/stories/timetable/timetable.stories.tsx +++ b/stories/timetable/timetable.stories.tsx @@ -4,12 +4,14 @@ import dayjs from "dayjs"; import { useEffect, useState } from "react"; import styled from "styled-components"; import { + Card, Color, PopoverV2TriggerType, Text, TimeTableRowCellData, TimeTableRowData, } from "../../src"; +import { applyHtmlContentStyle } from "../../src/shared/html-content/html-content"; import { TimeTable } from "../../src/timetable/timetable"; import { StyledHoverContent, getTimeTableData, lazyLoad } from "./mock-data"; import { timetableDefaultData } from "./timetable-default-data"; @@ -98,13 +100,14 @@ export const TimeTableWithLazyLoad: StoryObj = { render: () => { const [results, setResults] = useState([]); const [date, setDate] = useState(dayjs().format("YYYY-MM-DD")); - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(true); const [page, setPage] = useState(1); useEffect(() => { setTimeout(() => { const results = lazyLoad(page); setResults((prev) => [...prev, ...results]); + setLoading(false); }, 2000); }, [page]); @@ -164,6 +167,14 @@ export const TimeTableWithLazyLoad: StoryObj = { export const TimeTableWithStyledPopovers: StoryObj = { render: () => { + const StyledCustomPopoverCard = styled(Card)` + display: flex; + flex-direction: column; + row-gap: 2rem; + width: 400px; + padding: 3rem; + ${applyHtmlContentStyle({ textSize: "BodySmall" })} + `; const buildCustomPopover = ( row: TimeTableRowData, cell: TimeTableRowCellData @@ -173,14 +184,8 @@ export const TimeTableWithStyledPopovers: StoryObj = { return { customPopover: { trigger: "hover" as PopoverV2TriggerType, - content: ( -
+ content: () => ( +
{row.name} @@ -202,7 +207,7 @@ export const TimeTableWithStyledPopovers: StoryObj = { color: `${Color.Neutral[3]}`, }} > - Booking owner + E-mail {cell.subtitle} = { color: `${Color.Neutral[3]}`, }} > - Booking title + Title {cell.title}
-
+ ), - width: "400px", - padding: "3rem", offset: 0, delay: { open: 1250, close: 1250 }, }, @@ -238,7 +241,7 @@ export const TimeTableWithStyledPopovers: StoryObj = { return { customPopover: { trigger: "hover" as PopoverV2TriggerType, - content: "Available", + content: () => Available, offset: 0, delay: { open: 0, close: 0 }, }, @@ -250,23 +253,23 @@ export const TimeTableWithStyledPopovers: StoryObj = { const rowData = getTimeTableData().rowData.map((row) => { return { ...row, - rowHeaderCustomPopover: { + rowHeaderPopover: { trigger: "hover" as PopoverV2TriggerType, - content: ( - <> + content: () => ( + {row.name} Eclipse - + ), offset: 0, delay: { open: 500, close: 0 }, }, - outsideOpHoursCellCustomPopover: { + outOfRangeCellPopover: { trigger: "hover" as PopoverV2TriggerType, - content: "Outside operating hours", + content: () => Outside operating hours, offset: 0, delay: { open: 0, close: 0 }, }, diff --git a/tests/timetable/timetable.spec.tsx b/tests/timetable/timetable.spec.tsx index 55114840a..f2db758aa 100644 --- a/tests/timetable/timetable.spec.tsx +++ b/tests/timetable/timetable.spec.tsx @@ -153,12 +153,12 @@ describe("TimeTable", () => { }, }, ], - rowHeaderCustomPopover: { + rowHeaderPopover: { trigger: "hover", content: "hello world123", delay: { open: 0, close: 0 }, }, - outsideOpHoursCellCustomPopover: { + outOfRangeCellPopover: { trigger: "hover", content: "skibididiidi ohio", delay: { open: 0, close: 0 }, @@ -178,25 +178,22 @@ describe("TimeTable", () => { fireEvent.mouseEnter(firstRowHeader); expect(screen.queryByText("hello world123")).toBeVisible(); - expect( - screen.queryByTestId("row-header-popover-card") - ).toBeInTheDocument(); + expect(screen.queryByTestId("popover")).toBeInTheDocument(); + fireEvent.mouseLeave(firstRowHeader); fireEvent.mouseEnter(blockedCell); expect(screen.queryByText("skibididiidi ohio")).toBeVisible(); - expect( - screen.queryByTestId("blocked-popover-card") - ).toBeInTheDocument(); + expect(screen.queryByTestId("popover")).toBeInTheDocument(); + fireEvent.mouseLeave(blockedCell); fireEvent.mouseEnter(filledCell); expect(screen.queryByText("beeeboobeebooo")).toBeVisible(); - expect( - screen.queryByTestId("blocked-popover-card") - ).toBeInTheDocument(); + expect(screen.queryByTestId("popover")).toBeInTheDocument(); + fireEvent.mouseLeave(filledCell); }); it("should trigger onNameClick if row header name are clicked", () => { - const onNameClick = jest.fn(); + const onRowNameClick = jest.fn(); render( { name: "Test", rowMinTime: "08:00:00", rowMaxTime: "09:00:00", - onRowNameClick: onNameClick, + onRowNameClick: onRowNameClick, rowCells: [ { id: "1", @@ -225,7 +222,7 @@ describe("TimeTable", () => { const rowHeaderName = screen.getByTestId("1-row-header-title"); fireEvent.click(rowHeaderName); - expect(onNameClick).toHaveBeenCalledTimes(1); + expect(onRowNameClick).toHaveBeenCalledTimes(1); }); it("should have show empty content display if no rowData is passed into TimeTable", () => { From 2ad799c73191b118baa74281825971e0eed32d97 Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Tue, 8 Oct 2024 12:14:19 +0800 Subject: [PATCH 12/17] [BOOKINGSG-6090][JZ] Add width property to row header title --- src/timetable/timetable.style.tsx | 1 + stories/timetable/timetable-even-days-data.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/timetable/timetable.style.tsx b/src/timetable/timetable.style.tsx index 90e712111..4dc75d64c 100644 --- a/src/timetable/timetable.style.tsx +++ b/src/timetable/timetable.style.tsx @@ -187,6 +187,7 @@ export const ClickableRowHeaderTitle = styled(Text.H5)<{ display: inline-block; text-overflow: ellipsis; overflow: hidden; + width: 100%; white-space: nowrap; color: ${Color.Primary}; :hover { diff --git a/stories/timetable/timetable-even-days-data.tsx b/stories/timetable/timetable-even-days-data.tsx index e5b54dedf..4a7f4f4da 100644 --- a/stories/timetable/timetable-even-days-data.tsx +++ b/stories/timetable/timetable-even-days-data.tsx @@ -7,7 +7,7 @@ import { export const evenDaysData = [ { - name: "Roti Prata oh ya be ya som ba leh yah roti prata char kway teow", + name: "Onion and Cheese Roti Prata", rowMinTime: "08:00:00", rowMaxTime: "16:30:00", subtitle: ( From 14605b9dcbf0cd74b74d5e9e1986c2916dd76a0d Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Tue, 8 Oct 2024 12:56:31 +0800 Subject: [PATCH 13/17] [BOOKINGSG-6090][JZ] Remove unused styles, rename props, and update props table --- .../timetable-navigator.style.tsx | 4 +- .../timetable-navigator.tsx | 10 +- .../timetable-row/row-cell.style.tsx | 20 --- src/timetable/timetable.tsx | 28 ++-- src/timetable/types.ts | 4 +- stories/timetable/props-table.tsx | 122 ++++++++++-------- stories/timetable/timetable.stories.tsx | 6 +- tests/timetable/timetable.spec.tsx | 14 +- 8 files changed, 103 insertions(+), 105 deletions(-) diff --git a/src/timetable/timetable-navigator/timetable-navigator.style.tsx b/src/timetable/timetable-navigator/timetable-navigator.style.tsx index bcc8be824..e376816b3 100644 --- a/src/timetable/timetable-navigator/timetable-navigator.style.tsx +++ b/src/timetable/timetable-navigator/timetable-navigator.style.tsx @@ -10,11 +10,11 @@ const spin = keyframes` } `; -export const StyledRefreshButton = styled(IconButton)<{ $isLoading: boolean }>` +export const StyledRefreshButton = styled(IconButton)<{ $loading: boolean }>` color: ${Color.Neutral[3]}; svg { ${(props) => { - if (props.$isLoading) { + if (props.$loading) { return css` animation: ${spin} 4s linear infinite; `; diff --git a/src/timetable/timetable-navigator/timetable-navigator.tsx b/src/timetable/timetable-navigator/timetable-navigator.tsx index 5c369bf70..b95fa68e9 100644 --- a/src/timetable/timetable-navigator/timetable-navigator.tsx +++ b/src/timetable/timetable-navigator/timetable-navigator.tsx @@ -10,7 +10,7 @@ import { interface TimeTableNavigatorProps { selectedDate: string; - isLoading: boolean; + loading: boolean; tableContainerRef: MutableRefObject; minDate?: string | undefined; maxDate?: string | undefined; @@ -22,7 +22,7 @@ interface TimeTableNavigatorProps { export const TimeTableNavigator = ({ selectedDate, - isLoading, + loading, tableContainerRef, totalRecords, onLeftArrowClick, @@ -73,9 +73,9 @@ export const TimeTableNavigator = ({ data-testid="timetable-records-refresh-btn" styleType="light" sizeType="small" - disabled={isLoading} + disabled={loading} onClick={handleRefresh} - $isLoading={isLoading} + $loading={loading} > @@ -89,7 +89,7 @@ export const TimeTableNavigator = ({ { ` - width: ${(props) => props.$width ?? ""}; - padding: ${(props) => props.$padding ?? ""}; -`; diff --git a/src/timetable/timetable.tsx b/src/timetable/timetable.tsx index 0dc4c0acc..bff3d15b7 100644 --- a/src/timetable/timetable.tsx +++ b/src/timetable/timetable.tsx @@ -2,7 +2,7 @@ import { isEmpty, throttle } from "lodash"; import { useEffect, useRef, useState } from "react"; import { useResizeDetector } from "react-resize-detector"; import { PopoverV2TriggerProps } from "../popover-v2"; -import { CalendarHelper } from "../util"; +import { TimeHelper } from "../util/time-helper"; import { ROW_BAR_COLOR_SEQUENCE, ROW_INTERVAL } from "./const"; import { TimeTableNavigator } from "./timetable-navigator/timetable-navigator"; import { RowBar } from "./timetable-row/row-bar"; @@ -32,7 +32,7 @@ export const TimeTable = ({ date, emptyContent, rowData, - isLoading, + loading, minTime = "00:00", maxTime = "23:00", minDate, @@ -48,9 +48,9 @@ export const TimeTable = ({ // CONST, STATE, REF // ============================================================================= const testId = otherProps["data-testid"] || "timetable-container-id"; - const timetableMinTime = CalendarHelper.roundToNearestHour(minTime); - const timetableMaxTime = CalendarHelper.roundToNearestHour(maxTime, true); - const hourlyIntervals = CalendarHelper.generateHourlyIntervals( + const timetableMinTime = TimeHelper.roundToNearestHour(minTime); + const timetableMaxTime = TimeHelper.roundToNearestHour(maxTime, true); + const hourlyIntervals = TimeHelper.generateHourlyIntervals( timetableMinTime, timetableMaxTime ); @@ -80,7 +80,7 @@ export const TimeTable = ({ const isEndReached = Math.ceil(scrollTop + clientHeight) >= scrollHeight; const shouldLoadMore = - isEndReached && !allRecordsLoaded && onPage && !isLoading; + isEndReached && !allRecordsLoaded && onPage && !loading; if (shouldLoadMore) { setLoadMore(true); @@ -99,7 +99,7 @@ export const TimeTable = ({ tableContainer.removeEventListener("scroll", handleScroll); } }; - }, [allRecordsLoaded, loadMore, isLoading, onPage]); + }, [allRecordsLoaded, loadMore, loading, onPage]); useEffect(() => { setLoadMore(false); @@ -243,7 +243,7 @@ export const TimeTable = ({ }; const renderRowHeaderColumnLazyLoad = () => { - if (isLoading || !loadMore) return; + if (loading || !loadMore) return; return ( @@ -268,7 +268,7 @@ export const TimeTable = ({ }; const renderRowBarData = () => { - if (isLoading) return ; + if (loading) return ; return ( { - if (isLoading || !loadMore) return; + if (loading || !loadMore) return; return ( {hourlyIntervals.map((_, index) => ( @@ -315,7 +315,7 @@ export const TimeTable = ({ - {!isLoading ? ( + {!loading ? ( React.ReactNode); - width?: string | undefined; - padding?: string | undefined; delay?: | { open?: number | undefined; close?: number | undefined } | undefined; @@ -42,7 +40,7 @@ export interface TimeTableProps { date: string; emptyContent?: EmptyContentProps | undefined; rowData: TimeTableRowData[]; - isLoading?: boolean | undefined; + loading?: boolean | undefined; // HH:mm format minTime?: string | undefined; // HH:mm format diff --git a/stories/timetable/props-table.tsx b/stories/timetable/props-table.tsx index 9a49a9812..52987b00a 100644 --- a/stories/timetable/props-table.tsx +++ b/stories/timetable/props-table.tsx @@ -1,19 +1,39 @@ import { ApiTable } from "../storybook-common/api-table"; import { ApiTableSectionProps } from "../storybook-common/api-table/types"; +const TIME_FORMAT = ( + <> + string-based HH:mm format + +); +const DATE_FORMAT = ( + <> + string-based YYYY-MM-DD format + +); const DATA: ApiTableSectionProps[] = [ { name: "TimeTableProps", attributes: [ + { + name: "id", + description: "The identifier of the component", + propTypes: ["string"], + }, + { + name: "className", + description: "The class selector of the component", + propTypes: ["string"], + }, + { + name: "data-testid", + description: "The test identifier of the component", + propTypes: ["string"], + }, { name: "date", mandatory: true, - description: ( - <> - The date string to display, any format that is - acceptable by Dayjswill work. - - ), + description: <>The current displayed date in {DATE_FORMAT}, propTypes: ["string"], }, { @@ -36,7 +56,7 @@ const DATA: ApiTableSectionProps[] = [ propTypes: ["TimeTableRowData[]"], }, { - name: "isLoading", + name: "loading", mandatory: true, description: "The loading toggle to render the loading animation.", @@ -44,23 +64,41 @@ const DATA: ApiTableSectionProps[] = [ }, { name: "minTime", - description: - "The start time of this time table in HH:mm format.", + description: ( + <> + The start time of this time table in {TIME_FORMAT}{" "} + format. + + ), propTypes: ["string"], }, { name: "maxTime", - description: "The end time of this time table in HH:mm format.", + description: ( + <> + The end time of this time table in {TIME_FORMAT} format. + + ), propTypes: ["string"], }, { name: "minDate", - description: "The minimum date allowed for date navigation.", + description: ( + <> + The minimum date allowed for navigation in {DATE_FORMAT}{" "} + (inclusive) + + ), propTypes: ["string"], }, { name: "maxDate", - description: "The maximum date allowed for date navigation,", + description: ( + <> + The maximum date allowed for navigation in {DATE_FORMAT}{" "} + (inclusive) + + ), propTypes: ["string"], }, { @@ -75,26 +113,6 @@ const DATA: ApiTableSectionProps[] = [ ), propTypes: ["number"], }, - { - name: "width", - description: "The width of this time table component.", - propTypes: ["string"], - }, - { - name: "height", - description: "The height of this time table component.", - propTypes: ["string"], - }, - { - name: "outOfRangeCellPopover", - description: ( - <> - The props for rendering any custom popover for the - automatically filled blockedcells. - - ), - propTypes: ["TimeTablePopoverProps"], - }, { name: "onRefresh", description: ( @@ -114,7 +132,7 @@ const DATA: ApiTableSectionProps[] = [ propTypes: ["() => void"], }, { - name: "onLeftArrowClick", + name: "onPreviousDayClick", description: ( <> The callback function to trigger when the left arrow has @@ -127,7 +145,7 @@ const DATA: ApiTableSectionProps[] = [ propTypes: ["(currentDate: string) => void"], }, { - name: "onRightArrowClick", + name: "onNextDayClick", description: ( <> The callback function to trigger when the right arrow @@ -206,11 +224,21 @@ const DATA: ApiTableSectionProps[] = [ "The props for rendering any custom popover for this row header", propTypes: ["TimeTablePopoverProps"], }, + { + name: "outOfRangeCellPopover", + description: ( + <> + The props for rendering any custom popover for the + automatically filled blockedcells. + + ), + propTypes: ["TimeTablePopoverProps"], + }, { name: "rowMinTime", description: ( <> - The starting time for this row in HH:mm format.
+ The starting time for this row in {TIME_FORMAT}.
Defaults to minTimefrom TimeTableProps.
This component will automatically fill @@ -224,7 +252,7 @@ const DATA: ApiTableSectionProps[] = [ name: "rowMaxTime", description: ( <> - The ending time for this row in HH:mm format.
+ The ending time in for this row in {TIME_FORMAT}.
Defaults to maxTimefrom TimeTableProps.
This component will automatically fill @@ -263,13 +291,17 @@ const DATA: ApiTableSectionProps[] = [ { name: "startTime", mandatory: true, - description: "The starting time of this cell. In HH:mm format.", + description: ( + <>The starting time of this cell. In {TIME_FORMAT}. + ), propTypes: ["string"], }, { name: "endTime", mandatory: true, - description: "The ending time of this cell. In HH:mm format.", + description: ( + <>The ending time of this cell. In {TIME_FORMAT}. + ), propTypes: ["string"], }, { @@ -328,19 +360,7 @@ const DATA: ApiTableSectionProps[] = [ name: "content", mandatory: true, description: "The content to be rendered within the popover.", - propTypes: ["string", "JSX.Element"], - }, - { - name: "width", - description: - "The custom width for this popover, can be in any units (px/rem..)", - propTypes: ["string"], - }, - { - name: "padding", - description: - "The custom padding for this popover, can be in any units (px/rem..)", - propTypes: ["string"], + propTypes: ["string", "JSX.Element", "(() => React.ReactNode"], }, { name: "delay", diff --git a/stories/timetable/timetable.stories.tsx b/stories/timetable/timetable.stories.tsx index ab81ab168..8f4c52f45 100644 --- a/stories/timetable/timetable.stories.tsx +++ b/stories/timetable/timetable.stories.tsx @@ -51,7 +51,7 @@ export const TimeTableWithNavigation: StoryObj = { const [results, setResults] = useState(getTimeTableData().rowData); const [date, setDate] = useState(timeTableData.date); - const [loading, setLoading] = useState(timeTableData.isLoading); + const [loading, setLoading] = useState(timeTableData.loading); const onPreviousDayClick = (currentDate: string) => { const newDate = dayjs(currentDate) @@ -88,7 +88,7 @@ export const TimeTableWithNavigation: StoryObj = { .add(2, "days") .format("YYYY-MM-DD")} rowData={results} - isLoading={loading} + loading={loading} onNextDayClick={onNextDayClick} onPreviousDayClick={onPreviousDayClick} /> @@ -154,7 +154,7 @@ export const TimeTableWithLazyLoad: StoryObj = { minDate={dayjs(date).subtract(2, "days").format("YYYY-MM-DD")} maxDate={dayjs(date).add(2, "days").format("YYYY-MM-DD")} rowData={results} - isLoading={loading} + loading={loading} onRefresh={onRefresh} onPage={() => setPage(page + 1)} totalRecords={50} diff --git a/tests/timetable/timetable.spec.tsx b/tests/timetable/timetable.spec.tsx index f2db758aa..d86bdbde8 100644 --- a/tests/timetable/timetable.spec.tsx +++ b/tests/timetable/timetable.spec.tsx @@ -48,7 +48,7 @@ describe("TimeTable", () => { minDate={timeTableMockData.minTime} maxDate={timeTableMockData.maxDate} rowData={[]} - isLoading={false} + loading={false} emptyContent={timeTableMockData.emptyContent} /> ); @@ -65,7 +65,7 @@ describe("TimeTable", () => { minDate={timeTableMockData.minTime} maxDate={timeTableMockData.maxDate} rowData={[]} - isLoading={false} + loading={false} emptyContent={timeTableMockData.emptyContent} onNextDayClick={onRightArrowClick} onPreviousDayClick={onLeftArrowClick} @@ -100,7 +100,7 @@ describe("TimeTable", () => { ], }, ]} - isLoading={false} + loading={false} emptyContent={timeTableMockData.emptyContent} /> ); @@ -165,7 +165,7 @@ describe("TimeTable", () => { }, }, ]} - isLoading={false} + loading={false} emptyContent={timeTableMockData.emptyContent} /> ); @@ -215,7 +215,7 @@ describe("TimeTable", () => { ], }, ]} - isLoading={false} + loading={false} emptyContent={timeTableMockData.emptyContent} /> ); @@ -230,7 +230,7 @@ describe("TimeTable", () => { ); @@ -247,7 +247,7 @@ describe("TimeTable", () => { maxDate={timeTableMockData.maxDate} rowData={lazyLoad(1)} totalRecords={20} - isLoading={false} + loading={false} emptyContent={timeTableMockData.emptyContent} onPage={() => lazyLoad(2)} /> From e24fe7b4b2e5608b4e6a51712b66386416a6572f Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Tue, 8 Oct 2024 15:13:24 +0800 Subject: [PATCH 14/17] [BOOKINGSG-6090][JZ] Update default row cells to have hover background color if they are clickable --- src/timetable/timetable-row/row-cell.style.tsx | 3 +++ src/timetable/timetable-row/row-cell.tsx | 7 ++----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/timetable/timetable-row/row-cell.style.tsx b/src/timetable/timetable-row/row-cell.style.tsx index 733fcce0b..c6b77125f 100644 --- a/src/timetable/timetable-row/row-cell.style.tsx +++ b/src/timetable/timetable-row/row-cell.style.tsx @@ -75,6 +75,9 @@ export const Block = styled.div` default: return css` &:hover { + background-color: ${$isClickable + ? Color.Accent.Light[5] + : ""}; cursor: ${$isClickable ? "pointer" : "default"}; } `; diff --git a/src/timetable/timetable-row/row-cell.tsx b/src/timetable/timetable-row/row-cell.tsx index aa7253cdc..988e6843f 100644 --- a/src/timetable/timetable-row/row-cell.tsx +++ b/src/timetable/timetable-row/row-cell.tsx @@ -36,13 +36,10 @@ const Component = ({ // CONST, STATE, REF // ============================================================================= const isOnTheHour = dayjs(endTime, "HH:mm").get("minutes") === 0; - const isNotAvailable = status !== "default" || !status; const numberOfIntervals = DateHelper.getTimeDiffInMinutes(startTime, endTime) / ROW_INTERVAL; const totalCellWidth = numberOfIntervals * intervalWidth; - const adjustedCellWidth = isNotAvailable - ? totalCellWidth - ROW_CELL_GAP - : totalCellWidth; + const adjustedCellWidth = totalCellWidth - ROW_CELL_GAP; const isClickable = !!onClick || (customPopover && customPopover.trigger === "click"); @@ -126,7 +123,7 @@ const Component = ({ )} - {isNotAvailable && } + {} From 249f559058c22e0b43da504e854c3965534eebe9 Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Tue, 8 Oct 2024 16:21:58 +0800 Subject: [PATCH 15/17] [BOOKINGSG-6090][JZ] Move fixed values to const.ts and apply more PR comments --- src/timetable/const.ts | 6 +- .../timetable-navigator.style.tsx | 3 +- src/timetable/timetable-row/row-bar.tsx | 122 ++++++++++-------- .../timetable-row/row-cell.style.tsx | 5 +- src/timetable/timetable.style.tsx | 23 ++-- src/timetable/timetable.tsx | 23 +++- 6 files changed, 110 insertions(+), 72 deletions(-) diff --git a/src/timetable/const.ts b/src/timetable/const.ts index 872a49406..a3744977f 100644 --- a/src/timetable/const.ts +++ b/src/timetable/const.ts @@ -5,6 +5,10 @@ export const ROW_BAR_COLOR_SEQUENCE = [ "#FAE4E5", "#D3EEFC", ] as const; // Assert to be a readonly tuple +export type RowBarColors = (typeof ROW_BAR_COLOR_SEQUENCE)[number]; export const ROW_CELL_GAP = 2; export const ROW_INTERVAL = 15; -export type RowBarColors = (typeof ROW_BAR_COLOR_SEQUENCE)[number]; +export const MIN_INTERVAL_WIDTH = 21; +export const ROW_HEADER_WIDTH = 252; +export const ROW_HEIGHT = 68; +export const MIN_HOURLY_INTERVAL_WIDTH = 84; diff --git a/src/timetable/timetable-navigator/timetable-navigator.style.tsx b/src/timetable/timetable-navigator/timetable-navigator.style.tsx index e376816b3..6446f6df9 100644 --- a/src/timetable/timetable-navigator/timetable-navigator.style.tsx +++ b/src/timetable/timetable-navigator/timetable-navigator.style.tsx @@ -2,6 +2,7 @@ import styled, { css, keyframes } from "styled-components"; import { Color } from "../../color"; import { IconButton } from "../../icon-button"; import { Text } from "../../text"; +import { ROW_HEADER_WIDTH } from "../const"; const spin = keyframes` 100% { @@ -24,7 +25,7 @@ export const StyledRefreshButton = styled(IconButton)<{ $loading: boolean }>` `; export const NavigationHeaderWrapper = styled.div` - width: 252px; + width: ${ROW_HEADER_WIDTH}px; padding-bottom: 1rem; `; diff --git a/src/timetable/timetable-row/row-bar.tsx b/src/timetable/timetable-row/row-bar.tsx index 3f47a7f17..95cc13fb0 100644 --- a/src/timetable/timetable-row/row-bar.tsx +++ b/src/timetable/timetable-row/row-bar.tsx @@ -1,5 +1,5 @@ import dayjs from "dayjs"; -import { MutableRefObject } from "react"; +import { MutableRefObject, useMemo } from "react"; import { RowBarColors } from "../const"; import { TimeTableRowCellData, TimeTableRowData } from "../types"; import { RowCellContainer } from "./row-bar.style"; @@ -29,13 +29,11 @@ export const RowBar = ({ // ============================================================================= // CONST, STATE, REF // ============================================================================= - const testId = otherProps["data-testid"] || `${id}-row`; - const rowCellArray: TimeTableRowCellData[] = []; + const testId = otherProps["data-testid"] || "timetable-row"; // =========================================================================== // HELPER FUNCTIONS // =========================================================================== - const isOnTheSameHour = ( time1: dayjs.Dayjs, time2: dayjs.Dayjs @@ -43,60 +41,80 @@ export const RowBar = ({ return time1.get("hour") == time2.get("hour"); }; - // Handle non-op before hours - if (dayjs(timetableMinTime, "HH:mm").isBefore(dayjs(rowMinTime, "HH:mm"))) { - rowCellArray.push({ - id, - startTime: timetableMinTime, - endTime: rowMinTime, - status: "blocked", - customPopover: outOfRangeCellPopover, - }); - } + const rowCellArray = useMemo(() => { + const rowCellArray: TimeTableRowCellData[] = []; + + // Handle non-op before hours + if ( + dayjs(timetableMinTime, "HH:mm").isBefore( + dayjs(rowMinTime, "HH:mm") + ) + ) { + rowCellArray.push({ + id, + startTime: timetableMinTime, + endTime: rowMinTime, + status: "blocked", + customPopover: outOfRangeCellPopover, + }); + } - rowCells.forEach((cell, index) => { - const { endTime } = cell; - rowCellArray.push(cell); + rowCells.forEach((cell, index) => { + const { endTime } = cell; + rowCellArray.push(cell); - const nextSlotStartTime = dayjs( - rowCells[index + 1]?.startTime || rowMaxTime, // Get next cell start time, if next cell don't exist, use current row max time - "HH:mm" - ); - const parsedEndTime = dayjs(endTime, "HH:mm"); + const nextSlotStartTime = dayjs( + rowCells[index + 1]?.startTime || rowMaxTime, // Get next cell start time, if next cell don't exist, use current row max time + "HH:mm" + ); + const parsedEndTime = dayjs(endTime, "HH:mm"); - let curr = parsedEndTime; - while (curr.isBefore(nextSlotStartTime)) { - if (!isOnTheSameHour(curr, nextSlotStartTime)) { - const nextHour = curr.add(1, "hour").startOf("hour"); // Round to the next hour - rowCellArray.push({ - id, - startTime: curr.format("HH:mm").toString(), - endTime: nextHour.format("HH:mm").toString(), - status: "disabled", - }); - curr = nextHour; - } else { - rowCellArray.push({ - id, - startTime: curr.format("HH:mm").toString(), - endTime: nextSlotStartTime.format("HH:mm").toString(), - status: "disabled", - }); - curr = nextSlotStartTime; + let curr = parsedEndTime; + while (curr.isBefore(nextSlotStartTime)) { + if (!isOnTheSameHour(curr, nextSlotStartTime)) { + const nextHour = curr.add(1, "hour").startOf("hour"); // Round to the next hour + rowCellArray.push({ + id, + startTime: curr.format("HH:mm").toString(), + endTime: nextHour.format("HH:mm").toString(), + status: "disabled", + }); + curr = nextHour; + } else { + rowCellArray.push({ + id, + startTime: curr.format("HH:mm").toString(), + endTime: nextSlotStartTime.format("HH:mm").toString(), + status: "disabled", + }); + curr = nextSlotStartTime; + } } + }); + + // Handle non-op after hours + if ( + dayjs(timetableMaxTime, "HH:mm").isAfter(dayjs(rowMaxTime, "HH:mm")) + ) { + rowCellArray.push({ + id, + startTime: rowMaxTime, + endTime: timetableMaxTime, + status: "blocked", + customPopover: outOfRangeCellPopover, + }); } - }); - // Handle non-op after hours - if (dayjs(timetableMaxTime, "HH:mm").isAfter(dayjs(rowMaxTime, "HH:mm"))) { - rowCellArray.push({ - id, - startTime: rowMaxTime, - endTime: timetableMaxTime, - status: "blocked", - customPopover: outOfRangeCellPopover, - }); - } + return rowCellArray; + }, [ + id, + timetableMinTime, + timetableMaxTime, + rowMinTime, + rowMaxTime, + rowCells, + outOfRangeCellPopover, + ]); return ( diff --git a/src/timetable/timetable-row/row-cell.style.tsx b/src/timetable/timetable-row/row-cell.style.tsx index c6b77125f..3a2cb2c3a 100644 --- a/src/timetable/timetable-row/row-cell.style.tsx +++ b/src/timetable/timetable-row/row-cell.style.tsx @@ -1,7 +1,5 @@ import styled, { css } from "styled-components"; import { Color } from "../../color"; -import { PopoverTrigger } from "../../popover-v2"; -import { PopoverCard } from "../../popover-v2/popover.styles"; import { Text } from "../../text"; import { TimeTableCellType } from "../types"; @@ -41,7 +39,6 @@ export const Gap = styled.div` export const Block = styled.div` height: 100%; width: ${({ $width }) => `${$width}px`}; - font-size: 11px; border-radius: 4px; box-sizing: border-box; padding: 4px; @@ -92,7 +89,7 @@ export const BlockTitle = styled(Text.H6)` `; export const BlockDescription = styled(Text.XSmall)` - color: #686868; + color: ${Color.Neutral[3]}; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; diff --git a/src/timetable/timetable.style.tsx b/src/timetable/timetable.style.tsx index 4dc75d64c..fbf0a6e75 100644 --- a/src/timetable/timetable.style.tsx +++ b/src/timetable/timetable.style.tsx @@ -4,6 +4,11 @@ import { Color } from "../color"; import { ErrorDisplay } from "../error-display"; import { PopoverTrigger } from "../popover-v2"; import { Text } from "../text"; +import { + MIN_HOURLY_INTERVAL_WIDTH, + ROW_HEADER_WIDTH, + ROW_HEIGHT, +} from "./const"; interface ColumnHeaderRowProps { $numOfColumns: number; @@ -45,7 +50,7 @@ export const EmptyTableContainer = styled.div` display: grid; overflow: scroll; position: relative; - grid-template-columns: 252px auto; + grid-template-columns: ${ROW_HEADER_WIDTH}px auto; `; export const EmptyTableRowHeader = styled.div` @@ -63,7 +68,7 @@ export const TimeTableContainer = styled.div` display: grid; overflow: scroll; position: relative; - grid-template-columns: 252px fit-content(100%); + grid-template-columns: ${ROW_HEADER_WIDTH}px fit-content(100%); padding-bottom: ${(props) => (props.$allRecordsLoaded ? "0" : "128px")}; ${(props) => { if (props.$loading) { @@ -82,7 +87,7 @@ export const RowColumnHeader = styled.div` top: 0; left: 0; background-color: white; - width: 252px; + width: ${ROW_HEADER_WIDTH}px; z-index: 2; border-bottom: 1px solid ${Color.Neutral[5]}; ${(props) => { @@ -110,11 +115,11 @@ export const RowColumnHeader = styled.div` export const RowHeaderColumn = styled.div` display: grid; position: sticky; - grid-column: 1 / 1; + grid-column: 1 / 2; left: 0; z-index: 1; background-color: white; - grid-template-rows: repeat(${(props) => props.$numOfRows}, 68px); + grid-template-rows: repeat(${(props) => props.$numOfRows}, ${ROW_HEIGHT}px); `; export const ColumnHeaderRow = styled.div` @@ -139,7 +144,7 @@ export const ColumnHeaderRow = styled.div` `; export const ColumnHeader = styled.div` - min-width: 84px; + min-width: ${MIN_HOURLY_INTERVAL_WIDTH}px; align-content: end; margin-bottom: 0.25rem; `; @@ -150,7 +155,7 @@ export const ColumnHeaderTitle = styled(Text.H6)` export const ContentContainer = styled.div` display: grid; - grid-template-rows: repeat(${(props) => props.$numOfRows}, 68px); + grid-template-rows: repeat(${(props) => props.$numOfRows}, ${ROW_HEIGHT}px); `; export const RowHeader = styled.div` @@ -161,8 +166,8 @@ export const RowHeader = styled.div` position: sticky; left: 0; background-color: white; - width: 252px; - height: 68px; + width: ${ROW_HEADER_WIDTH}px; + height: ${ROW_HEIGHT}px; text-align: right; padding: 0 1rem 0 2rem; border-bottom: 1px solid ${Color.Neutral[5]}; diff --git a/src/timetable/timetable.tsx b/src/timetable/timetable.tsx index bff3d15b7..2c255d30c 100644 --- a/src/timetable/timetable.tsx +++ b/src/timetable/timetable.tsx @@ -3,7 +3,12 @@ import { useEffect, useRef, useState } from "react"; import { useResizeDetector } from "react-resize-detector"; import { PopoverV2TriggerProps } from "../popover-v2"; import { TimeHelper } from "../util/time-helper"; -import { ROW_BAR_COLOR_SEQUENCE, ROW_INTERVAL } from "./const"; +import { + MIN_INTERVAL_WIDTH, + ROW_BAR_COLOR_SEQUENCE, + ROW_HEADER_WIDTH, + ROW_INTERVAL, +} from "./const"; import { TimeTableNavigator } from "./timetable-navigator/timetable-navigator"; import { RowBar } from "./timetable-row/row-bar"; import { @@ -108,17 +113,25 @@ export const TimeTable = ({ // ============================================================================= // EVENT HANDLERS // ============================================================================= + /** + * Handles when the TimeTable component is resized. + * + * @remarks + * When the component is resized, we recalculate the width of each interval + * in the Timetable. We do this by dividing the width of the container by + * the number of intervals per row bar. We also make sure that the width + * of each interval is at least 21px, otherwise it becomes too small. + */ const handleResize = () => { if (tableContainerRef.current) { const numberOfIntervalsPerRowBar = Math.ceil( (hourlyIntervals.length * 60) / ROW_INTERVAL ); const tableContainerWidth = - tableContainerRef.current.clientWidth - 252; + tableContainerRef.current.clientWidth - ROW_HEADER_WIDTH; + const calcWidth = tableContainerWidth / numberOfIntervalsPerRowBar; const width = - tableContainerWidth / numberOfIntervalsPerRowBar > 21 - ? tableContainerWidth / numberOfIntervalsPerRowBar - : 21; + calcWidth > MIN_INTERVAL_WIDTH ? calcWidth : MIN_INTERVAL_WIDTH; setIntervalWidth(width); } }; From b9afffb5263e5803ffacfeaab031e11ea2a8f63a Mon Sep 17 00:00:00 2001 From: Tan Jing Zhi Date: Tue, 8 Oct 2024 16:40:21 +0800 Subject: [PATCH 16/17] [BOOKINGSG-6090][JZ] Update remaining grid-row and grid-column --- src/timetable/timetable.style.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/timetable/timetable.style.tsx b/src/timetable/timetable.style.tsx index fbf0a6e75..6839e1740 100644 --- a/src/timetable/timetable.style.tsx +++ b/src/timetable/timetable.style.tsx @@ -125,8 +125,8 @@ export const RowHeaderColumn = styled.div` export const ColumnHeaderRow = styled.div` display: grid; position: sticky; - grid-column: 2 / 2; - grid-row: 1 / 1; + grid-column: 2 / 3; + grid-row: 1 / 2; top: 0; z-index: 1; background-color: white; From e794442404c35961888a2ac8a264d77e5c76e7cd Mon Sep 17 00:00:00 2001 From: qroll Date: Wed, 9 Oct 2024 08:34:18 +0800 Subject: [PATCH 17/17] [BOOKINGSG-6090][RL] Update docs --- stories/timetable/props-table.tsx | 3 -- stories/timetable/timetable.mdx | 42 ++++++++++++++----------- stories/timetable/timetable.stories.tsx | 8 ++--- 3 files changed, 28 insertions(+), 25 deletions(-) diff --git a/stories/timetable/props-table.tsx b/stories/timetable/props-table.tsx index 52987b00a..732b8050d 100644 --- a/stories/timetable/props-table.tsx +++ b/stories/timetable/props-table.tsx @@ -38,7 +38,6 @@ const DATA: ApiTableSectionProps[] = [ }, { name: "emptyContent", - mandatory: true, description: ( <> The props to determine what this component should render @@ -189,7 +188,6 @@ const DATA: ApiTableSectionProps[] = [ attributes: [ { name: "id", - mandatory: true, description: ( <> The identifier for this row. This can be useful if you @@ -277,7 +275,6 @@ const DATA: ApiTableSectionProps[] = [ attributes: [ { name: "id", - mandatory: true, description: ( <> The identifier for this cell. This can be useful if you diff --git a/stories/timetable/timetable.mdx b/stories/timetable/timetable.mdx index d6af2d4ab..b1733fc71 100644 --- a/stories/timetable/timetable.mdx +++ b/stories/timetable/timetable.mdx @@ -15,45 +15,51 @@ A component that displays a timetable to view a schedule for a specific day import { TimeTable } from "@lifesg/react-design-system/timetable"; ``` -> This component auto generates blocked cells based on the difference in start/end time between each row and the overall timetable, and disabled cells when there are missing gaps between each row cell's start/end time. +> This component auto generates blocked cells based on the difference in +> start/end time between each row and the overall timetable, and disabled cells +> when there are missing gaps between each row cell's start/end time. -TimeTable with navigation arrows -Date navigational arrows can be interacted with when `onNextDayClick` and `onPreviousDayClick` -props are passed in. +Date navigation Date navigational arrows can be interacted +with when `onNextDayClick` and `onPreviousDayClick` props are passed in. You may use `minDate` and `maxDate` to limit the range of date navigation -_(In this example, -the user can only view the timetable 2 days before today and 2 days after today)_ +_(In this example, the user can only view the timetable 2 days before today and +2 days after today)_ - + -Lazy Load +Lazy loading -Optional `onRefresh` and `totalRecords` props can also be passed in to show the total count and for refreshing results. +Optional `onRefresh` and `totalRecords` props can also be passed in to show the +total count and for refreshing results. -This is especially useful when lazy loading is enabled through the `onPage` callback. +This is especially useful when lazy loading is enabled through the `onPage` +callback. - + -With popover interactions +Custom popovers -Custom popovers can be added onto row header names and row cells. -There is also the flexibility to have custom popovers on auto generated blocked cells through the `outOfRangeCellPopover` prop. +Custom popovers can be added onto row header names and row cells. There is also +the flexibility to have custom popovers on auto generated blocked cells through +the `outOfRangeCellPopover` prop. However, auto generated disabled cells will not have any popover interaction. -Do note that if the custom popover trigger is set to click, it could conflict with the onClick callback for each cell. +Do note that if the custom popover trigger is set to click, it could conflict +with the onClick callback for each cell. - + No results found -`emptyContent` can be passed in to control what to show when there are no results to display. +`emptyContent` can be passed in to control what to show when there are no +results to display. - + Component API diff --git a/stories/timetable/timetable.stories.tsx b/stories/timetable/timetable.stories.tsx index 8f4c52f45..256a2c2dc 100644 --- a/stories/timetable/timetable.stories.tsx +++ b/stories/timetable/timetable.stories.tsx @@ -45,7 +45,7 @@ export const Default: StoryObj = { }, }; -export const TimeTableWithNavigation: StoryObj = { +export const DateNavigation: StoryObj = { render: () => { const timeTableData = getTimeTableData(); @@ -96,7 +96,7 @@ export const TimeTableWithNavigation: StoryObj = { }, }; -export const TimeTableWithLazyLoad: StoryObj = { +export const LazyLoading: StoryObj = { render: () => { const [results, setResults] = useState([]); const [date, setDate] = useState(dayjs().format("YYYY-MM-DD")); @@ -165,7 +165,7 @@ export const TimeTableWithLazyLoad: StoryObj = { }, }; -export const TimeTableWithStyledPopovers: StoryObj = { +export const CustomPopovers: StoryObj = { render: () => { const StyledCustomPopoverCard = styled(Card)` display: flex; @@ -286,7 +286,7 @@ export const TimeTableWithStyledPopovers: StoryObj = { }, }; -export const TimeTableWithEmptyContent: StoryObj = { +export const EmptyContent: StoryObj = { render: () => { return (