group tasks

2023-04-23 21:34:33 +02:00 · 2023-04-23 21:34:33 +02:00 · 6f336bbc77
parent da125051f3
commit 6f336bbc77
4 changed files with 254 additions and 172 deletions
--- a/src/Pages/GroupTasks/GroupTasksTableList.js
+++ b/src/Pages/GroupTasks/GroupTasksTableList.js
@ -1,7 +1,7 @@
 import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
 import { Badge, Button, Divider, Popconfirm, Space, Table } from "antd";
 import { Link } from "react-router-dom";
-import { FormatDatetime } from "../../utils";
+import { Constants, FormatDatetime } from "../../utils";

 const columns = [
  {
@ -29,6 +29,11 @@ const columns = [
    dataIndex: "startedAt",
    key: "startedAt",
  },
+  {
+    title: "Ended At",
+    dataIndex: "endedAt",
+    key: "endedAt",
+  },
  {
    title: "Action",
    dataIndex: "action",
@ -40,25 +45,6 @@ const columns = [
    ),
  },
 ];
-/*
-  const data = [
-    {
-      key: "1",
-      id: "12312",
-      groupname: "Janex Device Acryl Led Lamp",
-      step: "6 / 6",
-      status: <Badge status="success" text="Finished" />,
-      datetime: "2020-01-01 12:00:00",
-    },
-    {
-      key: "2",
-      id: "9999",
-      groupname: "Acryl Glas schneiden",
-      step: "3 / 6",
-      status: <Badge status="error" text="Failed" />,
-      datetime: "2020-01-01 12:00:00",
-    },
-  ]; */

 export default function GroupTaskTableList({
  categoryGroup,
@ -67,14 +53,16 @@ export default function GroupTaskTableList({
 }) {
  const getStatusBadge = (status) => {
    switch (status) {
-      case 0:
+      case Constants.GROUP_TASKS_STATUS.FINISHED:
        return <Badge status="success" text="Finished" />;
-      case 1:
-        return <Badge status="processing" text="Processing" />;
-      case 2:
+      case Constants.GROUP_TASKS_STATUS.RUNNING:
+        return <Badge status="processing" text="Running" />;
+      case Constants.GROUP_TASKS_STATUS.CANCELED:
        return <Badge status="warning" text="Canceled" />;
-      case 3:
+      case Constants.GROUP_TASKS_STATUS.FAILED:
        return <Badge status="error" text="Failed" />;
+      case Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED:
+        return <Badge status="warning" text="Input required" />;
      default:
        return <Badge status="error" text="Status not found" />;
    }
@ -83,6 +71,8 @@ export default function GroupTaskTableList({
  const getTableItems = () => {
    let items = [];

+    groupTasks.sort((a, b) => new Date(b.StartedAt) - new Date(a.StartedAt));
+
    groupTasks.forEach((groupTask) => {
      if (groupTask.Category === categoryGroup.category) {
        items.push({
@ -92,6 +82,10 @@ export default function GroupTaskTableList({
          step: `${groupTask.CurrentTasksStep} / ${groupTask.NumberOfSteps}`,
          status: getStatusBadge(groupTask.Status),
          startedAt: FormatDatetime(groupTask.StartedAt),
+          endedAt:
+            groupTask.EndedAt !== "0001-01-01T00:00:00Z"
+              ? FormatDatetime(groupTask.EndedAt)
+              : "-/-",
        });
      }
    });
--- a/src/Pages/GroupTasks/GroupTasksViewModal.js
+++ b/src/Pages/GroupTasks/GroupTasksViewModal.js
@ -1,97 +1,18 @@
-import {
-  Alert,
-  Button,
-  Divider,
-  Form,
-  Input,
-  Modal,
-  Result,
-  Steps,
-  message,
-} from "antd";
-import { useContext, useState } from "react";
+import { Alert, Button, Modal, Result, Steps } from "antd";
+import { useContext } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Constants, FormatDatetime, WebSocketContext } from "../../utils";
-
-const steps = [
-  {
-    title: "First",
-    content: "First-content",
-  },
-  {
-    title: "Second",
-    content: "Second-content",
-  },
-  {
-    title: "Last",
-    content: "Last-content",
-  },
-];
-
-const contentData = [
-  <Form layout="vertical">
-    <Form.Item label="Format des Labels">
-      <Input />
-    </Form.Item>
-  </Form>,
-  "",
-  <h1>hakki</h1>,
-];
-
-const consoleContentData = [
-  {
-    description: [
-      <p>
-        Error: An Uncaught Error at s
-        (https://ant.design/demos.a6f2ae2b.async.js:1:10244) at S
-        (https://ant.design/umi.996fb2f6.js:6081:13535) at u at a
-        (https://ant.design/umi.996fb2f6.js:41615:61022) at b
-        (https://ant.design/umi.996fb2f6.js:211:19559) at S
-        (https://ant.design/umi.996fb2f6.js:6081:13535) at section at section at
-        $t (https://ant.design/umi.996fb2f6.js:125:690029) at h4
-        (https://ant.design/umi.996fb2f6.js:211:1412)
-      </p>,
-    ],
-    status: "error",
-  },
-  {
-    description: [<p>Test</p>],
-    status: "success",
-  },
-  {
-    description: [<p>Test</p>],
-    status: "warning",
-  },
-];
+import {
+  Constants,
+  FormatDatetime,
+  WebSocketContext,
+  SentMessagesCommands,
+} from "../../utils";

 export default function GroupTasksViewModal({ isOpen }) {
-  const [currentStep, setCurrentStep] = useState(0);
-  const [content, setContent] = useState(contentData[currentStep]);
-  const [consoleContent, setConsoleContent] = useState(
-    consoleContentData[currentStep]
-  );
  const webSocketContext = useContext(WebSocketContext);
  const navigate = useNavigate();
  let { groupTaskId } = useParams();

-  const updateContentData = (value) => {
-    setContent(contentData[value]);
-  };
-
-  const next = () => {
-    const val = currentStep + 1;
-    setCurrentStep(val);
-    updateContentData(val);
-    setConsoleContent(consoleContentData[val]);
-  };
-
-  const prev = () => {
-    const val = currentStep - 1;
-    setCurrentStep(val);
-    updateContentData(val);
-    setConsoleContent(consoleContentData[val]);
-  };
-
  const handleCancel = () => {
    console.log("handleCancel", isOpen);
    navigate(Constants.ROUTE_PATHS.GROUP_TASKS);
@ -122,6 +43,161 @@ export default function GroupTasksViewModal({ isOpen }) {
    );
  }

+  const getAlertType = (status) => {
+    switch (status) {
+      case Constants.GROUP_TASKS_STATUS.FINISHED:
+        return "success";
+      case Constants.GROUP_TASKS_STATUS.RUNNING:
+        return "info";
+      case Constants.GROUP_TASKS_STATUS.CANCELED:
+        return "warning";
+      case Constants.GROUP_TASKS_STATUS.FAILED:
+        return "error";
+      case Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED:
+        return "info";
+      default:
+        return "info";
+    }
+  };
+
+  const getAlertMessage = (status) => {
+    switch (status) {
+      case Constants.GROUP_TASKS_STATUS.FINISHED:
+        return "Success";
+      case Constants.GROUP_TASKS_STATUS.RUNNING:
+        return "Task is running";
+      case Constants.GROUP_TASKS_STATUS.CANCELED:
+        return "Task cancelled";
+      case Constants.GROUP_TASKS_STATUS.FAILED:
+        return "Task failed";
+      case Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED:
+        return "Input required";
+      default:
+        return "Alert message not found";
+    }
+  };
+
+  const getStepItemStatus = (status) => {
+    switch (status) {
+      case Constants.GROUP_TASKS_STATUS.FINISHED:
+        return "finish";
+      case Constants.GROUP_TASKS_STATUS.RUNNING:
+        return "process";
+      case Constants.GROUP_TASKS_STATUS.CANCELED:
+        return "error";
+      case Constants.GROUP_TASKS_STATUS.FAILED:
+        return "error";
+      case Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED:
+        return "wait";
+      default:
+        return "wait";
+    }
+  };
+
+  const handleTaskFailedTryAgainRunTaskStep = (taskStepId, step) => {
+    console.log("handleTaskFailedTryAgainRunTaskStep ", taskStepId);
+
+    webSocketContext.SendSocketMessage(
+      SentMessagesCommands.TaskFailedTryAgainRunTaskStep,
+      {
+        groupTaskId: currentGroupTask.Id,
+        category: currentGroupTask.Category,
+        groupId: currentGroupTask.GroupId,
+        step: step,
+        taskStepId: taskStepId,
+      }
+    );
+  };
+
+  const stepsItemHandler = () => {
+    let groupTaskSteps = [];
+    let groupTasks = [];
+
+    webSocketContext.GroupTasksSteps.forEach((step) => {
+      if (step.GroupTasksId === groupTaskId) {
+        groupTaskSteps.push(step);
+      }
+    });
+
+    groupTaskSteps.sort((a, b) => a.Step - b.Step);
+
+    console.log("currentGroupTask", currentGroupTask);
+    console.log("groupTaskSteps", groupTaskSteps);
+
+    webSocketContext.CategoryGroups.forEach((categoryGroup) => {
+      if (categoryGroup.category === currentGroupTask.Category) {
+        categoryGroup.groups.forEach((group) => {
+          if (currentGroupTask.GroupId === group.id) {
+            groupTasks = group.tasks;
+          }
+        });
+      }
+    });
+
+    let stepItems = [];
+
+    console.log("groupTasks", groupTasks);
+
+    groupTasks.forEach((groupTask, index) => {
+      console.log("groupTask123", groupTask, groupTaskSteps[index]);
+
+      stepItems.push({
+        key: index,
+        title: groupTask.name,
+        status:
+          groupTaskSteps[index] !== undefined
+            ? getStepItemStatus(groupTaskSteps[index].Status)
+            : "wait",
+        description:
+          groupTaskSteps[index] !== undefined ? (
+            <>
+              <p style={{ color: "#000" }}>
+                <b>Id:</b> {groupTaskSteps[index].Id}
+                <br />
+                <b>Started at:</b>{" "}
+                {FormatDatetime(groupTaskSteps[index].StartedAt)}
+                <br />
+                <b>Ended at:</b>{" "}
+                {groupTaskSteps[index].EndedAt !== "0001-01-01T00:00:00Z"
+                  ? FormatDatetime(groupTaskSteps[index].EndedAt)
+                  : "-/-"}
+              </p>
+
+              <Alert
+                message={<b>{getAlertMessage(groupTaskSteps[index].Status)}</b>}
+                description={groupTaskSteps[index].Log}
+                type={getAlertType(groupTaskSteps[index].Status)}
+                showIcon
+                action={
+                  groupTaskSteps[index].Status ===
+                  Constants.GROUP_TASKS_STATUS.FAILED ? (
+                    <Button
+                      size="small"
+                      danger
+                      onClick={() =>
+                        handleTaskFailedTryAgainRunTaskStep(
+                          groupTaskSteps[index].Id,
+                          index + 1
+                        )
+                      }
+                    >
+                      Try again
+                    </Button>
+                  ) : (
+                    <></>
+                  )
+                }
+              />
+            </>
+          ) : (
+            ""
+          ),
+      });
+    });
+
+    return stepItems;
+  };
+
  return (
    <Modal
      open={isOpen}
@ -149,59 +225,12 @@ export default function GroupTasksViewModal({ isOpen }) {
                <span style={{ fontWeight: "bold" }}>Started at:</span>{" "}
                {FormatDatetime(currentGroupTask.StartedAt)}
              </p>
-              <Steps
-                direction="vertical"
-                current={currentStep}
-                items={[
-                  {
-                    title: "Bild zu Label konvertieren",
-                    description: currentStep === 0 ? content : null,
-                    onClick: (value) => console.log(value),
-                    status: "error",
-                  },
-                  {
-                    title: "Label drucken",
-                    description: currentStep === 1 ? content : null,
-                  },
-                  {
-                    title: "Waiting",
-                    description: currentStep === 2 ? content : null,
-                  },
-                ]}
-              />
-              <div style={{ marginTop: 24 }}>
-                {currentStep < steps.length - 1 && (
-                  <Button type="primary" onClick={() => next()}>
-                    Next
-                  </Button>
-                )}
-                {currentStep === steps.length - 1 && (
-                  <Button
-                    type="primary"
-                    onClick={() => message.success("Processing complete!")}
-                  >
-                    Done
-                  </Button>
-                )}
-                {currentStep > 0 && (
-                  <Button style={{ margin: "0 8px" }} onClick={() => prev()}>
-                    Previous
-                  </Button>
-                )}
-              </div>
-              <Divider />
-              <Alert
-                message={<b>{consoleContent.status}</b>}
-                description={consoleContent.description}
-                type={consoleContent.status}
-                showIcon
-              />
+              <Steps direction="vertical" items={stepsItemHandler()} />
            </>
          );
        }
+        return "";
      })}
    </Modal>
  );
-
-  // return <ModalHandler />;
 }
--- a/src/Pages/GroupTasks/GroupTypeSelectionModal.js
+++ b/src/Pages/GroupTasks/GroupTypeSelectionModal.js
@ -39,7 +39,7 @@ export default function GroupTypeSelectionModal({
                    label={globalInput.displayName}
                    required
                  >
-                    <Input />
+                    <Input id={globalInput.parameterName} />
                  </Form.Item>
                );
                break;
@ -50,7 +50,10 @@ export default function GroupTypeSelectionModal({
                    label={globalInput.displayName}
                    required
                  >
-                    <InputNumber style={{ width: "100%" }} />
+                    <InputNumber
+                      style={{ width: "100%" }}
+                      id={globalInput.parameterName}
+                    />
                  </Form.Item>
                );
                break;
@ -71,7 +74,12 @@ export default function GroupTypeSelectionModal({
            <>
              <Divider />
              <h3 style={{ fontWeight: "bold" }}>Fill in the global values</h3>
-              <Form layout="vertical">{elements}</Form>
+              <Form
+                layout="vertical"
+                id="groupTypeSelectionUserSpecifiedGlobalInput"
+              >
+                {elements}
+              </Form>
            </>
          ) : null}
        </>
@ -103,7 +111,6 @@ export default function GroupTypeSelectionModal({

  const handleStartTask = () => {
    setIsOpen(false);
-    //setIsGroupTasksViewModalOpen(true);

    let groupName;
    let numberOfSteps;
@ -120,21 +127,35 @@ export default function GroupTypeSelectionModal({

    localStorage.setItem("rememberId", rememberId);

-    console.log("set rememberId", rememberId);
+    console.log(
+      "starting task",
+      currentSelectedModalGroupType,
+      webSocketContext.groupTypeSelectionModalRememberId
+    );
+
+    const userSpecifiedGlobalInputs = document
+      .getElementById("groupTypeSelectionUserSpecifiedGlobalInput")
+      .getElementsByTagName("input");
+
+    let globalInputs = [];
+
+    if (userSpecifiedGlobalInputs.length > 0) {
+      for (let i = 0; i < userSpecifiedGlobalInputs.length; i++) {
+        globalInputs.push({
+          parameterName: userSpecifiedGlobalInputs[i].id,
+          value: userSpecifiedGlobalInputs[i].value,
+        });
+      }
+    }

    webSocketContext.SendSocketMessage(SentMessagesCommands.StartGroupTasks, {
      category: categoryGroup.category,
      id: currentSelectedModalGroupType,
      groupName: groupName,
      numberOfSteps: parseInt(numberOfSteps),
+      globalInputs: globalInputs,
      rememberId: rememberId, // used to open the modal when group task is started by backend and send via websocket back
    });
-
-    console.log(
-      "starting task",
-      currentSelectedModalGroupType,
-      webSocketContext.groupTypeSelectionModalRememberId
-    );
  };

  return (
--- a/src/utils.js
+++ b/src/utils.js
@ -10,6 +10,13 @@ export const Constants = {
  ROUTE_PATHS: {
    GROUP_TASKS: "/group-tasks",
  },
+  GROUP_TASKS_STATUS: {
+    FINISHED: 1,
+    RUNNING: 2,
+    CANCELED: 3,
+    FAILED: 4,
+    INPUT_REQUIRED: 5,
+  },
 };

 /**
@ -52,6 +59,7 @@ let webSocketContextPreview = {
  ConnectedWebSocketUsersCount: 0,
  CategoryGroups: [],
  GroupTasks: [],
+  GroupTasksSteps: [],
 };

 export const WebSocketContext = createContext(webSocketContextPreview);
@ -61,11 +69,15 @@ const ReceivedMessagesCommands = {
  InitUserSocketConnection: 1,
  UpdateConnectedUsers: 2,
  NewGroupTaskStarted: 3,
+  NewGroupTaskStep: 4,
+  UpdateGroupTaskStep: 5,
+  UpdateGroupTask: 6,
 };

 // commands sent to the backend server
 export const SentMessagesCommands = {
  StartGroupTasks: 1,
+  TaskFailedTryAgainRunTaskStep: 2,
 };

 export function WebSocketProvider({ children, userSession, setUserSession }) {
@ -81,6 +93,7 @@ export function WebSocketProvider({ children, userSession, setUserSession }) {
  );
  // these are all group tasks that are then filtered and displayed in the respective tables for the category
  const [groupTasks, setGroupTasks] = useState([]);
+  const [groupTasksSteps, setGroupTasksSteps] = useState([]);
  const navigate = useNavigate();

  let socket = null;
@ -109,6 +122,8 @@ export function WebSocketProvider({ children, userSession, setUserSession }) {
          setUser(body.User);
          setCategoryGroups(body.CategoryGroups);
          setGroupTasks(body.GroupTasks);
+          setGroupTasksSteps(body.GroupTasksSteps);
+          console.log("groupTasksSteps after init", groupTasksSteps.length);
          break;
        case ReceivedMessagesCommands.UpdateConnectedUsers:
          setConnectedWebSocketUsersCount(body);
@ -121,6 +136,27 @@ export function WebSocketProvider({ children, userSession, setUserSession }) {
            localStorage.removeItem("rememberId");
          }
          break;
+        case ReceivedMessagesCommands.NewGroupTaskStep:
+          setGroupTasksSteps((arr) => [...arr, body]);
+          break;
+        case ReceivedMessagesCommands.UpdateGroupTaskStep:
+          setGroupTasksSteps((arr) => {
+            const newArr = [...arr];
+
+            newArr[arr.findIndex((arr1) => arr1.Id === body.Id)] = body;
+
+            return newArr;
+          });
+          break;
+        case ReceivedMessagesCommands.UpdateGroupTask:
+          setGroupTasks((arr) => {
+            const newArr = [...arr];
+
+            newArr[arr.findIndex((arr1) => arr1.Id === body.Id)] = body;
+
+            return newArr;
+          });
+          break;
        default:
          console.log("unknown command", cmd);
          break;
@ -170,6 +206,8 @@ export function WebSocketProvider({ children, userSession, setUserSession }) {
        GroupTasks: groupTasks,
        User: user,
        SendSocketMessage: SendSocketMessage,
+        GroupTasksSteps: groupTasksSteps,
+        setGroupTasksSteps: setGroupTasksSteps,
      }}
    >
      {children}