Revize aac857cf

re #10871: PlanViewPage: CastlePlanView init : get map image

package.json

@@ -26 +26 @@
     "react-native-deck-swiper": "^1.1.7",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-logs": "^5.0.1",
+    "react-native-maps": "^1.8.0",
     "react-native-multiple-select": "^0.5.12",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
@@ -43 +44 @@
     "@tsconfig/react-native": "^2.0.3",
     "@types/jest": "^29.5.0",
     "@types/react": "~18.2.14",
+    "@types/react-native-maps": "^0.24.2",
     "@types/react-test-renderer": "^18.0.0",
     "typescript": "^5.1.3"
   },

src/api/planservice.ts

@@ -13 +13 @@
     )
 }
 
-
-
+export const getPlanFloorImageRequest = async (floorId: string) => {
+    return await axiosInstance.get(`/downloads/${floorId}`);
+}
 
 /*
-
-
 // inventories
 @activeTab: index of selected inventory: result: Inventories (starting from 0)
 

src/components/plan/CastlePlanView.tsx

@@ +1 @@
+import { VStack, Box, Text, HStack, ScrollView, Flex, Button, CloseIcon, IconButton, TextArea, useToast } from "native-base";
+import { Note } from "../../types/note";
+import React, { useCallback, useState } from "react";
+import { Floor, Room } from "../../types/plan";
+
+import MapView, { Marker } from 'react-native-maps';
+import Svg, { Image, SvgXml } from 'react-native-svg';
+import SvgImage from "react-native-svg/lib/typescript/elements/Image";
+
+const CastlePlanView = (props: { mapImage : string, selectedRoom?: Room }) => {
+
+    const { mapImage, selectedRoom } = props
+
+    console.log(mapImage.substring(0,500))
+
+    return (
+        <Box h={300}>
+            {/* Display the background image */}
+            <SvgXml
+                xml={mapImage}
+            />
+
+            {/* Display the MapView on top of the background image */}
+            <MapView
+                style={{ flex: 1 }}
+            // Add other map-related props as needed
+            >
+            </MapView>
+        </Box>
+    );
+}
+
+export default CastlePlanView

src/components/plan/PlanView.tsx

@@ -1 @@
-import { VStack, Box, Text, HStack, ScrollView, Flex, Button, CloseIcon, IconButton, TextArea, useToast, Image } from "native-base";
-import { Note } from "../../types/note";
-import React, { useCallback, useState } from "react";
-
-
-
-
-const PlanView = (props: { imageUrl: string }) => {
-    return (
-        <Image size={250} alt="image" source={{ uri: props.imageUrl }} />
-    );
-}
-
-export default PlanView

src/pages/PlanViewPage.tsx

@@ -8 +8 @@
 import { Box, CloseIcon, Select, useToast, Button, Flex, Text, Center, VStack, ScrollView } from "native-base"
 import { ErrorToast } from "../components/toast/ErrorToast"
 import { Floor, Place, Room } from "../types/plan"
-import { getFloorList, getPlanInventories, getPlanItems } from "../stores/actions/planThunks"
+import { getFloorList, getPlanFloorImage, getPlanInventories, getPlanItems } from "../stores/actions/planThunks"
 import { login } from "../stores/actions/userThunks"
 import { getPlanItemsRequest } from "../api/planservice"
 import ItemPreview from "../components/listView/ItemPreview"
-import PlanView from "../components/plan/PlanView"
+import PlanView from "../components/plan/CastlePlanView"
 import { BASE_API_URL } from "../api/constants"
 import ListView from "../components/listView/ListView"
 import SearchForm from "../components/search/SearchForm"
 import { loadItemsByInventory } from "../stores/actions/listViewThunks"
+import CastlePlanView from "../components/plan/CastlePlanView"
 
 const PlanViewPage = ({ route, navigation }: DrawerScreenProps<RootDrawerParamList, 'Plan'>) => {
 
@@ -46 +47 @@
   const dataLoading = useSelector((state: RootState) => state.planViewState.itemListLoading)
   const pagination = useSelector((state: RootState) => state.planViewState.itemListPagination)
 
+  const floorMapImage = useSelector((state: RootState) => state.planViewState.mapImage)
+  const floorMapImageLoading = useSelector((state: RootState) => state.planViewState.mapImageLoading)
+
   const toast = useToast();
 
   useEffect(() => {
@@ -62 +66 @@
         // if (!itemListLoading) {
         //   searchSubmit(currentPage, route.params.roomId, route.params.placeId)
         // }
-
       }
       else {
         selectFloor(DEFAULT_FLOOR)
@@ -78 +81 @@
     }
   }, [selectedPlace, selectedRoom])
 
+  useEffect(() => {
+    if (selectedFloor) {
+      console.log("Dispatching getFloorImage " + selectedFloor.id)
+      dispatch(getPlanFloorImage(selectedFloor.id))
+    }
+  }, [selectedFloor])
+
 
   useEffect(() => {
     if (lastError) {
@@ -283 +293 @@
           {/* Plan */}
           {/* temporary prototype */}
 
-          {/* {selectedFloor && !floorListLoading &&
-            <PlanView imageUrl={BASE_API_URL + "/downloads/" + selectedFloor.id} />
-          } */}
+          {selectedFloor && !floorListLoading && (
+            floorMapImageLoading ?
+              <LoadingBox text="Loading castle plan" />
+              :
+              floorMapImage && <CastlePlanView mapImage={floorMapImage} selectedRoom={selectedRoom} />
+          )
+          }
 
           {/* Item List */}
           <>

src/stores/actions/planThunks.ts

@@ -1 +1 @@
 import { createAsyncThunk } from "@reduxjs/toolkit"
 import { SortOptions } from "../../types/general";
 import { Note } from "../../types/note";
-import { getPlanAllRequest, getPlanItemsRequest } from "../../api/planservice";
+import { getPlanAllRequest, getPlanFloorImageRequest, getPlanItemsRequest } from "../../api/planservice";
 import { Floor, Room } from "../../types/plan";
 import { ItemPreviewType } from "../../types/listViewTypes";
 import { StringLiteralType } from "typescript";
@@ -64 +64 @@
                 const response = await getPlanItemsRequest({ cursor: 0, room: params.room, items: 1, place: params.place })
                 if (response.status === 200) {
 
-                    console.log("response")
-                    console.log(response.data.pagination.inventories)
-
                     const inventories: Inventory[] = response.data.pagination.inventories
                     const allInventoriesRecords = response.data.pagination.records
 
@@ -113 +110 @@
                 return Promise.reject(err.response.data)
             }
 
+        } catch (err: any) {
+            console.log(err);
+            return Promise.reject(err.response.data)
+        }
+    }
+)
+
+export const getPlanFloorImage = createAsyncThunk(
+    "plan/getPlanFloorImage",
+    async (floorId: string) => {
+        try {
+            try {
+                const response = await getPlanFloorImageRequest(floorId)
+
+                if (response.status === 200) {
+                    return response.data
+                } else {
+                    return Promise.reject(response.data ? response.data : "Get plan floor image request failed")
+                }
+            } catch (err: any) {
+                return Promise.reject(err.response.data)
+            }
+
         } catch (err: any) {
             console.log(err);
             return Promise.reject(err.response.data)

src/stores/reducers/planSlice.ts

@@ -1 +1 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit"
 import { PlanViewState } from "../../types/plan";
-import { getFloorList, getPlanInventories, getPlanItems } from "../actions/planThunks";
+import { getFloorList, getPlanFloorImage, getPlanInventories, getPlanItems } from "../actions/planThunks";
 
 const initialState: PlanViewState = {
     lastError: "",
@@ -96 +96 @@
             state.itemInventoriesLoading = false;
             state.lastError = action.error.message
         })
+
+        // getPlanFloorImage
+        builder.addCase(getPlanFloorImage.fulfilled, (state, action) => {
+            state.mapImage = action.payload
+            state.mapImageLoading = false
+        })
+        builder.addCase(getPlanFloorImage.pending, (state, action) => {
+            state.mapImageLoading = true
+        })
+        builder.addCase(getPlanFloorImage.rejected, (state, action) => {
+            state.mapImageLoading = false;
+            state.lastError = action.error.message
+        })
     }
 })
 

src/types/plan.ts

@@ -51 +51 @@
     itemList: Record<string, ItemPreviewType[]>
 
     // plan
-    // @TODO
-
+    mapImage?: string
+    mapImageLoading?: boolean
 
     // last error
     lastError?: string