Ecovacs

front/src/actions/dashboard/boxes/vacbot.js

@@ -0,0 +1,36 @@
+import { RequestStatus } from '../../../utils/consts';
+import createBoxActions from '../boxActions';
+
+const BOX_KEY = 'Vacbot';
+
+function createActions(store) {
+  const boxActions = createBoxActions(store);
+
+  const actions = {
+    async getVacbotBoxDatas(state, box, x, y) {
+      boxActions.updateBoxStatus(state, BOX_KEY, x, y, RequestStatus.Getting);
+      try {
+        const status = await state.httpClient.get(`/api/v1/service/ecovacs/${box.device_feature}/status`);
+        // api/v1/device/:device_selector
+        const vacbotDevice = await state.httpClient.get(`/api/v1/device/${box.device_feature}`);
+        boxActions.mergeBoxData(state, BOX_KEY, x, y, {
+          vacbotStatus: status,
+          device: vacbotDevice,
+          status: RequestStatus.Success
+        });
+        boxActions.updateBoxStatus(state, BOX_KEY, x, y, RequestStatus.Success);
+      } catch (e) {
+        boxActions.mergeBoxData(state, BOX_KEY, x, y, {
+          vacbotStatus: null,
+          device: null,
+          status: RequestStatus.Error
+        });
+        boxActions.updateBoxStatus(state, BOX_KEY, x, y, RequestStatus.Error);
+      }
+    }
+  };
+
+  return Object.assign({}, actions);
+}
+
+export default createActions;

front/src/components/app.jsx

@@ -130,6 +130,11 @@ import EweLinkEditPage from '../routes/integration/all/ewelink/edit-page';
 import EweLinkDiscoverPage from '../routes/integration/all/ewelink/discover-page';
 import EweLinkSetupPage from '../routes/integration/all/ewelink/setup-page';
 
+// Ecovacs
+import EcovacsPage from '../routes/integration/all/ecovacs/device-page';
+import EcovacsDiscoverPage from '../routes/integration/all/ecovacs/discover-page';
+import EcovacsSetupPage from '../routes/integration/all/ecovacs/setup-page';
+
 // OpenAI integration
 import OpenAIPage from '../routes/integration/all/openai/index';
 
@@ -281,6 +286,9 @@ const AppRouter = connect(
         <EweLinkEditPage path="/dashboard/integration/device/ewelink/edit/:deviceSelector" />
         <EweLinkDiscoverPage path="/dashboard/integration/device/ewelink/discover" />
         <EweLinkSetupPage path="/dashboard/integration/device/ewelink/setup" />
+        <EcovacsPage path="/dashboard/integration/device/ecovacs" />
+        <EcovacsDiscoverPage path="/dashboard/integration/device/ecovacs/discover" />
+        <EcovacsSetupPage path="/dashboard/integration/device/ecovacs/setup" />
         <HomeKitPage path="/dashboard/integration/communication/homekit" />
         <OpenAIPage path="/dashboard/integration/communication/openai" />
 

front/src/components/boxs/device-in-room/DeviceRow.jsx

@@ -12,6 +12,7 @@ import NumberDeviceFeature from './device-features/NumberDeviceFeature';
 import CoverDeviceFeature from './device-features/CoverDeviceFeature';
 import ThermostatDeviceFeature from './device-features/ThermostatDeviceFeature';
 import AirConditioningModeDeviceFeature from './device-features/AirConditioningModeDeviceFeature';
+import VacbotModeDeviceFeature from './device-features/VacbotModeDeviceFeature';
 import LMHVolumeDeviceFeature from './device-features/LMHVolumeDeviceFeature';
 
 const ROW_TYPE_BY_FEATURE_TYPE = {
@@ -27,6 +28,7 @@ const ROW_TYPE_BY_FEATURE_TYPE = {
   [DEVICE_FEATURE_TYPES.CURTAIN.STATE]: CoverDeviceFeature,
   [DEVICE_FEATURE_TYPES.CURTAIN.POSITION]: MultiLevelDeviceFeature,
   [DEVICE_FEATURE_TYPES.THERMOSTAT.TARGET_TEMPERATURE]: ThermostatDeviceFeature,
+  [DEVICE_FEATURE_TYPES.VACBOT.STATE]: VacbotModeDeviceFeature,
   [DEVICE_FEATURE_TYPES.AIR_CONDITIONING.MODE]: AirConditioningModeDeviceFeature,
   [DEVICE_FEATURE_TYPES.AIR_CONDITIONING.TARGET_TEMPERATURE]: ThermostatDeviceFeature,
   [DEVICE_FEATURE_TYPES.SIREN.LMH_VOLUME]: LMHVolumeDeviceFeature,

front/src/components/boxs/device-in-room/SupportedFeatureTypes.jsx

@@ -13,6 +13,7 @@ const SUPPORTED_FEATURE_TYPES = [
   DEVICE_FEATURE_TYPES.THERMOSTAT.TARGET_TEMPERATURE,
   DEVICE_FEATURE_TYPES.AIR_CONDITIONING.MODE,
   DEVICE_FEATURE_TYPES.AIR_CONDITIONING.TARGET_TEMPERATURE,
+  DEVICE_FEATURE_TYPES.VACBOT.STATE,
   DEVICE_FEATURE_TYPES.SIREN.LMH_VOLUME,
   DEVICE_FEATURE_TYPES.SIREN.MELODY,
   DEVICE_FEATURE_TYPES.DURATION.DECIMAL

front/src/components/boxs/device-in-room/device-features/VacbotModeDeviceFeature.jsx

@@ -0,0 +1,86 @@
+import get from 'get-value';
+import { Text, Localizer } from 'preact-i18n';
+import cx from 'classnames';
+
+import { getDeviceName } from '../../../../utils/device';
+import { DeviceFeatureCategoriesIcon } from '../../../../utils/consts';
+import { VACBOT_MODE } from '../../../../../../server/utils/constants';
+
+const VacbotModeDeviceFeature = ({ children, ...props }) => {
+  const { device, deviceFeature } = props;
+  const { category, type, last_value: lastValue } = deviceFeature;
+
+  function updateValue(value) {
+    props.updateValueWithDebounce(deviceFeature, value);
+  }
+
+  function clean() {
+    updateValue(VACBOT_MODE.CLEAN);
+  }
+
+  function pause() {
+    updateValue(VACBOT_MODE.PAUSE);
+  }
+
+  function charge() {
+    updateValue(VACBOT_MODE.CHARGE);
+  }
+
+  function stop() {
+    updateValue(VACBOT_MODE.STOP);
+  }
+
+  return (
+    <tr>
+      <td>
+        <i class={`fe fe-${get(DeviceFeatureCategoriesIcon, `${category}.${type}`, { default: 'sliders' })}`} />
+      </td>
+      <td>{getDeviceName(device, deviceFeature)}</td>
+
+      <td class="py-0">
+        <div class="d-flex justify-content-end">
+          <div class="btn-group" role="group">
+            <Localizer>
+              <button
+                class={cx('btn btn-sm btn-secondary', 'fe', 'fe-play', {
+                  active: lastValue === VACBOT_MODE.CLEAN
+                })}
+                onClick={clean}
+                title={<Text id={`deviceFeatureAction.category.${category}.${type}.clean`} />}
+              />
+            </Localizer>
+            <Localizer>
+              <button
+                class={cx('btn btn-sm btn-secondary', 'fe', 'fe-pause', {
+                  active: lastValue === VACBOT_MODE.PAUSE
+                })}
+                onClick={pause}
+                title={<Text id={`deviceFeatureAction.category.${category}.${type}.pause`} />}
+              />
+            </Localizer>
+            <Localizer>
+              <button
+                class={cx('btn btn-sm', 'btn-secondary', 'fe', 'fe-square', {
+                  active: lastValue === VACBOT_MODE.STOP
+                })}
+                onClick={stop}
+                title={<Text id={`deviceFeatureAction.category.${category}.${type}.stop`} />}
+              />
+            </Localizer>
+            <Localizer>
+              <button
+                class={cx('btn btn-sm', 'btn-secondary', 'fe', 'fe-home', {
+                  active: lastValue === VACBOT_MODE.CHARGE
+                })}
+                onClick={charge}
+                title={<Text id={`deviceFeatureAction.category.${category}.${type}.charge`} />}
+              />
+            </Localizer>
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export default VacbotModeDeviceFeature;

front/src/components/boxs/device-in-room/device-features/sensor-value/SensorDeviceFeature.jsx

@@ -20,7 +20,8 @@ const DISPLAY_BY_FEATURE_CATEGORY = {
   [DEVICE_FEATURE_CATEGORIES.OPENING_SENSOR]: IconBinaryDeviceValue,
   [DEVICE_FEATURE_CATEGORIES.SIGNAL]: SignalQualityDeviceValue,
   [DEVICE_FEATURE_CATEGORIES.BUTTON]: ButtonClickDeviceValue,
-  [DEVICE_FEATURE_CATEGORIES.TEXT]: TextDeviceValue
+  [DEVICE_FEATURE_CATEGORIES.TEXT]: TextDeviceValue,
+  [DEVICE_FEATURE_CATEGORIES.VACBOT]: TextDeviceValue
 };
 
 const DISPLAY_BY_FEATURE_TYPE = {
@@ -31,7 +32,8 @@ const DEVICE_FEATURES_WITHOUT_EXPIRATION = [
   DEVICE_FEATURE_CATEGORIES.SMOKE_SENSOR,
   DEVICE_FEATURE_CATEGORIES.LEAK_SENSOR,
   DEVICE_FEATURE_CATEGORIES.BUTTON,
-  DEVICE_FEATURE_CATEGORIES.TEXT
+  DEVICE_FEATURE_CATEGORIES.TEXT,
+  DEVICE_FEATURE_CATEGORIES.VACBOT
 ];
 
 const SensorDeviceType = ({ children, ...props }) => {

front/src/components/boxs/vacbot/EditVacbot.jsx

@@ -0,0 +1,99 @@
+import { Component } from 'preact';
+import { connect } from 'unistore/preact';
+import { Text, Localizer } from 'preact-i18n';
+import BaseEditBox from '../baseEditBox';
+import actions from '../../../actions/dashboard/boxActions';
+
+const EditVacbotBox = ({ children, ...props }) => (
+  <BaseEditBox {...props} titleKey="dashboard.boxTitle.vacbot">
+    <div class={props.loading ? 'dimmer active' : 'dimmer'}>
+      <div class="loader" />
+
+      <div class="form-group">
+        <label>
+          <Text id="dashboard.boxes.vacbot.editVacbotLabel" />
+        </label>
+        <select onChange={props.updateBoxVacbot} class="form-control">
+          <option>
+            <Text id="global.emptySelectOption" />
+          </option>
+          {props.vacbots &&
+            props.vacbots.map(vacbot => (
+              <option selected={vacbot.selector === props.box.device_feature} value={vacbot.selector}>
+                {vacbot.name}
+              </option>
+            ))}
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label>
+          <Text id="dashboard.boxes.vacbot.editBoxNameLabel" />
+        </label>
+        <Localizer>
+          <input
+            type="text"
+            value={props.box.title}
+            onInput={props.updateBoxTitle}
+            class="form-control"
+            placeholder={<Text id="dashboard.boxes.vacbot.editBoxNamePlaceholder" />}
+          />
+        </Localizer>
+      </div>
+    </div>
+  </BaseEditBox>
+);
+
+class EditVacbotBoxComponent extends Component {
+  updateBoxVacbot = e => {
+    this.props.updateBoxConfig(this.props.x, this.props.y, {
+      device_feature: e.target.value
+    });
+  };
+  updateBoxTitle = e => {
+    this.props.updateBoxConfig(this.props.x, this.props.y, { title: e.target.value });
+  };
+
+  getVacbots = async () => {
+    await this.setState({
+      loading: true
+    });
+    try {
+      await this.setState({
+        error: false,
+        pending: true
+      });
+      const vacbots = await this.props.httpClient.get('/api/v1/service/ecovacs/vacbots');
+      this.setState({
+        vacbots,
+        pending: false,
+        loading: false
+      });
+    } catch (e) {
+      console.error(e);
+      this.setState({
+        error: true,
+        pending: false,
+        loading: false
+      });
+    }
+  };
+
+  componentDidMount() {
+    this.getVacbots();
+  }
+
+  render(props, { loading, vacbots }) {
+    return (
+      <EditVacbotBox
+        {...props}
+        vacbots={vacbots}
+        loading={loading}
+        updateBoxVacbot={this.updateBoxVacbot}
+        updateBoxTitle={this.updateBoxTitle}
+      />
+    );
+  }
+}
+
+export default connect('httpClient', actions)(EditVacbotBoxComponent);