ウィジェットのコア作成

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 Widget = nameToWidget[widgetInfo.widgetName];
+  const WidgetName = await AS.getItem(
+    `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;