homer/src/components/services/Rtorrent.vue

<template>
  <Generic :item="item">
    <template #content>
      <p class="title is-4">{{ item.name }}</p>
      <p class="subtitle is-6">
        <span v-if="error" class="error">An error has occurred.</span>
        <template v-else>
          <span class="down">
            <i class="fas fa-download"></i> {{ downRate }}
          </span>
          <span class="up"> <i class="fas fa-upload"></i> {{ upRate }} </span>
        </template>
      </p>
    </template>
    <template #indicator>
      <span v-if="!error" class="count"
        >{{ count }}
        <template v-if="count === 1">torrent</template>
        <template v-else>torrents</template>
      </span>
    </template>
  </Generic>
</template>

<script>
import Generic from "./Generic.vue";

// Units to add to download and upload rates.
const units = ["B", "kiB", "MiB", "GiB"];

// Take the rate in bytes and keep dividing it by 1k until the lowest
// value for which we have a unit is determined. Return the value with
// up to two decimals as a string and unit/s appended.
const displayRate = (rate) => {
  let i = 0;

  while (rate > 1000 && i < units.length) {
    rate /= 1000;
    i++;
  }

  return (
    Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(
      rate || 0,
    ) + ` ${units[i]}/s`
  );
};

export default {
  name: "rTorrent",
  props: { item: Object },
  components: { Generic },
  // Properties for download, upload, torrent count and errors.
  data: () => ({ dl: null, ul: null, count: null, error: null }),
  // Computed properties for the rate labels.
  computed: {
    downRate: function () {
      return displayRate(this.dl);
    },
    upRate: function () {
      return displayRate(this.ul);
    },
  },
  created() {
    // Set intervals if configured so the rates and/or torrent count
    // will be updated.
    const rateInterval = parseInt(this.item.rateInterval, 10) || 0;
    const torrentInterval = parseInt(this.item.torrentInterval, 10) || 0;

    if (rateInterval > 0) {
      setInterval(() => this.fetchRates(), rateInterval);
    }

    if (torrentInterval > 0) {
      setInterval(() => this.fetchCount(), torrentInterval);
    }

    // Fetch the initial values.
    this.fetchRates();
    this.fetchCount();
  },
  methods: {
    // Perform two calls to the XML-RPC service and fetch download
    // and upload rates. Values are saved to the `ul` and `dl`
    // properties.
    fetchRates: async function () {
      this.getRate("throttle.global_up.rate")
        .then((ul) => (this.ul = ul))
        .catch(() => (this.error = true));

      this.getRate("throttle.global_down.rate")
        .then((dl) => (this.dl = dl))
        .catch(() => (this.error = true));
    },
    // Perform a call to the XML-RPC service to fetch the number of
    // torrents.
    fetchCount: async function () {
      this.getCount().catch(() => (this.error = true));
    },
    // Fetch a numeric value from the XML-RPC service by requesting
    // the specified method name and parsing the XML. The response
    // is expected to adhere to the structure of a single numeric
    // value.
    getRate: async function (methodName) {
      return this.getXml(methodName).then((xml) =>
        parseInt(
          xml.getElementsByTagName("value")[0].firstChild.textContent,
          10,
        ),
      );
    },
    // Fetch the numer of torrents by requesting the download list
    // and counting the number of entries therein.
    getCount: async function () {
      return this.getXml("download_list").then((xml) => {
        const arrayEl = xml.getElementsByTagName("array");
        this.count = arrayEl
          ? arrayEl[0].getElementsByTagName("value").length
          : 0;
      });
    },
    // Perform a call to the XML-RPC service and parse the response
    // as XML, which is then returned.
    getXml: async function (methodName) {
      const headers = { "Content-Type": "text/xml" };

      if (this.item.username && this.item.password) {
        headers[
          "Authorization"
        ] = `${this.item.username}:${this.item.password}`;
      }

      return fetch(`${this.item.xmlrpc.replace(/\/$/, "")}/RPC2`, {
        method: "POST",
        headers,
        body: `<methodCall><methodName>${methodName}</methodName></methodCall>`,
      })
        .then((response) => {
          if (!response.ok) {
            throw Error(response.statusText);
          }

          return response.text();
        })
        .then((text) =>
          Promise.resolve(new DOMParser().parseFromString(text, "text/xml")),
        );
    },
  },
};
</script>

<style scoped lang="scss">
.error {
  color: #e51111 !important;
}
.down {
  margin-right: 1em;
}
.count {
  color: var(--text);
  font-size: 0.8em;
}
</style>