Revize 7a3ad946

re #10871: PlanViewPage: Tabs Castle/Results, styling

src/pages/PlanViewPage.tsx

@@ -5 +5 @@
 import { log } from "../logging/logger"
 import { DrawerScreenProps } from "@react-navigation/drawer"
 import { RootDrawerParamList } from "./Navigation"
-import { Box, CloseIcon, Select, useToast, Button, Flex, Text, Center, VStack, ScrollView, View } from "native-base"
+import { Box, CloseIcon, Select, useToast, Button, Flex, Text, Center, VStack, ScrollView, View, HStack, Divider } from "native-base"
 import { ErrorToast } from "../components/toast/ErrorToast"
 import { Floor, Place, Room } from "../types/plan"
 import { getFloorList, getPlanFloorImage, getPlanInventories, getPlanItems } from "../stores/actions/planThunks"
@@ -19 +19 @@
 import { loadItemsByInventory } from "../stores/actions/listViewThunks"
 import CastlePlanView from "../components/plan/CastlePlanView"
 
+import { Dimensions } from 'react-native';
+
 const PlanViewPage = ({ route, navigation }: DrawerScreenProps<RootDrawerParamList, 'Plan'>) => {
 
   const dispatch = useDispatch<AppDispatch>()
@@ -32 +34 @@
 
   const DEFAULT_FLOOR = "first_floor"
 
+  const [castlePlanShown, setCastlePlanShown] = useState<boolean>(true)
+
   const [selectedFloor, setSelectedFloor] = useState<Floor | undefined>(undefined)
   const [selectedRoom, setSelectedRoom] = useState<Room | undefined>(undefined)
   const [selectedPlace, setSelectedPlace] = useState<Place | undefined>(undefined)
@@ -182 +186 @@
 
   return (
     <Box flex={1}>
-      {!castlePlanFullScreenMode ? (
-        <ScrollView flex={1} w={"100%"} nestedScrollEnabled={!isInteractingWithCastlePlan}>
-          <VStack space={1} mr={4}>
-
-            {/* Selection */}
-
-            {
-              floorListLoading ?
-                <LoadingBox text="Floor list loading"></LoadingBox>
-                :
-                <>
-                  {/* Floor */}
-                  <Select
-                    mt={2.5}
-                    ml={2.5}
-                    mr={2.5}
+      {!castlePlanFullScreenMode || !castlePlanShown ? (
+        <Box h={Dimensions.get('window').height - 55}>
+          <ScrollView flex={1} w={"100%"} nestedScrollEnabled={!isInteractingWithCastlePlan}>
+            <VStack space={1}>
+
+              {/* Selection */}
+
+              {
+                floorListLoading ?
+                  <LoadingBox text="Floor list loading"></LoadingBox>
+                  :
+                  <>
+                    {/* Floor */}
+                    <Select
+                      mt={2.5}
+                      ml={2.5}
+                      mr={2.5}
+
+                      placeholder={"Floor"}
+                      selectedValue={selectedFloor?.id}
+                      onValueChange={selectFloor}
+                      variant="rounded"
+                    >
+                      {floorList.map((floor, index) => {
+                        return (
+                          <Select.Item value={floor.id} label={floor.label} />
+                        );
+                      })}
+                    </Select>
+
+                    {/* Room */}
 
-                    placeholder={"Floor"}
-                    selectedValue={selectedFloor?.id}
-                    onValueChange={selectFloor}
-                    variant="rounded"
-                  >
-                    {floorList.map((floor, index) => {
-                      return (
-                        <Select.Item value={floor.id} label={floor.label} />
-                      );
-                    })}
-                  </Select>
-
-                  {/* Room */}
-                  {selectedFloor && selectedFloor.roomList && selectedFloor.roomList.length > 0 &&
                     < Select
                       mt={2.5}
                       ml={2.5}
                       mr={2.5}
 
+                      isDisabled={(selectedFloor && selectedFloor.roomList && selectedFloor.roomList.length) ? false : true}
+
                       placeholder={"Room"}
                       selectedValue={selectedRoom?.id.toString()}
                       onValueChange={(value: string) => selectRoom(parseInt(value))}
@@ -231 +238 @@
                         }
                       })}
                     </Select>
-                  }
 
-                  {/* Place */}
-                  {selectedRoom && selectedRoom.places && selectedRoom.places.length > 0 &&
+                    {/* Place */}
                     <Select
                       mt={2.5}
                       ml={2.5}
                       mr={2.5}
 
+                      isDisabled={(selectedRoom && selectedRoom.places && selectedRoom.places.length > 0) ? false : true}
                       placeholder={"Place"}
                       selectedValue={selectedPlace?.id.toString()}
                       onValueChange={(value: string) => selectPlace(parseInt(value))}
@@ -251 +257 @@
                         );
                       })}
                     </Select>
-                  }
 
-                  {/* Filter */}
-                  <Flex direction="row" alignItems="center" justify="flex-end"
-                    mt={2.5}
-                    ml={2.5}
-                    mr={3}
-                  >
-                    <Button
-                      endIcon={
-                        <CloseIcon size="xs" />
-                      }
-                      onPress={clearForm}
-                      variant="outline"
-                      color="primary.500"
-                      borderColor="primary.100"
-                      mr={2}
-                      borderRadius={15}
-                      size={"md"}
+                    {/* Filter */}
+                    <Flex direction="row" alignItems="center" justify="flex-end"
+                      mt={2.5}
+                      ml={2.5}
+                      mr={3}
                     >
-                      Reset
-                    </Button>
-                    <Button
-                      onPress={() => {
-                        if (selectedRoom && !selectedPlace) {
-                          searchSubmit(selectedRoom.id)
-                        }
-                        else if (selectedRoom && selectedPlace) {
-                          searchSubmit(selectedRoom.id, selectedPlace.id)
+                      <Button
+                        startIcon={
+                          <CloseIcon size="xs" />
                         }
+                        onPress={clearForm}
+                        variant="subtle"
+                        color="secondary.500"
+                        mr={2}
+                        borderRadius={10}
+                        size={"sm"}
+                      >
+                        Reset
+                      </Button>
+                      <Button
+                        onPress={() => {
+                          if (selectedRoom && !selectedPlace) {
+                            searchSubmit(selectedRoom.id)
+                          }
+                          else if (selectedRoom && selectedPlace) {
+                            searchSubmit(selectedRoom.id, selectedPlace.id)
+                          }
+
+                        }}
+                        backgroundColor={"#654B07"}
+                        variant="subtle"
+                        borderRadius={10}
+                        size={"sm"}
+                      >
+                        <Text color="white" fontSize={11}>
+                          Search
+                        </Text>
+                      </Button>
+                    </Flex>
+                  </>
+              }
 
-                      }}
-                      colorScheme="primary"
-                      background={"primary.100"}
-                      variant="solid"
-                      borderRadius={15}
-                      size={"md"}
-                    >
-                      Search
-                    </Button>
-                  </Flex>
-                </>
-            }
-
-            {/* Plan */}
-            {/* temporary prototype */}
-
-            {selectedFloor && !floorListLoading && (
-              floorMapImageLoading ?
-                <LoadingBox text="Loading castle plan" />
-                :
-                floorMapImage &&
-                <Box mt={2.5} ml={2.5}
-                  onTouchStart={() => setIsInteractingWithCastlePlan(true)}
-                  onTouchEnd={() => setIsInteractingWithCastlePlan(true)}>
-                  <CastlePlanView mapImage={floorMapImage} selectedRoom={selectedRoom} roomList={selectedFloor.roomList} />
-                </Box>
-            )
-            }
-
-            {/* Item List */}
-            <>
-              {inventoriesLoading ?
-                <LoadingBox text="Loading available inventories..." />
-                :
-                <Box mt={2.5} ml={2.5}>
-                  <ListView
-
-                    navigation={navigation}
-                    hideHeaderText
-
-                    inventories={inventories}
-                    numOfResults={numberOfResults}
-
-                    data={data}
-                    loadedPages={pagination ?? {}}
-                    inventoriesDataLoading={dataLoading ?? {}}
-                    handleLoadMoreItems={(inventoryName: string, cursor: number) => {
-                      dispatch(getPlanItems({ cursor: cursor, inventory: inventoryName, room: selectedRoom?.id ?? 0, place: selectedPlace?.id }))
-                    }
-                    }
-                  />
-                </Box>
+              {/* Plan */}
+              {castlePlanShown && selectedFloor && !floorListLoading && (
+                floorMapImageLoading ?
+                  <LoadingBox text="Loading castle plan" />
+                  :
+                  floorMapImage &&
+                  <Box
+                    mt={2.5}
+                    ml={2.5}
+                    mr={2.5}
+                    onTouchStart={() => setIsInteractingWithCastlePlan(true)}
+                    onTouchEnd={() => setIsInteractingWithCastlePlan(true)}>
+                    <CastlePlanView mapImage={floorMapImage} selectedRoom={selectedRoom} roomList={selectedFloor.roomList} height={Dimensions.get("window").height - 350} />
+                  </Box>
+              )
               }
-            </>
 
-          </VStack>
-        </ScrollView>)
+              {/* Item List */}
+              <>
+                {!castlePlanShown && (
+                  inventoriesLoading ?
+                    <LoadingBox text="Loading available inventories..." />
+                    :
+                    <Box mt={2.5} ml={2.5} mr={2.5}>
+                      <ListView
+
+                        navigation={navigation}
+                        hideHeaderText
+
+                        inventories={inventories}
+                        numOfResults={numberOfResults}
+
+                        data={data}
+                        loadedPages={pagination ?? {}}
+                        inventoriesDataLoading={dataLoading ?? {}}
+                        handleLoadMoreItems={(inventoryName: string, cursor: number) => {
+                          dispatch(getPlanItems({ cursor: cursor, inventory: inventoryName, room: selectedRoom?.id ?? 0, place: selectedPlace?.id }))
+                        }}
+
+                      />
+                    </Box>
+                )
+                }
+              </>
+
+            </VStack>
+          </ScrollView>
+          {/* item notes switch tab */}
+          <HStack alignItems="center">
+            <Button
+              variant={"unstyled"}
+              w="50%"
+              onPress={() => { setCastlePlanShown(true) }}
+            >
+              <VStack alignItems={"center"}>
+                <Text bold={castlePlanShown} mb={castlePlanShown ? undefined : 2}>
+                  Castle
+                </Text>
+                {castlePlanShown && <Divider borderWidth={1} width={60} mt={2} />}
+              </VStack>
+            </Button>
+            <Button
+              variant={"unstyled"}
+              w="50%"
+              onPress={() => { setCastlePlanShown(false) }}
+            >
+              <VStack alignItems={"center"}>
+                <Text bold={!castlePlanShown} mb={!castlePlanShown ? undefined : 2}>
+                  Results
+                </Text>
+                {!castlePlanShown && <Divider borderWidth={1} width={60} mt={2} />}
+              </VStack>
+            </Button>
+          </HStack>
+        </Box>
+      )
         :
         floorMapImageLoading ?
           <LoadingBox text="Loading castle plan" />
           :
-          floorMapImage && selectedFloor && 
+          floorMapImage && selectedFloor &&
           <Box>
             <CastlePlanView fullScreenMode mapImage={floorMapImage} selectedRoom={selectedRoom} roomList={selectedFloor.roomList} />
           </Box>