diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js index 8dc8feb798..8f9329bb47 100644 --- a/frontend/src/views/projectLiveMonitoring.js +++ b/frontend/src/views/projectLiveMonitoring.js @@ -34,12 +34,18 @@ const mappingTypesTags = { WATERWAYS: 'waterway', }; +const mappingTypesFeatureTypes = { + ROADS: 'line', + BUILDINGS: 'polygon', + WATERWAYS: 'line', +}; + export function ProjectLiveMonitoring() { const { id } = useParams(); const [coords, setCoords] = useState([0, 0]); const [activeFeature, setActiveFeature] = useState(null); const [tags, setTags] = useState('building'); - const [hashtag, setHashtag] = useState('hotosm-project-' + id); + const [featureType, setFeatureType] = useState("polygon"); const [mapSource, setMapSource] = useState('osm'); const [realtimeList, setRealtimeList] = useState(false); const [realtimeMap, setRealtimeMap] = useState(false); @@ -47,7 +53,6 @@ export function ProjectLiveMonitoring() { // eslint-disable-next-line const [area, setArea] = useState(null); const tagsInputRef = useRef(''); - const hashtagInputRef = useRef(''); const styleSelectRef = useRef(); useSetTitleTag(`Project #${id} Live Monitoring`); @@ -85,6 +90,7 @@ export function ProjectLiveMonitoring() { ].join(','), ); setTags(mappingTypesTags[project.mappingTypes] || 'building'); + setFeatureType(mappingTypesFeatureTypes[project.mappingTypes] || 'polygon'); } }, [project]); @@ -113,7 +119,6 @@ export function ProjectLiveMonitoring() { const handleFilterClick = (e) => { e.preventDefault(); setTags(tagsInputRef.current.value); - setHashtag(hashtagInputRef.current.value); return false; }; @@ -151,14 +156,6 @@ export function ProjectLiveMonitoring() { defaultValue="building" /> - - + display: "flex", + "flex-direction": "column", + backgroundColor: `rgb(${hottheme.colors.white})`}}> - - + + { setRealtimeList(!realtimeList); @@ -234,7 +234,7 @@ export function ProjectLiveMonitoring() { /> Live map - + { @@ -266,30 +266,45 @@ export function ProjectLiveMonitoring() { /> Semantic + + { setFeatureType("all") }} name="featureTypeAllCheckbox" id="featureTypeAllCheckbox" type="radio" /> + All + { setFeatureType("polygon") }} name="featureTypePolygonCheckbox" id="featureTypePolygonCheckbox" type="radio" /> + Polygon + { setFeatureType("line") }} name="featureTypeLineCheckbox" id="featureTypeLineCheckbox" type="radio" /> + Line + { setFeatureType("node") }} name="featureTypeNodeCheckbox" id="featureTypeNodeCheckbox" type="radio" /> + Node + - - { - setCoords([feature.lat, feature.lon]); - const tags = JSON.stringify(feature.tags); - const status = feature.status; - setActiveFeature({ properties: { tags, status }, ...feature }); - }} - realtime={realtimeList} - config={config} - status={status} - orderBy="created_at" - onFetchFirstTime={(mostRecentFeature) => { - if (mostRecentFeature) { - setCoords([mostRecentFeature.lat, mostRecentFeature.lon]); - } - }} - /> - + { + setCoords([feature.lat, feature.lon]); + const tags = JSON.stringify(feature.tags); + const status = feature.status; + setActiveFeature({ properties: { tags, status }, ...feature }); + }} + realtime={realtimeList} + config={config} + status={status} + orderBy="created_at" + onFetchFirstTime={(mostRecentFeature) => { + if (mostRecentFeature) { + setCoords([mostRecentFeature.lat, mostRecentFeature.lon]); + } + }} + />