Skip to content

Commit

Permalink
Feat mobile UI project details (#874)
Browse files Browse the repository at this point in the history 
* fix (create new project): create new project url updated

* fix (create new project): upload area - select a file issue solved

* fix (create new project): data extract - select a file issue solved

* fix (radiobutton): option selection on label click, UI fix

* fix (create new project): initial values for project details form added

* feat (select): custom select component added

* fix (create new project): data extract - shadcn select replaced with customselect

* fix (custom select): updated props

* fix (create new project): project detials - shadcn select replaced with customselect

* fix (select): shadcn components export removed

* fix (create new project): select form - shadcn select replaced with customselect

* fix: style fixes on input field

* fix radiobutton):  - value prop added

* fix (create new project): upload area - value prop added to radiobutton, map added

* fix (create new project): event cleanup added

* fix (create new project): geojson file cleanup added

* fix (create new project): upload area - drawgeojson added, geojson file clear when option changed

* Feat create new project (#844)

* fix (create new project): create new project url updated

* fix (create new project): upload area - select a file issue solved

* fix (create new project): data extract - select a file issue solved

* fix (radiobutton): option selection on label click, UI fix

* fix (create new project): initial values for project details form added

* feat (select): custom select component added

* fix (create new project): data extract - shadcn select replaced with customselect

* fix (custom select): updated props

* fix (create new project): project detials - shadcn select replaced with customselect

* fix (select): shadcn components export removed

* fix (create new project): select form - shadcn select replaced with customselect

* fix radiobutton):  - value prop added

* fix (create new project): upload area - value prop added to radiobutton, map added

* fix (create new project): event cleanup added

* fix (create project): uploadArea/dataExtract - reset and select same file issue solved

* feat(select): added responsive

* feat(validation) : added validation file on new create project

* feat(data-extract): data extract useform integration

* fix(dataextract): removed formcategory actions

* feat (create project): upload area - total area calculation on upload area drawn

* feat: changed step from data extract to select form

* feat: changes on steps of create project

* feat(File Input): file input component addition

* feat(component) : used component for fileinput

* feat/fix (create new project): split tasks - radiobutton state changed with redux state, useForm setup

* fix (create new project): merge conflict solved

* fix (Accordion): custom accordion added

* fix (project details): project options accordion added for small screen

* fix (project detials): map full screen for small screen on project details section

* feat (project details): map legends accordion added for small screen

* fix (project details): map legend lock icon size fixed

* feat (modal): shadcn modal integrated

* feat (project details): map tasks popup replaced with modal

* feat (project details): tasks section modal replaced with tasks section popup

* feat (project details): map scroll in view added when map clicked

* fix (project details): medium device task popup border rounded fixed

* fix (project details): map legend hidden for small screens

* fix (project details): map section - task section visible on task map click from small and large screen

* fix (project-details): project area layer view on grid icon click

* fix (project-details): map button icons replaced and made center

* fix (project-details): current location marker toggle on map on location button click

* fix (project-details): description on dropdown not shown issue solved

* fix (project info): mobile responsive design

---------

Co-authored-by: Varun <deepak.pradhan048@gmail.com>
  • Loading branch information
@NSUWAL123 @varun2948
NSUWAL123 and varun2948 authored Oct 5, 2023
1 parent bf94635 commit cfdbf37
Show file tree
Hide file tree
Showing 12 changed files with 171 additions and 141 deletions.
2 changes: 1 addition & 1 deletion src/frontend/src/api/Project.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const ProjectById = (url, existingProjectList, projectId) => {
priority_str: resp.priority_str || 'MEDIUM',
title: resp.project_info?.[0]?.name,
location_str: resp.location_str,
description: resp.description,
description: resp.project_info[0]?.description,
num_contributors: resp.num_contributors,
total_tasks: resp.total_tasks,
tasks_mapped: resp.tasks_mapped,
Expand Down
Binary file modified src/frontend/src/assets/images/grid.png
100755 → 100644
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/frontend/src/assets/images/location.png
100755 → 100644
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
94 changes: 63 additions & 31 deletions src/frontend/src/components/OpenLayersMap.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { Modal } from '../components/common/Modal';
import Button from './common/Button';
import { ProjectActions } from '../store/slices/ProjectSlice';
import TaskSectionModal from './ProjectDetails/TaskSectionPopup';
import VectorLayer from 'ol/layer/Vector';
let currentLocationLayer = null;
const OpenLayersMap = ({
defaultTheme,
Expand Down Expand Up @@ -56,6 +57,7 @@ const OpenLayersMap = ({
let actualZoom = map.getView().getZoom();
map.getView().setZoom(actualZoom - 1);
} else if (e.target.id == 'defaultPosition') {
setToggleCurrentLoc(!toggleCurrentLoc);
const sourceProjection = 'EPSG:4326'; // The current projection of the coordinates
const targetProjection = 'EPSG:3857'; // The desired projection
// Create a style for the marker
Expand All @@ -67,41 +69,59 @@ const OpenLayersMap = ({
}),
});
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
const convertedCoordinates = transform([lng, lat], sourceProjection, targetProjection);
const positionFeature = new ol.Feature(new Point(convertedCoordinates));
const positionLayer = new Vector({
source: new VectorSource({
features: [positionFeature],
}),
if (!toggleCurrentLoc) {
navigator.geolocation.getCurrentPosition((position) => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
const convertedCoordinates = transform([lng, lat], sourceProjection, targetProjection);
const positionFeature = new ol.Feature(new Point(convertedCoordinates));
const positionLayer = new Vector({
source: new VectorSource({
features: [positionFeature],
}),
});
positionFeature.setStyle(markerStyle);
setCurrentLocLayer(positionLayer);
});
positionFeature.setStyle(markerStyle);
setCurrentLocLayer(positionLayer);
});
} else {
setCurrentLocLayer(null);
}
}
setToggleCurrentLoc(!toggleCurrentLoc);
// setToggleCurrentLoc(!toggleCurrentLoc);

// map.getView().setZoom(15);
} else if (e.target.id == 'taskBoundries') {
if (state.projectTaskBoundries.length != 0 && map != undefined) {
if (state.projectTaskBoundries.findIndex((project) => project.id == environment.decode(params.id)) != -1) {
const index = state.projectTaskBoundries.findIndex(
(project) => project.id == environment.decode(params.id),
);
const centroid =
state.projectTaskBoundries[index].taskBoundries[
state.projectTaskBoundries[index].taskBoundries.length - 1
].outline_centroid.geometry.coordinates;

mainView.animate({
center: centroid,
duration: 2000,
easing: elastic,
});
const layers = map.getAllLayers();
let extent;
layers.map((layer) => {
if (layer instanceof VectorLayer) {
const layerName = layer.getProperties().name;
if (layerName === 'project-area') {
extent = layer.getSource().getExtent();
}
}
}
});
map.getView().fit(extent, {
padding: [10, 10, 10, 10],
});

// if (state.projectTaskBoundries.length != 0 && map != undefined) {
// if (state.projectTaskBoundries.findIndex((project) => project.id == environment.decode(params.id)) != -1) {
// const index = state.projectTaskBoundries.findIndex(
// (project) => project.id == environment.decode(params.id),
// );
// const centroid =
// state.projectTaskBoundries[index].taskBoundries[
// state.projectTaskBoundries[index].taskBoundries.length - 1
// ].outline_centroid.geometry.coordinates;

// mainView.animate({
// center: centroid,
// duration: 2000,
// easing: elastic,
// });
// }
// }

map.getTargetElement().classList.remove('spinner');
}
Expand All @@ -123,15 +143,27 @@ const OpenLayersMap = ({
img.id = `${elmnt}`;
img.addEventListener('click', handleOnClick, false);
btn.appendChild(img);
btn.style.display = 'flex';
btn.style.alignItems = 'center';
btn.style.justifyContent = 'center';

if (!toggleCurrentLoc) {
btn.style.backgroundColor = 'white';
} else {
btn.style.backgroundColor = '#E6E6E6';
}
} else if (elmnt == 'taskBoundries') {
let img = document.createElement('img');
img.src = gridIcon;
img.id = `${elmnt}`;
img.addEventListener('click', handleOnClick, false);
btn.appendChild(img);
btn.style.display = 'flex';
btn.style.alignItems = 'center';
btn.style.justifyContent = 'center';
}
btn.id = `${elmnt}`;
btn.style.backgroundColor = 'white';
// btn.style.backgroundColor = 'white';
btn.style.boxShadow = `0 2px 2px 0 ${defaultTheme.palette.info['main']}`;
btn.style.width = '40px';
btn.style.height = '40px';
Expand Down Expand Up @@ -274,7 +306,7 @@ const OpenLayersMap = ({

map.addControl(controlx);
}
}, [map]);
}, [map, toggleCurrentLoc]);

useEffect(() => {
if (!map) return;
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/components/ProjectDetails/TaskSectionPopup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const TaskSectionPopup = ({ body }) => {
>
<AssetModules.CloseIcon />
</div>
<div className="fmtm-bg-[#fbfbfb] fmtm-p-5 fmtm-rounded-t-2xl fmtm-shadow-[-20px_0px_60px_25px_rgba(0,0,0,0.2)] md:fmtm-rounded-t-none md:fmtm-rounded-l-2xl fmtm-duration-1000">
<div className="fmtm-bg-[#fbfbfb] fmtm-p-5 fmtm-rounded-t-2xl fmtm-shadow-[-20px_0px_60px_25px_rgba(0,0,0,0.2)] md:fmtm-rounded-tr-none md:fmtm-rounded-l-2xl">
{body}
</div>
</div>
Expand Down
75 changes: 27 additions & 48 deletions src/frontend/src/components/ProjectInfo/ProjectInfoCountCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,69 +11,48 @@ const ProjectInfoCountCard = () => {
{
count: taskData.task_count,
title: 'Total Tasks',
icon: <AssetModules.TaskIcon sx={{ color: '#d73f3e', fontSize: '50px' }} />,
icon: <AssetModules.TaskIcon sx={{ color: '#d73f3e', fontSize: { xs: '35px', xl: '50px' } }} />,
},
{
count: taskData.submission_count,
title: 'Total Submissions',
icon: <AssetModules.SubmissionIcon sx={{ color: '#d73f3e', fontSize: '50px' }} />,
icon: <AssetModules.SubmissionIcon sx={{ color: '#d73f3e', fontSize: { xs: '35px', xl: '50px' } }} />,
},
{
count: taskData.feature_count,
title: 'Total Features',
icon: <AssetModules.FeatureIcon sx={{ color: '#d73f3e', fontSize: '50px' }} />,
icon: <AssetModules.FeatureIcon sx={{ color: '#d73f3e', fontSize: { xs: '35px', xl: '50px' } }} />,
},
];
return (
<CoreModules.Box>
<div>
{isTaskLoading ? (
<ProjectInfoCountSkeleton />
) : (
<div
style={{
display: 'grid',
gridTemplateColumns: 'auto auto auto',
gap: '20px',
}}
>
{totalTaskInfoCount.map((taskInfo) => (
<div>
<CoreModules.Card>
<div
<div className="scrollbar fmtm-overflow-x-scroll sm:fmtm-overflow-x-hidden">
{isTaskLoading ? (
<ProjectInfoCountSkeleton />
) : (
<div className="fmtm-flex fmtm-gap-5 fmtm-w-full fmtm-p-[2px]">
{totalTaskInfoCount.map((taskInfo, i) => (
<div key={i}>
<CoreModules.Card>
<div className="fmtm-w-fit xl:fmtm-gap-0 fmtm-p-4 xl:fmtm-min-w-[15.62rem]">
<h1
style={{
gap: '0px',
padding: '15px',
minWidth: '250px',
color: '#d73f3e',
margin: '0px',
}}
>
<h1
style={{
color: '#d73f3e',
margin: '0px',
}}
>
{taskInfo.count}
</h1>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
lineHeight: '15px',
}}
>
<p style={{ fontSize: '20px' }}>{taskInfo.title}</p>
{taskInfo.icon}
</div>
{taskInfo.count}
</h1>
<div className="fmtm-flex fmtm-items-center fmtm-justify-between fmtm-leading-4 fmtm-gap-4">
<p className="fmtm-text-lg xl:fmtm-text-xl">{taskInfo.title}</p>
{taskInfo.icon}
</div>
</CoreModules.Card>
</div>
))}
</div>
)}
</div>
</CoreModules.Box>
</div>
</CoreModules.Card>
</div>
))}
</div>
)}
</div>
);
};

Expand Down
70 changes: 29 additions & 41 deletions src/frontend/src/components/ProjectInfo/ProjectInfoSidebar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,32 +35,17 @@ const ProjectInfoSidebar = ({ projectId, taskInfo }) => {
sx={{
display: 'flex',
flexDirection: 'column',
background: '#F0F0F0',
width: '60%',
background: 'white',
width: '100%',
gap: 2,
}}
className="fmtm-mb-5"
>
<CoreModules.Card
sx={{
width: '100%',
height: '80vh',
p: 1,
overflow: 'hidden',
overflowY: 'auto',
'&::-webkit-scrollbar': {
width: '0.6em',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'rgba(0,0,0,.1)',
outline: '1px solid #F0F0F0',
borderRadius: '25px',
},
}}
>
<div className="fmtm-w-full md:fmtm-h-[80vh] fmtm-p-1 fmtm-overflow-x-hidden fmtm-overflow-y-scroll scrollbar fmtm-bg-white fmtm-border-[1px] fmtm-border-gray-200 fmtm-shadow-sm fmtm-rounded-md">
{isTaskLoading ? (
<div>
{Array.from({ length: 5 }).map((i) => (
<div id={i}>
<div id={i} key={i}>
<ProjectInfoSidebarSkeleton />
</div>
))}
Expand All @@ -76,38 +61,41 @@ const ProjectInfoSidebar = ({ projectId, taskInfo }) => {
}}
onClick={() => onTaskClick(+task.task_id)}
>
<CoreModules.Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
<CoreModules.Box className="fmtm-flex fmtm-justify-between">
<CoreModules.Box sx={{ flex: 1 }}>
<CoreModules.Typography variant="h1" color="#929db3">
#{task.task_id}
</CoreModules.Typography>
</CoreModules.Box>
<CoreModules.Link
to={`/project/${encodedId}/tasks/${environment.encode(task.task_id)}`}
style={{
display: 'flex',
justifyContent: 'flex-end',
textDecoration: 'none',
marginRight: '5px',
}}
>
<div className="fmtm-flex fmtm-gap-2 fmtm-items-end fmtm-flex-col sm:fmtm-flex-row md:fmtm-flex-col lg:fmtm-flex-row">
<CoreModules.Link
to={`/project/${encodedId}/tasks/${environment.encode(task.task_id)}`}
style={{
display: 'flex',
justifyContent: 'flex-end',
textDecoration: 'none',
}}
>
<CoreModules.Button
variant="outlined"
color="error"
sx={{ width: 'fit-content', height: 'fit-content' }}
size="small"
className="fmtm-truncate"
>
Go To Task Submissions
</CoreModules.Button>
</CoreModules.Link>
<CoreModules.Button
variant="outlined"
color="error"
sx={{ width: 'fit-content', height: 'fit-content' }}
size="small"
className="fmtm-truncate"
>
Go To Task Submissions
Zoom to Task
</CoreModules.Button>
</CoreModules.Link>
<CoreModules.Button
variant="outlined"
color="error"
sx={{ width: 'fit-content', height: 'fit-content' }}
size="small"
>
Zoom to Task
</CoreModules.Button>
</div>
</CoreModules.Box>
<CoreModules.LoadingBar
title="Task Progress"
Expand All @@ -118,7 +106,7 @@ const ProjectInfoSidebar = ({ projectId, taskInfo }) => {
))}
</div>
)}
</CoreModules.Card>
</div>
{/* <CoreModules.Card
sx={{
width: "100%",
Expand Down
4 changes: 2 additions & 2 deletions src/frontend/src/components/ProjectInfo/ProjectInfomap.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,13 +239,13 @@ const ProjectInfomap = () => {
flexDirection: 'column',
width: '100%',
gap: 2,
height: '70vh',
}}
className="fmtm-h-[35vh] md:fmtm-h-[70vh]"
>
<MapComponent
ref={mapRef}
mapInstance={map}
className="map naxatw-relative naxatw-min-h-full naxatw-w-full"
className="map"
style={{
height: '100%',
width: '100%',
Expand Down
2 changes: 2 additions & 0 deletions src/frontend/src/components/TasksLayer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ const TasksLayer = (map, view, feature) => {
style: styleFunction,
zIndex: 10,
});
vectorLayer.setProperties({ name: 'project-area' });

// Initialize variables to store the extent
var minX = Infinity;
var minY = Infinity;
Expand Down
Loading

0 comments on commit cfdbf37

Please sign in to comment.