diff --git a/src/components/DetailDialog/ScheduleTable.jsx b/src/components/DetailDialog/ScheduleTable.jsx index aba368b..94b387f 100644 --- a/src/components/DetailDialog/ScheduleTable.jsx +++ b/src/components/DetailDialog/ScheduleTable.jsx @@ -1,30 +1,102 @@ import React from "react" +import styled from "styled-components" import { Crosshead, CrossheadSub, Columns, Table } from "./DetailDialog.styles" import { twelveHourTime } from "../../lib/utils" +export const EventList = styled.div` + margin-bottom: 30px; + &:last-of-type { + margin-bottom: 0px; + } + div { + margin-bottom: 20px; + &:last-of-type { + margin-bottom: 0px; + } + } + /* @supports (display: grid) { + @media screen and (min-width: ${props => props.theme.styles.breakpointM}) { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 35px; + row-gap: 25px; + div { + margin-bottom: 0px; + } + } + } */ +` + +export const List = styled.ul` + padding-left: 30px; +` + +export const ListItem = styled.li` + position: relative; + line-height: 1.5; + padding-left: 15px; + margin-bottom: 10px; + &:last-of-type { + margin-bottom: 0px; + } +` + const ScheduleTable = ({ title, subtitle, regular_schedules }) => { + const { event_times, opening_times } = regular_schedules.reduce( + (acc, sched) => { + if (sched.dtstart) { + acc.event_times.push(sched) + } else { + acc.opening_times.push(sched) + } + return acc + }, + { event_times: [], opening_times: [] } + ) + + const OpeningTimes = () => ( + + + {opening_times.map((sched, i) => ( + + + + + ))} + +
+ {sched.weekday}s + + {twelveHourTime(sched.opens_at)} to{" "} + {twelveHourTime(sched.closes_at)} +
+ ) + + const EventTimes = () => ( + + {event_times.map((sched, i) => ( + {sched.description} + ))} + + ) + return ( - regular_schedules.length > 0 && ( - - {title && {title}} - {subtitle && {subtitle}} - - - {regular_schedules.map((sched, i) => ( - - - - - ))} - -
- {sched.weekday}s - - {twelveHourTime(sched.opens_at)} to{" "} - {twelveHourTime(sched.closes_at)} -
-
- ) + <> + {opening_times.length > 0 && ( + + {title && {title}} + {subtitle && {subtitle}} + + + )} + {event_times.length > 0 && ( + + {title && {title}} + {subtitle && {subtitle}} + + + )} + ) } diff --git a/src/components/DetailDialog/index.jsx b/src/components/DetailDialog/index.jsx index 2054cd1..deed225 100644 --- a/src/components/DetailDialog/index.jsx +++ b/src/components/DetailDialog/index.jsx @@ -149,6 +149,43 @@ const DetailDialog = ({ serviceId, location, navigate }) => { if (service.name) { let goodToKnow = buildGoodToKnow(service) let categories = service.taxonomies + + const all_location_regular_schedules = service.regular_schedules.filter( + v => v.service_at_location === null + ) + + const { + all_location_event_times, + all_location_opening_times, + } = all_location_regular_schedules.reduce( + (acc, sched) => { + if (sched.dtstart) { + acc.all_location_event_times.push(sched) + } else { + acc.all_location_opening_times.push(sched) + } + return acc + }, + { all_location_event_times: [], all_location_opening_times: [] } + ) + + const location_regular_schedules = service.service_at_locations.reduce( + (acc, schedule) => { + if (schedule.regular_schedule && schedule.regular_schedule.length > 0) { + const locationId = schedule.location_id + if (!acc[locationId]) { + acc[locationId] = { + location: schedule.location, + regular_schedules: [], + } + } + acc[locationId].regular_schedules.push(...schedule.regular_schedule) + } + return acc + }, + {} + ) + return ( @@ -321,32 +358,58 @@ const DetailDialog = ({ serviceId, location, navigate }) => { )} + {/* 4 options + + just opening hours + just event times + + event times and opening hours - {service.regular_schedules.length > 0 && ( + all at location */} + {/* opening times for all locations and locations */} + {all_location_opening_times.length > 0 && ( v.service_at_location === null - )} + regular_schedules={all_location_opening_times} /> )} - - {service.service_at_locations.length > 1 && ( - <> - {service.service_at_locations.map((service_at_location, i) => ( - - ))} - + {Object.entries(location_regular_schedules).map( + ([location_id, location]) => ( + v.dtstart === null + )} + /> + ) + )} + {/* event times for all locations and locations */} + {all_location_event_times.length > 0 && ( + + )}{" "} + {Object.entries(location_regular_schedules).map( + ([location_id, location]) => ( + v.dtstart !== null + )} + /> + ) )} - {service.cost_options.length > 0 && ( Fees