345 lines
13 KiB
TypeScript
345 lines
13 KiB
TypeScript
import { Linking, Text, View, TouchableOpacity } from "react-native";
|
||
import {
|
||
Foundation,
|
||
FontAwesome,
|
||
Ionicons,
|
||
MaterialCommunityIcons,
|
||
} from "@expo/vector-icons";
|
||
import { ListItem } from "@rneui/themed";
|
||
import TouchableScale from "react-native-touchable-scale";
|
||
import Icon from "react-native-vector-icons/Entypo";
|
||
import { TextBox } from "../atom/TextBox";
|
||
import { TicketBox } from "../atom/TicketBox";
|
||
import { SpecialTrainInfoBox } from "./SpecialTrainInfoBox";
|
||
import { SheetManager } from "react-native-actions-sheet";
|
||
import { useNavigation } from "@react-navigation/native";
|
||
import { useNotification } from "@/stateBox/useNotifications";
|
||
import { useThemeColors } from "@/lib/theme";
|
||
import { useResponsive } from "@/lib/responsive";
|
||
import { isAvailable as isFelicaAvailable } from "@/modules/expo-felica-reader/src";
|
||
|
||
export const FixedContentBottom = (props) => {
|
||
const { expoPushToken } = useNotification();
|
||
const { colors, fixed } = useThemeColors();
|
||
const { fontScale, moderateScale } = useResponsive();
|
||
const felicaAvailable = isFelicaAvailable();
|
||
return (
|
||
<>
|
||
{props.children}
|
||
|
||
<View style={{ flexDirection: "row" }}>
|
||
<TicketBox
|
||
backgroundColor={"#AD7FA8"}
|
||
icon={<Foundation name="ticket" color="white" size={moderateScale(50)} />}
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-eki.com/ticket/brand")
|
||
}
|
||
>
|
||
トクトク切符
|
||
</TicketBox>
|
||
<TicketBox
|
||
backgroundColor={"#8F5902"}
|
||
icon={<FontAwesome name="first-order" color="white" size={moderateScale(50)} />}
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL(
|
||
"https://www.jr-shikoku.co.jp/01_trainbus/event_train/sp/",
|
||
)
|
||
}
|
||
>
|
||
観光列車
|
||
</TicketBox>
|
||
<TicketBox
|
||
backgroundColor={"#888A85"}
|
||
icon={<Ionicons name="flag" color="white" size={moderateScale(50)} />}
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-eki.com/tour/brand")
|
||
}
|
||
>
|
||
旅行ツアー
|
||
</TicketBox>
|
||
</View>
|
||
<TextBox
|
||
backgroundColor="#ed86b5"
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-eki.com/smart-eki/index.html")
|
||
}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
スマートえきちゃん
|
||
</Text>
|
||
<Text style={{ color: "white", fontSize: fontScale(18) }}>
|
||
JR四国のチケットレススマホアプリです。
|
||
</Text>
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor={fixed.primary}
|
||
flex={1}
|
||
onPressButton={() =>
|
||
SheetManager.show("SpecialTrainInfo", {
|
||
payload: { navigate: props.navigate },
|
||
})
|
||
}
|
||
>
|
||
<Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
臨時列車などのお知らせ
|
||
</Text>
|
||
<Text style={{ color: fixed.textOnPrimary, fontSize: fontScale(18) }}>
|
||
区間縮小・計画運休・イベント・季節臨時列車など
|
||
</Text>
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor={fixed.primary}
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-shikoku.co.jp/03_news/press/")
|
||
}
|
||
>
|
||
<Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
ニュースリリース
|
||
</Text>
|
||
<Text style={{ color: fixed.textOnPrimary, fontSize: fontScale(18) }}>
|
||
公式プレス記事はこちら
|
||
</Text>
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor={fixed.primary}
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-shikoku.co.jp/teiki/")
|
||
}
|
||
>
|
||
<Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
定期運賃計算
|
||
</Text>
|
||
<Text style={{ color: fixed.textOnPrimary, fontSize: fontScale(18) }}>
|
||
通常/学生/快て〜き等はこちら
|
||
</Text>
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor={fixed.primary}
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-shikoku.co.jp/04_company/group/sp/")
|
||
}
|
||
>
|
||
<Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
JR四国のお店・サービス
|
||
</Text>
|
||
<Text style={{ color: fixed.textOnPrimary, fontSize: fontScale(18) }}>
|
||
JR四国グループの施設をご案内
|
||
</Text>
|
||
</TextBox>
|
||
<View style={{ flexDirection: "row" }}>
|
||
<TouchableOpacity
|
||
style={{
|
||
flex: 1,
|
||
backgroundColor: "#729FCF",
|
||
borderColor: fixed.primary,
|
||
padding: 10,
|
||
borderWidth: 1,
|
||
margin: 2,
|
||
alignItems: "center",
|
||
}}
|
||
onPress={() => Linking.openURL("https://www.jr-odekake.net/smt/")}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
時刻・運賃計算
|
||
</Text>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: fontScale(18) }}>
|
||
(マイ・ダイヤ)
|
||
</Text>
|
||
<Foundation name="yen" color="white" size={moderateScale(50)} />
|
||
<Text style={{ color: "white" }}>
|
||
マイ・ダイヤはJR西日本提供のサービスです。
|
||
</Text>
|
||
</TouchableOpacity>
|
||
<TouchableOpacity
|
||
style={{
|
||
flex: 1,
|
||
backgroundColor: felicaAvailable ? "#00796B" : "#9E9E9E",
|
||
borderColor: fixed.primary,
|
||
padding: 10,
|
||
borderWidth: 1,
|
||
margin: 2,
|
||
alignItems: "center",
|
||
opacity: felicaAvailable ? 1 : 0.6,
|
||
}}
|
||
onPress={() => props.navigate("setting", { screen: "FelicaHistoryPage" })}
|
||
disabled={!felicaAvailable}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
IC残高・履歴(β)
|
||
</Text>
|
||
<MaterialCommunityIcons name="contactless-payment" color="white" size={moderateScale(50)} />
|
||
<Text style={{ color: "white" }}>Felica対応ICカードの</Text>
|
||
<Text style={{ color: "white" }}>残高・利用履歴を表示</Text>
|
||
{!felicaAvailable && (
|
||
<Text style={{ color: "white", fontSize: 11, marginTop: 2 }}>
|
||
NFC非対応端末
|
||
</Text>
|
||
)}
|
||
</TouchableOpacity>
|
||
</View>
|
||
<TextBox
|
||
backgroundColor={fixed.primary}
|
||
flex={1}
|
||
onPressButton={() => SheetManager.show("Social")}
|
||
>
|
||
<Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
ソーシャルメディア
|
||
</Text>
|
||
<Text style={{ color: fixed.textOnPrimary, fontSize: fontScale(18) }}>
|
||
JR四国のSNS一覧です。
|
||
</Text>
|
||
</TextBox>
|
||
<Text style={{ fontWeight: "bold", fontSize: fontScale(20), color: colors.text }}>
|
||
JR四国非公式列車データベース(β)
|
||
</Text>
|
||
<View style={{ flexDirection: "row" }}>
|
||
<TextBox
|
||
backgroundColor="#E67E22"
|
||
flex={1}
|
||
onPressButton={() => {
|
||
const uri = `https://jr-shikoku-data-system.pages.dev/unitList?userID=${expoPushToken}&from=eachTrainInfo`;
|
||
props.navigate("generalWebView", { uri, useExitButton: false });
|
||
SheetManager.hide("EachTrainInfo");
|
||
}}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
車両情報
|
||
</Text>
|
||
<MaterialCommunityIcons name="train-car" color="white" size={moderateScale(40)} />
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor="#9B59B6"
|
||
flex={1}
|
||
onPressButton={() => {
|
||
const uri = `https://jr-shikoku-data-system.pages.dev/operationList?userID=${expoPushToken}&from=eachTrainInfo`;
|
||
props.navigate("generalWebView", { uri, useExitButton: false });
|
||
SheetManager.hide("EachTrainInfo");
|
||
}}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
運用情報
|
||
</Text>
|
||
<MaterialCommunityIcons name="timetable" color="white" size={moderateScale(40)} />
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor="#16A085"
|
||
flex={1}
|
||
onPressButton={() => props.navigate("AllTrainIDList")}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
ダイヤ探索
|
||
</Text>
|
||
<Ionicons name="search" color="white" size={moderateScale(40)} />
|
||
</TextBox>
|
||
</View>
|
||
<View style={{ flexDirection: "row" }}>
|
||
<TextBox
|
||
backgroundColor="#2980B9"
|
||
flex={1}
|
||
onPressButton={() => {
|
||
const uri = `https://jr-shikoku-data-system.pages.dev/diagram-graph?userID=${expoPushToken}&from=eachTrainInfo`;
|
||
props.navigate("generalWebView", { uri, useExitButton: false });
|
||
SheetManager.hide("EachTrainInfo");
|
||
}}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
ダイヤグラフ
|
||
</Text>
|
||
<MaterialCommunityIcons name="chart-timeline" color="white" size={moderateScale(40)} />
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor="#C0392B"
|
||
flex={1}
|
||
onPressButton={() => {
|
||
const uri = `https://jr-shikoku-data-system.pages.dev/diagram-chart?userID=${expoPushToken}&from=eachTrainInfo`;
|
||
props.navigate("generalWebView", { uri, useExitButton: false });
|
||
SheetManager.hide("EachTrainInfo");
|
||
}}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
運用チャート
|
||
</Text>
|
||
<MaterialCommunityIcons name="chart-gantt" color="white" size={moderateScale(40)} />
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor="#7F8C8D"
|
||
flex={1}
|
||
onPressButton={() => {
|
||
const uri = `https://shikoku-railinfo.haruk.in/timetable/?userID=${expoPushToken}&from=eachTrainInfo`;
|
||
props.navigate("generalWebView", { uri, useExitButton: false });
|
||
SheetManager.hide("EachTrainInfo");
|
||
}}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
紙風時刻表
|
||
</Text>
|
||
<MaterialCommunityIcons
|
||
name="file-document-outline"
|
||
color="white"
|
||
size={moderateScale(40)}
|
||
/>
|
||
</TextBox>
|
||
</View>
|
||
<Text style={{ fontWeight: "bold", fontSize: fontScale(20), color: colors.text }}>その他</Text>
|
||
<TextBox
|
||
backgroundColor="rgb(88, 101, 242)"
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL(
|
||
"https://twitter.com/Xprocess_main/status/1955242437817012300",
|
||
)
|
||
}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
公式Discordのご案内
|
||
</Text>
|
||
<Text style={{ color: "white", fontSize: fontScale(18) }}>
|
||
皆さんの目撃情報をアプリに反映しませんか？Discordに登録して運用を報告しましょう！
|
||
</Text>
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor="linear-gradient(120deg, rgba(247,135,54,0.208) 0%, rgba(54,125,247,0.208) 100%)"
|
||
flex={1}
|
||
onPressButton={() =>
|
||
props.navigate("howto", {
|
||
info: "https://xprocess.haruk.in/tags/JR%E5%9B%9B%E5%9B%BD%E5%88%97%E8%BB%8A%E4%BD%8D%E7%BD%AE%E6%83%85%E5%A0%B1%E3%82%A2%E3%83%97%E3%83%AA/",
|
||
goTo: "menu",
|
||
})
|
||
}
|
||
>
|
||
<Text style={{ color: colors.text, fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
アプリの更新情報
|
||
</Text>
|
||
<Text style={{ color: colors.text, fontSize: fontScale(18) }}>
|
||
過去のアプリの更新履歴が表示できます。
|
||
</Text>
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor="black"
|
||
flex={1}
|
||
onPressButton={() => props.navigate("setting")}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: fontScale(20) }}>
|
||
アプリの設定
|
||
</Text>
|
||
<Text style={{ color: "white", fontSize: fontScale(18) }}>
|
||
アプリの設定画面を表示します。
|
||
</Text>
|
||
</TextBox>
|
||
{/*
|
||
<SvgUri
|
||
width="200"
|
||
height="200"
|
||
source={require("./assets/トレインビジョン関係/1.svg")}
|
||
/> */}
|
||
</>
|
||
);
|
||
};
|