422 lines
13 KiB
TypeScript
422 lines
13 KiB
TypeScript
import React, { useRef, useState, useEffect, useLayoutEffect, FC } from "react";
|
|
import { Platform, View, ScrollView, LayoutAnimation } from "react-native";
|
|
import Constants from "expo-constants";
|
|
import {
|
|
configureReanimatedLogger,
|
|
ReanimatedLogLevel,
|
|
} from "react-native-reanimated";
|
|
import StatusbarDetect from "@/StatusbarDetect";
|
|
|
|
import { LED_vision } from "@/components/発車時刻表/LED_vidion";
|
|
import { TitleBar } from "@/components/Menu/TitleBar";
|
|
import { FixedContentBottom } from "@/components/Menu/FixedContentBottom";
|
|
|
|
import { lineList, stationIDPair } from "@/lib/getStationList";
|
|
import { useFavoriteStation } from "@/stateBox/useFavoriteStation";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import { useStationList } from "@/stateBox/useStationList";
|
|
import { TopMenuButton } from "@/components/Menu/TopMenuButton";
|
|
import { JRSTraInfoBox } from "@/components/Menu/JRSTraInfoBox";
|
|
import MapView, { Marker } from "react-native-maps";
|
|
import { CarouselBox } from "@/components/Menu/Carousel/CarouselBox";
|
|
import { CarouselTypeChanger } from "@/components/Menu/Carousel/CarouselTypeChanger";
|
|
import { useUserPosition } from "@/stateBox/useUserPosition";
|
|
import { AS } from "@/storageControl";
|
|
import { lineList_LineWebID } from "@/lib/getStationList";
|
|
import { StationProps } from "@/lib/CommonTypes";
|
|
import { LocationObject } from "expo-location";
|
|
configureReanimatedLogger({
|
|
level: ReanimatedLogLevel.error, // Set the log level to error
|
|
strict: true, // Reanimated runs in strict mode by default
|
|
});
|
|
|
|
type props = {
|
|
scrollRef: React.RefObject<ScrollView>;
|
|
mapHeight: number;
|
|
MapFullHeight: number;
|
|
mapMode: boolean;
|
|
setMapMode: React.Dispatch<React.SetStateAction<boolean>>;
|
|
};
|
|
export const Menu: FC<props> = (props) => {
|
|
const { scrollRef, mapHeight, MapFullHeight, mapMode, setMapMode } = props;
|
|
const { navigate } = useNavigation();
|
|
const { favoriteStation } = useFavoriteStation();
|
|
const { originalStationList, getStationDataFromNameBase } = useStationList();
|
|
const [stationListMode, setStationListMode] = useState<
|
|
"position" | "favorite"
|
|
>("position");
|
|
useEffect(() => {
|
|
AS.getItem("stationListMode")
|
|
.then((res) => setStationListMode(res))
|
|
.catch(() => {
|
|
// AS.setItem("stationListMode", "position");
|
|
});
|
|
}, []);
|
|
const mapsRef = useRef(null);
|
|
const returnToTop = (bool = true) => {
|
|
scrollRef?.current.scrollTo({
|
|
y: mapHeight > 80 ? mapHeight - 80 : 0,
|
|
animated: bool,
|
|
});
|
|
};
|
|
const goToMap = () => {
|
|
scrollRef?.current.scrollTo({
|
|
y: 0,
|
|
animated: true,
|
|
});
|
|
};
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
returnToTop(false);
|
|
}, 10);
|
|
}, [mapHeight]);
|
|
const [scrollStartPosition, setScrollStartPosition] = useState(0);
|
|
const onScrollBeginDrag = (e) => {
|
|
LayoutAnimation.configureNext({
|
|
duration: 300,
|
|
create: {
|
|
type: LayoutAnimation.Types.easeInEaseOut,
|
|
property: LayoutAnimation.Properties.opacity,
|
|
},
|
|
update: {
|
|
type: LayoutAnimation.Types.easeInEaseOut,
|
|
property: LayoutAnimation.Properties.opacity,
|
|
},
|
|
});
|
|
setScrollStartPosition(e.nativeEvent.contentOffset.y);
|
|
setMapMode(false);
|
|
};
|
|
//現在地基準の駅名標リストアップ機能
|
|
const { position, locationStatus } = useUserPosition();
|
|
|
|
const [nearPositionStation, setNearPositionStation] = useState<
|
|
StationProps[][]
|
|
>([]); //第三要素
|
|
|
|
useEffect(() => {
|
|
if (!position) return () => {};
|
|
makeCurrentStation(position);
|
|
}, [position, stationListMode]);
|
|
|
|
const makeCurrentStation = (location: LocationObject) => {
|
|
if (!originalStationList) return () => {};
|
|
const findStationEachLine = (selectLine) => {
|
|
const searchArea = 0.055; //検索範囲
|
|
const _calcDistance = (from, to) => {
|
|
let lat = Math.abs(from.lat - to.lat);
|
|
let lng = Math.abs(from.lng - to.lng);
|
|
return Math.sqrt(lat * lat + lng * lng);
|
|
};
|
|
let NearStation = selectLine.filter(
|
|
(d) =>
|
|
_calcDistance(d, {
|
|
lat: location.coords.latitude,
|
|
lng: location.coords.longitude,
|
|
}) < searchArea
|
|
);
|
|
//NearStationを距離の近い順にソート
|
|
NearStation.sort((a, b) => {
|
|
return (
|
|
_calcDistance(a, {
|
|
lat: location.coords.latitude,
|
|
lng: location.coords.longitude,
|
|
}) -
|
|
_calcDistance(b, {
|
|
lat: location.coords.latitude,
|
|
lng: location.coords.longitude,
|
|
})
|
|
);
|
|
});
|
|
return NearStation;
|
|
};
|
|
|
|
let _stList: StationProps[] = lineList
|
|
.map((d) => findStationEachLine(originalStationList[d]))
|
|
.filter((d) => d.length > 0)
|
|
.reduce((pre, current) => {
|
|
pre.push(...current);
|
|
return pre;
|
|
}, []);
|
|
if (_stList.length == 0) setNearPositionStation([]);
|
|
else {
|
|
console.log("hoge");
|
|
console.log(_stList);
|
|
let returnData: StationProps[][] = [];
|
|
_stList.forEach((d, index, array) => {
|
|
const stationName = d.Station_JP;
|
|
if (returnData.findIndex((d) => d[0].Station_JP == stationName) != -1)
|
|
return;
|
|
returnData.push(array.filter((d2) => d2.Station_JP == stationName));
|
|
});
|
|
//returnDataを距離の近い順にソート
|
|
returnData.sort((a, b) => {
|
|
const _calcDistance = (from, to) => {
|
|
let lat = Math.abs(from.lat - to.lat);
|
|
let lng = Math.abs(from.lng - to.lng);
|
|
return Math.sqrt(lat * lat + lng * lng);
|
|
};
|
|
return (
|
|
_calcDistance(a[0], {
|
|
lat: location.coords.latitude,
|
|
lng: location.coords.longitude,
|
|
}) -
|
|
_calcDistance(b[0], {
|
|
lat: location.coords.latitude,
|
|
lng: location.coords.longitude,
|
|
})
|
|
);
|
|
});
|
|
setNearPositionStation(returnData);
|
|
}
|
|
};
|
|
|
|
const [listIndex, setListIndex] = useState(0);
|
|
|
|
const [listUpStation, setListUpStation] = useState<StationProps[][]>([]);
|
|
const [isSearchMode, setisSearchMode] = useState(false);
|
|
const [input, setInput] = useState("");
|
|
useLayoutEffect(() => {
|
|
if (!!isSearchMode) {
|
|
const returnData = [];
|
|
if (!input || input == "") {
|
|
Object.keys(lineList_LineWebID).forEach((d) => {
|
|
originalStationList[d].forEach((D) => {
|
|
if (
|
|
isSearchMode &&
|
|
isSearchMode != stationIDPair[lineList_LineWebID[d]]
|
|
)
|
|
return;
|
|
const latlng = [D.lat, D.lng];
|
|
if (latlng.length == 0) return null;
|
|
if (D.StationNumber == undefined) {
|
|
return null;
|
|
}
|
|
returnData.push([D]);
|
|
});
|
|
});
|
|
} else {
|
|
const hoge = getStationDataFromNameBase(input);
|
|
hoge.forEach((d, index, array) => {
|
|
const stationName = d.Station_JP;
|
|
if (
|
|
returnData.findIndex((d1) => d1[0].Station_JP == stationName) != -1
|
|
)
|
|
return;
|
|
returnData.push(array.filter((d2) => d2.Station_JP == stationName));
|
|
});
|
|
}
|
|
if (JSON.stringify(returnData) == JSON.stringify(listUpStation)) return;
|
|
console.log("returnData");
|
|
console.log(returnData);
|
|
setListUpStation(returnData);
|
|
} else if (stationListMode == "position") {
|
|
const returnData = nearPositionStation.filter((d) => d != undefined);
|
|
if (JSON.stringify(returnData) == JSON.stringify(listUpStation)) return;
|
|
setListUpStation(returnData);
|
|
} else {
|
|
const returnData = favoriteStation.filter((d) => d != undefined);
|
|
if (JSON.stringify(returnData) == JSON.stringify(listUpStation)) return;
|
|
setListUpStation(returnData);
|
|
}
|
|
}, [nearPositionStation, favoriteStation, stationListMode, isSearchMode]);
|
|
useEffect(() => {
|
|
if (listUpStation.length == 0) {
|
|
setListIndex(0);
|
|
return;
|
|
}
|
|
if (listUpStation.length == 1) {
|
|
setListIndex(0);
|
|
return;
|
|
}
|
|
if (listUpStation[listIndex] == undefined) {
|
|
const count = listIndex - 1;
|
|
setMapMode(false);
|
|
setListIndex(count);
|
|
}
|
|
}, [listIndex, listUpStation, isSearchMode]);
|
|
useEffect(() => {
|
|
if (originalStationList == undefined) return;
|
|
if (listUpStation.length == 0) return;
|
|
if (listUpStation[listIndex] == undefined) return;
|
|
const { lat, lng } = listUpStation[listIndex][0];
|
|
const mapRegion = {
|
|
latitude: lat,
|
|
longitude: lng,
|
|
latitudeDelta: 0.05,
|
|
longitudeDelta: 0.05,
|
|
};
|
|
if (mapMode) {
|
|
mapsRef?.current.fitToCoordinates(
|
|
listUpStation.map((d) => ({
|
|
latitude: d[0].lat,
|
|
longitude: d[0].lng,
|
|
})),
|
|
{ edgePadding: { top: 80, bottom: 120, left: 50, right: 50 } } // Add margin values here
|
|
);
|
|
} else {
|
|
mapsRef.current.animateToRegion(mapRegion, 1000);
|
|
}
|
|
}, [listIndex, listUpStation]);
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
height: "100%",
|
|
backgroundColor: "white",
|
|
paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
|
|
}}
|
|
>
|
|
<StatusbarDetect />
|
|
{!mapMode ? <TitleBar /> : <></>}
|
|
<ScrollView
|
|
ref={scrollRef}
|
|
snapToStart={false}
|
|
snapToEnd={false}
|
|
decelerationRate={"normal"}
|
|
snapToOffsets={[mapHeight - 80]}
|
|
// contentContainerStyle={{
|
|
// position: "relative",
|
|
// }}
|
|
onScrollBeginDrag={onScrollBeginDrag}
|
|
onScrollEndDrag={(e) => {
|
|
if (e.nativeEvent.contentOffset.y < mapHeight - 80) {
|
|
if (scrollStartPosition > e.nativeEvent.contentOffset.y) {
|
|
goToMap();
|
|
} else {
|
|
returnToTop();
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<MapView
|
|
ref={mapsRef}
|
|
style={{ width: "100%", height: mapMode ? MapFullHeight : mapHeight }}
|
|
showsUserLocation={true}
|
|
loadingEnabled={true}
|
|
showsMyLocationButton={false}
|
|
moveOnMarkerPress={false}
|
|
showsCompass={false}
|
|
//provider={PROVIDER_GOOGLE}
|
|
initialRegion={{
|
|
latitude: 33.774519,
|
|
longitude: 133.533306,
|
|
latitudeDelta: 1.8, //小さくなるほどズーム
|
|
longitudeDelta: 1.8,
|
|
}}
|
|
onTouchStart={() => {
|
|
LayoutAnimation.configureNext({
|
|
duration: 300,
|
|
create: {
|
|
type: LayoutAnimation.Types.easeInEaseOut,
|
|
property: LayoutAnimation.Properties.opacity,
|
|
},
|
|
update: {
|
|
type: LayoutAnimation.Types.easeInEaseOut,
|
|
property: LayoutAnimation.Properties.opacity,
|
|
},
|
|
});
|
|
setMapMode(true);
|
|
goToMap();
|
|
}}
|
|
>
|
|
{listUpStation.map(([{ lat, lng, StationNumber }], index) => (
|
|
<Marker
|
|
key={index + StationNumber}
|
|
coordinate={{
|
|
latitude: lat,
|
|
longitude: lng,
|
|
}}
|
|
image={require("@/assets/reccha-small.png")}
|
|
onPress={() => {
|
|
setMapMode(false);
|
|
setListIndex(index);
|
|
if (mapsRef.current) {
|
|
mapsRef.current.animateToRegion(
|
|
{
|
|
latitude: lat,
|
|
longitude: lng,
|
|
latitudeDelta: 0.05,
|
|
longitudeDelta: 0.05,
|
|
},
|
|
1000
|
|
);
|
|
}
|
|
LayoutAnimation.configureNext({
|
|
duration: 300,
|
|
create: {
|
|
type: LayoutAnimation.Types.easeInEaseOut,
|
|
property: LayoutAnimation.Properties.opacity,
|
|
},
|
|
update: {
|
|
type: LayoutAnimation.Types.easeInEaseOut,
|
|
property: LayoutAnimation.Properties.opacity,
|
|
},
|
|
});
|
|
returnToTop();
|
|
}}
|
|
/>
|
|
))}
|
|
</MapView>
|
|
{!mapMode && (
|
|
<CarouselTypeChanger
|
|
{...{
|
|
locationStatus,
|
|
position,
|
|
stationListMode,
|
|
setStationListMode,
|
|
setSelectedCurrentStation: setListIndex,
|
|
mapMode,
|
|
setMapMode,
|
|
isSearchMode,
|
|
setisSearchMode,
|
|
input,
|
|
setInput,
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{originalStationList.length != 0 && (
|
|
<>
|
|
<CarouselBox
|
|
{...{
|
|
originalStationList,
|
|
listUpStation,
|
|
nearPositionStation,
|
|
setListIndex,
|
|
listIndex,
|
|
navigate,
|
|
stationListMode,
|
|
isSearchMode,
|
|
}}
|
|
/>
|
|
{listUpStation[listIndex] && (
|
|
<LED_vision station={listUpStation[listIndex]} />
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
<TopMenuButton />
|
|
<JRSTraInfoBox />
|
|
<FixedContentBottom navigate={navigate} />
|
|
</ScrollView>
|
|
{mapMode && (
|
|
<CarouselTypeChanger
|
|
{...{
|
|
locationStatus,
|
|
position,
|
|
stationListMode,
|
|
setStationListMode,
|
|
setSelectedCurrentStation: setListIndex,
|
|
mapMode,
|
|
setMapMode,
|
|
isSearchMode,
|
|
setisSearchMode,
|
|
input,
|
|
setInput,
|
|
}}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|