mirror of
https://github.com/emsesp/EMS-ESP32.git
synced 2025-12-07 16:29:51 +03:00
Change name of entity within WebUI #612
This commit is contained in:
@@ -253,7 +253,8 @@ const en: BaseTranslation = {
|
||||
NETWORK_ENABLE_IPV6: 'Enable IPv6 support',
|
||||
NETWORK_FIXED_IP: 'Use Fixed IP address',
|
||||
ADMIN: 'Admin',
|
||||
GUEST: 'Guest'
|
||||
GUEST: 'Guest',
|
||||
NEW: 'New'
|
||||
};
|
||||
|
||||
export default en;
|
||||
|
||||
@@ -1004,6 +1004,10 @@ type RootTranslation = {
|
||||
* Guest
|
||||
*/
|
||||
GUEST: string
|
||||
/**
|
||||
* New
|
||||
*/
|
||||
NEW: string
|
||||
}
|
||||
|
||||
export type TranslationFunctions = {
|
||||
@@ -1985,6 +1989,10 @@ export type TranslationFunctions = {
|
||||
* Guest
|
||||
*/
|
||||
GUEST: () => LocalizedString
|
||||
/**
|
||||
* New
|
||||
*/
|
||||
NEW: () => LocalizedString
|
||||
}
|
||||
|
||||
export type Formatters = {}
|
||||
|
||||
@@ -253,7 +253,8 @@ const nl: BaseTranslation = {
|
||||
NETWORK_ENABLE_IPV6: 'Activeer IPv6 support',
|
||||
NETWORK_FIXED_IP: 'Gebruik vast IP addres',
|
||||
ADMIN: 'Admin',
|
||||
GUEST: 'Gast'
|
||||
GUEST: 'Gast',
|
||||
NEW: 'Nieuwe'
|
||||
};
|
||||
|
||||
export default nl;
|
||||
|
||||
@@ -40,7 +40,7 @@ import { ButtonRow, FormLoader, ValidatedTextField, SectionContent } from '../co
|
||||
|
||||
import * as EMSESP from './api';
|
||||
|
||||
import { extractErrorMessage } from '../utils';
|
||||
import { extractErrorMessage, updateValue } from '../utils';
|
||||
|
||||
import { DeviceShort, Devices, DeviceEntity, DeviceEntityMask } from './types';
|
||||
|
||||
@@ -57,6 +57,9 @@ const SettingsCustomization: FC = () => {
|
||||
const [devices, setDevices] = useState<Devices>();
|
||||
const [errorMessage, setErrorMessage] = useState<string>();
|
||||
const [selectedDevice, setSelectedDevice] = useState<number>(-1);
|
||||
|
||||
const [selectedEntity, setSelectedEntity] = useState<DeviceEntity>();
|
||||
|
||||
const [confirmReset, setConfirmReset] = useState<boolean>(false);
|
||||
const [selectedFilters, setSelectedFilters] = useState<number>(0);
|
||||
const [search, setSearch] = useState('');
|
||||
@@ -96,6 +99,7 @@ const SettingsCustomization: FC = () => {
|
||||
Row: `
|
||||
background-color: #1e1e1e;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.td {
|
||||
border-top: 1px solid #565656;
|
||||
@@ -108,6 +112,11 @@ const SettingsCustomization: FC = () => {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&:hover .td {
|
||||
border-top: 1px solid #177ac9;
|
||||
border-bottom: 1px solid #177ac9;
|
||||
}
|
||||
|
||||
&:nth-of-type(odd) .td {
|
||||
background-color: #303030;
|
||||
}
|
||||
@@ -329,6 +338,19 @@ const SettingsCustomization: FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const editEntity = (de: DeviceEntity) => {
|
||||
if (de.n) {
|
||||
setSelectedEntity(de);
|
||||
console.log(de.n); // TODO
|
||||
}
|
||||
};
|
||||
|
||||
const updateEntity = () => {
|
||||
if (selectedEntity) {
|
||||
setSelectedEntity(undefined); // TODO
|
||||
}
|
||||
};
|
||||
|
||||
const renderDeviceData = () => {
|
||||
if (devices?.devices.length === 0 || deviceEntities[0].id === '') {
|
||||
return;
|
||||
@@ -444,7 +466,7 @@ const SettingsCustomization: FC = () => {
|
||||
</Header>
|
||||
<Body>
|
||||
{tableList.map((de: DeviceEntity) => (
|
||||
<Row key={de.id} item={de}>
|
||||
<Row key={de.id} item={de} onClick={() => editEntity(de)}>
|
||||
<Cell stiff>
|
||||
<ToggleButtonGroup
|
||||
size="small"
|
||||
@@ -554,8 +576,55 @@ const SettingsCustomization: FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const renderEditEntity = () => {
|
||||
if (selectedEntity) {
|
||||
return (
|
||||
<Dialog open={selectedEntity !== undefined} onClose={() => setSelectedEntity(undefined)}>
|
||||
<DialogTitle>Rename Entity</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
|
||||
<Typography variant="body2">{selectedEntity.n}</Typography>
|
||||
</Box>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item>
|
||||
<ValidatedTextField
|
||||
name="cn"
|
||||
label={LL.NEW() + ' ' + LL.ENTITY_NAME()}
|
||||
value={selectedEntity.cn}
|
||||
autoFocus
|
||||
sx={{ width: '30ch' }}
|
||||
onChange={updateValue(setSelectedEntity)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
startIcon={<CancelIcon />}
|
||||
variant="outlined"
|
||||
onClick={() => setSelectedEntity(undefined)}
|
||||
color="secondary"
|
||||
>
|
||||
{LL.CANCEL()}
|
||||
</Button>
|
||||
<Button
|
||||
startIcon={<SaveIcon />}
|
||||
variant="outlined"
|
||||
type="submit"
|
||||
onClick={() => updateEntity()}
|
||||
color="warning"
|
||||
>
|
||||
{LL.SAVE()}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SectionContent title={LL.USER_CUSTOMIZATION()} titleGutter>
|
||||
{renderEditEntity()}
|
||||
{content()}
|
||||
</SectionContent>
|
||||
);
|
||||
|
||||
@@ -137,6 +137,7 @@ export interface DeviceEntity {
|
||||
id: string; // shortname
|
||||
v?: any; // value, in any format, optional
|
||||
n?: string; // fullname, optional
|
||||
cn?: string; // custom fullname, optional
|
||||
m: number; // mask
|
||||
om?: number; // original mask before edits
|
||||
w: boolean; // writeable
|
||||
|
||||
Reference in New Issue
Block a user