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

列車情報表示機能の詳細デザイン作成

Browse Source
This commit is contained in:
harukin-OneMix4
2023-06-27 21:09:23 +09:00
parent ea1c505453
commit a643ab5c56
2 changed files with 185 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
components/ActionSheetComponents/EachTrainInfo.js
View File

@@ -6,14 +6,33 @@ import {
Linking,
Text,
TouchableOpacity,
TouchableWithoutFeedback,
TouchableHighlight,
} from "react-native";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import ActionSheet from "react-native-actions-sheet";
import LottieView from "lottie-react-native";
import trainList from "../../assets/originData/trainList";
import { lineList } from "../../lib/getStationList";
import { heightPercentageToDP } from "react-native-responsive-screen";
import lineColorList from "../../assets/originData/lineColorList";
export const EachTrainInfo = ({ setRef, data }) => {
export const EachTrainInfo = ({
setRef,
data,
navigate,
originalStationList,
openStationACFromEachTrainInfo,
}) => {
const [trainData, setTrainData] = useState([]);
const stationList =
originalStationList &&
lineList.map((d) =>
originalStationList[d].map((a) => ({
StationNumber: a.StationNumber,
StationName: a.Station_JP,
}))
);
useEffect(() => {
if (!data.trainNum) return;
@@ -75,17 +94,26 @@ export const EachTrainInfo = ({ setRef, data }) => {
<Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
{data.trainNum}
</Text>
<Ionicons
name="reload"
color="white"
size={30}
style={{ margin: 5 }}
onPress={() => {
LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
}}
/>
{data.limited != undefined &&
getType(data.limited.split(":")[0]) &&
!data.limited.split(":")[1].match("サンポート") && (
<Ionicons
name="subway"
color="white"
size={30}
style={{ margin: 5 }}
onPress={() => {
LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
navigate("trainbase", {
info: "train.html?tn=" + data.trainNum,
});
setRef.current?.hide();
}}
/>
)}
</View>
<ScrollView>
<ScrollView style={{ maxHeight: heightPercentageToDP("70%") }}>
<View
style={{
padding: 10,
@@ -103,7 +131,102 @@ export const EachTrainInfo = ({ setRef, data }) => {
/>
<Text>ほげほげふがふが</Text> */}
{trainData.map((i, index) => {
return <Text>{i}</Text>;
const [station, se, time] = i.split(",");
const Stations = stationList.map((a) =>
a.filter((d) => d.StationName == station)
);
const StationNumbers =
Stations &&
Stations.reduce((newArray, e) => {
return newArray.concat(e);
}, [])
.filter((d) => d.StationNumber)
.map((d) => d.StationNumber);
const colorIDs =
StationNumbers != null
? StationNumbers.map((d) => {
console.log(d);
return d.split("").filter((s) => "A" < s && s < "Z");
}).reduce((newArray, e) => {
return newArray.concat(e);
}, [])
: [];
const EachIDs =
StationNumbers != null
? StationNumbers.map((d) => {
console.log(d);
return d
.split("")
.filter((s) => "0" <= s && s <= "9")
.join("");
})
: [];
return (
<TouchableWithoutFeedback
onPress={() => openStationACFromEachTrainInfo(station)}
key={station}
>
<View
style={{
padding: 8,
flexDirection: "row",
borderBottomWidth: 1,
borderBottomColor: "#f0f0f0",
paddingLeft: 60,
}}
>
<View
style={{
width: 40,
height: 40,
position: "absolute",
left: 10,
top: 0,
flexDirection: "row",
}}
>
{colorIDs.map((color, index) => (
<View
style={{
backgroundColor: lineColorList[color],
flex: 1,
}}
key={color}
>
<View style={{ flex: 1 }} />
<Text
style={{
color: "white",
textAlign: "center",
fontSize: 10,
fontWeight: "bold",
}}
>
{colorIDs[index]}
</Text>
<Text
style={{
color: "white",
textAlign: "center",
fontSize: 10,
fontWeight: "bold",
}}
>
{EachIDs[index]}
</Text>
<View style={{ flex: 1 }} />
</View>
))}
</View>
<Text style={{ fontSize: 20 }}>{station}</Text>
<View style={{ flex: 1 }} />
<Text style={{ fontSize: 20 }}>
{time} {se}
</Text>
</View>
</TouchableWithoutFeedback>
);
})}
</View>
</View>