Filter out return to home from history

Author: Eddasol

frontend/src/components/Contexts/MissionFilterContext.tsx

@@ -11,6 +11,7 @@ interface IMissionFilterContext {
     filterError: string
     clearFilterError: () => void
     filterState: {
+        excludeReturnToHome: boolean | undefined
         missionName: string | undefined
         statuses: MissionStatusFilterOptions[] | undefined
         robotName: string | undefined
@@ -22,6 +23,7 @@ interface IMissionFilterContext {
         maxEndTime: number | undefined
     }
     filterFunctions: {
+        switchExcludeReturnToHome: (newExcludeReturnToHome: boolean | undefined) => void
         switchMissionName: (newMissionName: string | undefined) => void
         switchStatuses: (newStatuses: MissionStatusFilterOptions[]) => void
         switchRobotName: (newRobotName: string | undefined) => void
@@ -58,6 +60,7 @@ const defaultMissionFilterInterface: IMissionFilterContext = {
     filterError: '',
     clearFilterError: () => {},
     filterState: {
+        excludeReturnToHome: true,
         missionName: undefined,
         statuses: [],
         robotName: undefined,
@@ -69,6 +72,7 @@ const defaultMissionFilterInterface: IMissionFilterContext = {
         maxEndTime: undefined,
     },
     filterFunctions: {
+        switchExcludeReturnToHome: () => {},
         switchMissionName: () => {},
         switchStatuses: () => {},
         switchRobotName: () => {},
@@ -113,6 +117,10 @@ export const MissionFilterProvider: FC<Props> = ({ children }) => {
 
     const filterFunctions = useMemo(
         () => ({
+            switchExcludeReturnToHome: (newExcludeReturnToHome: boolean | undefined) => {
+                setFilterIsSet(true)
+                setFilterState({ ...filterState, excludeReturnToHome: newExcludeReturnToHome })
+            },
             switchMissionName: (newMissionName: string | undefined) => {
                 setFilterIsSet(true)
                 setFilterState({ ...filterState, missionName: newMissionName })

frontend/src/components/Pages/MissionHistoryPage/FilterSection.tsx

@@ -2,6 +2,7 @@ import {
     Autocomplete,
     AutocompleteChanges,
     Button,
+    Checkbox,
     Dialog,
     Icon,
     Search,
@@ -108,6 +109,13 @@ export const FilterSection = () => {
                             <Icon name={Icons.Clear} size={32} />
                         </Button>
                     </Dialog.Header>
+                    <Checkbox
+                        label={TranslateText('Only show inspection missions')}
+                        defaultChecked={filterState.excludeReturnToHome}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                            filterFunctions.switchExcludeReturnToHome(e.target.checked)
+                        }}
+                    />
                     <Autocomplete
                         options={Array.from(missionStatusTranslationMap.keys())}
                         onOptionsChange={(changes: AutocompleteChanges<string>) => {

frontend/src/components/Pages/MissionHistoryPage/MissionHistoryView.tsx

@@ -138,9 +138,11 @@ export const MissionHistoryView = ({ refreshInterval }: RefreshProps) => {
 
     const toDisplayValue = (
         filterName: string,
-        value: string | number | MissionStatusFilterOptions[] | InspectionType[]
+        value: boolean | string | number | MissionStatusFilterOptions[] | InspectionType[]
     ) => {
-        if (typeof value === 'string') {
+        if (typeof value === 'boolean') {
+            return ''
+        } else if (typeof value === 'string') {
             return value
         } else if (typeof value === 'number') {
             // We currently assume these are dates. We may want
@@ -233,6 +235,29 @@ export const MissionHistoryView = ({ refreshInterval }: RefreshProps) => {
         switchPage(newPage)
     }
 
+    const ActiveFilterContent = () => {
+        return flatten(filterState)
+            .filter((filter) => !filterFunctions.isSet(filter.name, filter.value))
+            .map((filter) => {
+                const valueToDisplay = toDisplayValue(filter.name, filter.value!)
+                const filterName = valueToDisplay ? `${TranslateText(filter.name)}: ` : TranslateText(filter.name)
+                return (
+                    <Chip
+                        style={{
+                            backgroundColor: checkBoxWhiteBackgroundColor,
+                            borderColor: checkBoxBorderColour,
+                            height: '2rem',
+                            paddingLeft: '10px',
+                        }}
+                        key={filter.name}
+                        onDelete={() => filterFunctions.removeFilter(filter.name)}
+                    >
+                        {filterName} {valueToDisplay}
+                    </Chip>
+                )
+            })
+    }
+
     return (
         <TableWithHeader>
             <Typography variant="h1">{TranslateText('Mission History')}</Typography>
@@ -244,22 +269,7 @@ export const MissionHistoryView = ({ refreshInterval }: RefreshProps) => {
                         {':'}
                     </Typography>
                     <ActiveFilterList>
-                        {flatten(filterState)
-                            .filter((filter) => !filterFunctions.isSet(filter.name, filter.value))
-                            .map((filter) => (
-                                <Chip
-                                    style={{
-                                        backgroundColor: checkBoxWhiteBackgroundColor,
-                                        borderColor: checkBoxBorderColour,
-                                        height: '2rem',
-                                        paddingLeft: '10px',
-                                    }}
-                                    key={filter.name}
-                                    onDelete={() => filterFunctions.removeFilter(filter.name)}
-                                >
-                                    {TranslateText(filter.name)}: {toDisplayValue(filter.name, filter.value!)}
-                                </Chip>
-                            ))}
+                        <ActiveFilterContent />
                     </ActiveFilterList>
                 </StyledActiveFilterList>
             )}

frontend/src/language/en.json

@@ -90,6 +90,7 @@
     "Search for a robot name": "Search for a robot name",
     "Filter": "Filter",
     "Clear all filters": "Clear all filters",
+    "Only show inspection missions": "Only show inspection missions",
     "Mission status": "Mission status",
     "Inspection type": "Inspection type",
     "Select min start time": "Select min start time",
@@ -100,6 +101,7 @@
     "This button is disabled because the robot is not available. Check that the robot is on, and are not doing any other activities.": "This button is disabled because the robot is not available. Check that the robot is on, and are not doing any other activities.",
     "Close": "Close",
     "Localizing": "Localizing",
+    "excludeReturnToHome": "Only inspection missions",
     "statuses": "Statuses",
     "tagId": "Tag ID",
     "robotName": "Robot name",

frontend/src/language/no.json

@@ -90,6 +90,7 @@
     "Search for a robot name": "Søk etter robotnavn",
     "Filter": "Filter",
     "Clear all filters": "Fjern alle filtre",
+    "Only show inspection missions": "Vis kun inspeksjonsoppdrag",
     "Mission status": "Oppdragsstatus",
     "Inspection type": "Inspeksjonstype",
     "Select min start time": "Velg min starttid",
@@ -100,6 +101,7 @@
     "This button is disabled because the robot is not available. Check that the robot is on, and are not doing any other activities.": "Denne knappen er deaktivert fordi roboten ikke er tilgjengelig. Sjekk at roboten er på og ikke gjør noen andre aktiviteter.",
     "Close": "Lukk",
     "Localizing": "Lokaliserer",
+    "excludeReturnToHome": "Kun inspections oppdrag",
     "statuses": "Statuser",
     "tagId": "Tag ID",
     "robotName": "Robotnavn",