**Q:** Do I need to create an account to use the FMTM Web App? @@ -14,6 +15,7 @@ humanitarian organizations. **A:** No, you can use the FMTM Web App without creating an account, but creating an account allows you to contribute to mapping projects and access additional features. +
**Q:** How do I browse and select mapping projects on the FMTM Web App? @@ -22,6 +24,7 @@ access additional features. clicking on the "Projects" tab and selecting a project of interest. You can view project details, tasks, and mapping data on the project page. +
**Q:** How do I contribute to a mapping project on the FMTM Web App? @@ -30,6 +33,7 @@ project page. create an account, select a project of interest, and choose a task to work on. You can then use the mapping tools provided to complete the task. +
**Q:** Can I work on multiple mapping tasks at the same time on the FMTM Web App? @@ -37,6 +41,7 @@ task. **A:** Yes, you can work on multiple mapping tasks at the same time on the FMTM Web App, as long as you can commit the necessary time and effort to each task. +
**Q:** How do I know if my mapping work on the FMTM Web App is accurate? @@ -44,6 +49,7 @@ to each task. **A:** The FMTM Web App has a validation process where other contributors review and validate the mapping work. This helps to ensure the accuracy of the mapping data. +
**Q:** Can I provide feedback on a mapping project on the FMTM Web App? @@ -51,6 +57,7 @@ accuracy of the mapping data. **A:** Yes, you can provide feedback on a mapping project on the FMTM Web App by leaving a comment on the project page or contacting the project manager. +
**Q:** How do I download mapping data from a project on the FMTM Web App? @@ -58,6 +65,7 @@ manager. **A:** To download mapping data from a project on the FMTM Web App, you can select the project of interest and click on the "Export" button on the project page. +
**Q:** Can I use the mapping data from the FMTM Web App for my own research or projects? @@ -66,6 +74,7 @@ the project page. available for use, but it is important to check the specific project requirements and licenses before using the data for your own research or projects. +
### For Contributors @@ -75,12 +84,14 @@ or projects. **A:** The Field Mapping Tasking Manager (FMTM) is an online platform that allows contributors to participate in mapping projects related to humanitarian and development work. +
**Q:** How can I become a contributor to the FMTM? **A:** To become a contributor to the FMTM, you can create an account on the platform and join a mapping project. +
**Q:** Who can contribute to FMTM? @@ -88,6 +99,7 @@ the platform and join a mapping project. **A:** Anyone can contribute to FMTM. It is an open-source project, and contributions from developers, designers, and other contributors are always welcome. +
**Q:** What kind of contributions can I make to FMTM? @@ -113,6 +125,7 @@ improvements. Translation: If you are fluent in a language other than English, you can contribute by translating the application or its documentation into your language. +
**Q:** What technologies are used in FMTM? @@ -120,6 +133,7 @@ into your language. **A:** FMTM is built using several technologies, including Django, Postgres, Redis, Celery, and Vue.js. The codebase is written in Python, HTML, CSS, and JavaScript. +
**Q:** How do I set up FMTM locally? @@ -127,6 +141,7 @@ Python, HTML, CSS, and JavaScript. **A:** To set up FMTM locally, you need to have Python, Postgres, Redis, and Node.js installed on your system. You can follow the instructions in the README file of the FMTM repository to set up the project. +
**Q:** How can I report a bug or suggest a new feature for FMTM? @@ -135,6 +150,7 @@ in the README file of the FMTM repository to set up the project. the FMTM repository on GitHub. Be sure to provide as much detail as possible, including steps to reproduce the bug, screenshots, or mockups for new features. +
**Q:** How can I contribute to FMTM if I'm new to open source or web development? @@ -146,6 +162,7 @@ documentation, asking questions in the community, and contributing to issues labeled as "good first issue." Additionally, you can join the FMTM community on Slack to connect with other contributors and get help with your contributions. +
**Q:** What are the benefits of contributing to the FMTM? @@ -153,6 +170,7 @@ help with your contributions. **A:** Contributing to the FMTM allows you to help with important humanitarian and development work, while also developing your mapping skills and knowledge. +
**Q:** Do I need to have prior mapping experience to contribute to the FMTM? @@ -160,6 +178,7 @@ skills and knowledge. **A:** No, prior mapping experience is not required to contribute to the FMTM. The platform provides training and resources to help new contributors get started. +
**Q:** How do I know which mapping project to join? @@ -168,6 +187,7 @@ contributors get started. location, the organization sponsoring the project, and the mapping goals. Review the project information and choose a project that interests you. +
**Q:** Can I work on multiple mapping projects at the same time? @@ -175,6 +195,7 @@ interests you. **A:** Yes, you can work on multiple mapping projects at the same time. However, it is important to ensure that you can commit the necessary time and effort to each project. +
**Q:** How do I get feedback on my mapping work? @@ -182,6 +203,7 @@ necessary time and effort to each project. **A:** The FMTM provides a validation process where other contributors review and provide feedback on mapping work. You can also contact project managers or experienced contributors for additional feedback. +
**Q:** How can I improve my mapping skills? @@ -189,6 +211,7 @@ project managers or experienced contributors for additional feedback. **A:** The FMTM provides training and resources to help you improve your mapping skills. You can also join mapping communities and forums to connect with other contributors and learn from their experiences. +
**Q:** Can I use the mapping data for my own research or projects? @@ -196,8 +219,3 @@ connect with other contributors and learn from their experiences. **A:** The mapping data on the FMTM is generally open and available for use, but it is important to check the specific project requirements and licenses before using the data for your own research or projects. - - - - - diff --git a/docs/Guide-On-Improving-Documentation.md b/docs/Guide-On-Improving-Documentation.md index 185d1443c1..c228cf0bef 100644 --- a/docs/Guide-On-Improving-Documentation.md +++ b/docs/Guide-On-Improving-Documentation.md @@ -9,6 +9,7 @@ documentation needed by **HOTOSM**. It also includes specific tips for improving already existing documentation. ## Goals + 1. Highlight the definitions of each type of documentation that are commonly used on Github. 2. Provide a foundation to lay information on top of, in order to @@ -27,7 +28,7 @@ documentation may include some Process documentation under the Usage section, demonstrating how to use that product. These 4 types in full, are as follows: -- **Product Documentation** +- **Product Documentation** - **Project Documentation** - **System Documentation** - **Process Documentation** @@ -35,11 +36,12 @@ are as follows: ### 1. Structure for Product Documentation Product documentation is the process of recording key information -(almost everything you need to know) about a product, including how +(almost everything you need to know) about a product, including how to use it. Product documentation may have form of **Process documentation** within it (this will be further explained later on). A flexible and reusable structure of essential components of product documentation is as follows: + - Overview - Introduction: What the product is, what it does, the target audience, etc. - Features: A breakdown of each integral part of the product, their @@ -61,6 +63,7 @@ Project documentation is the process of recording the key project details that are needed to implement a project. It’s like a roadmap of what the project is and all necessary information about what it entails. Main structural components are in the following order: + - Overview - Vision - Aim / Mission @@ -71,7 +74,7 @@ entails. Main structural components are in the following order: - Access - Resources - Support / Guidelines - + ### 3. Structure for System Documentation System documentation is an all-encompassing record of details of a @@ -90,6 +93,7 @@ step. Process documentation is very useful in other documentation forms. As mentioned earlier, it can be used within **System**, **Product** or **Project** documentation, to explain a process. The format is usually: + - Overview - Introduction - Explanation steps (breakdown of the task) @@ -116,20 +120,20 @@ added to and built upon. documentation more user friendly and much easier to understand, since users come from all different backgrounds. For example: - “ODK incorporates a new functionality” can become “ODK has brought in a new feature”. + “ODK incorporates a new functionality” can become “ODK has brought in a new feature”. - “Field Mappers select (or are allocated) individual tasks within a - project’s AOI” could be changed to “Field Mappers choose or are - given tasks that are part of a project’s Areas Of Interest.” + “Field Mappers select (or are allocated) individual tasks within a + project’s AOI” could be changed to “Field Mappers choose or are + given tasks that are part of a project’s Areas Of Interest.” 4. **Avoid long paragraphs**. Short paragraphs that pass a clear - message are less clumsy and flustering for readers. Breaking down - topics into little, easy to understand chunks, is more user - friendly. + message are less clumsy and flustering for readers. Breaking down + topics into little, easy to understand chunks, is more user + friendly. 5. **Maintain a positive tone in the writing.**. Keep the text positive and informative. Avoid words like ‘obviously’ and - ‘basically’, that may be interpreted as demeaning or + ‘basically’, that may be interpreted as demeaning or condescending. Do not expect readers to have a certain amount of knowledge on specific aspects, break down everything that needs to be broken down. @@ -143,9 +147,9 @@ added to and built upon. documentation.This consistency includes but is not limited to elements like numbering, font styles, heading sizes, and spacing. - Using the same font for all headings and subheadings can help - readers quickly identify important sections of the - document. Similarly, using consistent spacing between paragraphs - and sections can make the document more visually appealing and - easier to follow. This helps to create a documentation that is - clear, effective, and easy to use. + Using the same font for all headings and subheadings can help + readers quickly identify important sections of the + document. Similarly, using consistent spacing between paragraphs + and sections can make the document more visually appealing and + easier to follow. This helps to create a documentation that is + clear, effective, and easy to use. diff --git a/docs/User-Manual-For-Project-Managers.md b/docs/User-Manual-For-Project-Managers.md index 5e91836ffa..4071ffd2ba 100644 --- a/docs/User-Manual-For-Project-Managers.md +++ b/docs/User-Manual-For-Project-Managers.md @@ -1,4 +1,5 @@ # User Manual for FMTM +
This manual is a step by step guide for the project managers on how to get started with the Field Mapping Tasking Manager. @@ -9,7 +10,7 @@ This manual is a step by step guide for the project managers on how to get start - [Steps to create a project in FMTM](#steps-to-create-a-project-in-fmtm) - [Steps to start access your project and Start mapping](#steps-to-start-access-your-project-and-start-mapping-or-a-mapping-campaign) - [Help and Support](#help-and-support) -- [Thank you note](#thank-you) +- [Thank you note](#thank-you) ## Introduction @@ -74,54 +75,35 @@ reliability of the data collected by volunteers, **FMTM** helps to provide critical information that can be used to support decision-making and improve the effectiveness of humanitarian efforts. - ## Prerequisites + - Stable Internet connection - Knowledge on field mapping . If you are new to mapping we suggest you to read [this](https://tasks.hotosm.org/learn/map) . - Account on ODK Central Server. [Here are the instructions for setting up an ODK Central server on Digital Ocean](https://docs.getodk.org/central-install-digital-ocean/) (it's very similar on AWS or whatever) ## Video Tutorial +
## Steps to start access your project and Start mapping or a mapping campaign @@ -174,29 +150,30 @@ Click on "Submit" to proceed.  3. If a task is already locked by another user, choose a different task that is available for mapping.If a task is already locked by another user, choose a different task that is available for mapping. - - The drop down icon beside **LEGEND** displays a color code. This - color code lets you know the status of each task on the map. - - **READY** means that task is available to be mapped - - **LOCKED FOR MAPPING** means that task is already being mapped by another volunteer and therefore unavailable for mapping - - **MAPPED** or **READY FOR VALIDATION** means that task has been completely mapped and ready to be validated. - - **LOCKED FOR VALIDATION** means that task has been mapped and being validated. - - **VALIDATED** means that task has successfully been validated and completely mapped with no errors - - **INVALIDATED** or **MORE MAPPING NEEDED** means that task did not pass the validation process and needs more mapping - - **BAD** means that task is not clear and cannot be mapped +- The drop down icon beside **LEGEND** displays a color code. This + color code lets you know the status of each task on the map. + + - **READY** means that task is available to be mapped + - **LOCKED FOR MAPPING** means that task is already being mapped by another volunteer and therefore unavailable for mapping + - **MAPPED** or **READY FOR VALIDATION** means that task has been completely mapped and ready to be validated. + - **LOCKED FOR VALIDATION** means that task has been mapped and being validated. + - **VALIDATED** means that task has successfully been validated and completely mapped with no errors + - **INVALIDATED** or **MORE MAPPING NEEDED** means that task did not pass the validation process and needs more mapping + - **BAD** means that task is not clear and cannot be mapped > Note: 'task' refers to each section of the map enclosed in the dotted > lines and each task has a corresponding number tag. -  - - To begin mapping, click on a task closest to you that has the color - code associated with **READY** and change it's status from **READY** - to **LOCKED FOR MAPPING**. Remember to take note of the number tag. - - Scroll to the bottom of the page. The **ACTIVITIES** tab shows the - tasks either **LOCKED FOR MAPPING**, **BAD** or **LOCKED FOR - VALIDATION**. You can search for tasks with the status mentioned - using the number tag associated with each task. + +- To begin mapping, click on a task closest to you that has the color + code associated with **READY** and change it's status from **READY** + to **LOCKED FOR MAPPING**. Remember to take note of the number tag. +- Scroll to the bottom of the page. The **ACTIVITIES** tab shows the + tasks either **LOCKED FOR MAPPING**, **BAD** or **LOCKED FOR + VALIDATION**. You can search for tasks with the status mentioned + using the number tag associated with each task. 4. Use the QR code to start mapping the selected task using the ODK Collect app on your mobile phone. 5. Install and open the ODK Collect app on your phone. @@ -207,11 +184,14 @@ Click on "Submit" to proceed. 10. After completing the assigned task, go back to the project platform on FMTM and mark it as fully mapped. ## Help and Support + If you encounter any issues or need assistance while using FMTM, you can access the following resources: + - Check the [FAQs](https://github.com/hotosm/fmtm/wiki/FAQ) . - Ask your doubts in the [Slack channel: #fmtm-field-pilots](https://hotosm.slack.com/archives/C04PCBFDEGN) -## Thank you +## Thank you + We are excited to have you join our community of passionate mappers and volunteers. FMTM is a powerful platform developed by the Humanitarian OpenStreetMap Team (HOT) to facilitate mapping projects for disaster response, humanitarian efforts, and community development. With FMTM, you have the opportunity to make a real impact by mapping areas that are in need of support. Your contributions help create detailed and up-to-date maps that aid organizations and communities in their efforts to respond to crises, plan infrastructure, and improve the lives of people around the world. diff --git a/docs/dev/Frontend.md b/docs/dev/Frontend.md index 8f4b99e43c..7cd98b6000 100644 --- a/docs/dev/Frontend.md +++ b/docs/dev/Frontend.md @@ -1,28 +1,8 @@ # Frontend Deployment for Development -## The Microfrontend configuration +## 1. Start the Frontend with Docker -The FMTM frontend is built using a microfrontend architecture, divided into modules that can be developed, tested, and deployed independently. - -Webpack remote modules are used to achieve this, dynamically loading code from other microfrontend applications. - -In theory, this should improve the performance and scalability of the application. -However, great care should be taken with watching dependency versions across modules, to prevent loading more js content than is required. - -List of current microfrontend modules: - -- **main**: - - Description: The main frontend, displays projects and tasks. - - Location: src/frontend/main - - Port: 8080. -- **fmtm_openlayers_map**: - - Description: The map component, displays tasks on a map. - - Location: src/frontend/fmtm_openlayers_map - - Port: 8081. - -## 1. Start the Frontends with Docker - -This is the easiest way to manage multiple frontends at once. +This is the easiest way to manage all of the services together. ### 1A: Starting the API Containers @@ -32,33 +12,27 @@ For details on how to run the API first, please see: [DEV 2. Backend](https://gi 1. You will need to [Install Docker](https://docs.docker.com/engine/install/) and ensure that it is running on your local machine. 2. From the command line: navigate to the top level directory of the FMTM project. -3. From the command line run: `docker compose build ui-main ui-map` - This is essential, as the development containers for the frontend are different to production. -4. Once everything is built, from the command line run: `docker compose up -d ui-main ui-map` +3. From the command line run: `docker compose build ui-main` + This is essential, as the development container for the frontend is different to production. +4. Once everything is built, from the command line run: `docker compose up -d ui-main` -5. If everything goes well you should now be able to **navigate to the project in your browser:** - - **Main:**
- {isTaskLoading ? (
-
-
- {totalTaskInfoCount.map((taskInfo) => (
-
- )}
-
-
-
-
- ))}
-
-
- - {taskInfo.count} -
-
-
- {taskInfo.title}
- {taskInfo.icon} -
- {Array.from({ length: 3 }).map((i) => (
-
- );
-};
-
-export default ProjectInfoCountCardSkeleton;
diff --git a/src/frontend/fmtm_openlayer_map/src/components/ProjectInfo/ProjectInfoSidebarSkeleton.jsx b/src/frontend/fmtm_openlayer_map/src/components/ProjectInfo/ProjectInfoSidebarSkeleton.jsx
deleted file mode 100644
index 1939079464..0000000000
--- a/src/frontend/fmtm_openlayer_map/src/components/ProjectInfo/ProjectInfoSidebarSkeleton.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import CoreModules from "fmtm/CoreModules";
-
-const ProjectInfoSidebarSkeleton = () => {
- return (
-
-
- ))}
-
-
- );
-};
-
-export default ProjectInfoSidebarSkeleton;
diff --git a/src/frontend/fmtm_openlayer_map/src/components/SubmissionMap/SubmissionMap.jsx b/src/frontend/fmtm_openlayer_map/src/components/SubmissionMap/SubmissionMap.jsx
deleted file mode 100644
index 92a324652e..0000000000
--- a/src/frontend/fmtm_openlayer_map/src/components/SubmissionMap/SubmissionMap.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React,{useState} from 'react';
-import useOLMap from '../../hooks/useOlMap';
-import { MapContainer as MapComponent } from '../MapComponent/OpenLayersComponent';
-import LayerSwitcherControl from '../MapComponent/OpenLayersComponent/LayerSwitcher/index.js'
-import { VectorLayer } from '../MapComponent/OpenLayersComponent/Layers';
-import CoreModules from 'fmtm/CoreModules';
-
-function elastic(t) {
- return (
- Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1
- );
-}
-
-const SubmissionMap = ({outlineBoundary,featureGeojson}) => {
-
- const { mapRef, map } = useOLMap({
- // center: fromLonLat([85.3, 27.7]),
- center: [0, 0],
- zoom: 4,
- maxZoom: 25,
- });
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-SubmissionMap.propTypes = {}
-
-export default SubmissionMap
\ No newline at end of file
diff --git a/src/frontend/fmtm_openlayer_map/src/hooks/MapStyles.js b/src/frontend/fmtm_openlayer_map/src/hooks/MapStyles.js
deleted file mode 100755
index 08234992df..0000000000
--- a/src/frontend/fmtm_openlayer_map/src/hooks/MapStyles.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import Fill from 'ol/style/Fill';
-import Stroke from 'ol/style/Stroke';
-import { Icon, Style,} from 'ol/style';
-import React, { useEffect, useState } from 'react'
-import CoreModules from 'fmtm/CoreModules';
-import AssetModules from 'fmtm/AssetModules';
-import {getCenter} from 'ol/extent';
-import Point from 'ol/geom/Point.js';
-import { transform } from 'ol/proj';
-
-function createPolygonStyle(fillColor, strokeColor) {
- return new Style({
- stroke: new Stroke({
- color: strokeColor,
- width: 3,
- }),
- fill: new Fill({
- color: fillColor,
- }),
- });
-}
-function createIconStyle(iconSrc) {
- return new Style({
- image: new Icon({
- anchor: [0.5, 1],
- scale:0.8,
- anchorXUnits: "fraction",
- anchorYUnits: "pixels",
- src: iconSrc,
- }),
- geometry: function (feature) {
- // return the coordinates of the centroid of the polygon
- // const coordinates = feature.getGeometry().getExtent();
- // const center = getCenter(coordinates);
- const convertedCenter = transform(feature.values_.centroid, 'EPSG:4326', 'EPSG:3857');
- return new Point(convertedCenter);
- },
- });
-}
-export default function MapStyles() {
- const mapTheme = CoreModules.useAppSelector(state => state.theme.hotTheme)
- const [style, setStyle] = useState({})
- const strokeColor= 'rgb(0,0,0,0.5)';
-
- useEffect(() => {
-
-
-
- // Example usage:
- const lockedPolygonStyle = createPolygonStyle(mapTheme.palette.mapFeatureColors.locked_for_mapping_rgb, strokeColor);
- const lockedValidationStyle = createPolygonStyle(mapTheme.palette.mapFeatureColors.locked_for_validation_rgb, strokeColor);
- const iconStyle = createIconStyle(AssetModules.LockPng);
- const redIconStyle = createIconStyle(AssetModules.RedLockPng);
-
- const geojsonStyles = {
-
- 'READY': new Style({
- stroke: new Stroke({
- color: strokeColor,
- width: 3,
- }),
- fill: new Fill({
- color: mapTheme.palette.mapFeatureColors.ready_rgb,
- }),
- }),
- 'LOCKED_FOR_MAPPING': [lockedPolygonStyle, iconStyle],
- 'MAPPED': new Style({
- stroke: new Stroke({
- color: strokeColor,
- width: 3,
- }),
- fill: new Fill({
- color: mapTheme.palette.mapFeatureColors.mapped_rgb
- }),
- }),
- 'LOCKED_FOR_VALIDATION': [lockedValidationStyle,redIconStyle],
-
- 'VALIDATED': new Style({
- stroke: new Stroke({
- color: strokeColor,
- width: 3,
- }),
- fill: new Fill({
- color: mapTheme.palette.mapFeatureColors.validated_rgb
- }),
- }),
- 'INVALIDATED': new Style({
- stroke: new Stroke({
- color: strokeColor,
- width: 3,
- }),
- fill: new Fill({
- color: mapTheme.palette.mapFeatureColors.invalidated_rgb
- }),
- }),
- 'BAD': new Style({
- stroke: new Stroke({
- color: strokeColor,
- width: 3,
- }),
- fill: new Fill({
- color: mapTheme.palette.mapFeatureColors.bad_rgb
- }),
- }),
- 'SPLIT': new Style({
- stroke: new Stroke({
- color: strokeColor,
- width: 3,
- }),
- fill: new Fill({
- color: mapTheme.palette.mapFeatureColors.split_rgb
- }),
- }),
- };
- setStyle(geojsonStyles)
- }, [])
-
- return style;
-
-}
diff --git a/src/frontend/fmtm_openlayer_map/src/index.css b/src/frontend/fmtm_openlayer_map/src/index.css
deleted file mode 100755
index bf97d9f60b..0000000000
--- a/src/frontend/fmtm_openlayer_map/src/index.css
+++ /dev/null
@@ -1,7 +0,0 @@
-html,
-body {
- margin: 0;
- height: 100%;
- font-family: Arial, Helvetica, sans-serif;
- overflow: hidden;
-}
diff --git a/src/frontend/fmtm_openlayer_map/src/index.html b/src/frontend/fmtm_openlayer_map/src/index.html
deleted file mode 100755
index 8205ab7afb..0000000000
--- a/src/frontend/fmtm_openlayer_map/src/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
-
-
-
- {childrenCount < 1 ? (
- <>
- ) : childrenCount > 1 ? (
- Children.map(children, (child) => (child ? cloneElement(child, { ...props }) : <>))
- ) : (
- cloneElement(children, { ...props })
- )}
-
- );
-});
-
-MapContainer.defaultProps = {
- mapInstance: null,
-};
-
-MapContainer.propTypes = {
- children: PropTypes.node.isRequired,
- mapInstance: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
-};
-
-export default MapContainer;
diff --git a/src/frontend/main/src/components/MapComponent/OpenLayersComponent/Popup/index.jsx b/src/frontend/main/src/components/MapComponent/OpenLayersComponent/Popup/index.jsx
deleted file mode 100644
index 9457978187..0000000000
--- a/src/frontend/main/src/components/MapComponent/OpenLayersComponent/Popup/index.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable jsx-a11y/anchor-has-content */
-/* eslint-disable func-names */
-/* eslint-disable jsx-a11y/control-has-associated-label */
-import React, { useEffect } from 'react';
-import Overlay from 'ol/Overlay';
-import './popup.scss';
-
-const Popup = ({ map, except }) => {
- useEffect(() => {
- if (!map) return;
-
- const container = document.getElementById('popup');
- const content = document.getElementById('popup-content');
- const closer = document.getElementById('popup-closer');
-
- const overlay = new Overlay({
- element: container,
- autoPan: true,
- autoPanAnimation: {
- duration: 250,
- },
- });
-
- closer.onclick = function () {
- overlay.setPosition(undefined);
- closer.blur();
- return false;
- };
-
- map.on('singleclick', (evt) => {
- const { coordinate } = evt;
- const features = map.getFeaturesAtPixel(evt.pixel);
- if (features.length < 1) {
- overlay.setPosition(undefined);
- closer.blur();
- content.innerHTML = '';
- return;
- }
- const properties = features[0].getProperties();
- const { layerId } = properties;
- if (layerId === except) {
- overlay.setPosition(undefined);
- closer.blur();
- return;
- }
- content.innerHTML = `| ${key} | -${properties[key]} - | -
-
-
-
- )
- })
- )
-}
-export default ProjectCardSkeleton;
diff --git a/src/frontend/main/src/constants/EditProjectSidebarContent.ts b/src/frontend/main/src/constants/EditProjectSidebarContent.ts
deleted file mode 100644
index 993fd036a9..0000000000
--- a/src/frontend/main/src/constants/EditProjectSidebarContent.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-interface ISidebarContent {
- id: number;
- name: string;
- slug: string;
- type?: string;
-}
-
-
-const SidebarContent: ISidebarContent[] = [
- {
- id: 1,
- name: 'Project Description',
- slug: 'project-description'
- },
- {
- id: 2,
- name: 'Form Update',
- slug: 'form-update'
- },
- {
- id: 3,
- name: 'Update Project Boundary',
- slug: 'update-project-boundary'
- },
-]
-
-export default SidebarContent
\ No newline at end of file
diff --git a/src/frontend/main/src/hooks/OnScroll.tsx b/src/frontend/main/src/hooks/OnScroll.tsx
deleted file mode 100755
index 32c9296c7e..0000000000
--- a/src/frontend/main/src/hooks/OnScroll.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-export default function OnScroll(element, dep) {
-
- const [scrollTop, setScrollTop] = useState(0);
- useEffect(() => {
- const doc = document.getElementsByClassName('mainview')[0]
-
- const handleScroll = (event) => {
- if (element != undefined) {
- setScrollTop(element.getTargetElement().getBoundingClientRect().y)
- }
- };
-
- doc.addEventListener('scroll', handleScroll);
- window.addEventListener('resize', handleScroll)
-
- return () => {
- doc.removeEventListener('scroll', handleScroll);
- window.removeEventListener('resize', handleScroll)
-
- };
- }, [element, dep]);
-
-
- return { y: scrollTop }
-}
diff --git a/src/frontend/main/src/hooks/WindowDimension.tsx b/src/frontend/main/src/hooks/WindowDimension.tsx
deleted file mode 100755
index f6b54f789d..0000000000
--- a/src/frontend/main/src/hooks/WindowDimension.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { useEffect, useState } from "react";
-// Extra small.col - < 576px Mobile Display
-// Small.col - sm - ≥576px Mobile Display
-// Medium.col - md - ≥768px Tablet Display
-// Large.col - lg - ≥992px Desktop Display
-// Extra large.col - xl - ≥1200px Desktop Display
-function calculateWidthType(width) {
- if (width >= 1700) {
- return 'xl'
- }
- else if (width >= 1332) {
- return 'lg'
- }
- else if (width >= 1200) {
- return 'md'
- } else if (width >= 855) {
- return 'sm'
- } else if (width >= 632) {
- return 's'
- } else if (width < 632) {
- return 'xs'
- }
-}
-
-const windowDimention = () => {
-
- const [windowSize, setWindowSize] = useState({
- width: 0,
- height: 0
- })
-
- useEffect(() => {
-
- const handleResize = () => {
- setWindowSize({
- width: window.innerWidth,
- height: window.innerHeight
- })
- }
-
- handleResize();
- window.addEventListener('resize', handleResize)
-
- const cleanUp = () => {
- window.removeEventListener('resize', handleResize)
- }
-
- return cleanUp;
- }, [])
-
- return { windowSize, type: calculateWidthType(windowSize.width) };
-
-
-
-
-}
-
-
-export default windowDimention;
diff --git a/src/frontend/main/src/index.html b/src/frontend/main/src/index.html
deleted file mode 100755
index 4134e0afc6..0000000000
--- a/src/frontend/main/src/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {element}
-
-
- );
-}
diff --git a/src/frontend/main/src/utilities/CustomizedSnackbar.jsx b/src/frontend/main/src/utilities/CustomizedSnackbar.jsx
deleted file mode 100755
index 1c611cc948..0000000000
--- a/src/frontend/main/src/utilities/CustomizedSnackbar.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-import CoreModules from '../shared/CoreModules';
-const Alert = React.forwardRef(function Alert(props, ref) {
- return
+
{
// setToggleGenerateModal(false);
dispatch(
GenerateProjectTiles(
`${environment.baseApiUrl}/projects/tiles/${decodedId}?source=${selectedTileSource}`,
- decodedId
- )
+ decodedId,
+ ),
);
// dispatch(CoreModules.TaskActions.SetJosmEditorError(null));
}}
@@ -138,16 +115,16 @@ const GenerateMbTiles = ({
Generate
-
-
+
+
#12345
{
-
+
+
Status changed from READY to LOCKED_FOR_MAPPING by: shushila
-
+
@@ -48,7 +43,7 @@ const ProjectCard = () => {
+
date
diff --git a/src/frontend/src/components/ProjectInfo/ProjectInfoCountCard.jsx b/src/frontend/src/components/ProjectInfo/ProjectInfoCountCard.jsx
new file mode 100644
index 0000000000..cb3837ba6d
--- /dev/null
+++ b/src/frontend/src/components/ProjectInfo/ProjectInfoCountCard.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import AssetModules from '../../shared/AssetModules';
+import CoreModules from '../../shared/CoreModules';
+import ProjectInfoCountSkeleton from './ProjectInfoCountCardSkeleton';
+
+const ProjectInfoCountCard = () => {
+ const taskData = CoreModules.useAppSelector((state) => state.task.taskData);
+ const isTaskLoading = CoreModules.useAppSelector((state) => state.task.taskLoading);
+
+ const totalTaskInfoCount = [
+ {
+ count: taskData.task_count,
+ title: 'Total Tasks',
+ icon:
+
+ );
+};
+
+export default ProjectInfoCountCard;
diff --git a/src/frontend/src/components/ProjectInfo/ProjectInfoCountCardSkeleton.jsx b/src/frontend/src/components/ProjectInfo/ProjectInfoCountCardSkeleton.jsx
new file mode 100644
index 0000000000..631f7225a1
--- /dev/null
+++ b/src/frontend/src/components/ProjectInfo/ProjectInfoCountCardSkeleton.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import CoreModules from '../../shared/CoreModules';
+
+const ProjectInfoCountCardSkeleton = () => {
+ return (
+
@@ -76,34 +72,29 @@ const ProjectInfoSidebar = ({ projectId, taskInfo }) => {
key={index}
sx={{
...innerBoxStyles.boxStyle,
- backgroundColor:
- task.task_id === selectedTask ? "#F0FBFF" : "#FFFFFF",
+ backgroundColor: task.task_id === selectedTask ? '#F0FBFF' : '#FFFFFF',
}}
onClick={() => onTaskClick(+task.task_id)}
>
-
+
#{task.task_id}
Go To Task Submissions
@@ -112,7 +103,7 @@ const ProjectInfoSidebar = ({ projectId, taskInfo }) => {
Zoom to Task
diff --git a/src/frontend/src/components/ProjectInfo/ProjectInfoSidebarSkeleton.jsx b/src/frontend/src/components/ProjectInfo/ProjectInfoSidebarSkeleton.jsx
new file mode 100644
index 0000000000..15cb754854
--- /dev/null
+++ b/src/frontend/src/components/ProjectInfo/ProjectInfoSidebarSkeleton.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import CoreModules from '../../shared/CoreModules';
+
+const ProjectInfoSidebarSkeleton = () => {
+ return (
+
{
mapInstance={map}
className="map naxatw-relative naxatw-min-h-full naxatw-w-full"
style={{
- height: "100%",
- width: "100%",
+ height: '100%',
+ width: '100%',
}}
>
- setChoropleth(
- { ...municipalStyles, lineThickness: 3 },
- feature,
- resolution
- )
+ setChoropleth({ ...municipalStyles, lineThickness: 3 }, feature, resolution)
}
geojson={taskBoundaries}
mapOnClick={taskOnSelect}
@@ -289,13 +270,7 @@ const ProjectInfomap = () => {
zIndex={5}
/>
)}
- {buildingGeojson && (
-
);
diff --git a/src/frontend/fmtm_openlayer_map/src/components/ProjectMap/ProjectMap.jsx b/src/frontend/src/components/ProjectMap/ProjectMap.jsx
similarity index 70%
rename from src/frontend/fmtm_openlayer_map/src/components/ProjectMap/ProjectMap.jsx
rename to src/frontend/src/components/ProjectMap/ProjectMap.jsx
index 77585d180a..cf6ae604b7 100644
--- a/src/frontend/fmtm_openlayer_map/src/components/ProjectMap/ProjectMap.jsx
+++ b/src/frontend/src/components/ProjectMap/ProjectMap.jsx
@@ -1,30 +1,24 @@
-import React, { useState } from "react";
-import CoreModules from "fmtm/CoreModules";
-import { useOLMap } from "../MapComponent/OpenLayersComponent";
-import { MapContainer as MapComponent } from "../MapComponent/OpenLayersComponent";
-import LayerSwitcherControl from "../MapComponent/OpenLayersComponent/LayerSwitcher/index.js";
-import { VectorLayer } from "../MapComponent/OpenLayersComponent/Layers";
+import React, { useState } from 'react';
+import CoreModules from 'fmtm/CoreModules';
+import { useOLMap } from '../MapComponent/OpenLayersComponent';
+import { MapContainer as MapComponent } from '../MapComponent/OpenLayersComponent';
+import LayerSwitcherControl from '../MapComponent/OpenLayersComponent/LayerSwitcher/index.js';
+import { VectorLayer } from '../MapComponent/OpenLayersComponent/Layers';
const basicGeojsonTemplate = {
- type: "FeatureCollection",
+ type: 'FeatureCollection',
features: [],
};
const ProjectMap = ({}) => {
- const defaultTheme = CoreModules.useAppSelector(
- (state) => state.theme.hotTheme
- );
+ const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
const { mapRef, map } = useOLMap({
// center: fromLonLat([85.3, 27.7]),
center: [0, 0],
zoom: 4,
maxZoom: 25,
});
- const projectTaskBoundries = CoreModules.useAppSelector(
- (state) => state.project.projectTaskBoundries
- );
- const projectBuildingGeojson = CoreModules.useAppSelector(
- (state) => state.project.projectBuildingGeojson
- );
+ const projectTaskBoundries = CoreModules.useAppSelector((state) => state.project.projectTaskBoundries);
+ const projectBuildingGeojson = CoreModules.useAppSelector((state) => state.project.projectBuildingGeojson);
const [projectBoundaries, setProjectBoundaries] = useState(null);
const [buildingBoundaries, setBuildingBoundaries] = useState(null);
@@ -55,20 +49,20 @@ const ProjectMap = ({}) => {
setBuildingBoundaries(buildingGeojsonFeatureCollection);
}
return (
-
+
-
+
{
getTilesList();
@@ -156,35 +133,23 @@ const GenerateMbTiles = ({
Refresh
-
+
Id
-
- Source
-
-
- Status
-
+ Source
+ Status
{tilesList.map((list) => (
-
+
{list.id}
-
- {list.tile_source}
-
+ {list.tile_source}
{/* Changed Success Display to Completed */}
- {list.status === "SUCCESS" ? "COMPLETED" : list.status}
+ {list.status === 'SUCCESS' ? 'COMPLETED' : list.status}
- {list.status === "SUCCESS" ? (
+ {list.status === 'SUCCESS' ? (
downloadMbTiles(list.id)}
>
) : (
diff --git a/src/frontend/main/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
similarity index 96%
rename from src/frontend/main/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
index 23dab94e14..dec28db24b 100644
--- a/src/frontend/main/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
@@ -6,7 +6,7 @@ import LayerGroup from 'ol/layer/Group';
import LayerTile from 'ol/layer/Tile';
import SourceOSM from 'ol/source/OSM';
import LayerSwitcher from 'ol-layerswitcher';
-import React,{ useEffect } from 'react';
+import React, { useEffect } from 'react';
import { XYZ } from 'ol/source';
@@ -126,7 +126,6 @@ const monochromeMidNight = (visible = false) =>
}),
});
-
const LayerSwitcherControl = ({ map, visible = 'osm' }) => {
useEffect(() => {
if (!map) return;
diff --git a/src/frontend/main/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js
similarity index 100%
rename from src/frontend/main/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js
diff --git a/src/frontend/main/src/components/MapComponent/OpenLayersComponent/Layers/VectorTileLayer.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorTileLayer.js
similarity index 95%
rename from src/frontend/main/src/components/MapComponent/OpenLayersComponent/Layers/VectorTileLayer.js
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorTileLayer.js
index bd4afdeaa4..c7cd0d7f45 100644
--- a/src/frontend/main/src/components/MapComponent/OpenLayersComponent/Layers/VectorTileLayer.js
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorTileLayer.js
@@ -1,4 +1,4 @@
-import React,{ useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
// import * as olExtent from 'ol/extent';
import VectorTile from 'ol/layer/VectorTile';
import MVT from 'ol/format/MVT';
diff --git a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/Layers/index.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/index.js
similarity index 100%
rename from src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/Layers/index.js
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/index.js
diff --git a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/MapContainer/index.jsx b/src/frontend/src/components/MapComponent/OpenLayersComponent/MapContainer/index.jsx
similarity index 100%
rename from src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/MapContainer/index.jsx
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/MapContainer/index.jsx
diff --git a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/Popup/index.jsx b/src/frontend/src/components/MapComponent/OpenLayersComponent/Popup/index.jsx
similarity index 100%
rename from src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/Popup/index.jsx
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/Popup/index.jsx
diff --git a/src/frontend/main/src/components/MapComponent/OpenLayersComponent/Popup/popup.css b/src/frontend/src/components/MapComponent/OpenLayersComponent/Popup/popup.css
similarity index 85%
rename from src/frontend/main/src/components/MapComponent/OpenLayersComponent/Popup/popup.css
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/Popup/popup.css
index bdd5110d88..6a5112f811 100644
--- a/src/frontend/main/src/components/MapComponent/OpenLayersComponent/Popup/popup.css
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/Popup/popup.css
@@ -16,7 +16,7 @@
.ol-popup:before {
top: 100%;
border: solid transparent;
- content: " ";
+ content: ' ';
height: 0;
width: 0;
position: absolute;
@@ -45,5 +45,5 @@
}
.ol-popup-closer:after {
- content: "✖";
-}/*# sourceMappingURL=popup.css.map */
\ No newline at end of file
+ content: '✖';
+} /*# sourceMappingURL=popup.css.map */
diff --git a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/Popup/popup.css.map b/src/frontend/src/components/MapComponent/OpenLayersComponent/Popup/popup.css.map
similarity index 100%
rename from src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/Popup/popup.css.map
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/Popup/popup.css.map
diff --git a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/Popup/popup.scss b/src/frontend/src/components/MapComponent/OpenLayersComponent/Popup/popup.scss
similarity index 91%
rename from src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/Popup/popup.scss
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/Popup/popup.scss
index 2890e1b352..1e8ca3f0d8 100644
--- a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/Popup/popup.scss
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/Popup/popup.scss
@@ -4,7 +4,7 @@
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
// padding: 15px;
border-radius: 20px;
- border: 1px solid #BDBDBD;
+ border: 1px solid #bdbdbd;
min-height: fit-content;
// top: 6px;
margin-top: 12px;
diff --git a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/helpers/getFeatureGeojson.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/helpers/getFeatureGeojson.js
similarity index 100%
rename from src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/helpers/getFeatureGeojson.js
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/helpers/getFeatureGeojson.js
diff --git a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/helpers/layerUtils.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/helpers/layerUtils.js
similarity index 100%
rename from src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/helpers/layerUtils.js
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/helpers/layerUtils.js
diff --git a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/helpers/styleUtils.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/helpers/styleUtils.js
similarity index 100%
rename from src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/helpers/styleUtils.js
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/helpers/styleUtils.js
diff --git a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/index.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/index.js
similarity index 100%
rename from src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/index.js
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/index.js
diff --git a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/map.css b/src/frontend/src/components/MapComponent/OpenLayersComponent/map.css
similarity index 90%
rename from src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/map.css
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/map.css
index d84aeb99db..a1fcd582f9 100644
--- a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/map.css
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/map.css
@@ -86,12 +86,12 @@
border-radius: 5px !important;
}
.layer-switcher button::before {
- font-family: "Material Icons";
- content: "layers";
+ font-family: 'Material Icons';
+ content: 'layers';
position: relative;
top: -3px;
}
.ol-attribution {
display: none !important;
-}/*# sourceMappingURL=map.css.map */
\ No newline at end of file
+} /*# sourceMappingURL=map.css.map */
diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/map.scss b/src/frontend/src/components/MapComponent/OpenLayersComponent/map.scss
new file mode 100644
index 0000000000..8f38f9f611
--- /dev/null
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/map.scss
@@ -0,0 +1,15 @@
+@keyframes blink {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+.blink {
+ animation: blink 1s infinite;
+}
diff --git a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/useOLMap/index.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/useOLMap/index.js
similarity index 92%
rename from src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/useOLMap/index.js
rename to src/frontend/src/components/MapComponent/OpenLayersComponent/useOLMap/index.js
index 487a5b80c8..8881769ee8 100644
--- a/src/frontend/fmtm_openlayer_map/src/components/MapComponent/OpenLayersComponent/useOLMap/index.js
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/useOLMap/index.js
@@ -1,5 +1,5 @@
/* eslint-disable consistent-return */
-import React,{ useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
import Map from 'ol/Map';
import { View } from 'ol';
import * as olExtent from 'ol/extent';
diff --git a/src/frontend/fmtm_openlayer_map/src/components/MapDescriptionComponents.jsx b/src/frontend/src/components/MapDescriptionComponents.jsx
similarity index 66%
rename from src/frontend/fmtm_openlayer_map/src/components/MapDescriptionComponents.jsx
rename to src/frontend/src/components/MapDescriptionComponents.jsx
index 103d54feb4..3fcd0bf23f 100755
--- a/src/frontend/fmtm_openlayer_map/src/components/MapDescriptionComponents.jsx
+++ b/src/frontend/src/components/MapDescriptionComponents.jsx
@@ -1,18 +1,12 @@
-import React from "react";
-import CustomizedMenus from "fmtm/CustomizedMenus";
-import MapLegends from "./MapLegends";
-import CoreModules from "fmtm/CoreModules";
+import React from 'react';
+import CustomizedMenus from '../utilities/CustomizedMenus';
+import CoreModules from '../shared/CoreModules';
const MapDescriptionComponents = ({ type, state, defaultTheme }) => {
-
const descriptionData = [
{
- value: "Descriptions",
- element: (
-
- {state.projectInfo.description}
-
- ),
+ value: 'Descriptions',
+ element: {state.projectInfo.description} ,
},
// {
// value: "Instructions",
@@ -38,20 +32,20 @@ const MapDescriptionComponents = ({ type, state, defaultTheme }) => {
return (
{descriptionData.map((data, index) => {
return (
@@ -61,11 +55,11 @@ const MapDescriptionComponents = ({ type, state, defaultTheme }) => {
btnProps={{
style: {
//overidding style
- backgroundColor: "white",
+ backgroundColor: 'white',
fontFamily: defaultTheme.typography.h1.fontFamily,
fontSize: 16,
},
- color: "primary",
+ color: 'primary',
sx: { boxShadow: 2 },
}}
element={data.element}
diff --git a/src/frontend/src/components/MapLegends.jsx b/src/frontend/src/components/MapLegends.jsx
new file mode 100755
index 0000000000..8777d7fc53
--- /dev/null
+++ b/src/frontend/src/components/MapLegends.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import CoreModules from 'fmtm/CoreModules';
+import AssetModules from 'fmtm/AssetModules';
+
+const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatus }) => {
+ const MapDetails = [
+ {
+ value: 'Ready',
+ color: defaultTheme.palette.mapFeatureColors.ready,
+ status: 'none',
+ },
+ {
+ value: 'Locked For Mapping',
+ color: defaultTheme.palette.mapFeatureColors.locked_for_mapping,
+ status: 'lock',
+ },
+ {
+ value: 'Locked For Validation',
+ color: defaultTheme.palette.mapFeatureColors.locked_for_validation,
+ status: 'lock',
+ },
+ {
+ value: 'Ready For Validation',
+ color: defaultTheme.palette.mapFeatureColors.mapped,
+ status: 'none',
+ },
+ {
+ value: 'Validated',
+ color: defaultTheme.palette.mapFeatureColors.validated,
+ status: 'none',
+ },
+ {
+ value: 'Bad',
+ color: defaultTheme.palette.mapFeatureColors.bad,
+ status: 'none',
+ },
+ {
+ value: 'More mapping needed',
+ color: defaultTheme.palette.mapFeatureColors.invalidated,
+ status: 'none',
+ },
+ ];
+ return (
+
+ {MapDetails.map((data, index) => {
+ return (
+
+
+
+ {valueStatus && (
+
+ {data.value}
+
+ )}
+
+ );
+ })}
+
+ );
+};
+
+export default MapLegends;
diff --git a/src/frontend/fmtm_openlayer_map/src/components/OpenLayersMap.jsx b/src/frontend/src/components/OpenLayersMap.jsx
similarity index 52%
rename from src/frontend/fmtm_openlayer_map/src/components/OpenLayersMap.jsx
rename to src/frontend/src/components/OpenLayersMap.jsx
index cc3bc274e0..87a885648e 100755
--- a/src/frontend/fmtm_openlayer_map/src/components/OpenLayersMap.jsx
+++ b/src/frontend/src/components/OpenLayersMap.jsx
@@ -1,21 +1,21 @@
-import React, { useEffect, useState } from "react";
-import DialogTaskActions from "../components/DialogTaskActions";
-import "../styles/home.scss";
-import CoreModules from "fmtm/CoreModules";
-import Control from "ol/control/Control";
-import locationImg from "../assets/images/location.png";
-import accDownImg from "../assets/images/acc-down.png";
-import accUpImg from "../assets/images/acc-up.png";
-import gridIcon from "../assets/images/grid.png";
-import QrcodeComponent from "./QrcodeComponent";
-import * as ol from "ol";
-import { Point } from "ol/geom";
-import Vector from "ol/layer/Vector";
-import VectorSource from "ol/source/Vector";
-import { transform } from "ol/proj";
-import { Icon, Style } from "ol/style";
-import LocationImage from "../assets/images/location.png";
-import AssetModules from "fmtm/AssetModules";
+import React, { useEffect, useState } from 'react';
+import DialogTaskActions from '../components/DialogTaskActions';
+import '../styles/home.scss';
+import CoreModules from '../shared/CoreModules';
+import Control from 'ol/control/Control';
+import locationImg from '../assets/images/location.png';
+import accDownImg from '../assets/images/acc-down.png';
+import accUpImg from '../assets/images/acc-up.png';
+import gridIcon from '../assets/images/grid.png';
+import QrcodeComponent from './QrcodeComponent';
+import * as ol from 'ol';
+import { Point } from 'ol/geom';
+import Vector from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import { transform } from 'ol/proj';
+import { Icon, Style } from 'ol/style';
+import LocationImage from '../assets/images/location.png';
+import AssetModules from '../shared/AssetModules';
let currentLocationLayer = null;
const OpenLayersMap = ({
defaultTheme,
@@ -34,26 +34,24 @@ const OpenLayersMap = ({
const [toggleCurrentLoc, setToggleCurrentLoc] = useState(false);
const [currentLocLayer, setCurrentLocLayer] = useState(null);
function elastic(t) {
- return (
- Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1
- );
+ return Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1;
}
useEffect(() => {
let btnsPosition = 0;
- var btnList = ["add", "minus", "defaultPosition", "taskBoundries"];
+ var btnList = ['add', 'minus', 'defaultPosition', 'taskBoundries'];
if (map != undefined) {
var handleOnClick = function (e) {
- if (e.target.id == "add") {
+ if (e.target.id == 'add') {
let actualZoom = map.getView().getZoom();
map.getView().setZoom(actualZoom + 1);
- } else if (e.target.id == "minus") {
+ } else if (e.target.id == 'minus') {
let actualZoom = map.getView().getZoom();
map.getView().setZoom(actualZoom - 1);
- } else if (e.target.id == "defaultPosition") {
- const sourceProjection = "EPSG:4326"; // The current projection of the coordinates
- const targetProjection = "EPSG:3857"; // The desired projection
+ } else if (e.target.id == 'defaultPosition') {
+ const sourceProjection = 'EPSG:4326'; // The current projection of the coordinates
+ const targetProjection = 'EPSG:3857'; // The desired projection
// Create a style for the marker
var markerStyle = new Style({
image: new Icon({
@@ -62,18 +60,12 @@ const OpenLayersMap = ({
scale: 2, // Scale factor for the marker icon
}),
});
- if ("geolocation" in navigator) {
+ 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 convertedCoordinates = transform([lng, lat], sourceProjection, targetProjection);
+ const positionFeature = new ol.Feature(new Point(convertedCoordinates));
const positionLayer = new Vector({
source: new VectorSource({
features: [positionFeature],
@@ -86,15 +78,11 @@ const OpenLayersMap = ({
setToggleCurrentLoc(!toggleCurrentLoc);
// map.getView().setZoom(15);
- } else if (e.target.id == "taskBoundries") {
+ } 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
- ) {
+ if (state.projectTaskBoundries.findIndex((project) => project.id == environment.decode(params.id)) != -1) {
const index = state.projectTaskBoundries.findIndex(
- (project) => project.id == environment.decode(params.id)
+ (project) => project.id == environment.decode(params.id),
);
const centroid =
state.projectTaskBoundries[index].taskBoundries[
@@ -109,46 +97,46 @@ const OpenLayersMap = ({
}
}
- map.getTargetElement().classList.remove("spinner");
+ map.getTargetElement().classList.remove('spinner');
}
};
//List buttons avoiding code duplication
btnList.map((elmnt, index) => {
//Add Button
- let btn = document.createElement("button");
- if (elmnt == "add") {
- btn.innerHTML = "+";
+ let btn = document.createElement('button');
+ if (elmnt == 'add') {
+ btn.innerHTML = '+';
btn.style.fontSize = defaultTheme.typography.fontSize;
- } else if (elmnt == "minus") {
- btn.innerHTML = "-";
+ } else if (elmnt == 'minus') {
+ btn.innerHTML = '-';
btn.style.fontSize = defaultTheme.typography.fontSize;
- } else if (elmnt == "defaultPosition") {
- let img = document.createElement("img");
+ } else if (elmnt == 'defaultPosition') {
+ let img = document.createElement('img');
img.src = locationImg;
img.id = `${elmnt}`;
- img.addEventListener("click", handleOnClick, false);
+ img.addEventListener('click', handleOnClick, false);
btn.appendChild(img);
- } else if (elmnt == "taskBoundries") {
- let img = document.createElement("img");
+ } else if (elmnt == 'taskBoundries') {
+ let img = document.createElement('img');
img.src = gridIcon;
img.id = `${elmnt}`;
- img.addEventListener("click", handleOnClick, false);
+ img.addEventListener('click', handleOnClick, false);
btn.appendChild(img);
}
btn.id = `${elmnt}`;
- btn.style.backgroundColor = "white";
- btn.style.boxShadow = `0 2px 2px 0 ${defaultTheme.palette.info["main"]}`;
- btn.style.width = "40px";
- btn.style.height = "40px";
- btn.style.borderRadius = "50%";
- btn.addEventListener("click", handleOnClick, false);
+ btn.style.backgroundColor = 'white';
+ btn.style.boxShadow = `0 2px 2px 0 ${defaultTheme.palette.info['main']}`;
+ btn.style.width = '40px';
+ btn.style.height = '40px';
+ btn.style.borderRadius = '50%';
+ btn.addEventListener('click', handleOnClick, false);
//Add Button Div
- let btnDiv = document.createElement("div");
- btnDiv.id = "btnsContainer";
- btnDiv.style.borderRadius = "50%";
- btnDiv.className = "ol-unselectable ol-control";
+ let btnDiv = document.createElement('div');
+ btnDiv.id = 'btnsContainer';
+ btnDiv.style.borderRadius = '50%';
+ btnDiv.className = 'ol-unselectable ol-control';
index == 0
? (btnDiv.style.top = `${(btnsPosition = btnsPosition + 2)}%`)
: (btnDiv.style.top = `${(btnsPosition = btnsPosition + 9)}%`);
@@ -162,29 +150,29 @@ const OpenLayersMap = ({
const MapDetails = [
{
- value: "Ready",
+ value: 'Ready',
color: defaultTheme.palette.mapFeatureColors.ready,
- status: "none",
+ status: 'none',
},
{
- value: "Locked For Mapping",
+ value: 'Locked For Mapping',
color: defaultTheme.palette.mapFeatureColors.locked_for_mapping,
- status: "lock",
+ status: 'lock',
},
{
- value: "Ready For Validation",
+ value: 'Ready For Validation',
color: defaultTheme.palette.mapFeatureColors.mapped,
- status: "none",
+ status: 'none',
},
{
- value: "Locked For Validation",
+ value: 'Locked For Validation',
color: defaultTheme.palette.mapFeatureColors.locked_for_validation,
- status: "lock",
+ status: 'lock',
},
{
- value: "Validated",
+ value: 'Validated',
color: defaultTheme.palette.mapFeatureColors.validated,
- status: "none",
+ status: 'none',
},
// {
// value: "Bad",
@@ -192,32 +180,32 @@ const OpenLayersMap = ({
// status: "none",
// },
{
- value: "More mapping needed",
+ value: 'More mapping needed',
color: defaultTheme.palette.mapFeatureColors.invalidated,
- status: "none",
+ status: 'none',
},
{
- value: "Locked",
+ value: 'Locked',
color: defaultTheme.palette.mapFeatureColors.invalidated,
- status: "none",
- type: "locked",
+ status: 'none',
+ type: 'locked',
},
];
- let legendContainer = document.createElement("div");
- legendContainer.className = "legend-container";
- const legendLabel = document.createElement("span");
- legendLabel.innerHTML = "Legend";
- const legendAccIcon = document.createElement("span");
- legendAccIcon.className = "legend-acc-icon";
- let img = document.createElement("img");
+ let legendContainer = document.createElement('div');
+ legendContainer.className = 'legend-container';
+ const legendLabel = document.createElement('span');
+ legendLabel.innerHTML = 'Legend';
+ const legendAccIcon = document.createElement('span');
+ legendAccIcon.className = 'legend-acc-icon';
+ let img = document.createElement('img');
img.src = accDownImg;
- img.style.width = "24px";
- img.style.height = "24px";
- img.style.display = "none";
- let accUp = document.createElement("img");
+ img.style.width = '24px';
+ img.style.height = '24px';
+ img.style.display = 'none';
+ let accUp = document.createElement('img');
accUp.src = accUpImg;
- accUp.style.width = "18px";
- accUp.style.height = "18px";
+ accUp.style.width = '18px';
+ accUp.style.height = '18px';
// accUp.style.display = 'none';
// img.id = `${elmnt}`;
// legendAccIcon.addEventListener("click", function(){
@@ -229,29 +217,29 @@ const OpenLayersMap = ({
legendContainer.appendChild(legendAccIcon);
// const legendContainer = document.getElementById('legendContainer');
- let legendContent = document.createElement("div");
- legendContent.className = "legend-content";
- legendContent.style.display = "none";
- legendContainer.style.margin = "552px 6px";
+ let legendContent = document.createElement('div');
+ legendContent.className = 'legend-content';
+ legendContent.style.display = 'none';
+ legendContainer.style.margin = '552px 6px';
MapDetails.forEach((detail) => {
- const legend = document.createElement("div");
- legend.className = "legend";
+ const legend = document.createElement('div');
+ legend.className = 'legend';
- const legendText = document.createElement("span");
- legendText.className = "legend-text";
+ const legendText = document.createElement('span');
+ legendText.className = 'legend-text';
legendText.textContent = detail.value;
- if (detail.type === "locked") {
- const legendSquare = document.createElement("img");
- legendSquare.className = "legend-lock-img";
+ if (detail.type === 'locked') {
+ const legendSquare = document.createElement('img');
+ legendSquare.className = 'legend-lock-img';
// legendSquare.style.width = "20px";
- legendSquare.style.height = "20px";
+ legendSquare.style.height = '20px';
legendSquare.src = AssetModules.LockPng;
legend.appendChild(legendText);
legend.appendChild(legendSquare);
} else {
- const legendSquare = document.createElement("div");
- legendSquare.className = "legend-square";
+ const legendSquare = document.createElement('div');
+ legendSquare.className = 'legend-square';
legendSquare.style.backgroundColor = detail.color;
legend.appendChild(legendText);
legend.appendChild(legendSquare);
@@ -261,17 +249,17 @@ const OpenLayersMap = ({
});
legendContainer.appendChild(legendContent);
// Add event listener to toggle the accordion content
- legendAccIcon.addEventListener("click", function () {
- if (legendContent.style.display === "none") {
- accUp.style.display = "none";
- img.style.display = "inline";
- legendContent.style.display = "block";
- legendContainer.style.margin = "200px 10px";
+ legendAccIcon.addEventListener('click', function () {
+ if (legendContent.style.display === 'none') {
+ accUp.style.display = 'none';
+ img.style.display = 'inline';
+ legendContent.style.display = 'block';
+ legendContainer.style.margin = '200px 10px';
} else {
- img.style.display = "none";
- accUp.style.display = "inline";
- legendContent.style.display = "none";
- legendContainer.style.margin = "552px 6px";
+ img.style.display = 'none';
+ accUp.style.display = 'inline';
+ legendContent.style.display = 'none';
+ legendContainer.style.margin = '552px 6px';
}
});
var controlx = new Control({
@@ -296,10 +284,10 @@ const OpenLayersMap = ({
}, [map, currentLocLayer]);
return (
-
+
@@ -307,17 +295,8 @@ const OpenLayersMap = ({
{featuresLayer != undefined && (
-
)}
diff --git a/src/frontend/fmtm_openlayer_map/src/components/ProjectInfo/ProjectCard.jsx b/src/frontend/src/components/ProjectInfo/ProjectCard.jsx
similarity index 70%
rename from src/frontend/fmtm_openlayer_map/src/components/ProjectInfo/ProjectCard.jsx
rename to src/frontend/src/components/ProjectInfo/ProjectCard.jsx
index 930b46223e..d6542004e5 100644
--- a/src/frontend/fmtm_openlayer_map/src/components/ProjectInfo/ProjectCard.jsx
+++ b/src/frontend/src/components/ProjectInfo/ProjectCard.jsx
@@ -1,17 +1,12 @@
-import React from "react";
-import CoreModules from "fmtm/CoreModules";
-import IconButtonCard from "../../utilities/IconButtonCard";
-import AssetModules from "fmtm/AssetModules";
+import React from 'react';
+import CoreModules from '../../shared/CoreModules';
+import IconButtonCard from '../../utilities/IconButtonCard';
+import AssetModules from '../../shared/AssetModules';
const ProjectCard = () => {
return (
-
+ {isTaskLoading ? (
+
+
+ {totalTaskInfoCount.map((taskInfo) => (
+
+ )}
+
+
+
+
+ ))}
+
+
+ + {taskInfo.count} +
+
+
+ {taskInfo.title}
+ {taskInfo.icon} +
+ {Array.from({ length: 3 }).map((i) => (
+
+ );
+};
+
+export default ProjectInfoCountCardSkeleton;
diff --git a/src/frontend/fmtm_openlayer_map/src/components/ProjectInfo/ProjectInfoSidebar.jsx b/src/frontend/src/components/ProjectInfo/ProjectInfoSidebar.jsx
similarity index 67%
rename from src/frontend/fmtm_openlayer_map/src/components/ProjectInfo/ProjectInfoSidebar.jsx
rename to src/frontend/src/components/ProjectInfo/ProjectInfoSidebar.jsx
index bbbd202480..317f2456df 100644
--- a/src/frontend/fmtm_openlayer_map/src/components/ProjectInfo/ProjectInfoSidebar.jsx
+++ b/src/frontend/src/components/ProjectInfo/ProjectInfoSidebar.jsx
@@ -1,19 +1,15 @@
-import React from "react";
-import CoreModules from "fmtm/CoreModules";
-import ProjectCard from "./ProjectCard";
-import environment from "fmtm/environment";
-import ProjectInfoSidebarSkeleton from "./ProjectInfoSidebarSkeleton";
+import React from 'react';
+import CoreModules from '../../shared/CoreModules';
+import ProjectCard from './ProjectCard';
+import environment from '../../environment';
+import ProjectInfoSidebarSkeleton from './ProjectInfoSidebarSkeleton';
const ProjectInfoSidebar = ({ projectId, taskInfo }) => {
const dispatch = CoreModules.useAppDispatch();
const params = CoreModules.useParams();
const taskInfoData = Array.from(taskInfo);
- const selectedTask = CoreModules.useAppSelector(
- (state) => state.task.selectedTask
- );
- const isTaskLoading = CoreModules.useAppSelector(
- (state) => state.task.taskLoading
- );
+ const selectedTask = CoreModules.useAppSelector((state) => state.task.selectedTask);
+ const isTaskLoading = CoreModules.useAppSelector((state) => state.task.taskLoading);
const encodedId = params.projectId;
const onTaskClick = (taskId) => {
@@ -21,15 +17,15 @@ const ProjectInfoSidebar = ({ projectId, taskInfo }) => {
};
const innerBoxStyles = {
boxStyle: {
- borderBottom: "1px solid #F0F0F0",
+ borderBottom: '1px solid #F0F0F0',
p: 2,
- display: "flex",
- flexDirection: "column",
+ display: 'flex',
+ flexDirection: 'column',
gap: 2,
- cursor: "pointer",
- borderRadius: "4px",
- "&:hover": {
- backgroundColor: "#F0FBFF",
+ cursor: 'pointer',
+ borderRadius: '4px',
+ '&:hover': {
+ backgroundColor: '#F0FBFF',
},
},
};
@@ -37,27 +33,27 @@ const ProjectInfoSidebar = ({ projectId, taskInfo }) => {
return (
+
+ ))}
+
+
+ );
+};
+
+export default ProjectInfoSidebarSkeleton;
diff --git a/src/frontend/fmtm_openlayer_map/src/components/ProjectInfo/ProjectInfomap.jsx b/src/frontend/src/components/ProjectInfo/ProjectInfomap.jsx
similarity index 65%
rename from src/frontend/fmtm_openlayer_map/src/components/ProjectInfo/ProjectInfomap.jsx
rename to src/frontend/src/components/ProjectInfo/ProjectInfomap.jsx
index 8f757aa61b..1154ed3877 100644
--- a/src/frontend/fmtm_openlayer_map/src/components/ProjectInfo/ProjectInfomap.jsx
+++ b/src/frontend/src/components/ProjectInfo/ProjectInfomap.jsx
@@ -1,74 +1,74 @@
-import React, { useCallback, useState, useEffect } from "react";
+import React, { useCallback, useState, useEffect } from 'react';
-import CoreModules from "fmtm/CoreModules";
-import { MapContainer as MapComponent } from "../MapComponent/OpenLayersComponent";
-import { useOLMap } from "../MapComponent/OpenLayersComponent";
-import LayerSwitcherControl from "../MapComponent/OpenLayersComponent/LayerSwitcher";
-import { VectorLayer } from "../MapComponent/OpenLayersComponent/Layers";
-import { Vector as VectorSource } from "ol/source";
-import GeoJSON from "ol/format/GeoJSON";
-import { get } from "ol/proj";
-import { ProjectBuildingGeojsonService } from "../../api/SubmissionService";
-import environment from "fmtm/environment";
-import { getStyles } from "../MapComponent/OpenLayersComponent/helpers/styleUtils";
-import { ProjectActions } from "fmtm/ProjectSlice";
-import { basicGeojsonTemplate } from "../../utilities/mapUtils";
+import CoreModules from '../../shared/CoreModules';
+import { MapContainer as MapComponent } from '../MapComponent/OpenLayersComponent';
+import { useOLMap } from '../MapComponent/OpenLayersComponent';
+import LayerSwitcherControl from '../MapComponent/OpenLayersComponent/LayerSwitcher';
+import { VectorLayer } from '../MapComponent/OpenLayersComponent/Layers';
+import { Vector as VectorSource } from 'ol/source';
+import GeoJSON from 'ol/format/GeoJSON';
+import { get } from 'ol/proj';
+import { ProjectBuildingGeojsonService } from '../../api/SubmissionService';
+import environment from '../../environment';
+import { getStyles } from '../MapComponent/OpenLayersComponent/helpers/styleUtils';
+import { ProjectActions } from '../../store/slices/ProjectSlice';
+import { basicGeojsonTemplate } from '../../utilities/mapUtils';
export const defaultStyles = {
- lineColor: "#000000",
+ lineColor: '#000000',
lineOpacity: 70,
- fillColor: "#1a2fa2",
+ fillColor: '#1a2fa2',
fillOpacity: 50,
lineThickness: 1,
circleRadius: 5,
dashline: 0,
showLabel: false,
customLabelText: null,
- labelField: "",
- labelFont: "Calibri",
+ labelField: '',
+ labelFont: 'Calibri',
labelFontSize: 14,
- labelColor: "#000000",
+ labelColor: '#000000',
labelOpacity: 100,
labelOutlineWidth: 3,
- labelOutlineColor: "#ffffff",
+ labelOutlineColor: '#ffffff',
labelOffsetX: 0,
labelOffsetY: 0,
- labelText: "normal",
+ labelText: 'normal',
labelMaxResolution: 400,
- labelAlign: "center",
- labelBaseline: "middle",
+ labelAlign: 'center',
+ labelBaseline: 'middle',
labelRotationDegree: 0,
- labelFontWeight: "normal",
- labelPlacement: "point",
+ labelFontWeight: 'normal',
+ labelPlacement: 'point',
labelMaxAngleDegree: 45.0,
labelOverflow: false,
labelLineHeight: 1,
visibleOnMap: true,
icon: {},
showSublayer: false,
- sublayerColumnName: "",
+ sublayerColumnName: '',
sublayer: {},
};
export const municipalStyles = {
...defaultStyles,
fillOpacity: 0,
- lineColor: "#008099",
+ lineColor: '#008099',
dashline: 5,
width: 10,
};
const colorCodes = {
// '#9edefa': { min: 0, max: 5 },
- "#A9D2F3": { min: 10, max: 50 },
- "#7CB2E8": { min: 50, max: 100 },
- "#4A90D9": { min: 100, max: 130 },
- "#0062AC": { min: 130, max: 160 },
+ '#A9D2F3': { min: 10, max: 50 },
+ '#7CB2E8': { min: 50, max: 100 },
+ '#4A90D9': { min: 100, max: 130 },
+ '#0062AC': { min: 130, max: 160 },
};
function colorRange(data, noOfRange) {
if (data?.length === 0) return [];
- const actualCodes = [{ min: 0, max: 0, color: "#605f5e" }];
- console.log(data, "data");
+ const actualCodes = [{ min: 0, max: 0, color: '#605f5e' }];
+ console.log(data, 'data');
const maxVal = Math.max(...data?.map((d) => d.count));
const maxValue = maxVal <= noOfRange ? 10 : maxVal;
// const minValue = Math.min(...data?.map((d) => d.count)) 0;
@@ -89,7 +89,7 @@ function colorRange(data, noOfRange) {
return actualCodes;
}
const getChoroplethColor = (value, colorCodesOutput) => {
- let toReturn = "#FF4538";
+ let toReturn = '#FF4538';
colorCodesOutput?.map((obj) => {
if (obj.min <= value && obj.max >= value) {
toReturn = obj.color;
@@ -104,9 +104,7 @@ const ProjectInfomap = () => {
const dispatch = CoreModules.useAppDispatch();
const [taskBoundaries, setTaskBoundaries] = useState(null);
const [buildingGeojson, setBuildingGeojson] = useState(null);
- const projectTaskBoundries = CoreModules.useAppSelector(
- (state) => state.project.projectTaskBoundries
- );
+ const projectTaskBoundries = CoreModules.useAppSelector((state) => state.project.projectTaskBoundries);
const taskInfo = CoreModules.useAppSelector((state) => state.task.taskInfo);
const federalWiseProjectCount = taskInfo?.map((task) => ({
@@ -114,16 +112,12 @@ const ProjectInfomap = () => {
count: task.submission_count,
}));
- const projectBuildingGeojson = CoreModules.useAppSelector(
- (state) => state.project.projectBuildingGeojson
- );
- const selectedTask = CoreModules.useAppSelector(
- (state) => state.task.selectedTask
- );
+ const projectBuildingGeojson = CoreModules.useAppSelector((state) => state.project.projectBuildingGeojson);
+ const selectedTask = CoreModules.useAppSelector((state) => state.task.selectedTask);
const params = CoreModules.useParams();
const encodedId = params.projectId;
const decodedId = environment.decode(encodedId);
- const legendColorArray = colorRange(federalWiseProjectCount, "4");
+ const legendColorArray = colorRange(federalWiseProjectCount, '4');
const { mapRef, map } = useOLMap({
center: [0, 0],
zoom: 4,
@@ -183,13 +177,11 @@ const ProjectInfomap = () => {
if (!taskBoundaries) return;
const filteredSelectedTaskGeojson = {
...basicGeojsonTemplate,
- features: taskBoundaries?.features?.filter(
- (task) => task.properties.uid === selectedTask
- ),
+ features: taskBoundaries?.features?.filter((task) => task.properties.uid === selectedTask),
};
const vectorSource = new VectorSource({
features: new GeoJSON().readFeatures(filteredSelectedTaskGeojson, {
- featureProjection: get("EPSG:3857"),
+ featureProjection: get('EPSG:3857'),
}),
});
var extent = vectorSource.getExtent();
@@ -205,9 +197,7 @@ const ProjectInfomap = () => {
});
dispatch(
- ProjectBuildingGeojsonService(
- `${environment.baseApiUrl}/projects/${decodedId}/features?task_id=${selectedTask}`
- )
+ ProjectBuildingGeojsonService(`${environment.baseApiUrl}/projects/${decodedId}/features?task_id=${selectedTask}`),
);
}, [selectedTask]);
@@ -219,18 +209,13 @@ const ProjectInfomap = () => {
(style, feature, resolution) => {
const stylex = { ...style };
stylex.fillOpacity = 80;
- const getFederal = federalWiseProjectCount?.find(
- (d) => d.code === feature.getProperties().uid
- );
+ const getFederal = federalWiseProjectCount?.find((d) => d.code === feature.getProperties().uid);
const getFederalCount = getFederal?.count;
stylex.labelMaxResolution = 1000;
stylex.showLabel = true;
// stylex.labelField = 'district_code';
// stylex.customLabelText = getFederalName;
- const choroplethColor = getChoroplethColor(
- getFederalCount,
- legendColorArray
- );
+ const choroplethColor = getChoroplethColor(getFederalCount, legendColorArray);
stylex.fillColor = choroplethColor;
return getStyles({
style: stylex,
@@ -238,23 +223,23 @@ const ProjectInfomap = () => {
resolution,
});
},
- [federalWiseProjectCount]
+ [federalWiseProjectCount],
);
- map?.on("loadstart", function () {
- map.getTargetElement().classList.add("spinner");
+ map?.on('loadstart', function () {
+ map.getTargetElement().classList.add('spinner');
});
- map?.on("loadend", function () {
- map.getTargetElement().classList.remove("spinner");
+ map?.on('loadend', function () {
+ map.getTargetElement().classList.remove('spinner');
});
return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/frontend/fmtm_openlayer_map/src/components/QrcodeComponent.jsx b/src/frontend/src/components/QrcodeComponent.jsx
similarity index 53%
rename from src/frontend/fmtm_openlayer_map/src/components/QrcodeComponent.jsx
rename to src/frontend/src/components/QrcodeComponent.jsx
index 02217c068a..57ebe37fcd 100755
--- a/src/frontend/fmtm_openlayer_map/src/components/QrcodeComponent.jsx
+++ b/src/frontend/src/components/QrcodeComponent.jsx
@@ -1,12 +1,11 @@
-import React, { useState } from "react";
-import BasicCard from "fmtm/BasicCard";
+import React, { useState } from 'react';
+import BasicCard from '../utilities/BasicCard';
// import Activities from "./Activities";
-import environment from "fmtm/environment";
-import { ProjectFilesById } from "../api/Files";
-import { ShareSocial } from "react-share-social";
-import CoreModules from "fmtm/CoreModules";
-import AssetModules from "fmtm/AssetModules";
-import { HomeActions } from "fmtm/HomeSlice";
+import environment from '../environment';
+import { ProjectFilesById } from '../api/Files';
+import CoreModules from '../shared/CoreModules';
+import AssetModules from '../shared/AssetModules';
+import { HomeActions } from '../store/slices/HomeSlice';
const TasksComponent = ({ type, task, defaultTheme }) => {
const dispatch = CoreModules.useAppDispatch();
@@ -14,90 +13,65 @@ const TasksComponent = ({ type, task, defaultTheme }) => {
const params = CoreModules.useParams();
const { loading, qrcode } = ProjectFilesById(
`${environment.baseApiUrl}/projects/${environment.decode(params.id)}`,
- task
+ task,
);
const socialStyles = {
copyContainer: {
- border: `1px solid ${defaultTheme.palette.info["main"]}`,
- background: defaultTheme.palette.info["info"],
- color: defaultTheme.palette.info["main"],
+ border: `1px solid ${defaultTheme.palette.info['main']}`,
+ background: defaultTheme.palette.info['info'],
+ color: defaultTheme.palette.info['main'],
},
title: {
- color: defaultTheme.palette.info["main"],
- fontStyle: "italic",
+ color: defaultTheme.palette.info['main'],
+ fontStyle: 'italic',
},
};
return (
-
+
-
-
- {`Qrcode`}
-
+
+
+ {`Qrcode`}
-
- {qrcode == "" ? (
+
+ {qrcode == '' ? (
) : (
- 
+
)}
-
-
+
+
{
const linkSource = `data:image/png;base64,${qrcode}`;
- const downloadLink = document.createElement("a");
+ const downloadLink = document.createElement('a');
downloadLink.href = linkSource;
downloadLink.download = `Task_${task}`;
downloadLink.click();
}}
- disabled={qrcode == "" ? true : false}
+ disabled={qrcode == '' ? true : false}
color="info"
aria-label="download qrcode"
>
-
{
color="error"
onClick={() => {
document.location.href =
- "intent://getodk.org/#Intent;scheme=app;package=org.odk.collect.android;end";
+ 'intent://getodk.org/#Intent;scheme=app;package=org.odk.collect.android;end';
}}
>
Go To ODK
-
+
{
dispatch(
HomeActions.SetSnackBar({
open: true,
message: `not implemented`,
- variant: "warning",
+ variant: 'warning',
duration: 3000,
- })
+ }),
);
// setOpen(true);
}}
- disabled={qrcode == "" ? true : false}
+ disabled={qrcode == '' ? true : false}
color="info"
aria-label="share qrcode"
>
-
{/* {
+ const { mapRef, map } = useOLMap({
+ // center: fromLonLat([85.3, 27.7]),
+ center: [0, 0],
+ zoom: 4,
+ maxZoom: 25,
+ });
+
+ return (
+
+
+
+
+ );
+};
+
+SubmissionMap.propTypes = {};
+
+export default SubmissionMap;
diff --git a/src/frontend/fmtm_openlayer_map/src/layers/TasksLayer.jsx b/src/frontend/src/components/TasksLayer.jsx
similarity index 65%
rename from src/frontend/fmtm_openlayer_map/src/layers/TasksLayer.jsx
rename to src/frontend/src/components/TasksLayer.jsx
index b10514bc9e..34bea911a8 100755
--- a/src/frontend/fmtm_openlayer_map/src/layers/TasksLayer.jsx
+++ b/src/frontend/src/components/TasksLayer.jsx
@@ -1,12 +1,12 @@
-import React, { useEffect } from "react";
-import { Vector as VectorLayer } from "ol/layer.js";
-import GeoJSON from "ol/format/GeoJSON";
-import { Vector as VectorSource } from "ol/source.js";
-import { geojsonObjectModel } from "../models/geojsonObjectModel";
-import MapStyles from "../hooks/MapStyles";
-import environment from "fmtm/environment";
-import CoreModules from "fmtm/CoreModules";
-import { get } from "ol/proj";
+import React, { useEffect } from 'react';
+import { Vector as VectorLayer } from 'ol/layer.js';
+import GeoJSON from 'ol/format/GeoJSON';
+import { Vector as VectorSource } from 'ol/source.js';
+import { geojsonObjectModel } from '../models/geojsonObjectModel';
+import MapStyles from '../hooks/MapStyles';
+import environment from '../environment';
+import CoreModules from '../shared/CoreModules';
+import { get } from 'ol/proj';
let geojsonObject;
const TasksLayer = (map, view, feature) => {
const params = CoreModules.useParams();
@@ -15,37 +15,31 @@ const TasksLayer = (map, view, feature) => {
useEffect(() => {
if (state.projectTaskBoundries.length != 0 && map != undefined) {
- if (
- state.projectTaskBoundries.findIndex(
- (project) => project.id == environment.decode(params.id)
- ) != -1
- ) {
+ if (state.projectTaskBoundries.findIndex((project) => project.id == environment.decode(params.id)) != -1) {
geojsonObject = null;
- const index = state.projectTaskBoundries.findIndex(
- (project) => project.id == environment.decode(params.id)
- );
+ const index = state.projectTaskBoundries.findIndex((project) => project.id == environment.decode(params.id));
const styleFunction = function (feature) {
- let id = feature.getId().toString().replace("_", ",");
- geojsonStyles[id.split(",")[1]];
- return geojsonStyles[id.split(",")[1]];
+ let id = feature.getId().toString().replace('_', ',');
+ geojsonStyles[id.split(',')[1]];
+ return geojsonStyles[id.split(',')[1]];
};
geojsonObject = { ...geojsonObjectModel };
- geojsonObject["features"] = [];
+ geojsonObject['features'] = [];
state.projectTaskBoundries[index].taskBoundries.forEach((task) => {
- geojsonObject["features"].push({
+ geojsonObject['features'].push({
id: `${task.id}_${task.task_status_str}`,
type: task.outline_geojson.type,
geometry: task.outline_geojson.geometry,
properties: { centroid: task.bbox },
});
});
- console.log(geojsonObject, "geojsonObject");
- console.log(state.projectTaskBoundries, "projectTaskBoundries");
+ console.log(geojsonObject, 'geojsonObject');
+ console.log(state.projectTaskBoundries, 'projectTaskBoundries');
const vectorSource = new VectorSource({
features: new GeoJSON().readFeatures(geojsonObject, {
- featureProjection: get("EPSG:3857"),
+ featureProjection: get('EPSG:3857'),
}),
});
@@ -79,8 +73,8 @@ const TasksLayer = (map, view, feature) => {
padding: [50, 50, 50, 200], // Optional padding around the extent
});
map.addLayer(vectorLayer);
- map.on("loadend", function () {
- map.getTargetElement().classList.remove("spinner");
+ map.on('loadend', function () {
+ map.getTargetElement().classList.remove('spinner');
});
}
}
diff --git a/src/frontend/fmtm_openlayer_map/src/components/TasksMap/TasksMap.jsx b/src/frontend/src/components/TasksMap/TasksMap.jsx
similarity index 71%
rename from src/frontend/fmtm_openlayer_map/src/components/TasksMap/TasksMap.jsx
rename to src/frontend/src/components/TasksMap/TasksMap.jsx
index 0f7e0b622b..78322e2f3b 100644
--- a/src/frontend/fmtm_openlayer_map/src/components/TasksMap/TasksMap.jsx
+++ b/src/frontend/src/components/TasksMap/TasksMap.jsx
@@ -1,16 +1,14 @@
-import React from "react";
-import useOLMap from "../../hooks/useOlMap";
-import { MapContainer as MapComponent } from "../MapComponent/OpenLayersComponent";
-import LayerSwitcherControl from "../MapComponent/OpenLayersComponent/LayerSwitcher/index.js";
-import { VectorLayer } from "../MapComponent/OpenLayersComponent/Layers";
+import React from 'react';
+import useOLMap from '../../hooks/useOlMap';
+import { MapContainer as MapComponent } from '../MapComponent/OpenLayersComponent';
+import LayerSwitcherControl from '../MapComponent/OpenLayersComponent/LayerSwitcher/index.js';
+import { VectorLayer } from '../MapComponent/OpenLayersComponent/Layers';
function elastic(t) {
- return (
- Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1
- );
+ return Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1;
}
const basicGeojsonTemplate = {
- type: "FeatureCollection",
+ type: 'FeatureCollection',
features: [],
};
const TasksMap = ({ projectTaskBoundries, projectBuildingGeojson }) => {
@@ -23,17 +21,17 @@ const TasksMap = ({ projectTaskBoundries, projectBuildingGeojson }) => {
zoom: 4,
maxZoom: 25,
});
- console.log(projectTaskBoundries, "projectTaskBoundries");
+ console.log(projectTaskBoundries, 'projectTaskBoundries');
return (
-
+
) => void;
+ className?: string;
+ count?: number;
+ dataTip?: string;
+ icon?: React.ReactNode;
+}
+
+const btnStyle = (btnType, className) => {
+ switch (btnType) {
+ case 'primary':
+ return `${className} hover:fmtm-bg-red-700 fmtm-flex fmtm-px-4 fmtm-py-1 fmtm-bg-primaryRed fmtm-text-white fmtm-rounded-[8px] fmtm-w-full`;
+ case 'secondary':
+ return `hover:fmtm-bg-gray-100 fmtm-flex fmtm-bg-white fmtm-px-4 fmtm-py-1 fmtm-border border-[#E0E0E0] fmtm-rounded-[8px] ${className}`;
+
+ case 'other':
+ return `fmtm-py-1 fmtm-px-5 fmtm-bg-red-500 fmtm-text-white fmtm-rounded-lg hover:fmtm-bg-red-600`;
+
+ default:
+ return 'fmtm-primary';
+ }
+};
+const Button = ({ btnText, btnType, type, onClick, className, count, dataTip, icon }: IButton) => (
+ ) => void;
+ onKeyDown?: (event: React.KeyboardEvent) => void;
+ errorMsg?: string;
+ value: string;
+ placeholder?: string;
+ fieldType: string;
+ name?: string;
+ flag?: string;
+ classNames?: string;
+ maxRange?: string;
+ minRange?: string;
+ maxLength?: number;
+ disabled?: boolean;
+ required?: boolean;
+}
+
+function InputTextField({
+ id,
+ label,
+ onChange,
+ onKeyDown,
+ errorMsg,
+ value,
+ placeholder,
+ fieldType,
+ name,
+ flag,
+ classNames,
+ maxRange,
+ minRange,
+ maxLength,
+ disabled,
+ required,
+}: IInputTextFieldProps) {
+ return (
+ = ({ topic, options, direction, onChangeData }) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+
+
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = 'popper', ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => void;
+ errorMsg?: string;
+ value: string;
+ placeholder?: string;
+ name?: string;
+ classNames?: string;
+ maxLength?: number;
+ disabled?: boolean;
+ required?: boolean;
+}
+
+function TextArea({
+ id,
+ label,
+ rows,
+ onChange,
+ errorMsg,
+ value,
+ placeholder,
+ name,
+ classNames,
+ maxLength,
+ disabled,
+ required,
+}: IInputTextFieldProps) {
+ return (
+ (null);
+
+ const [extractOption, setExtractOption] = useState({});
+
+ const toggleStep = (step, url) => {
+ dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: step }));
+ navigate(url);
+ };
+
+ const [selectedFileName, setSelectedFileName] = useState('');
+
+ const changeFileHandler = (event) => {
+ const { files } = event.target;
+ setSelectedFileName(files[0].name);
+ };
+ return (
+
+
+
+);
+
+export default Button;
diff --git a/src/frontend/src/components/common/InputTextField.tsx b/src/frontend/src/components/common/InputTextField.tsx
new file mode 100644
index 0000000000..c029d6edb9
--- /dev/null
+++ b/src/frontend/src/components/common/InputTextField.tsx
@@ -0,0 +1,74 @@
+/* eslint-disable react/no-unstable-nested-components */
+import React from 'react';
+// import PropTypes from 'prop-types';
+export const blockInvalidChar = (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault();
+
+interface IInputTextFieldProps {
+ id?: string;
+ label: string;
+ onChange: (event: React.ChangeEvent
+
+ );
+}
+
+export default InputTextField;
diff --git a/src/frontend/src/components/common/RadioButton.tsx b/src/frontend/src/components/common/RadioButton.tsx
new file mode 100644
index 0000000000..7bf3f6a207
--- /dev/null
+++ b/src/frontend/src/components/common/RadioButton.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface IRadioButton {
+ name: string;
+ value: string;
+ label: string | number;
+ icon?: React.ReactNode;
+}
+
+interface RadioButtonProps {
+ topic?: string;
+ options: IRadioButton[];
+ direction: 'row' | 'column';
+ onChangeData: (value: string) => void;
+}
+
+const RadioButton: React.FC
+
+ {label}
+ {required &&*
} +
+
+
+ {errorMsg && {errorMsg}
} +
+
+);
+
+export default RadioButton;
diff --git a/src/frontend/src/components/common/Select.tsx b/src/frontend/src/components/common/Select.tsx
new file mode 100644
index 0000000000..b76f343b30
--- /dev/null
+++ b/src/frontend/src/components/common/Select.tsx
@@ -0,0 +1,110 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown } from 'lucide-react';
+
+import { cn } from '../../utilfunctions/shadcn';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef
+
+ {topic}
+
+ {options.map((option) => {
+ return (
+
+
+ onChangeData(e.target.value)}
+ />
+
+ );
+ })}
+ {option.label}
+ {option.icon && option.icon} +
+ {data?.map((step: IIndividualStep, i = 1) => {
+ const index = i + 1;
+ return (
+
+ );
+};
+
+export default StepSwitcher;
diff --git a/src/frontend/main/src/components/common/Switch.tsx b/src/frontend/src/components/common/Switch.tsx
similarity index 100%
rename from src/frontend/main/src/components/common/Switch.tsx
rename to src/frontend/src/components/common/Switch.tsx
diff --git a/src/frontend/src/components/common/TextArea.tsx b/src/frontend/src/components/common/TextArea.tsx
new file mode 100644
index 0000000000..b65fa21170
--- /dev/null
+++ b/src/frontend/src/components/common/TextArea.tsx
@@ -0,0 +1,61 @@
+/* eslint-disable react/no-unstable-nested-components */
+import React from 'react';
+
+interface IInputTextFieldProps {
+ id?: string;
+ label: string;
+ rows: number;
+ onChange: (event: React.ChangeEvent
+
+ );
+ })}
+
+
+
+
+
+
+ {step.label}
+{step.name}
+
+
+ = index ? 'fmtm-bg-primaryRed' : 'fmtm-bg-transparent'
+ }`}
+ onClick={() => toggleStep(step)}
+ >
+ = index ? 'fmtm-text-white' : 'fmtm-text-primaryRed'
+ } lg:fmtm-text-lg xl:fmtm-text-xl`}
+ />
+
+ {data?.length > index && (
+ = index ? 'fmtm-border-solid' : 'fmtm-border-dashed'
+ }`}
+ >
+ )}
+
+
+ );
+}
+
+export default TextArea;
diff --git a/src/frontend/src/components/createnewproject/CreateProjectHeader.tsx b/src/frontend/src/components/createnewproject/CreateProjectHeader.tsx
new file mode 100644
index 0000000000..8349fe3c23
--- /dev/null
+++ b/src/frontend/src/components/createnewproject/CreateProjectHeader.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import AssetModules from '../../shared/AssetModules.js';
+import { useNavigate } from 'react-router-dom';
+
+const CreateProjectHeader = () => {
+ const navigate = useNavigate();
+ return (
+
+
+ {label}
+ {required &&*
} +
+
+
+ {errorMsg && {errorMsg}
} +
+
+ );
+};
+
+export default CreateProjectHeader;
diff --git a/src/frontend/src/components/createnewproject/DataExtract.tsx b/src/frontend/src/components/createnewproject/DataExtract.tsx
new file mode 100644
index 0000000000..fe5df7b3a3
--- /dev/null
+++ b/src/frontend/src/components/createnewproject/DataExtract.tsx
@@ -0,0 +1,120 @@
+import React, { useRef, useState } from 'react';
+import Button from '../../components/common/Button';
+import { useDispatch } from 'react-redux';
+import { CommonActions } from '../../store/slices/CommonSlice';
+import RadioButton from '../../components/common/RadioButton';
+import AssetModules from '../../shared/AssetModules.js';
+import { useNavigate } from 'react-router-dom';
+
+const dataExtractOptions = [
+ { name: 'data_extract', value: 'osm_data_extract', label: 'Use OSM data extract' },
+ { name: 'data_extract', value: 'custom_data_extract', label: 'Upload custom data extract' },
+];
+
+const osmFeatureTypeOptions = [
+ { name: 'osm_feature_type', value: 'point_centroid', label: 'Point/Centroid' },
+ { name: 'osm_feature_type', value: 'line', label: 'Line' },
+ { name: 'osm_feature_type', value: 'polygon', label: 'Polygon' },
+];
+
+const DataExtract = ({ flag }) => {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const fileInputRef = useRef
+
+
+
+ CREATE NEW PROJECT
++ Setup your field mapping project following the five comprehensive steps. +
+ navigate('/')}
+ >
+
+
+
+ );
+};
+
+export default DataExtract;
diff --git a/src/frontend/main/src/components/createproject/DrawSvg.tsx b/src/frontend/src/components/createnewproject/DrawSvg.tsx
similarity index 100%
rename from src/frontend/main/src/components/createproject/DrawSvg.tsx
rename to src/frontend/src/components/createnewproject/DrawSvg.tsx
diff --git a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
new file mode 100644
index 0000000000..d73095ff40
--- /dev/null
+++ b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
@@ -0,0 +1,218 @@
+import TextArea from '../../components/common/TextArea';
+import InputTextField from '../../components/common/InputTextField';
+import React, { useEffect } from 'react';
+import { CreateProjectActions } from '../../store/slices/CreateProjectSlice';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { useAppSelector } from '../../types/reduxTypes';
+import useForm from '../../hooks/useForm';
+import CreateProjectValidation from '../../components/createproject/validation/CreateProjectValidation';
+import Button from '../../components/common/Button';
+import { CommonActions } from '../../store/slices/CommonSlice';
+import AssetModules from '../../shared/AssetModules.js';
+import { createPopup } from '../../utilfunctions/createPopup';
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '../../components/common/Select';
+import { OrganisationService } from '../../api/CreateProjectService';
+import environment from '../../environment';
+
+const ProjectDetailsForm = ({ flag }) => {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+
+ const projectDetails: any = useAppSelector((state) => state.createproject.projectDetails);
+ const organizationListData: any = useAppSelector((state) => state.createproject.organizationList);
+
+ const organizationList = organizationListData.map((item) => ({ label: item.name, value: item.id }));
+
+ const submission = () => {
+ dispatch(CreateProjectActions.SetIndividualProjectDetailsData(values));
+ dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: 2 }));
+ navigate('/upload-area');
+ };
+
+ const { handleSubmit, handleCustomChange, values, errors }: any = useForm(
+ projectDetails,
+ submission,
+ CreateProjectValidation,
+ );
+
+ const onFocus = () => {
+ dispatch(OrganisationService(`${environment.baseApiUrl}/organization/`));
+ };
+ useEffect(() => {
+ window.addEventListener('focus', onFocus);
+ onFocus();
+ // Calls onFocus when the window first loads
+ return () => {
+ window.removeEventListener('focus', onFocus);
+ };
+ }, []);
+
+ const hashtagPrefix = '#FMTM ';
+
+ // Checks if hashtag value starts with hotosm-fmtm'
+ const handleHashtagOnChange = (e) => {
+ let enteredText = e.target.value;
+ if (!enteredText.startsWith(hashtagPrefix)) {
+ handleCustomChange('hashtags', hashtagPrefix);
+ return;
+ }
+ handleCustomChange('hashtags', enteredText);
+ };
+
+ // Doesn't let the user to press 'Backspace' or 'Delete' if input value is 'hotosm-fmtm '
+ const handleHashtagKeyPress = (e) => {
+ if (
+ ((e.key === 'Backspace' || e.key === 'Delete') && values.hashtags === hashtagPrefix) ||
+ (e.ctrlKey && e.key === 'Backspace')
+ ) {
+ e.preventDefault();
+ }
+ };
+
+ return (
+
+
+ Data Extract
++ Fill in your project basic information such as name, description, hashtag, etc. + To complete the first step, you will need the account credentials of ODK central server.{' '} + Here are the instructions for setting up a Central ODK Server on Digital Ocean. +
+
+
+
+
+
+
+
+
+ setExtractOption(value)}
+ />
+ {extractOption === 'osm_data_extract' && (
+
+
+ console.log(value)}
+ />
+
+ )}
+ {extractOption === 'custom_data_extract' && (
+
+
+ )}
+
+
+ {selectedFileName && (
+ fileInputRef?.current?.click()}
+ className="fmtm-bg-primaryRed fmtm-px-4 fmtm-py-1 fmtm-text-white fmtm-rounded-md"
+ >
+
+
+
+ setSelectedFileName('')} />
+
+
+
+ )}
+ {selectedFileName}
++ *The supported file formats are zipped shapefile, geojson or kml files. +
+
+
+
+
+
+
+ Project Details
++ Fill in your project basic information such as name, description, hashtag, etc. + To complete the first step, you will need the account credentials of ODK central server.{' '} + Here are the instructions for setting up a Central ODK Server on Digital Ocean. +
+