From aff1383bebda35f8a153b6d3a30926c4f6177030 Mon Sep 17 00:00:00 2001 From: harukin-expo-dev-env Date: Sun, 28 Apr 2024 02:09:11 +0000 Subject: [PATCH 1/3] =?UTF-8?q?=E3=83=9E=E3=83=83=E3=83=97=E3=81=AE?= =?UTF-8?q?=E8=B7=AF=E7=B7=9A=E5=88=A5=E9=A7=85=E9=81=B8=E6=8A=9E=E6=A9=9F?= =?UTF-8?q?=E8=83=BD=E3=82=92=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/trainMenu.js | 122 +++++++++++++++++++++++++++++----------- lib/getStationList2.js | 13 ++++- 2 files changed, 102 insertions(+), 33 deletions(-) diff --git a/components/trainMenu.js b/components/trainMenu.js index 13876a0..b075037 100644 --- a/components/trainMenu.js +++ b/components/trainMenu.js @@ -1,43 +1,40 @@ -import React, { useRef, useMemo } from "react"; +import React, { useRef, useState, useEffect } from "react"; import { View, Text, TouchableOpacity, Linking } from "react-native"; import MapView, { Marker } from "react-native-maps"; import { MaterialCommunityIcons } from "@expo/vector-icons"; import { useCurrentTrain } from "../stateBox/useCurrentTrain"; import { useNavigation } from "@react-navigation/native"; +import lineColorList from "../assets/originData/lineColorList"; +import { stationIDPair } from "../lib/getStationList2"; export default function TrainMenu({ stationData, style }) { const { webview } = useCurrentTrain(); const mapRef = useRef(); const { navigate } = useNavigation(); - const stationPin = useMemo( - () => - Object.keys(stationData).map((d, indexBase) => - stationData[d].map((D, index) => { - if (!D.StationMap) return null; - const latlng = D.StationMap.replace( - "https://www.google.co.jp/maps/place/", - "" - ).split(","); - if (latlng.length == 0) return null; - return ( - { - webview.current?.injectJavaScript( - `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}'); - setStrings();` - ); - if (navigate) navigate("Apps"); - }} - > - ); - }) - ), - [stationData] - ); + const [stationPin, setStationPin] = useState([]); + useEffect(() => { + const stationPinData = []; + Object.keys(stationData).map((d, indexBase) => + stationData[d].map((D, index) => { + if (!D.StationMap) return null; + const latlng = D.StationMap.replace( + "https://www.google.co.jp/maps/place/", + "" + ).split(","); + if (latlng.length == 0) return null; + stationPinData.push({ D, d, latlng, indexBase: 0, index }); + }) + ); + setStationPin(stationPinData); + }, [stationData]); + useEffect(() => { + mapRef.current.fitToCoordinates( + stationPin.map(({ latlng }) => ({ + latitude: parseFloat(latlng[0]), + longitude: parseFloat(latlng[1]), + })), + { edgePadding: { top: 50, bottom: 50, left: 50, right: 50 } } // Add margin values here + ); + }, [stationPin]); return ( - {stationPin} + {stationPin.map(({ D, d, latlng, indexBase, index }) => ( + + ))} + + {Object.keys(stationData).map((d) => ( + { + setStationPin( + stationData[d].map((D, index) => { + if (!D.StationMap) return null; + const latlng = D.StationMap.replace( + "https://www.google.co.jp/maps/place/", + "" + ).split(","); + if (latlng.length == 0) return null; + return { D, d, latlng, indexBase: 0, index }; + }) + ); + }} + > + + {stationIDPair[d]} + + + ))} + {navigate && ( { ); }; + +const MapPin = ({ index, indexBase, latlng, D, d, navigate, webview }) => { + return ( + { + webview.current?.injectJavaScript( + `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}'); + setStrings();` + ); + if (navigate) navigate("Apps"); + }} + > + ); +}; diff --git a/lib/getStationList2.js b/lib/getStationList2.js index a8b392b..11397b8 100644 --- a/lib/getStationList2.js +++ b/lib/getStationList2.js @@ -1,4 +1,3 @@ -let status = undefined; import yosan from "../assets/originData/yosan"; import uwajima from "../assets/originData/uwajima"; import uwajima2 from "../assets/originData/uwajima2"; @@ -21,3 +20,15 @@ export const getStationList2 = async (props) => { seto, }; }; + +export const stationIDPair = { + yosan: "Y", + uwajima: "U", + uwajima2: "S", + dosan: "D", + dosan2: "K", + koutoku: "T", + tokushima: "B", + naruto: "N", + seto: "M", +}; From 1d4cb35aa52ea45c092e535e9337683782ea6006 Mon Sep 17 00:00:00 2001 From: harukin-expo-dev-env Date: Sun, 28 Apr 2024 03:40:08 +0000 Subject: [PATCH 2/3] =?UTF-8?q?=E4=B8=8A=E9=83=A8=E3=81=AB=E3=83=86?= =?UTF-8?q?=E3=82=AD=E3=82=B9=E3=83=88=E8=A1=A8=E7=A4=BA=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/trainMenu.js | 46 ++++++++++++++++++++++++++++------------- lib/getStationList.js | 11 ++++++++++ 2 files changed, 43 insertions(+), 14 deletions(-) diff --git a/components/trainMenu.js b/components/trainMenu.js index b075037..2b76461 100644 --- a/components/trainMenu.js +++ b/components/trainMenu.js @@ -6,16 +6,19 @@ import { useCurrentTrain } from "../stateBox/useCurrentTrain"; import { useNavigation } from "@react-navigation/native"; import lineColorList from "../assets/originData/lineColorList"; import { stationIDPair } from "../lib/getStationList2"; +import { lineListPair } from "../lib/getStationList"; export default function TrainMenu({ stationData, style }) { const { webview } = useCurrentTrain(); const mapRef = useRef(); const { navigate } = useNavigation(); const [stationPin, setStationPin] = useState([]); + const [selectedLine, setSelectedLine] = useState(undefined); useEffect(() => { const stationPinData = []; Object.keys(stationData).map((d, indexBase) => stationData[d].map((D, index) => { if (!D.StationMap) return null; + if (selectedLine && selectedLine != d) return; const latlng = D.StationMap.replace( "https://www.google.co.jp/maps/place/", "" @@ -25,7 +28,7 @@ export default function TrainMenu({ stationData, style }) { }) ); setStationPin(stationPinData); - }, [stationData]); + }, [stationData, selectedLine]); useEffect(() => { mapRef.current.fitToCoordinates( stationPin.map(({ latlng }) => ({ @@ -37,6 +40,32 @@ export default function TrainMenu({ stationData, style }) { }, [stationPin]); return ( + {selectedLine && ( + + + {selectedLine ? lineListPair[stationIDPair[selectedLine]] : "全線"} + + + )} + { - setStationPin( - stationData[d].map((D, index) => { - if (!D.StationMap) return null; - const latlng = D.StationMap.replace( - "https://www.google.co.jp/maps/place/", - "" - ).split(","); - if (latlng.length == 0) return null; - return { D, d, latlng, indexBase: 0, index }; - }) - ); - }} + onPress={() => setSelectedLine(selectedLine == d ? undefined : d)} > {stationIDPair[d]} diff --git a/lib/getStationList.js b/lib/getStationList.js index f1314de..06bb601 100644 --- a/lib/getStationList.js +++ b/lib/getStationList.js @@ -29,6 +29,17 @@ export const lineList = [ "鳴門線(池谷-鳴門間)[N]", "瀬戸大橋線(宇多津-児島間)[M]", ]; +export const lineListPair = { + Y: "予讃線(高松-松山間)[Y]", + U: "予讃線(松山-宇和島間)[U]", + S: "予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]", + D: "土讃線(多度津-高知間)[D]", + K: "土讃線(高知-窪川間)[K]", + T: "高徳線(高松-徳島間)[T]", + B: "徳島線(徳島-阿波池田)[B]", + N: "鳴門線(池谷-鳴門間)[N]", + M: "瀬戸大橋線(宇多津-児島間)[M]", +}; export const getStationList = async (props) => { if (status) return status; From c8973c36fade15bc87cdd5d7367b3af4a79793a2 Mon Sep 17 00:00:00 2001 From: harukin-expo-dev-env Date: Sun, 28 Apr 2024 10:10:31 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=E3=83=86=E3=82=AD=E3=82=B9=E3=83=88?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/trainMenu.js | 55 ++++++++++++++++++++++++++--------------- 1 file changed, 35 insertions(+), 20 deletions(-) diff --git a/components/trainMenu.js b/components/trainMenu.js index 2b76461..ebba80f 100644 --- a/components/trainMenu.js +++ b/components/trainMenu.js @@ -35,7 +35,7 @@ export default function TrainMenu({ stationData, style }) { latitude: parseFloat(latlng[0]), longitude: parseFloat(latlng[1]), })), - { edgePadding: { top: 50, bottom: 50, left: 50, right: 50 } } // Add margin values here + { edgePadding: { top: 100, bottom: 50, left: 50, right: 50 } } // Add margin values here ); }, [stationPin]); return ( @@ -95,25 +95,40 @@ export default function TrainMenu({ stationData, style }) { /> ))} - - {Object.keys(stationData).map((d) => ( - setSelectedLine(selectedLine == d ? undefined : d)} - > - - {stationIDPair[d]} - - - ))} + + + + 路線記号からフィルタリング + + {Object.keys(stationData).map((d) => ( + setSelectedLine(selectedLine == d ? undefined : d)} + > + + {stationIDPair[d]} + + + ))} + {navigate && (