feat(frontend): basemap generation on project creation (skeleton ui)

hotosm · Jan 8, 2024 · 050b051 · 050b051
1 parent 07eae70
commit 050b051
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 32 deletions.
diff --git a/src/frontend/src/api/CreateProjectService.ts b/src/frontend/src/api/CreateProjectService.ts
@@ -16,6 +16,7 @@ const CreateProjectService: Function = (
   formUpload: any,
   dataExtractFile: any,
   lineExtractFile: any,
+  basemapSelection: string,
 ) => {
   return async (dispatch) => {
     dispatch(CreateProjectActions.CreateProjectLoading(true));
@@ -73,6 +74,14 @@ const CreateProjectService: Function = (
             dataExtractFile,
           ),
         );
+        if (basemapSelection !== '') {
+          await dispatch(
+            GenerateBasemapsService(
+              `${import.meta.env.VITE_API_URL}/tiles/${resp.id}/init?source=${basemapSelection}`,
+              payload,
+            ),
+          );
+        }
 
         dispatch(CommonActions.SetLoading(false));
         dispatch(CreateProjectActions.CreateProjectLoading(true));
@@ -201,6 +210,26 @@ const GenerateProjectQRService: Function = (url: string, payload: any, formUploa
     await postUploadArea(url, payload, formUpload);
   };
 };
+const GenerateBasemapsService: Function = (url: string, payload: any) => {
+  return async (dispatch) => {
+    const triggerBasemapDownloads = async (url, payload) => {
+      try {
+        await axios.post(url);
+      } catch (error: any) {
+        dispatch(
+          CommonActions.SetSnackBar({
+            open: true,
+            message: JSON.stringify(error?.response?.data?.detail),
+            variant: 'error',
+            duration: 2000,
+          }),
+        );
+      }
+    };
+
+    await triggerBasemapDownloads(url, payload);
+  };
+};
 
 const OrganisationService: Function = (url: string) => {
   return async (dispatch) => {
@@ -516,6 +545,7 @@ export {
   CreateProjectService,
   FormCategoryService,
   GenerateProjectQRService,
+  GenerateBasemapsService,
   OrganisationService,
   UploadCustomXLSFormService,
   GenerateProjectLog,

diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -61,6 +61,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
     (state) => state.createproject.taskSplittingGeojsonLoading,
   );
   const isTasksGenerated = CoreModules.useAppSelector((state) => state.createproject.isTasksGenerated);
+  const basemapSelection = CoreModules.useAppSelector((state) => state.createproject.basemapSelection);
 
   const toggleStep = (step, url) => {
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: step }));
@@ -139,6 +140,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
         customFormFile,
         customPolygonUpload,
         customLineUpload,
+        basemapSelection,
       ),
     );
     dispatch(CreateProjectActions.SetIndividualProjectDetailsData({ ...projectDetails, ...formValues }));

diff --git a/src/frontend/src/components/createnewproject/UploadArea.tsx b/src/frontend/src/components/createnewproject/UploadArea.tsx
@@ -42,6 +42,7 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile }) => {
   const uploadAreaSelection = useAppSelector((state) => state.createproject.uploadAreaSelection);
   const drawToggle = useAppSelector((state) => state.createproject.drawToggle);
   const totalAreaSelection = useAppSelector((state) => state.createproject.totalAreaSelection);
+  const basemapSelection = useAppSelector((state) => state.createproject.basemapSelection);
 
   const submission = () => {
     dispatch(CreateProjectActions.SetIndividualProjectDetailsData(formValues));
@@ -205,40 +206,24 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile }) => {
                   btnText="Upload a Geojson"
                   errorMsg={errors.uploadedAreaFile}
                 />
-                // <div className="fmtm-mt-5 fmtm-pb-3">
-                //   <div className="fmtm-flex fmtm-items-center fmtm-gap-4">
-                //     <label
-                //       id="file-input"
-                //       className="fmtm-bg-primaryRed fmtm-text-white fmtm-px-4 fmtm-py-1 fmtm-rounded-md fmtm-cursor-pointer"
-                //     >
-                //       <p>Select a file</p>
-                //       <input
-                //         id="upload-area-geojson-file"
-                //         ref={geojsonFileRef}
-                //         type="file"
-                //         className="fmtm-hidden"
-                //         onChange={changeFileHandler}
-                //         accept=".geojson, .json"
-                //       />
-                //     </label>
-                //     <div className="fmtm-rounded-full fmtm-p-1 hover:fmtm-bg-slate-100 fmtm-duration-300 fmtm-cursor-pointer">
-                //       <AssetModules.ReplayIcon className="fmtm-text-gray-600" onClick={() => resetFile()} />
-                //     </div>
-                //   </div>
-                //   {geojsonFile && (
-                //     <div className="fmtm-mt-2">
-                //       <p>{geojsonFile?.name}</p>
-                //     </div>
-                //   )}
-                //   <p className="fmtm-text-gray-700 fmtm-mt-3">
-                //     *The supported file formats are zipped shapefile, geojson or kml files.
-                //   </p>
-                //   <p className="fmtm-text-gray-700 fmtm-pt-8">
-                //     Total Area: <span className="fmtm-font-bold">234 sq.km</span>
-                //   </p>
-                // </div>
               )}
             </div>
+            <div>
+              <p className="fmtm-text-gray-700 fmtm-pt-5 fmtm-pb-5 fmtm-font-bold">
+                Optional: generate basemaps for tasks
+              </p>
+              <select
+                value={basemapSelection}
+                onChange={(e) => handleCustomChange('basemapSelection', e.target.value)}
+                className="fmtm-mr-2"
+              >
+                <option value="">No</option>
+                <option value="esri">ESRI</option>
+                <option value="bing">Bing</option>
+                <option value="google">Google</option>
+                <option value="topo">Topographic</option>
+              </select>
+            </div>
             <div className="fmtm-flex fmtm-gap-5 fmtm-mx-auto fmtm-mt-10 fmtm-my-5">
               <Button
                 btnText="PREVIOUS"

diff --git a/src/frontend/src/store/slices/CreateProjectSlice.ts b/src/frontend/src/store/slices/CreateProjectSlice.ts
@@ -48,6 +48,7 @@ export const initialState: CreateProjectStateTypes = {
   isUnsavedChanges: false,
   canSwitchCreateProjectSteps: false,
   isTasksGenerated: { divide_on_square: false, task_splitting_algorithm: false },
+  basemapSelection: '',
 };
 
 const CreateProject = createSlice({
@@ -89,6 +90,7 @@ const CreateProject = createSlice({
       state.uploadAreaSelection = null;
       state.dividedTaskGeojson = null;
       state.dividedTaskLoading = false;
+      state.basemapSelection = '';
     },
     UploadAreaLoading(state, action) {
       state.projectAreaLoading = action.payload;

diff --git a/src/frontend/src/store/types/ICreateProject.ts b/src/frontend/src/store/types/ICreateProject.ts
@@ -34,6 +34,7 @@ export type CreateProjectStateTypes = {
   isUnsavedChanges: boolean;
   canSwitchCreateProjectSteps: boolean;
   isTasksGenerated: {};
+  basemapSelection: string;
 };
 export type ValidateCustomFormResponse = {
   detail: { message: string; possible_reason: string };