colouring-montreal/app/src/frontend/building/data-containers/streetscape.tsx
2021-02-25 03:41:49 +00:00

80 lines
2.2 KiB
TypeScript

import React, { Fragment } from 'react';
import InfoBox from '../../components/info-box';
import { dataFields } from '../../config/data-fields-config';
import DataEntry from '../data-components/data-entry';
import NumericDataEntry from '../data-components/numeric-data-entry';
import withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props';
/**
* Streetscape view/edit section
*/
const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
<Fragment>
<InfoBox msg="This is what we're planning to collect on the building's context" />
<ul className="data-list">
<li>Gardens</li>
<li>Trees</li>
<li>Green walls</li>
<li>Green roof</li>
<li>Proximity to parks and open greenspace</li>
<li>Building shading</li>
</ul>
<NumericDataEntry
title={dataFields.size_plot_area_total.title}
slug="size_plot_area_total"
mode='view'
step={0.1}
min={0}
/>
<NumericDataEntry
title={dataFields.size_far_ratio.title}
slug="size_far_ratio"
mode='view'
step={0.1}
min={0}
/>
<DataEntry
title="Plot dimensions"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Plot geometry link"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Land ownership parcel link"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Land ownership type"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Street width"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Street network geometry link"
slug=""
value=""
mode='view'
/>
</Fragment>
);
const StreetscapeContainer = withCopyEdit(StreetscapeView);
export default StreetscapeContainer;