ウィジェットのコア作成

components/AndroidWidget/InfoWidget.jsx

@@ -0,0 +1,95 @@
+import React from "react";
+import {
+  FlexWidget,
+  TextWidget,
+  ListWidget,
+} from "react-native-android-widget";
+
+export function InfoWidget({ time, delayString }) {
+  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,
+        }}
+      >
+        {delayString ? (
+          <FlexWidget
+            style={{
+              flexDirection: "row",
+              width: "match_parent",
+              backgroundColor: "#ffffff",
+              flex: 1,
+            }}
+            clickAction="WIDGET_CLICK"
+          >
+            <FlexText flex={3} text={delayString} />
+          </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/widget-task-handler.jsx

@@ -2,10 +2,30 @@ import React from "react";
 import { TraInfoEXWidget } from "./TraInfoEXWidget";
 import dayjs from "dayjs";
 import { ToastAndroid } from "react-native";
+import { InfoWidget } 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 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 const getDelayData = async () => {
@@ -25,20 +45,29 @@ export const getDelayData = async () => {
   return { time, delayString };
 };
 export async function widgetTaskHandler(props) {
-  const widgetInfo = props.widgetInfo;
+  const WidgetName = await AS.getItem(
-  const Widget = nameToWidget[widgetInfo.widgetName];
+    `widgetType/${props.widgetInfo.widgetId}`
+  ).catch((e) => "JR_shikoku_train_info");
   ToastAndroid.show(
     `Widget Action: ${JSON.stringify(props.widgetInfo.widgetId)}`,
     ToastAndroid.SHORT
   );
-  const { time, delayString } = await getDelayData();
+  ToastAndroid.show(`Widget Name: ${WidgetName}`, ToastAndroid.SHORT);
   switch (props.widgetAction) {
     case "WIDGET_ADDED":
     case "WIDGET_UPDATE":
     case "WIDGET_CLICK":
     case "WIDGET_RESIZED":
       // Not needed for now
-      props.renderWidget(<Widget time={time} delayString={delayString} />);
+      if (WidgetName === "JR_shikoku_train_info") {
+        const Widget = nameToWidget[WidgetName];
+        const { time, delayString } = await getDelayData();
+        props.renderWidget(<Widget time={time} delayString={delayString} />);
+      } else if (WidgetName === "Info_Widget") {
+        const Widget = nameToWidget[WidgetName];
+        const { time, text } = await getInfoString();
+        props.renderWidget(<Widget time={time} delayString={text} />);
+      }
 
       break;
 

components/Settings/WidgetSettings.js

@@ -5,13 +5,16 @@ 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 { AS } from "../../storageControl";
 import {
   getDelayData,
   nameToWidget,
+  getInfoString,
 } from "../AndroidWidget/widget-task-handler";
 import { ListItem } from "native-base";
 
 export const WidgetSettings = ({ navigate }) => {
+  const { JR_shikoku_train_info, Info_Widget } = nameToWidget;
   const [widgetList, setWidgetList] = useState([]);
   useEffect(() => {
     const d = [];
@@ -28,14 +31,18 @@ export const WidgetSettings = ({ navigate }) => {
     });
     setWidgetList(d);
   }, []);
-
   const [time, setTime] = useState(time);
   const [delayString, setDelayString] = useState(delayString);
+  const [trainInfo, setTrainInfo] = useState();
   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 +97,31 @@ export const WidgetSettings = ({ navigate }) => {
               margin: 10,
             }}
           >
-            {Object.keys(nameToWidget).map((Name) => {
+            <WidgetPreview
-              const Data = nameToWidget[Name];
+              renderWidget={() => (
-              return (
+                <JR_shikoku_train_info time={time} delayString={delayString} />
-                <WidgetPreview
+              )}
-                  renderWidget={() => (
+              width={400}
-                    <Data time={time} delayString={delayString} />
+              height={250}
-                  )}
+            />
-                  width={400}
+          </View>
-                  height={250}
+          <View
-                />
+            style={{
-              );
+              borderRadius: 15,
-            })}
+              borderColor: "black",
+              borderWidth: 5,
+              borderStyle: "solid",
+              overflow: "hidden",
+              margin: 10,
+            }}
+          >
+            <WidgetPreview
+              renderWidget={() => (
+                <Info_Widget time={time} delayString={trainInfo} />
+              )}
+              width={400}
+              height={250}
+            />
           </View>
         </View>
         <ListItem key={"default"}>
@@ -129,33 +149,48 @@ export const WidgetSettings = ({ navigate }) => {
             名前
           </Text>
         </ListItem>
-        {widgetList.map((widget) => (
+        {widgetList.map((widget) => {
-          <ListItem key={widget.widgetId}>
+          return (
-            <Text
+            <ListItem
-              style={{
+              key={widget.widgetId}
-                fontSize: 20,
+              onPress={() => {
-                alignItems: "center",
+                //widget.widgetNameで定義されてないもう一つのウィジェットを選択する
-                alignContent: "center",
+                if (widget.widgetName === "Info_Widget") {
-                textAlign: "center",
+                  AS.setItem(
-                textAlignVertical: "center",
+                    `widgetType/${widget.widgetId}`,
-                marginRight: 10,
+                    "JR_shikoku_train_info"
+                  );
+                } else {
+                  AS.setItem(`widgetType/${widget.widgetId}`, "Info_Widget");
+                }
               }}
             >
-              {widget.widgetId}
+              <Text
-            </Text>
+                style={{
-            <Text
+                  fontSize: 20,
-              style={{
+                  alignItems: "center",
-                fontSize: 20,
+                  alignContent: "center",
-                alignItems: "center",
+                  textAlign: "center",
-                alignContent: "center",
+                  textAlignVertical: "center",
-                textAlign: "center",
+                  marginRight: 10,
-                textAlignVertical: "center",
+                }}
-              }}
+              >
-            >
+                {widget.widgetId}
-              {widget.widgetName}
+              </Text>
-            </Text>
+              <Text
-          </ListItem>
+                style={{
-        ))}
+                  fontSize: 20,
+                  alignItems: "center",
+                  alignContent: "center",
+                  textAlign: "center",
+                  textAlignVertical: "center",
+                }}
+              >
+                {widget.widgetName}
+              </Text>
+            </ListItem>
+          );
+        })}
       </ScrollView>
       <Text
         style={{