Merge commit '29593b497c6f19b2807c79a8aefce44e66855eb9' into develop

components/AndroidWidget/InfoWidget.jsx

@@ -0,0 +1,114 @@
+import React from "react";
+import {
+  FlexWidget,
+  TextWidget,
+  ListWidget,
+} from "react-native-android-widget";
+import dayjs from "dayjs";
+import { ToastAndroid } from "react-native";
+
+export const getInfoString = async () => {
+  // Fetch data from the server
+  const time = dayjs().format("HH:mm");
+  const text = await fetch(
+    "https://script.google.com/macros/s/AKfycbz80LcaEUrhnlEsLkJy0LG2IRO3DBVQhfNmN1d_0f_HvtsujNQpxM90SrV9yKWH_JG1Ww/exec"
+  )
+    .then((response) => response.text())
+    .then((data) => {
+      if (data !== "") {
+        return data.split("^");
+      }
+      return null;
+    });
+  ToastAndroid.show(`${text}`, ToastAndroid.SHORT);
+  return { time, text };
+};
+
+export function InfoWidget({ time, text }) {
+  return (
+    <FlexWidget
+      style={{
+        height: "match_parent",
+        width: "match_parent",
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#ffffff",
+        borderRadius: 16,
+      }}
+      clickAction="WIDGET_CLICK"
+    >
+      <FlexWidget
+        style={{
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "#0099CC",
+          width: "100%",
+          flexDirection: "row",
+          paddingTop: 10,
+          paddingBottom: 10,
+        }}
+      >
+        <TextWidget
+          text={"列車運行情報"}
+          style={{
+            fontSize: 30,
+            fontWeight: "bold",
+            fontFamily: "Inter",
+            color: "#fff",
+            textAlign: "left",
+            marginLeft: 10,
+          }}
+        />
+        <FlexWidget style={{ flex: 1 }} />
+        <TextWidget
+          text={time}
+          style={{
+            fontSize: 30,
+            fontFamily: "Inter",
+            color: "#fff",
+            textAlign: "right",
+            marginRight: 10,
+          }}
+        />
+      </FlexWidget>
+      <ListWidget
+        style={{
+          flex: 1,
+          backgroundColor: "#fff",
+          width: "match_parent",
+          height: "match_parent",
+          padding: 10,
+        }}
+      >
+        {text ? (
+          <FlexWidget
+            style={{
+              flexDirection: "row",
+              width: "match_parent",
+              backgroundColor: "#ffffff",
+              flex: 1,
+            }}
+            clickAction="WIDGET_CLICK"
+          >
+            <FlexText flex={3} text={text} />
+          </FlexWidget>
+        ) : (
+          <TextWidget
+            style={{
+              color: "#000000",
+              fontSize: 20,
+            }}
+            clickAction="WIDGET_CLICK"
+            text="通常運行中です。"
+          />
+        )}
+      </ListWidget>
+    </FlexWidget>
+  );
+}
+
+const FlexText = ({ flex, text }) => (
+  <FlexWidget style={{ flex }}>
+    <TextWidget style={{ fontSize: 20, color: "#000000" }} text={text} />
+  </FlexWidget>
+);

components/AndroidWidget/TraInfoEXWidget.jsx

@@ -4,7 +4,25 @@ import {
   TextWidget,
   ListWidget,
 } from "react-native-android-widget";
+import dayjs from "dayjs";
+import { ToastAndroid } from "react-native";
 
+export const getDelayData = async () => {
+  // Fetch data from the server
+  const time = dayjs().format("HH:mm");
+  const delayString = await fetch(
+    "https://script.google.com/macros/s/AKfycbyKxch7z7l8e07LXulRHqxjVoIiB13kcgvoToLE-rqlxLmLSKdlmqz0FI1F2EuA7Zfg/exec"
+  )
+    .then((response) => response.text())
+    .then((data) => {
+      if (data !== "") {
+        return data.split("^");
+      }
+      return null;
+    });
+  ToastAndroid.show(`${delayString}`, ToastAndroid.SHORT);
+  return { time, delayString };
+};
 export function TraInfoEXWidget({ time, delayString }) {
   return (
     <FlexWidget

components/AndroidWidget/widget-task-handler.jsx

@@ -1,49 +1,55 @@
 import React from "react";
-import { TraInfoEXWidget } from "./TraInfoEXWidget";
+import { TraInfoEXWidget, getDelayData } from "./TraInfoEXWidget";
-import dayjs from "dayjs";
 import { ToastAndroid } from "react-native";
+import { InfoWidget, getInfoString } from "./InfoWidget";
+import { AS } from "../../storageControl";
 
 export const nameToWidget = {
-  // Hello will be the **name** with which we will reference our widget.
   JR_shikoku_train_info: TraInfoEXWidget,
+  Info_Widget: InfoWidget,
 };
 
-export const getDelayData = async () => {
-  // Fetch data from the server
-  const time = dayjs().format("HH:mm");
-  const delayString = await fetch(
-    "https://script.google.com/macros/s/AKfycbyKxch7z7l8e07LXulRHqxjVoIiB13kcgvoToLE-rqlxLmLSKdlmqz0FI1F2EuA7Zfg/exec"
-  )
-    .then((response) => response.text())
-    .then((data) => {
-      if (data !== "") {
-        return data.split("^");
-      }
-      return null;
-    });
-  ToastAndroid.show(`${delayString}`, ToastAndroid.SHORT);
-  return { time, delayString };
-};
 export async function widgetTaskHandler(props) {
-  const widgetInfo = props.widgetInfo;
+  const {
-  const Widget = nameToWidget[widgetInfo.widgetName];
+    widgetInfo,
+    widgetAction,
+    renderWidget,
+    clickAction,
+    clickActionData,
+  } = props;
+  const WidgetName = await AS.getItem(
+    `widgetType/${widgetInfo.widgetId}`
+  ).catch((e) => "JR_shikoku_train_info");
   ToastAndroid.show(
-    `Widget Action: ${JSON.stringify(props.widgetInfo.widgetId)}`,
+    `Widget Action: ${JSON.stringify(widgetInfo.widgetId)}`,
     ToastAndroid.SHORT
   );
-  const { time, delayString } = await getDelayData();
+  ToastAndroid.show(`Widget Name: ${WidgetName}`, ToastAndroid.SHORT);
-  switch (props.widgetAction) {
+  switch (widgetAction) {
     case "WIDGET_ADDED":
     case "WIDGET_UPDATE":
     case "WIDGET_CLICK":
     case "WIDGET_RESIZED":
-      // Not needed for now
+      switch (WidgetName) {
-      props.renderWidget(<Widget time={time} delayString={delayString} />);
+        case "Info_Widget": {
+          const { time, text } = await getInfoString();
+          renderWidget(<InfoWidget time={time} text={text} />);
+          break;
+        }
+        case "JR_shikoku_train_info":
+        default: {
+          const { time, delayString } = await getDelayData();
+          renderWidget(
+            <TraInfoEXWidget time={time} delayString={delayString} />
+          );
+          break;
+        }
+      }
 
       break;
 
     case "WIDGET_DELETED":
-      // Not needed for now
+      AS.removeItem(`widgetType/${widgetInfo.widgetId}`);
       break;
     default:
       break;

components/Settings/WidgetSettings.js

@@ -4,38 +4,38 @@ import { SwitchArea } from "../atom/SwitchArea";
 import { CheckBox } from "react-native-elements";
 import { TripleSwitchArea } from "../atom/TripleSwitchArea";
 import { getWidgetInfo, WidgetPreview } from "react-native-android-widget";
-import { TraInfoEXWidget } from "../AndroidWidget/TraInfoEXWidget";
+import { getDelayData } from "../AndroidWidget/TraInfoEXWidget";
-import {
+import { getInfoString } from "../AndroidWidget/InfoWidget";
-  getDelayData,
+import { AS } from "../../storageControl";
-  nameToWidget,
+import { nameToWidget } from "../AndroidWidget/widget-task-handler";
-} from "../AndroidWidget/widget-task-handler";
 import { ListItem } from "native-base";
 
 export const WidgetSettings = ({ navigate }) => {
+  const { JR_shikoku_train_info, Info_Widget } = nameToWidget;
+  const [time, setTime] = useState();
+  const [delayString, setDelayString] = useState();
+  const [trainInfo, setTrainInfo] = useState();
   const [widgetList, setWidgetList] = useState([]);
-  useEffect(() => {
+  const reload = async () => {
     const d = [];
-    Object.keys(nameToWidget).forEach((element) => {
+    const data = await getWidgetInfo("JR_shikoku_train_info");
-      const widgetInfo = getWidgetInfo(element);
+    data.forEach((elem) => {
-      widgetInfo.then((s) => {
+      d.push(elem.widgetId);
-        if (s.length > 0) {
-          s.forEach((elem) => {
-            console.log(elem);
-            d.push(elem);
-          });
-        }
-      });
     });
     setWidgetList(d);
-  }, []);
+  };
+
+  useEffect(reload, []);
 
-  const [time, setTime] = useState(time);
-  const [delayString, setDelayString] = useState(delayString);
   useEffect(() => {
     getDelayData().then(({ time, delayString }) => {
       setTime(time);
       setDelayString(delayString);
     });
+    getInfoString().then(({ time, text }) => {
+      setTime(time);
+      setTrainInfo(text);
+    });
   }, []);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
@@ -90,18 +90,29 @@ export const WidgetSettings = ({ navigate }) => {
               margin: 10,
             }}
           >
-            {Object.keys(nameToWidget).map((Name) => {
-              const Data = nameToWidget[Name];
-              return (
             <WidgetPreview
               renderWidget={() => (
-                    <Data time={time} delayString={delayString} />
+                <JR_shikoku_train_info time={time} delayString={delayString} />
               )}
               width={400}
               height={250}
             />
-              );
+          </View>
-            })}
+          <View
+            style={{
+              borderRadius: 15,
+              borderColor: "black",
+              borderWidth: 5,
+              borderStyle: "solid",
+              overflow: "hidden",
+              margin: 10,
+            }}
+          >
+            <WidgetPreview
+              renderWidget={() => <Info_Widget time={time} text={trainInfo} />}
+              width={400}
+              height={250}
+            />
           </View>
         </View>
         <ListItem key={"default"}>
@@ -129,32 +140,8 @@ export const WidgetSettings = ({ navigate }) => {
             名前
           </Text>
         </ListItem>
-        {widgetList.map((widget) => (
+        {widgetList.map((id) => (
-          <ListItem key={widget.widgetId}>
+          <WidgetList id={id} key={id} />
-            <Text
-              style={{
-                fontSize: 20,
-                alignItems: "center",
-                alignContent: "center",
-                textAlign: "center",
-                textAlignVertical: "center",
-                marginRight: 10,
-              }}
-            >
-              {widget.widgetId}
-            </Text>
-            <Text
-              style={{
-                fontSize: 20,
-                alignItems: "center",
-                alignContent: "center",
-                textAlign: "center",
-                textAlignVertical: "center",
-              }}
-            >
-              {widget.widgetName}
-            </Text>
-          </ListItem>
         ))}
       </ScrollView>
       <Text
@@ -187,3 +174,54 @@ const SimpleSwitch = ({ bool, setBool, str }) => (
     />
   </View>
 );
+const WidgetList = ({ id }) => {
+  const [widgetConfig, setWidgetConfig] = useState("");
+  const reload = () => {
+    AS.getItem(`widgetType/${id}`)
+      .then((widgetType) => {
+        setWidgetConfig(widgetType);
+      })
+      .catch((e) => {
+        setWidgetConfig("JR_shikoku_train_info");
+      });
+  };
+  useEffect(reload, [id]);
+  return (
+    <ListItem
+      key={id}
+      onPress={() => {
+        //widget.widgetNameで定義されてないもう一つのウィジェットを選択する
+        if (widgetConfig === "Info_Widget") {
+          AS.setItem(`widgetType/${id}`, "JR_shikoku_train_info");
+        } else {
+          AS.setItem(`widgetType/${id}`, "Info_Widget");
+        }
+        reload();
+      }}
+    >
+      <Text
+        style={{
+          fontSize: 20,
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+          marginRight: 10,
+        }}
+      >
+        {id}
+      </Text>
+      <Text
+        style={{
+          fontSize: 20,
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+        }}
+      >
+        {widgetConfig}
+      </Text>
+    </ListItem>
+  );
+};

storageControl.js

@@ -11,4 +11,5 @@ export const AS = {
       // if set to null, then it will never expire.
       expires: null,
     }),
+  removeItem: (key) => storage.remove({ key }),
 };