看板を移設、LEDとのデータ整合性の修正

components/発車時刻表/LED_vidion.js

@@ -59,7 +59,7 @@ export default function LED_vision(props){
             if(trainDiagram){
                 Object.keys(trainDiagram).forEach( key => {
                 
-                    if(trainDiagram[key].match(props.stationName.今.name) ){
+                    if(trainDiagram[key].match(props.station.Station_JP) ){
                         returnData[key] = trainDiagram[key];
                     }
                 });    
@@ -79,7 +79,7 @@ export default function LED_vision(props){
                     if(data.match("着")){
                         returnData.lastStation = data.split(",着,")[0];
                     }
-                    if(data.match(props.stationName.今.name)){
+                    if(data.match(props.station.Station_JP)){
                         if(data.match(",発,")){
                             returnData.time = data.split(",発,")[1];
                         }

components/駅名表/Sign.js

@@ -0,0 +1,88 @@
+import React, { Component, useRef, useState, useEffect } from 'react';
+import {StatusBar,View,LayoutAnimation,ScrollView,Linking,Text,TouchableOpacity } from 'react-native';
+import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
+
+
+export default function Sign(props){
+    const {currentStation, originalStationList, oP} = props;
+    const getPreNextStation = (now) =>{
+        const lineList = ["予讃線", "松宇線", "伊予灘線", "土讃線", "窪川線", "高徳線", "徳島線", "鳴門線"];
+        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]]
+          }
+          
+        })
+        return returnData;
+    } 
+    return(
+        <TouchableOpacity style={{ width: wp("80%"), height: wp("80%")/20*9,borderColor:"#2E94BB",borderWidth:1,margin:10,marginHorizontal:wp("10%")}} /* onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)}  */onPress={oP}>
+            <View style={{position:"absolute",bottom:"0%",left:"0%",width:"100%",height:'30%',backgroundColor:"#2E94BB"}} />
+            <Text style={{position:"absolute",top:"2%",left:"2%",fontWeight:"bold",fontSize:parseInt("30%"),color:"#2E94BB"}}>JR</Text>
+            {currentStation.map((d,index,array)=>
+              <View style={{position:"absolute",alignContent:"center",alignItems:"center",top:(()=>{
+                if(array.length == 1) return 20;
+                else if(index == 0) return 5;
+                else if(index == 1) return 35;
+                else return 20;
+              })()+"%",right:'10%',width:wp("10%"),height:wp("10%"),borderColor:"#2E94BB",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
+                <View style={{flex:1}} />
+                <Text style={{fontSize:parseInt("20%")}}>{d.StationNumber}</Text>
+                <View style={{flex:1}} />
+              </View>
+            )}
+            <View style={{position:"absolute",top:"10%",alignContent:"center",flexDirection:"row"}}>
+              <View style={{flex:1}}/>
+              <View style={{alignItems:"center"}}>
+                {/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text>  */}
+                <Text style={{fontWeight:"bold",fontSize:parseInt("40%"),color:"#005170"}}>{currentStation[0].Station_JP}</Text> 
+                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{currentStation[0].Station_EN}</Text>   
+              </View> 
+              <View style={{flex:1}}/>
+            </View>
+            <View style={{position:"absolute",bottom:"0%",height:"30%",width:"100%",alignItems:"center",flexDirection:"column"}}>
+              
+              {(()=>{return currentStation.map(currentStation =>{
+                let [preStation, nexStation] = getPreNextStation(currentStation)
+                return(
+                  <View style={{flex:1,flexDirection:"row",alignContent:"center"}}>
+                    <View style={{flex:1,flexDirection:"row",alignContent:"center"}}>
+                    {preStation &&
+                    [<Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10,textAlignVertical:"center"}}>◀</Text>,
+                    <View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
+                      <View style={{flex:1}} />
+                      <Text style={{fontSize:parseInt("10%"),color:"white"}}>{preStation.StationNumber}</Text>
+                      <View style={{flex:1}} />
+                    </View>,
+                    <View style={{flex:1,alignItems:"flex-start"}}>
+                      <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{preStation.Station_JP}</Text> 
+                      <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{preStation.Station_EN}</Text>    
+                    </View>]}
+                  </View>
+                  <View style={{flex:1,flexDirection:"row",alignContent:"center"}}>
+                    
+                    {nexStation &&
+                    [<View style={{flex:1,alignItems:"flex-end"}}>
+                      <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{nexStation.Station_JP}</Text> 
+                      <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{nexStation.Station_EN}</Text>    
+                    </View>,
+                    <View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
+                      <View style={{flex:1}} />
+                      <Text style={{fontSize:parseInt("10%"),color:"white"}}>{nexStation.StationNumber}</Text>
+                      <View style={{flex:1}} />
+                    </View>,
+                    <Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10,textAlignVertical:"center"}}>▶</Text>]}
+                  </View>
+                  </View>
+                )
+              })[0]
+                
+              })()}
+              
+            </View>
+            
+          </TouchableOpacity>
+    )
+}

menu.js

@@ -24,6 +24,7 @@ import 内子線 from './assets/四国旅客鉄道内子線.json';
 import 徳島線 from './assets/四国旅客鉄道徳島線.json';
 import 鳴門線 from './assets/四国旅客鉄道鳴門線.json'
 import LED_vision from './components/発車時刻表/LED_vidion';
+import Sign from './components/駅名表/Sign';
 
 
 
@@ -170,18 +171,26 @@ export default function Menu(props) {
     }
 
     const lineList = ["予讃線", "松宇線", "伊予灘線", "土讃線", "窪川線", "高徳線", "徳島線", "鳴門線"];
-    console.log(lineList.map(d=>findStationEachLine(originalStationList[d])).find(d=>d.length > 0))
+    console.log(lineList.map(d=>findStationEachLine(originalStationList[d])).filter(d=>d.length > 0).reduce((pre,current) => {pre.push(...current);return pre},[]));
-    let returnDataBase = lineList.map(d=>findStationEachLine(originalStationList[d])).find(d=>d.length > 0)
+    let returnDataBase = lineList.map(d=>findStationEachLine(originalStationList[d])).filter(d=>d.length > 0).reduce((pre,current) => {pre.push(...current);return pre},[]);
+    LayoutAnimation.spring()
     if(returnDataBase.length){
-      setCurrentStation(returnDataBase);
+      let currentStation = currentStation == undefined ? [] : currentStation;
+      if(currentStation.toString() != returnDataBase.toString()){
+        setCurrentStation(returnDataBase);
+      }
     }
     else{
       setCurrentStation(undefined);
+      StationBoardAcSR.current?.hide()
     }
     
   },[location,originalStationList])
 
-  
+  useEffect(()=>{
+    console.log("test")
+    console.log(currentStation)
+  },[currentStation])
   
  
 
@@ -209,18 +218,6 @@ export default function Menu(props) {
     }catch(e){}
     
   })
-  const getPreNextStation = (now) =>{
-    const lineList = ["予讃線", "松宇線", "伊予灘線", "土讃線", "窪川線", "高徳線", "徳島線", "鳴門線"];
-    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]]
-      }
-      
-    })
-    return returnData;
-  } 
     return (
       <View style={{height:"100%",paddingTop: Constants.statusBarHeight,backgroundColor:"white"}}>
         {Status}
@@ -239,82 +236,14 @@ export default function Menu(props) {
             <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>新型コロナウイルスに関するお知らせ</Text>
             <Text style={{color:"white",fontSize:18}}>列車の運行計画・混雑状況・感染症対策への取り組み</Text>
           </TextBox>
-          {currentStation ? 
+          {currentStation && <Sign currentStation={currentStation} originalStationList={originalStationList} oP={() => StationBoardAcSR.current?.setModalVisible()} />}
-          <TouchableOpacity style={{ width: wp("80%"), height: wp("80%")/20*9,borderColor:"#2E94BB",borderWidth:1,margin:10,marginHorizontal:wp("10%")}} /* onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)}  */onPress={() => {StationBoardAcSR.current?.setModalVisible()}}>
+          {currentStation && <LED_vision station={currentStation[0]} />}
-            <View style={{position:"absolute",bottom:"0%",left:"0%",width:"100%",height:'30%',backgroundColor:"#2E94BB"}} />
-            <Text style={{position:"absolute",top:"2%",left:"2%",fontWeight:"bold",fontSize:parseInt("30%"),color:"#2E94BB"}}>JR</Text>
-            {currentStation.map((d,index,array)=>
-              <View style={{position:"absolute",alignContent:"center",alignItems:"center",top:(()=>{
-                if(array.length == 1) return 20;
-                else if(index == 0) return 5;
-                else if(index == 1) return 35;
-                else return 20;
-              })()+"%",right:'10%',width:wp("10%"),height:wp("10%"),borderColor:"#2E94BB",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
-                <View style={{flex:1}} />
-                <Text style={{fontSize:parseInt("20%")}}>{d.StationNumber}</Text>
-                <View style={{flex:1}} />
-              </View>
-            )}
-            <View style={{position:"absolute",top:"10%",alignContent:"center",flexDirection:"row"}}>
-              <View style={{flex:1}}/>
-              <View style={{alignItems:"center"}}>
-                {/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text>  */}
-                <Text style={{fontWeight:"bold",fontSize:parseInt("40%"),color:"#005170"}}>{currentStation[0].Station_JP}</Text> 
-                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{currentStation[0].Station_EN}</Text>   
-              </View> 
-              <View style={{flex:1}}/>
-            </View>
-            <View style={{position:"absolute",bottom:"0%",height:"30%",width:"100%",alignItems:"center",flexDirection:"row"}}>
-              
-              {(()=>{
-                let [preStation, nexStation] = getPreNextStation(currentStation[0])
-                return(
-                  [<View style={{flex:1,flexDirection:"row",alignContent:"center"}}>
-                    
-                    {preStation &&
-                    [<Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10,textAlignVertical:"center"}}>◀</Text>,
-                    <View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
-                      <View style={{flex:1}} />
-                      <Text style={{fontSize:parseInt("10%"),color:"white"}}>{preStation.StationNumber}</Text>
-                      <View style={{flex:1}} />
-                    </View>,
-                    <View style={{flex:1,alignItems:"flex-start"}}>
-                      <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{preStation.Station_JP}</Text> 
-                      <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{preStation.Station_EN}</Text>    
-                    </View>]}
-                  </View>,
-                  <View style={{flex:1,flexDirection:"row",alignContent:"center"}}>
-                    
-                    {nexStation &&
-                    [<View style={{flex:1,alignItems:"flex-end"}}>
-                      <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{nexStation.Station_JP}</Text> 
-                      <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{nexStation.Station_EN}</Text>    
-                    </View>,
-                    <View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
-                      <View style={{flex:1}} />
-                      <Text style={{fontSize:parseInt("10%"),color:"white"}}>{nexStation.StationNumber}</Text>
-                      <View style={{flex:1}} />
-                    </View>,
-                    <Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10,textAlignVertical:"center"}}>▶</Text>]}
-                  </View>]
-                )
-              })()}
-              
-            </View>
-            
-          </TouchableOpacity>: null }
-          {currentStation ?
-          <LED_vision station={currentStation[0]} />
-          : null}
           <TouchableOpacity onPress={() => {JRSTraInfoEXAcSR.current?.setModalVisible()}}>
             <View style={{backgroundColor:"#0099CC",borderRadius:5,margin:10,borderColor:"black",borderWidth:2,overflow:"hidden"}}>
               <ScrollView scrollEnabled={false} style={{backgroundColor:"#0099CC",borderRadius:5,maxHeight:300,}}>
                 <View style={{padding:10,flexDirection:"row",alignItems:"center"}}>
                   <Text style={{fontSize:30,fontWeight:"bold",color:"white"}}>列車遅延速報EX</Text>
                   <View style={{flex:1}} />
-                  {/* <TouchableOpacity style={{padding:10,backgroundColor:"white",alignContent:"center"}} onPress={() => {doFetch()}}>
-                    <Text style={{fontSize:20,fontWeight:"bold",color:"#0099CC"}}>最新の情報へ更新</Text>
-                  </TouchableOpacity> */}
                   <Text style={{fontSize:30,fontWeight:"bold",color:"white"}}>{getTime ? getTime.toLocaleTimeString('ja-JP').split(":")[0]+":"+getTime.toLocaleTimeString('ja-JP').split(":")[1]: NaN}</Text>
                   <Ionicons name="reload" color="white" size={30} style={{margin:5}} onPress={() => {LayoutAnimation.easeInEaseOut(),setLoadingDelayData(true)}}/>
                 </View>
@@ -342,11 +271,6 @@ export default function Menu(props) {
               </View>
             </View>
             
-            {/* <View style={{position:"absolute",bottom:0,alignItems:"center",width:"100%",height:"100%",backgroundColor:"#007FCC88"}}>
-              <View style={{flex:1}}/>
-              <Text style={{color:"white",fontWeight:"bold",fontSize:20}}>準備中...</Text>
-              <View style={{flex:1}}/>
-            </View> */}
           </TouchableOpacity>
           
 
@@ -497,60 +421,16 @@ export default function Menu(props) {
             <View style={{height:26,width:"100%",}}>
               <View style={{ height: 6, width: 45, borderRadius: 100, backgroundColor: "#f0f0f0", marginVertical: 10, alignSelf: "center",}} />
             </View>
-            <ScrollView>
+            <ScrollView>{currentStation && 
-            {stationName ? stationName.今 ?
+            <Sign currentStation={currentStation} originalStationList={originalStationList} oP={()=> Linking.openURL(currentStation[0].StationTimeTable)} />}
-          <TouchableOpacity style={{ width: wp("80%"), height: wp("80%")/20*9,borderColor:"#2E94BB",borderWidth:1,margin:10,marginHorizontal:wp("10%")}}  onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)} /* onPress={() => {StationBoardAcSR.current?.setModalVisible()}}*/>
+            {currentStation &&
-            <View style={{position:"absolute",bottom:"0%",left:"0%",width:"100%",height:'30%',backgroundColor:"#2E94BB"}} />
+            <View style={{flexDirection:"row"}}>
-            <Text style={{position:"absolute",top:"2%",left:"2%",fontWeight:"bold",fontSize:parseInt("30%"),color:"#2E94BB"}}>JR</Text>
+              {!currentStation[0].JrHpUrl ||<TicketBox backgroundColor={"#AD7FA8"} icon={<Foundation name="web" color="white" size={50}/>} flex={1} onPressButton={()=> Linking.openURL(currentStation[0].JrHpUrl)}>web</TicketBox>}
-            <View style={{position:"absolute",alignContent:"center",alignItems:"center",top:"20%",right:'10%',width:wp("10%"),height:wp("10%"),borderColor:"#2E94BB",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
+              {!currentStation[0].StationTimeTable || <TicketBox backgroundColor={"#8F5902"} icon={<FontAwesome name="table" color="white" size={50}/>} flex={1} onPressButton={()=> Linking.openURL(currentStation[0].StationTimeTable)}>時刻表</TicketBox>}
-              <View style={{flex:1}} />
+              {!currentStation[0].StationMap || <TicketBox backgroundColor={"#888A85"} icon={<Ionicons name="map" color="white" size={50}/>} flex={1} onPressButton={()=> Linking.openURL(currentStation[0].StationMap)}>GoogleMap</TicketBox>}
-              <Text style={{fontSize:parseInt("20%")}}>{stationName.今.StationNumber}</Text>
-              <View style={{flex:1}} />
             </View>
-            <View style={{position:"absolute",top:"10%",alignContent:"center",flexDirection:"row"}}>
+            }
-              <View style={{flex:1}}/>
-              <View style={{alignItems:"center"}}>
-                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text> 
-                <Text style={{fontWeight:"bold",fontSize:parseInt("40%"),color:"#005170"}}>{stationName.今.name}</Text> 
-                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.en}</Text>   
-              </View> 
-              <View style={{flex:1}}/>
-            </View>
-            <View style={{position:"absolute",bottom:"0%",height:"30%",width:"100%",alignItems:"center",flexDirection:"row"}}>
-              {stationName.前 ? <Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10}}>◀</Text> : null}
           
-              {stationName.前 ? 
-              <View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
-                <View style={{flex:1}} />
-                <Text style={{fontSize:parseInt("10%"),color:"white"}}>{stationName.前.StationNumber}</Text>
-                <View style={{flex:1}} />
-              </View> : null}
-              <View style={{flex:1,alignItems:"flex-start"}}>
-                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white"}}>{stationName.前.name}</Text> 
-                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white"}}>{stationName.前.en}</Text>    
-              </View>
-              {/* <TouchableOpacity style={{alignItems:"center"}} onPress={()=>Linking.openURL(stationName.今.StationTimeTable)}>
-                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),backgroundColor:"white",color:"#005170",padding:5}}>時刻表</Text>
-              </TouchableOpacity> */}
-              <View style={{flex:1,alignItems:"flex-end"}}>
-                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white"}}>{stationName.次.name}</Text> 
-                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white"}}>{stationName.次.en}</Text>    
-              </View>
-              {stationName.次.name != null ? 
-              <View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
-                <View style={{flex:1}} />
-                <Text style={{fontSize:parseInt("10%"),color:"white"}}>{stationName.次.StationNumber}</Text>
-                <View style={{flex:1}} />
-              </View> : null}
-              {stationName.次.name != null ? <Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10}}>▶</Text>: null}
-            </View>
-            
-          </TouchableOpacity>: null : null}
-          <View style={{flexDirection:"row"}}>
-            <TicketBox backgroundColor={"#AD7FA8"} icon={<Foundation name="web" color="white" size={50}/>} flex={1} onPressButton={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)}>web</TicketBox>
-            <TicketBox backgroundColor={"#8F5902"} icon={<FontAwesome name="table" color="white" size={50}/>} flex={1} onPressButton={()=> !stationName.今.StationTimeTable || Linking.openURL(stationName.今.StationTimeTable)}>時刻表</TicketBox>
-            <TicketBox backgroundColor={"#888A85"} icon={<Ionicons name="map" color="white" size={50}/>} flex={1} onPressButton={()=> !stationName.今.StationMap || Linking.openURL(stationName.今.StationMap)}>GoogleMap</TicketBox>
-          </View>
             </ScrollView>
           </View>