colouring-montreal/app/src/frontend/building/data-components/planning-data-entry.tsx
Mateusz Konieczny 0bbf4dcdce improve styling
2022-10-05 19:52:45 +02:00

83 lines
2.9 KiB
TypeScript

import React, { Fragment } from 'react';
import DataTitle from './data-title';
import InfoBox from '../../components/info-box';
import CheckboxDataEntry from '../data-components/checkbox-data-entry';
interface PlanningDataOfficialDataEntryProps {
value: any; // TODO: proper structuring!
}
const {useState} = React;
const LongText = ({ content,limit}) => {
const [showAll, setShowAll] = useState(false);
const showMore = () => setShowAll(true);
const showLess = () => setShowAll(false);
if (content.length <= limit) {
return <div>{content}</div>
}
if (showAll) {
return <div>
{content}
<br/>
<b onClick={showLess}>Shorten description</b>
</div>
}
const toShow = content.substring(0, limit).trim() + "... ";
return <div>
{toShow}
<br/>
<b onClick={showMore}>Show full description</b>
</div>
}
const PlanningDataOfficialDataEntry: React.FC<PlanningDataOfficialDataEntryProps> = (props) => {
const data = props.value || [];
if(data.length == 0) {
return (<Fragment>
<InfoBox type='success'>
<DataTitle
title={"Planning Application Status"}
tooltip={null}
/>
<i>No live planning data available currently for this building polygon via the Planning London DataHub.</i>
<div>Disclaimer: data is imported from the official source, but Planning London DataHub is known to be incomplete.</div>
</InfoBox>
</Fragment>);
}
return (
<Fragment>
<InfoBox type='success'>
<Fragment>
<DataTitle
title={"Planning Application Status"}
tooltip={null}
/>
<b>Current planning application status for this site:</b> {data[0]["status"]}
<br/>
<b>Decision date</b>: {data[0]["decision_date"].toString()}
<div><b>Description of proposed work</b>: <LongText content = {data[0]["description"]} limit = {400}/></div>
<div><b>Planning application ID:</b> {data[0]["planning_application_id"]}</div>
<div><b>Planning portal link</b>: not provided</div>
<div><b>Most recent update by data provider:</b> {data[0]["decision_date"]}</div>
<div><b>Data source:</b> <a href={data[0]["data_source_link"]}>{data[0]["data_source"]}</a></div>
<div>Disclaimer: data is imported from the official source, but Planning London DataHub is known to be incomplete.</div>
<CheckboxDataEntry
title="Show conservation area layer (Ian Hall dataset)"
slug="planning_recent_outcome"
value={null}
disabled={true}
/>
</Fragment>
</InfoBox>
</Fragment>
);
};
export default PlanningDataOfficialDataEntry;