flotilla/frontend/src/pages/MissionSchedulingComponents/InspectionAreaCards.tsx at 82090b9af2c83a8a4dc576d46c0e138dffb5415e · nicholasdalhaug/flotilla · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import { InspectionArea } from 'models/InspectionArea'
import { useLanguageContext } from 'components/Contexts/LanguageContext'
import {
    CardComponent,
    Content,
    InspectionAreaText,
    StyledCard,
    StyledInspectionAreaCard,
    TopInspectionAreaText,
} from './InspectionUtilities'
import { Button, Icon, Tooltip, Typography } from '@equinor/eds-core-react'
import { Icons } from 'utils/icons'
import { tokens } from '@equinor/eds-tokens'
import { useAssetContext } from 'components/Contexts/AssetContext'

interface InspectionAreaCardProps {
    inspectionArea: InspectionArea
    nMissions: number
    onClickInspectionArea: (inspectionArea: InspectionArea) => void
    isSelected: boolean
    isMissionOngoing: boolean
    onClickScheduleAll: (inspectionArea: InspectionArea) => void
}

export const InspectionAreaCard = ({
    inspectionArea,
    nMissions,
    onClickInspectionArea,
    isSelected,
    isMissionOngoing,
    onClickScheduleAll,
}: InspectionAreaCardProps) => {
    const { TranslateText } = useLanguageContext()
    const { enabledRobots } = useAssetContext()

    const isScheduleMissionsDisabled = enabledRobots.length === 0 || nMissions === 0

    let queueMissionsTooltip = ''
    if (nMissions === 0) queueMissionsTooltip = TranslateText('No available mission')
    else if (isScheduleMissionsDisabled) queueMissionsTooltip = TranslateText('No robot available')

    return (
        <StyledInspectionAreaCard key={inspectionArea.inspectionAreaName}>
            <StyledCard
                key={inspectionArea.inspectionAreaName}
                onClick={() => onClickInspectionArea(inspectionArea)}
                style={isSelected ? { border: `solid ${tokens.colors.interactive.focus.hex} 1px` } : {}}
            >
                <InspectionAreaText>
                    <TopInspectionAreaText>
                        <Typography variant={'body_short_bold'}>
                            {inspectionArea.inspectionAreaName.toString()}
                        </Typography>
                        {isMissionOngoing && (
                            <Content>
                                <Icon name={Icons.Ongoing} size={16} />
                                {TranslateText('InProgress')}
                            </Content>
                        )}
                    </TopInspectionAreaText>
                    <Typography color={tokens.colors.text.static_icons__secondary.hex}>
                        {nMissions}{' '}
                        {nMissions === 1
                            ? TranslateText('Mission').toLowerCase()
                            : TranslateText('Missions').toLowerCase()}
                    </Typography>
                </InspectionAreaText>
                <CardComponent>
                    <Tooltip placement="top" title={queueMissionsTooltip}>
                        <Button
                            disabled={isScheduleMissionsDisabled}
                            variant="ghost"
                            onClick={() => onClickScheduleAll(inspectionArea)}
                            color="secondary"
                        >
                            <Icon name={Icons.Add} color={nMissions > 0 ? '' : 'grey'} />
                            <Typography color={tokens.colors.text.static_icons__secondary.hex}>
                                {TranslateText('Queue the missions')}
                            </Typography>
                        </Button>
                    </Tooltip>
                </CardComponent>
            </StyledCard>
        </StyledInspectionAreaCard>
    )
}