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

Merge pull request #487 from proddy/dev

Browse Source 
table formatting again
This commit is contained in:
Proddy
2022-05-03 19:51:00 +02:00
committed by GitHub
parent 8a4decd48b 931782df1c
commit d07f18bd41
4 changed files with 107 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
interface/package-lock.json generated
View File

@@ -29,7 +29,7 @@
"react": "^17.0.2",
"react-app-rewired": "^2.2.1",
"react-dom": "^17.0.2",
"react-dropzone": "^14.1.1",
"react-dropzone": "^14.2.0",
"react-icons": "^4.3.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
@@ -7976,14 +7976,14 @@
}
},
"node_modules/file-selector": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.5.0.tgz",
"integrity": "sha512-s8KNnmIDTBoD0p9uJ9uD0XY38SCeBOtj0UMXyQSLg1Ypfrfj8+dAvwsLjYQkQ2GjhVtp2HrnF5cJzMhBjfD8HA==",
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
"integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
"dependencies": {
"tslib": "^2.0.3"
"tslib": "^2.4.0"
},
"engines": {
"node": ">= 10"
"node": ">= 12"
}
},
"node_modules/filelist": {
@@ -14437,12 +14437,12 @@
}
},
"node_modules/react-dropzone": {
"version": "14.1.1",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.1.1.tgz",
"integrity": "sha512-JYavQrxU66hBHwDAXCMoHNvhMonKDA0VQ8ouJi8Ouxgz9lmtA4OGVBXgOTCq4vCbwTTDT9synvNUCIpT6zWWow==",
"version": "14.2.0",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.0.tgz",
"integrity": "sha512-D7AXPtRba8rd7DBOejh3W2v1Uax6i7XKPYPuMr13XFPfnDcPHHvlEfp3raVpdj3XMHlRfYuf2H5+m8p7mlgKdQ==",
"dependencies": {
"attr-accept": "^2.2.2",
"file-selector": "^0.5.0",
"file-selector": "^0.6.0",
"prop-types": "^15.8.1"
},
"engines": {
@@ -16294,9 +16294,9 @@
}
},
"node_modules/tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"node_modules/tsutils": {
"version": "3.21.0",
@@ -23280,11 +23280,11 @@
}
},
"file-selector": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.5.0.tgz",
"integrity": "sha512-s8KNnmIDTBoD0p9uJ9uD0XY38SCeBOtj0UMXyQSLg1Ypfrfj8+dAvwsLjYQkQ2GjhVtp2HrnF5cJzMhBjfD8HA==",
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
"integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
"requires": {
"tslib": "^2.0.3"
"tslib": "^2.4.0"
}
},
"filelist": {
@@ -27793,12 +27793,12 @@
}
},
"react-dropzone": {
"version": "14.1.1",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.1.1.tgz",
"integrity": "sha512-JYavQrxU66hBHwDAXCMoHNvhMonKDA0VQ8ouJi8Ouxgz9lmtA4OGVBXgOTCq4vCbwTTDT9synvNUCIpT6zWWow==",
"version": "14.2.0",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.0.tgz",
"integrity": "sha512-D7AXPtRba8rd7DBOejh3W2v1Uax6i7XKPYPuMr13XFPfnDcPHHvlEfp3raVpdj3XMHlRfYuf2H5+m8p7mlgKdQ==",
"requires": {
"attr-accept": "^2.2.2",
"file-selector": "^0.5.0",
"file-selector": "^0.6.0",
"prop-types": "^15.8.1"
}
},
@@ -29185,9 +29185,9 @@
}
},
"tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"tsutils": {
"version": "3.21.0",

2
interface/package.json
View File

@@ -25,7 +25,7 @@
"react": "^17.0.2",
"react-app-rewired": "^2.2.1",
"react-dom": "^17.0.2",
"react-dropzone": "^14.1.1",
"react-dropzone": "^14.2.0",
"react-icons": "^4.3.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",

94
interface/src/project/DashboardData.tsx
View File

@@ -206,34 +206,63 @@ const DashboardData: FC = () => {
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
&:not(.stiff) > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:nth-of-type(1) {
padding-left: 16px;
width: 260px;
min-width: 260px;
}
&:nth-of-type(4) {
padding-left: 16px;
}
width: 124px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:last-of-type {
&:nth-of-type(2) {
flex: 1;
text-align: right;
}
&:last-of-type {
padding-left: 0px;
text-align: center;
width: 32px;
min-width: 32px;
max-width: 32px;
}
`,
HeaderCell: `
padding-left: 8px;
&:nth-of-type(1) {
padding-left: 8px;
}
&:nth-of-type(4) {
padding-left: 16px;
}
&:not(:last-of-type) {
border-right: 1px solid #565656;
padding-left: 8px;
border-left: 1px solid #565656;
}
&:first-of-type {
border-left: 0px;
}
`
});
const temperature_theme = useTheme([data_theme]);
const analog_theme = useTheme([
data_theme,
{
BaseCell: `
&:nth-of-type(1) {
width: 100px;
min-width: 100px;
}
&:nth-of-type(2) {
text-align: left;
}
&:nth-of-type(3) {
width: 100px;
min-width: 100px;
}
&:nth-of-type(4) {
text-align: right;
flex: 1;
}
`
}
]);
const getSortIcon = (state: any, sortKey: any) => {
if (state.sortKey === sortKey && state.reverse) {
return <KeyboardArrowDownOutlinedIcon />;
@@ -746,12 +775,15 @@ const DashboardData: FC = () => {
<Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary">
{deviceData.label}
</Typography>
<FormControlLabel
control={<Checkbox size="small" name="onlyFav" checked={onlyFav} onChange={() => setOnlyFav(!onlyFav)} />}
label={<span style={{ fontSize: '12px' }}>show only favorites</span>}
label={
<span style={{ fontSize: '12px' }}>
only show favorites&nbsp;
<StarIcon color="primary" sx={{ fontSize: 12 }} />
</span>
}
/>
<Table
data={{
nodes: onlyFav
@@ -760,7 +792,7 @@ const DashboardData: FC = () => {
}}
theme={data_theme}
sort={dv_sort}
// layout={{ custom: true }}
layout={{ custom: true }}
>
{(tableList: any) => (
<>
@@ -776,10 +808,10 @@ const DashboardData: FC = () => {
ENTITY NAME
</Button>
</HeaderCell>
<HeaderCell resize>
<HeaderCell>
<Button
fullWidth
style={{ fontSize: '14px', justifyContent: 'flex-start' }}
style={{ fontSize: '14px', justifyContent: 'flex-end' }}
endIcon={getSortIcon(dv_sort.state, 'VALUE')}
onClick={() => dv_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
>
@@ -832,8 +864,12 @@ const DashboardData: FC = () => {
<Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary">
Temperature Sensors
</Typography>
<Table data={{ nodes: sensorData.sensors }} theme={data_theme} sort={sensor_sort}>
<Table
data={{ nodes: sensorData.sensors }}
theme={temperature_theme}
sort={sensor_sort}
layout={{ custom: true }}
>
{(tableList: any) => (
<>
<Header>
@@ -848,10 +884,10 @@ const DashboardData: FC = () => {
NAME
</Button>
</HeaderCell>
<HeaderCell resize>
<HeaderCell>
<Button
fullWidth
style={{ fontSize: '14px', justifyContent: 'flex-start' }}
style={{ fontSize: '14px', justifyContent: 'flex-end' }}
endIcon={getSortIcon(sensor_sort.state, 'TEMPERATURE')}
onClick={() => sensor_sort.fns.onToggleSort({ sortKey: 'TEMPERATURE' })}
>
@@ -888,7 +924,7 @@ const DashboardData: FC = () => {
Analog Sensors
</Typography>
<Table data={{ nodes: sensorData.analogs }} theme={data_theme} sort={analog_sort}>
<Table data={{ nodes: sensorData.analogs }} theme={analog_theme} sort={analog_sort} layout={{ custom: true }}>
{(tableList: any) => (
<>
<Header>
@@ -923,7 +959,7 @@ const DashboardData: FC = () => {
TYPE
</Button>
</HeaderCell>
<HeaderCell resize>VALUE</HeaderCell>
<HeaderCell>VALUE</HeaderCell>
<HeaderCell />
</HeaderRow>
</Header>

28
interface/src/project/SettingsCustomization.tsx
View File

@@ -100,22 +100,28 @@ const SettingsCustomization: FC = () => {
}
`,
BaseCell: `
padding-left: 8px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:not(.stiff) > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:nth-of-type(1) {
left: 0px;
min-width: 124px;
width: 124px;
padding-left: 0px;
width: 120px;
min-width: 120px;
max-width: 120px;
}
&:nth-of-type(2) {
min-width: 70%;
width: 70%;
padding-left: 8px;
flex: 1;
}
&:nth-of-type(3) {
padding-right: 8px;
text-align: right;
width: 120px;
min-width: 120px;
}
`,
HeaderCell: `
@@ -435,7 +441,7 @@ const SettingsCustomization: FC = () => {
NAME
</Button>
</HeaderCell>
<HeaderCell resize>VALUE</HeaderCell>
<HeaderCell>VALUE</HeaderCell>
</HeaderRow>
</Header>
<Body>