diff --git a/frontend/src/components/projectDetail/index.js b/frontend/src/components/projectDetail/index.js
index 54a7e83193..91547cc215 100644
--- a/frontend/src/components/projectDetail/index.js
+++ b/frontend/src/components/projectDetail/index.js
@@ -21,8 +21,13 @@ import { PermissionBox } from './permissionBox';
import { CustomButton } from '../button';
import { ProjectInfoPanel } from './infoPanel';
import { OSMChaButton } from './osmchaButton';
+import { LiveViewButton } from './liveViewButton';
import { useSetProjectPageTitleTag } from '../../hooks/UseMetaTags';
-import { useProjectContributionsQuery, useProjectTimelineQuery } from '../../api/projects';
+import {
+ useProjectContributionsQuery,
+ useProjectTimelineQuery,
+ useAvailableCountriesQuery,
+} from '../../api/projects';
import { Alert } from '../alert';
import './styles.scss';
@@ -153,6 +158,16 @@ export const ProjectDetail = (props) => {
);
+ const { data } = useAvailableCountriesQuery();
+
+ // check if the project has live monitoring feature enabled
+ // based on the country list provided by available.json
+ const hasLiveMonitoringFeature = !data
+ ? false
+ : props.project.countryTag.some((country) =>
+ data.countries.some((item) => country.toLowerCase() === item.toLowerCase()),
+ );
+
return (
@@ -346,6 +361,18 @@ export const ProjectDetail = (props) => {
project={props.project}
className="bg-white blue-dark ba b--grey-light pa3"
/>
+
+ {/*
+ show live view button only for published projects &
+ when the project has live monitoring feature
+ */}
+ {props.project.status === 'PUBLISHED' && hasLiveMonitoringFeature && (
+
+ )}
+
(
+
+ {
+
+ {compact ? (
+
+ ) : (
+
+ )}
+
+ }
+
+);
diff --git a/frontend/src/components/projectDetail/messages.js b/frontend/src/components/projectDetail/messages.js
index 76e452b827..cd457852c4 100644
--- a/frontend/src/components/projectDetail/messages.js
+++ b/frontend/src/components/projectDetail/messages.js
@@ -240,6 +240,14 @@ export default defineMessages({
id: 'project.detail.sections.contributions.osmcha',
defaultMessage: 'Changesets in OSMCha',
},
+ live: {
+ id: 'project.detail.sections.contributions.live',
+ defaultMessage: 'Live',
+ },
+ liveMonitoring: {
+ id: 'project.detail.sections.contributions.liveMonitoring',
+ defaultMessage: 'Live monitoring',
+ },
changesets: {
id: 'project.detail.sections.contributions.changesets',
defaultMessage: 'Changesets',
diff --git a/frontend/src/components/projectStats/contributorsStats.js b/frontend/src/components/projectStats/contributorsStats.js
index 5facb55904..1d6aa41bb9 100644
--- a/frontend/src/components/projectStats/contributorsStats.js
+++ b/frontend/src/components/projectStats/contributorsStats.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { Chart as ChartJS, ArcElement, BarElement } from 'chart.js';
+import { Chart as ChartJS, ArcElement, BarElement, CategoryScale, LinearScale } from 'chart.js';
import { Doughnut, Bar } from 'react-chartjs-2';
import { FormattedMessage, useIntl } from 'react-intl';
@@ -10,7 +10,7 @@ import { formatChartData, formatTooltip } from '../../utils/formatChartJSData';
import { useContributorStats } from '../../hooks/UseContributorStats';
import { StatsCardContent } from '../statsCard';
-ChartJS.register(ArcElement, BarElement);
+ChartJS.register(ArcElement, BarElement, CategoryScale, LinearScale);
export default function ContributorsStats({ contributors }) {
const intl = useIntl();
diff --git a/frontend/src/components/taskSelection/taskList.js b/frontend/src/components/taskSelection/taskList.js
index 08985a586a..43c7cf30d3 100644
--- a/frontend/src/components/taskSelection/taskList.js
+++ b/frontend/src/components/taskSelection/taskList.js
@@ -16,6 +16,7 @@ import { LockIcon, ListIcon, ZoomPlusIcon, CloseIcon, InternalLinkIcon } from '.
import { PaginatorLine, howManyPages } from '../paginator';
import { Dropdown } from '../dropdown';
import { TextField } from '../formInputs';
+import useCloseOnDocumentClick from '../../hooks/UseCloseOnDocumentClick';
export function TaskStatus({ status, lockHolder }: Object) {
const isReadyOrLockedForMapping = ['READY', 'LOCKED_FOR_MAPPING'].includes(status);
@@ -63,6 +64,8 @@ export function TaskItem({
const location = useLocation();
const { value, unit } = selectUnit(new Date(data.actionDate));
+ const closeOnDocumentClick = useCloseOnDocumentClick();
+
const handleCopyToClipboard = () =>
navigator.clipboard
.writeText(`${window.location.origin}${location.pathname}?search=${data.taskId}`)
@@ -117,6 +120,7 @@ export function TaskItem({
}
+ closeOnDocumentClick={closeOnDocumentClick}
>
{(close) => (
+ * ...
+ *
+ * )
+ */
+export default function useCloseOnDocumentClick() {
+ const [closeOnDocumentClick, setCloseOnDocumentClick] = useState(true);
+
+ useEffect(() => {
+ function insidePopupContents(target: any): boolean {
+ return target.querySelector('.popup-content') == null;
+ }
+
+ function handleMouseDown(event: MouseEvent) {
+ if (insidePopupContents(event.target)) {
+ setCloseOnDocumentClick(false);
+ }
+ }
+
+ function handleMouseUp() {
+ setTimeout(() => setCloseOnDocumentClick(true));
+ }
+
+ window.document.addEventListener('mousedown', handleMouseDown);
+ window.document.addEventListener('mouseup', handleMouseUp);
+
+ return () => {
+ window.document.removeEventListener('mousedown', handleMouseDown);
+ window.document.removeEventListener('mouseup', handleMouseUp);
+ };
+ }, [setCloseOnDocumentClick]);
+
+ return closeOnDocumentClick;
+}
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index 4a5574ed0e..d963246247 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -90,6 +90,16 @@ export const router = createBrowserRouter(
}}
ErrorBoundary={FallbackComponent}
/>
+ {
+ const { ProjectLiveMonitoring } = await import(
+ './views/projectLiveMonitoring' /* webpackChunkName: "projectLiveMonitoring" */
+ );
+ return { Component: ProjectLiveMonitoring };
+ }}
+ ErrorBoundary={FallbackComponent}
+ />
{
diff --git a/frontend/src/views/projectLiveMonitoring.css b/frontend/src/views/projectLiveMonitoring.css
new file mode 100644
index 0000000000..1767519aab
--- /dev/null
+++ b/frontend/src/views/projectLiveMonitoring.css
@@ -0,0 +1,19 @@
+@import "@hotosm/underpass-ui/dist/index.css";
+
+.maplibregl-map {
+ height: 100vh;
+}
+
+.top {
+ position: absolute;
+ top: 150px;
+ left: 20px;
+ z-index: 999;
+}
+
+svg.pl2 {
+ display: inherit;
+ height: 22px !important;
+ width: 19px !important;
+ margin-left: 0px;
+}
diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js
new file mode 100644
index 0000000000..e0e7d588c8
--- /dev/null
+++ b/frontend/src/views/projectLiveMonitoring.js
@@ -0,0 +1,389 @@
+import React, { useState, useRef, useEffect } from 'react';
+import ReactPlaceholder from 'react-placeholder';
+import Select from 'react-select';
+import centroid from '@turf/centroid';
+import {
+ UnderpassFeatureList,
+ UnderpassMap,
+ HOTTheme,
+ UnderpassFeatureStats,
+ UnderpassValidationStats,
+} from '@hotosm/underpass-ui';
+import { Link } from 'react-router-dom';
+
+import { ProjectVisibilityBox } from '../components/projectDetail/visibilityBox';
+import { ProjectStatusBox } from '../components/projectDetail/statusBox';
+import { useSetTitleTag } from '../hooks/UseMetaTags';
+import { useParams } from 'react-router-dom';
+import { useFetch } from '../hooks/UseFetch';
+import './projectLiveMonitoring.css';
+import { MAPBOX_TOKEN, UNDERPASS_URL } from '../config';
+
+const availableImageryOptions = [
+ { label: 'OSM', value: 'osm' },
+ { label: 'Bing', value: 'Bing' },
+ { label: 'Mapbox Satellite', value: 'Mapbox' },
+ { label: 'ESRI World Imagery', value: 'EsriWorldImagery' },
+];
+
+const availableImageryValues = availableImageryOptions.map((item) => item.value);
+
+const config = {
+ API_URL: UNDERPASS_URL,
+ MAPBOX_TOKEN: MAPBOX_TOKEN,
+ // set default sources of Tasking Manager
+ sources: {
+ osm: {
+ type: 'raster',
+ tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
+ tileSize: 256,
+ attribution: '© OpenStreetMap Contributors',
+ maxzoom: 19,
+ },
+ Bing: {
+ type: 'raster',
+ tiles: ['https://ecn.t3.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1'],
+ tileSize: 256,
+ attribution: '© OpenStreetMap Contributors',
+ maxzoom: 18,
+ },
+ Mapbox: {
+ type: 'raster',
+ tiles: [
+ `https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=${MAPBOX_TOKEN}`,
+ ],
+ tileSize: 512,
+ attribution: '© OpenStreetMap Contributors © Mapbox',
+ maxzoom: 19,
+ },
+ EsriWorldImagery: {
+ type: 'raster',
+ tiles: [
+ 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+ ],
+ tileSize: 256,
+ attribution: '© OpenStreetMap Contributors © ESRI',
+ maxzoom: 18,
+ },
+ },
+};
+
+const statusList = {
+ ALL: '',
+ UNSQUARED: 'badgeom',
+ OVERLAPPING: 'overlapping',
+ BADVALUE: 'badvalue',
+};
+
+const mappingTypesTags = {
+ ROADS: 'highway',
+ BUILDINGS: 'building',
+ 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 [featureType, setFeatureType] = useState('polygon');
+ const [mapSource, setMapSource] = useState('osm');
+ const [imageryOptions, setImageryOptions] = useState(availableImageryOptions);
+ const [mapConfig, setMapConfig] = useState(config);
+ const [realtimeList, setRealtimeList] = useState(false);
+ const [realtimeMap, setRealtimeMap] = useState(false);
+ const [listAll, setListAll] = useState(false);
+ // eslint-disable-next-line
+ const [status, setStatus] = useState(statusList.UNSQUARED);
+ // eslint-disable-next-line
+ const [area, setArea] = useState(null);
+ const tagsInputRef = useRef('');
+
+ useSetTitleTag(`Project #${id} Live Monitoring`);
+ const [error, loading, data] = useFetch(`projects/${id}/`, id);
+
+ const [areaOfInterest, setAreaOfInterest] = useState(null);
+ const [project, setProject] = useState(null);
+
+ useEffect(() => {
+ if (!Object.keys(data).length) return;
+ setProject(data);
+ // add custom to config sources if the project has custom imagery
+ const hasCustomImagery = data.imagery?.includes('http');
+ if (hasCustomImagery) {
+ setMapConfig((prev) => ({
+ ...prev,
+ sources: {
+ ...prev.sources,
+ custom: {
+ type: 'raster',
+ tiles: [data.imagery],
+ tileSize: 256,
+ attribution: 'custom',
+ maxzoom: 19,
+ },
+ },
+ }));
+ setImageryOptions((prev) => [...prev, { label: 'Custom', value: 'custom' }]);
+ }
+ // set mapSource after data fetch
+ const mapSourceValue = hasCustomImagery
+ ? 'custom'
+ : availableImageryValues.includes(data.imagery)
+ ? data.imagery
+ : 'osm';
+ setMapSource(mapSourceValue);
+ }, [data]);
+
+ useEffect(() => {
+ if (project && project.aoiBBOX && project.areaOfInterest) {
+ const bbox = [
+ [project.aoiBBOX[0], project.aoiBBOX[1]],
+ [project.aoiBBOX[0], project.aoiBBOX[3]],
+ [project.aoiBBOX[2], project.aoiBBOX[3]],
+ [project.aoiBBOX[2], project.aoiBBOX[1]],
+ [project.aoiBBOX[0], project.aoiBBOX[1]],
+ ];
+ setCoords(
+ centroid({
+ type: 'MultiPolygon',
+ coordinates: [[bbox]],
+ }).geometry.coordinates,
+ );
+ setAreaOfInterest(
+ [
+ bbox[0].join(' '),
+ bbox[1].join(' '),
+ bbox[2].join(' '),
+ bbox[3].join(' '),
+ bbox[4].join(' '),
+ ].join(','),
+ );
+ setTags(mappingTypesTags[project.mappingTypes] || 'building');
+ setFeatureType(mappingTypesFeatureTypes[project.mappingTypes] || 'polygon');
+ }
+ }, [project]);
+
+ const hottheme = HOTTheme();
+
+ const defaultMapStyle = {
+ waysLine: {
+ ...hottheme.map.waysLine,
+ 'line-opacity': 0.8,
+ },
+ waysFill: {
+ ...hottheme.map.waysFill,
+ 'fill-opacity': ['match', ['get', 'type'], 'LineString', 0, 0.3],
+ },
+ nodesSymbol: {
+ ...hottheme.map.nodesSymbol,
+ 'icon-opacity': ['match', ['get', 'type'], 'Point', 0.8, 0],
+ },
+ };
+
+ // eslint-disable-next-line
+ const [demoTheme, setDemoTheme] = useState({
+ map: defaultMapStyle,
+ });
+
+ const handleFilterClick = (e) => {
+ e.preventDefault();
+ setTags(tagsInputRef.current.value);
+ return false;
+ };
+
+ const handleMapSourceSelect = (selectedItem) => {
+ setMapSource(selectedItem.value);
+ };
+
+ const handleMapMove = ({ bbox }) => {
+ setArea(bbox);
+ };
+ const handleMapLoad = ({ bbox }) => {
+ setArea(bbox);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {project && (
+ <>
+
+
+
+
+ #{project.projectId}
+
+
+ {project.organisationName ? (
+ | {project.organisationName}
+ ) : null}
+
+
+
+
+
+ {project.projectInfo && project.projectInfo.name}
+
+ {project.private && (
+
+ )}
+ {['DRAFT', 'ARCHIVED'].includes(project.status) && (
+
+ )}
+
+
+
+ )}
+
+
+
+
+
+
+
+
{
+ 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={listAll ? "" : status}
+ orderBy="created_at"
+ onFetchFirstTime={(mostRecentFeature) => {
+ if (mostRecentFeature) {
+ setCoords([mostRecentFeature.lat, mostRecentFeature.lon]);
+ }
+ }}
+ />
+
+
+