From b234b056c38b8119d12ef548a80bd8d683f5305d Mon Sep 17 00:00:00 2001 From: harukin-DeskMini Date: Tue, 27 Sep 2022 13:28:26 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=88=E3=83=83=E3=83=97=E3=83=A1=E3=83=8B?= =?UTF-8?q?=E3=83=A5=E3=83=BC=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?= =?UTF-8?q?=E6=94=B9=E4=BF=AE=E3=81=A8=E5=9C=B0=E5=9B=B3=E8=A1=A8=E7=A4=BA?= =?UTF-8?q?=E3=81=AE=E6=9C=80=E9=81=A9=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Apps.js | 326 ++++++++++++++++++++++++++++------------ components/news.js | 61 +++++--- components/settings.js | 197 ++++++++++++++++-------- components/trainMenu.js | 225 +++++++++++++++++---------- 4 files changed, 552 insertions(+), 257 deletions(-) diff --git a/Apps.js b/Apps.js index f9ab361..539fcba 100644 --- a/Apps.js +++ b/Apps.js @@ -1,28 +1,102 @@ -import React, { useEffect, useRef, useState } from 'react'; -import {View, Platform,ToastAndroid, Text, TouchableOpacity} from 'react-native'; -import {WebView} from 'react-native-webview'; -import Constants from 'expo-constants'; -import AsyncStorage from '@react-native-async-storage/async-storage'; +import React, { useEffect, useRef, useState } from "react"; +import { + View, + Platform, + ToastAndroid, + Text, + TouchableOpacity, +} from "react-native"; +import { WebView } from "react-native-webview"; +import Constants from "expo-constants"; +import AsyncStorage from "@react-native-async-storage/async-storage"; /* import StatusbarDetect from './StatusbarDetect'; var Status = StatusbarDetect(); */ export var webview = null; -export default function Apps (props) { - const { navigation: { navigate } } = props; - var urlcache=""; +export default function Apps(props) { + const { + navigation: { navigate }, + } = props; + var urlcache = ""; const webview = useRef(); - const [iconSetting, setIconSetting] = useState(undefined) + const [iconSetting, setIconSetting] = useState(undefined); const [mapSwitch, setMapSwitch] = useState(undefined); + const [stationData, setStationData] = useState(undefined); + useEffect(() => { + const HeaderConfig = { + headers: { referer: "https://train.jr-shikoku.co.jp/sp.html" }, + }; - const bootData = ` - document.getElementById('header').querySelector('a').style.display = 'none'; - document.getElementById('header').style.height = '50px'; - document.getElementById('main').style.paddingTop = '54px'; - - document.getElementById('headerStr').style.display = 'none'; + Promise.all([ + fetch( + "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan", + HeaderConfig + ).then((response) => response.json()), + fetch( + "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima", + HeaderConfig + ).then((response) => response.json()), + fetch( + "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima2", + HeaderConfig + ).then((response) => response.json()), + fetch( + "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan", + HeaderConfig + ).then((response) => response.json()), + fetch( + "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan2", + HeaderConfig + ).then((response) => response.json()), + fetch( + "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=koutoku", + HeaderConfig + ).then((response) => response.json()), + fetch( + "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=tokushima", + HeaderConfig + ).then((response) => response.json()), + fetch( + "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto", + HeaderConfig + ).then((response) => response.json()), + ]).then((values) => { + let stationList = {}; + [ + stationList.yosan, + stationList.uwajima, + stationList.uwajima2, + stationList.dosan, + stationList.dosan2, + stationList.koutoku, + stationList.tokushima, + stationList.naruto, + ] = values; + setStationData(stationList); + }); + }, []); + + const topMenu = + mapSwitch != "true" + ? ` +document.getElementById('header').querySelector('a').style.display = 'none'; +document.getElementById('header').style.height = '50px'; +document.getElementById('main').style.paddingTop = '54px'; + +document.getElementById('headerStr').style.display = 'none'; +` + : ` +document.getElementsByClassName('accordionClass')[0].style.display = 'none'; +document.getElementById('header').style.display = 'none'; +document.getElementById('main').style.paddingTop = '0px'; +document.getElementById('headerStr').style.display = 'none'; +`; + const bootData = + topMenu + + ` const setReload = () =>{ try{ document.getElementById('refreshIcon').click(); @@ -35,7 +109,7 @@ export default function Apps (props) { setReload(); `; -const trainIconMaker = ` + const trainIconMaker = ` const setStationIcon = (行き先アイコン,img) =>{ let newItem = document.createElement("div"); if(行き先アイコン.getAttribute("style").includes("left")){ @@ -46,11 +120,11 @@ const trainIconMaker = ` } 行き先アイコン.remove(); } -` +`; - - -const trainIcon = iconSetting == "true" ? ` + const trainIcon = + iconSetting == "true" + ? ` switch(列番データ){ //しおかぜメイン //8000 ノーマル @@ -467,12 +541,16 @@ switch(列番データ){ default: break; } -` : ``; +` + : ``; -const JRF_icon = iconSetting == "true" ? ` + const JRF_icon = + iconSetting == "true" + ? ` JRF || setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/ef210a.png'); -` : ``; -const normal_train_name = ` +` + : ``; + const normal_train_name = ` if(new RegExp(/^4[1-9]\\d\\d[DM]$/).test(列番データ) || new RegExp(/^5[1-7]\\d\\d[DM]$/).test(列番データ)){ 行き先情報.innerText = "ワンマン\\n"+行き先情報.innerText; flag=true; @@ -492,8 +570,9 @@ const normal_train_name = ` else if(列番データ.indexOf("S") != -1){ 行き先情報.innerText = 行き先情報.innerText+"臨時列車\\n"; } -` -const JRF_name = ` +`; + const JRF_name = + ` let JRF = false; switch(列番データ){ case "71": @@ -538,7 +617,7 @@ const JRF_name = ` default: JRF = true; } - `+JRF_icon; + ` + JRF_icon; const TKT_name = ` //安芸行と併結列車を個別に表示、それ以外をdefaultで下りなら既定の行き先を、上りなら奈半利行を設定 @@ -575,9 +654,10 @@ const JRF_name = ` break; } -` +`; -const textInsert = ` + const textInsert = + ` const setStrings = () =>{ try { var elements = document.querySelectorAll('[onclick]'); @@ -588,7 +668,12 @@ const setStrings = () =>{ var flag=false; var TrainType = undefined; if(行き先情報.innerText.includes(列番データ))continue; //回避 - `+trainIcon+normal_train_name+JRF_name+TKT_name+` + ` + + trainIcon + + normal_train_name + + JRF_name + + TKT_name + + ` //列番付与 行き先情報.innerText = 行き先情報.innerText+列番データ+(JRF ? "":"レ"); } @@ -686,89 +771,134 @@ observer.observe(target, { childList: true, // 子ノードの変化を監視 //subtree: true // 子孫ノードも監視対象に含める }); -` +`; -const injectJavascriptData = bootData+trainIconMaker+textInsert; + const injectJavascriptData = bootData + trainIconMaker + textInsert; - - - useEffect(()=>{ + useEffect(() => { AsyncStorage.getItem("status") - .then(d=>{ - if(d != "2022/06/11"){ - navigate('news'); - } - }) - .catch(e=>{ - navigate('news'); - }) - },[]) - useEffect(()=>{ - AsyncStorage.getItem("iconSwitch").then( d =>{ - if(d){ - setIconSetting(d); - } - else{ - AsyncStorage.setItem("iconSwitch","true").then(()=>Updates.reloadAsync()) - } - - - }).catch(d=>AsyncStorage.setItem("iconSwitch","true").then(()=>Updates.reloadAsync())) + .then((d) => { + if (d != "2022/06/11") { + navigate("news"); + } + }) + .catch((e) => { + navigate("news"); + }); + }, []); + useEffect(() => { + AsyncStorage.getItem("iconSwitch") + .then((d) => { + if (d) { + setIconSetting(d); + } else { + AsyncStorage.setItem("iconSwitch", "true").then(() => + Updates.reloadAsync() + ); + } + }) + .catch((d) => + AsyncStorage.setItem("iconSwitch", "true").then(() => + Updates.reloadAsync() + ) + ); - - AsyncStorage.getItem("mapSwitch").then( d =>{ - if(d){ - setMapSwitch(d); - } - else{ - AsyncStorage.setItem("mapSwitch","false").then(()=>Updates.reloadAsync()) - } - }).catch(d=>AsyncStorage.setItem("mapSwitch","false").then(()=>Updates.reloadAsync())) - - },[]) - - - + AsyncStorage.getItem("mapSwitch") + .then((d) => { + if (d) { + setMapSwitch(d); + } else { + AsyncStorage.setItem("mapSwitch", "false").then(() => + Updates.reloadAsync() + ); + } + }) + .catch((d) => + AsyncStorage.setItem("mapSwitch", "false").then(() => + Updates.reloadAsync() + ) + ); + }, []); return ( - + {/* {Status} */} - { + { console.log(event); - if(event.url != urlcache){//URL二重判定回避 + if (event.url != urlcache) { + //URL二重判定回避 urlcache = event.url; - - if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) { - if(Platform.OS==="android")navigate('howto'); + + if ( + event.url.includes("https://train.jr-shikoku.co.jp/usage.htm") + ) { + if (Platform.OS === "android") navigate("howto"); webview?.current.goBack(); //Actions.howto(); - } - else if (event.url.includes("https://train.jr-shikoku.co.jp/train.html")) { + } else if ( + event.url.includes("https://train.jr-shikoku.co.jp/train.html") + ) { //Actions.trainbase({info: event.url}); - if(Platform.OS==="android")navigate('trainbase', {info: event.url}); + if (Platform.OS === "android") + navigate("trainbase", { info: event.url }); webview?.current.goBack(); } } - } - } - onMessage={(event)=>{}} - injectedJavaScript={injectJavascriptData}/> - navigate('trainMenu', {webview: webview})} style={{position:"absolute",bottom:0,right:0,width:50,height:50,backgroundColor:"white",borderColor:"blue",borderStyle:"solid",borderWidth:1,borderRadius:50,alignContent:"center",alignSelf:"center",alignItems:"center",margin:10,display:mapSwitch == "true" ? "flex": "none"}}> - - 線 - + }} + onMessage={(event) => {}} + injectedJavaScript={injectJavascriptData} + /> + navigate("trainMenu", { webview, stationData })} + style={{ + position: "absolute", + top: Platform.OS == "ios" ? Constants.statusBarHeight : 0, + right: 10, + width: 50, + height: 50, + backgroundColor: "#0099CC", + borderColor: "white", + borderStyle: "solid", + borderWidth: 1, + borderRadius: 50, + alignContent: "center", + alignSelf: "center", + alignItems: "center", + display: mapSwitch == "true" ? "flex" : "none", + }} + > + + + 三 + + - ); -} \ No newline at end of file +} diff --git a/components/news.js b/components/news.js index 5801e99..31c4d3d 100644 --- a/components/news.js +++ b/components/news.js @@ -1,19 +1,44 @@ -import React, { } from 'react'; -import {View,Text,TouchableOpacity } from 'react-native'; -import {WebView} from 'react-native-webview'; -import StatusbarDetect from '../StatusbarDetect'; -import AsyncStorage from '@react-native-async-storage/async-storage'; +import React from "react"; +import { View, Text, TouchableOpacity } from "react-native"; +import { WebView } from "react-native-webview"; +import StatusbarDetect from "../StatusbarDetect"; +import AsyncStorage from "@react-native-async-storage/async-storage"; var Status = StatusbarDetect(); -export default function News(props){ - const { navigation: { navigate } } = props; - return( - - - {AsyncStorage.setItem('status', "2022/04/14");navigate('Apps');}}> - - 更新情報を閉じる - - - - ) -} \ No newline at end of file +export default function News(props) { + const { + navigation: { navigate }, + } = props; + return ( + + + { + AsyncStorage.setItem("status", "2022/06/11"); + navigate("Apps"); + }} + > + + + 更新情報を閉じる + + + + + ); +} diff --git a/components/settings.js b/components/settings.js index 0dde173..49e3e6d 100644 --- a/components/settings.js +++ b/components/settings.js @@ -1,66 +1,137 @@ -import React, { useState, useEffect } from 'react'; -import {View,Text,TouchableOpacity } from 'react-native'; -import * as Updates from 'expo-updates'; -import StatusbarDetect from '../StatusbarDetect'; -import AsyncStorage from '@react-native-async-storage/async-storage'; +import React, { useState, useEffect } from "react"; +import { View, Text, TouchableOpacity } from "react-native"; +import * as Updates from "expo-updates"; +import StatusbarDetect from "../StatusbarDetect"; +import AsyncStorage from "@react-native-async-storage/async-storage"; var Status = StatusbarDetect(); -import { Switch } from 'react-native-elements'; +import { Switch } from "react-native-elements"; -export default function Setting(props){ - const { navigation: { navigate } } = props; - const [iconSetting, setIconSetting] = useState(undefined) - const [mapSwitch, setMapSwitch] = useState(undefined) - useEffect(()=>{ - AsyncStorage.getItem("iconSwitch").then( d =>{ - setIconSetting(d) - }) - AsyncStorage.getItem("mapSwitch").then( d =>{ - setMapSwitch(d) - }) - },[]) - console.log(iconSetting); - return( - - - - 設定画面 - - - - 列車アイコンを表示する - - setIconSetting(value.toString())}/> - - - channel: {Updates.channel} - - - - releaseChannel: {Updates.releaseChannel} - - - - - マップを表示する(beta) - - setMapSwitch(value.toString())}/> - - - - - { - Promise.all([ - AsyncStorage.setItem("iconSwitch",iconSetting.toString()), - AsyncStorage.setItem("mapSwitch",mapSwitch.toString()) - ]) - .then(()=>{ - Updates.reloadAsync() - }) - }}> - - 設定を保存して再読み込み - - +export default function Setting(props) { + const { + navigation: { navigate }, + } = props; + const [iconSetting, setIconSetting] = useState(undefined); + const [mapSwitch, setMapSwitch] = useState(undefined); + useEffect(() => { + AsyncStorage.getItem("iconSwitch").then((d) => { + setIconSetting(d); + }); + AsyncStorage.getItem("mapSwitch").then((d) => { + setMapSwitch(d); + }); + }, []); + console.log(iconSetting); + return ( + + + + + 設定画面 + - ) -} \ No newline at end of file + + + + 列車アイコンを表示する + + + setIconSetting(value.toString())} + /> + + + + 内部バージョン: 4.3.1 + + + + + + releaseChannel: {Updates.releaseChannel} + + + + + + + マップを表示する(beta) + + + setMapSwitch(value.toString())} + /> + + + + { + Promise.all([ + AsyncStorage.setItem("iconSwitch", iconSetting.toString()), + AsyncStorage.setItem("mapSwitch", mapSwitch.toString()), + ]).then(() => { + Updates.reloadAsync(); + }); + }} + > + + + 設定を保存して再読み込み + + + + + ); +} diff --git a/components/trainMenu.js b/components/trainMenu.js index bb02ee1..b292cea 100644 --- a/components/trainMenu.js +++ b/components/trainMenu.js @@ -1,82 +1,151 @@ -import React, { useState, useEffect, useRef } from 'react'; -import {View,Text,TouchableOpacity } from 'react-native'; -import {WebView} from 'react-native-webview'; -import StatusbarDetect from '../StatusbarDetect'; -import AsyncStorage from '@react-native-async-storage/async-storage'; -import MapView,{ Marker, Geojson, PROVIDER_GOOGLE } from 'react-native-maps'; -import { FontAwesome, Fontisto, Foundation, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons'; +import React, { useState, useEffect, useRef } from "react"; +import { View, Text, TouchableOpacity, Linking } from "react-native"; +import { WebView } from "react-native-webview"; +import StatusbarDetect from "../StatusbarDetect"; +import AsyncStorage from "@react-native-async-storage/async-storage"; +import MapView, { Marker, Geojson, PROVIDER_GOOGLE } from "react-native-maps"; +import { + FontAwesome, + Fontisto, + Foundation, + Ionicons, + MaterialCommunityIcons, +} from "@expo/vector-icons"; var Status = StatusbarDetect(); -export default function trainMenu({route:{params: {webview}}, navigation:{ navigate }}){ - const [stationData,setStationData] = useState(undefined); - const mapRef = useRef(); - useEffect(()=>{ - const HeaderConfig = {headers:{'referer':'https://train.jr-shikoku.co.jp/sp.html'}} - - Promise.all([ - fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan', HeaderConfig).then(response => response.json()), - fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima',HeaderConfig).then(response => response.json()), - fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima2',HeaderConfig).then(response => response.json()), - fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan',HeaderConfig).then(response => response.json()), - fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan2',HeaderConfig).then(response => response.json()), - fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=koutoku',HeaderConfig).then(response => response.json()), - fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=tokushima',HeaderConfig).then(response => response.json()), - fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto',HeaderConfig).then(response => response.json()) - ]).then(values =>{ - let stationList = {}; - [stationList.yosan, stationList.uwajima, stationList.uwajima2, stationList.dosan, stationList.dosan2, stationList.koutoku, stationList.tokushima, stationList.naruto] = values; - setStationData(stationList); - }) - },[]); - return( - - - {stationData && Object.keys(stationData).map(d=> - 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+"')"); - navigate('Apps'); - }}> - - ) - }) - ) } - - - navigate('howto')}>使い方 - Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box")}>お気に入り - Linking.openURL("https://www.jr-shikoku.co.jp/e5489/")}>予約 - - {AsyncStorage.setItem('status', "2022/04/14");navigate('Apps');}}> - - 閉じる - - - - ) +export default function trainMenu({ + route: { + params: { webview, stationData }, + }, + navigation: { navigate }, +}) { + const mapRef = useRef(); + return ( + + + {stationData && + Object.keys(stationData).map((d) => + 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 + + "')" + ); + navigate("Apps"); + }} + > + ); + }) + )} + + + navigate("howto")} + > + 使い方 + + + /* Linking.openURL( + "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box" + ) */ + alert("お気に入り駅登録機能は現在開発中です！レイアウト募集中！") + } + > + お気に入り + + + Linking.openURL( + "https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2" + ) + } + > + この機能のフィードバック + + + { + AsyncStorage.setItem("status", "2022/04/14"); + navigate("Apps"); + }} + > + + + 閉じる + + + + + ); } -const UsefulBox = (props) =>{ +const UsefulBox = (props) => { const { icon, backgroundColor, flex, onPressButton, children } = props; - return( - - - {children} + return ( + + + + {children} + - ) -} \ No newline at end of file + ); +};