駅名標+在線状況LED

This commit is contained in:
harukin-DeskMini
2022-03-28 01:47:03 +09:00
parent 9580425958
commit f73d57e93e
15 changed files with 38204 additions and 37 deletions

286
menu.js
View File

@@ -4,6 +4,7 @@ import Image from 'react-native-remote-svg';
import Constants from 'expo-constants';
import { List, ListItem } from 'native-base';
import Icon from 'react-native-vector-icons/Entypo';
import * as Location from 'expo-location';
import StatusbarDetect from './StatusbarDetect';
var Status = StatusbarDetect();
import { useNavigation } from '@react-navigation/native';
@@ -14,6 +15,36 @@ import * as WebBrowser from 'expo-web-browser';
import ActionSheet from "react-native-actions-sheet";
import LottieView from 'lottie-react-native';
import SvgUri from 'react-native-svg-uri';
import 予讃線 from './assets/四国旅客鉄道予讃線.json';
import 土讃線 from './assets/四国旅客鉄道土讃線.json';
import 高徳線 from './assets/四国旅客鉄道高徳線.json';
import 内子線 from './assets/四国旅客鉄道内子線.json';
import 徳島線 from './assets/四国旅客鉄道徳島線.json';
import 鳴門線 from './assets/四国旅客鉄道鳴門線.json'
import LED_vision from './components/発車時刻表/LED_vidion';
const makeLineStationListValiable = (base,lineName)=>{
let returnData =[];
base.features.forEach(element =>{
if(element.geometry.type=="Point"){
returnData.push({
lat:element.geometry.coordinates[1],
lng:element.geometry.coordinates[0],
name:element.properties.name,
lineName:lineName
})
}
});
return returnData;
}
const yosanLineStation = makeLineStationListValiable(予讃線,"予讃線");
const DosanLineStation = makeLineStationListValiable(土讃線,"土讃線");
const KotokuLineStation = makeLineStationListValiable(高徳線,"高徳線");
const UchikoLineStation = makeLineStationListValiable(内子線,"(予讃)内子線");
const TokushimaLineStation = makeLineStationListValiable(徳島線,"徳島線");
const NarutoLineStation = makeLineStationListValiable(鳴門線,"鳴門線");
const stationList = {};
export default function(props) {
const navigation = useNavigation();
@@ -25,6 +56,194 @@ export function Menu(props) {
let result = await WebBrowser.openBrowserAsync(link);
};
const [stationName,setStationName] = useState(undefined);
const getCurrentStation = (location) =>{
const findStationEachLine = (selectLine,selectLineName) => {
const searchArea = 0.005;
for( let selectLineData of selectLine){
let latBool = false;
let lngBool = false;
if(location.latitude < selectLineData.lat){
if((selectLineData.lat - location.latitude) < searchArea)latBool = true;
}
else{
if((location.latitude - selectLineData.lat) < searchArea)latBool = true;
}
if(location.longitude < selectLineData.lng){
if((selectLineData.lng - location.longitude) < searchArea)lngBool = true;
}
else{
if((location.longitude - selectLineData.lng) < searchArea)lngBool = true;
}
if(latBool && lngBool){
for(let data of stationList.日英対応表){
if(data.Station_JP == selectLineData.name){
let pre = undefined;
let nex = undefined;
let now = undefined;
let index =0;
for(let da of stationList[selectLineName]){
if((data.Station_JP == da.Station_JP) || (data.Station_JP == da.StationName)){
try{
let preEn = undefined;
stationList.日英対応表.forEach((j,l)=>{
if(j.Station_JP == (stationList[selectLineName][index-1].Station_JP ? stationList[selectLineName][index-1].Station_JP : stationList[selectLineName][index-1].StationName)){
preEn = j.Station_EN;
}
})
pre = {
name:stationList[selectLineName][index-1].Station_JP ? stationList[selectLineName][index-1].Station_JP : stationList[selectLineName][index-1].StationName,
en:preEn,
StationNumber:stationList[selectLineName][index-1].StationNumber,
StationTimeTable:stationList[selectLineName][index-1].StationTimeTable
}
}catch(e){
pre = {
name:null,
en:null,
StationNumber:null
}
}
now = {
LineName:selectLineData.lineName,
name:selectLineData.name,
en:data.Station_EN,
StationNumber:da.StationNumber,
JrHpUrl:da.JrHpUrl,
StationTimeTable:da.StationTimeTable
}
try{
let nexEn = undefined;
stationList.日英対応表.forEach((j,l)=>{
if(j.Station_JP == (stationList[selectLineName][index+1].Station_JP ? stationList[selectLineName][index+1].Station_JP : stationList[selectLineName][index+1].StationName)){
nexEn = j.Station_EN;
}
})
nex = {
name:stationList[selectLineName][index+1].Station_JP ? stationList[selectLineName][index+1].Station_JP : stationList[selectLineName][index+1].StationName,
en:nexEn,
StationNumber:stationList[selectLineName][index+1].StationNumber,
StationTimeTable:stationList[selectLineName][index+1].StationTimeTable
}
}catch(e){
nex = {
name:null,
en:null,
StationNumber:null,
StationTimeTable:null
}
}
}
index++;
}
if(now){
setStationName({
"前":pre,
"今":now,
"次":nex
});
return true;
}
}
}
}
}
return false;
}
findStationEachLine(yosanLineStation,"予讃線") ? null :
findStationEachLine(yosanLineStation,"松宇線") ? null :
findStationEachLine(UchikoLineStation,"松宇線") ? null :
findStationEachLine(DosanLineStation,"土讃線") ? null :
findStationEachLine(DosanLineStation,"窪川線") ? null :
findStationEachLine(KotokuLineStation,"高徳線") ? null :
findStationEachLine(TokushimaLineStation,"徳島線") ? null :
findStationEachLine(NarutoLineStation,"鳴門線") ? null : console.log("not found");
}
async function loadOfficialStationList(){
const HeaderConfig = {
headers:{
'referer':'https://train.jr-shikoku.co.jp/sp.html'
}
}
Promise.all([
await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan', HeaderConfig).then(response => response.json()),
await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima',HeaderConfig).then(response => response.json()),
await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima2',HeaderConfig).then(response => response.json()),
await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan',HeaderConfig).then(response => response.json()),
await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan2',HeaderConfig).then(response => response.json()),
await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=koutoku',HeaderConfig).then(response => response.json()),
await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=tokushima',HeaderConfig).then(response => response.json()),
await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto',HeaderConfig).then(response => response.json()),
await fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=between',HeaderConfig).then(response => response.json()),
await fetch('https://train.jr-shikoku.co.jp/g?arg1=line&arg2=train_lang',HeaderConfig).then(response => response.json())
]).then((values)=>{
[stationList.予讃線, stationList.松宇線, stationList.伊予灘線, stationList.土讃線, stationList.窪川線, stationList.高徳線, stationList.徳島線, stationList.鳴門線, stationList.駅間リスト,stationList.日英対応表] = values;
const concatBetweenStations = (eachRouteData) => {
let additional = [];
eachRouteData.forEach((routeData,routeIndex) => {
try{
const currentStationID = parseInt(routeData.StationNumber.replace(/[A-Z]/g,""))
const nextStationID = parseInt(eachRouteData[routeIndex+1].StationNumber.replace(/[A-Z]/g,""))
if((nextStationID-currentStationID) != 1){
stationList.駅間リスト.forEach(betweenList=>{
if(betweenList.BetweenStation == (routeData.Station_JP+""+eachRouteData[routeIndex+1].Station_JP)){
additional = additional.concat(betweenList.Datas);
}
})
}
}catch(e){
}
});
return(eachRouteData.concat(additional).sort((a,b)=> (a.StationNumber > b.StationNumber) ? 1 : -1 ))
}
stationList.予讃線 = concatBetweenStations(stationList.予讃線);
stationList.松宇線 = concatBetweenStations(stationList.松宇線);
stationList.伊予灘線 = concatBetweenStations(stationList.伊予灘線);
stationList.土讃線 = concatBetweenStations(stationList.土讃線);
stationList.窪川線 = concatBetweenStations(stationList.窪川線);
stationList.高徳線 = concatBetweenStations(stationList.高徳線);
stationList.徳島線 = concatBetweenStations(stationList.徳島線);
stationList.鳴門線 = concatBetweenStations(stationList.鳴門線);
});
}
const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
useEffect(() => {
(async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
return;
}
let location = await Location.getCurrentPositionAsync({});
console.log(location);
setLocation(location);
loadOfficialStationList().then(()=>getCurrentStation(location.coords));
})();
}, []);
let text = 'Waiting..';
if (errorMsg) {
text = errorMsg;
} else if (location) {
text = JSON.stringify(location);
}
const LottieRef = useRef(null);
const LottieRef2 = useRef(null);
const [count,setCount] =useState(0);
@@ -77,20 +296,59 @@ export function Menu(props) {
<Text style={{color:"white",fontSize:18}}>列車の運行計画混雑状況感染症対策への取り組み</Text>
<View style={{flex:1}} />
</TouchableOpacity>
<View style={{alignItems:"center"}}>
<Image source={require('./assets/トレインビジョン関係/1.svg')}style={{ width: wp("80%"), height: wp("80%")/16*9}}/>
<View style={{ position:"absolute",top:0,left:(wp("100%")-wp("80%"))/2,width: wp("80%"), height: wp("80%")/16*9}}>
<Text style={{position:"absolute",top:"2%",left:"2%",fontStyle:"italic",fontWeight:"bold",fontSize:parseInt("20%"),color:"blue"}}>快速 マリンライナー</Text>
<View style={{position:"absolute",top:"18%",alignContent:"center",flexDirection:"row"}}>
<View style={{flex:1}}/>
<Text style={{fontWeight:"bold",fontSize:parseInt("40%"),color:"dark"}}>坂出</Text>
<View style={{flex:1}}/>
</View>
{stationName ? stationName. ?
<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)}>
<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>
<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%")}} >
<View style={{flex:1}} />
<Text style={{fontSize:parseInt("20%")}}>{stationName..StationNumber}</Text>
<View style={{flex:1}} />
</View>
</View>
<TouchableOpacity /* onPress={()=>alert("まだうごかないよ〜♡ごめんね!!")} */ onPress={() => {actionSheetRef.current?.setModalVisible()}}>
<View style={{backgroundColor:"#0099CC",borderRadius:5,margin:5,borderColor:"black",borderWidth:2,overflow:"hidden"}}>
<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={()=>_handlePressButtonAsync(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}
{stationName ? stationName. ?
<LED_vision stationName={stationName} />
: null : null}
<TouchableOpacity onPress={() => {actionSheetRef.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>
@@ -108,7 +366,6 @@ export function Menu(props) {
</View>
: delayData ? delayData.map((d)=>{
let data = d.split(" ");
console.log(data);
return (
<View style={{flexDirection:"row"}}>
<Text style={{flex:15,fontSize:20}}>{data[0].replace("\n","")}</Text>
@@ -264,7 +521,6 @@ export function Menu(props) {
</View>
: delayData ? delayData.map((d)=>{
let data = d.split(" ");
console.log(data);
return (
<View style={{flexDirection:"row"}}>
<Text style={{flex:15,fontSize:20}}>{data[0].replace("\n","")}</Text>