Apply lint fixes

This commit is contained in:
Bastien Wirtz 2022-10-31 10:12:15 +01:00
parent 51ba5ff503
commit bdad8933ff
2 changed files with 185 additions and 172 deletions

View File

@ -8,14 +8,13 @@
<span class="down"> <span class="down">
<i class="fas fa-download"></i> {{ downRate }} <i class="fas fa-download"></i> {{ downRate }}
</span> </span>
<span class="up"> <span class="up"> <i class="fas fa-upload"></i> {{ upRate }} </span>
<i class="fas fa-upload"></i> {{ upRate }}
</span>
</template> </template>
</p> </p>
</template> </template>
<template #indicator> <template #indicator>
<span v-if="!error" class="count">{{ count }} <span v-if="!error" class="count"
>{{ count }}
<template v-if="count === 1">torrent</template> <template v-if="count === 1">torrent</template>
<template v-else>torrents</template> <template v-else>torrents</template>
</span> </span>
@ -24,38 +23,41 @@
</template> </template>
<script> <script>
import Generic from './Generic.vue'; import Generic from "./Generic.vue";
// Units to add to download and upload rates. // Units to add to download and upload rates.
const units = ['B', 'kiB', 'MiB', 'GiB']; const units = ["B", "kiB", "MiB", "GiB"];
// Take the rate in bytes and keep dividing it by 1k until the lowest // 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 // value for which we have a unit is determined. Return the value with
// up to two decimals as a string and unit/s appended. // up to two decimals as a string and unit/s appended.
const displayRate = (rate) => { const displayRate = (rate) => {
let i = 0; let i = 0;
while (rate > 1000 && i < units.length) { while (rate > 1000 && i < units.length) {
rate /= 1000; rate /= 1000;
i++; i++;
} }
return Intl.NumberFormat(undefined, {maximumFractionDigits: 2}) return (
.format(rate || 0) + ` ${units[i]}/s`; Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(
} rate || 0
) + ` ${units[i]}/s`
);
};
export default { export default {
name: 'rTorrent', name: "rTorrent",
props: {item: Object}, props: { item: Object },
components: {Generic}, components: { Generic },
// Properties for download, upload, torrent count and errors. // Properties for download, upload, torrent count and errors.
data: () => ({dl: null, ul: null, count: null, error: null}), data: () => ({ dl: null, ul: null, count: null, error: null }),
// Computed properties for the rate labels. // Computed properties for the rate labels.
computed: { computed: {
downRate: function() { downRate: function () {
return displayRate(this.dl); return displayRate(this.dl);
}, },
upRate: function() { upRate: function () {
return displayRate(this.ul); return displayRate(this.ul);
}, },
}, },
@ -72,7 +74,7 @@ export default {
if (torrentInterval > 0) { if (torrentInterval > 0) {
setInterval(() => this.fetchCount(), torrentInterval); setInterval(() => this.fetchCount(), torrentInterval);
} }
// Fetch the initial values. // Fetch the initial values.
this.fetchRates(); this.fetchRates();
this.fetchCount(); this.fetchCount();
@ -81,62 +83,71 @@ export default {
// Perform two calls to the XML-RPC service and fetch download // Perform two calls to the XML-RPC service and fetch download
// and upload rates. Values are saved to the `ul` and `dl` // and upload rates. Values are saved to the `ul` and `dl`
// properties. // properties.
fetchRates: async function() { fetchRates: async function () {
this.getRate('throttle.global_up.rate') this.getRate("throttle.global_up.rate")
.then((ul) => this.ul = ul) .then((ul) => (this.ul = ul))
.catch(() => this.error = true); .catch(() => (this.error = true));
this.getRate('throttle.global_down.rate') this.getRate("throttle.global_down.rate")
.then((dl) => this.dl = dl) .then((dl) => (this.dl = dl))
.catch(() => this.error = true); .catch(() => (this.error = true));
}, },
// Perform a call to the XML-RPC service to fetch the number of // Perform a call to the XML-RPC service to fetch the number of
// torrents. // torrents.
fetchCount: async function() { fetchCount: async function () {
this.getCount().catch(() => this.error = true); this.getCount().catch(() => (this.error = true));
}, },
// Fetch a numeric value from the XML-RPC service by requesting // Fetch a numeric value from the XML-RPC service by requesting
// the specified method name and parsing the XML. The response // the specified method name and parsing the XML. The response
// is expected to adhere to the structure of a single numeric // is expected to adhere to the structure of a single numeric
// value. // value.
getRate: async function(methodName) { getRate: async function (methodName) {
return this.getXml(methodName) return this.getXml(methodName).then((xml) =>
.then((xml) => parseInt(xml.getElementsByTagName('value')[0].firstChild.textContent, 10)); parseInt(
xml.getElementsByTagName("value")[0].firstChild.textContent,
10
)
);
}, },
// Fetch the numer of torrents by requesting the download list // Fetch the numer of torrents by requesting the download list
// and counting the number of entries therein. // and counting the number of entries therein.
getCount: async function() { getCount: async function () {
return this.getXml('download_list') return this.getXml("download_list").then((xml) => {
.then((xml) => { const arrayEl = xml.getElementsByTagName("array");
const arrayEl = xml.getElementsByTagName('array'); this.count = arrayEl
this.count = arrayEl ? arrayEl[0].getElementsByTagName('value').length : 0; ? arrayEl[0].getElementsByTagName("value").length
}); : 0;
});
}, },
// Perform a call to the XML-RPC service and parse the response // Perform a call to the XML-RPC service and parse the response
// as XML, which is then returned. // as XML, which is then returned.
getXml: async function(methodName) { getXml: async function (methodName) {
const headers = {'Content-Type': 'text/xml'}; const headers = { "Content-Type": "text/xml" };
if (this.item.username && this.item.password) { if (this.item.username && this.item.password) {
headers['Authorization'] = `${this.item.username}:${this.item.password}`; headers[
"Authorization"
] = `${this.item.username}:${this.item.password}`;
} }
return fetch(`${this.item.xmlrpc.replace(/\/$/, '')}/RPC2`, { return fetch(`${this.item.xmlrpc.replace(/\/$/, "")}/RPC2`, {
method: 'POST', method: "POST",
headers, headers,
body: `<methodCall><methodName>${methodName}</methodName></methodCall>` body: `<methodCall><methodName>${methodName}</methodName></methodCall>`,
}) })
.then((response) => { .then((response) => {
if (!response.ok) { if (!response.ok) {
throw Error(response.statusText); throw Error(response.statusText);
} }
return response.text(); return response.text();
}) })
.then((text) => Promise.resolve(new DOMParser().parseFromString(text, 'text/xml'))); .then((text) =>
} Promise.resolve(new DOMParser().parseFromString(text, "text/xml"))
} );
} },
},
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -150,4 +161,4 @@ export default {
color: var(--text); color: var(--text);
font-size: 0.8em; font-size: 0.8em;
} }
</style> </style>

View File

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