地図表示の挙動変更、位置情報への移動ボタンを実装
This commit is contained in:
parent
249f09bbc7
commit
3da4986a7c
@ -33,7 +33,7 @@ export const LandscapeTrainInfo = (props) => {
|
|||||||
stickyHeaderIndices={[1]}
|
stickyHeaderIndices={[1]}
|
||||||
scrollEventThrottle={16}
|
scrollEventThrottle={16}
|
||||||
onScroll={(d) => {
|
onScroll={(d) => {
|
||||||
console.log(d.nativeEvent.contentOffset.y);
|
// Handle scroll events
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<View style={{ height: 0 }} />
|
<View style={{ height: 0 }} />
|
||||||
|
@ -51,7 +51,6 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
|
|||||||
)
|
)
|
||||||
.then((d) => d.json())
|
.then((d) => d.json())
|
||||||
.then((d) => {
|
.then((d) => {
|
||||||
console.log(d);
|
|
||||||
if (d.trainStatus == "〇") {
|
if (d.trainStatus == "〇") {
|
||||||
//setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
|
//setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
|
||||||
} else if (d.trainStatus == "▲") {
|
} else if (d.trainStatus == "▲") {
|
||||||
@ -76,7 +75,6 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
|
|||||||
)
|
)
|
||||||
.then((d) => d.json())
|
.then((d) => d.json())
|
||||||
.then((d) => {
|
.then((d) => {
|
||||||
console.log(d);
|
|
||||||
if (d.trainStatus == "〇") {
|
if (d.trainStatus == "〇") {
|
||||||
//setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
|
//setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
|
||||||
} else if (d.trainStatus == "▲") {
|
} else if (d.trainStatus == "▲") {
|
||||||
|
@ -18,6 +18,7 @@ import { TrainBusButton } from "./StationDeteilView/TrainBusButton";
|
|||||||
import { 駅構内図 } from "./StationDeteilView/StationInsideMapButton";
|
import { 駅構内図 } from "./StationDeteilView/StationInsideMapButton";
|
||||||
import { WebSiteButton } from "./StationDeteilView/WebSiteButton";
|
import { WebSiteButton } from "./StationDeteilView/WebSiteButton";
|
||||||
import { StationTimeTableButton } from "./StationDeteilView/StationTimeTableButton";
|
import { StationTimeTableButton } from "./StationDeteilView/StationTimeTableButton";
|
||||||
|
import { StationTrainPositionButton } from "./StationDeteilView/StationTrainPositionButton";
|
||||||
|
|
||||||
export const StationDeteilView = (props) => {
|
export const StationDeteilView = (props) => {
|
||||||
if (!props.payload) return <></>;
|
if (!props.payload) return <></>;
|
||||||
@ -104,16 +105,23 @@ export const StationDeteilView = (props) => {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
{currentStation[0].JrHpUrl &&
|
<View style={{ flexDirection: "row" }}>
|
||||||
currentStation[0].StationNumber != "M12" && (
|
<StationTrainPositionButton
|
||||||
<駅構内図 //児島例外/
|
stationNumber={currentStation[0].StationNumber}
|
||||||
navigate={navigate}
|
onExit={onExit}
|
||||||
goTo={goTo}
|
navigate={navigate}
|
||||||
useShow={useShow}
|
/>
|
||||||
address={currentStation[0].JrHpUrl}
|
{currentStation[0].JrHpUrl &&
|
||||||
onExit={onExit}
|
currentStation[0].StationNumber != "M12" && (
|
||||||
/>
|
<駅構内図 //児島例外/
|
||||||
)}
|
navigate={navigate}
|
||||||
|
goTo={goTo}
|
||||||
|
useShow={useShow}
|
||||||
|
address={currentStation[0].JrHpUrl}
|
||||||
|
onExit={onExit}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
<View style={{ flexDirection: "row" }}>
|
<View style={{ flexDirection: "row" }}>
|
||||||
{!currentStation[0].JrHpUrl || (
|
{!currentStation[0].JrHpUrl || (
|
||||||
<WebSiteButton
|
<WebSiteButton
|
||||||
@ -135,7 +143,12 @@ export const StationDeteilView = (props) => {
|
|||||||
useShow={useShow}
|
useShow={useShow}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<StationMapButton stationMap={currentStation[0].StationMap || `https://www.google.co.jp/maps/place/${currentStation[0].lat},${currentStation[0].lng}`} />
|
<StationMapButton
|
||||||
|
stationMap={
|
||||||
|
currentStation[0].StationMap ||
|
||||||
|
`https://www.google.co.jp/maps/place/${currentStation[0].lat},${currentStation[0].lng}`
|
||||||
|
}
|
||||||
|
/>
|
||||||
{!trainBus || (
|
{!trainBus || (
|
||||||
<TrainBusButton
|
<TrainBusButton
|
||||||
address={trainBus.address}
|
address={trainBus.address}
|
||||||
|
@ -19,6 +19,7 @@ export const 駅構内図:FC<Props> = (props) => {
|
|||||||
alignContent: "center",
|
alignContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
margin: 2,
|
margin: 2,
|
||||||
|
flex: 1,
|
||||||
}}
|
}}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
navigate("howto", { info, goTo, useShow });
|
navigate("howto", { info, goTo, useShow });
|
||||||
|
@ -0,0 +1,54 @@
|
|||||||
|
import { FC } from "react";
|
||||||
|
import { TouchableOpacity, View, Text, Linking } from "react-native";
|
||||||
|
import { useStationList } from "@/stateBox/useStationList";
|
||||||
|
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
|
||||||
|
import AntDesign from "react-native-vector-icons/AntDesign";
|
||||||
|
type Props = {
|
||||||
|
stationNumber: string;
|
||||||
|
onExit: () => void;
|
||||||
|
navigate?: (screen: string, params: { screen: string }) => void;
|
||||||
|
};
|
||||||
|
export const StationTrainPositionButton: FC<Props> = (props) => {
|
||||||
|
const { stationNumber, onExit, navigate } = props;
|
||||||
|
const {
|
||||||
|
inject,
|
||||||
|
} = useCurrentTrain();
|
||||||
|
const { getInjectJavascriptAddress } = useStationList();
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={{
|
||||||
|
height: 50,
|
||||||
|
backgroundColor: "#0099CC",
|
||||||
|
flexDirection: "row",
|
||||||
|
alignContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
margin: 2,
|
||||||
|
flex: 1
|
||||||
|
}}
|
||||||
|
onPress={() => {
|
||||||
|
navigate("positions", { screen: "Apps" });
|
||||||
|
const script = getInjectJavascriptAddress(stationNumber);
|
||||||
|
inject(script);
|
||||||
|
onExit();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<AntDesign
|
||||||
|
name={"barchart"}
|
||||||
|
size={20}
|
||||||
|
color={"white"}
|
||||||
|
style={{ marginHorizontal: 5, marginVertical: 5 }}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
color: "white",
|
||||||
|
textAlign: "center",
|
||||||
|
textAlignVertical: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
走行位置に移動
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
};
|
@ -29,8 +29,7 @@ export const CarouselBox = ({
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!carouselBadgeScrollViewRef.current) return;
|
if (!carouselBadgeScrollViewRef.current) return;
|
||||||
const scrollToIndex = listIndex * (width / listUpStation.length) + 10;
|
const scrollToIndex = (dotButton ? 28 : 22) * listIndex - (width / 2) + (dotButton ? 28 : 22) - 5;
|
||||||
console.log("scrollToIndex", scrollToIndex);
|
|
||||||
carouselBadgeScrollViewRef.current.scrollTo({
|
carouselBadgeScrollViewRef.current.scrollTo({
|
||||||
x: scrollToIndex,
|
x: scrollToIndex,
|
||||||
animated: true,
|
animated: true,
|
||||||
|
@ -8,7 +8,6 @@ import { AS } from "../../../storageControl";
|
|||||||
export const FavoriteSettingsItem = ({ currentStation }) => {
|
export const FavoriteSettingsItem = ({ currentStation }) => {
|
||||||
const lineIDs = [];
|
const lineIDs = [];
|
||||||
const EachIDs = [];
|
const EachIDs = [];
|
||||||
console.log(currentStation);
|
|
||||||
currentStation.forEach((d) => {
|
currentStation.forEach((d) => {
|
||||||
if (!d.StationNumber) return;
|
if (!d.StationNumber) return;
|
||||||
const textArray = d.StationNumber.split("");
|
const textArray = d.StationNumber.split("");
|
||||||
|
27
menu.js
27
menu.js
@ -178,18 +178,30 @@ export default function Menu(props) {
|
|||||||
const returnData = [];
|
const returnData = [];
|
||||||
Object.keys(lineList_LineWebID).forEach((d, indexBase) => {
|
Object.keys(lineList_LineWebID).forEach((d, indexBase) => {
|
||||||
originalStationList[d].forEach((D, index) => {
|
originalStationList[d].forEach((D, index) => {
|
||||||
if (isSearchMode && isSearchMode != stationIDPair[lineList_LineWebID[d]]) return;
|
if (
|
||||||
|
isSearchMode &&
|
||||||
|
isSearchMode != stationIDPair[lineList_LineWebID[d]]
|
||||||
|
)
|
||||||
|
return;
|
||||||
const latlng = [D.lat, D.lng];
|
const latlng = [D.lat, D.lng];
|
||||||
if (latlng.length == 0) return null;
|
if (latlng.length == 0) return null;
|
||||||
if(D.StationNumber == undefined) {
|
if (D.StationNumber == undefined) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
returnData.push([D]);
|
returnData.push([D]);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
if (mapMode) {
|
||||||
|
mapsRef?.current.fitToCoordinates(
|
||||||
|
listUpStation.map((d) => ({
|
||||||
|
latitude: parseFloat(d[0].lat),
|
||||||
|
longitude: parseFloat(d[0].lng),
|
||||||
|
})),
|
||||||
|
{ edgePadding: { top: 80, bottom: 120, left: 50, right: 50 } } // Add margin values here
|
||||||
|
);
|
||||||
|
}
|
||||||
setListUpStation(returnData);
|
setListUpStation(returnData);
|
||||||
}
|
} else if (stationListMode == "position") {
|
||||||
else if (stationListMode == "position") {
|
|
||||||
setListUpStation(nearPositionStation.filter((d) => d != undefined));
|
setListUpStation(nearPositionStation.filter((d) => d != undefined));
|
||||||
} else {
|
} else {
|
||||||
setListUpStation(favoriteStation.filter((d) => d != undefined));
|
setListUpStation(favoriteStation.filter((d) => d != undefined));
|
||||||
@ -200,12 +212,16 @@ export default function Menu(props) {
|
|||||||
setListIndex(0);
|
setListIndex(0);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (listUpStation.length == 1) {
|
||||||
|
setListIndex(0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (listUpStation[listIndex] == undefined) {
|
if (listUpStation[listIndex] == undefined) {
|
||||||
const count = listIndex - 1;
|
const count = listIndex - 1;
|
||||||
setMapMode(false);
|
setMapMode(false);
|
||||||
setListIndex(count);
|
setListIndex(count);
|
||||||
}
|
}
|
||||||
}, [listIndex, nearPositionStation, listUpStation]);
|
}, [listIndex, nearPositionStation, listUpStation, isSearchMode]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (originalStationList == undefined) return;
|
if (originalStationList == undefined) return;
|
||||||
if (listUpStation.length == 0) return;
|
if (listUpStation.length == 0) return;
|
||||||
@ -258,7 +274,6 @@ export default function Menu(props) {
|
|||||||
}}
|
}}
|
||||||
onScrollBeginDrag={onScrollBeginDrag}
|
onScrollBeginDrag={onScrollBeginDrag}
|
||||||
onScrollEndDrag={(e) => {
|
onScrollEndDrag={(e) => {
|
||||||
console.log(e.nativeEvent.velocity);
|
|
||||||
if (e.nativeEvent.contentOffset.y < mapHeight - 80) {
|
if (e.nativeEvent.contentOffset.y < mapHeight - 80) {
|
||||||
if (scrollStartPosition > e.nativeEvent.contentOffset.y) {
|
if (scrollStartPosition > e.nativeEvent.contentOffset.y) {
|
||||||
goToMap();
|
goToMap();
|
||||||
|
@ -15,7 +15,7 @@ const initialState = {
|
|||||||
currentTrainLoading: "loading",
|
currentTrainLoading: "loading",
|
||||||
setCurrentTrainLoading: () => {},
|
setCurrentTrainLoading: () => {},
|
||||||
getCurrentTrain: () => {},
|
getCurrentTrain: () => {},
|
||||||
inject: () => {},
|
inject: (i) => {},
|
||||||
};
|
};
|
||||||
|
|
||||||
const CurrentTrainContext = createContext(initialState);
|
const CurrentTrainContext = createContext(initialState);
|
||||||
|
@ -92,7 +92,6 @@ export const StationListProvider: FC<Props> = ({ children }) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (x.StationNumber == StationNumber) {
|
if (x.StationNumber == StationNumber) {
|
||||||
console.log(originalStationList[d]);
|
|
||||||
if (!x.MyStation) findNearStations = true;
|
if (!x.MyStation) findNearStations = true;
|
||||||
else bootStationList.push({ line: lineName, station: x });
|
else bootStationList.push({ line: lineName, station: x });
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user