diff --git a/components/ActionSheetComponents/EachTrainInfo/EachStopList.js b/components/ActionSheetComponents/EachTrainInfo/EachStopList.js deleted file mode 100644 index d6cdb41..0000000 --- a/components/ActionSheetComponents/EachTrainInfo/EachStopList.js +++ /dev/null @@ -1,183 +0,0 @@ -import React from "react"; -import { View, Text, TouchableWithoutFeedback } from "react-native"; -import dayjs from "dayjs"; -import lineColorList from "../../../assets/originData/lineColorList"; - -export const EachStopList = ({ - i, - index, - stationList, - points, - currentTrainData, - openStationACFromEachTrainInfo, - showThrew, -}) => { - if (!showThrew) { - if (i.split(",")[1] == "通過") return null; - if (i.split(",")[1] == "通編") return null; - } - const [station, se, time] = i.split(","); // 阿波池田,発,6:21 - const Stations = stationList - .map((a) => a.filter((d) => d.StationName == station)) - .reduce((newArray, e) => newArray.concat(e), []); - /*Array [ - Object { - "StationName": "佐古", - "StationNumber": "T01", - }, - Object { - "StationName": "佐古", - "StationNumber": "B01", - }, - ] */ - const StationNumbers = - Stations && - Stations.filter((d) => d.StationNumber).map((d) => d.StationNumber); - const [seString, seType] = (() => { - switch (se) { - case "発": - return ["出発", "normal"]; - case "着": - return ["到着", "normal"]; - case "発編": - return ["出発", "community"]; - case "着編": - return ["到着", "community"]; - case "通編": - return ["通過", "community"]; - case "頃編": - return ["頃", "community"]; - default: - return [se, "normal"]; - } - })(); - // Array [ "T01", "B01",] - const lineIDs = []; - const EachIDs = []; - StationNumbers.forEach((d) => { - const textArray = d.split(""); - lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join("")); - EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join("")); - }); - // Array [ "T", "B",] - // Array [ "01", "01",] - - const dates = dayjs() - .set("hour", parseInt(time.split(":")[0])) - .set("minute", parseInt(time.split(":")[1])) - .add(isNaN(currentTrainData?.delay) ? 0 : currentTrainData.delay, "minute"); - const timeString = se == "通過" ? "" : dates.format("HH:mm"); - - return ( - - openStationACFromEachTrainInfo && - openStationACFromEachTrainInfo(station) - } - key={station} - > - - - {lineIDs.map((lineID, index) => ( - - - - {lineIDs[index]} - {"\n"} - {EachIDs[index]} - - - - ))} - - - - {station} - - - - {points ? ( - - 🚊 - - ) : null} - - - {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && ( - - {time} - - )} - - {se == "通過" ? "レ" : timeString} - - {seString} - - - - ); -}; diff --git a/components/ActionSheetComponents/EachTrainInfo/EachStopList.tsx b/components/ActionSheetComponents/EachTrainInfo/EachStopList.tsx new file mode 100644 index 0000000..e5eb06a --- /dev/null +++ b/components/ActionSheetComponents/EachTrainInfo/EachStopList.tsx @@ -0,0 +1,220 @@ +import React, { FC } from "react"; +import { View, Text, TouchableWithoutFeedback } from "react-native"; +import dayjs from "dayjs"; +import lineColorList from "../../../assets/originData/lineColorList"; + +type seTypes = "発編" | "着編" | "通編" | "頃編" | "発" | "着" | string; + +type currentTrainDataType = { + Index: number; + num: string; + delay: "入線" | number | undefined; + Pos: string; + PosNum: number; + Direction: number; + Type: string; + Line: string; +}; +type props = { + i: string; + index: number; + stationList: { StationName: string; StationNumber: string }[][]; + points: boolean; + currentTrainData?: currentTrainDataType; + openStationACFromEachTrainInfo?: (station: string) => void; + showThrew: boolean; +}; +export const EachStopList: FC = ({ + i, + index, + stationList, + points, + currentTrainData, + openStationACFromEachTrainInfo, + showThrew, +}) => { + const [station, se, time] = i.split(",") as [string, seTypes, string]; // 阿波池田,発,6:21 + if (!showThrew) { + if (se == "通過") return null; + if (se == "通編") return null; + } + const Stations = stationList + .map((a) => a.filter((d) => d.StationName == station)) + .reduce((newArray, e) => newArray.concat(e), []); + /*Array [ + Object { + "StationName": "佐古", + "StationNumber": "T01", + }, + Object { + "StationName": "佐古", + "StationNumber": "B01", + }, + ] */ + const StationNumbers = + Stations && + Stations.filter((d) => d.StationNumber).map((d) => d.StationNumber); + const [seString, seType] = (() => { + switch (se) { + case "発": + return ["出発", "normal"]; + case "着": + return ["到着", "normal"]; + case "発編": + return ["出発", "community"]; + case "着編": + return ["到着", "community"]; + case "通編": + return ["通過", "community"]; + case "頃編": + return ["頃", "community"]; + default: + return [se, "normal"]; + } + })(); + // Array [ "T01", "B01",] + // Array [ "T", "B",] + // Array [ "01", "01",] + + const textColor = `#${seType == "community" ? "44f" : "000"}${ + se == "通過" || se == "通編" ? "5" : "" + }`; + return ( + + openStationACFromEachTrainInfo && + openStationACFromEachTrainInfo(station) + } + key={station} + > + + + {StationNumbers.map((stn, index) => ( + + ))} + + + + {station} + + + + {points && ( + + 🚊 + + )} + + + {currentTrainData?.delay && + currentTrainData?.delay != "入線" && + currentTrainData?.delay != 0 && ( + + {time} + + )} + + + {seString} + + + + + ); +}; + +const StationNumbersBox: FC<{ stn: string; se: seTypes }> = (props) => { + const { stn, se } = props; + const lineColor = lineColorList[stn.charAt(0)]; + const hasThrew = se == "通過" || se == "通編" ? "80" : ""; + const backgroundColor = `${lineColor}${hasThrew}`; + return ( + + + + {stn.charAt(0)} + {"\n"} + {stn.slice(1)} + + + + ); +}; + +type StationTimeBoxType = { + delay: "入線" | number | undefined; + textColor: string; + seType: seTypes; + se: string; + time: string; +}; + +const StationTimeBox: FC = (props) => { + const { delay, textColor, seType, se, time } = props; + const dates = dayjs() + .set("hour", parseInt(time.split(":")[0])) + .set("minute", parseInt(time.split(":")[1])) + .add(delay == "入線" || delay == undefined ? 0 : delay, "minute"); + const timeString = se == "通過" ? "" : dates.format("HH:mm"); + return ( + + {se == "通過" ? "レ" : timeString} + + ); +}; diff --git a/components/ActionSheetComponents/EachTrainInfoCore.js b/components/ActionSheetComponents/EachTrainInfoCore.js index f3e1a1a..1c29e30 100644 --- a/components/ActionSheetComponents/EachTrainInfoCore.js +++ b/components/ActionSheetComponents/EachTrainInfoCore.js @@ -471,10 +471,10 @@ export const EachTrainInfoCore = ({ borderWidth: 1, margin: 10, borderRadius: 5, - alignItems: "center", + alignItems: "center", backgroundColor:"#ffffffc2" }} > - + Twitterで検索 diff --git a/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx b/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx index 8fea967..80b7a36 100644 --- a/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx +++ b/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx @@ -168,15 +168,15 @@ export const HeaderText: FC = ({ {typeName} {isOneMan && } - {trainName} + 10 ?{fontSize:14}:{} }}>{trainName} - {trainInfoUrl && ( + {/* {trainInfoUrl && ( - )} + )} */} {isEdit && ( = ({ data, navigate, from }) => { ) : ( )} diff --git a/components/ActionSheetComponents/SpecialTrainInfo.tsx b/components/ActionSheetComponents/SpecialTrainInfo.tsx index 590f0d9..3114ff2 100644 --- a/components/ActionSheetComponents/SpecialTrainInfo.tsx +++ b/components/ActionSheetComponents/SpecialTrainInfo.tsx @@ -1,10 +1,14 @@ -import React, { useRef } from "react"; +import React, { FC, useRef } from "react"; import { View, Platform } from "react-native"; import ActionSheet from "react-native-actions-sheet"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { SpecialTrainInfoBox } from "../Menu/SpecialTrainInfoBox"; -export const SpecialTrainInfo = ({ payload }) => { + +type props = { + payload: { navigate: (screen: string, params?: object) => void }; +}; +export const SpecialTrainInfo: FC = ({ payload }) => { const { navigate } = payload; const actionSheetRef = useRef(null); const insets = useSafeAreaInsets(); diff --git a/components/Menu/SpecialTrainInfoBox.tsx b/components/Menu/SpecialTrainInfoBox.tsx index c24bb95..3b5548e 100644 --- a/components/Menu/SpecialTrainInfoBox.tsx +++ b/components/Menu/SpecialTrainInfoBox.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect, useLayoutEffect, useState } from "react"; +import { FC, useLayoutEffect, useState } from "react"; import { View, Text, TouchableOpacity } from "react-native"; import { getPDFViewURL } from "@/lib/getPdfViewURL"; import { ScrollView, SheetManager } from "react-native-actions-sheet"; @@ -6,20 +6,27 @@ import { ScrollView, SheetManager } from "react-native-actions-sheet"; type props = { navigate: (screen: string, params?: object) => void; }; +type specialDataType = { address: string; text: string; description: string }; + export const SpecialTrainInfoBox: FC = ({ navigate }) => { - const [specialData, setSpecialData] = useState([]); + const [specialData, setSpecialData] = useState([]); useLayoutEffect(() => { fetch("https://n8n.haruk.in/webhook/sptrainfo") .then((res) => res.json()) .then((data) => setSpecialData(data.data)) .catch((err) => console.log(err)); }, []); + + const onPressItem: (d: specialDataType) => void = (d) => { + navigate("howto", { + info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address), + goTo: "menu", + }); + SheetManager.hide("SpecialTrainInfo"); + }; + return ( - + = ({ navigate }) => { 臨時列車情報 - + {specialData.map((d) => ( { - navigate("howto", { - info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address), - goTo: "menu", - }); - SheetManager.hide("SpecialTrainInfo"); - }} + onPress={() => onPressItem(d)} onLongPress={() => alert(d.description)} key={d.address} style={{