Tom Butcher
d52eea3a41
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Introduced a new DashboardDevControls component to manage API server connection states and provide visual feedback. - Enhanced DashboardNavigation with improved layout and styling, including new transition effects for navigation elements. - Adjusted CSS styles for better spacing and visibility of dashboard components, ensuring a more cohesive user experience.
71 lines
2.0 KiB
JavaScript
71 lines
2.0 KiB
JavaScript
import { useContext, useEffect, useState } from 'react'
|
|
import { Space, Tag } from 'antd'
|
|
import { LoadingOutlined } from '@ant-design/icons'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { ApiServerContext } from '../context/ApiServerContext'
|
|
import Tooltip from './Tooltip'
|
|
import CloudIcon from '../../Icons/CloudIcon'
|
|
import DeveloperIcon from '../../Icons/DeveloperIcon'
|
|
|
|
const DashboardDevControls = () => {
|
|
const { connecting, connected } = useContext(ApiServerContext)
|
|
const navigate = useNavigate()
|
|
const [apiServerState, setApiServerState] = useState('disconnected')
|
|
|
|
useEffect(() => {
|
|
if (connecting == true) {
|
|
setApiServerState('connecting')
|
|
} else if (connected == true) {
|
|
setApiServerState('connected')
|
|
} else {
|
|
setApiServerState('disconnected')
|
|
}
|
|
}, [connecting, connected])
|
|
|
|
if (import.meta.env.MODE !== 'development') return null
|
|
|
|
return (
|
|
<Space>
|
|
{apiServerState === 'connected' ? (
|
|
<Tooltip content='Connected to api server'>
|
|
<Tag
|
|
color='success'
|
|
style={{ marginRight: 0 }}
|
|
icon={<CloudIcon />}
|
|
/>
|
|
</Tooltip>
|
|
) : null}
|
|
{apiServerState === 'connecting' ? (
|
|
<Tooltip content='Connecting to api server...'>
|
|
<Tag
|
|
color='warning'
|
|
style={{ marginRight: 0 }}
|
|
icon={<LoadingOutlined />}
|
|
/>
|
|
</Tooltip>
|
|
) : null}
|
|
{apiServerState === 'disconnected' ? (
|
|
<Tooltip content='Disconnected from api server'>
|
|
<Tag
|
|
color='error'
|
|
style={{ marginRight: 0 }}
|
|
icon={<CloudIcon />}
|
|
/>
|
|
</Tooltip>
|
|
) : null}
|
|
<Tooltip content='Developer'>
|
|
<Tag
|
|
color='yellow'
|
|
style={{ marginRight: 0 }}
|
|
icon={<DeveloperIcon />}
|
|
onClick={() => {
|
|
navigate('/dashboard/developer/sessionstorage')
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
</Space>
|
|
)
|
|
}
|
|
|
|
export default DashboardDevControls
|