Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | import React, { useState } from 'react'
import { CButton, CContainer } from '@coreui/react'
import { DynamicForm } from '@components/Dynamic'
import DeviceAdd from '../devices/DeviceAdd'
import { getPageData } from '@hooks'
import { apiService } from '@services'
const devicesApi = apiService('devices')
const AddMarker = ({ popupStatus, floorId, pendingCoordinates, refetch }) => {
const [activeTab, setActiveTab] = useState('addLocation')
const { loading, error, data: dbAllDevices } = getPageData(devicesApi.get, {})
if (loading) return <p>Loading...</p>
if (error) return <p>Error: {error.message}</p>
const dynamicFormAddMarkerFields = [
{
name: 'macAddress',
label: 'Device',
type: 'select',
options: dbAllDevices
.filter(device =>
device.type !== 'tag' &&
(!device.location || typeof device.location.x !== 'number' || typeof device.location.y !== 'number')
)
.map(d => ({
label: d.name,
value: d.macAddress,
})),
required: true,
},
]
const dynamicFormAddMarkerHandleFormSubmit = async formData => {
try {
const device = await devicesApi.get({ macAddress: formData.macAddress })
const deviceWithCoordinates = {
...device,
location: {
floor_id: floorId,
x: pendingCoordinates.x,
y: pendingCoordinates.y,
},
}
await devicesApi.update(deviceWithCoordinates)
refetch()
popupStatus.current.close()
} catch (err) {
console.error('Error while adding marker:', err)
alert('Something went wrong while adding the marker')
}
}
return (
<CContainer>
<div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
<CButton
color={activeTab === 'addLocation' ? 'primary' : 'secondary'}
onClick={() => setActiveTab('addLocation')}
>
Add Location
</CButton>
<CButton
color={activeTab === 'addDevice' ? 'primary' : 'secondary'}
onClick={() => setActiveTab('addDevice')}
>
Add Device
</CButton>
</div>
{activeTab === 'addLocation' && (
<DynamicForm
fields={dynamicFormAddMarkerFields}
onSubmit={dynamicFormAddMarkerHandleFormSubmit}
submitButtonLabel="Add Location"
/>
)}
{activeTab === 'addDevice' && (
<DeviceAdd
onDeviceAdded={macAddress => dynamicFormAddMarkerHandleFormSubmit({ macAddress })}
/>
)}
</CContainer>
)
}
export default AddMarker |