150 lines
4.6 KiB
JavaScript
150 lines
4.6 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
||
import { View, Text, TouchableOpacity, ScrollView,Clipboard } from "react-native";
|
||
|
||
import { CheckBox } from "react-native-elements";
|
||
import { AS } from "../../storageControl";
|
||
import { useNotification } from "../../stateBox/useNotifications";
|
||
|
||
export const NotificationSettings = ({ navigate }) => {
|
||
const { expoPushToken } = useNotification();
|
||
const [traInfoEX, setTraInfoEX] = useState(false);
|
||
const [informations, setInformations] = useState(false);
|
||
const [strangeTrain, setStrangeTrain] = useState(false);
|
||
useEffect(() => {
|
||
AS.getItem("traInfoEX").then(setTraInfoEX);
|
||
AS.getItem("informations").then(setInformations);
|
||
AS.getItem("strangeTrain").then(setStrangeTrain);
|
||
}, []);
|
||
|
||
return (
|
||
<View style={{ height: "100%", backgroundColor: "#0099CC" }}>
|
||
<View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
|
||
<View style={{ flex: 1 }}>
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
navigate("settingTopPage");
|
||
}}
|
||
style={{
|
||
flexDirection: "column",
|
||
flex: 1,
|
||
}}
|
||
>
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{
|
||
fontSize: 20,
|
||
fontWeight: "bold",
|
||
textAlign: "left",
|
||
textAlignVertical: "center",
|
||
color: "white",
|
||
padding: 10,
|
||
}}
|
||
>
|
||
＜ 設定/送信
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
<Text
|
||
style={{
|
||
fontSize: 20,
|
||
fontWeight: "bold",
|
||
textAlign: "center",
|
||
color: "white",
|
||
padding: 10,
|
||
}}
|
||
>
|
||
通知設定(β)
|
||
</Text>
|
||
<View style={{ flex: 1 }}>
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
fetch(
|
||
"https://n8n.haruk.in/webhook/jr-shikoku-notification-configurations",
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
token: expoPushToken,
|
||
traInfoEX,
|
||
informations,
|
||
strangeTrain,
|
||
}),
|
||
}
|
||
).then(() => {
|
||
Promise.all([
|
||
AS.setItem("traInfoEX", traInfoEX.toString()),
|
||
AS.setItem("informations", informations.toString()),
|
||
AS.setItem("strangeTrain", strangeTrain.toString()),
|
||
]).then(()=>alert("通知の設定を保存、登録しました"));
|
||
});
|
||
}}
|
||
style={{
|
||
flexDirection: "column",
|
||
flex: 1,
|
||
}}
|
||
>
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{
|
||
fontSize: 20,
|
||
fontWeight: "bold",
|
||
textAlign: "right",
|
||
textAlignVertical: "center",
|
||
color: "pink",
|
||
padding: 10,
|
||
}}
|
||
>
|
||
登録実行
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
<ScrollView style={{ flex: 1, backgroundColor: "white" }}>
|
||
<SimpleSwitch
|
||
bool={traInfoEX}
|
||
setBool={setTraInfoEX}
|
||
str="遅延速報EX"
|
||
/>
|
||
<SimpleSwitch
|
||
bool={informations}
|
||
setBool={setInformations}
|
||
str="運行情報"
|
||
/>
|
||
<SimpleSwitch
|
||
bool={strangeTrain}
|
||
setBool={setStrangeTrain}
|
||
str="怪レい列車"
|
||
/>
|
||
<Text style={{fontWeight: "bold", padding: 10 }} onPress={()=>{
|
||
Clipboard.setString(expoPushToken);
|
||
}}>
|
||
通知を受け取りたい項目を選択してください。チェックボックスを選び、右上の「登録実行」を押すと設定が反映され、通知が届くようになります。
|
||
</Text>
|
||
</ScrollView>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
const SimpleSwitch = ({ bool, setBool, str }) => (
|
||
<View style={{ flexDirection: "row" }}>
|
||
<CheckBox
|
||
checked={bool == "true" ? true : false}
|
||
checkedColor="red"
|
||
onPress={() => setBool(bool == "true" ? "false" : "true")}
|
||
containerStyle={{
|
||
flex: 1,
|
||
backgroundColor: "#00000000",
|
||
borderColor: "white",
|
||
alignContent: "center",
|
||
}}
|
||
textStyle={{ fontSize: 20, fontWeight: "normal" }}
|
||
title={str}
|
||
/>
|
||
</View>
|
||
);
|