Allow to configure led brightness and power source type from frontend

Author: GuLinux

web/src/App.js

@@ -8,7 +8,7 @@ import { darkModeSelector, getAppStatusAsync, getHistoryAsync, setUptime, tabSel
 import Tab from 'react-bootstrap/Tab';
 import Container from 'react-bootstrap/Container';
 import { Home } from './features/Home';
-import { WiFi } from './features/app/WiFi';
+import { Config } from './features/app/Config';
 import { System } from './features/app/System';
 
 const registerEventSource = dispatch => {
@@ -48,7 +48,7 @@ function App() {
         <Tab.Container activeKey={activeTab}>
           <Tab.Content>
             <Tab.Pane eventKey='home'><Home /></Tab.Pane>
-            <Tab.Pane eventKey='wifi'><WiFi /></Tab.Pane>
+            <Tab.Pane eventKey='config'><Config /></Tab.Pane>
             <Tab.Pane eventKey='system'><System /></Tab.Pane>
           </Tab.Content>
         </Tab.Container>

web/src/AppNavbar.js

@@ -24,7 +24,7 @@ export const AppNavbar = () => {
         <Navbar.Collapse>
             <Nav variant='tabs' className='me-auto'>
                 <NavTabItem eventKey='home' text='Home' />
-                <NavTabItem eventKey='wifi' text='WiFi' />
+                <NavTabItem eventKey='config' text='Configuration' />
                 <NavTabItem eventKey='system' text='System' />
                 <Nav.Item><Nav.Link href="/update" target="_blank">Update</Nav.Link></Nav.Item>
             </Nav>

web/src/features/app/WiFi.js web/src/features/app/Config.jsweb/src/features/app/WiFi.js renamed to web/src/features/app/Config.js

@@ -11,7 +11,11 @@ import {
     saveStationConfigAsync,
     selectWiFiAccessPointConfig,
     selectConfig,
-    selectWiFiStationsConfig
+    selectWiFiStationsConfig,
+    selectPowerSourceType,
+    selectStatusLedDuty,
+    setStatusLedDutyAsync,
+    setPowerSourceTypeAsync
 } from './configSlice';
 import Spinner from 'react-bootstrap/Spinner';
 import { FaRegEye, FaRegEyeSlash } from "react-icons/fa";
@@ -22,6 +26,9 @@ import { ConfirmModal } from '../../ConfirmModal';
 import { reconnectWiFiAsync } from './appSlice';
 import { RestartModalButton } from './RestartModalButton';
 import { SaveConfigModalButton } from './SaveConfigModalButton';
+import { Number } from '../Number';
+import Badge from 'react-bootstrap/Badge';
+import { setPowerSourceType } from './api';
 
 const WiFiPasswordControl = ({ label, ...props }) => {
     const [show, setShow] = useState(false);
@@ -105,7 +112,43 @@ const WiFiStations = () => {
     </Form>
 }
 
-export const WiFi = () => {
+const AppSettings = () => {
+    const dispatch = useDispatch();
+    const upstreamPowerSourceType = useSelector(selectPowerSourceType);
+    const upstreamLedBrightness = useSelector(selectStatusLedDuty);
+
+    const [ledBrightness, setLedBrightness] = useState(upstreamLedBrightness);
+    const [powerSupply, setPowerSupply] = useState(upstreamPowerSourceType);
+    useEffect(() => {
+        setLedBrightness(upstreamLedBrightness);
+        setPowerSupply(upstreamPowerSourceType);
+    }, [setLedBrightness, setPowerSupply, upstreamLedBrightness, upstreamPowerSourceType]);
+
+    const updateLedBrightness = duty => {
+        setLedBrightness(duty)
+        dispatch(setStatusLedDutyAsync({duty}))
+    }
+    const updatePowerSourceType = powerSourceType => {
+        setPowerSupply(powerSourceType);
+        dispatch(setPowerSourceTypeAsync({powerSourceType}))
+    }
+    return <Form>
+        <Form.Group className='mb-3'>
+            <Form.Label>Status led brightness</Form.Label>
+            <Badge className='float-end'><Number value={ledBrightness*100} decimals={0} unit='%' /></Badge>
+            <Form.Range min={0.0} max={1.0} step={0.01} value={ledBrightness} onChange={e => updateLedBrightness(parseFloat(e.target.value))}/>
+        </Form.Group>
+        <Form.Group className='mb-3'>
+            <Form.Label>Power supply</Form.Label>
+            <Form.Select value={powerSupply} onChange={e => updatePowerSourceType(e.target.value)}>
+                <option value="AC">AC</option>
+                <option value="lipo_3c">LiPo Battery 3 cells (12v)</option>
+            </Form.Select>
+        </Form.Group>
+    </Form>
+}
+
+export const Config = () => {
     const dispatch = useDispatch();
     useEffect(() => { dispatch(getConfigAsync()) }, [dispatch])
     const wifiConfig = useSelector(selectConfig)
@@ -122,6 +165,9 @@ export const WiFi = () => {
         <Row className='mt-5'>
             <WiFiStations />
         </Row>
+        <Row className='mt-5'>
+            <AppSettings />
+        </Row>
         <Row className='mt-5'>
             <Col sm={10}>Unsaved changes will be lost after restart. Save configuration to flash storage to persist them.</Col>
             <Col sm={2} className='d-grid'><SaveConfigModalButton /></Col>

web/src/features/app/api.js

@@ -29,3 +29,5 @@ export const fetchAppInfo = async () => await fetchJson('/api/info')
 export const fetchRestart = async () => await fetchJson('/api/restart', { method: 'POST' })
 export const fetchReconnectWiFi = async () => await fetchJson('/api/wifi/connect', { method: 'POST' })
 export const setHeater = async (index, heater) => await payloadJson('/api/heater', 'POST', {index, ...heater})
+export const setStatusLedDuty = async payload => await payloadJson('/api/config/statusLedDuty', 'POST', payload)
+export const setPowerSourceType = async payload => await payloadJson('/api/config/powerSourceType', 'POST', payload)

web/src/features/app/configSlice.js

@@ -1,5 +1,5 @@
 import { createAsyncThunk, createSelector, createSlice } from '@reduxjs/toolkit';
-import { fetchConfig, removeWiFiStationConfig, saveConfig, saveWiFiAccessPointConfig, saveWiFiStationConfig } from './api';
+import { fetchConfig, removeWiFiStationConfig, saveConfig, saveWiFiAccessPointConfig, saveWiFiStationConfig, setPowerSourceType, setStatusLedDuty } from './api';
 
 const initialState = {
     ready: false,
@@ -8,6 +8,8 @@ const initialState = {
         psk: '',
     },
     stations: [],
+    ledDuty: 1,
+    powerSourceType: 'AC',
 };
 
 export const getConfigAsync = createAsyncThunk(
@@ -36,11 +38,23 @@ export const saveConfigAsync = createAsyncThunk(
   async () => await saveConfig()
 );
 
+export const setStatusLedDutyAsync = createAsyncThunk(
+  'config/setStatusLedDuty',
+  async ({duty}) => await setStatusLedDuty({ duty })
+)
+
+export const setPowerSourceTypeAsync = createAsyncThunk(
+  'config/setPowerSourceType',
+  async ({powerSourceType}) => await setPowerSourceType({ powerSourceType })
+)
+
+
 
 
 export const selectConfig = state => state.config;
 export const selectConfigReady = createSelector([selectConfig], config => config.ready)
 export const selectPowerSourceType = createSelector([selectConfig], config => config.powerSourceType)
+export const selectStatusLedDuty = createSelector([selectConfig], config => config.ledDuty)
 export const selectWiFiAccessPointConfig = createSelector([selectConfig], config => config.accessPoint)
 export const selectWiFiStationsConfig = createSelector([selectConfig], config => config.stations)
 
@@ -61,6 +75,13 @@ export const wifiSlice = createSlice({
       .addCase(saveConfigAsync.fulfilled, (_, {payload}) => ({...payload, ready: true}))
       .addCase(saveStationConfigAsync.fulfilled, (_, {payload}) => ({...payload, ready: true}))
       .addCase(removeStationConfigAsync.fulfilled, (_, {payload}) => ({...payload, ready: true}))
+      .addCase(setPowerSourceTypeAsync.fulfilled, (state, {payload: {powerSourceType}}) => {
+        state.powerSourceType = powerSourceType
+      })
+      .addCase(setStatusLedDutyAsync.fulfilled, (state, {payload: {duty}}) => {
+        state.ledDuty = duty;
+      })
+
   },
 });
 

web/src/features/sensors/power/Power.js

@@ -7,7 +7,7 @@ import Accordion from 'react-bootstrap/Accordion';
 import { useId, useState } from 'react';
 import { selectPowerSourceType } from '../../app/configSlice';
 
-const PowerChart= ({}) => {
+const PowerChart= () => {
     const id = useId();
     const history = useSelector(selectPowerHistory)
     const [selected, setSelected] = useState(null);