andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-07 00:09:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

update dashboard for analog

Browse Source
This commit is contained in:
proddy
2024-10-03 21:09:50 +02:00
parent fb0d9454ef
commit 01db9db6ae
2 changed files with 102 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
interface/src/app/main/Dashboard.tsx
View File

@@ -6,15 +6,7 @@ import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore'; import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
import { Box, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material'; import { Box, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
import { import { Body, Cell, Row, Table } from '@table-library/react-table-library/table';
Body,
Cell,
Header,
HeaderCell,
HeaderRow,
Row,
Table
} from '@table-library/react-table-library/table';
import { useTheme } from '@table-library/react-table-library/theme'; import { useTheme } from '@table-library/react-table-library/theme';
import { CellTree, useTree } from '@table-library/react-table-library/tree'; import { CellTree, useTree } from '@table-library/react-table-library/tree';
import { useAutoRequest } from 'alova/client'; import { useAutoRequest } from 'alova/client';
@@ -52,19 +44,10 @@ const Dashboard = () => {
height: 32px; height: 32px;
} }
`, `,
HeaderRow: `
text-transform: uppercase;
background-color: black;
color: #90CAF9;
.th {
border-bottom: 1px solid #565656;
height: 36px;
}
`,
Row: ` Row: `
background-color: #1e1e1e; background-color: #1e1e1e;
position: relative; // position: relative;
cursor: pointer; // cursor: pointer;
.td { .td {
height: 24px; height: 24px;
} }
@@ -107,9 +90,10 @@ const Dashboard = () => {
if (di.id < 100) { if (di.id < 100) {
if (di.nodes?.length) { if (di.nodes?.length) {
return ( return (
<div style={{ color: '#2196f3' }}> <span>
{di.n} ({di.nodes?.length}) <span style={{ color: '#2196f3' }}>{di.n}</span>
</div> <span style={{ color: 'lightblue' }}>&nbsp;({di.nodes?.length})</span>
</span>
); );
} }
return <div style={{ color: '#2196f3' }}>{di.n}</div>; return <div style={{ color: '#2196f3' }}>{di.n}</div>;
@@ -133,13 +117,22 @@ const Dashboard = () => {
return <FormLoader onRetry={fetchDashboard} errorMessage={error?.message} />; return <FormLoader onRetry={fetchDashboard} errorMessage={error?.message} />;
} }
if (data.length === 0) {
return (
<Typography variant="body2" color="warning">
{/* TODO translate */}
No entities found.
</Typography>
);
}
return ( return (
<> <>
<Box mb={2} color="warning.main"> <Typography mb={2} variant="body2" color="warning">
<Typography variant="body2"> The dashboard shows all EMS entities that are marked as favorite, and the
Use Customizations to mark your favorite EMS entities sensors.
</Typography> </Typography>
</Box>
<ToggleButtonGroup <ToggleButtonGroup
color="primary" color="primary"
size="small" size="small"
@@ -154,20 +147,24 @@ const Dashboard = () => {
<UnfoldLessIcon fontSize="small" /> <UnfoldLessIcon fontSize="small" />
</ToggleButton> </ToggleButton>
</ToggleButtonGroup> </ToggleButtonGroup>
<Table
data={{ nodes: data }} <Box
theme={dashboard_theme} mt={2}
layout={{ custom: true }} padding={1}
tree={tree} justifyContent="center"
flexDirection="column"
sx={{
borderRadius: 2,
border: '1px solid grey'
}}
> >
{(tableList: DashboardItem[]) => ( <Table
<> data={{ nodes: data }}
<Header> theme={dashboard_theme}
<HeaderRow> layout={{ custom: true }}
<HeaderCell resize>Name</HeaderCell> tree={tree}
<HeaderCell>Value</HeaderCell> >
</HeaderRow> {(tableList: DashboardItem[]) => (
</Header>
<Body> <Body>
{tableList.map((di: DashboardItem) => ( {tableList.map((di: DashboardItem) => (
<Row key={di.id} item={di} disabled={di.nodes?.length === 0}> <Row key={di.id} item={di} disabled={di.nodes?.length === 0}>
@@ -180,9 +177,9 @@ const Dashboard = () => {
</Row> </Row>
))} ))}
</Body> </Body>
</> )}
)} </Table>
</Table> </Box>
</> </>
); );
}; };

115
mock-api/rest_server.ts
View File

@@ -4327,71 +4327,78 @@ router
.get(EMSESP_DASHBOARD_DATA_ENDPOINT, () => { .get(EMSESP_DASHBOARD_DATA_ENDPOINT, () => {
let dashboard_data = []; let dashboard_data = [];
let dashboard_object = {}; let dashboard_object = {};
let fake = false;
// let fake = true;
// pick EMS devices from coredata if (!fake) {
for (const element of emsesp_coredata.devices) { // pick EMS devices from coredata
const id = element.id; for (const element of emsesp_coredata.devices) {
const id = element.id;
dashboard_object = {
id: id,
n: element.n,
nodes: getDashboardEntityData(id)
};
// only add to dashboard if we have values
if (dashboard_object.nodes.length > 0) {
dashboard_data.push(dashboard_object);
}
}
// add the custom entity data
dashboard_object = {
id: 99,
n: 'Custom Entities',
nodes: getDashboardEntityData(99)
};
// only add to dashboard if we have values
if (dashboard_object.nodes.length > 0) {
dashboard_data.push(dashboard_object);
}
// add temperature sensor data
let sensor_data = {};
sensor_data = emsesp_sensordata.ts.map((item, index) => ({
id: 980 + index,
n: item.n ? item.n : item.id, // name may not be set
v: item.t ? item.t : undefined, // can have no value
u: item.u
}));
dashboard_object = {
id: 98,
n: 'Temperature Sensors',
nodes: sensor_data
};
// only add to dashboard if we have values
if (dashboard_object.nodes.length > 0) {
dashboard_data.push(dashboard_object);
}
// add analog sensor data
// remove disabled sensors (t = 0)
sensor_data = emsesp_sensordata.as.filter((item) => item.t !== 0);
sensor_data = sensor_data.map((item, index) => ({
id: 970 + index,
n: item.n,
v: item.v,
u: item.u
}));
dashboard_object = { dashboard_object = {
id: id, id: 97,
n: element.n, n: 'Analog Sensors',
nodes: getDashboardEntityData(id) nodes: sensor_data
}; };
// only add to dashboard if we have values // only add to dashboard if we have values
if (dashboard_object.nodes.length > 0) { if (dashboard_object.nodes.length > 0) {
dashboard_data.push(dashboard_object); dashboard_data.push(dashboard_object);
} }
} }
// add the custom entity data
dashboard_object = {
id: 99,
n: 'Custom Entities',
nodes: getDashboardEntityData(99)
};
// only add to dashboard if we have values
if (dashboard_object.nodes.length > 0) {
dashboard_data.push(dashboard_object);
}
// add temperature sensor data
let sensor_data = {};
sensor_data = emsesp_sensordata.ts.map((item, index) => ({
id: 980 + index,
n: item.n ? item.n : item.id, // name may not be set
v: item.t ? item.t : undefined, // can have no value
u: item.u
}));
dashboard_object = {
id: 98,
n: 'Temperature Sensors',
nodes: sensor_data
};
// only add to dashboard if we have values
if (dashboard_object.nodes.length > 0) {
dashboard_data.push(dashboard_object);
}
// add analog sensor data
sensor_data = emsesp_sensordata.as.map((item, index) => ({
id: 970 + index,
n: item.n,
v: item.v,
u: item.u
}));
dashboard_object = {
id: 97,
n: 'Analog Sensors',
nodes: sensor_data
};
// only add to dashboard if we have values
if (dashboard_object.nodes.length > 0) {
dashboard_data.push(dashboard_object);
}
// console.log('dashboard_data: ', dashboard_data); // console.log('dashboard_data: ', dashboard_data);
return new Response(encoder.encode(dashboard_data), { headers }); // msgpack it return new Response(encoder.encode(dashboard_data), { headers }); // msgpack it
}) })