Revize eb8efa3f

re #10844: PlanViewPage: Select place, room, floor

src/pages/PlanViewPage.tsx

@@ -1 @@
-import React, { useCallback, useEffect } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { AppDispatch, RootState } from "../stores/store"
 import { getItem, getItemNotes, setConcordances } from "../stores/actions/itemThunks"
@@ -11 +11 @@
 import { log } from "../logging/logger"
 import { DrawerScreenProps } from "@react-navigation/drawer"
 import { RootDrawerParamList } from "./Navigation"
-import { Box, useToast } from "native-base"
+import { Box, Select, useToast } from "native-base"
 import { ErrorToast } from "../components/toast/ErrorToast"
 import Typography from "native-base/lib/typescript/theme/base/typography"
+import MultiSelect from "../components/search/MultiSelect"
 
 
 const PlanViewPage = ({ route, navigation }: DrawerScreenProps<RootDrawerParamList, 'Plan'>) => {
 
   const layout = useWindowDimensions();
 
-  const [routes, setRoutes] = React.useState<{ key: string, title: string }[]>([
+  const [routes, setRoutes] = useState<{ key: string, title: string }[]>([
     // initial tab
     { key: 'loading', title: 'Loading item...' },
   ]);
 
+  const [selectedFloor, setSelectedFloor] = useState<string>("first_floor")
+  const [selectedRoom, setSelectedRoom] = useState<string | undefined>(undefined)
+  const [selectedPlace, setSelectedPlace] = useState<string | undefined>(undefined)
+
+  // TODO backend -> retrieve list of floors, not static -> not implemented at the time of coding
+  const floorList = [
+    { label: "Ground floor", id: "ground_floor" },
+    { label: "First floor", id: "first_floor" },
+    { label: "Second floor", id: "second_floor" },
+  ]
+
+
+
+  const [roomList, setRoomList] = useState<{ label: string, id: string }[]>([])
+
+  const [placeList, setPlaceList] = useState<{ label: string, id: string }[]>([])
+
+  const [itemList, setItemList] = useState<{ label: string, id: string }[]>([])
+
+
+
   // // TODO vyřešit, aby nebyly freezy při přepínání
   // const [renderSceneDict, setRenderSceneDict] = React.useState({});
 
@@ -62 +84 @@
   }
 
   return (
-    <Box></Box>
+    <Box>
+      {/* Selection */}
+
+      {/* Floor */}
+      <Select
+        mt={2.5}
+        ml={2.5}
+        mr={2.5}
+
+        placeholder={"Floor"}
+        selectedValue={selectedFloor}
+        onValueChange={setSelectedFloor}
+        variant="rounded"
+      >
+        {floorList.map((floor, index) => {
+          return (
+            <Select.Item value={floor.id} label={floor.label} />
+          );
+        })}
+      </Select>
+
+      {/* Room */}
+      <Select
+        mt={2.5}
+        ml={2.5}
+        mr={2.5}
+
+        placeholder={"Room"}
+        selectedValue={selectedRoom}
+        onValueChange={setSelectedRoom}
+        variant="rounded"
+      >
+        {roomList.map((room, index) => {
+          return (
+            <Select.Item value={room.id} label={room.label} />
+          );
+        })}
+      </Select>
+
+      {/* Place */}
+      <Select
+        mt={2.5}
+        ml={2.5}
+        mr={2.5}
+
+        placeholder={"Place"}
+        selectedValue={selectedPlace}
+        onValueChange={setSelectedPlace}
+        variant="rounded"
+      >
+        {placeList.map((place, index) => {
+          return (
+            <Select.Item value={place.id} label={place.label} />
+          );
+        })}
+      </Select>
+
+
+
+      {/* Plan */}
+
+
+      {/* Item List */}
+
+      {/* <ItemPreview
+          // @ts-ignore
+          caption={item.object[0].caption}
+          title={item.text}
+          name={parseArtists(item)}
+          image={parseImage(item)}
+          itemId={item.xml_id}
+          inventoryLabel={props.inventoryLabel}
+          navigation={props.navigation}
+      /> */}
+    </Box>
+
+
   );
 }