harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FixedBoxを拡張可能に変更

Browse Source
This commit is contained in:
harukin-expo-dev-env
2025-09-14 18:25:06 +00:00
parent 3531a128ab
commit acb1849544
3 changed files with 449 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/Apps/FixedPositionBox.tsx
View File

@@ -3,9 +3,11 @@ import { View, Platform } from "react-native";
import Constants from "expo-constants";
import { FixedTrain } from "./FixedPositionBox/FixedTrainBox";
import { FixedStation } from "./FixedPositionBox/FixedStationBox";
import { useState } from "react";
export const FixedPositionBox = () => {
const { fixedPosition, setFixedPosition } = useCurrentTrain();
const [displaySize, setDisplaySize] = useState(50);
return (
<View
@@ -15,17 +17,24 @@ export const FixedPositionBox = () => {
borderRadius: 5,
zIndex: 1500,
width: "100%",
height: 50,
height: displaySize,
flexDirection: "row",
}}
>
{fixedPosition.type === "station" && (
<FixedStation stationID={fixedPosition.value} />
<FixedStation
stationID={fixedPosition.value}
displaySize={displaySize}
setDisplaySize={setDisplaySize}
/>
)}
{fixedPosition.type === "train" && (
<FixedTrain trainID={fixedPosition.value} />
<FixedTrain
trainID={fixedPosition.value}
displaySize={displaySize}
setDisplaySize={setDisplaySize}
/>
)}
</View>
);
};

148
components/Apps/FixedPositionBox/FixedStationBox.tsx
View File

@@ -15,17 +15,27 @@ import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
import { useAreaInfo } from "@/stateBox/useAreaInfo";
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
import { useStationList } from "@/stateBox/useStationList";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { FC, useEffect, useState } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import { LayoutAnimation, Text, TouchableOpacity, View } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
type props = {
stationID: string;
displaySize: number;
setDisplaySize: (size: number) => void;
};
export const FixedStation: FC<props> = ({ stationID }) => {
export const FixedStation: FC<props> = ({
stationID,
displaySize,
setDisplaySize,
}) => {
const { currentTrain, setFixedPosition } = useCurrentTrain();
const { getStationDataFromId } = useStationList();
const { navigate } = useNavigation();
const [station, setStation] = useState<StationProps[]>([]);
useEffect(() => {
const data = getStationDataFromId(stationID);
@@ -88,9 +98,23 @@ export const FixedStation: FC<props> = ({ stationID }) => {
return (
<TouchableOpacity
style={{ flex: 1, flexDirection: "row" }}
style={{
flex: 1,
flexDirection: "row",
borderBottomColor: lineColor,
borderBottomWidth: 2,
position: "relative",
}}
activeOpacity={1}
onPress={() => {
setFixedPosition({ type: null, value: null });
const payload = {
currentStation: station,
navigate,
goTo: "menu",
onExit: () => SheetManager.hide("StationDetailView"),
};
//@ts-ignore
SheetManager.show("StationDetailView", { payload });
}}
>
<View
@@ -157,7 +181,7 @@ export const FixedStation: FC<props> = ({ stationID }) => {
flex: 1,
}}
>
<Text style={{ fontSize: 20 }}>次の発車予定：</Text>
<Text style={{ fontSize: 18 }}>次の発車予定：</Text>
</View>
</View>
@@ -176,22 +200,130 @@ export const FixedStation: FC<props> = ({ stationID }) => {
<FixedStationBoxEachTrain
d={d}
station={station[0]}
displaySize={displaySize}
key={d.train + "-fixedStationBox"}
/>
))
) : (
<View style={{ backgroundColor: "white", flex: 1 }}>
<Text style={{ fontSize: parseInt("11%") }}>
<Text style={{ fontSize: parseInt("11%") }}>
当駅を発着する走行中の列車はありません。
</Text>
</View>
)}
</View>
<TouchableOpacity
style={{
position: "absolute",
top: "100%",
left: 0,
flexDirection: "row",
alignItems: "center",
}}
onPress={() => {
setFixedPosition({ type: null, value: null });
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
backgroundColor: lineColor,
paddingHorizontal: 5,
}}
>
<Ionicons name="lock-closed" size={15} color="white" />
<Text
style={{
color: "white",
fontSize: 15,
paddingRight: 5,
}}
>
駅位置ロック中
</Text>
<Ionicons name="close" size={15} color="white" />
</View>
<View
style={{
backgroundColor: "#0000",
width: 6,
borderLeftColor: lineColor,
borderTopColor: lineColor,
borderBottomColor: "#0000",
borderRightColor: "#0000",
borderBottomWidth: 22,
borderLeftWidth: 10,
borderRightWidth: 0,
borderTopWidth: 0,
height: 20,
}}
/>
</TouchableOpacity>
<TouchableOpacity
style={{
position: "absolute",
top: "100%",
right: 0,
flexDirection: "row",
alignItems: "center",
}}
onPress={() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
if (displaySize === 50) {
setDisplaySize(200);
} else {
setDisplaySize(50);
}
}}
>
<View
style={{
backgroundColor: "#0000",
width: 6,
borderLeftColor: "#0000",
borderTopColor: lineColor,
borderBottomColor: "#0000",
borderRightColor: lineColor,
borderBottomWidth: 22,
borderLeftWidth: 0,
borderRightWidth: 10,
borderTopWidth: 0,
height: 20,
}}
/>
<View
style={{
flexDirection: "row",
alignItems: "center",
backgroundColor: lineColor,
paddingHorizontal: 5,
}}
pointerEvents="none"
>
<Ionicons
name={displaySize == 50 ? "chevron-down" : "chevron-up"}
size={15}
color="white"
/>
<Text
style={{
color: "white",
paddingRight: 5,
backgroundColor: lineColor,
fontSize: 15,
}}
>
{displaySize == 50 ? "時刻表を展開する" : "時刻表を縮小する"}
</Text>
</View>
</TouchableOpacity>
</TouchableOpacity>
);
};
const FixedStationBoxEachTrain = ({ d, station }) => {
const FixedStationBoxEachTrain = ({ d, station, displaySize }) => {
const { currentTrain } = useCurrentTrain();
const { stationList } = useStationList();
const { allCustomTrainData } = useAllTrainDiagram();
@@ -216,7 +348,7 @@ const FixedStationBoxEachTrain = ({ d, station }) => {
style={{
backgroundColor: "white",
flexDirection: "row",
height: "33%",
height: displaySize == 50 ? "33%" : "7.5%",
overflow: "visible",
}}
>

403
components/Apps/FixedPositionBox/FixedTrainBox.tsx
View File

@@ -4,7 +4,13 @@ import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
import { useStationList } from "@/stateBox/useStationList";
import { StationProps } from "@/lib/CommonTypes";
import { FC, useEffect, useState } from "react";
import { Text, TouchableOpacity, View, Image } from "react-native";
import {
Text,
TouchableOpacity,
View,
Image,
LayoutAnimation,
} from "react-native";
import { getTrainType } from "@/lib/getTrainType";
import { trainPosition } from "@/lib/trainPositionTextArray";
import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker";
@@ -12,12 +18,19 @@ import { lineListPair, stationIDPair } from "@/lib/getStationList";
import { findReversalPoints } from "@/lib/eachTrainInfoCoreLib/findReversalPoints";
import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
import { getCurrentTrainData } from "@/lib/getCurrentTrainData";
import { Ionicons } from "@expo/vector-icons";
type props = {
trainID: string;
displaySize: number;
setDisplaySize: (e: number) => void;
};
export const FixedTrain: FC<props> = ({ trainID }) => {
export const FixedTrain: FC<props> = ({
trainID,
displaySize,
setDisplaySize,
}) => {
const {
fixedPosition,
setFixedPosition,
@@ -37,9 +50,13 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
delay?: string | number;
num?: string;
}>(null);
const [customData, setCustomData] = useState<CustomTrainData>(getCurrentTrainData(trainID, currentTrain, allCustomTrainData));
const [customData, setCustomData] = useState<CustomTrainData>(
getCurrentTrainData(trainID, currentTrain, allCustomTrainData)
);
useEffect(() => {
setCustomData(getCurrentTrainData(trainID, currentTrain, allCustomTrainData));
setCustomData(
getCurrentTrainData(trainID, currentTrain, allCustomTrainData)
);
}, [currentTrain, trainID]);
useEffect(() => {
const stationData = getCurrentStationData(trainID);
@@ -133,7 +150,7 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
}, []).map((d) => d.StationNumber);
return StationNumbers;
});
const [currentPosition, setCurrentPosition] = useState([]);
const [currentPosition, setCurrentPosition] = useState<string[]>([]);
useEffect(() => {
const position = getPosition(train);
@@ -189,28 +206,47 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
const data = getStationDataFromName(ToData);
setStation(data);
}, [ToData]);
const lineColor =
station.length > 0
? lineColorList[station[0]?.StationNumber.slice(0, 1)]
: "black";
const customTrainType = getTrainType({ type: customData.type, whiteMode: true });
// const lineColor =
// station.length > 0
// ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
// : "black";
const lineColor = "red";
const customTrainType = getTrainType({
type: customData.type,
whiteMode: true,
});
return (
<TouchableOpacity
style={{ flex: 1, flexDirection: "row", backgroundColor: "black" }}
style={{
flex: 1,
flexDirection: displaySize === 50 ? "row" : "column",
backgroundColor: "black",
borderBottomColor: "black",
borderBottomWidth: 2,
position: "relative",
}}
activeOpacity={1}
onPress={() => {
setFixedPosition({ type: null, value: null });
//setFixedPosition({ type: null, value: null });
}}
>
<View
style={{ flexDirection: "column", flex: 1, backgroundColor: "white" }}
style={{
flexDirection: displaySize === 50 ? "column" : "row",
flex: 1,
backgroundColor: "white",
height: displaySize === 50 ? 50 : 200,
overflow: "hidden",
}}
>
<View style={{ flex: 1, flexDirection: "row" }}>
<View style={{ flex: displaySize === 50 ? 1 : 5, flexDirection: "row" }}>
<View
style={{
backgroundColor: customTrainType.color,
flexDirection: "row",
alignContent: "center",
alignSelf: "center",
alignItems: "center",
height: "100%",
}}
>
@@ -222,7 +258,7 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
/>
<View
style={{
flexDirection: "row",
flexDirection: displaySize === 50 ? "row" : "column",
alignContent: "center",
alignSelf: "center",
}}
@@ -230,8 +266,12 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
<Text
style={{
fontSize: 14,
fontFamily: customTrainType.fontAvailable ? "JR-Nishi" : undefined,
fontWeight: !customTrainType.fontAvailable ? "bold" : undefined,
fontFamily: customTrainType.fontAvailable
? "JR-Nishi"
: undefined,
fontWeight: !customTrainType.fontAvailable
? "bold"
: undefined,
marginTop: customTrainType.fontAvailable ? 3 : 0,
color: "white",
textAlignVertical: "center",
@@ -245,7 +285,7 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
style={{
fontSize: customData?.trainName?.length > 6 ? 9 : 14,
color: "white",
maxWidth: 65,
maxWidth: displaySize === 50 ? 65 : 200,
textAlignVertical: "center",
}}
>
@@ -260,10 +300,12 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
borderLeftColor: customTrainType.color,
borderTopColor: lineColor,
borderBottomColor: lineColor,
borderTopWidth: 14,
borderBottomWidth: 14,
borderLeftWidth: 10,
borderTopWidth: displaySize === 50 ? 14 : 50,
borderBottomWidth: displaySize === 50 ? 14 : 50,
borderLeftWidth: displaySize === 50 ? 10 : 30,
borderRightWidth: 0,
//height: displaySize === 50 ? 20 : 100,
height: "100%",
}}
></View>
</View>
@@ -306,11 +348,26 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
</View>
</View>
</View>
{displaySize === 200 && (
<View
style={{
backgroundColor: "white",
width: 10,
borderLeftColor: "black",
borderTopColor: lineColor,
borderBottomColor: "white",
borderRightColor: "black",
borderTopWidth: 50,
borderBottomWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 20,
}}
></View>
)}
<View
style={{
backgroundColor: "black",
flex: 1,
flex: displaySize === 50 ? 1 : 4,
flexDirection: "row",
alignItems: "center",
}}
@@ -340,32 +397,149 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
>
{nextStationData[0]?.Station_JP || "不明"}
</Text>
<View
style={{
backgroundColor: "white",
width: 10,
borderLeftColor: "black",
borderTopColor: "black",
borderBottomColor: "white",
borderRightColor: "white",
borderTopWidth: 25,
borderBottomWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 10,
}}
></View>
{displaySize === 50 && (
<View
style={{
backgroundColor: "white",
width: 10,
borderLeftColor: "black",
borderTopColor: "black",
borderBottomColor: "white",
borderRightColor: "white",
borderTopWidth: 21,
borderBottomWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 7,
}}
></View>
)}
</View>
</View>
<CurrentPositionBox
train={train}
lineColor={lineColor}
trainDataWithThrough={untilStationData}
isSmall={displaySize === 50}
/>
<TouchableOpacity
style={{
position: "absolute",
top: "100%",
left: 0,
flexDirection: "row",
alignItems: "center",
}}
onPress={() => {
setFixedPosition({ type: null, value: null });
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
backgroundColor: "black",
paddingHorizontal: 5,
height: 26,
}}
>
<Ionicons name="lock-closed" size={15} color="white" />
<Text
style={{
color: "white",
fontSize: 15,
paddingRight: 5,
}}
>
列車追跡中
</Text>
<Ionicons name="close" size={15} color="white" />
</View>
<View
style={{
backgroundColor: "#0000",
width: 6,
borderLeftColor: "black",
borderTopColor: "black",
borderBottomColor: "#0000",
borderRightColor: "#0000",
borderBottomWidth: 26,
borderLeftWidth: 10,
borderRightWidth: 0,
borderTopWidth: 0,
height: 26,
}}
/>
</TouchableOpacity>
<TouchableOpacity
style={{
position: "absolute",
top: "100%",
right: 0,
flexDirection: "row",
alignItems: "center",
}}
onPress={() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
if (displaySize === 50) {
setDisplaySize(200);
} else {
setDisplaySize(50);
}
}}
>
<View
style={{
backgroundColor: "#0000",
width: 6,
borderLeftColor: "#0000",
borderTopColor: "black",
borderBottomColor: "#0000",
borderRightColor: "black",
borderBottomWidth: 26,
borderLeftWidth: 0,
borderRightWidth: 10,
borderTopWidth: 0,
height: 26,
}}
/>
<View
style={{
flexDirection: "row",
alignItems: "center",
backgroundColor: "black",
paddingHorizontal: 5,
height: 26,
}}
pointerEvents="none"
>
<Ionicons
name={displaySize == 50 ? "chevron-down" : "chevron-up"}
size={15}
color="white"
/>
<Text
style={{
color: "white",
paddingRight: 5,
backgroundColor: "black",
fontSize: 15,
}}
>
{displaySize == 50 ? "列車情報展開" : "列車情報縮小"}
</Text>
</View>
</TouchableOpacity>
</TouchableOpacity>
);
};
const CurrentPositionBox = ({ train, lineColor, trainDataWithThrough }) => {
const CurrentPositionBox = ({
train,
lineColor,
trainDataWithThrough,
isSmall,
}) => {
let firstText = "";
let secondText = "";
let marginText = "";
@@ -383,39 +557,45 @@ const CurrentPositionBox = ({ train, lineColor, trainDataWithThrough }) => {
}
}
return (
<View style={{ flex: 1, backgroundColor: "white", flexDirection: "row" }}>
<View style={{ flexDirection: "column", height: "100%" }}>
<View
style={{
backgroundColor: "white",
width: 10,
borderLeftColor: lineColor,
borderTopColor: lineColor,
borderBottomColor: "white",
borderRightColor: "white",
borderTopWidth: 25,
borderBottomWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 10,
flex: 1,
}}
></View>
<View
style={{
backgroundColor: "white",
width: 10,
borderLeftColor: "white",
borderTopColor: "white",
borderBottomColor: "white",
borderRightColor: "white",
borderTopWidth: 25,
borderBottomWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 10,
flex: 1,
}}
></View>
</View>
<View
style={{
flex: isSmall ? 1 : 3,
backgroundColor: "white",
flexDirection: "row",
}}
>
{isSmall && (
<View style={{ flexDirection: "column" }}>
<View
style={{
backgroundColor: "white",
width: 10,
borderLeftColor: lineColor,
borderTopColor: lineColor,
borderBottomColor: "white",
borderRightColor: "white",
borderTopWidth: 28,
borderBottomWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 10,
}}
></View>
<View
style={{
backgroundColor: "white",
width: 10,
borderLeftColor: "white",
borderTopColor: "white",
borderBottomColor: "white",
borderRightColor: "white",
borderTopWidth: 18,
borderBottomWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 10,
}}
></View>
</View>
)}
<View style={{ flex: 1, flexDirection: "row", overflow: "hidden" }}>
{trainDataWithThrough.length > 0 &&
trainDataWithThrough.map((d, index, array) => {
@@ -424,41 +604,46 @@ const CurrentPositionBox = ({ train, lineColor, trainDataWithThrough }) => {
const [station, se, time] = d.split(",");
return (
<>
{(index == 0 && secondText == "") || <View
style={{
flexDirection: "column",
backgroundColor: "#6e6e6eff",
borderRadius: 10,
marginHorizontal: 2,
padding: 2,
justifyContent: "center",
alignItems: "center",
overflow: "hidden",
}}
key={d+"CurrentPositionBox"}
>
{station.split("").map((i, index) => {
return (
<Text
key={i+index}
style={{
fontSize: 6,
color: "white",
margin: 0,
padding: 0,
fontWeight: "bold",
}}
>
{i}
</Text>
);
})}
<View style={{ flex: 1 }} />
<Text style={{ fontSize: 8, color: "white" }}>
{se.includes("通") ? "" : "●"}
</Text>
</View>}
{(index == 0 && secondText != "") && (
{(index == 0 && secondText == "") || (
<View
style={{
flexDirection: "column",
backgroundColor: "#6e6e6eff",
borderRadius: 10,
marginHorizontal: isSmall ? 2 : 4,
marginVertical: isSmall ? 0 : 2,
padding: isSmall ? 2 : 4,
justifyContent: "center",
alignItems: "center",
overflow: "hidden",
}}
key={d + "CurrentPositionBox"}
>
{station.split("").map((i, index) => {
return (
<Text
key={i + index}
style={{
fontSize: isSmall ? 6 : 14,
color: "white",
margin: 0,
padding: 0,
fontWeight: "bold",
}}
>
{i}
</Text>
);
})}
<View style={{ flex: 1 }} />
<Text
style={{ fontSize: isSmall ? 8 : 14, color: "white" }}
>
{se.includes("通") ? "" : "●"}
</Text>
</View>
)}
{index == 0 && secondText != "" && (
<View
style={{
flexDirection: "column",
@@ -472,7 +657,11 @@ const CurrentPositionBox = ({ train, lineColor, trainDataWithThrough }) => {
}}
>
<View style={{ flex: 1 }} />
<Text style={{ fontSize: 8, color: "black" }}>＞</Text>
<Text
style={{ fontSize: isSmall ? 8 : 14, color: "black" }}
>
＞
</Text>
</View>
)}
</>