diff --git a/packages/qpa-components/Icons.tsx b/packages/qpa-components/Icons.tsx index 8dac5b0..9f70417 100644 --- a/packages/qpa-components/Icons.tsx +++ b/packages/qpa-components/Icons.tsx @@ -5,6 +5,10 @@ import PlayIcon from "@material-ui/icons/PlayCircleOutline" import StopIcon from '@material-ui/icons/Stop'; import DeleteForeverIcon from '@material-ui/icons/DeleteForever'; import ReplayIcon from '@material-ui/icons/Replay'; +import LocationPinIcon from '@material-ui/icons/Room'; +import HourIcon from '@material-ui/icons/AccessTime'; -export { TagIcon, CheckIcon, CrossNoIcon, PlayIcon, StopIcon, DeleteForeverIcon, ReplayIcon } + + +export { TagIcon, CheckIcon, CrossNoIcon, PlayIcon, StopIcon, DeleteForeverIcon, ReplayIcon, LocationPinIcon, HourIcon } diff --git a/packages/qpa/App/App.msg.json b/packages/qpa/App/App.msg.json index 80acaff..c3dcc64 100644 --- a/packages/qpa/App/App.msg.json +++ b/packages/qpa/App/App.msg.json @@ -7,7 +7,14 @@ "th": "Th", "fr": "Fr", "sa": "Sa", - "su": "Su" + "su": "Su", + "monday": "Monday", + "tuesday": "Tuesday", + "wednesday": "Wednesday", + "thursday": "Thursday", + "friday": "Friday", + "saturday": "Saturday", + "sunday": "Sunday" }, "es": { "APP_TITLE": "Events in the Alpujarra", @@ -17,6 +24,13 @@ "th": "Ju", "fr": "Vi", "sa": "Sa", - "su": "Do" + "su": "Do", + "monday": "Lunes", + "tuesday": "Martes", + "wednesday": "Miercoles", + "thursday": "Jueves", + "friday": "Viernes", + "saturday": "Sabado", + "sunday": "Domingo" } } diff --git a/packages/qpa/App/Event/EventDetails.msg.json b/packages/qpa/App/Event/EventDetails.msg.json index 1129c32..c889be5 100644 --- a/packages/qpa/App/Event/EventDetails.msg.json +++ b/packages/qpa/App/Event/EventDetails.msg.json @@ -2,11 +2,13 @@ "en-GB": { "upload-cover-image": "Upload cover image", "upload-poster-image": "Upload poster image", - "event-awaiting-mandatory-revision": "This event is pending revision. Our team will soon revise this event and set it online!" + "event-awaiting-mandatory-revision": "This event is pending revision. Our team will soon revise this event and set it online!", + "at-time": "at" }, "es-ES": { "upload-cover-image": "Subir imagen de fondo", "upload-poster-image": "Subir imagen de cartel", - "event-awaiting-mandatory-revision": "Este evento está pendiente de una revisión. ¡Nuestro equipo revisará este evento pronto y lo publicarémos!" + "event-awaiting-mandatory-revision": "Este evento está pendiente de una revisión. ¡Nuestro equipo revisará este evento pronto y lo publicarémos!", + "at-time": "a las" } } diff --git a/packages/qpa/App/Event/EventDetails.tsx b/packages/qpa/App/Event/EventDetails.tsx index 5b1a5a2..c4d7134 100644 --- a/packages/qpa/App/Event/EventDetails.tsx +++ b/packages/qpa/App/Event/EventDetails.tsx @@ -1,5 +1,5 @@ import { format } from "date-fns" -import { Button } from "qpa-components" +import { Button, LocationPinIcon, HourIcon } from "qpa-components" import styled, { css, useTheme } from "qpa-emotion" import * as React from "react" import { hot } from "react-hot-loader" @@ -35,6 +35,7 @@ const EventDetails = (props: Props) => { const info = event.infos.find(info => info.language === language) || event.infos[0] + return ( {event.revisionState === @@ -57,12 +58,34 @@ const EventDetails = (props: Props) => { ) : null} {info.title} - - + + {(() => { + const startDate = new Date(props.occurrence.start) + const day = intl.get(format(startDate, "iiii").toLowerCase()) + const fullDay = format(startDate, "dd-MM-yyyy") + const time = format(startDate, "HH:mm") + return `${day}, ${fullDay} ${intl.get('at-time')} ${time}` + })()} + + ) : null} + + +
+ {event.location.name}
{event.location.address} +
+
+ + {canEdit ? ( @@ -76,12 +99,7 @@ const EventDetails = (props: Props) => { `} /> ) : null} -
- {props.occurrence ? ( - - {format(new Date(props.occurrence.start), "yyyy-MM-dd HH:mm")} - - ) : null} + {info.description.split("\n").map((descLine, i) => (

{descLine}

@@ -135,12 +153,30 @@ const PosterImage = styled.div` } } ` + +const Location = styled.div` + display: flex; + flex-direction: row; + align-items: center; + svg { + margin-right: 8px; + } +` + const StyledEventTags = styled(EventTags)` grid-column: content; ` const OccurrenceTime = styled.div` grid-column: content; + font-weight: 700; + color: rgba(0, 0, 0, 0.7); + display: flex; + flex-direction: row; + align-items: center; + svg { + margin-right: 8px; + } ` const CommentToPublishedState = styled.div` diff --git a/packages/qpa/App/Event/useEventDetailsQuery.ts b/packages/qpa/App/Event/useEventDetailsQuery.ts index 47e100a..acea41c 100644 --- a/packages/qpa/App/Event/useEventDetailsQuery.ts +++ b/packages/qpa/App/Event/useEventDetailsQuery.ts @@ -45,6 +45,10 @@ export const EventDetailsDataFragment = gql` start end } + location { + address + name + } publishedState revisionState images { @@ -94,6 +98,10 @@ export interface EventDetailsData { revisionState: EventRevisionState publishedState: EventPublishedState images: EventImagesData + location: { + name: string + address: string + } occurrences: { id: string start: string