xxx.js

class CustomFanCard extends Polymer.Element {
  static get template() {
    return Polymer.html `
      <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
      <style>
        :host {
            line-height: 1.5;
        }
        .speed {
            min-width: 35px;
            max-width: 35px;
            margin: 7px 0px;
        }
        ha-entity-toggle {
            margin-left: 10px;
        }
      </style>
      <hui-generic-entity-row hass="[[hass]]" config="[[_config]]">
        <div class='horizontal justified layout' on-click="stopPropagation">
            <paper-icon-button on-tap='setSpeed' disabled='[[_isLowSpeed]]' raised noink name=this._speed.low icon="mdi:numeric-1-box"></paper-icon-button>
            <paper-icon-button on-tap='setSpeed' disabled='[[_isMedSpeed]]' raised noink name=this._speed.medium icon="mdi:numeric-2-box"></paper-icon-button>
            <paper-icon-button on-tap='setSpeed' disabled='[[_isHghSpeed]]' raised noink name=this._speed.high icon="mdi:numeric-3-box"></paper-icon-button>
            <ha-entity-toggle hass="[[hass]]" state-obj="[[_stateObj]]"></ha-entity-toggle>
        </div>
      </hui-generic-entity-row>
    `;
  }

  static get properties() {
    return {
      hass: {
        type: Object,
        observer: "hassChanged"
      },
      _config: Object,
      _stateObj: Object,
      _isLowSpeed: Boolean,
      _isMedSpeed: Boolean,
      _isHghSpeed: Boolean,
      _speed: {
        off: "off",
        low: "low",
        medium: "medium",
        high: "high",
      }
    };
  }

  setConfig(config) {
    this._config = config;
  }

  hassChanged(hass) {
    const stateObj = hass.states[this._config.entity];
    let speed;
    if (stateObj && stateObj.attributes) {
      if (stateObj.state == this._speed.off) {
        speed = this._speed.off;
      } else {
        speed = stateObj.attributes.speed || this._speed.off;
      }
    }

    this.setProperties({
      _stateObj: stateObj,
      _isLowSpeed: speed === this._speed.low,
      _isMedSpeed: speed === this._speed.medium,
      _isHghSpeed: speed === this._speed.high
    });
  }

  stopPropagation(e) {
    e.stopPropagation();
  }

  setFanSpeed(_speed) {
    return this.hass.callService("fan", "set_speed", {
      entity_id: this._config.entity,
      speed: _speed
    }).then(r => {
      console.log("COPY chỗ này cho t xem", r);
      return r;
    }).catch(err => console.error("HOANG VL", err)); // Nếu lỗi thì in ra lỗi
  }

  turnFanOscil(_status = true) {
    let service = (!_status) ? "turn_off" : "turn_on";
    return this.hass.callService("switch", service, {
      entity_id: "switch.fan_oscil"
    }).catch(err => console.error("HOANG VL", err)); // Nếu lỗi thì in ra lỗi
  }

  setSpeed(e) {
    const speed = e.currentTarget.getAttribute("name");
    const stateObj = this.hass.states[this._config.entity];
    const currentSpeed = stateObj.attributes.speed;

    // turn off fan
    if (speed === this._speed.off) {
      return this.setFanSpeed(this._speed.off)
        .then(() => this.turnFanOscil(false));
    }

    // turn on fan
    if (currentSpeed == this._speed.off) {

      // low => set fan low sau đó gọi fanoscil 
      if (speed === this._speed.low) {
        return this.setFanSpeed(this._speed.low)
          .then(() => this.turnFanOscil());
      }

      // medium
      if (speed === this._speed.medium) {
        return this.setFanSpeed(this._speed.low)
          .then(() => this.setFanSpeed(this._speed.medium))
          .then(() => this.turnFanOscil());
      }

      // high
      if (speed === this._speed.high) {
        return this.setFanSpeed(this._speed.low)
          .then(() => this.setFanSpeed(this._speed.medium))
          .then(() => this.setFanSpeed(this._speed.high))
          .then(() => this.turnFanOscil());
      }
    }

    // change speed from low
    if (currentSpeed == this._speed.low) {
      // to medium
      if (speed === this._speed.medium) return this.setFanSpeed(this._speed.medium);

      // to high
      if (speed === this._speed.high) {
        return this.setFanSpeed(this._speed.medium)
          .then(() => this.setFanSpeed(this._speed.high));
      }
    }

    // change speed from medium
    if (currentSpeed == this._speed.medium) {
      // to high
      if (speed === this._speed.high) return this.setFanSpeed(this._speed.high);

      // to high
      if (speed === this._speed.low) {
        return this.setFanSpeed(this._speed.high)
          .then(() => this.setFanSpeed(this._speed.low));
      }
    }

    // change speed from high
    if (currentSpeed == this._speed.high) {

      // to high
      if (speed === this._speed.low) return this.setFanSpeed(this._speed.low);

      // to high
      if (speed === this._speed.medium) {
        return this.setFanSpeed(this._speed.low)
          .then(() => this.setFanSpeed(this._speed.medium));
      }
    }
  }
}

customElements.define("custom-fan-card", CustomFanCard);