brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

made the react components to display the card for scanned components

Browse source
This commit is contained in:
csawatzky 2025-06-26 13:20:10 -06:00
parent f5bc230fb6
commit 751b39d345
14 changed files with 311 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/pages/Device.tsx
View file

@ -1,4 +1,4 @@
import { Button, Divider, List, ListItem, Typography } from "@mui/material";
import { Button, Card, Divider, List, ListItem, Typography } from "@mui/material";
import Grid from '@mui/material/Grid2';
import { Component, Device, Interaction, User } from "models";
import { getContextKeys, getContextTypes } from "pbHelpers/Context";
@ -20,6 +20,7 @@ import { isController } from "pbHelpers/ComponentType";
import { or } from "utils";
import ComponentDiagnostics from "component/ComponentDiagnostics";
import DeviceWizard from "device/DeviceWizard";
import DeviceScannedComponents from "device/autoDetect/DeviceScannedComponents";
export interface DevicePageData {
device: Device;
@ -56,6 +57,7 @@ export default function DevicePage() {
const [components, setComponents] = useState<Map<string, Component>>(new Map());
const [diagnosticComponents, setDiagnosticComponents] = useState<Component[]>([]);
const [scannedAddresses, setScannedAddresses] = useState<pond.ComponentAddressMap | undefined>(undefined)
// const [components, setComponents] = useState<Component[]>([]);
const [addComponentManualDialogOpen, setAddComponentManualDialogOpen] = useState(false)
@ -162,8 +164,19 @@ export default function DevicePage() {
.finally(() => setLoading(false));
}
const loadPortScan = () => {
deviceAPI.listFoundComponents(device.id())
.then(resp => {
setScannedAddresses(resp.data.foundComponents ?? undefined)
})
.catch(err => {
console.log(err)
})
}
useEffect(() => {
loadDevice()
loadPortScan()
}, [deviceID, as])
const toggleNotificationPreference = () => {
@ -404,7 +417,7 @@ export default function DevicePage() {
</>
) : (
<>
<Grid size={{ xs: 6, sm: 6, lg: 4, xl: 3 }} >
<Grid size={{ xs: 6, sm: 6, lg: 4, xl: 4 }} >
<DeviceWizard
device={device}
//permissions={permissions}
@ -412,10 +425,16 @@ export default function DevicePage() {
refreshCallback={loadDevice}
/>
</Grid>
<Grid size={{ xs: 6, sm: 6, lg: 8, xl: 9 }} >
<Grid container direction="row" spacing={2}>
{scannedAddresses &&
<Grid size={{ xs: 6, sm: 6, lg: 4, xl: 4 }}>
<DeviceScannedComponents scannedComponents={scannedAddresses} device={device}/>
</Grid>
}
{diagnosticComponents.length > 0 &&
<Grid size={{ xs: 6, sm: 6, lg: 4, xl: 4 }}>
<Grid container direction="row" spacing={2} width={"100%"}>
{diagnosticComponents.map(comp => (
<Grid size={{ sm: 12, lg: 6, xl: 4 }} key={comp.key()}>
<Grid size={12} key={comp.key()}>
<ComponentDiagnostics
component={comp}
device={device}
@ -425,6 +444,7 @@ export default function DevicePage() {
))}
</Grid>
</Grid>
}
</>
)}
</Grid>