diff --git a/src/App.js b/src/App.js index 8da0062..067ddd4 100644 --- a/src/App.js +++ b/src/App.js @@ -5,17 +5,10 @@ import PageContent from "./Components/PageContent"; import SideMenu from "./Components/SideMenu"; import Login from "./Pages/Login"; import { Layout } from "antd"; -import { - Constants, - ClientUserDataContextPreview, - ClientUserDataContext, - UseUserSession, - WebSocketProvider, -} from "./utils"; +import { UseUserSession, WebSocketProvider } from "./utils"; export default function App() { const { userSession, setUserSession } = UseUserSession(); - const [userData, setUserData] = useState(ClientUserDataContextPreview); if (!userSession) { return ; @@ -23,16 +16,13 @@ export default function App() { return ( - - - - - - + + + + ); } diff --git a/src/Components/SideMenu/index.js b/src/Components/SideMenu/index.js index ca20b14..41a746a 100644 --- a/src/Components/SideMenu/index.js +++ b/src/Components/SideMenu/index.js @@ -9,19 +9,13 @@ import Sider from "antd/es/layout/Sider"; import { useContext, useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import PropTypes from "prop-types"; -import { - ClientUserDataContext, - Constants, - UseUserSession, - WebSocketTestContext, -} from "../../utils"; +import { Constants, UseUserSession, WebSocketContext } from "../../utils"; export default function SideMenu({ setUserSession }) { const { userSession } = UseUserSession(); const location = useLocation(); const [selectedKeys, setSelectedKeys] = useState("/"); - const clientUserDataContext = useContext(ClientUserDataContext); - const webSocketTestContext = useContext(WebSocketTestContext); + const webSocketContext = useContext(WebSocketContext); useEffect(() => { const pathName = location.pathname; @@ -75,11 +69,9 @@ export default function SideMenu({ setUserSession }) { { icon: ( , }, { diff --git a/src/Pages/GroupTasks/GroupTypeSelectionModal.js b/src/Pages/GroupTasks/GroupTypeSelectionModal.js new file mode 100644 index 0000000..d8989e7 --- /dev/null +++ b/src/Pages/GroupTasks/GroupTypeSelectionModal.js @@ -0,0 +1,150 @@ +import { + Button, + Divider, + Form, + Input, + InputNumber, + Modal, + Select, + Space, + notification, +} from "antd"; + +export default function GroupTypeSelectionModal({ + isOpen, + setIsOpen, + setIsGroupTaskModalOpen, + categoryGroup, + currentSelectedModalGroupType, + setCurrentSelectedModalGroupType, +}) { + const handleCancel = () => setIsOpen(false); + const [api, contextHolder] = notification.useNotification(); + + const GroupGlobalInputs = ({ groupType }) => { + if (groupType !== null) { + var elements = []; + + categoryGroup.groups.forEach((group) => { + if (group.name === groupType && group.globalInputs?.length > 0) { + group.globalInputs.forEach((globalInput) => { + switch (globalInput.type) { + case "text": + elements.push( + + + + ); + break; + case "number": + elements.push( + + + + ); + break; + default: + api["error"]({ + message: `Type ${globalInput.type} not implemented`, + description: `Was specified in: ${globalInput.displayName}`, + }); + break; + } + }); + } + }); + + return ( + <> + {elements.length > 0 ? ( + <> + +

Fill in the global values

+
{elements}
+ + ) : null} + + ); + } + }; + + const startTaskPossible = () => { + if ( + currentSelectedModalGroupType === null || + currentSelectedModalGroupType === undefined + ) { + return true; + } + + let possible = false; + + categoryGroup.groups.forEach((group) => { + if (group.name === currentSelectedModalGroupType) { + if (group.tasks === null) { + possible = true; + return; + } + } + }); + + return possible; + }; + + return ( + + + + + , + ]} + > + {contextHolder} + + + + + ); +} diff --git a/src/Pages/GroupTasks/TaskTypeSelectionModal.js b/src/Pages/GroupTasks/TaskTypeSelectionModal.js deleted file mode 100644 index 5908ae6..0000000 --- a/src/Pages/GroupTasks/TaskTypeSelectionModal.js +++ /dev/null @@ -1,103 +0,0 @@ -import { - Button, - Divider, - Form, - Input, - InputNumber, - Modal, - Select, - Space, -} from "antd"; -import { useState } from "react"; - -export default function TaskTypeSelectionModal({ - isOpen, - setIsOpen, - setIsGroupTaskModalOpen, -}) { - const [currentSelectedModalTaskType, setCurrentSelectedModalTaskType] = - useState(null); - - const handleCancel = () => setIsOpen(false); - - const GroupTaskGlobalInputs = ({ taskType }) => { - if (taskType === "produktionstask1") { - return ( - <> - -

- Fill in the global values for the task -

-
- - - - - - -
- - ); - } else if (taskType === "printer") { - return ( - <> - -

- Fill in the global values for the task -

-
- - - -
- - ); - } - - return

{taskType}

; - }; - - return ( - - - - - , - ]} - > - - - - - ); -} diff --git a/src/Pages/GroupTasks/index.js b/src/Pages/GroupTasks/index.js index 091bf27..4bbad79 100644 --- a/src/Pages/GroupTasks/index.js +++ b/src/Pages/GroupTasks/index.js @@ -1,9 +1,10 @@ import { PlusOutlined, ReloadOutlined } from "@ant-design/icons"; -import { Badge, Button, Divider, Popconfirm, Space, Table } from "antd"; -import { useState } from "react"; +import { Button, Divider, Popconfirm, Result, Space, Table } from "antd"; +import { useContext, useState } from "react"; import { Link } from "react-router-dom"; import GroupTaskModal from "./GroupTaskModal"; -import TaskTypeSelectionModal from "./TaskTypeSelectionModal"; +import GroupTypeSelectionModal from "./GroupTypeSelectionModal"; +import { WebSocketContext } from "../../utils"; const columns = [ { @@ -12,9 +13,9 @@ const columns = [ key: "id", }, { - title: "Task Name", - dataIndex: "taskname", - key: "taskname", + title: "Group Name", + dataIndex: "groupname", + key: "groupname", }, { title: "Step", @@ -42,12 +43,12 @@ const columns = [ ), }, ]; - +/* const data = [ { key: "1", id: "12312", - taskname: "Janex Device Acryl Led Lamp", + groupname: "Janex Device Acryl Led Lamp", step: "6 / 6", status: , datetime: "2020-01-01 12:00:00", @@ -55,42 +56,52 @@ const data = [ { key: "2", id: "9999", - taskname: "Acryl Glas schneiden", + groupname: "Acryl Glas schneiden", step: "3 / 6", status: , datetime: "2020-01-01 12:00:00", }, -]; +]; */ export default function GroupTasks() { - const [isTaskTypeModalOpen, setIsTaskTypeModalOpen] = useState(false); + const [isGroupTypeModalOpen, setIsGroupTypeModalOpen] = useState(false); const [isGroupTaskModalOpen, setIsGroupTaskModalOpen] = useState(false); + const [currentCategoryGroup, setCurrentCategoryGroup] = useState([]); + const [currentSelectedModalGroupType, setCurrentSelectedModalGroupType] = + useState(); + const webSocketContext = useContext(WebSocketContext); - const showModal = (test) => { - console.log(test); - setIsTaskTypeModalOpen(true); + const showGroupTypeSelectionModal = (categoryGroup) => { + setCurrentCategoryGroup(categoryGroup); + setIsGroupTypeModalOpen(true); + setCurrentSelectedModalGroupType(null); }; return ( <>

GROUP TASKS

- - - - + {webSocketContext.CategoryGroups.length === 0 ? ( + + ) : ( + webSocketContext.CategoryGroups.map((categoryGroup) => { + return ( + + ); + }) + )} - { + let available = true; + + categoryGroup.groups.forEach((group) => { + if (group.tasks !== null) { + available = false; + return; + } + }); + + return available; + }; */ + return ( <> - {category} + {categoryGroup.category} } - onClick={() => showModal(true)} + onClick={() => showGroupTypeSelectionModal(categoryGroup)} > New task @@ -127,10 +151,7 @@ function GroupTaskList({ category, dataSource, showModal }) { - +
); } diff --git a/src/utils.js b/src/utils.js index 6fc3b6d..2715c87 100644 --- a/src/utils.js +++ b/src/utils.js @@ -8,20 +8,6 @@ export const Constants = { WS_ADDRESS: "ws://localhost:8080/ws", }; -/** - * client user data - */ - -let l = "loading..."; - -// for the data preview when the request is not finished -export const ClientUserDataContextPreview = { - Username: l, - Email: l, -}; - -export let ClientUserDataContext = createContext(null); - /** * user session */ @@ -51,12 +37,19 @@ export function UseUserSession() { /** * websocket */ +let l = "loading..."; + let webSocketContextPreview = { - connectionBadgeStatus: "error", - connectedWebSocketUsersCount: 0, + User: { + Username: l, + Email: l, + }, + ConnectionBadgeStatus: "error", + ConnectedWebSocketUsersCount: 0, + CategoryGroups: [], }; -export const WebSocketTestContext = createContext(webSocketContextPreview); +export const WebSocketContext = createContext(webSocketContextPreview); // commands received from the backend server const ReceivedMessagesCommands = { @@ -64,16 +57,17 @@ const ReceivedMessagesCommands = { UpdateConnectedUsers: 2, }; -export function WebSocketProvider({ - children, - userSession, - setUserSession, - setUserData, -}) { +export function WebSocketProvider({ children, userSession, setUserSession }) { const [isReady, setIsReady] = useState(false); - const [connectionBadgeStatus, setConnectionBadgeStatus] = useState("error"); + const [connectionBadgeStatus, setConnectionBadgeStatus] = useState( + webSocketContextPreview.ConnectionBadgeStatus + ); const [connectedWebSocketUsersCount, setConnectedWebSocketUsersCount] = useState(0); + const [user, setUser] = useState(webSocketContextPreview.User); + const [categoryGroups, setCategoryGroups] = useState( + webSocketContextPreview.CategoryGroups + ); let socket = null; @@ -95,7 +89,8 @@ export function WebSocketProvider({ switch (cmd) { case ReceivedMessagesCommands.InitUserSocketConnection: - setUserData(body); + setUser(body.User); + setCategoryGroups(body.CategoryGroups); break; case ReceivedMessagesCommands.UpdateConnectedUsers: setConnectedWebSocketUsersCount(body); @@ -130,13 +125,15 @@ export function WebSocketProvider({ }, []); return ( - {children} - + ); }