-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(robotpage-layout): 🎉 add robotsubpages-layout with hook configra…
…tions
- Loading branch information
1 parent
beb7d28
commit 022737c
Showing
12 changed files
with
173 additions
and
195 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,75 @@ | ||
| import React, { Fragment, ReactElement } from "react"; | ||
| import { useParams } from "react-router-dom"; | ||
| import RobotConnectionsViewer from "../RobotConnectionsViewer/RobotConnectionsViewer"; | ||
| import RobotServiceButtons from "../RobotServiceButtons/RobotServiceButtons"; | ||
| import RobotHeaderTabs from "../RobotHeaderTabs/RobotHeaderTabs"; | ||
| import { envOnPremiseRobot } from "../../helpers/envProvider"; | ||
| import RobotResource from "../RobotResource/RobotResource"; | ||
| import { IoLocationOutline } from "react-icons/io5"; | ||
| import { AiOutlineTeam } from "react-icons/ai"; | ||
| import CardLayout from "../../layouts/CardLayout"; | ||
| import ContentLoader from "react-content-loader"; | ||
| import RobotResource from "../RobotResource/RobotResource"; | ||
| import RobotConnectionsViewer from "../RobotConnectionsViewer/RobotConnectionsViewer"; | ||
| import { envOnPremiseRobot } from "../../helpers/envProvider"; | ||
| import RobotHeaderTabs from "../RobotHeaderTabs/RobotHeaderTabs"; | ||
| import { AiOutlineTeam } from "react-icons/ai"; | ||
| import { useParams } from "react-router-dom"; | ||
| import useRobot from "../../hooks/useRobot"; | ||
| import RobotServiceButtons from "../RobotServiceButtons/RobotServiceButtons"; | ||
|
|
||
| interface IRobotHeader { | ||
| handleChangeActiveTab: any; | ||
| } | ||
|
|
||
| export default function RobotHeader({ | ||
| handleChangeActiveTab, | ||
| }: IRobotHeader): ReactElement { | ||
| export default function RobotHeader(): ReactElement { | ||
| const { ros, responseRobot, isSettedCookie } = useRobot(); | ||
| const url = useParams(); | ||
|
|
||
| const { ros, responseRobot, isSettedCookie, activeTab } = useRobot(); | ||
|
|
||
| return ( | ||
| <CardLayout className="pt-6 px-8 !pb-0"> | ||
| <Fragment> | ||
| <div className="h-28 flex items-center justify-between"> | ||
| <div className="h-full flex flex-col justify-around"> | ||
| <div className="flex gap-2 items-center"> | ||
| <span className="text-lg font-medium">{url?.robotName}</span> | ||
| <div | ||
| className={`text-[0.64rem] capitalize font-medium px-3 py-1 rounded-lg w-fit text-layer-primary-500 bg-layer-primary-100`} | ||
| > | ||
| {responseRobot?.robotClusters?.length === 1 | ||
| ? `Virtual ${envOnPremiseRobot ? "Application" : "Robot"}` | ||
| : (responseRobot?.robotClusters?.length === 2 && | ||
| `Physical ${ | ||
| envOnPremiseRobot ? "Application" : "Robot" | ||
| }`) || ( | ||
| <ContentLoader | ||
| speed={1} | ||
| width={64} | ||
| height={18} | ||
| backgroundColor="#f5e5ff" | ||
| foregroundColor="#fbf4ff" | ||
| > | ||
| <rect width="64" height="18" /> | ||
| </ContentLoader> | ||
| )} | ||
| <div className="col-span-full"> | ||
| <CardLayout className="pt-6 px-8 !pb-0"> | ||
| <Fragment> | ||
| <div className="h-28 flex items-center justify-between"> | ||
| <div className="h-full flex flex-col justify-around"> | ||
| <div className="flex gap-2 items-center"> | ||
| <span className="text-lg font-medium">{url?.robotName}</span> | ||
| <div | ||
| className={`text-[0.64rem] capitalize font-medium px-3 py-1 rounded-lg w-fit text-layer-primary-500 bg-layer-primary-100`} | ||
| > | ||
| {responseRobot?.robotClusters?.length === 1 | ||
| ? `Virtual ${envOnPremiseRobot ? "Application" : "Robot"}` | ||
| : (responseRobot?.robotClusters?.length === 2 && | ||
| `Physical ${ | ||
| envOnPremiseRobot ? "Application" : "Robot" | ||
| }`) || ( | ||
| <ContentLoader | ||
| speed={1} | ||
| width={64} | ||
| height={18} | ||
| backgroundColor="#f5e5ff" | ||
| foregroundColor="#fbf4ff" | ||
| > | ||
| <rect width="64" height="18" /> | ||
| </ContentLoader> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <span className="flex gap-2 items-center"> | ||
| <AiOutlineTeam size={16} /> | ||
| <span className="text-xs font-light"> | ||
| {url?.organizationName} Organization | ||
| <span className="flex gap-2 items-center"> | ||
| <AiOutlineTeam size={16} /> | ||
| <span className="text-xs font-light"> | ||
| {url?.organizationName} Organization | ||
| </span> | ||
| </span> | ||
| </span> | ||
| <span className="flex gap-2 items-center"> | ||
| <IoLocationOutline size={16} /> | ||
| <span className="text-xs font-light">Ankara, Turkiye</span> | ||
| </span> | ||
| </div> | ||
| <div className="hidden md:flex text-xs font-medium text-layer-dark-400 gap-8"> | ||
| <div className="h-full flex flex-col items-end gap-4"> | ||
| <RobotServiceButtons /> | ||
| <RobotConnectionsViewer | ||
| ide={isSettedCookie} | ||
| vdiURL={responseRobot?.vdiIngressEndpoint} | ||
| ros={ros} | ||
| /> | ||
| <RobotResource responseRobot={responseRobot} /> | ||
| <span className="flex gap-2 items-center"> | ||
| <IoLocationOutline size={16} /> | ||
| <span className="text-xs font-light">Ankara, Turkiye</span> | ||
| </span> | ||
| </div> | ||
| <div className="hidden md:flex text-xs font-medium text-layer-dark-400 gap-8"> | ||
| <div className="h-full flex flex-col items-end gap-4"> | ||
| <RobotServiceButtons /> | ||
| <RobotConnectionsViewer | ||
| ide={isSettedCookie} | ||
| vdiURL={responseRobot?.vdiIngressEndpoint} | ||
| ros={ros} | ||
| /> | ||
| <RobotResource responseRobot={responseRobot} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <RobotHeaderTabs | ||
| responseRobot={responseRobot} | ||
| isSettedCookie={isSettedCookie} | ||
| handleChangeActiveTab={handleChangeActiveTab} | ||
| activeTab={activeTab} | ||
| /> | ||
| </Fragment> | ||
| </CardLayout> | ||
| <RobotHeaderTabs /> | ||
| </Fragment> | ||
| </CardLayout> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import React, { ReactElement } from "react"; | ||
| import DevelopmentSuite from "../pages/RobotPage/DevelopmentSuite/DevelopmentSuite"; | ||
| import Teleoperation from "../pages/RobotPage/Teleoperation/Teleoperation"; | ||
| import Visualization from "../pages/RobotPage/Visualization/Visualization"; | ||
| import RemoteDesktop from "../pages/RobotPage/RemoteDesktop/RemoteDesktop"; | ||
| import CodeEditor from "../components/CodeEditor/CodeEditor"; | ||
| import Overview from "../pages/RobotPage/Overview/Overview"; | ||
| import { envOnPremiseRobot } from "../helpers/envProvider"; | ||
| import TaskManagementLayout from "./TaskManagementLayout"; | ||
| import BarcodeContext from "../contexts/BarcodeContext"; | ||
| import MissionContext from "../contexts/MissionContext"; | ||
| import { useAppSelector } from "../hooks/redux"; | ||
| import useRobot from "../hooks/useRobot"; | ||
|
|
||
| export default function RobotSubPageLayout(): ReactElement { | ||
| const { activeTab, setActiveTab, responseRobot, isSettedCookie } = useRobot(); | ||
| const { urls } = useAppSelector((state) => state.robot); | ||
| return ( | ||
| <div className="col-span-full"> | ||
| {(() => { | ||
| switch (activeTab) { | ||
| case "Overview": | ||
| return ( | ||
| <Overview | ||
| informationWidgetAction={() => { | ||
| isSettedCookie && | ||
| setActiveTab( | ||
| envOnPremiseRobot ? "Development Suite" : "Teleoperation" | ||
| ); | ||
| }} | ||
| /> | ||
| ); | ||
| case "Task Management": | ||
| return ( | ||
| <MissionContext> | ||
| <BarcodeContext> | ||
| <TaskManagementLayout /> | ||
| </BarcodeContext> | ||
| </MissionContext> | ||
| ); | ||
| case "Visualization": | ||
| return <Visualization />; | ||
| case "Teleoperation": | ||
| return ( | ||
| <Teleoperation | ||
| vdiIngressEndpoint={ | ||
| urls?.vdi || responseRobot?.vdiIngressEndpoint | ||
| } | ||
| /> | ||
| ); | ||
| case "Development Suite": | ||
| return ( | ||
| <DevelopmentSuite | ||
| ideURL={urls?.ide || responseRobot?.ideIngressEndpoint} | ||
| vdiURL={urls?.vdi || responseRobot?.vdiIngressEndpoint} | ||
| /> | ||
| ); | ||
| case "Remote Desktop": | ||
| return <RemoteDesktop />; | ||
| case "Settings": | ||
| return <div>Settings</div>; | ||
| case "Loading": | ||
| return ( | ||
| <div> | ||
| <img | ||
| className="mx-auto scale-75" | ||
| src="/svg/general/loading.svg" | ||
| alt="loading" | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| })()} | ||
| <CodeEditor /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.