Merge commit '815734eb07186bf15c58a3befd9b190fd2839170' into develop

assets/originData/lineColorList.js

@@ -0,0 +1,11 @@
+export default {
+  Y: "#F5AC13",
+  U: "#F5AC13",
+  S: "#9AA7D7",
+  D: "#DC4586",
+  K: "#DC4586",
+  B: "#366481",
+  N: "#881F61",
+  T: "#87CA3B",
+  M: "#0071be",
+};

components/ActionSheetComponents/StationDeteilView.js

@@ -1,14 +1,24 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
-import { View, Linking } from "react-native";
+import {
+  StatusBar,
+  View,
+  LayoutAnimation,
+  ScrollView,
+  Linking,
+  Text,
+  TouchableOpacity,
+} from "react-native";
 import { FontAwesome, Foundation, Ionicons } from "@expo/vector-icons";
 import ActionSheet from "react-native-actions-sheet";
 import Sign from "../../components/駅名表/Sign";
+import { useInterval } from "../../lib/useInterval";
 
 import { TicketBox } from "../atom/TicketBox";
 import {
   widthPercentageToDP as wp,
   heightPercentageToDP as hp,
 } from "react-native-responsive-screen";
+import lineColorList from "../../assets/originData/lineColorList";
 
 export const StationDeteilView = (props) => {
   const {
@@ -63,6 +73,15 @@ export const StationDeteilView = (props) => {
               />
             </View>
           )}
+          {currentStation &&
+            currentStation.map((d) => (
+              <NexPreStationLine
+                currentStation={d}
+                originalStationList={originalStationList}
+                favoriteStation={favoriteStation}
+                setFavoriteStation={setFavoriteStation}
+              />
+            ))}
           {currentStation && (
             <View style={{ flexDirection: "row" }}>
               {!currentStation[0].JrHpUrl || (
@@ -108,3 +127,226 @@ export const StationDeteilView = (props) => {
     </ActionSheet>
   );
 };
+
+const StationName = (props) => {
+  const { stringData, ss } = props;
+  return (
+    <View style={ss}>
+      <Text style={styleSheet.下枠駅名}>{stringData.Station_JP}</Text>
+      <Text style={styleSheet.下枠駅名}>{stringData.Station_EN}</Text>
+    </View>
+  );
+};
+
+const NexPreStationLine = ({
+  currentStation,
+  originalStationList,
+  oP,
+  favoriteStation,
+  setFavoriteStation,
+}) => {
+  const [preStation, setPreStation] = useState();
+  const [nexStation, setNexStation] = useState();
+  const [lineName, setLineName] = useState();
+
+  useEffect(() => {
+    getPreNextStation(currentStation);
+  }, [currentStation]);
+
+  useEffect(() => {
+    if (!currentStation) return () => {};
+    getPreNextStation(currentStation);
+  }, []);
+  const getPreNextStation = (now) => {
+    const lineList = [
+      "予讃線(高松-松山間)[Y]",
+      "予讃線(松山-宇和島間)[U]",
+      "予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]",
+      "土讃線(多度津-高知間)[D]",
+      "土讃線(高知-窪川間)[K]",
+      "高徳線(高松-徳島間)[T]",
+      "徳島線(徳島-阿波池田)[B]",
+      "鳴門線(池谷-鳴門間)[N]",
+      "瀬戸大橋線(宇多津-児島間)[M]",
+    ];
+    let returnData;
+    lineList.forEach((d) => {
+      let cache = originalStationList[d].findIndex(
+        (data) => data.StationNumber == now.StationNumber
+      );
+      if (cache != -1) {
+        returnData = [
+          originalStationList[d][cache - 1],
+          originalStationList[d][cache + 1],
+          d,
+        ];
+      }
+    });
+    setPreStation(returnData[0]);
+    setNexStation(returnData[1]);
+    setLineName(returnData[2]);
+  };
+  return (
+    <View
+      style={{
+        height: 50,
+        backgroundColor: lineName
+          ? lineColorList[lineName.split("[")[1].replace("]", "")]
+          : "red",
+        flexDirection: "row",
+        alignContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <View style={styleSheet.下枠フレーム}>
+        {preStation ? (
+          <>
+            <Text style={styleSheet.下枠左右マーク}>◀</Text>
+            {preStation.StationNumber ? (
+              <View style={styleSheet.下枠駅ナンバー}>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: parseInt("10%"),
+                    color: "white",
+                  }}
+                >
+                  {preStation.StationNumber}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            ) : (
+              <></>
+            )}
+            <StationName
+              stringData={preStation}
+              ss={{ flex: 1, alignItems: "flex-start" }}
+            />
+          </>
+        ) : (
+          <></>
+        )}
+      </View>
+
+      <Text
+        style={{
+          fontSize: parseInt("10%"),
+          color: "white",
+          textAlign: "center",
+        }}
+      >
+        {lineName &&
+          lineName
+            .split("(")
+            .map((d, index) => (index == 1 ? "(" + d : d))
+            .join("\n")}
+      </Text>
+      <View style={styleSheet.下枠フレーム}>
+        {nexStation ? (
+          <>
+            <StationName
+              stringData={nexStation}
+              ss={{ flex: 1, alignItems: "flex-end" }}
+            />
+            {nexStation.StationNumber ? (
+              <View style={styleSheet.下枠駅ナンバー}>
+                <View style={{ flex: 1 }} />
+                <Text style={{ fontSize: parseInt("15%"), color: "white" }}>
+                  {nexStation.StationNumber}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            ) : (
+              <></>
+            )}
+            <Text style={styleSheet.下枠左右マーク}>▶</Text>
+          </>
+        ) : (
+          <></>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styleSheet = {
+  外枠: {
+    width: wp("80%"),
+    height: (wp("80%") / 20) * 9,
+    borderColor: "#2E94BB",
+    borderWidth: 1,
+    backgroundColor: "white",
+  },
+  下帯: {
+    position: "absolute",
+    bottom: "0%",
+    left: "0%",
+    width: "100%",
+    height: "30%",
+    backgroundColor: "#2E94BB",
+  },
+  JRStyle: {
+    position: "absolute",
+    top: "2%",
+    left: "2%",
+    fontWeight: "bold",
+    fontSize: parseInt("30%"),
+    color: "#2E94BB",
+  },
+  stationNameAreaOverWrap: {
+    position: "absolute",
+    top: "10%",
+    alignContent: "center",
+    flexDirection: "row",
+  },
+  Station_JP: {
+    fontWeight: "bold",
+    fontSize: parseInt("40%"),
+    color: "#005170",
+  },
+  Station_EN: {
+    fontWeight: "bold",
+    fontSize: parseInt("15%"),
+    color: "#005170",
+  },
+  下帯内容: {
+    position: "absolute",
+    bottom: "0%",
+    height: "30%",
+    width: "100%",
+    alignItems: "center",
+    flexDirection: "column",
+  },
+  下枠フレーム: {
+    flex: 1,
+    flexDirection: "row",
+    alignContent: "center",
+    height: wp("10%"),
+  },
+  下枠左右マーク: {
+    fontWeight: "bold",
+    fontSize: parseInt("20%"),
+    color: "white",
+    paddingHorizontal: 10,
+    textAlignVertical: "center",
+  },
+  下枠駅ナンバー: {
+    alignContent: "center",
+    alignItems: "center",
+    width: wp("8%"),
+    height: wp("8%"),
+    margin: wp("1%"),
+    borderColor: "white",
+    borderWidth: parseInt("2%"),
+    borderRadius: parseInt("100%"),
+  },
+  下枠駅名: {
+    fontWeight: "bold",
+    fontSize: parseInt("15%"),
+    color: "white",
+    flex: 1,
+    paddingHorizontal: 0,
+    marginVertical: 0,
+    textAlignVertical: "center",
+  },
+};

components/駅名表/Sign.js

@@ -65,15 +65,15 @@ export default function Sign(props) {
   }, [nexPrePosition]);
   const getPreNextStation = (now) => {
     const lineList = [
-      "予讃線",
+      "予讃線(高松-松山間)[Y]",
-      "松宇線",
+      "予讃線(松山-宇和島間)[U]",
-      "伊予灘線",
+      "予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]",
-      "土讃線",
+      "土讃線(多度津-高知間)[D]",
-      "窪川線",
+      "土讃線(高知-窪川間)[K]",
-      "高徳線",
+      "高徳線(高松-徳島間)[T]",
-      "徳島線",
+      "徳島線(徳島-阿波池田)[B]",
-      "鳴門線",
+      "鳴門線(池谷-鳴門間)[N]",
-      "瀬戸大橋線",
+      "瀬戸大橋線(宇多津-児島間)[M]",
     ];
     let returnData;
     lineList.forEach((d) => {

lib/getStationList.js

@@ -19,15 +19,15 @@ import train_lang from "../assets/originData/train_lang";
 let status = undefined;
 
 export const lineList = [
-  "予讃線",
+  "予讃線(高松-松山間)[Y]",
-  "松宇線",
+  "予讃線(松山-宇和島間)[U]",
-  "伊予灘線",
+  "予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]",
-  "土讃線",
+  "土讃線(多度津-高知間)[D]",
-  "窪川線",
+  "土讃線(高知-窪川間)[K]",
-  "高徳線",
+  "高徳線(高松-徳島間)[T]",
-  "徳島線",
+  "徳島線(徳島-阿波池田)[B]",
-  "鳴門線",
+  "鳴門線(池谷-鳴門間)[N]",
-  "瀬戸大橋線",
+  "瀬戸大橋線(宇多津-児島間)[M]",
 ];
 
 export const getStationList = async (props) => {
@@ -53,15 +53,15 @@ export const getStationList = async (props) => {
   ]).then((values) => {
     let stationList = {};
     [
-      stationList.予讃線,
+      stationList["予讃線(高松-松山間)[Y]"],
-      stationList.松宇線,
+      stationList["予讃線(松山-宇和島間)[U]"],
-      stationList.伊予灘線,
+      stationList["予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]"],
-      stationList.土讃線,
+      stationList["土讃線(多度津-高知間)[D]"],
-      stationList.窪川線,
+      stationList["土讃線(高知-窪川間)[K]"],
-      stationList.高徳線,
+      stationList["高徳線(高松-徳島間)[T]"],
-      stationList.徳島線,
+      stationList["徳島線(徳島-阿波池田)[B]"],
-      stationList.鳴門線,
+      stationList["鳴門線(池谷-鳴門間)[N]"],
-      stationList.瀬戸大橋線,
+      stationList["瀬戸大橋線(宇多津-児島間)[M]"],
       stationList.駅間リスト,
       stationList.日英対応表,
     ] = values;
@@ -115,52 +115,55 @@ export const getStationList = async (props) => {
         return data;
       });
     };
-    stationList.予讃線 = addStationPosition(
+    stationList["予讃線(高松-松山間)[Y]"] = addStationPosition(
-      concatBetweenStations(stationList.予讃線),
+      concatBetweenStations(stationList["予讃線(高松-松山間)[Y]"]),
       予讃線,
       stationList.日英対応表
     );
-    stationList.松宇線 = addStationPosition(
+    stationList["予讃線(松山-宇和島間)[U]"] = addStationPosition(
-      concatBetweenStations(stationList.松宇線),
+      concatBetweenStations(stationList["予讃線(松山-宇和島間)[U]"]),
       予讃線,
       stationList.日英対応表
     );
-    stationList.伊予灘線 = addStationPosition(
+    stationList["予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]"] =
-      concatBetweenStations(stationList.伊予灘線),
+      addStationPosition(
-      予讃線,
+        concatBetweenStations(
-      stationList.日英対応表
+          stationList["予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]"]
-    );
+        ),
-    stationList.土讃線 = addStationPosition(
+        予讃線,
-      concatBetweenStations(stationList.土讃線),
+        stationList.日英対応表
+      );
+    stationList["土讃線(多度津-高知間)[D]"] = addStationPosition(
+      concatBetweenStations(stationList["土讃線(多度津-高知間)[D]"]),
       土讃線,
       stationList.日英対応表
     );
-    stationList.窪川線 = addStationPosition(
+    stationList["土讃線(高知-窪川間)[K]"] = addStationPosition(
-      concatBetweenStations(stationList.窪川線),
+      concatBetweenStations(stationList["土讃線(高知-窪川間)[K]"]),
       土讃線,
       stationList.日英対応表
     );
-    stationList.高徳線 = addStationPosition(
+    stationList["高徳線(高松-徳島間)[T]"] = addStationPosition(
-      concatBetweenStations(stationList.高徳線),
+      concatBetweenStations(stationList["高徳線(高松-徳島間)[T]"]),
       高徳線,
       stationList.日英対応表
     );
-    stationList.鳴門線 = addStationPosition(
+    stationList["鳴門線(池谷-鳴門間)[N]"] = addStationPosition(
-      concatBetweenStations(stationList.鳴門線),
+      concatBetweenStations(stationList["鳴門線(池谷-鳴門間)[N]"]),
       鳴門線,
       stationList.日英対応表
     );
     const tokushimaCurrent = addStationPosition(
-      concatBetweenStations(stationList.徳島線),
+      concatBetweenStations(stationList["徳島線(徳島-阿波池田)[B]"]),
       徳島線,
       stationList.日英対応表
     );
-    stationList.徳島線 = [
+    stationList["徳島線(徳島-阿波池田)[B]"] = [
       tokushimaCurrent[tokushimaCurrent.length - 1],
       ...tokushimaCurrent,
     ];
-    stationList.徳島線.pop();
+    stationList["徳島線(徳島-阿波池田)[B]"].pop();
-    stationList.瀬戸大橋線 = [
+    stationList["瀬戸大橋線(宇多津-児島間)[M]"] = [
       {
         Station_JP: "坂出",
         Station_EN: "Sakaide",