seb/wolfDash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
sebseb7
2025-12-23 05:58:03 +01:00
parent 84c47e3357
commit 5f4c4a55d8
22 changed files with 2935 additions and 2468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/client/ControllerCard.js
View File

@@ -1,15 +1,39 @@
import React, { useState, useEffect } from 'react';
import React, { Component } from 'react';
import { Card, CardHeader, CardContent, Divider, Grid, Box, Typography } from '@mui/material';
import EnvChart from './EnvChart';
import LevelChart from './LevelChart';
import { useI18n } from './I18nContext';
import { withI18n } from './I18nContext';
export default function ControllerCard({ controllerName, ports, range }) {
const { t } = useI18n();
const [envData, setEnvData] = useState([]);
const [portData, setPortData] = useState({});
class ControllerCard extends Component {
constructor(props) {
super(props);
this.state = {
envData: [],
portData: {}
};
this.interval = null;
}
const fetchData = async () => {
componentDidMount() {
this.fetchData();
this.interval = setInterval(() => this.fetchData(), 60000);
}
componentDidUpdate(prevProps) {
if (prevProps.controllerName !== this.props.controllerName ||
prevProps.range !== this.props.range) {
this.fetchData();
}
}
componentWillUnmount() {
if (this.interval) {
clearInterval(this.interval);
}
}
fetchData = async () => {
const { controllerName, ports, range } = this.props;
try {
if (ports.length === 0) return;
@@ -27,12 +51,12 @@ export default function ControllerCard({ controllerName, ports, range }) {
newPortData[item.port] = item.data;
});
setPortData(newPortData);
this.setState({ portData: newPortData });
// Use the data from the first port for the Environment Chart
// This avoids a redundant network request
if (results.length > 0) {
setEnvData(results[0].data);
this.setState({ envData: results[0].data });
}
} catch (err) {
@@ -40,55 +64,55 @@ export default function ControllerCard({ controllerName, ports, range }) {
}
};
// Initial Fetch & Auto-Refresh
useEffect(() => {
fetchData();
const interval = setInterval(fetchData, 60000);
return () => clearInterval(interval);
}, [controllerName, range]); // Depend on range, controllerName changes rarely
render() {
const { controllerName, ports, range, i18n: { t } } = this.props;
const { envData, portData } = this.state;
return (
<Card sx={{ mb: 4, borderRadius: 2, boxShadow: 3 }}>
<CardHeader
title={controllerName}
titleTypographyProps={{ variant: 'h5', fontWeight: 'bold', color: 'primary.main' }}
sx={{ bgcolor: 'background.paper', borderLeft: '6px solid', borderLeftColor: 'primary.main' }}
/>
<CardContent>
{/* Environment Chart */}
<Box sx={{ height: 350, mb: 6 }}>
<Typography variant="h6" color="text.secondary" gutterBottom>
{t('controller.environment')}
</Typography>
<EnvChart data={envData} range={range} />
</Box>
return (
<Card sx={{ mb: 4, borderRadius: 2, boxShadow: 3 }}>
<CardHeader
title={controllerName}
titleTypographyProps={{ variant: 'h5', fontWeight: 'bold', color: 'primary.main' }}
sx={{ bgcolor: 'background.paper', borderLeft: '6px solid', borderLeftColor: 'primary.main' }}
/>
<CardContent>
{/* Environment Chart */}
<Box sx={{ height: 350, mb: 6 }}>
<Typography variant="h6" color="text.secondary" gutterBottom>
{t('controller.environment')}
</Typography>
<EnvChart data={envData} range={range} />
</Box>
<Divider sx={{ mt: 2, mb: 3 }} />
<Divider sx={{ mt: 2, mb: 3 }} />
{/* Port Grid */}
<Grid container spacing={3}>
{ports.map((port) => {
const isLight = port.port_name && port.port_name.toLowerCase().includes('light');
const isCO2 = port.port_name && port.port_name.toLowerCase().includes('co2');
const pData = portData[port.port] || [];
{/* Port Grid */}
<Grid container spacing={3}>
{ports.map((port) => {
const isLight = port.port_name && port.port_name.toLowerCase().includes('light');
const isCO2 = port.port_name && port.port_name.toLowerCase().includes('co2');
const pData = portData[port.port] || [];
return (
<Grid size={{ xs: 12, md: 6, lg: 4 }} key={port.port}>
<Card variant="outlined" sx={{ bgcolor: 'background.paper' }}>
<CardContent>
<Typography variant="h6" gutterBottom>
{port.port_name || `${t('controller.port')} ${port.port}`}
</Typography>
<Box sx={{ height: 250 }}>
<LevelChart data={pData} isLight={isLight} isCO2={isCO2} range={range} />
</Box>
</CardContent>
</Card>
</Grid>
);
})}
</Grid>
</CardContent>
</Card>
);
return (
<Grid size={{ xs: 12, md: 6, lg: 4 }} key={port.port}>
<Card variant="outlined" sx={{ bgcolor: 'background.paper' }}>
<CardContent>
<Typography variant="h6" gutterBottom>
{port.port_name || `${t('controller.port')} ${port.port}`}
</Typography>
<Box sx={{ height: 250 }}>
<LevelChart data={pData} isLight={isLight} isCO2={isCO2} range={range} />
</Box>
</CardContent>
</Card>
</Grid>
);
})}
</Grid>
</CardContent>
</Card>
);
}
}
export default withI18n(ControllerCard);