added tons of files for component functionality; manual component adding added temporarily

src/device/DeviceActions.tsx

@@ -57,12 +57,14 @@ import ShareObject from "user/ShareObject";
 // import Connection from "./Connection";
 // import ObjectTeams from "teams/ObjectTeams";
 // import ArcGISDeviceData from "./ArcGISDeviceData";
-// import { DeviceAvailabilityMap, OffsetAvailabilityMap } from "pbHelpers/DeviceAvailability";
+import { DeviceAvailabilityMap, OffsetAvailabilityMap } from "pbHelpers/DeviceAvailability";
 import { amber, blue, green } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import { useNavigate } from "react-router-dom";
 import DeviceSettings from "device/DeviceSettings";
 import ObjectTeams from "teams/ObjectTeams";
+import ComponentSettings from "component/ComponentSettings";
+import LoadDeviceProfile from "./LoadDeviceProfile";
 
 const useStyles = makeStyles((_theme: Theme) => {
   // const isMobile = useMobile()
@@ -97,8 +99,8 @@ interface Props {
   // components: Component[];
   // interactions: Interaction[];
   refreshCallback: () => void;
-  // availablePositions: DeviceAvailabilityMap;
-  // availableOffsets: OffsetAvailabilityMap;
+  availablePositions: DeviceAvailabilityMap;
+  availableOffsets: OffsetAvailabilityMap;
   permissions: Array<pond.Permission>;
   preferences: pond.DevicePreferences;
   isLoading: boolean;
@@ -130,8 +132,8 @@ export default function DeviceActions(props: Props) {
     // components,
     // interactions,
     refreshCallback,
-    // availablePositions,
-    // availableOffsets,
+    availablePositions,
+    availableOffsets,
     permissions,
     preferences,
     isLoading,
@@ -384,7 +386,7 @@ export default function DeviceActions(props: Props) {
           // components={components}
           components={[]}
         />
-        {/* <ComponentSettings
+        <ComponentSettings
           mode="add"
           device={device}
           isDialogOpen={or(isAddComponentDialogOpen, false)}
@@ -394,7 +396,7 @@ export default function DeviceActions(props: Props) {
           refreshCallback={refreshCallback}
           canEdit={canWrite}
         />
-        <SyncDevice
+        {/* <SyncDevice
           device={device}
           isDialogOpen={or(isSyncDeviceDialogOpen, false)}
           closeDialogCallback={() => closeDialog("isSyncDeviceDialogOpen")}
@@ -447,12 +449,12 @@ export default function DeviceActions(props: Props) {
           tagIds={device.status.tagKeys}
           refreshCallback={refreshCallback}
         /> */}
-        {/* <LoadDeviceProfile
+        <LoadDeviceProfile
           isDialogOpen={isLoadDeviceProfileOpen}
           closeDialogCallback={() => closeDialog("isLoadDeviceProfileOpen")}
           device={device}
           refreshCallback={refreshCallback}
-        /> */}
+        />
         {/* <PauseData
           id={device.id()}
           isOpen={isPauseDialogOpen}

src/device/LoadDeviceProfile.tsx

@@ -0,0 +1,162 @@
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Theme,
+  Typography
+} from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import ResponsiveDialog from "common/ResponsiveDialog";
+import SearchSelect, { Option } from "common/SearchSelect";
+import { useBackpackAPI, useDeviceAPI, usePrevious, useSnackbar } from "hooks";
+import { Backpack, Device } from "models";
+import { backpackOptions } from "pbHelpers/Backpack";
+import React, { useCallback, useEffect, useState } from "react";
+
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
+    contentSpacing: {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1)
+    }
+  });
+});
+
+interface Props {
+  isDialogOpen: boolean;
+  closeDialogCallback: Function;
+  refreshCallback: Function;
+  device: Device;
+}
+
+export default function LoadDeviceProfile(props: Props) {
+  const classes = useStyles();
+  const { isDialogOpen, closeDialogCallback, refreshCallback, device } = props;
+  const { success, error } = useSnackbar();
+  const prevIsDialogOpen = usePrevious(isDialogOpen);
+  const backpackAPI = useBackpackAPI();
+  const deviceAPI = useDeviceAPI();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [backpack, setBackpack] = useState<Backpack | undefined>(undefined);
+  const [backpacks, setBackpacks] = useState<Backpack[]>([]);
+
+  const setDefaultState = () => {
+    setBackpacks([]);
+    setBackpack(undefined);
+  };
+
+  const load = useCallback(() => {
+    setLoading(true);
+
+    backpackAPI
+      .listBackpacks()
+      .then((response: any) => {
+        const rawBackpacks = response.data.backpacks;
+        const rBackpacks: Backpack[] = [];
+        if (rawBackpacks && rawBackpacks.length > 0) {
+          rawBackpacks.forEach((b: any) => {
+            rBackpacks.push(Backpack.any(b));
+          });
+        }
+        setBackpacks(rBackpacks);
+        setBackpack(undefined);
+      })
+      .catch((err: any) => {
+        setDefaultState();
+        error(err ? err : "Error occured while loading device profiles");
+      })
+      .finally(() => setLoading(false));
+  }, [backpackAPI, error]);
+
+  useEffect(() => {
+    if (prevIsDialogOpen !== isDialogOpen && isDialogOpen === true) {
+      load();
+    }
+  }, [isDialogOpen, load, prevIsDialogOpen]);
+
+  const close = () => {
+    closeDialogCallback();
+    setDefaultState();
+  };
+
+  const submit = () => {
+    const deviceName = device.name();
+    const backpackName = backpack ? backpack.name() : "Unknown";
+    const backpackID = backpack ? backpack.id() : 0;
+    deviceAPI
+      .loadBackpack(device.id(), backpackID)
+      .then((_response: any) => {
+        success("Successfully loaded " + backpackName + " onto " + deviceName + "!");
+        refreshCallback();
+      })
+      .catch(() => {
+        error("Error occured while loading " + backpackName + " onto " + deviceName);
+      })
+      .finally(() => close());
+  };
+
+  const changeBackpack = (option: Option | null) => {
+    const selectedBackpack = option
+      ? backpacks.find(backpack => {
+          return backpack.id() === (option.value as number);
+        })
+      : undefined;
+
+    setBackpack(selectedBackpack);
+  };
+
+  const isFormValid = (): boolean => {
+    const isDeviceValid = device && device.id() > 0;
+    const isBackpackValid = backpack !== undefined;
+    return isBackpackValid && isDeviceValid;
+  };
+
+  // UI Begins
+
+  const content = () => {
+    const selectedBackpack = backpack
+      ? ({ label: backpack.name(), value: backpack.id() } as Option)
+      : undefined;
+    return (
+      <SearchSelect
+        label="Select a profile to load"
+        selected={selectedBackpack}
+        options={backpackOptions(backpacks)}
+        changeSelection={option => changeBackpack(option)}
+        loading={loading}
+      />
+    );
+  };
+
+  const actions = () => {
+    return (
+      <React.Fragment>
+        <Button size="small" color="primary" onClick={close}>
+          Cancel
+        </Button>
+        <Button size="small" disabled={!isFormValid()} color="primary" onClick={submit}>
+          Submit
+        </Button>
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <ResponsiveDialog
+      open={isDialogOpen}
+      onClose={close}
+      aria-labelledby="load-device-profile"
+      maxWidth="sm"
+      fullWidth>
+      <DialogTitle id="load-device-profile-title">
+        Load Device Profile
+        <Typography variant="body2" color="textSecondary">
+          {device.name()}
+        </Typography>
+      </DialogTitle>
+      <DialogContent className={classes.contentSpacing}>{content()}</DialogContent>
+      <DialogActions>{actions()}</DialogActions>
+    </ResponsiveDialog>
+  );
+}