393 lines
No EOL
12 KiB
TypeScript
393 lines
No EOL
12 KiB
TypeScript
import { Box, Button, FormControl, Grid2 as Grid, MenuItem, Select, Tab, Tabs, TextField, Typography, useTheme } from "@mui/material";
|
|
import PageContainer from "./PageContainer";
|
|
import { pond } from "protobuf-ts/pond";
|
|
import LogsDisplay from "common/LogsDisplay";
|
|
import { useEffect, useState } from "react";
|
|
import { useDeviceAPI, useSnackbar } from "hooks";
|
|
import { useLocation, useParams } from "react-router-dom";
|
|
import { Component, Device, Interaction } from "models";
|
|
import { getContextKeys, getContextTypes } from "pbHelpers/Context";
|
|
import SmartBreadcrumb from "common/SmartBreadcrumb";
|
|
import { DevicePageData } from "./Device";
|
|
import AddComponentManualDialog from "component/AddComponentManualDialog";
|
|
import { useGlobalState } from "providers";
|
|
import DeviceActions from "device/DeviceActions";
|
|
import { cloneDeep } from "lodash";
|
|
import { FindAvailablePositions } from "pbHelpers/DeviceAvailability";
|
|
import LoadingScreen from "app/LoadingScreen";
|
|
import DeviceOverview from "device/DeviceOverview";
|
|
|
|
interface TabPanelProps {
|
|
children?: React.ReactNode;
|
|
index: any;
|
|
value: any;
|
|
}
|
|
|
|
function TabPanelMine(props: TabPanelProps) {
|
|
const { children, value, index, ...other } = props;
|
|
|
|
return (
|
|
<div
|
|
role="tabpanel"
|
|
hidden={value !== index}
|
|
aria-labelledby={`simple-tab-${index}`}
|
|
{...other}>
|
|
{value === index && <>{children}</>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function DeviceSupport() {
|
|
const deviceID = +(useParams<{ deviceID: string }>()?.deviceID ?? "0");
|
|
|
|
const deviceAPI = useDeviceAPI()
|
|
const snackbar = useSnackbar()
|
|
const theme = useTheme()
|
|
|
|
const { state } = useLocation();
|
|
const [{ user, as }] = useGlobalState()
|
|
const [device, setDevice] = useState<Device>(Device.create())
|
|
const [devicePageData, setDevicePageData] = useState<DevicePageData>(state?.devicePageData ? state.devicePageData : undefined)
|
|
const [tabNumber, setTabNumber] = useState(0)
|
|
const [newCap, setNewCap] = useState(0);
|
|
const [datacap, setDatacap] = useState<number>();
|
|
const [isOver, setIsOver] = useState(undefined);
|
|
const [pauseCheck, setPauseCheck] = useState(undefined);
|
|
const [inputFirmware, setInputFirmware] = useState<string>("");
|
|
const [platform, setPlatform] = useState<pond.DevicePlatform>(
|
|
pond.DevicePlatform.DEVICE_PLATFORM_INVALID
|
|
);
|
|
const [addComponentManualDialogOpen, setAddComponentManualDialogOpen] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
// useEffect(() => {
|
|
// if (state?.device) return
|
|
// deviceAPI.get(deviceID, undefined, getContextKeys(), getContextTypes()).then(resp => {
|
|
// setDevice(Device.create(resp.data))
|
|
// })
|
|
// }, [deviceID, state?.device])
|
|
|
|
useEffect(() => {
|
|
if (state?.devicePageData) {
|
|
setDevice(Device.create(state?.devicePageData.device))
|
|
return
|
|
}
|
|
setLoading(true)
|
|
deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes()).then(resp => {
|
|
setDevice(resp.data?.device ? Device.create(resp.data?.device) : Device.create())
|
|
setDevicePageData({
|
|
device: resp.data.device ? Device.create(resp.data.device) : Device.create(),
|
|
components: resp.data.components.map(comp => Component.create(comp)),
|
|
interactions: resp.data.interactions.map(interaction => Interaction.create(interaction)),
|
|
permissions: resp.data.permissions,
|
|
preferences: resp.data.user?.preferences as pond.DevicePreferences
|
|
})
|
|
}).finally(() => {
|
|
setLoading(false)
|
|
})
|
|
}, [deviceID, state?.devicePageData])
|
|
|
|
const handleChange = (_event: React.ChangeEvent<{}>, newValue: number) => {
|
|
setTabNumber(newValue);
|
|
};
|
|
|
|
const resetQuackCount = () => {
|
|
deviceAPI.resetQuackCount(device.id()).then(resp => console.log(resp));
|
|
};
|
|
|
|
const resetQuackCountTx = () => {
|
|
deviceAPI.resetQuackCountTx(device.id()).then(resp => console.log(resp));
|
|
};
|
|
|
|
const resetQuackCountTx1000 = () => {
|
|
deviceAPI.resetQuackCountTx1000(device.id()).then(resp => console.log(resp));
|
|
};
|
|
|
|
const clearPending = () => {
|
|
deviceAPI.clearPending(device.id()).then(resp => {
|
|
console.log(resp);
|
|
});
|
|
};
|
|
|
|
const setFirmwareVersion = (firmwareVersion: string) => {
|
|
let status = device.status;
|
|
status.firmwareVersion = firmwareVersion;
|
|
deviceAPI.updateStatus(device.id(), status).then(() => {
|
|
snackbar.info("Firmware version set to " + firmwareVersion);
|
|
});
|
|
};
|
|
|
|
const updateDevicePlatform = (firmwareVersion: pond.DevicePlatform) => {
|
|
let settings = device.settings;
|
|
settings.platform = firmwareVersion;
|
|
deviceAPI.update(device.id(), settings).then(() => {
|
|
snackbar.info("Platform set to " + firmwareVersion.toString());
|
|
});
|
|
};
|
|
|
|
const getDatacap = () => {
|
|
deviceAPI.getDatacap(device.id()).then(resp => {
|
|
//console.log(resp);
|
|
setDatacap(resp.data.overlimit);
|
|
});
|
|
};
|
|
|
|
const updateDatacap = () => {
|
|
deviceAPI.setDatacap(device.id(), newCap).then(resp => {
|
|
console.log(resp);
|
|
});
|
|
};
|
|
|
|
const checkLimit = () => {
|
|
deviceAPI.isOverLimit(device.id()).then(resp => {
|
|
//console.log(resp);
|
|
setIsOver(resp.data);
|
|
});
|
|
};
|
|
|
|
const checkIfPaused = () => {
|
|
deviceAPI.isPaused(device.id()).then(resp => {
|
|
//console.log(resp);
|
|
setPauseCheck(resp.data);
|
|
});
|
|
};
|
|
|
|
const pauseDevice = () => {
|
|
deviceAPI.pause(device.id()).then(resp => {
|
|
console.log(resp);
|
|
});
|
|
};
|
|
|
|
const resumeDevice = () => {
|
|
deviceAPI.resume(device.id()).then(resp => {
|
|
console.log(resp);
|
|
});
|
|
};
|
|
|
|
const toggleNotificationPreference = () => {
|
|
let updatedPreferences = cloneDeep(devicePageData.preferences);
|
|
updatedPreferences.notify = !devicePageData.preferences.notify;
|
|
let updatedDevicePageData = cloneDeep(devicePageData)
|
|
updatedDevicePageData.preferences = updatedPreferences
|
|
deviceAPI
|
|
.updatePreferences(deviceID, updatedPreferences, getContextKeys(), getContextTypes(), as)
|
|
.then(() => setDevicePageData(updatedDevicePageData))
|
|
.catch(() => {
|
|
snackbar.error(
|
|
"Error occured while " +
|
|
(devicePageData.preferences.notify ? "enabling" : "disabling") +
|
|
" notifications"
|
|
);
|
|
});
|
|
};
|
|
|
|
if (!devicePageData) {
|
|
return (
|
|
<LoadingScreen message="Getting device data"/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<PageContainer>
|
|
<Grid container justifyContent={"space-between"}>
|
|
<Grid>
|
|
<SmartBreadcrumb deviceName={device.name()} state={{devicePageData: devicePageData}} />
|
|
</Grid>
|
|
<Grid>
|
|
<DeviceActions
|
|
device={device}
|
|
isPaused={false}
|
|
isLoading={loading}
|
|
permissions={devicePageData.permissions}
|
|
preferences={devicePageData.preferences}
|
|
toggleNotificationPreference={toggleNotificationPreference}
|
|
refreshCallback={() => {}}
|
|
availablePositions={FindAvailablePositions(devicePageData.components, device.settings.product).availability}
|
|
availableOffsets={new Map()}
|
|
components={[...devicePageData.components.map(comp => Component.any(comp))]}
|
|
interactions={devicePageData.interactions.map(inter => Interaction.any(inter))}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
{/* <SmartBreadcrumb deviceName={device.name()} state={{devicePageData: devicePageData}} /> */}
|
|
<DeviceOverview device={device} components={devicePageData.components}/>
|
|
<br/>
|
|
<Tabs
|
|
style={{ position: "sticky" }}
|
|
value={tabNumber}
|
|
onChange={handleChange}
|
|
centered
|
|
TabIndicatorProps={{ style: { background: "rgba(255,255,0,255)" } }}>
|
|
<Tab label="Control Center" />
|
|
<Tab label="Hologram" />
|
|
<Tab label="DataDog" />
|
|
<Tab label="DuckData" />
|
|
</Tabs>
|
|
<TabPanelMine value={tabNumber} index={0}>
|
|
<Box>
|
|
<Typography gutterBottom variant="h5">
|
|
General Options:
|
|
</Typography>
|
|
<Grid container direction="row">
|
|
<Grid>
|
|
<Button color="primary" onClick={resetQuackCount}>
|
|
Reset Count Rx (safe, use when quack count errors)
|
|
</Button>
|
|
<Button color="primary" onClick={resetQuackCountTx}>
|
|
Reset Count Tx, Are you sure (ONLY use when device not responding)
|
|
</Button>
|
|
<Button color="primary" onClick={resetQuackCountTx1000}>
|
|
Reset Count Tx - 1000, Are you sure (ONLY use when device not responding)
|
|
</Button>
|
|
</Grid>
|
|
|
|
<Grid>
|
|
<Button color="primary" onClick={clearPending}>
|
|
Clear Pending
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid>
|
|
<AddComponentManualDialog
|
|
device={device.id()}
|
|
open={addComponentManualDialogOpen}
|
|
onClose={() => setAddComponentManualDialogOpen(false)}
|
|
/>
|
|
{user.hasFeature("developer") === true &&
|
|
<Button onClick={() => setAddComponentManualDialogOpen(true)}>
|
|
Manual Comp
|
|
</Button>
|
|
}
|
|
</Grid>
|
|
<Grid container direction="row">
|
|
<Grid>
|
|
<TextField
|
|
value={inputFirmware}
|
|
onChange={e => setInputFirmware(e.currentTarget.value)}
|
|
/>
|
|
<Button color="primary" onClick={() => setFirmwareVersion(inputFirmware)}>
|
|
Set Firmware
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container direction="row">
|
|
<Grid>
|
|
<FormControl>
|
|
<Select
|
|
labelId="demo-simple-select-label"
|
|
id="demo-simple-select"
|
|
value={platform}
|
|
label="Platform"
|
|
onChange={(event: any) => setPlatform(event.target.value)}>
|
|
<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_PHOTON}>Photon</MenuItem>
|
|
<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_ELECTRON}>
|
|
Electron
|
|
</MenuItem>
|
|
<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR}>
|
|
V2 Cellular
|
|
</MenuItem>
|
|
<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_S3}>
|
|
V2 Wifi S3
|
|
</MenuItem>
|
|
<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLACK}>
|
|
V2 Cellular Black
|
|
</MenuItem>
|
|
<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_GREEN}>
|
|
V2 Cellular Green
|
|
</MenuItem>
|
|
<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_BLUE}>
|
|
V2 Wifi Blue
|
|
</MenuItem>
|
|
<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLUE}>
|
|
V2 Cellular Blue
|
|
</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<Button color="primary" onClick={() => updateDevicePlatform(platform)}>
|
|
Set Platform
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
<Box marginTop={theme.spacing(0.5)}>
|
|
<Typography gutterBottom variant="h5">
|
|
OPI Cable Functions:
|
|
</Typography>
|
|
<Grid container direction="row">
|
|
<Grid>
|
|
<Button color="primary">Cable Reprogrammer</Button>
|
|
</Grid>
|
|
<Grid>
|
|
<Button color="primary">Cable Diagnostic</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</TabPanelMine>
|
|
<TabPanelMine value={tabNumber} index={1}>
|
|
<Grid container direction="column">
|
|
<Grid container direction="row">
|
|
<Grid>
|
|
<TextField
|
|
type="number"
|
|
value={newCap}
|
|
onChange={e => setNewCap(+e.target.value)}
|
|
/>
|
|
</Grid>
|
|
<Grid>
|
|
<Button onClick={updateDatacap} color="primary">
|
|
Set New Datacap
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container direction="row" alignItems="center">
|
|
<Grid>
|
|
<Button onClick={getDatacap} color="primary">
|
|
DataCap
|
|
</Button>
|
|
</Grid>
|
|
<Grid>
|
|
<Box margin={3}>{datacap && datacap / 1000 / 1000}Mb</Box>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container direction="row" alignItems="center">
|
|
<Grid>
|
|
<Button onClick={checkLimit} color="primary">
|
|
OverLimit
|
|
</Button>
|
|
</Grid>
|
|
<Grid>
|
|
<Box margin={3}>
|
|
{isOver === undefined ? "Click to Check" : isOver ? "Over Limit" : "Under Limit"}
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container direction="row" alignItems="center">
|
|
<Grid>
|
|
<Button onClick={checkIfPaused} color="primary">
|
|
Am I Paused
|
|
</Button>
|
|
</Grid>
|
|
<Grid>
|
|
<Box margin={3}>
|
|
{pauseCheck === undefined ? "Click to Check" : pauseCheck ? "Paused" : "Running"}
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
<Button onClick={pauseDevice} color="primary">
|
|
Pause Me
|
|
</Button>
|
|
<Button onClick={resumeDevice} color="primary">
|
|
Get Me Goin
|
|
</Button>
|
|
</TabPanelMine>
|
|
<TabPanelMine value={tabNumber} index={2}>
|
|
<LogsDisplay deviceID={deviceID} />
|
|
</TabPanelMine>
|
|
<TabPanelMine value={tabNumber} index={3}>
|
|
History Not imported yet
|
|
{/* <CompleteHistory device={device} /> */}
|
|
</TabPanelMine>
|
|
</PageContainer>
|
|
)
|
|
} |