Merge pull request hotosm#49 from hotosm/feature/liveMonitoring

feature/liveMonitoring
varun2948 · Jan 25, 2024 · 11b9b4c · 11b9b4c
2 parents 9e82167 + beb3578
commit 11b9b4c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 23 deletions.
diff --git a/frontend/src/api/projects.js b/frontend/src/api/projects.js
@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 
 import { remapParamsToAPI } from '../utils/remapParamsToAPI';
 import api from './apiClient';
+import { UNDERPASS_URL } from '../config';
 
 export const useProjectsQuery = (fullProjectsQuery, action) => {
   const token = useSelector((state) => state.auth.token);
@@ -190,7 +191,7 @@ export const submitValidationTask = (projectId, payload, token, locale) => {
 
 export const useAvailableCountriesQuery = () => {
   const fetchGeojsonData = () => {
-    return axios.get(`https://underpass.live/availability.json`);
+    return axios.get(`${UNDERPASS_URL}/availability`);
   };
 
   return useQuery({

diff --git a/frontend/src/config/index.js b/frontend/src/config/index.js
@@ -6,7 +6,7 @@ export const API_URL = process.env.REACT_APP_API_URL
 export const OHSOME_STATS_BASE_URL =
   process.env.REACT_APP_OHSOME_STATS_BASE_URL || 'https://stats.now.ohsome.org/api';
 export const OHSOME_STATS_TOKEN = process.env.REACT_APP_OHSOME_STATS_TOKEN || '';
-export const UNDERPASS_URL = process.env.UNDERPASS_URL || 'https://underpass.hotosm.org';
+export const UNDERPASS_URL = process.env.REACT_APP_UNDERPASS_URL || 'https://underpass.hotosm.org';
 
 // APPLICATION SETTINGS
 export const DEFAULT_LOCALE = process.env.REACT_APP_DEFAULT_LOCALE || 'en';

diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js
@@ -9,14 +9,15 @@ import {
   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 } from '../config';
+import { MAPBOX_TOKEN, UNDERPASS_URL } from '../config';
 
 const availableImageryOptions = [
   { label: 'OSM', value: 'osm' },
@@ -28,7 +29,7 @@ const availableImageryOptions = [
 const availableImageryValues = availableImageryOptions.map((item) => item.value);
 
 const config = {
-  API_URL: `https://underpass.live:8000`,
+  API_URL: UNDERPASS_URL,
   MAPBOX_TOKEN: MAPBOX_TOKEN,
   // set default sources of Tasking Manager
   sources: {
@@ -97,6 +98,7 @@ export function ProjectLiveMonitoring() {
   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
@@ -270,25 +272,39 @@ export function ProjectLiveMonitoring() {
             }}
           >
             {project && (
-              <div className="w-100 fl pv1 bg-white blue-dark">
-                <div>
-                  <h3
-                    className="f2 fw5 mt3 mt2-ns mb3 ttu barlow-condensed blue-dark dib mr3"
-                    lang={project.projectInfo.locale}
-                  >
-                    {project.projectInfo && project.projectInfo.name}
-                  </h3>
-                  {project.private && (
-                    <ProjectVisibilityBox className="pv2 ph3 mb3 mr3 v-mid dib" />
-                  )}
-                  {['DRAFT', 'ARCHIVED'].includes(project.status) && (
-                    <ProjectStatusBox
-                      status={project.status}
-                      className="pv2 ph3 mb3 v-mid dib mr3"
-                    />
-                  )}
+              <>
+                <div className="flex flex-column flex-row-ns justify-start justify-between-ns items-start items-center-ns flex-wrap">
+                  <div className="pt2">
+                    <span className="blue-light">
+                      <Link to={`/projects/${project.projectId}`} className="no-underline pointer">
+                        <span className="blue-light">#{project.projectId}</span>
+                      </Link>
+                    </span>
+                    {project.organisationName ? (
+                      <span className="blue-dark"> | {project.organisationName}</span>
+                    ) : null}
+                  </div>
                 </div>
-              </div>
+                <div className="w-100 fl pv1 bg-white blue-dark">
+                  <div>
+                    <h3
+                      className="f2 fw5 ttu barlow-condensed blue-dark dib mr3"
+                      lang={project.projectInfo.locale}
+                    >
+                      {project.projectInfo && project.projectInfo.name}
+                    </h3>
+                    {project.private && (
+                      <ProjectVisibilityBox className="pv2 ph3 mb3 mr3 v-mid dib" />
+                    )}
+                    {['DRAFT', 'ARCHIVED'].includes(project.status) && (
+                      <ProjectStatusBox
+                        status={project.status}
+                        className="pv2 ph3 mb3 v-mid dib mr3"
+                      />
+                    )}
+                  </div>
+                </div>
+              </>
             )}
             <div className="border-b-2 pb-5 space-y-3">
               <UnderpassFeatureStats
@@ -325,6 +341,14 @@ export function ProjectLiveMonitoring() {
                   type="checkbox"
                 />
                 <label target="liveMapCheckbox">Live map</label>
+                <input
+                  onChange={() => {
+                    setListAll(!listAll);
+                  }}
+                  name="listAllCheckbox"
+                  type="checkbox"
+                />
+                <label target="listAllCheckbox">List all</label>
               </form>
             </div>
             <UnderpassFeatureList
@@ -347,7 +371,7 @@ export function ProjectLiveMonitoring() {
               }}
               realtime={realtimeList}
               config={config}
-              status={status}
+              status={listAll ? "" : status}
               orderBy="created_at"
               onFetchFirstTime={(mostRecentFeature) => {
                 if (mostRecentFeature) {