Scribd
Upload
12 views9 pages

Device Management Overview

The document is a React component called 'AllDevices' that manages and displays a list of devices categorized by type (Scanners, Printers, RFID Devices, Barcode Readers). It includes functionality for fetching device data, connecting/disconnecting devices, and opening configuration or deletion modals. The component also implements pagination for device display and dropdown menus for device actions.

Uploaded by

HYPER Rishabh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views9 pages

Device Management Overview

The document is a React component called 'AllDevices' that manages and displays a list of devices categorized by type (Scanners, Printers, RFID Devices, Barcode Readers). It includes functionality for fetching device data, connecting/disconnecting devices, and opening configuration or deletion modals. The component also implements pagination for device display and dropdown menus for device actions.

Uploaded by

HYPER Rishabh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import React, { useState ,useEffect } from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';


import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
import { fetchalldevices ,handleDeleteDevice ,ConnectDisconnectDevice} from
'../../../../services/api/integrationapi';
import ConfigModal from './ConfigModal';
import DeleteModal from './DeleteModal';
import { tokens } from
"../../../../nct_frontend_common_components/src/theme/Theme";
import { useTheme } from '@mui/material';
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';

const AllDevices = () => {


const theme = useTheme();
const colors = tokens([Link]);
const isLightMode = [Link] === 'light';
const [dropdown, setDropdown] = useState(null);
const [isOpen, setIsOpen] = useState(false);
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
const [currentIndex, setCurrentIndex] = useState(0);
const [devices, setDevices] = useState([]);
const [deviceToDelete, setDeviceToDelete] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchDevices = async () => {
try {
const allDevices = await fetchalldevices();
[Link]("API response of BARCODE READER", [Link]);

setDevices([Link]);
[Link]("this is the all devices",[Link]);
} catch (error) {
[Link]("Failed to fetch devices:", error);
setDevices([]);
}
};

fetchDevices();
}, []);

const handlePrevious = () => {


if (currentIndex > 0) {
setCurrentIndex(currentIndex - 1);
}
};

const handleNext = () => {


if (currentIndex + 4 < [Link]) {
setCurrentIndex(currentIndex + 1);
}
};

const toggleDropdown = (index) => {


setDropdown(index === dropdown ? null : index);
};
const HandleModalopen = () => {
setIsOpen(true);
};
const HandleModalclose = () => {
setIsOpen(false);
};
const deletemodalopen = (deviceId) => {
setDeviceToDelete(deviceId);
setDeleteModalOpen(true);
};
const deletemodalclose = () => {
setDeleteModalOpen(false);
};

const handleConnectDisconnect = async (deviceId) => {


try {
await ConnectDisconnectDevice(deviceId);
[Link](`Device ${deviceId} connected/disconnected successfully.`);
} catch (error) {
[Link](`Error connecting/disconnecting device ${deviceId}:`, error);
}
};
// Filter devices based on type
const scanners = [Link](device => [Link] === 'SCANNER');
[Link]("Scanner device found:", scanners);
const printers = [Link](device => [Link] === 'PRINTER');
const rfidDevices = [Link](device => [Link] === 'RFID DEVICE');
const barcodeReaders = [Link](device => [Link] === 'BARCODE
READER');

return (
<div className="all-devices-container" style={{height:'70vh',
overflowY:'scroll',padding:'20px'}}>
{/* Scanner Section */}
<div className="device-section">
<h2
style={{fontSize:'1.5rem',marginBottom:'10px',marginTop:'10px'}}>Scanners</h2>
<div className="relative flex items-center">
{/* Backward Button */}
{currentIndex > 0 && (
<button
type="button"
onClick={handlePrevious}
className="px-3 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex === 0}
>
<FontAwesomeIcon icon={faChevronLeft} />
</button>
)}

{/* Device Cards Container */}


<div className="device-cards flex space-x-3">
{scanners
.slice(currentIndex, currentIndex + 4)
.map((device, index) => (
<div key={index} className="device-card p-4 bg-white shadow-md
rounded-lg">
<div
className="dots absolute"
style={{
position: 'absolute',
top: '10px', // Position dots at the top of the card
right: '10px', // Align dots to the right side
cursor: 'pointer', // Change the cursor to pointer for interactivity
fontSize: '1.5em', // Adjust the size of the icon
zIndex: 10, // Ensure the icon is above other content
}}
onClick={() => toggleDropdown(index)}
>
<FontAwesomeIcon icon={faEllipsisV} />
</div>

<div className="device-image">
<img src={[Link]} alt={device.device_Name}
className="w-full h-auto" />
</div>
<div className="device-details">
<h3 className="font-semibold text-lg">{device.device_Name}</h3>
<h3><strong>Device Type:</strong> {device.device_Type}</h3>
<h3>
<strong>Status:</strong>
<span className={`status ${[Link]()}`}>
{[Link] === 'ONLINE' && '✔️'}
{[Link] === 'OFFLINE' && '❌'}
{[Link] === 'ERROR' && '⚠️'}
</span>
</h3>
</div>

{/* Dropdown Menu */}


{dropdown === index && (
<div className="dropdown-menu absolute bg-white shadow-lg
rounded-md p-2 z-10">
<button
type="button"
onClick={() => handleConnectDisconnect([Link])}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Connect
</button>
<button
type="button"
onClick={HandleModalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Config
</button>
<button
type="button"
onClick={() => handleConnectDisconnect([Link])}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Disconnect
</button>
<button
type="button"
onClick={deletemodalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Remove
</button>
</div>
)}
</div>
))}
</div>

{/* Forward Button */}


{currentIndex + 4 < [Link] && (
<button
type="button"
onClick={handleNext}
className="px-4 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex + 4 >= [Link]}
>
<FontAwesomeIcon icon={faChevronRight} />
</button>
)}
</div>
</div>

{/* Printer Section */}


<div className="device-section">
<h2
style={{fontSize:'1.5rem',marginBottom:'10px',marginTop:'10px'}}>Printers</h2>
<div className="relative flex items-center">
{/* Backward Button */}
{currentIndex > 0 && (
<button
type="button"
onClick={handlePrevious}
className="px-3 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex === 0}
>
<FontAwesomeIcon icon={faChevronLeft} />
</button>
)}

{/* Device Cards Container */}


<div className="device-cards flex space-x-2">
{printers
.slice(currentIndex, currentIndex + 4)
.map((device, index) => (
<div key={index} className="device-card p-4 bg-white shadow-md
rounded-lg">
<div className="dots absolute" onClick={() =>
toggleDropdown(index)}>
<FontAwesomeIcon icon={faEllipsisV} />
</div>
<div className="device-image">
<img src={[Link]} alt={device.device_Name}
className="w-full h-auto" />
</div>
<div className="device-details">
<h3 className="font-semibold text-lg">{device.device_Name}</h3>
<h3><strong>Device Type:</strong> {device.device_Type}</h3>
<h3>
<strong>Status:</strong>
<span className={`status ${[Link]()}`}>
{[Link] === 'ONLINE' && '✔️'}
{[Link] === 'OFFLINE' && '❌'}
{[Link] === 'ERROR' && '⚠️'}
</span>
</h3>
</div>

{/* Dropdown Menu */}


{dropdown === index && (
<div className="dropdown-menu absolute bg-white shadow-lg
rounded-md p-2 z-10">
<button
type="button"
onClick={() => handleConnectDisconnect([Link])}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Connect
</button>
<button
type="button"
onClick={HandleModalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Config
</button>
<button
type="button"
onClick={() => handleConnectDisconnect([Link])}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Disconnect
</button>
<button
type="button"
onClick={deletemodalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Remove
</button>
</div>
)}
</div>
))}
</div>

{/* Forward Button */}


{currentIndex + 4 < [Link] && (
<button
type="button"
onClick={handleNext}
className="px-4 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex + 4 >= [Link]}
>
<FontAwesomeIcon icon={faChevronRight} />
</button>
)}
</div>
</div>

<div className="device-section">
<h2 style={{fontSize:'1.5rem',marginBottom:'10px',marginTop:'10px'}}>RFID
Devices</h2>
<div className="relative flex items-center">
{/* Backward Button */}
{currentIndex > 0 && (
<button
type="button"
onClick={handlePrevious}
className="px-3 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex === 0}
>
<FontAwesomeIcon icon={faChevronLeft} />
</button>
)}

{/* Device Cards Container */}


<div className="device-cards flex space-x-2">
{rfidDevices
.slice(currentIndex, currentIndex + 4)
.map((device, index) => (
<div key={index} className="device-card p-4 bg-white shadow-md
rounded-lg">
<div className="dots absolute" onClick={() =>
toggleDropdown(index)}>
<FontAwesomeIcon icon={faEllipsisV} />
</div>
<div className="device-image">
<img src={[Link]} alt={device.device_Name}
className="w-full h-auto" />
</div>
<div className="device-details">
<h3 className="font-semibold text-lg">{device.device_Name}</h3>
<h3><strong>Device Type:</strong> {device.device_Type}</h3>
<h3>
<strong>Status:</strong>
<span className={`status ${[Link]()}`}>
{[Link] === 'ONLINE' && '✔️'}
{[Link] === 'OFFLINE' && '❌'}
{[Link] === 'ERROR' && '⚠️'}
</span>
</h3>
</div>
{/* Dropdown Menu */}
{dropdown === index && (
<div className="dropdown-menu absolute bg-white shadow-lg
rounded-md p-2 z-10">
<button
type="button"
onClick={() => handleConnectDisconnect([Link])}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Connect
</button>
<button
type="button"
onClick={HandleModalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Config
</button>
<button
type="button"
onClick={() => handleConnectDisconnect([Link])}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Disconnect
</button>
<button
type="button"
onClick={deletemodalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Remove
</button>
</div>
)}
</div>
))}
</div>

{/* Forward Button */}


{currentIndex + 4 < [Link] && (
<button
type="button"
onClick={handleNext}
className="px-4 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex + 4 >= [Link]}
>
<FontAwesomeIcon icon={faChevronRight} />
</button>
)}
</div>
</div>

<div className="device-section">
<h2
style={{fontSize:'1.5rem',marginBottom:'10px',marginTop:'10px'}}>Barcode
Reader</h2>
<div className="relative flex items-center">
{/* Backward Button */}
{currentIndex > 0 && (
<button
type="button"
onClick={handlePrevious}
className="px-3 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex === 0}
>
<FontAwesomeIcon icon={faChevronLeft} />
</button>
)}

{/* Device Cards Container */}


<div className="device-cards flex space-x-2">
{barcodeReaders
.slice(currentIndex, currentIndex + 4)
.map((device, index) => (
<div key={index} className="device-card p-4 bg-white shadow-md
rounded-lg">
<div className="dots absolute" onClick={() =>
toggleDropdown(index)}>
<FontAwesomeIcon icon={faEllipsisV} />
</div>
<div className="device-image">
<img src={[Link]} alt={device.device_Name}
className="w-full h-auto" />
</div>
<div className="device-details">
<h3 className="font-semibold text-lg">{device.device_Name}</h3>
<h3><strong>Device Type:</strong> {device.device_Type}</h3>
<h3>
<strong>Status:</strong>
<span className={`status ${[Link]()}`}>
{[Link] === 'ONLINE' && '✔️'}
{[Link] === 'OFFLINE' && '❌'}
{[Link] === 'ERROR' && '⚠️'}
</span>
</h3>
</div>

{/* Dropdown Menu */}


{dropdown === index && (
<div className="dropdown-menu absolute bg-white shadow-lg
rounded-md p-2 z-10">
<button
type="button"
onClick={() => handleConnectDisconnect([Link])}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Connect
</button>
<button
type="button"
onClick={HandleModalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Config
</button>
<button
type="button"
onClick={() => handleConnectDisconnect([Link])}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Disconnect
</button>
<button
type="button"
onClick={() => deletemodalopen([Link])}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Remove
</button>
</div>
)}
</div>
))}
</div>

{/* Forward Button */}


{currentIndex + 4 < [Link] && (
<button
type="button"
onClick={handleNext}
className="px-4 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex + 4 >= [Link]}
>
<FontAwesomeIcon icon={faChevronRight} />
</button>
)}
</div>
</div>

{/* Modal Components */}


<ConfigModal open={isOpen} onClose={HandleModalclose} />
<DeleteModal
isOpen={deleteModalOpen}
deletemodalclose={deletemodalclose}
onDelete={() => handleDeleteDevice(deviceToDelete, setDevices,
deletemodalclose)} // Use the delete function here
/>
</div>
);
};

export default AllDevices;

Common questions

Powered by AI

The `AllDevices` component enhances scalability by using modular design practices, such as separating device logic into filters and state management, allowing it to handle larger datasets without significant refactoring. The use of asynchronous data fetching improves efficiency by running operations independently from UI rendering. Moreover, clear segmenting of device types and the dynamic handling of UI elements (e.g., pagination, modals) make it adaptable to varying numbers of devices and potential feature expansions .

The component manages the connection status of devices using the `handleConnectDisconnect` function, which toggles the connection state by calling `ConnectDisconnectDevice` with the device ID. Operations allowed on each device include connecting, disconnecting, configuring, and removing the device via buttons within a dropdown menu. These operations manipulate the device state accordingly .

In the `AllDevices` component, the `fetchDevices` asynchronous function is used within a `useEffect` hook to fetch data from `fetchalldevices`. The component filters devices using properties in the data structure such as `Type` to categorize them into scanners, printers, RFID devices, and barcode readers. Filtering is performed with methods like `filter` on the `devices` array, creating subarrays like `scanners`, `printers`, `rfidDevices`, and `barcodeReaders` based on the `Type` property of each device .

The `AllDevices` component utilizes React's `useState` to manage its state and synchronize device actions. State variables like `devices`, `deviceToDelete`, `isOpen`, and `deleteModalOpen` store and manage data reflecting the interface's dynamic actions. Upon adding, deleting, or connecting devices, these states are updated accordingly, ensuring the UI accurately represents the current state of device operations in real time. Asynchronous functions like `fetchDevices` and `handleDeleteDevice` ensure data synchronization with the server-side changes .

The `AllDevices` component manages the visibility of the dropdown menu using the `dropdown` state variable. The `toggleDropdown` function updates this state by setting the index of the currently open dropdown. If the clicked index is equal to the current `dropdown` index, the `dropdown` is set to `null`, hiding the menu. Otherwise, it's set to the new index, showing the menu associated with that device .

The component manages loading states with the `loading` state variable. Initially set to `true`, it ensures the UI reflects the process of gathering device data. Once devices have been fetched successfully or an error occurs, `loading` is set to `false`, updating the UI to either display the data or an error message. This management of loading states is significant as it informs users of data retrieval activity and prevents interactions with incomplete data, improving overall user experience .

Asynchronous operations in `AllDevices` are primarily achieved through `async/await` functions for fetching device data (`fetchDevices`) and modifying device states (`handleConnectDisconnect`). These operations allow non-blocking execution, letting the application perform other tasks or render UI components while awaiting network responses. This enhances performance by preventing UI freezes during data operations, providing smoother user experiences with quicker perceived responsiveness and minimal reaction delay even for complex tasks .

`ConfigModal` and `DeleteModal` are auxiliary components within `AllDevices` that provide additional functionality. `ConfigModal`, opened via a configuration button, allows users to adjust specific settings for devices, while `DeleteModal` facilitates device removal with user confirmation by setting device IDs for deletion through the `handleDeleteDevice` function. These modals enhance functionality by providing focused interfaces for specific tasks without cluttering the main device listing view .

Pagination in the `AllDevices` component is implemented using `currentIndex`, which determines the slice of the device array being displayed. The `handlePrevious` and `handleNext` functions adjust this index by incrementing or decrementing it, controlling the visible subset of devices. This approach efficiently manages the display of multiple devices in a way that enhances user experience by avoiding overwhelming the UI with too much information at once and minimizing loading times for device images and details .

The `AllDevices` component employs design elements such as pagination buttons for manageable navigation, hover effects on interactive buttons indicating function availability, and status icons representing device states for quick recognition. Dropdown menus with options for actions (e.g., Connect, Disconnect) enhance user interactivity. Configurable styles and icons from the `FontAwesomeIcon` library are used to ensure a visually appealing and accessible interface reflecting the device's operational status .

You might also like