-
-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat (projectDetails): map - for small screen, full screen map visible(only map visible) * feat (projectDetails): map - footer added to the map * fix (MobileFooter) - border top added * feat (bottomSheet): bottomSheet component made for mobile device * feat (projectDetails): activities - bottomSheet made for activities * feat (projectDetails): project info - added bottom sheet for project information for small screen * feat (projectDetails) - fmtm logo and back button added for small screen * fix (Accordion): interface added to props * feat/fix (projectDetails): projectDetails component projectOption section splitted to projectOption component. projectOptions added for others bottomSheet * fix (projectDetails): bottomSheet - converted css to tailwind css, converted dom manipulation to react states * fix (projectDetails): map - mapcontrols button gap reduced for small screens * fix (bottomSheet): fmtm logo move bottom sheet expand/contract * fix (projectDetails): margins/paddings updated for mobile view * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
- Loading branch information
1 parent
ba9c2e5
commit d14062a
Showing
15 changed files
with
640 additions
and
257 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import React from 'react'; | ||
| import ActivitiesPanel from '../ActivitiesPanel'; | ||
| import CoreModules from '../../shared/CoreModules'; | ||
|
|
||
| const MobileActivitiesContents = ({ map, mainView, mapDivPostion }) => { | ||
| const params = CoreModules.useParams(); | ||
| const state = CoreModules.useAppSelector((state) => state.project); | ||
| const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme); | ||
|
|
||
| return ( | ||
| <div className="fmtm-w-full fmtm-bg-white fmtm-mb-[10vh]"> | ||
| <CoreModules.Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}> | ||
| <ActivitiesPanel | ||
| params={params} | ||
| state={state.projectTaskBoundries} | ||
| defaultTheme={defaultTheme} | ||
| map={map} | ||
| view={mainView} | ||
| mapDivPostion={mapDivPostion} | ||
| states={state} | ||
| /> | ||
| </CoreModules.Stack> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MobileActivitiesContents; |
91 changes: 91 additions & 0 deletions
91
src/frontend/src/components/ProjectDetails/MobileFooter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import React from 'react'; | ||
| import AssetModules from '../../shared/AssetModules.js'; | ||
| import CoreModules from '../../shared/CoreModules'; | ||
| import { ProjectActions } from '../../store/slices/ProjectSlice'; | ||
|
|
||
| const MobileFooter = () => { | ||
| const dispatch = CoreModules.useAppDispatch(); | ||
| const mobileFooterSelection = CoreModules.useAppSelector((state) => state.project.mobileFooterSelection); | ||
|
|
||
| console.log(mobileFooterSelection, 'mobileFooterSelection'); | ||
|
|
||
| const footerItem = [ | ||
| { | ||
| id: 'explore', | ||
| title: 'Explore', | ||
| icon: ( | ||
| <AssetModules.LocationOnIcon | ||
| className={`${ | ||
| mobileFooterSelection === 'explore' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500' | ||
| } fmtm-duration-300`} | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| id: 'projectInfo', | ||
| title: 'Project Info', | ||
| icon: ( | ||
| <AssetModules.InfoIcon | ||
| className={`${ | ||
| mobileFooterSelection === 'projectInfo' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500' | ||
| } fmtm-duration-300`} | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| id: 'activities', | ||
| title: 'Activities', | ||
| icon: ( | ||
| <AssetModules.TaskIcon | ||
| className={`${ | ||
| mobileFooterSelection === 'activities' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500' | ||
| } fmtm-duration-300`} | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| id: 'others', | ||
| title: 'Others', | ||
| icon: ( | ||
| <AssetModules.MoreVertIcon | ||
| className={`${ | ||
| mobileFooterSelection === 'others' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500' | ||
| } fmtm-duration-300`} | ||
| /> | ||
| ), | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full fmtm-border-t-[1px]"> | ||
| <div className="fmtm-w-full fmtm-grid fmtm-grid-cols-4 fmtm-bg-white fmtm-pb-4 fmtm-pt-2 fmtm-gap-5 fmtm-px-2"> | ||
| {footerItem.map((item) => ( | ||
| <div | ||
| key={item.id} | ||
| onClick={() => dispatch(ProjectActions.SetMobileFooterSelection(item.id))} | ||
| className="fmtm-group fmtm-cursor-pointer" | ||
| > | ||
| <div | ||
| className={`fmtm-w-full fmtm-flex fmtm-justify-center fmtm-py-1 fmtm-rounded-3xl fmtm-mb-1 fmtm-duration-300 ${ | ||
| mobileFooterSelection === item.id ? 'fmtm-bg-red-100' : 'group-hover:fmtm-bg-gray-200' | ||
| }`} | ||
| > | ||
| <div>{item.icon}</div> | ||
| </div> | ||
| <div className="fmtm-flex fmtm-justify-center"> | ||
| <p | ||
| className={`${ | ||
| mobileFooterSelection === item.id ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500' | ||
| } fmtm-duration-300 fmtm-text-sm`} | ||
| > | ||
| {item.title} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MobileFooter; |
31 changes: 31 additions & 0 deletions
31
src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import React from 'react'; | ||
| import AssetModules from '../../shared/AssetModules'; | ||
|
|
||
| const MobileProjectInfoContent = ({ projectInfo }) => { | ||
| console.log('projectInfo', projectInfo); | ||
| return ( | ||
| <div className="fmtm-flex fmtm-flex-col fmtm-gap-3 fmtm-mb-[10vh]"> | ||
| <div className="fmtm-flex fmtm-gap-3 fmtm-border-b-[1px] fmtm-pb-2"> | ||
| <AssetModules.InfoIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '35px' }} /> | ||
| <p className="fmtm-text-2xl">Project Information</p> | ||
| </div> | ||
| <div className="fmtm-flex fmtm-gap-3"> | ||
| <p className="fmtm-text-2xl fmtm-text-primaryRed">#{projectInfo?.id}</p> | ||
| </div> | ||
| <div className="fmtm-flex fmtm-gap-3"> | ||
| <p className="fmtm-text-xl">Name: </p> | ||
| <p className="fmtm-text-xl">{projectInfo?.title}</p> | ||
| </div> | ||
| <div className="fmtm-flex fmtm-flex-col"> | ||
| <p className="fmtm-text-xl">Short Description:</p> | ||
| <p className="fmtm-text-lg fmtm-text-grey-700">{projectInfo?.short_description}</p> | ||
| </div> | ||
| <div className="fmtm-flex fmtm-flex-col"> | ||
| <p className="fmtm-text-xl">Description:</p> | ||
| <p className="fmtm-text-lg fmtm-text-grey-700">{projectInfo?.description}</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MobileProjectInfoContent; |
161 changes: 161 additions & 0 deletions
161
src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| import Accordion from '../../components/common/Accordion'; | ||
| import React, { useState } from 'react'; | ||
| import CoreModules from '../../shared/CoreModules'; | ||
| import AssetModules from '../../shared/AssetModules'; | ||
| import environment from '../../environment'; | ||
| import { DownloadDataExtract, DownloadProjectForm } from '../../api/Project'; | ||
| import MapLegends from '../../components/MapLegends'; | ||
|
|
||
| const ProjectOptions = ({ setToggleGenerateModal }) => { | ||
| const dispatch = CoreModules.useAppDispatch(); | ||
| const params = CoreModules.useParams(); | ||
|
|
||
| const [toggleAction, setToggleAction] = useState(false); | ||
| const downloadProjectFormLoading = CoreModules.useAppSelector((state) => state.project.downloadProjectFormLoading); | ||
| const downloadDataExtractLoading = CoreModules.useAppSelector((state) => state.project.downloadDataExtractLoading); | ||
| const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme); | ||
|
|
||
| const encodedId = params.id; | ||
| const decodedId = environment.decode(encodedId); | ||
|
|
||
| const handleDownload = (downloadType) => { | ||
| if (downloadType === 'form') { | ||
| dispatch( | ||
| DownloadProjectForm(`${import.meta.env.VITE_API_URL}/projects/download_form/${decodedId}/`, downloadType), | ||
| ); | ||
| } else if (downloadType === 'geojson') { | ||
| dispatch( | ||
| DownloadProjectForm(`${import.meta.env.VITE_API_URL}/projects/${decodedId}/download_tasks`, downloadType), | ||
| ); | ||
| } | ||
| }; | ||
| const onDataExtractDownload = () => { | ||
| dispatch( | ||
| DownloadDataExtract(`${import.meta.env.VITE_API_URL}/projects/features/download/?project_id=${decodedId}`), | ||
| ); | ||
| }; | ||
| return ( | ||
| <div className="fmtm-mt-4"> | ||
| <div> | ||
| <div | ||
| className={`fmtm-flex fmtm-gap-5 fmtm-py-4 sm:fmtm-hidden fmtm-justify-between fmtm-items-center fmtm-mx-4 sm:fmtm-mx-7 fmtm-mb-2 ${ | ||
| toggleAction ? 'fmtm-border-b-[#929DB3] fmtm-border-b-[1px]' : '' | ||
| }`} | ||
| > | ||
| <p className="fmtm-text-xl fmtm-italic">Project Options</p> | ||
| <div | ||
| className={ | ||
| 'fmtm-rounded-full fmtm-shadow-gray-400 fmtm-w-8 fmtm-h-8 fmtm-flex fmtm-justify-center fmtm-items-center fmtm-shadow-lg fmtm-cursor-pointer' | ||
| } | ||
| onClick={() => setToggleAction(!toggleAction)} | ||
| > | ||
| <AssetModules.ArrowRightIcon | ||
| color="" | ||
| style={{ fontSize: 32 }} | ||
| className={`${toggleAction ? 'fmtm-rotate-90' : ''}`} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div | ||
| className={`fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-6 lg:fmtm-gap-0 fmtm-px-3 sm:fmtm-px-0 ${ | ||
| toggleAction ? '' : 'fmtm-hidden sm:fmtm-flex' | ||
| }`} | ||
| > | ||
| <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6 fmtm-ml-2 sm:fmtm-ml-4"> | ||
| <CoreModules.LoadingButton | ||
| onClick={() => handleDownload('form')} | ||
| sx={{ width: 'unset' }} | ||
| loading={downloadProjectFormLoading.type === 'form' && downloadProjectFormLoading.loading} | ||
| loadingPosition="end" | ||
| endIcon={<AssetModules.FileDownloadIcon />} | ||
| variant="contained" | ||
| color="error" | ||
| > | ||
| Form | ||
| </CoreModules.LoadingButton> | ||
| <CoreModules.LoadingButton | ||
| onClick={() => handleDownload('geojson')} | ||
| sx={{ width: 'unset' }} | ||
| loading={downloadProjectFormLoading.type === 'geojson' && downloadProjectFormLoading.loading} | ||
| loadingPosition="end" | ||
| endIcon={<AssetModules.FileDownloadIcon />} | ||
| variant="contained" | ||
| color="error" | ||
| > | ||
| Tasks | ||
| </CoreModules.LoadingButton> | ||
| <CoreModules.LoadingButton | ||
| onClick={() => onDataExtractDownload()} | ||
| sx={{ width: 'unset' }} | ||
| loading={downloadDataExtractLoading} | ||
| loadingPosition="end" | ||
| endIcon={<AssetModules.FileDownloadIcon />} | ||
| variant="contained" | ||
| color="error" | ||
| className="fmtm-truncate" | ||
| > | ||
| Data Extract | ||
| </CoreModules.LoadingButton> | ||
| </div> | ||
| <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full fmtm-ml-2 sm:fmtm-ml-4 fmtm-gap-6"> | ||
| <CoreModules.Link | ||
| to={`/projectInfo/${encodedId}`} | ||
| style={{ | ||
| display: 'flex', | ||
| justifyContent: 'flex-end', | ||
| alignItems: 'flex-end', | ||
| textDecoration: 'none', | ||
| marginRight: '15px', | ||
| }} | ||
| className="fmtm-w-fit" | ||
| > | ||
| <CoreModules.Button variant="contained" color="error"> | ||
| ProjectInfo | ||
| </CoreModules.Button> | ||
| </CoreModules.Link> | ||
| <CoreModules.Button | ||
| onClick={() => setToggleGenerateModal(true)} | ||
| variant="contained" | ||
| color="error" | ||
| sx={{ width: '200px', mr: '15px' }} | ||
| endIcon={<AssetModules.BoltIcon />} | ||
| className="fmtm-truncate" | ||
| > | ||
| Generate MbTiles | ||
| </CoreModules.Button> | ||
| <CoreModules.Link | ||
| to={`/edit-project/project-details/${encodedId}`} | ||
| style={{ | ||
| display: 'flex', | ||
| justifyContent: 'flex-end', | ||
| alignItems: 'flex-end', | ||
| textDecoration: 'none', | ||
| marginRight: '15px', | ||
| }} | ||
| className="fmtm-w-fit" | ||
| > | ||
| <CoreModules.Button variant="outlined" color="error" className="fmtm-truncate"> | ||
| Edit Project | ||
| </CoreModules.Button> | ||
| </CoreModules.Link> | ||
| </div> | ||
| <div className="fmtm-px-1 sm:fmtm-hidden"> | ||
| <Accordion | ||
| collapsed={true} | ||
| disableHeaderClickToggle | ||
| onToggle={() => {}} | ||
| header={<div className="fmtm-text-[#2C3038] fmtm-font-bold fmtm-text-xl">Map Legends</div>} | ||
| body={ | ||
| <div className="fmtm-mt-4"> | ||
| <MapLegends defaultTheme={defaultTheme} /> | ||
| </div> | ||
| } | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ProjectOptions; |
Oops, something went wrong.