Merge commit 'c996b31dad836bed1994d4f25997f75b61cb661c' into develop

App.js

@@ -16,6 +16,7 @@ import menu from "./menu";
 import News from "./components/news.js";
 import Setting from "./components/settings.js";
 import trainMenu from "./components/trainMenu.js";
+import FavoriteList from "./components/FavoriteList.js";
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
 if (Platform.OS === "android") {
@@ -95,6 +96,11 @@ const top = () => (
     />
     <Stack.Screen name="news" component={News} options={optionData} />
     <Stack.Screen name="trainMenu" component={trainMenu} options={optionData} />
+    <Stack.Screen
+      name="favoriteList"
+      component={FavoriteList}
+      options={{ ...optionData, gestureEnabled: false }}
+    />
   </Stack.Navigator>
 );
 function menuPage() {

components/FavoriteList.js

@@ -0,0 +1,115 @@
+import React, { Component, useRef, useState, useEffect } from "react";
+import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { WebView } from "react-native-webview";
+import { ListItem } from "native-base";
+import Icon from "react-native-vector-icons/Entypo";
+import StatusbarDetect from "../StatusbarDetect";
+import { AS } from "../storageControl";
+import { news } from "../config/newsUpdate";
+import { getStationList, lineList } from "../lib/getStationList";
+var Status = StatusbarDetect();
+export default function FavoriteList(props) {
+  const {
+    route: {
+      params: { webview, stationData },
+    },
+    navigation: { navigate },
+  } = props;
+
+  const [favoriteStation, setFavoriteStation] = useState([]);
+
+  useEffect(() => {
+    AS.getItem("favoriteStation")
+      .then((d) => {
+        console.log(d);
+        const returnData = JSON.parse(d);
+        console.log(returnData);
+        setFavoriteStation(returnData);
+      })
+      .catch((d) => console.log(d));
+  }, []);
+
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <ScrollView style={{ height: "100%", backgroundColor: "white" }}>
+        {favoriteStation
+          .filter((d) => d[0].StationMap)
+          .map((currentStation) => {
+            console.log(currentStation);
+            return (
+              <ListItem
+                onPress={() => {
+                  const getStationLine = (now) => {
+                    const returnData = Object.keys(stationData).filter((d) => {
+                      const cache = stationData[d].findIndex(
+                        (data) => data.Station_JP == now.Station_JP
+                      );
+                      return cache != -1;
+                    });
+                    return returnData[0];
+                  };
+                  const lineName = getStationLine(currentStation[0]);
+
+                  webview.current?.injectJavaScript(
+                    `MoveDisplayStation('${lineName}_${currentStation[0].MyStation}_${currentStation[0].Station_JP}')`
+                  );
+                  navigate("Apps");
+                }}
+              >
+                <Text style={{ fontSize: 20, flex: 2 }}>
+                  {currentStation
+                    .map((d) => d.StationNumber)
+                    .filter((d) => d !== null)
+                    .join("/")}
+                </Text>
+                <Text style={{ fontSize: 20, flex: 3 }}>
+                  {currentStation[0].Station_JP}
+                </Text>
+                <View
+                  style={{
+                    flex: 2,
+                    flexDirection: "row",
+                    alignContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <View style={{ flex: 1 }} />
+                  <Text style={{ fontSize: 20 }}>移動する</Text>
+                  <Icon name="chevron-right" size={20} />
+                </View>
+              </ListItem>
+            );
+          })}
+      </ScrollView>
+      <Text
+        style={{
+          backgroundColor: "white",
+          borderWidth: 1,
+          borderStyle: "solid",
+        }}
+      >
+        お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
+      </Text>
+      <TouchableOpacity
+        style={{
+          padding: 10,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 10,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => {
+          navigate("trainMenu");
+        }}
+      >
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          閉じる
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+    </View>
+  );
+}

components/trainMenu.js

@@ -68,10 +68,7 @@ export default function trainMenu({
           icon="star"
           flex={1}
           onPressButton={() =>
-            /* Linking.openURL(
-              "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
-            ) */
-            alert("お気に入り駅登録機能は現在開発中です！レイアウト募集中！")
+            navigate("favoriteList", { webview, stationData })
           }
         >
           お気に入り

components/駅名表/Sign.js

@@ -12,7 +12,9 @@ import {
   widthPercentageToDP as wp,
   heightPercentageToDP as hp,
 } from "react-native-responsive-screen";
+import LottieView from "lottie-react-native";
 import { useInterval } from "../../lib/useInterval";
+import { AS } from "../../storageControl";
 
 export default function Sign(props) {
   const { currentStation, originalStationList, oP } = props;
@@ -20,6 +22,32 @@ export default function Sign(props) {
 
   const [preStation, setPreStation] = useState();
   const [nexStation, setNexStation] = useState();
+  const [testButtonStatus, setTestButtonStatus] = useState(false);
+  const [favoriteStation, setFavoriteStation] = useState([]);
+
+  useEffect(() => {
+    AS.getItem("favoriteStation")
+      .then((d) => {
+        console.log(d);
+        const returnData = JSON.parse(d);
+        console.log(returnData);
+        setFavoriteStation(returnData);
+      })
+      .catch((d) => console.log(d));
+  }, []);
+  useEffect(() => {
+    const isFavorite = favoriteStation.filter((d) => {
+      const compare = JSON.stringify(d);
+      const current = JSON.stringify(currentStation);
+      if (compare === current) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+    console.log(isFavorite.length);
+    setTestButtonStatus(isFavorite.length != 0);
+  }, [favoriteStation]);
 
   useInterval(() => {
     if (currentStation.length == 1) {
@@ -68,10 +96,46 @@ export default function Sign(props) {
     setPreStation(returnData[0]);
     setNexStation(returnData[1]);
   };
+  const lottieRef = useRef();
   return (
     <TouchableOpacity style={styleSheet.外枠} onPress={oP}>
       <StationNumberMaker currentStation={currentStation} />
       <StationNameArea currentStation={currentStation} />
+      <TouchableOpacity
+        style={{ position: "absolute", right: -15, top: -20 }}
+        onPress={() => {
+          if (testButtonStatus) {
+            lottieRef.current.play(35, 7);
+            const otherData = favoriteStation.filter((d) => {
+              const compare = JSON.stringify(d);
+              const current = JSON.stringify(currentStation);
+              if (compare !== current) {
+                return true;
+              } else {
+                return false;
+              }
+            });
+            AS.setItem("favoriteStation", JSON.stringify(otherData));
+          } else {
+            lottieRef.current.play(7, 35);
+            let ret = favoriteStation;
+            console.log(currentStation);
+            ret.push(currentStation);
+            AS.setItem("favoriteStation", JSON.stringify(ret));
+          }
+          setTestButtonStatus(!testButtonStatus);
+        }}
+      >
+        <LottieView
+          progress={testButtonStatus ? 1 : 0}
+          speed={1.4}
+          style={{ width: 80, height: 80 }}
+          source={require("../../assets/939-star.json")}
+          ref={lottieRef}
+          loop={false}
+        />
+      </TouchableOpacity>
+
       <Text style={styleSheet.JRStyle}>JR</Text>
       <View style={styleSheet.下帯} />
       <View style={styleSheet.下帯内容}>