Merged PR 2269: added link for streaming events
added link for streaming events Related work items: #22423
This commit is contained in:
Robert Bond
+118
-82
@@ -3,6 +3,10 @@ import { setCurrentPage } from "../../store/currentView/action";
|
|||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import useTranslation from "next-translate/useTranslation";
|
import useTranslation from "next-translate/useTranslation";
|
||||||
import { formatDates } from "../utils";
|
import { formatDates } from "../utils";
|
||||||
|
import {
|
||||||
|
getLivePublishedEvent,
|
||||||
|
isEventLiveNow
|
||||||
|
} from "./summary/utils/liveEvent";
|
||||||
|
|
||||||
const EventsDetails = (props) => {
|
const EventsDetails = (props) => {
|
||||||
let { t } = useTranslation();
|
let { t } = useTranslation();
|
||||||
@@ -23,8 +27,6 @@ const EventsDetails = (props) => {
|
|||||||
return obj.hasOwnProperty(property) && obj[property] !== null;
|
return obj.hasOwnProperty(property) && obj[property] !== null;
|
||||||
}
|
}
|
||||||
|
|
||||||
//console.log(eventsArr.length > 0);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
eventsArr.length > 0 && (
|
eventsArr.length > 0 && (
|
||||||
<div className="govuk-grid-row">
|
<div className="govuk-grid-row">
|
||||||
@@ -63,76 +65,26 @@ const EventsDetails = (props) => {
|
|||||||
{item.pinswg_eventname}
|
{item.pinswg_eventname}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
<div className="eventColumn">
|
|
||||||
{hasOwnPropertyAndNotNull(
|
{hasOwnPropertyAndNotNull(
|
||||||
item,
|
item,
|
||||||
"pinswg_eventaddressline1"
|
[
|
||||||
) && (
|
"pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
|
||||||
<>
|
]
|
||||||
<div>
|
|
||||||
<b>
|
|
||||||
{t(
|
|
||||||
"case:event-address-label"
|
|
||||||
)}
|
|
||||||
</b>
|
|
||||||
:
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
item.pinswg_eventaddressline1
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{hasOwnPropertyAndNotNull(
|
|
||||||
item,
|
|
||||||
"pinswg_eventaddressline2"
|
|
||||||
) && (
|
) && (
|
||||||
<div>
|
<div>
|
||||||
|
<b>
|
||||||
|
{t(
|
||||||
|
"case:event-type-of-event-label"
|
||||||
|
)}
|
||||||
|
</b>
|
||||||
|
:{" "}
|
||||||
{
|
{
|
||||||
item.pinswg_eventaddressline2
|
item[
|
||||||
|
"pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{hasOwnPropertyAndNotNull(
|
|
||||||
item,
|
|
||||||
"pinswg_eventaddresstown"
|
|
||||||
) && (
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
item.pinswg_eventaddresstown
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{hasOwnPropertyAndNotNull(
|
|
||||||
item,
|
|
||||||
"pinswg_eventaddresscounty"
|
|
||||||
) && (
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
item.pinswg_eventaddresscounty
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{hasOwnPropertyAndNotNull(
|
|
||||||
item,
|
|
||||||
"pinswg_eventaddresscounty"
|
|
||||||
) && (
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
item.pinswg_eventaddresspostcode
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{/* type of event
|
|
||||||
start date date of event - end date of event
|
|
||||||
|
|
||||||
if virtual event no address showNoOfRecords
|
|
||||||
show event address */}
|
|
||||||
<div className="eventColumn">
|
|
||||||
{hasOwnPropertyAndNotNull(
|
{hasOwnPropertyAndNotNull(
|
||||||
item,
|
item,
|
||||||
"pinswg_dateeventrequested"
|
"pinswg_dateeventrequested"
|
||||||
@@ -171,25 +123,109 @@ const EventsDetails = (props) => {
|
|||||||
<div className="eventColumn">
|
<div className="eventColumn">
|
||||||
{hasOwnPropertyAndNotNull(
|
{hasOwnPropertyAndNotNull(
|
||||||
item,
|
item,
|
||||||
[
|
"pinswg_eventaddressline1"
|
||||||
"pinswg_typeofevent@OData.Community.Display.V1.FormattedValue",
|
|
||||||
]
|
|
||||||
) && (
|
) && (
|
||||||
<div>
|
<>
|
||||||
<b>
|
<div
|
||||||
{t(
|
style={{
|
||||||
"case:event-type-of-event-label"
|
display: "flex"
|
||||||
)}
|
}}
|
||||||
</b>
|
>
|
||||||
:{" "}
|
<b>
|
||||||
{
|
{t(
|
||||||
item[
|
"case:event-address-label"
|
||||||
"pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
|
)}
|
||||||
]
|
</b>
|
||||||
}
|
:
|
||||||
</div>
|
<div
|
||||||
|
style={{
|
||||||
|
display:
|
||||||
|
"flex",
|
||||||
|
marginLeft:
|
||||||
|
"10px",
|
||||||
|
flexDirection:
|
||||||
|
"column"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{hasOwnPropertyAndNotNull(
|
||||||
|
item,
|
||||||
|
"pinswg_eventaddressline1"
|
||||||
|
) && (
|
||||||
|
<span>
|
||||||
|
{
|
||||||
|
item.pinswg_eventaddressline1
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{hasOwnPropertyAndNotNull(
|
||||||
|
item,
|
||||||
|
"pinswg_eventaddressline2"
|
||||||
|
) && (
|
||||||
|
<span>
|
||||||
|
{
|
||||||
|
item.pinswg_eventaddressline2
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{hasOwnPropertyAndNotNull(
|
||||||
|
item,
|
||||||
|
"pinswg_eventaddresstown"
|
||||||
|
) && (
|
||||||
|
<span>
|
||||||
|
{
|
||||||
|
item.pinswg_eventaddresstown
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{hasOwnPropertyAndNotNull(
|
||||||
|
item,
|
||||||
|
"pinswg_eventaddresscounty"
|
||||||
|
) && (
|
||||||
|
<span>
|
||||||
|
{
|
||||||
|
item.pinswg_eventaddresscounty
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{hasOwnPropertyAndNotNull(
|
||||||
|
item,
|
||||||
|
"pinswg_eventaddresscounty"
|
||||||
|
) && (
|
||||||
|
<span>
|
||||||
|
{
|
||||||
|
item.pinswg_eventaddresspostcode
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{/* type of event
|
||||||
|
start date date of event - end date of event
|
||||||
|
|
||||||
|
if virtual event no address showNoOfRecords
|
||||||
|
show event address */}
|
||||||
|
|
||||||
|
{hasOwnPropertyAndNotNull(
|
||||||
|
item,
|
||||||
|
"pinswg_linktotheevent"
|
||||||
|
) &&
|
||||||
|
isEventLiveNow(item) && (
|
||||||
|
<div className="eventColumn">
|
||||||
|
<a
|
||||||
|
href={
|
||||||
|
item.pinswg_linktotheevent
|
||||||
|
}
|
||||||
|
className="govuk-link"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Watch live stream
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
@@ -203,7 +239,7 @@ const EventsDetails = (props) => {
|
|||||||
|
|
||||||
const mapStateToProps = (state) => {
|
const mapStateToProps = (state) => {
|
||||||
return {
|
return {
|
||||||
...state,
|
...state
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -214,7 +250,7 @@ const mapDispatchToProps = (dispatch) => {
|
|||||||
},
|
},
|
||||||
setCurrentPage: (currentPage) => {
|
setCurrentPage: (currentPage) => {
|
||||||
dispatch(setCurrentPage(currentPage));
|
dispatch(setCurrentPage(currentPage));
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -32,6 +32,10 @@ import {
|
|||||||
import { signIn, useSession } from "next-auth/react";
|
import { signIn, useSession } from "next-auth/react";
|
||||||
import { destroyCookie, parseCookies, setCookie } from "nookies";
|
import { destroyCookie, parseCookies, setCookie } from "nookies";
|
||||||
import { getFormCollectionByID, getDetailsProxy } from "../utils";
|
import { getFormCollectionByID, getDetailsProxy } from "../utils";
|
||||||
|
import {
|
||||||
|
getLivePublishedEvent,
|
||||||
|
isEventLiveNow
|
||||||
|
} from "./summary/utils/liveEvent";
|
||||||
|
|
||||||
import * as CaseTypes from "./summaryTypes"; // ✅ must match filename exactly
|
import * as CaseTypes from "./summaryTypes"; // ✅ must match filename exactly
|
||||||
import {
|
import {
|
||||||
@@ -321,6 +325,10 @@ const CaseSummary = (props) => {
|
|||||||
Array.isArray(props.mediaObj?.value) &&
|
Array.isArray(props.mediaObj?.value) &&
|
||||||
props.mediaObj.value.length > 0;
|
props.mediaObj.value.length > 0;
|
||||||
|
|
||||||
|
const livePublishedEvent = hasEventsTabData
|
||||||
|
? getLivePublishedEvent(props.eventsObj)
|
||||||
|
: null;
|
||||||
|
|
||||||
let point = {};
|
let point = {};
|
||||||
let siteCoords = {};
|
let siteCoords = {};
|
||||||
let center = {};
|
let center = {};
|
||||||
@@ -359,6 +367,45 @@ const CaseSummary = (props) => {
|
|||||||
showDetails == true ? (
|
showDetails == true ? (
|
||||||
<>
|
<>
|
||||||
<div className="govuk-frontend-supported">
|
<div className="govuk-frontend-supported">
|
||||||
|
{livePublishedEvent && (
|
||||||
|
<div
|
||||||
|
className="govuk-notification-banner govuk-!-margin-bottom-6"
|
||||||
|
role="region"
|
||||||
|
aria-labelledby="live-event-title"
|
||||||
|
data-module="govuk-notification-banner"
|
||||||
|
>
|
||||||
|
<div className="govuk-notification-banner__header">
|
||||||
|
<h2
|
||||||
|
className="govuk-notification-banner__title"
|
||||||
|
id="live-event-title"
|
||||||
|
>
|
||||||
|
Live event
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="govuk-notification-banner__content">
|
||||||
|
<p className="govuk-notification-banner__heading">
|
||||||
|
A live streamed event is happening now.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{livePublishedEvent.pinswg_eventname && (
|
||||||
|
<p className="govuk-body">
|
||||||
|
{livePublishedEvent.pinswg_eventname}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={
|
||||||
|
livePublishedEvent.pinswg_linktotheevent
|
||||||
|
}
|
||||||
|
className="govuk-link govuk-link--no-visited-state"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Watch live stream
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="govuk-grid-row">
|
<div className="govuk-grid-row">
|
||||||
<div className="govuk-grid-column-full">
|
<div className="govuk-grid-column-full">
|
||||||
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
|
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
|
||||||
@@ -373,6 +420,7 @@ const CaseSummary = (props) => {
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="govuk-tabs" data-module="govuk-tabs">
|
<div className="govuk-tabs" data-module="govuk-tabs">
|
||||||
<h2 className="govuk-tabs__title">Contents</h2>
|
<h2 className="govuk-tabs__title">Contents</h2>
|
||||||
<ul className="govuk-tabs__list">
|
<ul className="govuk-tabs__list">
|
||||||
|
|||||||
@@ -0,0 +1,30 @@
|
|||||||
|
export function isEventLiveNow(item) {
|
||||||
|
if (!item?.pinswg_dateeventrequested) return false;
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
const start = new Date(item.pinswg_dateeventrequested);
|
||||||
|
|
||||||
|
if (isNaN(start.getTime())) return false;
|
||||||
|
|
||||||
|
if (item.pinswg_enddateoftheevent) {
|
||||||
|
const end = new Date(item.pinswg_enddateoftheevent);
|
||||||
|
if (isNaN(end.getTime())) return false;
|
||||||
|
return now >= start && now <= end;
|
||||||
|
}
|
||||||
|
|
||||||
|
const endOfStartDay = new Date(start);
|
||||||
|
endOfStartDay.setHours(23, 59, 59, 999);
|
||||||
|
|
||||||
|
return now >= start && now <= endOfStartDay;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getLivePublishedEvent(eventsObj) {
|
||||||
|
const eventsArr = eventsObj?.value || [];
|
||||||
|
|
||||||
|
return eventsArr.find(
|
||||||
|
(item) =>
|
||||||
|
item.pinswg_eventpublishflag &&
|
||||||
|
item.pinswg_linktotheevent &&
|
||||||
|
isEventLiveNow(item)
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -3121,6 +3121,7 @@ ul.subFieldList {
|
|||||||
border-bottom: 1px solid $lightgrey_semi;
|
border-bottom: 1px solid $lightgrey_semi;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
display: block;
|
display: block;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
@@ -3128,7 +3129,13 @@ ul.subFieldList {
|
|||||||
|
|
||||||
.eventColumn {
|
.eventColumn {
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
width: 25%;
|
min-width: 33%;
|
||||||
|
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
Reference in New Issue
Block a user