basic tag support

This commit is contained in:
Daan Wijns 2020-05-31 10:16:56 +02:00
parent c16c98384d
commit acb35be257
13 changed files with 149 additions and 73 deletions

5
package-lock.json generated
View file

@ -11716,6 +11716,11 @@
"resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.5.3.tgz",
"integrity": "sha512-ImbvQxgwbLMrEc9/veDIJ7lzncf1fJDSNqqK0x2YDNUCq5tE9uqM4Gb/ZYUB5WlDM3vDpzwDEmsidWcaO6/WXQ=="
},
"vue-async-computed": {
"version": "3.8.2",
"resolved": "https://registry.npmjs.org/vue-async-computed/-/vue-async-computed-3.8.2.tgz",
"integrity": "sha512-If5roOhp/x0WWd0TWRD77YsuFoiIw3MbkcRlIB/FE3TqQCPje52eQp5CV5NN/7B0VAyPuGX5JQa+rc9AOcGAYw=="
},
"vue-cli-plugin-vuetify": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.5.tgz",

View file

@ -17,6 +17,7 @@
"register-service-worker": "^1.7.1",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.3",
"vue-async-computed": "^3.8.2",
"vue-context": "^5.1.0",
"vue-observe-visibility": "^0.4.6",
"vue-router": "^3.2.0",

View file

@ -115,6 +115,12 @@
>
</div>
</v-flex>
<!-- labels -->
<v-flex v-for="tag in torrent.tags" :key="tag" xs3 sm1 md1>
<v-chip small class="download white--text my-2 caption">
{{ tag }}
</v-chip>
</v-flex>
<v-flex xs12 sm12 md12>
<v-progress-linear
height="3"

View file

@ -1,6 +1,6 @@
<template>
<v-card flat>
<v-card-text style="font-size: 1.2em;">
<v-card-text class="pa-0" style="font-size: 1.1em;">
<v-simple-table>
<tbody>
<tr>
@ -9,43 +9,43 @@
{{ torrent.name }}
</td>
</tr>
<tr class="mt-2">
<tr style="margin-top: 10px !important;">
<td class="grey--text">hash</td>
<td class="torrentmodaltext--text">
{{ torrent.hash }}
</td>
</tr>
<tr class="mt-2">
<tr>
<td class="grey--text">Size</td>
<td class="torrentmodaltext--text">
{{ torrent.size }}
</td>
</tr>
<tr class="mt-2">
<tr>
<td class="grey--text">Done:</td>
<td class="torrentmodaltext--text">
{{ torrent.dloaded }}
</td>
</tr>
<tr class="mt-2">
<tr>
<td class="grey--text">Download</td>
<td class="torrentmodaltext--text">
{{ torrent.dlspeed }}
</td>
</tr>
<tr class="mt-2">
<tr>
<td class="grey--text">Upload</td>
<td class="torrentmodaltext--text">
{{ torrent.upspeed }}
</td>
</tr>
<tr class="mt-2">
<tr>
<td class="grey--text">ETA</td>
<td class="torrentmodaltext--text">
{{ torrent.eta }}
</td>
</tr>
<tr class="mt-2">
<tr>
<td class="grey--text">Peers</td>
<td class="torrentmodaltext--text">
{{ torrent.num_leechs
@ -54,7 +54,7 @@
>
</td>
</tr>
<tr class="mt-2">
<tr>
<td class="grey--text">Seeds</td>
<td class="torrentmodaltext--text">
{{ torrent.num_seeds
@ -63,12 +63,19 @@
>
</td>
</tr>
<tr class="mt-2">
<tr>
<td class="grey--text">Ratio</td>
<td class="torrentmodaltext--text">
{{ torrent.ratio }}%
</td>
</tr>
<tr>
<td class="grey--text">Tags</td>
<td v-if="torrent.tags">
{{ torrent.tags.join(',') }}
</td>
<td v-else>None</td>
</tr>
<tr>
<td class="grey--text">Status</td>
<v-chip
@ -79,6 +86,7 @@
</tr>
</tbody>
</v-simple-table>
<v-flex class="pt-3 pb-4">
<v-progress-linear
height="5"
@ -109,4 +117,19 @@ export default {
}
</script>
<style></style>
<style lang="scss" scoped>
::v-deep .v-data-table thead th,
::v-deep .v-data-table tbody td {
padding: 0 !important;
height: 3em;
white-space: nowrap;
&:first-child {
padding: 0 0 0 8px !important;
}
&:last-child {
padding-right: 8px !important;
}
}
</style>

View file

@ -0,0 +1,77 @@
<template>
<v-card flat>
<v-card-text
class="mx-auto mt-5"
style="font-size: 1.1em; max-height: 500px; min-height: 300px;"
>
<v-flex class="mx-auto">
<v-row>
<v-col cols="3">
<h3>Available Tags:</h3>
</v-col>
<v-col>
<v-chip
v-for="tag in availableTags"
:key="tag"
small
class="download white--text caption mx-2"
@click="addTag(tag)"
>
{{ tag }}
</v-chip>
</v-col>
</v-row>
</v-flex>
<v-flex class="mt-12">
<v-row>
<v-col cols="3">
<h3>Current Tags:</h3>
</v-col>
<v-col>
<v-chip
v-for="tag in torrent.tags"
:key="tag"
small
close
class="download white--text caption mx-2"
@click="deleteTag(tag)"
@click:close="deleteTag(tag)"
>{{ tag }}</v-chip
>
</v-col>
</v-row>
</v-flex>
</v-card-text>
</v-card>
</template>
<script>
import { difference } from 'lodash'
import { mapGetters } from 'vuex'
import qbit from '@/services/qbit'
export default {
name: 'Tags',
props: {
hash: String
},
computed: {
...mapGetters(['getTorrent', 'getAvailableTags']),
torrent() {
return this.getTorrent(this.hash)
},
availableTags() {
let availableTags = this.getAvailableTags()
let currentTags = this.getTorrent(this.hash).tags
return difference(availableTags, currentTags)
}
},
methods: {
addTag(tag) {
qbit.addTorrentTag(this.hash, tag)
},
deleteTag(tag) {
qbit.removeTorrentTag(this.hash, tag)
}
}
}
</script>

View file

@ -21,6 +21,7 @@
<v-tab href="#trackers">Trackers</v-tab>
<v-tab href="#peers">Peers</v-tab>
<v-tab href="#content">Content</v-tab>
<v-tab href="#tags">Tags</v-tab>
</v-tabs>
<v-tabs-items v-model="tab" touchless>
<v-tab-item value="info">
@ -38,6 +39,9 @@
<v-tab-item value="content">
<Content :is-active="tab === 'content'" :hash="hash" />
</v-tab-item>
<v-tab-item value="tags">
<Tags :is-active="tab === 'tags'" :hash="hash" />
</v-tab-item>
</v-tabs-items>
</div>
<v-fab-transition v-if="phoneLayout">
@ -58,11 +62,12 @@ import Content from '@/components/TorrentDetailModal/Content'
import Info from '@/components/TorrentDetailModal/Info'
import Peers from '@/components/TorrentDetailModal/Peers'
import Trackers from '@/components/TorrentDetailModal/Trackers'
import Tags from '@/components/TorrentDetailModal/Tags'
export default {
name: 'TorrentDetailModal',
mixins: [Modal],
components: { Content, Info, Peers, Trackers },
components: { Content, Info, Peers, Trackers,Tags },
data() {
return {
tab: null,

View file

@ -24,6 +24,10 @@ import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'
Vue.use(PerfectScrollbar)
import AsyncComputed from 'vue-async-computed'
Vue.use(AsyncComputed)
Vue.config.productionTip = false
// register modals

View file

@ -1,5 +1,5 @@
export default class Status {
constructor(data) {
constructor(data, tags) {
if (data != undefined && data != null) {
this.status = data.connection_status
this.downloaded = this.formatBytes(data.dl_info_data, 1)
@ -10,6 +10,7 @@ export default class Status {
this.altSpeed = data.use_alt_speed_limits
this.dlspeedRaw = Math.round(data.dl_info_speed / 1000)
this.upspeedRaw = Math.round(data.up_info_speed / 1000)
this.tags = tags
}
}

View file

@ -22,6 +22,7 @@ export default class Torrent {
this.savePath = data.save_path
this.progress = Math.round((data.downloaded / data.size) * 100)
this.ratio = Math.round(data.ratio * 100)
this.tags = data.tags.length > 0 ? data.tags.split(',') : null
}
formatState(state) {

View file

@ -213,75 +213,28 @@ class Qbit {
})
}
getRssItems() {
const params = {
withData: true
}
return this.axios.get('/rss/items', {
params
})
getAvailableTags() {
return this.axios.get('/torrents/tags')
}
addRssFeed(url, path = '') {
removeTorrentTag(hash, tag) {
const params = {
url,
path
hashes: hash,
tags: tag
}
const data = new URLSearchParams(params)
return this.axios.post('/rss/addFeed', data)
return this.axios.post('/torrents/removeTags', data)
}
removeRssFeed(path) {
addTorrentTag(hash, tag) {
const params = {
path
hashes: hash,
tags: tag
}
const data = new URLSearchParams(params)
return this.axios.post('/rss/removeItem', data)
}
refreshRssFeed(path) {
const params = {
itemPath: path
}
const data = new URLSearchParams(params)
return this.axios.post('/rss/refreshItem', data)
}
moveRssFeed(path, newPath) {
const params = {
itemPath: path,
destPath: newPath
}
const data = new URLSearchParams(params)
return this.axios.post('/rss/moveItem', data)
}
getRssRules() {
return this.axios.get('/rss/rules')
}
setRssRule(name, def) {
const params = {
ruleName: name,
ruleDef: JSON.stringify(def)
}
const data = new URLSearchParams(params)
return this.axios.post('/rss/setRule', data)
}
removeRssRule(name) {
const params = {
ruleName: name
}
const data = new URLSearchParams(params)
return this.axios.post('/rss/removeRule', data)
return this.axios.post('/torrents/addTags ', data)
}
actionTorrents(action, hashes, extra) {

View file

@ -6,5 +6,6 @@ export default {
getStatus: state => () => state.status,
getTorrent: state => hash =>
state.torrents.filter(el => el.hash === hash)[0],
getWebuiSettings: state => () => state.webuiSettings
getWebuiSettings: state => () => state.webuiSettings,
getAvailableTags: state => () => state.status.tags
}

View file

@ -30,7 +30,6 @@ export default new Vuex.Store({
filter: null
},
rid: 0,
mainData: undefined,
pasteUrl: null,
modals: {
addmodal: false,

View file

@ -35,7 +35,7 @@ export default {
const res = await qbit.getMainData(rid)
// status
state.status = new Status(res.data.server_state)
state.status = new Status(res.data.server_state, res.data.tags)
// graph
state.download_data.splice(0, 1)