harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge commit '72412e87e887a1cbcf3987927c16fc9cb9e36949' into develop

Browse Source
This commit is contained in:
harukin-OneMix4 2024-02-12 00:55:15 +09:00
commit 8257440138
6 changed files with 392 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
Apps.js
View File

@ -1,8 +1,15 @@
import React, { useEffect, useRef, useState } from "react";
import { View, Platform, Text, TouchableOpacity } from "react-native";
import React, { useEffect, useState } from "react";
import {
View,
Platform,
Text,
TouchableOpacity,
useWindowDimensions,
} from "react-native";
import { WebView } from "react-native-webview";
import Constants from "expo-constants";
import { Ionicons } from "@expo/vector-icons";
import { AS } from "./storageControl";
import { news } from "./config/newsUpdate";
import { getStationList, lineList } from "./lib/getStationList";
@ -11,15 +18,27 @@ import { checkDuplicateTrainData } from "./lib/checkDuplicateTrainData";
import { useFavoriteStation } from "./stateBox/useFavoriteStation";
import { useCurrentTrain } from "./stateBox/useCurrentTrain";
import { SheetManager } from "react-native-actions-sheet";
import TrainMenu from "./components/trainMenu";
/*
import StatusbarDetect from './StatusbarDetect';
var Status = StatusbarDetect(); */
export default function Apps({ navigation, webview, stationData }) {
const { currentTrain } = useCurrentTrain();
const { height, width } = useWindowDimensions();
const { navigate } = navigation;
var urlcache = "";
const { favoriteStation } = useFavoriteStation();
const [isLandscape, setIsLandscape] = useState(false); //画面が横向きかどうか
const handleLayout = () => {};
useEffect(() => {
if (height / width > 1.5) {
setIsLandscape(false);
}
if (height / width < 1.5) {
setIsLandscape(true);
}
}, [height, width]);
//画面表示関連
const [iconSetting, setIconSetting] = useState(undefined);
@ -271,8 +290,22 @@ export default function Apps({ navigation, webview, stationData }) {
style={{
height: "100%",
paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
flexDirection: isLandscape ? "row" : "column",
}}
onLayout={handleLayout}
>
{isLandscape ? (
<TrainMenu
webview={webview}
stationData={stationData}
navigation={{ navigate: null }}
style={{
width: (width / 100) * 40,
height: "100%",
flexDirection: "column-reverse",
}}
/>
) : null}
{/* {Status} */}
<WebView
useWebKit
@ -310,11 +343,13 @@ export default function Apps({ navigation, webview, stationData }) {
}
}}
/>
<MapsButton
onPress={() => navigate("trainMenu", { webview })}
top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
mapSwitch={mapSwitch == "true" ? "flex" : "none"}
/>
{isLandscape || (
<MapsButton
onPress={() => navigate("trainMenu", { webview })}
top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
mapSwitch={mapSwitch == "true" ? "flex" : "none"}
/>
)}
<ReloadButton
onPress={() => webview.current.reload()}
top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}

2
app.json
View File

@ -8,7 +8,7 @@
"android"
],
"version": "4.6",
"orientation": "portrait",
"orientation": "default",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",

324
components/ActionSheetComponents/EachTrainInfo.js
View File

@ -6,9 +6,13 @@ import {
TouchableOpacity,
Platform,
StyleSheet,
useWindowDimensions,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import ActionSheet, { SheetManager } from "react-native-actions-sheet";
import ActionSheet, {
SheetManager,
useScrollHandlers,
} from "react-native-actions-sheet";
import { AS } from "../../storageControl";
import trainList from "../../assets/originData/trainList";
import { lineList } from "../../lib/getStationList";
@ -24,6 +28,7 @@ import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
import { LongHeader } from "./EachTrainInfo/LongHeader";
import { ShortHeader } from "./EachTrainInfo/ShortHeader";
import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";
export const EachTrainInfo = (props) => {
if (!props.payload) return <></>;
@ -47,6 +52,16 @@ export const EachTrainInfo = (props) => {
const [isConcatNear, setIsConcatNear] = useState(false);
const [tailStation, setTailStation] = useState();
const [headStation, setHeadStation] = useState();
const { height, width } = useWindowDimensions();
const [isLandscape, setIsLandscape] = useState(false);
useEffect(() => {
if (height / width > 1.5) {
setIsLandscape(false);
}
if (height / width < 1.5) {
setIsLandscape(true);
}
}, [width, height]);
// const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
//裏列車探索
@ -376,6 +391,7 @@ export const EachTrainInfo = (props) => {
.replace("ライナーライナー", "ライナー");
};
const actionSheetRef = useRef(null);
const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
return (
<ActionSheet
gestureEnabled={true}
@ -384,6 +400,7 @@ export const EachTrainInfo = (props) => {
ref={actionSheetRef}
drawUnderStatusBar={false}
isModal={Platform.OS == "ios"}
//useBottomSafeAreaPadding={Platform.OS == "android"}
>
<View
@ -445,60 +462,46 @@ export const EachTrainInfo = (props) => {
/>
)}
</View>
<DynamicHeaderScrollView
styles={styles}
containerProps={{ style: { maxHeight: heightPercentageToDP("70%") } }}
Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
shortHeader={
from == "AllTrainDiagramView" ? (
<></>
) : (
<ShortHeader
currentTrainData={currentTrainData}
currentPosition={currentPosition}
nearTrainIDList={nearTrainIDList}
openTrainInfo={openTrainInfo}
/>
)
}
longHeader={
from == "AllTrainDiagramView" ? (
<></>
) : (
<LongHeader
currentTrainData={currentTrainData}
currentPosition={currentPosition}
nearTrainIDList={nearTrainIDList}
openTrainInfo={openTrainInfo}
/>
)
}
topStickyContent={
<ScrollStickyContent currentTrainData={currentTrainData} />
}
>
{headStation && !isConcatNear && (
<TouchableOpacity
onPress={() => openBackTrainInfo(headStation)}
style={{
padding: 10,
flexDirection: "row",
borderColor: "blue",
borderWidth: 1,
margin: 10,
borderRadius: 5,
alignItems: "center",
}}
>
<Text
style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
{isLandscape ? (
<LandscapeTrainInfo
scrollHandlers={scrollHandlers}
leftContent={
from == "AllTrainDiagramView" ? (
<></>
) : (
<LongHeader
currentTrainData={currentTrainData}
currentPosition={currentPosition}
nearTrainIDList={nearTrainIDList}
openTrainInfo={openTrainInfo}
/>
)
}
topStickyContent={
<ScrollStickyContent currentTrainData={currentTrainData} />
}
>
{headStation && !isConcatNear && (
<TouchableOpacity
onPress={() => openBackTrainInfo(headStation)}
style={{
padding: 10,
flexDirection: "row",
borderColor: "blue",
borderWidth: 1,
margin: 10,
borderRadius: 5,
alignItems: "center",
}}
>
「本当の始発駅」を表示
</Text>
</TouchableOpacity>
)}
{/* <LottieView
<Text
style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
>
「本当の始発駅」を表示
</Text>
</TouchableOpacity>
)}
{/* <LottieView
autoPlay
loop
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
@ -506,56 +509,175 @@ export const EachTrainInfo = (props) => {
/>
<Text>ほげほげふがふが</Text> */}
{trainData.map((i, index) =>
i.split(",")[1] == "提" ? (
<DataFromButton i={i} />
) : (
<EachStopList
i={i}
index={index}
stationList={stationList}
points={points}
currentTrainData={currentTrainData}
openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
/>
)
)}
{tailStation && !isConcatNear && (
<TouchableOpacity
onPress={() => openBackTrainInfo(tailStation)}
style={{
padding: 10,
flexDirection: "row",
borderColor: "blue",
borderWidth: 1,
margin: 10,
borderRadius: 5,
alignItems: "center",
}}
>
<Text
style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
{trainData.map((i, index) =>
i.split(",")[1] == "提" ? (
<DataFromButton i={i} />
) : (
<EachStopList
i={i}
index={index}
stationList={stationList}
points={points}
currentTrainData={currentTrainData}
openStationACFromEachTrainInfo={
openStationACFromEachTrainInfo
}
/>
)
)}
{tailStation && !isConcatNear && (
<TouchableOpacity
onPress={() => openBackTrainInfo(tailStation)}
style={{
padding: 10,
flexDirection: "row",
borderColor: "blue",
borderWidth: 1,
margin: 10,
borderRadius: 5,
alignItems: "center",
}}
>
「本当の終着駅」を表示
</Text>
</TouchableOpacity>
)}
<Text
style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
>
「本当の終着駅」を表示
</Text>
</TouchableOpacity>
)}
<View style={{ flexDirection: "row" }}>
<View
style={{
padding: 8,
flexDirection: "row",
borderBottomWidth: 1,
borderBottomColor: "#f0f0f0",
flex: 1,
}}
>
<Text style={{ fontSize: 20 }}> </Text>
<View style={{ flex: 1 }} />
<View style={{ flexDirection: "row" }}>
<View
style={{
padding: 8,
flexDirection: "row",
borderBottomWidth: 1,
borderBottomColor: "#f0f0f0",
flex: 1,
}}
>
<Text style={{ fontSize: 20 }}> </Text>
<View style={{ flex: 1 }} />
</View>
</View>
</View>
</DynamicHeaderScrollView>
</LandscapeTrainInfo>
) : (
<DynamicHeaderScrollView
styles={styles}
containerProps={{
style: { maxHeight: heightPercentageToDP("70%") },
}}
Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
shortHeader={
from == "AllTrainDiagramView" ? (
<></>
) : (
<ShortHeader
currentTrainData={currentTrainData}
currentPosition={currentPosition}
nearTrainIDList={nearTrainIDList}
openTrainInfo={openTrainInfo}
/>
)
}
longHeader={
from == "AllTrainDiagramView" ? (
<></>
) : (
<LongHeader
currentTrainData={currentTrainData}
currentPosition={currentPosition}
nearTrainIDList={nearTrainIDList}
openTrainInfo={openTrainInfo}
/>
)
}
topStickyContent={
<ScrollStickyContent currentTrainData={currentTrainData} />
}
>
{headStation && !isConcatNear && (
<TouchableOpacity
onPress={() => openBackTrainInfo(headStation)}
style={{
padding: 10,
flexDirection: "row",
borderColor: "blue",
borderWidth: 1,
margin: 10,
borderRadius: 5,
alignItems: "center",
}}
>
<Text
style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
>
「本当の始発駅」を表示
</Text>
</TouchableOpacity>
)}
{/* <LottieView
autoPlay
loop
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
source={require("../../assets/51690-loading-diamonds.json")}
/>
<Text>ほげほげふがふが</Text> */}
{trainData.map((i, index) =>
i.split(",")[1] == "提" ? (
<DataFromButton i={i} />
) : (
<EachStopList
i={i}
index={index}
stationList={stationList}
points={points}
currentTrainData={currentTrainData}
openStationACFromEachTrainInfo={
openStationACFromEachTrainInfo
}
/>
)
)}
{tailStation && !isConcatNear && (
<TouchableOpacity
onPress={() => openBackTrainInfo(tailStation)}
style={{
padding: 10,
flexDirection: "row",
borderColor: "blue",
borderWidth: 1,
margin: 10,
borderRadius: 5,
alignItems: "center",
}}
>
<Text
style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
>
「本当の終着駅」を表示
</Text>
</TouchableOpacity>
)}
<View style={{ flexDirection: "row" }}>
<View
style={{
padding: 8,
flexDirection: "row",
borderBottomWidth: 1,
borderBottomColor: "#f0f0f0",
flex: 1,
}}
>
<Text style={{ fontSize: 20 }}> </Text>
<View style={{ flex: 1 }} />
</View>
</View>
</DynamicHeaderScrollView>
)}
</View>
</ActionSheet>
);

47
components/ActionSheetComponents/EachTrainInfo/LandscapeTrainInfo.js Normal file
View File

@ -0,0 +1,47 @@
import React from "react";
import { View, Text, ScrollView, useWindowDimensions } from "react-native";
export const LandscapeTrainInfo = (props) => {
const { leftContent, topStickyContent, children, scrollHandlers } = props;
const { height, width } = useWindowDimensions();
return (
<View
style={{
flexDirection: "row",
backgroundColor: "blue",
width: width,
height: (height / 100) * 70,
marginBottom: 50,
}}
>
<View
style={{
flexDirection: "column",
height: (height / 100) * 70,
width: width / 2,
}}
>
<Text>{width / 2}</Text>
{leftContent}
</View>
<ScrollView
{...scrollHandlers}
style={{
width: width / 2,
height: "auto",
}}
stickyHeaderIndices={[1]}
scrollEventThrottle={16}
onScroll={(d) => {
console.log(d.nativeEvent.contentOffset.y);
}}
>
<View style={{ height: 0 }} />
<View style={{ flexDirection: "column" }} index={1}>
{topStickyContent}
</View>
{children}
</ScrollView>
</View>
);
};

22
components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
View File

@ -1,5 +1,10 @@
import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import React, { useEffect, useState } from "react";
import {
View,
Text,
TouchableOpacity,
useWindowDimensions,
} from "react-native";
import { StateBox } from "./StateBox";
import {
heightPercentageToDP,
@ -13,13 +18,24 @@ export const TrainDataView = ({
openTrainInfo,
mode = 0,
}) => {
const [isLandscape, setIsLandscape] = useState(false);
const { width, height } = useWindowDimensions();
useEffect(() => {
if (height / width > 1.5) {
setIsLandscape(false);
}
if (height / width < 1.5) {
setIsLandscape(true);
}
}, [width, height]);
return (
<View
style={{
flexDirection: "row",
//minHeight: 200,
//height: heightPercentageToDP("20%"),
width: widthPercentageToDP("100%"),
width: isLandscape ? width / 2 : width,
flex: 1,
}}
>

115
components/trainMenu.js
View File

@ -6,10 +6,11 @@ export default function TrainMenu({
navigation: { navigate },
webview,
stationData,
style,
}) {
const mapRef = useRef();
return (
<View style={{ height: "100%", backgroundColor: "#0099CC" }}>
<View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
<MapView
style={{ flex: 1, width: "100%", height: "100%" }}
showsUserLocation={true}
@ -46,65 +47,69 @@ export default function TrainMenu({
webview.current?.injectJavaScript(
`MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}')`
);
navigate("Apps");
if (navigate) navigate("Apps");
}}
></Marker>
);
})
)}
</MapView>
<View style={{ flexDirection: "row" }}>
<UsefulBox
backgroundColor={"#F89038"}
icon="train-car"
flex={1}
onPressButton={() =>
navigate("howto", {
info: "https://train.jr-shikoku.co.jp/usage.htm",
})
}
{navigate && (
<View style={{ flexDirection: "row" }}>
<UsefulBox
backgroundColor={"#F89038"}
icon="train-car"
flex={1}
onPressButton={() =>
navigate("howto", {
info: "https://train.jr-shikoku.co.jp/usage.htm",
})
}
>
使い方
</UsefulBox>
<UsefulBox
backgroundColor={"#EA4752"}
icon="star"
flex={1}
onPressButton={() => navigate("favoriteList")}
>
お気に入り
</UsefulBox>
<UsefulBox
backgroundColor={"#91C31F"}
icon="clipboard-list-outline"
flex={1}
onPressButton={() =>
Linking.openURL(
"https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2"
)
}
>
フィードバック
</UsefulBox>
</View>
)}
{navigate && (
<TouchableOpacity
style={{
padding: 10,
flexDirection: "row",
borderColor: "white",
borderWidth: 1,
margin: 10,
borderRadius: 5,
alignItems: "center",
}}
onPress={() => navigate("Apps")}
>
使い方
</UsefulBox>
<UsefulBox
backgroundColor={"#EA4752"}
icon="star"
flex={1}
onPressButton={() => navigate("favoriteList")}
>
お気に入り
</UsefulBox>
<UsefulBox
backgroundColor={"#91C31F"}
icon="clipboard-list-outline"
flex={1}
onPressButton={() =>
Linking.openURL(
"https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2"
)
}
>
この機能のフィードバック
</UsefulBox>
</View>
<TouchableOpacity
style={{
padding: 10,
flexDirection: "row",
borderColor: "white",
borderWidth: 1,
margin: 10,
borderRadius: 5,
alignItems: "center",
}}
onPress={() => navigate("Apps")}
>
<View style={{ flex: 1 }} />
<Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
閉じる
</Text>
<View style={{ flex: 1 }} />
</TouchableOpacity>
<View style={{ flex: 1 }} />
<Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
閉じる
</Text>
<View style={{ flex: 1 }} />
</TouchableOpacity>
)}
</View>
);
}
@ -115,14 +120,14 @@ const UsefulBox = (props) => {
style={{
flex: flex,
backgroundColor: backgroundColor,
padding: 10,
padding: 5,
alignItems: "center",
margin: 2,
}}
onPress={onPressButton}
>
<MaterialCommunityIcons name={icon} color="white" size={50} />
<Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
{children}
</Text>
</TouchableOpacity>