andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-07 08:19:52 +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

67
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,6 +147,17 @@ const Dashboard = () => {
<UnfoldLessIcon fontSize="small" /> <UnfoldLessIcon fontSize="small" />
</ToggleButton> </ToggleButton>
</ToggleButtonGroup> </ToggleButtonGroup>
<Box
mt={2}
padding={1}
justifyContent="center"
flexDirection="column"
sx={{
borderRadius: 2,
border: '1px solid grey'
}}
>
<Table <Table
data={{ nodes: data }} data={{ nodes: data }}
theme={dashboard_theme} theme={dashboard_theme}
@@ -161,13 +165,6 @@ const Dashboard = () => {
tree={tree} tree={tree}
> >
{(tableList: DashboardItem[]) => ( {(tableList: DashboardItem[]) => (
<>
<Header>
<HeaderRow>
<HeaderCell resize>Name</HeaderCell>
<HeaderCell>Value</HeaderCell>
</HeaderRow>
</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>
</> </>
); );
}; };

11
mock-api/rest_server.ts
View File

@@ -4327,7 +4327,10 @@ 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;
if (!fake) {
// pick EMS devices from coredata // pick EMS devices from coredata
for (const element of emsesp_coredata.devices) { for (const element of emsesp_coredata.devices) {
const id = element.id; const id = element.id;
@@ -4374,12 +4377,16 @@ router
} }
// add analog sensor data // add analog sensor data
sensor_data = emsesp_sensordata.as.map((item, index) => ({ // 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, id: 970 + index,
n: item.n, n: item.n,
v: item.v, v: item.v,
u: item.u u: item.u
})); }));
dashboard_object = { dashboard_object = {
id: 97, id: 97,
n: 'Analog Sensors', n: 'Analog Sensors',
@@ -4389,9 +4396,9 @@ router
if (dashboard_object.nodes.length > 0) { if (dashboard_object.nodes.length > 0) {
dashboard_data.push(dashboard_object); 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
}) })