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

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

11
mock-api/rest_server.ts
View File

@@ -4327,7 +4327,10 @@ router
.get(EMSESP_DASHBOARD_DATA_ENDPOINT, () => {
let dashboard_data = [];
let dashboard_object = {};
let fake = false;
// let fake = true;
if (!fake) {
// pick EMS devices from coredata
for (const element of emsesp_coredata.devices) {
const id = element.id;
@@ -4374,12 +4377,16 @@ router
}
// 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,
n: item.n,
v: item.v,
u: item.u
}));
dashboard_object = {
id: 97,
n: 'Analog Sensors',
@@ -4389,9 +4396,9 @@ router
if (dashboard_object.nodes.length > 0) {
dashboard_data.push(dashboard_object);
}
}
// console.log('dashboard_data: ', dashboard_data);
return new Response(encoder.encode(dashboard_data), { headers }); // msgpack it
})