-<template>\r
- <Generic :item="item">\r
- <template #content>\r
- <p class="title is-4">{{ item.name }}</p>\r
- <p class="subtitle is-6">\r
- <span v-if="error" class="error">An error has occurred.</span>\r
- <template v-else>\r
- <span class="down monospace">\r
- <p class="fas fa-download "></p> {{ downRate }}\r
- </span>\r
- <span class="up monospace">\r
- <p class="fas fa-upload"></p> {{ upRate }}\r
- </span>\r
- </template>\r
- </p>\r
- </template>\r
- <template #indicator>\r
- <span v-if="!error" class="count">{{ count }}\r
- <template v-if="count === 1">torrent</template>\r
- <template v-else>torrents</template>\r
- </span>\r
- </template>\r
- </Generic>\r
-</template>\r
-\r
-<script>\r
-import service from "@/mixins/service.js";\r
-import Generic from "./Generic.vue";\r
-const units = ["B", "KB", "MB", "GB"];\r
-\r
-// Take the rate in bytes and keep dividing it by 1k until the lowest\r
-// value for which we have a unit is determined. Return the value with\r
-// up to two decimals as a string and unit/s appended.\r
-const displayRate = (rate) => {\r
- let i = 0;\r
-\r
- while (rate > 1000 && i < units.length) {\r
- rate /= 1000;\r
- i++;\r
- }\r
- return (\r
- Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(\r
- rate || 0\r
- ) + ` ${units[i]}/s`\r
- );\r
-};\r
-\r
-export default {\r
- name: "qBittorrent",\r
- mixins: [service],\r
- props: { item: Object },\r
- components: { Generic },\r
- data: () => ({ dl: null, ul: null, count: null, error: null }),\r
- computed: {\r
- downRate: function () {\r
- return displayRate(this.dl);\r
- },\r
- upRate: function () {\r
- return displayRate(this.ul);\r
- },\r
- },\r
- created() {\r
- const rateInterval = parseInt(this.item.rateInterval, 10) || 0;\r
- const torrentInterval = parseInt(this.item.torrentInterval, 10) || 0;\r
- if (rateInterval > 0) {\r
- setInterval(() => this.getRate(), rateInterval);\r
- }\r
- if (torrentInterval > 0) {\r
- setInterval(() => this.fetchCount(), torrentInterval);\r
- }\r
-\r
- this.getRate();\r
- this.fetchCount();\r
- },\r
- methods: {\r
- fetchCount: async function () {\r
- try {\r
- const body = await this.fetch('/api/v2/torrents/info');\r
- this.error = false;\r
- this.count = body.length;\r
- } catch (e) {\r
- this.error = true;\r
- console.error(e);\r
- }\r
- },\r
- getRate: async function () {\r
- try {\r
- const body = await this.fetch('/api/v2/transfer/info');\r
- this.error = false;\r
- this.dl = body.dl_info_speed;\r
- this.ul = body.up_info_speed;\r
- } catch (e) {\r
- this.error = true;\r
- console.error(e);\r
- }\r
- },\r
- },\r
-};\r
-\r
-</script>\r
-\r
-<style scoped lang="scss">\r
-.error {\r
- color: #e51111 !important;\r
-}\r
-\r
-.down {\r
- margin-right: 1em;\r
-}\r
-\r
-.count {\r
- color: var(--text);\r
- font-size: 0.8em;\r
-}\r
-\r
-.monospace {\r
- font-weight: 300;\r
- font-family: monospace;\r
-}\r
-</style>
\ No newline at end of file
+<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 monospace">
+ <p class="fas fa-download"></p>
+ {{ downRate }}
+ </span>
+ <span class="up monospace">
+ <p class="fas fa-upload"></p>
+ {{ 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 service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+const units = ["B", "KB", "MB", "GB"];
+
+// 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: "qBittorrent",
+ mixins: [service],
+ props: { item: Object },
+ components: { Generic },
+ data: () => ({ dl: null, ul: null, count: null, error: null }),
+ computed: {
+ downRate: function () {
+ return displayRate(this.dl);
+ },
+ upRate: function () {
+ return displayRate(this.ul);
+ },
+ },
+ created() {
+ const rateInterval = parseInt(this.item.rateInterval, 10) || 0;
+ const torrentInterval = parseInt(this.item.torrentInterval, 10) || 0;
+ if (rateInterval > 0) {
+ setInterval(() => this.getRate(), rateInterval);
+ }
+ if (torrentInterval > 0) {
+ setInterval(() => this.fetchCount(), torrentInterval);
+ }
+
+ this.getRate();
+ this.fetchCount();
+ },
+ methods: {
+ fetchCount: async function () {
+ try {
+ const body = await this.fetch("/api/v2/torrents/info");
+ this.error = false;
+ this.count = body.length;
+ } catch (e) {
+ this.error = true;
+ console.error(e);
+ }
+ },
+ getRate: async function () {
+ try {
+ const body = await this.fetch("/api/v2/transfer/info");
+ this.error = false;
+ this.dl = body.dl_info_speed;
+ this.ul = body.up_info_speed;
+ } catch (e) {
+ this.error = true;
+ console.error(e);
+ }
+ },
+ },
+};
+</script>
+
+<style scoped lang="scss">
+.error {
+ color: #e51111 !important;
+}
+
+.down {
+ margin-right: 1em;
+}
+
+.count {
+ color: var(--text);
+ font-size: 0.8em;
+}
+
+.monospace {
+ font-weight: 300;
+ font-family: monospace;
+}
+</style>
projects / github / bastienwirtz / homer.git / blobdiff