import { LibraryMapRouteProp, LibrarySeatMapRouteProp, } from "../../components/Root"; import {Dimensions, Image, Text, View} from "react-native"; import React, {useEffect, useState} from "react"; import {NetworkRetry} from "../../components/easySnackbars"; import ImageViewer from "react-native-image-zoom-viewer"; import {saveRemoteImg} from "../../utils/saveImg"; import {getStr} from "../../utils/i18n"; import {helper} from "../../redux/store"; import {LibrarySection} from "thu-info-lib/dist/models/home/library"; import {LIBRARY_IMAGE_BASE} from "thu-info-lib/dist/constants/strings"; export const LibraryMapScreen = ({route}: {route: LibraryMapRouteProp}) => { const [sections, setSections] = useState<LibrarySection[]>([]); useEffect(() => { helper .getLibrarySectionList(route.params.floor, route.params.dateChoice) .then(setSections) .catch(NetworkRetry); }, [route.params.dateChoice, route.params.floor]); const {width, height} = Dimensions.get("window"); return ( <View> <Image source={{ uri: `${LIBRARY_IMAGE_BASE}${route.params.floor.id}/floor.jpg`, }} style={{width, height}} resizeMode="contain" /> {sections.map(({id, posX, posY, zhName}) => ( <View key={id} style={{ position: "absolute", left: (posX / 100) * width, top: (posY / 100) * width * (9 / 16) + (height - width * (9 / 16)) / 2, backgroundColor: "#cccc", }}> <Text style={{color: "black"}}>{zhName}</Text> </View> ))} </View> ); }; export const LibrarySeatMapScreen = ({ route, }: { route: LibrarySeatMapRouteProp; }) => { return ( <View style={{flex: 1}}> { <ImageViewer imageUrls={[ { url: `${LIBRARY_IMAGE_BASE}${route.params.section.id}/seat-free.jpg`, }, ]} onSave={saveRemoteImg} menuContext={{ saveToLocal: getStr("saveImage"), cancel: getStr("cancel"), }} /> } </View> ); };