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

UI improvements in web

Browse Source
This commit is contained in:
proddy
2020-07-17 14:23:41 +02:00
parent 0e417f0257
commit 5b229b16dc
28 changed files with 171 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
interface/src/wifi/WiFiSettingsController.tsx
View File

@@ -1,8 +1,7 @@
import React, { Component } from 'react';
import {restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
import { restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
import WiFiSettingsForm from './WiFiSettingsForm';
import { WiFiConnectionContext } from './WiFiConnectionContext';
import { WIFI_SETTINGS_ENDPOINT } from '../api';
import { WiFiSettings } from './types';
@@ -10,39 +9,15 @@ type WiFiSettingsControllerProps = RestControllerProps<WiFiSettings>;
class WiFiSettingsController extends Component<WiFiSettingsControllerProps> {
static contextType = WiFiConnectionContext;
context!: React.ContextType<typeof WiFiConnectionContext>;
componentDidMount() {
const { selectedNetwork } = this.context;
if (selectedNetwork) {
const wifiSettings: WiFiSettings = {
ssid: selectedNetwork.ssid,
password: "",
hostname: "ems-esp",
static_ip_config: false,
}
this.props.setData(wifiSettings);
} else {
this.props.loadData();
}
}
deselectNetworkAndLoadData = () => {
this.context.deselectNetwork();
this.props.loadData();
}
componentWillUnmount() {
this.context.deselectNetwork();
}
render() {
return (
<SectionContent title="WiFi Settings">
<RestFormLoader
{...this.props}
loadData={this.deselectNetworkAndLoadData}
render={formProps => <WiFiSettingsForm {...formProps} />}
/>
</SectionContent>
@@ -51,4 +26,4 @@ class WiFiSettingsController extends Component<WiFiSettingsControllerProps> {
}
export default restController(WIFI_SETTINGS_ENDPOINT, WiFiSettingsController);
export default restController(WIFI_SETTINGS_ENDPOINT, WiFiSettingsController);

30
interface/src/wifi/WiFiSettingsForm.tsx
View File

@@ -24,15 +24,39 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
static contextType = WiFiConnectionContext;
context!: React.ContextType<typeof WiFiConnectionContext>;
constructor(props: WiFiStatusFormProps, context: WiFiConnectionContext) {
super(props);
const { selectedNetwork } = context;
if (selectedNetwork) {
const wifiSettings: WiFiSettings = {
ssid: selectedNetwork.ssid,
password: "",
hostname: props.data.hostname,
static_ip_config: false,
}
props.setData(wifiSettings);
}
}
componentWillMount() {
ValidatorForm.addValidationRule('isIP', isIP);
ValidatorForm.addValidationRule('isHostname', isHostname);
ValidatorForm.addValidationRule('isOptionalIP', optional(isIP));
}
deselectNetworkAndLoadData = () => {
this.context.deselectNetwork();
this.props.loadData();
}
componentWillUnmount() {
this.context.deselectNetwork();
}
render() {
const { selectedNetwork, deselectNetwork } = this.context;
const { data, handleValueChange, saveData, loadData } = this.props;
const { data, handleValueChange, saveData } = this.props;
return (
<ValidatorForm onSubmit={saveData} ref="WiFiSettingsForm">
{
@@ -167,7 +191,7 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
<FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
Save
</FormButton>
<FormButton variant="contained" color="secondary" onClick={loadData}>
<FormButton variant="contained" color="secondary" onClick={this.deselectNetworkAndLoadData}>
Reset
</FormButton>
</FormActions>
@@ -176,4 +200,4 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
}
}
export default WiFiSettingsForm;
export default WiFiSettingsForm;