Revize fb120216

re #10895: ItemView: ItemObjects switching, display color

src/components/item/ItemView.tsx

@@ -1 +1 @@
 import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading, Switch, Flex, ChevronLeftIcon, ChevronRightIcon, Divider, Pressable } from "native-base"
 import React, { useCallback, useEffect, useState } from "react"
-import { Item } from "../../types/item"
+import { Certainty, Item, RelationshipType } from "../../types/item"
 import { Note } from "../../types/note"
 import LoadingBox from "../loading/LoadingBox"
 import NotesListView from "../notes/NotesListView"
@@ -15 +15 @@
 import { DrawerNavigationProp } from "@react-navigation/drawer"
 import { RootStackParamList } from "../../pages/Navigation"
 import { select } from "d3"
+import { CertaintyWithColors } from "../../stores/reducers/itemSlice"
 
 interface ItemDetailProps {
     item: Item,
@@ -86 +87 @@
                             {item.fullView && item.images && item.images.length > 0 && (
                                 <VStack marginTop={5} alignItems="center" justifyContent="center" backgroundColor="#F5F4F1" borderRadius={10} borderColor="#F5F4F1" padding={2}>
 
-                                    <Box marginTop={2.5} borderWidth={1} width={Dimensions.get('window').width - 110} alignItems="center" backgroundColor="red" borderTopRadius={10} >
-                                        <Text marginBottom={2}>{"Resembling objects"}
-                                            {selectedImage + 1 + "/" + item.images.length + item.images[selectedImage].cert + item.images[selectedImage].relationship_type}
+                                    <Box style={{ backgroundColor: item.images[selectedImage].relationship_type != RelationshipType.IdentifiedArtwork ? "#B3B3B3" : CertaintyWithColors[item.images[selectedImage].cert ?? Certainty.Unknown].color }}
+                                        marginTop={2.5} width={Dimensions.get('window').width - 110} alignItems="center" borderTopRadius={10} >
+                                        <Text marginBottom={2}>
+                                            
+                                            {item.images[selectedImage].relationship_type == RelationshipType.Resembling && "Resembling object"}
+                                            {item.images[selectedImage].relationship_type == RelationshipType.IdentifiedArtwork && "Identified artwork"}
+                                            {item.images[selectedImage].relationship_type == RelationshipType.Related && "Related item"}
+
+                                            {item.images[selectedImage].relationship_type == RelationshipType.IdentifiedArtwork && item.images[selectedImage].cert && item.images[selectedImage].cert != Certainty.Unknown && ` - ${item.images?.[selectedImage].cert}`}
                                         </Text>
                                     </Box>
 
@@ -126 +133 @@
                                         <HStack>
                                             <Text marginTop={2.5}>
                                                 <Text color="#654B07" italic fontWeight={"semibold"}>Author name: </Text>
-                                                {item.authorName}
+                                                {item.images?.[selectedImage]?.author}
                                             </Text>
                                         </HStack>}
                                     {item.title &&
                                         <HStack>
                                             <Text marginTop={2.5}>
                                                 <Text color="#654B07" italic fontWeight={"semibold"}>Title: </Text>
-                                                {item.title}
+                                                {item.images?.[selectedImage].title}
                                             </Text>
                                         </HStack>}
                                     {item.institution &&
                                         <HStack>
                                             <Text marginTop={2.5}>
                                                 <Text color="#654B07" italic fontWeight={"semibold"}>Institution: </Text>
-                                                {item.institution.name}, Inv. No. {item.institution.inventoryNumber}, {item.institution.city} {"(" + item.institution.country + ")"}
+                                                {item.images?.[selectedImage].institution.name && `${item.images?.[selectedImage].institution.name}`}
+                                                {item.images?.[selectedImage].institution.inventoryNumber && `, Inv. No. ${item.images?.[selectedImage].institution.inventoryNumber}`}
+                                                {item.images?.[selectedImage].institution.city && `, ${item.images?.[selectedImage].institution.city}`}
+                                                {item.images?.[selectedImage].institution.country && ` (${item.images?.[selectedImage].institution.country})`}
                                             </Text>
                                         </HStack>}
                                     {item.repository &&
                                         <HStack>
                                             <Text marginTop={2.5}>
                                                 <Text color="#654B07" italic fontWeight={"semibold"}>Repository: </Text>
-                                                {item.repository}
+                                                {item.images?.[selectedImage].repository}
                                             </Text>
                                         </HStack>}
-                                    {item.provenance &&
+                                    {item.images?.[selectedImage].provenance &&
                                         <HStack>
                                             <Text marginTop={2.5}>
                                                 <Text color="#654B07" italic fontWeight={"semibold"}>Provenance: </Text>
-                                                {item.provenance}
+                                                {item.images?.[selectedImage].provenance}
                                             </Text>
                                         </HStack>}
-                                    {item.description &&
+                                    {item.images?.[selectedImage].description &&
                                         <HStack>
                                             <Text marginTop={2.5}>
                                                 <Text color="#654B07" italic fontWeight={"semibold"}>Description: </Text>
-                                                {item.description}
+                                                {item.images?.[selectedImage].description}
                                             </Text>
                                         </HStack>}
                                 </View>)}

src/components/plan/CastlePlanView.tsx

@@ -292 +292 @@
         >
             {/* control panel */}
             <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
-                <Pressable padding={1.5} backgroundColor={"primary"} borderRadius={5} marginRight={selectedRoom ? 1 : -2} onPress={handleFullScreenPressed}>
+                <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={selectedRoom ? 1 : -2} onPress={handleFullScreenPressed}>
                     <FullscreenIcon color="white" />
                 </Pressable>
                 {
                     selectedRoom &&
-                    <Pressable padding={1.5} backgroundColor={"primary"} borderRadius={5} marginRight={-2} onPress={() => { zoomToRoom(selectedRoom) }}>
+                    <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2} onPress={() => { zoomToRoom(selectedRoom) }}>
                         <ExitfullscreenIcon color="white" />
                     </Pressable>
                 }

src/pages/PlanViewPage.tsx

@@ -278 +278 @@
                         }
 
                       }}
-                      backgroundColor={"primary"}
+                      backgroundColor={"#654B07"}
                       variant="subtle"
                       borderRadius={10}
                       size={"sm"}

src/stores/actions/itemThunks.ts

@@ -1 +1 @@
 import { createAsyncThunk } from "@reduxjs/toolkit"
 import { getItemRequest } from "../../api/itemservice"
 import { getItemNotesRequest } from "../../api/notesservice"
-import { Certainty, Concordance, Item } from "../../types/item";
+import { Certainty, Concordance, Item, ItemObject } from "../../types/item";
 
 
 export const getItem = createAsyncThunk(
@@ -16 +16 @@
             if (response.status === 200 && response.data.object.length > 1) {
                 // TODO IMAGES to array :-)
                 const authorName = response.data?.object[1]?.name?.[0]?.getty_data?.display_name ?? undefined;
-                const images : {imageUrl: string, title: string, relationship_type: string, cert: Certainty}[] = []
+                const images : ItemObject[] = []
                 for(let i = 1; i < response.data.object.length; i++){
-                    images.push({imageUrl: response.data.object[i]?.images?.[0]?.file ?? "", title:  response.data.object[i]?.images?.[0]?.text ?? "", relationship_type: response.data.object[i].relationship_type ?? "", cert: response.data.object[i].cert ?? Certainty.Unknown })
+                    images.push({
+                        imageUrl: response.data.object[i]?.images?.[0]?.file ?? undefined, 
+                        title:  response.data.object[i]?.images?.[0]?.text ?? undefined, 
+                        relationship_type: response.data.object[i].relationship_type ?? undefined, 
+                        cert: response.data.object[i].cert ?? Certainty.Unknown ,
+
+                        author: response.data?.object[i]?.name?.[0]?.getty_data?.display_name ?? undefined,
+                        description: response.data?.object[i]?.physical_description ?? undefined,
+                        institution: {
+                            name: response.data?.object[i]?.institution ?? undefined,
+                            inventoryNumber: response.data?.object[i]?.id_number ?? undefined,
+                            country: response.data?.object[i]?.country ?? undefined,
+                            city: response.data?.object[i]?.city ?? undefined
+                        },
+                        provenance: response.data?.object[i]?.provenance ?? undefined,
+                        repository: response.data?.object[i]?.repository ?? undefined
+                    })
                 }
                 
                 const institution = {

src/stores/reducers/itemSlice.ts

@@ -4 +4 @@
 
 // TODO set colors
 export const CertaintyWithColors: Record<Certainty, { certainty: Certainty; color: string }> = {
-    same_as: { certainty: Certainty.SameAs, color: "light.300" },
-    high: { certainty: Certainty.High, color: "success.300" },
-    medium: { certainty: Certainty.Medium, color: "warning.300" },
-    low: { certainty: Certainty.Low, color: "danger.300" },
-    unknown : { certainty: Certainty.Unknown, color: "light.300"}
+    same_as: { certainty: Certainty.SameAs, color: "white" },
+    high: { certainty: Certainty.High, color: "#aedfb5" },
+    medium: { certainty: Certainty.Medium, color: "#ffd8b3" },
+    low: { certainty: Certainty.Low, color: "#faa" },
+    unknown : { certainty: Certainty.Unknown, color: "white"}
 };
 
 const initialState: ItemViewState = {

src/types/item.ts

@@ -1 +1 @@
 import { Note } from "./note"
 
 
-export type  Item = {
+export type ItemObject = {
+    imageUrl: string,
+    relationship_type: RelationshipType,
+    cert: Certainty,
+
+    author: string,
+    title: string,
+    institution: {
+        name: string,
+        inventoryNumber: number,
+        country: string,
+        city: string
+    },
+    provenance: string,
+    description: string,
+    repository: string,
+}
+
+export type Item = {
     id?: string
 
     concordances?: Concordance[]
@@ -11 +29 @@
     inventoryItem?: string
     searchSubjects?: string[]
 
-    fullView : boolean
+    fullView: boolean
 
     authorName?: string
-    images?: {imageUrl : string, title : string, relationship_type: string, cert: Certainty}[]
+    images?: ItemObject[]
     title?: string
-    institution?: { 
-        name :string,
+    institution?: {
+        name: string,
         inventoryNumber: number,
         country: string,
         city: string
@@ -26 +44 @@
     provenance?: string
     description?: string
 
-    room?: {id: number, original_description: string}
+    room?: { id: number, original_description: string }
 
     prevItem?: string | boolean
     nextItem?: string | boolean
 }
 
+// TODO
+export enum RelationshipType {
+    Resembling = "resembling",
+    IdentifiedArtwork = "identification",
+    Related = "related"
+}
+
+
 export type ItemViewState = {
     item: Item
     itemLoading: boolean