Scribd
Upload
14 views9 pages

All Device Code

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
14 views9 pages

All Device Code

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
You are on page 1/ 9

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(theme.palette.mode);
const isLightMode = theme.palette.mode === '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();
console.log("API response of BARCODE READER", allDevices.data.Data.data);

setDevices(allDevices.data.Data.data);
console.log("this is the all devices",allDevices.data.Data.data);
} catch (error) {
console.error("Failed to fetch devices:", error);
setDevices([]);
}
};

fetchDevices();
}, []);

const handlePrevious = () => {


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

const handleNext = () => {


if (currentIndex + 4 < scanners.length) {
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);
console.log(`Device ${deviceId} connected/disconnected successfully.`);
} catch (error) {
console.error(`Error connecting/disconnecting device ${deviceId}:`, error);
}
};
// Filter devices based on type
const scanners = devices.filter(device => device.Type === 'SCANNER');
console.log("Scanner device found:", scanners);
const printers = devices.filter(device => device.Type === 'PRINTER');
const rfidDevices = devices.filter(device => device.Type === 'RFID DEVICE');
const barcodeReaders = devices.filter(device => device.Type === '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={device.imageUrl} 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 ${device.Status.toLowerCase()}`}>
{device.status === 'ONLINE' && '✔️'}
{device.status === 'OFFLINE' && '❌'}
{device.status === '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(device.id)}
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(device.id)}
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 < scanners.length && (
<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 >= scanners.length}
>
<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={device.imageUrl} 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 ${device.Status.toLowerCase()}`}>
{device.status === 'ONLINE' && '✔️'}
{device.status === 'OFFLINE' && '❌'}
{device.status === '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(device.id)}
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(device.id)}
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 < printers.length && (
<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 >= printers.length}
>
<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={device.imageUrl} 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 ${device.Status.toLowerCase()}`}>
{device.status === 'ONLINE' && '✔️'}
{device.status === 'OFFLINE' && '❌'}
{device.status === '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(device.id)}
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(device.id)}
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 < rfidDevices.length && (
<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 >= rfidDevices.length}
>
<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={device.imageUrl} 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 ${device.Status.toLowerCase()}`}>
{device.status === 'ONLINE' && '✔️'}
{device.status === 'OFFLINE' && '❌'}
{device.status === '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(device.id)}
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(device.id)}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Disconnect
</button>
<button
type="button"
onClick={() => deletemodalopen(device.id)}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Remove
</button>
</div>
)}
</div>
))}
</div>

{/* Forward Button */}


{currentIndex + 4 < barcodeReaders.length && (
<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 >= barcodeReaders.length}
>
<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;

You might also like