Skip to content

Commit

Permalink
Merge pull request #43 from naxa-developers/tm/feature/liveMonitoring
Browse files Browse the repository at this point in the history 
Tm/feature/live monitoring
  • Loading branch information
@royallsilwallz
royallsilwallz authored Jan 18, 2024
2 parents 8a30b89 + 494fe3b commit 870fac8
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 83 deletions.
8 changes: 7 additions & 1 deletion frontend/src/views/projectLiveMonitoring.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,14 @@

.top {
position: absolute;
top: 390px;
top: 150px;
left: 20px;
z-index: 999;
}

svg.pl2 {
display: inherit;
height: 22px !important;
width: 19px !important;
margin-left: 0px;
}
112 changes: 30 additions & 82 deletions frontend/src/views/projectLiveMonitoring.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,17 @@ import {
UnderpassFeatureStats,
UnderpassValidationStats,
} from '@hotosm/underpass-ui';
import { ProjectHeader } from '../components/projectDetail/header';

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';

const availableImageryOptions = [
{ label: 'OSM', value: 'osm' },
{ label: 'Bing', value: 'Bing' },
{ label: 'Mapbox Satellite', value: 'Mapbox' },
{ label: 'ESRI World Imagery', value: 'EsriWorldImagery' },
Expand Down Expand Up @@ -94,6 +97,7 @@ export function ProjectLiveMonitoring() {
const [mapConfig, setMapConfig] = useState(config);
const [realtimeList, setRealtimeList] = useState(false);
const [realtimeMap, setRealtimeMap] = useState(false);
// eslint-disable-next-line
const [status, setStatus] = useState(statusList.UNSQUARED);
// eslint-disable-next-line
const [area, setArea] = useState(null);
Expand All @@ -109,7 +113,7 @@ export function ProjectLiveMonitoring() {
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');
const hasCustomImagery = data.imagery?.includes('http');
if (hasCustomImagery) {
setMapConfig((prev) => ({
...prev,
Expand All @@ -131,7 +135,7 @@ export function ProjectLiveMonitoring() {
? 'custom'
: availableImageryValues.includes(data.imagery)
? data.imagery
: 'Bing';
: 'osm';
setMapSource(mapSourceValue);
}, [data]);

Expand Down Expand Up @@ -211,9 +215,6 @@ export function ProjectLiveMonitoring() {
className="pr3"
>
<div>
<div className="w-100 fl pv3 ph2 ph4-ns bg-white blue-dark">
<ProjectHeader project={project} showEditLink={true} />
</div>
<div className="flex p-2">
<div style={{ flex: 2 }}>
<div className="top">
Expand All @@ -240,7 +241,7 @@ export function ProjectLiveMonitoring() {
options={imageryOptions}
// placeholder={<FormattedMessage {...messages.selectImagery} />}
onChange={handleMapSourceSelect}
className="w-50 z-2"
className="w-60 z-2 mt-2"
/>
</div>
<UnderpassMap
Expand All @@ -262,12 +263,33 @@ export function ProjectLiveMonitoring() {
<div
style={{
flex: 1,
padding: 10,
padding: 5,
display: 'flex',
flexDirection: 'column',
backgroundColor: `rgb(${hottheme.colors.white})`,
}}
>
{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>
</div>
)}
<div className="border-b-2 pb-5 space-y-3">
<UnderpassFeatureStats
tags={tags}
Expand Down Expand Up @@ -304,80 +326,6 @@ export function ProjectLiveMonitoring() {
/>
<label target="liveMapCheckbox">Live map</label>
</form>
<form className="space-x-2 py-4">
<input
checked={status === statusList.ALL}
onChange={() => {
setStatus(statusList.ALL);
}}
name="allCheckbox"
id="allCheckbox"
type="radio"
/>
<label htmlFor="allCheckbox">All</label>
<input
checked={status === statusList.UNSQUARED}
onChange={() => {
setStatus(statusList.UNSQUARED);
}}
name="geospatialCheckbox"
id="geospatialCheckbox"
type="radio"
/>
<label htmlFor="geospatialCheckbox">Geospatial</label>
<input
checked={status === statusList.BADVALUE}
onChange={() => {
setStatus(statusList.BADVALUE);
}}
name="semanticCheckbox"
id="semanticCheckbox"
type="radio"
/>
<label htmlFor="semanticCheckbox">Semantic</label>
</form>
<form className="space-x-2">
<input
checked={featureType === 'all'}
onChange={() => {
setFeatureType('all');
}}
name="featureTypeAllCheckbox"
id="featureTypeAllCheckbox"
type="radio"
/>
<label htmlFor="featureTypeAllCheckbox">All</label>
<input
checked={featureType === 'polygon'}
onChange={() => {
setFeatureType('polygon');
}}
name="featureTypePolygonCheckbox"
id="featureTypePolygonCheckbox"
type="radio"
/>
<label htmlFor="featureTypePolygonCheckbox">Polygon</label>
<input
checked={featureType === 'line'}
onChange={() => {
setFeatureType('line');
}}
name="featureTypeLineCheckbox"
id="featureTypeLineCheckbox"
type="radio"
/>
<label htmlFor="featureTypeLineCheckbox">Line</label>
<input
checked={featureType === 'node'}
onChange={() => {
setFeatureType('node');
}}
name="featureTypeNodeCheckbox"
id="featureTypeNodeCheckbox"
type="radio"
/>
<label htmlFor="featureTypeNodeCheckbox">Node</label>
</form>
</div>
<UnderpassFeatureList
style={{
Expand Down

0 comments on commit 870fac8

Please sign in to comment.