GladysProject/Gladys

View on GitHub
front/src/routes/integration/all/zigbee2mqtt/setup-page/SetupTab.jsx

Summary

Maintainability
F
1 wk
Test Coverage
import { Component } from 'preact';
import { Text, MarkupText } from 'preact-i18n';
import { RequestStatus } from '../../../../../utils/consts';
import CheckStatus from './CheckStatus.js';
import classNames from 'classnames/bind';
import style from './style.css';

let cx = classNames.bind(style);

class SetupTab extends Component {
  toggle = () => {
    let checked = this.props.z2mEnabled;
    checked = !checked;

    if (checked) {
      this.props.startContainer();
    } else {
      this.props.stopContainer();
    }

    this.props.z2mEnabled = checked;
  };

  render(props, {}) {
    return (
      <div class="card">
        <div class="card-header">
          <h1 class="card-title">
            <Text id="integration.zigbee2mqtt.setup.title" />
          </h1>
        </div>
        <div class="card-body">
          <p>
            <MarkupText id="integration.zigbee2mqtt.setup.description" />
          </p>
          {props.zigbee2mqttContainerStatus === RequestStatus.Error && (
            <p class="alert alert-danger">
              <Text id="integration.zigbee2mqtt.setup.error" />
            </p>
          )}
          <CheckStatus />

          {props.zigbee2mqttConnected && (
            <p class="alert alert-success">
              <Text id="integration.zigbee2mqtt.setup.connected" />
            </p>
          )}

          {props.zigbee2mqttConnected && props.z2mUrl && (
            <div class="form-group">
              <MarkupText
                id="integration.zigbee2mqtt.setup.connectionUrl"
                fields={{
                  url: props.z2mUrl
                }}
              />
            </div>
          )}

          <div class="form-group">
            <label for="enableZigbee2mqtt" class="form-label">
              <Text id={`integration.zigbee2mqtt.setup.enableLabel`} />
            </label>
            <label class="custom-switch">
              <input
                type="checkbox"
                id="enableZigbee2mqtt"
                name="enableZigbee2mqtt"
                class="custom-switch-input"
                checked={props.z2mEnabled}
                onClick={this.toggle}
                disabled={!props.dockerBased || !props.networkModeValid || !props.usbConfigured}
              />
              <span class="custom-switch-indicator" />
              <span class="custom-switch-description">
                {!props.dockerBased && <Text id="integration.zigbee2mqtt.setup.nonDockerEnv" />}
                {props.dockerBased && !props.networkModeValid && (
                  <Text id="integration.zigbee2mqtt.setup.invalidDockerNetwork" />
                )}
                {props.dockerBased && props.networkModeValid && (
                  <Text id="integration.zigbee2mqtt.setup.enableZigbee2mqtt" />
                )}
              </span>
            </label>
          </div>
          <div class="card-header d-none d-sm-block">
            <h2 class="card-title">
              <Text id="integration.zigbee2mqtt.setup.serviceStatus" />
            </h2>
          </div>
          <div class="row justify-content-center">
            <div class="col-auto">
              <table class="table table-responsive table-borderless table-sm d-none d-sm-block">
                <thead class="text-center">
                  <tr>
                    <th class="text-center">
                      <Text id="integration.zigbee2mqtt.setup.gladys" />
                    </th>
                    <th class="text-center" />
                    <th class="text-center">{props.mqttExist && 'MQTT'}</th>
                    <th class="text-center" />
                    <th class="text-center">{props.zigbee2mqttExist && 'Zigbee2mqtt'}</th>
                  </tr>
                </thead>
                <tbody class="text-center">
                  <tr>
                    <td class="text-center">
                      <img
                        src="/assets/icons/favicon-96x96.png"
                        alt={`Gladys`}
                        title={`Gladys`}
                        width="80"
                        height="80"
                      />
                    </td>
                    {props.mqttRunning && (
                      <td className={style.tdCenter}>
                        <hr className={style.line} />
                        <i
                          className={cx('fe', {
                            'fe-check': props.gladysConnected,
                            'fe-x': !props.gladysConnected,
                            greenIcon: props.gladysConnected,
                            redIcon: !props.gladysConnected
                          })}
                        />
                        <hr className={style.line} />
                      </td>
                    )}
                    <td class="text-center">
                      {props.mqttExist && (
                        <img
                          src="/assets/integrations/logos/logo_mqtt.png"
                          alt={`MQTT`}
                          title={`MQTT`}
                          width="80"
                          height="80"
                        />
                      )}
                    </td>
                    {props.zigbee2mqttRunning && (
                      <td className={('text-center', style.tdCenter)}>
                        <hr className={style.line} />
                        <i
                          className={cx('fe', {
                            'fe-check': props.zigbee2mqttConnected,
                            'fe-x': !props.zigbee2mqttConnected,
                            greenIcon: props.zigbee2mqttConnected,
                            redIcon: !props.zigbee2mqttConnected
                          })}
                        />
                        <hr className={style.line} />
                      </td>
                    )}
                    <td class="text-center">
                      {props.zigbee2mqttExist && (
                        <img
                          src="/assets/integrations/logos/logo_zigbee2mqtt.png"
                          alt={`Zigbee2mqtt`}
                          title={`Zigbee2mqtt`}
                          width="80"
                          height="80"
                        />
                      )}
                    </td>
                  </tr>
                  <tr>
                    <td class="text-center">
                      <div class="tag tag-success">
                        <Text id={`systemSettings.containerState.running`} />
                      </div>
                    </td>
                    <td class="text-center" />
                    <td class="text-center">
                      {props.mqttRunning && (
                        <span class="tag tag-success">
                          <Text id={`systemSettings.containerState.running`} />
                        </span>
                      )}
                    </td>
                    <td class="text-center" />
                    <td class="text-center">
                      {props.zigbee2mqttRunning && (
                        <span class="tag tag-success">
                          <Text id={`systemSettings.containerState.running`} />
                        </span>
                      )}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="card-header d-sm-none">
            <h2 class="card-title">
              <Text id="integration.zigbee2mqtt.setup.containersStatus" />
            </h2>
          </div>
          <div class="row justify-content-center d-sm-none">
            <div class="col-auto">
              <table class="table table-responsive table-borderless table-sm">
                <thead class="text-center">
                  <tr>
                    <th>
                      <Text id="systemSettings.containers" />
                    </th>
                    <th>
                      <Text id="integration.zigbee2mqtt.setup.status" />
                    </th>
                  </tr>
                </thead>
                <tbody class="text-center">
                  <tr>
                    <td>
                      <Text id="integration.zigbee2mqtt.setup.gladys" />
                    </td>
                    <td>
                      <span class="tag tag-success">
                        <Text id={`systemSettings.containerState.running`} />
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <Text id="integration.zigbee2mqtt.setup.mqtt" />
                    </td>
                    <td>
                      {props.mqttRunning && (
                        <span class="tag tag-success">
                          <Text id={`systemSettings.containerState.running`} />
                        </span>
                      )}
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <Text id="integration.zigbee2mqtt.setup.zigbee2Mqtt" />
                    </td>
                    <td>
                      {props.zigbee2mqttRunning && (
                        <span class="tag tag-success">
                          <Text id={`systemSettings.containerState.running`} />
                        </span>
                      )}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="card-header d-sm-none">
            <h2 class="card-title">
              <Text id="integration.zigbee2mqtt.setup.serviceStatus" />
            </h2>
          </div>
          <div class="row justify-content-center d-sm-none">
            <div class="col-auto">
              <table class="table table-responsive table-borderless table-sm">
                <thead class="text-center">
                  <tr>
                    <th>
                      <Text id="integration.zigbee2mqtt.setup.link" />
                    </th>
                    <th>
                      <Text id="integration.zigbee2mqtt.setup.status" />
                    </th>
                  </tr>
                </thead>
                <tbody class="text-center">
                  <tr>
                    <td>
                      <Text id="integration.zigbee2mqtt.setup.gladysMqttLink" />
                    </td>
                    <td>
                      {props.mqttRunning && (
                        <i
                          className={cx('fe', {
                            'fe-check': props.gladysConnected,
                            'fe-x': !props.gladysConnected,
                            greenIcon: props.gladysConnected,
                            redIcon: !props.gladysConnected
                          })}
                        />
                      )}
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <Text id="integration.zigbee2mqtt.setup.mqttZigbeeLink" />
                    </td>
                    <td>
                      {props.zigbee2mqttRunning && (
                        <i
                          className={cx('fe', {
                            'fe-check': props.zigbee2mqttConnected,
                            'fe-x': !props.zigbee2mqttConnected,
                            greenIcon: props.zigbee2mqttConnected,
                            redIcon: !props.zigbee2mqttConnected
                          })}
                        />
                      )}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default SetupTab;