@homebridge-plugins/homebridge-ecovacs/lib/homebridge-ui/public/index.html

Homebridge plugin to integrate Ecovacs Deebot devices into HomeKit.

<style>
  .dark-mode {
    background-color: #242424;
    color: lightgrey;

    .form-control {
      background-color: #333333 !important;
      border: none !important;
      color: #eeeeee !important;
    }

    thead, tbody, tr {
      border-style: hidden;
    }

    th {
      color: #eeeeee !important;
      font-weight: 500 !important;
    }
  }
  select {
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position:
      calc(100% - 20px) calc(1em + 2px),
      calc(100% - 15px) calc(1em + 2px),
      calc(100% - 2.5em) 0.5em;
    background-size:
      5px 5px,
      5px 5px,
      1px 1.5em;
    background-repeat: no-repeat;
  }
</style>
<p class="text-center">
  <img
    src="https://user-images.githubusercontent.com/43026681/101321841-f0eb5280-385d-11eb-8dd4-f57113f6e078.png"
    alt="homebridge-ecovacs logo"
    style="width: 60%;"
  />
</p>
<div id="pageIntro" class="text-center" style="display: none;">
  <p class="lead">Thank you for installing <strong>homebridge-ecovacs</strong></p>
  <p>You will need to enter your Ecovacs username, password and region on the next page</p>
  <button type="button" class="btn btn-primary" id="introContinue">Continue &rarr;</button>
</div>
<div
  id="menuWrapper"
  class="btn-group w-100 mb-0"
  role="group"
  aria-label="UI Menu"
  style="display: none;"
>
  <button type="button" class="btn btn-primary ml-0" id="menuSettings">Settings</button>
  <button type="button" class="btn btn-primary" id="menuDevices">My Devices</button>
  <button type="button" class="btn btn-primary mr-0" id="menuHome">Support</button>
</div>
<div id="pageDevices" class="mt-4" style="display: none;">
  <div id="deviceInfo">
    <form>
      <div class="form-group">
        <select class="form-control" id="deviceSelect"></select>
      </div>
    </form>
    <table class="table w-100 mt-3" id="deviceTable" style="display: none;">
      <thead>
        <tr class="table-active">
          <th scope="col" style="width: 40%;">Device Name</th>
          <th scope="col" style="width: 60%;" id="displayName"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Device ID</th>
          <td id="deviceId"></td>
        </tr>
        <tr>
          <th scope="row">Cloud Status</th>
          <td id="deviceOnline"></td>
        </tr>
        <tr>
          <th scope="row">Model</th>
          <td id="deviceModel"></td>
        </tr>
        <tr>
          <th scope="row">Company</th>
          <td id="deviceCompany"></td>
        </tr>
        <tr>
          <th scope="row">Class (Resource)</th>
          <td id="deviceClassResource"></td>
        </tr>
        <tr>
          <th scope="row">IP Address</th>
          <td id="deviceIP"></td>
        </tr>
        <tr>
          <th scope="row">MAC Address</th>
          <td id="deviceMac"></td>
        </tr>
        <tr>
          <td colspan="2" style="text-align: center" id="imgIcon"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div id="pageSupport" class="mt-4" style="display: none;">
  <p class="text-center lead">Thank you for using <strong>homebridge-ecovacs</strong></p>
  <p class="text-center">The links below will take you to our GitHub wiki</p>
  <h4>Setup</h4>
  <ul>
    <li>
      <a href="https://github.com/homebridge-plugins/homebridge-ecovacs/wiki/Installation" target="_blank"
        >Installation</a
      >
    </li>
    <li>
      <a href="https://github.com/homebridge-plugins/homebridge-ecovacs/wiki/Configuration" target="_blank"
        >Configuration</a
      >
    </li>
    <li>
      <a href="https://github.com/homebridge-plugins/homebridge-ecovacs/wiki/Beta-Version" target="_blank"
        >Beta Version</a
      >
    </li>
    <li>
      <a href="https://github.com/homebridge-plugins/homebridge-ecovacs/wiki/Node-Version" target="_blank"
        >Node Version</a
      >
    </li>
  </ul>
  <h4>Features</h4>
  <ul>
    <li>
      <a href="https://github.com/homebridge-plugins/homebridge-ecovacs/wiki/Supported-Devices" target="_blank"
        >Supported Devices</a
      >
    </li>
    <li>
      <a href="https://github.com/homebridge-plugins/homebridge-ecovacs/wiki/Speed-Control" target="_blank"
        >Speed Control</a
      >
    </li>
    <li>
      <a href="https://github.com/homebridge-plugins/homebridge-ecovacs/wiki/Custom-Areas" target="_blank"
        >Custom Areas</a
      >
    </li>
  </ul>
  <h4>Help/About</h4>
  <ul>
    <li>
      <a href="https://github.com/homebridge-plugins/homebridge-ecovacs/wiki/Common-Errors" target="_blank"
        >Common Errors</a
      >
    </li>
    <li>
      <a href="https://github.com/homebridge-plugins/homebridge-ecovacs/issues/new/choose" target="_blank"
        >Support Request</a
      >
    </li>
    <li>
      <a href="https://github.com/homebridge-plugins/homebridge-ecovacs/blob/latest/CHANGELOG.md" target="_blank"
        >Changelog</a
      >
    </li>
    <li><a href="https://github.com/sponsors/bwp91" target="_blank">About Me</a></li>
  </ul>
  <h4>Credits</h4>
  <ul>
    <li>
      To the owner of
      <a href="https://github.com/mrbungle64/ecovacs-deebot.js" target="_blank"
        >ecovacs-deebot.js</a
      >
      client: <a href="https://github.com/mrbungle64" target="_blank">@mrbungle64</a>.
    </li>
    <li>
      To the owner of
      <a href="https://github.com/nicoduj/homebridge-deebotEcovacs" target="_blank"
        >homebridge-deebotEcovacs</a
      >: <a href="https://github.com/nicoduj" target="_blank">@nicoduj</a>.
    </li>
    <li>
      To the creator of the awesome plugin header logo:
      <a href="https://www.instagram.com/keryan.me" target="_blank">Keryan Belahcene</a>.
    </li>
    <li>
      To the creators/contributors of
      <a href="https://homebridge.io" target="_blank">Homebridge</a> who make this plugin possible.
    </li>
  </ul>
  <h4>Disclaimer</h4>
  <ul>
    <li>
      I am in no way affiliated with Ecovacs and this plugin is a personal project that I maintain
      in my free time.
    </li>
    <li>Use this plugin entirely at your own risk - please see licence for more information.</li>
  </ul>
</div>
<script>
  ;(async () => {
    try {
      const currentConfig = await homebridge.getPluginConfig()
      showIntro = () => {
        homebridge.disableSaveButton?.()
        const introContinue = document.getElementById('introContinue')
        introContinue.addEventListener('click', () => {
          homebridge.showSpinner()
          document.getElementById('pageIntro').style.display = 'none'
          document.getElementById('menuWrapper').style.display = 'inline-flex'
          showSettings()
          homebridge.hideSpinner()
        })
        document.getElementById('pageIntro').style.display = 'block'
      }
      showDevices = async () => {
        homebridge.showSpinner()
        homebridge.disableSaveButton?.()
        homebridge.hideSchemaForm()
        document.getElementById('menuHome').classList.remove('btn-elegant')
        document.getElementById('menuHome').classList.add('btn-primary')
        document.getElementById('menuDevices').classList.add('btn-elegant')
        document.getElementById('menuDevices').classList.remove('btn-primary')
        document.getElementById('menuSettings').classList.remove('btn-elegant')
        document.getElementById('menuSettings').classList.add('btn-primary')
        document.getElementById('pageSupport').style.display = 'none'
        document.getElementById('pageDevices').style.display = 'block'
        const cachedAccessories =
          typeof homebridge.getCachedAccessories === 'function'
            ? await homebridge.getCachedAccessories()
            : await homebridge.request('/getCachedAccessories')
        if (cachedAccessories.length > 0) {
          cachedAccessories.sort((a, b) => {
            return a.displayName.toLowerCase() > b.displayName.toLowerCase()
              ? 1
              : b.displayName.toLowerCase() > a.displayName.toLowerCase()
              ? -1
              : 0
          })
        }
        const deviceSelect = document.getElementById('deviceSelect')
        deviceSelect.innerHTML = ''
        cachedAccessories.forEach(a => {
          const option = document.createElement('option')
          option.text = a.displayName
          option.value = a.context.ecoDeviceId
          deviceSelect.add(option)
        })
        showDeviceInfo = async deviceId => {
          homebridge.showSpinner()
          const thisAcc = cachedAccessories.find(x => x.context.ecoDeviceId === deviceId)
          const context = thisAcc.context
          document.getElementById('displayName').innerHTML = thisAcc.displayName
          document.getElementById('deviceId').innerHTML = context.ecoDeviceId || 'N/A'
          document.getElementById('deviceOnline').innerHTML = context.isOnline
            ? '<i class="fas fa-circle mr-1 green-text"></i> Online'
            : '<i class="fas fa-circle mr-1 red-text"></i> Offline'
          document.getElementById('deviceModel').innerHTML = context.ecoModel || 'N/A'
          document.getElementById('deviceCompany').innerHTML = context.ecoCompany || 'N/A'
          document.getElementById('deviceClassResource').innerHTML =
            (context.ecoClass || 'N/A') + ' (' + (context.ecoResource || 'N/A') + ')'

          document.getElementById('deviceIP').innerHTML = context.ipAddress || 'N/A'
          document.getElementById('deviceMac').innerHTML = context.macAddress || 'N/A'
          document.getElementById('imgIcon').innerHTML = context.ecoImage
            ? '<img src="' + context.ecoImage + '" style="width: 150px;">'
            : ''
          document.getElementById('deviceTable').style.display = 'inline-table'
          homebridge.hideSpinner()
        }
        deviceSelect.addEventListener('change', event => showDeviceInfo(event.target.value))
        if (cachedAccessories.length > 0) {
          showDeviceInfo(cachedAccessories[0].context.ecoDeviceId)
        } else {
          const option = document.createElement('option')
          option.text = 'No Devices'
          deviceSelect.add(option)
          deviceSelect.disabled = true
        }
        homebridge.hideSpinner()
      }
      showSupport = () => {
        homebridge.showSpinner()
        homebridge.disableSaveButton?.()
        homebridge.hideSchemaForm()
        document.getElementById('menuHome').classList.add('btn-elegant')
        document.getElementById('menuHome').classList.remove('btn-primary')
        document.getElementById('menuDevices').classList.remove('btn-elegant')
        document.getElementById('menuDevices').classList.add('btn-primary')
        document.getElementById('menuSettings').classList.remove('btn-elegant')
        document.getElementById('menuSettings').classList.add('btn-primary')
        document.getElementById('pageSupport').style.display = 'block'
        document.getElementById('pageDevices').style.display = 'none'
        homebridge.hideSpinner()
      }
      showSettings = () => {
        homebridge.showSpinner()
        homebridge.enableSaveButton?.()
        document.getElementById('menuHome').classList.remove('btn-elegant')
        document.getElementById('menuHome').classList.add('btn-primary')
        document.getElementById('menuDevices').classList.remove('btn-elegant')
        document.getElementById('menuDevices').classList.add('btn-primary')
        document.getElementById('menuSettings').classList.add('btn-elegant')
        document.getElementById('menuSettings').classList.remove('btn-primary')
        document.getElementById('pageSupport').style.display = 'none'
        document.getElementById('pageDevices').style.display = 'none'
        homebridge.showSchemaForm()
        homebridge.hideSpinner()
      }
      menuHome.addEventListener('click', () => showSupport())
      menuDevices.addEventListener('click', () => showDevices())
      menuSettings.addEventListener('click', () => showSettings())
      if (currentConfig.length) {
        document.getElementById('menuWrapper').style.display = 'inline-flex'
        showSettings()
      } else {
        currentConfig.push({ name: 'Deebot' })
        await homebridge.updatePluginConfig(currentConfig)
        showIntro()
      }
    } catch (err) {
      homebridge.toast.error(err.message, 'Error')
    } finally {
      homebridge.hideSpinner()
    }
  })()
</script>