Location category tweaks
- Add placeholder data fields - Add Postcode Regex - Add OSM ID Regex - Allow Pattern Data Entry boxes to transform text (to force capitalise, for example) - Add source links and update tooltips - Cosmetic tweaks to CSS
This commit is contained in:
Mike Simpson
parent
b5103327c5
commit
725d7710b9
@ -12,11 +12,20 @@ interface PatternDataEntryProps extends BaseDataEntryProps {
|
||||
*/
|
||||
pattern: string;
|
||||
maxLength?: number;
|
||||
valueTransform?: (val: string) => string;
|
||||
}
|
||||
|
||||
export const PatternDataEntry: React.FC<PatternDataEntryProps> = props => {
|
||||
const handleChange = (value: string) => {
|
||||
props.onChange?.(props.slug, value);
|
||||
props.onChange?.(props.slug, transformValue(value));
|
||||
};
|
||||
|
||||
const transformValue = (value: string) => {
|
||||
const transform = props.valueTransform || (x => x);
|
||||
const transformedValue = value === '' ?
|
||||
null :
|
||||
transform(value);
|
||||
return transformedValue;
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -12,9 +12,11 @@ import SelectDataEntry from '../data-components/select-data-entry';
|
||||
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
|
||||
|
||||
const locationNumberPattern = "[1-9]\\d*[a-z]?(-([1-9]\\d*))?"; ///[1-9]\d*[a-z]?(-([1-9]\d*))?/;
|
||||
const postcodeCharacterPattern = "^[A-Z]{1,2}[0-9]{1,2}[A-Z]?(\\s*[0-9][A-Z]{1,2})?$";
|
||||
const osmIdentifierPattern = "[0-9]{1,9}";
|
||||
|
||||
const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
const osm_url = "https://www.openstreetmap.org/way/"+props.building.ref_osm_id;
|
||||
const osm_url = "www.openstreetmap.org/way/"+props.building.ref_osm_id;
|
||||
return (
|
||||
<Fragment>
|
||||
<DataEntryGroup name="Addresses">
|
||||
@ -26,8 +28,9 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
tooltip={dataFields.location_name.tooltip}
|
||||
placeholder="https://..."
|
||||
isUrl={true}
|
||||
placeholder=""
|
||||
isUrl={false}
|
||||
disabled={true}
|
||||
/>
|
||||
<Verification
|
||||
slug="location_name"
|
||||
@ -44,6 +47,13 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
mode='view'
|
||||
tooltip="Not yet activated.<br><br>For security reasons, we do not allow the use of free text boxes and are currently looking into alternative ways to collect this data."
|
||||
/>
|
||||
<DataEntry
|
||||
title="Building name link"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
tooltip="Under Development.<br><br>Please enter a link to a webpage that confirms the name of this building."
|
||||
/>
|
||||
<hr/>
|
||||
<PatternDataEntry
|
||||
title={dataFields.location_number.title}
|
||||
@ -54,6 +64,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
tooltip={dataFields.location_number.tooltip}
|
||||
maxLength={5}
|
||||
/>
|
||||
<Verification
|
||||
slug="location_number"
|
||||
@ -71,6 +82,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
maxLength={30}
|
||||
disabled={true}
|
||||
/>
|
||||
<Verification
|
||||
slug="location_street"
|
||||
@ -88,6 +100,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
maxLength={30}
|
||||
disabled={true}
|
||||
/>
|
||||
<Verification
|
||||
slug="location_line_two"
|
||||
@ -104,6 +117,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
disabled={true}
|
||||
/>
|
||||
<Verification
|
||||
slug="location_town"
|
||||
@ -113,10 +127,11 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
user_verified_as={props.user_verified.location_town}
|
||||
verified_count={props.building.verified.location_town}
|
||||
/>
|
||||
<DataEntry
|
||||
<PatternDataEntry
|
||||
title={dataFields.location_postcode.title}
|
||||
slug="location_postcode"
|
||||
value={props.building.location_postcode}
|
||||
pattern={postcodeCharacterPattern}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
@ -172,13 +187,27 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
onChange={props.onChange}
|
||||
disabled={true}
|
||||
/>
|
||||
{
|
||||
(props.building.ref_toid == null) ? <></> :
|
||||
<div className={`alert alert-dark`} role="alert" style={{ fontSize: 14, backgroundColor: "#f6f8f9" }}>
|
||||
<i className="source-url">Source: <a href="https://www.ordnancesurvey.co.uk/products/os-open-toid" target={"_blank"}>{"www.ordnancesurvey.co.uk/products/os-open-toid"}</a></i>
|
||||
</div>
|
||||
}
|
||||
<hr/>
|
||||
<UPRNsDataEntry
|
||||
title={dataFields.uprns.title}
|
||||
slug="ref_uprns"
|
||||
value={props.building.uprns}
|
||||
tooltip={dataFields.uprns.tooltip}
|
||||
/>
|
||||
<DataEntry
|
||||
{
|
||||
(props.building.uprns == null) ? <></> :
|
||||
<div className={`alert alert-dark`} role="alert" style={{ fontSize: 14, backgroundColor: "#f6f8f9" }}>
|
||||
<i className="source-url">Source: <a href="https://beta.ordnancesurvey.co.uk/products/os-open-uprn" target={"_blank"}>{"beta.ordnancesurvey.co.uk/products/os-open-uprn"}</a></i>
|
||||
</div>
|
||||
}
|
||||
<hr/>
|
||||
<PatternDataEntry
|
||||
title={dataFields.ref_osm_id.title}
|
||||
slug="ref_osm_id"
|
||||
value={props.building.ref_osm_id}
|
||||
@ -187,13 +216,8 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
tooltip={dataFields.ref_osm_id.tooltip}
|
||||
maxLength={20}
|
||||
onChange={props.onChange}
|
||||
pattern={osmIdentifierPattern}
|
||||
/>
|
||||
{
|
||||
(props.building.ref_osm_id == null) ? <></> :
|
||||
<div className={`alert alert-dark`} role="alert" style={{ fontSize: 14, backgroundColor: "#f6f8f9" }}>
|
||||
<i className="source-url">Source: <a href={osm_url} target={"_blank"}>{osm_url}</a></i>
|
||||
</div>
|
||||
}
|
||||
<Verification
|
||||
slug="ref_osm_id"
|
||||
allow_verify={props.user !== undefined && props.building.ref_osm_id !== null && !props.edited}
|
||||
@ -202,6 +226,12 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
user_verified_as={props.user_verified.ref_osm_id}
|
||||
verified_count={props.building.verified.ref_osm_id}
|
||||
/>
|
||||
{
|
||||
(props.building.ref_osm_id == null) ? <></> :
|
||||
<div className={`alert alert-dark`} role="alert" style={{ fontSize: 14, backgroundColor: "#f6f8f9" }}>
|
||||
<i className="source-url">Source: <a href={"https://"+osm_url} target={"_blank"}>{osm_url}</a></i>
|
||||
</div>
|
||||
}
|
||||
<hr/>
|
||||
<NumericDataEntry
|
||||
title={dataFields.location_latitude.title}
|
||||
@ -274,6 +304,14 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
/>
|
||||
</>
|
||||
}
|
||||
<hr/>
|
||||
<DataEntry
|
||||
title="Alternative open building footprint ID(s)"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
tooltip="Under Development.<br><br>Please enter links to any additional data sources for open building footprint IDs."
|
||||
/>
|
||||
</DataEntryGroup>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
@ -184,3 +184,16 @@
|
||||
padding-top: 0px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.uprn-list {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.uprn-list li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@ -194,7 +194,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
|
||||
ref_toid: {
|
||||
category: Category.Location,
|
||||
title: "Building footprint ID",
|
||||
tooltip: "Ordnance Survey Topography Layer ID (TOID) [<a href='https://www.ordnancesurvey.co.uk/business-government/products/open-toid'>link</a>]",
|
||||
tooltip: "Ordnance Survey Topography Layer ID (TOID)",
|
||||
example: "",
|
||||
},
|
||||
|
||||
@ -205,7 +205,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
|
||||
uprns: {
|
||||
category: Category.Location,
|
||||
title: "Unique Property Reference Number(s) (UPRN)",
|
||||
tooltip: "Unique Property Reference Numbers (to be filled automatically) [<a href='https://beta.ordnancesurvey.co.uk/products/os-open-uprn'>LINK</a>]",
|
||||
tooltip: "Unique Property Reference Number(s) (UPRN) (derived automatically)",
|
||||
example: [{ uprn: "", parent_uprn: "" }, { uprn: "", parent_uprn: "" }],
|
||||
},
|
||||
|
||||
@ -218,11 +218,10 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
ref_osm_id: {
|
||||
category: Category.Location,
|
||||
title: "OpenStreetMap ID",
|
||||
tooltip: "OpenStreetMap feature ID",
|
||||
tooltip: "OpenStreetMap building ('way') ID - Numerical string of up to 9 characters",
|
||||
example: "",
|
||||
},
|
||||
location_latitude: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user