diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 3825dcb31..11f5355ab 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -8,31 +8,25 @@ import { MissionsProvider } from 'components/Contexts/MissionListsContext' import { SafeZoneProvider } from 'components/Contexts/SafeZoneContext' import { AlertProvider } from 'components/Contexts/AlertContext' -function App() { - return ( - - - - - - <> - -
- -
- - - - - - - - - - - - - ) -} +const App = () => ( + + + + + +
+ +
+ + + + + + + + + + +) export default App diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx index 6ef39d35f..1ee003cf3 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx @@ -15,7 +15,7 @@ interface MissionProps { const ButtonStyle = styled.div` display: grid; grid-template-columns: 45px 45px; - align-items: end; + margin-end: 20px; ` const ButtonText = styled.div` @@ -25,58 +25,76 @@ const ButtonText = styled.div` ` export function MissionControlButtons({ mission }: MissionProps) { + const { missionControlState } = useMissionControlContext() + + return ( + <> + {missionControlState.isWaitingForResponse ? ( + + ) : ( + <> + {mission.status === MissionStatus.Ongoing && } + {mission.status === MissionStatus.Paused && } + + )} + + ) +} + +function OngoingMissionButton({ mission }: MissionProps) { + const { TranslateText } = useLanguageContext() + const { updateMissionState } = useMissionControlContext() + + return ( + <> + + + + {TranslateText('Stop')} + + + + {TranslateText('Pause')} + + + + ) +} + +function PausedMissionButton({ mission }: MissionProps) { const { TranslateText } = useLanguageContext() - const { missionControlState, updateMissionState } = useMissionControlContext() + const { updateMissionState } = useMissionControlContext() - const renderControlIcon = (missionStatus: MissionStatus) => { - if (missionControlState.isWaitingForResponse) { - return - } else if (missionStatus === MissionStatus.Ongoing) { - return ( - - - - {TranslateText('Stop')} - - - - {TranslateText('Pause')} - - - ) - } else if (missionStatus === MissionStatus.Paused) { - return ( - - - - {TranslateText('Stop')} - - - - {TranslateText('Start')} - - - ) - } - return <> - } - return <>{renderControlIcon(mission.status)} + return ( + <> + + + + {TranslateText('Stop')} + + + + {TranslateText('Start')} + + + + ) } diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx index 6f4c03c49..93e05d399 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx @@ -1,12 +1,13 @@ import { Button, Card, Dialog, Icon, Typography, DotProgress } from '@equinor/eds-core-react' import { config } from 'config' -import { tokens } from '@equinor/eds-tokens' import { Mission, placeholderMission } from 'models/Mission' import styled from 'styled-components' import { useNavigate } from 'react-router-dom' import { useState } from 'react' import { useLanguageContext } from 'components/Contexts/LanguageContext' import { Icons } from 'utils/icons' +import { StyledDialog } from 'components/Styles/StyledComponents' +import { tokens } from '@equinor/eds-tokens' interface MissionQueueCardProps { order: number @@ -18,6 +19,13 @@ interface MissionDisplayProps { mission: Mission } +interface RemoveMissionDialogProps { + confirmDeleteDialogOpen: boolean + mission: Mission + setConfirmDeleteDialogOpen: React.Dispatch> + onDeleteMission: (mission: Mission) => void +} + const StyledMissionCard = styled(Card)` width: 880px; display: flex; @@ -49,11 +57,6 @@ const StyledButtonSection = styled.div` gap: 8px; ` -const StyledDialog = styled(Dialog)` - width: 320px; - padding: 10px; -` - const PaddingLeft = styled.div` padding-left: 20px; ` @@ -110,44 +113,60 @@ export function MissionQueueCard({ order, mission, onDeleteMission }: MissionQue > - - - {TranslateText('Remove mission')} - - - - - {TranslateText('Please confirm that you want to remove the mission from the queue:')} - - {mission.name} - - - - - - - + ) } +function RemoveMissionDialog({ + confirmDeleteDialogOpen, + mission, + setConfirmDeleteDialogOpen, + onDeleteMission, +}: RemoveMissionDialogProps) { + const { TranslateText } = useLanguageContext() + + return ( + + + {TranslateText('Remove mission')} + + + + + {TranslateText('Please confirm that you want to remove the mission from the queue:')} + + {mission.name} + + + + + + + + ) +} + function MissionDurationDisplay({ mission }: MissionDisplayProps) { const { TranslateText } = useLanguageContext() const translateEstimatedDuration = TranslateText('Estimated duration') diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx index a83b75245..a7f4e92a5 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx @@ -16,12 +16,14 @@ interface MissionProps { } const StyledMissionCard = styled(Card)` - width: 372px; - padding: 12px; + width: 400px; + height: 140px; + padding: 10px; + justify-content: space-between; ` const StyledTitle = styled(Card)` width: 70%; - height: 80%; + height: 50px; justify-content: center; padding-left: 12px; :hover { diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx index 752d02782..1d713b7c7 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx @@ -1,13 +1,4 @@ -import { - Autocomplete, - Button, - Card, - Dialog, - Typography, - Popover, - Icon, - CircularProgress, -} from '@equinor/eds-core-react' +import { Autocomplete, Button, Dialog, Typography, Popover, Icon, CircularProgress } from '@equinor/eds-core-react' import styled from 'styled-components' import { useLanguageContext } from 'components/Contexts/LanguageContext' import { Icons } from 'utils/icons' @@ -16,6 +7,7 @@ import { useInstallationContext } from 'components/Contexts/InstallationContext' import { CreateMissionButton } from './CreateMissionButton' import { Robot } from 'models/Robot' import { EchoMissionDefinition } from 'models/MissionDefinition' +import { StyledAutoComplete, StyledDialog } from 'components/Styles/StyledComponents' interface IProps { robotOptions: Array @@ -34,13 +26,7 @@ const StyledMissionDialog = styled.div` display: flex; justify-content: space-between; ` -const StyledAutoComplete = styled(Card)` - display: flex; - justify-content: center; - padding: 8px; - gap: 25px; - box-shadow: none; -` + const StyledMissionSection = styled.div` display: flex; margin-left: auto; @@ -54,11 +40,6 @@ const StyledLoading = styled.div` padding-top: 3rem; gap: 1rem; ` -const StyledDialog = styled(Dialog)` - display: flex; - padding: 1rem; - width: 320px; -` export const ScheduleMissionDialog = (props: IProps): JSX.Element => { const { TranslateText } = useLanguageContext() @@ -148,8 +129,7 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { }} variant="outlined" > - {' '} - {TranslateText('Cancel')}{' '} + {TranslateText('Cancel')} @@ -170,8 +150,7 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { }} variant="outlined" > - {' '} - {TranslateText('Cancel')}{' '} + {TranslateText('Cancel')} @@ -211,8 +190,7 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { }} variant="outlined" > - {' '} - {TranslateText('Cancel')}{' '} + {TranslateText('Cancel')} diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx index 466029b33..13d900ee1 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx @@ -141,91 +141,64 @@ export const StopRobotDialog = (): JSX.Element => { return ( <> - {!safeZoneStatus && ( - <> - - - - - - - {TranslateText('Send robots to safe zone') + '?'} - - - - - - {TranslateText('Send robots to safe zone long text')} - - - {TranslateText('Send robots to safe confirmation text')} - - - - - - - - - - - - )} - {safeZoneStatus && ( - <> - - + + + + + {TranslateText('Send robots to safe zone') + '?'} + + + + + + {!safeZoneStatus + ? TranslateText('Send robots to safe zone long text') + : TranslateText('Dismiss robots from safe zone') + '?'} + + + {!safeZoneStatus + ? TranslateText('Send robots to safe confirmation text') + : TranslateText('Dismiss robots from safe zone long text')} + + + + + + - - - - - - {TranslateText('Dismiss robots from safe zone') + '?'} - - - - - - - {TranslateText('Dismiss robots from safe zone long text')} - - - - - - - - - - - - )} + {!safeZoneStatus ? ( + + ) : ( + + )} + + + ) } diff --git a/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx b/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx index 975a746c8..4c84be349 100644 --- a/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx +++ b/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx @@ -8,6 +8,7 @@ import { CondensedMissionDefinition } from 'models/MissionDefinition' import { BackendAPICaller } from 'api/ApiCaller' import { Icons } from 'utils/icons' import { useRobotContext } from 'components/Contexts/RobotContext' +import { StyledAutoComplete, StyledDialog } from 'components/Styles/StyledComponents' interface IProps { missions: CondensedMissionDefinition[] @@ -26,26 +27,12 @@ const StyledMissionDialog = styled.div` display: flex; justify-content: space-between; ` -const StyledAutoComplete = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - padding: 8px; - gap: 25px; -` const StyledMissionSection = styled.div` display: flex; margin-left: auto; margin-right: 0; gap: 10px; ` -const StyledDialog = styled(Dialog)` - display: flex; - flex-direction: column; - padding: 1rem; - width: 420px; -` - const StyledDialogContent = styled.div` display: flex; flex-direction: column; diff --git a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionHeader/MissionDefinitionHeader.tsx b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionHeader/MissionDefinitionHeader.tsx index 58d6c1d28..bb28f7c5b 100644 --- a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionHeader/MissionDefinitionHeader.tsx +++ b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionHeader/MissionDefinitionHeader.tsx @@ -1,28 +1,16 @@ import { Typography } from '@equinor/eds-core-react' -import styled from 'styled-components' import { CondensedMissionDefinition } from 'models/MissionDefinition' - -const HeaderSection = styled.div` - display: flex; - flex-direction: column; - gap: 0.4rem; -` -const TitleSection = styled.div` - display: flex; - align-items: center; - gap: 10px; -` - +import { StyledDict } from '../MissionDefinitionStyledComponents' interface MissionDefinitionHeaderProps { missionDefinition: CondensedMissionDefinition } export function MissionDefinitionHeader({ missionDefinition }: MissionDefinitionHeaderProps) { return ( - - + + {missionDefinition.name} - - + + ) } diff --git a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx index 16bf72e3d..6e0f6c86a 100644 --- a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx +++ b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx @@ -1,102 +1,33 @@ import { ChangeEvent, useEffect, useState } from 'react' import { useNavigate, useParams } from 'react-router-dom' -import styled from 'styled-components' import { MissionDefinitionHeader } from './MissionDefinitionHeader/MissionDefinitionHeader' import { BackButton } from '../../../utils/BackButton' import { BackendAPICaller } from 'api/ApiCaller' -import { tokens } from '@equinor/eds-tokens' import { Header } from 'components/Header/Header' import { CondensedMissionDefinition, SourceType } from 'models/MissionDefinition' -import { Button, Typography, Card, Dialog, TextField, Icon } from '@equinor/eds-core-react' +import { Button, Typography, TextField, Icon } from '@equinor/eds-core-react' import { useLanguageContext } from 'components/Contexts/LanguageContext' import { MissionDefinitionUpdateForm } from 'models/MissionDefinitionUpdateForm' import { config } from 'config' import { SignalREventLabels, useSignalRContext } from 'components/Contexts/SignalRContext' import { Icons } from 'utils/icons' - -const StyledFormCard = styled(Card)` - display: flex; - justify-content: center; - padding: 8px; - gap: 25px; -` -const StyledButtonSection = styled.div` - display: flex; - margin-left: auto; - margin-right: 0; - gap: 10px; -` -const StyledFormContainer = styled.div` - display: grid; - grid-template-columns: [c1] 1fr [c2] 1fr [c3] 1fr; - grid-template-rows: [r1] auto [r1] auto [r1] auto; - align: left; - align-items: flex-start; - align-content: flex-start; - max-width: 1200px; - min-width: 600px; - gap: 10px 20px; -` -const StyledFormItem = styled.div` - width: 100%; - height: auto; - padding: 5px; - word-break: break-word; - hyphens: auto; - min-height: 60px; -` -const StyledDialog = styled(Dialog)` - display: flex; - justify-content: space-between; - padding: 1rem; - width: 620px; -` -const StyledMissionDefinitionPage = styled.div` - display: flex; - flex-wrap: wrap; - justify-content: start; - flex-direction: column; - gap: 1rem; - margin: 2rem; -` -const StyledButton = styled(Button)` - width: 260px; -` -const StyledInspectionFrequencyDiv = styled.div` - > * { - padding: 10px; - } -` -const StyledTitleComponent = styled.div` - display: flex; - align-items: center; - height: 37px; -` -const StyledEditButton = styled(Button)` - padding-left: 5px; - padding-top: 0px; - margin-top: 0px; -` -const StyledCard = styled(Card)` - display: flex; - padding: 8px; - height: 110px; -` +import { tokens } from '@equinor/eds-tokens' +import { StyledDict } from './MissionDefinitionStyledComponents' function MetadataItem({ title, content, onEdit }: { title: string; content: any; onEdit?: () => void }) { return ( - - - + + + {title} {onEdit && ( - + - + )} - + {content} - - + + ) } @@ -140,7 +71,7 @@ function MissionDefinitionPageBody({ missionDefinition, updateMissionDefinition return ( <> - + - - + navigate(`${config.FRONTEND_BASE_ROUTE}/mission/${missionDefinition.lastSuccessfulRun!.id}`) @@ -181,7 +112,7 @@ function MissionDefinitionPageBody({ missionDefinition, updateMissionDefinition > {TranslateText('View last run') + (missionDefinition.lastSuccessfulRun ? '' : ': ' + TranslateText('Not yet performed'))} - + {isEditDialogOpen && ( + - + ) case 'comment': return ( @@ -301,22 +232,20 @@ function MissionDefinitionEditDialog({ } return ( - - + + {TranslateText('Edit') + ' ' + TranslateText(fieldName)} {getFormItem()} - + - - - + + + ) } @@ -350,14 +279,14 @@ export function MissionDefinitionPage() { <>
{selectedMissionDefinition !== undefined && ( - + - + )} ) diff --git a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionStyledComponents.tsx b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionStyledComponents.tsx new file mode 100644 index 000000000..e555b2c77 --- /dev/null +++ b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionStyledComponents.tsx @@ -0,0 +1,89 @@ +import { Button, Card, Dialog } from '@equinor/eds-core-react' +import styled from 'styled-components' + +export const StyledDict = { + FormCard: styled(Card)` + display: flex; + justify-content: center; + padding: 8px; + gap: 25px; + `, + + ButtonSection: styled.div` + display: flex; + margin-left: auto; + gap: 10px; + `, + + FormContainer: styled.div` + display: grid; + grid-template-columns: [c1] 1fr [c2] 1fr [c3] 1fr; + grid-template-rows: [r1] auto [r1] auto [r1] auto; + align: left; + align-items: flex-start; + align-content: flex-start; + max-width: 1200px; + min-width: 600px; + gap: 10px 20px; + `, + + FormItem: styled.div` + width: 100%; + height: auto; + padding: 5px; + word-break: break-word; + hyphens: auto; + min-height: 60px; + `, + + Dialog: styled(Dialog)` + display: flex; + justify-content: space-between; + padding: 1rem; + width: 620px; + `, + + MissionDefinitionPage: styled.div` + display: flex; + flex-wrap: wrap; + justify-content: start; + flex-direction: column; + gap: 1rem; + margin: 2rem; + `, + + Button: styled(Button)` + width: 260px; + `, + + InspectionFrequencyDiv: styled.div` + padding: 10px; + `, + + TitleComponent: styled.div` + display: flex; + align-items: center; + height: 36px; + `, + + EditButton: styled(Button)` + padding-left: 5px; + `, + + Card: styled(Card)` + display: flex; + padding: 8px; + height: 110px; + `, + HeaderSection: styled.div` + display: flex; + flex-direction: column; + gap: 0.4rem; + `, + + TitleSection: styled.div` + display: flex; + align-items: center; + gap: 10px; + `, +} diff --git a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx index 840b73e86..c7344222d 100644 --- a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx +++ b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx @@ -121,7 +121,7 @@ export function MissionMapView({ mission }: MissionProps) { }, [updateMap, mapContext]) return ( - + diff --git a/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamCards.tsx b/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamCards.tsx index e41ebfeb5..077f98c16 100644 --- a/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamCards.tsx +++ b/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamCards.tsx @@ -86,7 +86,7 @@ export function VideoStreamCard({ videoStream, toggleFullScreenMode, setFullScre } return ( - +
{getVideoPlayer()}
{videoStream.name} diff --git a/frontend/src/components/Styles/StyledComponents.tsx b/frontend/src/components/Styles/StyledComponents.tsx new file mode 100644 index 000000000..664cd3dda --- /dev/null +++ b/frontend/src/components/Styles/StyledComponents.tsx @@ -0,0 +1,17 @@ +import { Dialog } from '@equinor/eds-core-react' +import styled from 'styled-components' + +export const StyledDialog = styled(Dialog)` + width: 420px; + padding: 10px; + display: flex; + flex-direction: column; +` +export const StyledAutoComplete = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + padding: 8px; + gap: 25px; + box-shadow: none; +`