Commit 16bea23e authored by kjones3's avatar kjones3
Browse files

changes to event details KJ

parent 6dd7205d
Pipeline #39741 passed with stage
in 3 minutes and 34 seconds
......@@ -21,4 +21,13 @@ export default [
loading: Loading,
}),
},
{
contentTypeID: 'thEvent',
component: Loadable({
loader: () => {
return import('~/pages/Events/EventPage');
},
loading: Loading,
}),
},
];
......@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import ContentComposerStyled from '../components.styled/Composer.styled';
import ContactDetails from '~/features/contactDetails/ContactDetails';
const ContentComposer = ({ className, composer }) => {
if (!composer) return null;
......@@ -9,7 +10,7 @@ const ContentComposer = ({ className, composer }) => {
<ContentComposerStyled className={className}>
{composer.map((field, idx) => {
switch (field.type) {
case 'contentImage':
case 'imageBlock':
return (
<figure className="compField contentImage" key={idx}>
<img
......@@ -29,6 +30,8 @@ const ContentComposer = ({ className, composer }) => {
dangerouslySetInnerHTML={{ __html: field.value }}
/>
);
case 'contactDetailsComposer':
return <ContactDetails name={field.value.name} />;
default:
break;
}
......
import React from 'react';
import PropTypes from 'prop-types';
import ContactDetailsStyled from './ContactDetails.styled';
const ContactDetails = ({ name, phone, email, website }) => {
return (
<ContactDetailsStyled>
{/* render name */}
{name && (
<p>
<span className="label">Name: </span>
{name}
</p>
)}
{phone && (
<p>
<span className="label">Phone: </span>
{phone}
</p>
)}
{email && (
<p>
<span className="label">Email: </span>
{email}
</p>
)}
{website && (
<p>
<span className="label">Website: </span>
{website}
</p>
)}
</ContactDetailsStyled>
);
};
ContactDetails.propTypes = {
name: PropTypes.string,
phone: PropTypes.string,
email: PropTypes.string,
website: PropTypes.string,
};
export default ContactDetails;
import styled, { css } from 'styled-components';
const ContactDetailsStyled = styled.div`
${() => {
return css`
.label {
font-weight: bold;
color: #ff0000;
}
`;
}};
`;
export default ContactDetailsStyled;
......@@ -5,12 +5,14 @@ import { Link } from 'react-router-dom';
import EventCardStyled from '../components.styled/EventCard.styled';
const EventCard = ({ title, summary, image, className }) => {
const EventCard = ({ title, summary, image, uri, className }) => {
return (
<EventCardStyled className={className}>
<img src={image.asset.sys.uri} alt={image.altText} />
<h3>{title}</h3>
<p>{summary}</p>
<Link to={uri}>
<img src={image.asset.sys.uri} alt={image.altText} />
<h3>{title}</h3>
<p>{summary}</p>
</Link>
</EventCardStyled>
);
};
......@@ -19,6 +21,7 @@ EventCard.propTypes = {
title: PropTypes.string,
summary: PropTypes.string,
image: PropTypes.object,
uri: PropTypes.string,
className: PropTypes.string,
};
......
......@@ -4,6 +4,10 @@ import PropTypes from 'prop-types';
import EVentRecordStyled from '../components.styled/EventRecord.styled';
import ContentComposer from '~/features/composer/components/Composer';
import Map from '~/features/map/Map';
import formatDate from '../util/formatDate';
import ContactDetails from '~/features/contactDetails/ContactDetails';
import VenueTitle from '~/features/venues/components/VenueTitle';
const EventRecord = ({ className, entry }) => {
if (!entry) return null;
......@@ -11,13 +15,36 @@ const EventRecord = ({ className, entry }) => {
return (
<EVentRecordStyled className={className}>
<div className="container">
{entry.image && (
<img src={entry.image.asset.sys.uri} alt={entry.image.altText} />
{entry.bannerImage && (
<img
src={entry.bannerImage.asset.sys.uri}
alt={entry.bannerImage.altText}
/>
)}
<div className="eventContent">
<h1 className="pageTitle">{entry.entryTitle}</h1>
{entry.content && <ContentComposer composer={entry.content} />}
<h2>Venue</h2>
<VenueTitle title={entry.venue.title} />
<h2>Location</h2>
<Map lat={entry.location.lat} lon={entry.location.lon} />
<p>
<strong>Event date: </strong>
{formatDate(entry.datetime, 'dd/MMMM/yyyy')}
</p>
<h2>Contact details</h2>
<ContactDetails
name={entry.contactComponent.name}
phone={entry.contactComponent.phone}
email={entry.contactComponent.email}
website={entry.contactComponent.websiteAddress}
/>
{entry.eventDetails && (
<ContentComposer composer={entry.eventDetails} />
)}
</div>
</div>
</EVentRecordStyled>
......
......@@ -67,17 +67,19 @@ const BlogListing = ({ className }) => {
)}
{/* DELIVERY API RENDER ENTRIES START */}
{results && results.items && (
<ul>
{results.items.map((entry, idx) => {
return (
<li key={idx}>
<Link to={entry.sys.uri}>{entry.title}</Link>
</li>
);
})}
</ul>
)}
{results &&
results.items &&
results.items.map((entry, idx) => {
return (
<EventCard
title={entry.title}
summary={entry.description}
image={entry.bannerImage}
uri={entry.sys.uri}
key={idx}
/>
);
})}
{!results || (results.length < 1 && <p>No results found.</p>)}
{/* DELIVERY API RENDER ENTRIES END */}
</EventsListingStyled>
......
import React from 'react';
import PropTypes from 'prop-types';
const Map = ({ lat, lon }) => {
//const coordinates = lat + ',' + lon;
const coordinates = `${lat}, ${lon}`;
const imgMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${coordinates}&zoom=14&size=400x300&sensor=false`;
return <img src={imgMapUrl} alt="map of event location" />;
};
Map.propTypes = {
lat: PropTypes.number,
lon: PropTypes.number,
};
export default Map;
import React from 'react';
import PropTypes from 'prop-types';
const VenueTitle = ({ title }) => {
return <p>{title}</p>;
};
VenueTitle.propTypes = {
title: PropTypes.string,
};
export default VenueTitle;
import React from 'react';
import PropTypes from 'prop-types';
import MainLayout from '~/layouts/Main.layout';
import EventRecord from '~/features/eventListing/components/EventRecord';
import { Loading } from '~/core/routes/Loading';
const EventPage = ({ entry }) => {
if (!entry) return <Loading />;
return (
<MainLayout>
<EventRecord entry={entry} />
</MainLayout>
);
};
EventPage.propTypes = {
entry: PropTypes.object,
};
export default EventPage;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment