Skip to content

Commit

Permalink
add event details
Browse files Browse the repository at this point in the history
  • Loading branch information
@iRohitSingh
iRohitSingh committed Jul 7, 2023
1 parent fa72827 commit 035cdf4
Show file tree
Hide file tree
Showing 2 changed files with 198 additions and 17 deletions.
173 changes: 156 additions & 17 deletions src/components/Theme/EventView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,20 @@
* @module components/theme/View/EventView
*/

import React from 'react';
import PropTypes from 'prop-types';
import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
import { Image, Grid } from 'semantic-ui-react';
import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
import { FormattedDate } from '@plone/volto/components';
import React from "react";
import PropTypes from "prop-types";
import {
hasBlocksData,
flattenHTMLToAppURL,
expandToBackendURL,
getBlocksFieldname,
getBlocksLayoutFieldname,
getBaseUrl,
} from "@plone/volto/helpers";
import { Image, Grid, Button } from "semantic-ui-react";
import { FormattedDate } from "@plone/volto/components";
import config from "@plone/volto/registry";
import { map } from "lodash";

const EventTextfieldView = ({ content }) => (
<React.Fragment>
Expand Down Expand Up @@ -42,40 +50,171 @@ const EventTextfieldView = ({ content }) => (
const EventView = (props) => {
const { content } = props;
const dateOptions = {
year: 'numeric',
month: 'long',
day: 'numeric',
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
};

console.log(content, "i am event");

const blocksFieldname = getBlocksFieldname(content);
const blocksLayoutFieldname = getBlocksLayoutFieldname(content);

return (
<div id="page-document" className="ui container view-wrapper event-view">
<Grid>
<Grid.Column width={12}>
<div>
<div className="dates">

{content?.start ? (
<span className="day">
<FormattedDate date={content?.start} format={dateOptions}/>{' '}
<FormattedDate date={content?.start} format={dateOptions} />{" "}
{}
UHR
</span>
) : (
<span className="day">No date</span>
)}{' '}
)}{" "}
&mdash;&nbsp;
{content?.end ? (
<span className="day">
<FormattedDate date={content?.end} format={dateOptions}/>
{' '}
UHR
<FormattedDate date={content?.end} format={dateOptions} /> UHR
</span>
) : (
<span className="day">No date</span>
)}
</div>
</div>
{hasBlocksData(content) ? (
<RenderBlocks {...props} />
<div>
{map(content[blocksLayoutFieldname].items, (block) => {
const Block =
config.blocks.blocksConfig[
content[blocksFieldname]?.[block]?.["@type"]
]?.["view"] || null;
if (
config.blocks.blocksConfig[
content[blocksFieldname]?.[block]?.["@type"]
]?.["id"] === "title"
) {
return (
<>
<Block
key={block}
id={block}
properties={content}
data={content[blocksFieldname][block]}
path={getBaseUrl(props.location?.pathname || "")}
/>
{content.description && (
<p className="description">{content.description}</p>
)}
<Grid.Row columns={2}>
<Grid.Column>
<div>
<div className="event-title">
<span className="event-heading">Anfang</span>
<div className="event-detail">
{" "}
<FormattedDate
date={content?.start}
format={dateOptions}
/>{" "}
{}
Uhr
</div>
</div>
<div className="event-title">
<span className="event-heading">ende</span>
<div className="event-detail">
{" "}
<FormattedDate
date={content?.end}
format={dateOptions}
/>{" "}
Uhr
</div>
</div>
<div className="event-title">
<span className="event-heading">
Veranstaltungsort
</span>
<div className="event-detail">
{content?.location}
</div>
</div>
</div>
</Grid.Column>
<Grid.Column>
<div>
<div className="event-title">
<span className="event-heading">
Veranstalter
</span>
<div className="event-detail">
Musterevents GmbH
</div>
</div>
<div className="event-title">
<span className="event-heading">
Veranstalter-website
</span>
<div className="event-detail">
{content.event_url}
</div>
</div>
<div className="event-title">
<span className="event-heading">
ANsprechpERSON
</span>
<div className="event-detail">
{" "}
{content.contact_name} <br />{" "}
{content.contact_email}
<br />
{content.contact_phone}
</div>
</div>
</div>
</Grid.Column>
<div className="event-button">
<Button className="event-btn">
<a
className="ics-download"
target="_blank"
rel="noreferrer"
href={`${expandToBackendURL(
content["@id"]
)}/ics_view`}
>
ICS-Download
</a>
</Button>
<Button className="event-btn">Jetzt anmelden</Button>
</div>
</Grid.Row>
</>
);
}
return Block !== null ? (
<Block
key={block}
id={block}
properties={content}
data={content[blocksFieldname][block]}
path={getBaseUrl(props.location?.pathname || "")}
/>
) : (
<div key={block}>
{intl.formatMessage(messages.unknownBlock, {
block: content[blocksFieldname]?.[block]?.["@type"],
})}
</div>
);
})}
</div>
) : (
<EventTextfieldView {...props} />
)}
Expand Down Expand Up @@ -112,4 +251,4 @@ EventView.propTypes = {
}).isRequired,
};

export default EventView;
export default EventView;
42 changes: 42 additions & 0 deletions src/theme/_content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,46 @@
text-transform: uppercase;
}
}

.two.column.row {
max-width: var(--default-container-width);
margin-right: auto;
margin-left: auto;


}
}
.event-title {
margin-bottom: 25px;
.event-heading{
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 16px;
letter-spacing: 1px;
text-transform: uppercase;
}
.event-detail{
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 33px;
margin-top: 10px;
}
}
.event-button{
display: flex;
align-items: flex-start;
gap: 10px;
flex-shrink: 0;
.button.event-btn{
padding: 8px 20px;
background-color: transparent;
border: 1px solid #000;
color: #000;
font-size: 16px;
font-weight: 900;
line-height: 20px;
}
}

0 comments on commit 035cdf4

Please sign in to comment.