mirror of
https://github.com/VueTorrent/VueTorrent.git
synced 2025-03-14 12:10:18 +03:00
pausing & resuming
This commit is contained in:
parent
5d1654a871
commit
ae096d68f8
6 changed files with 194 additions and 169 deletions
|
@ -42,7 +42,7 @@
|
|||
<v-card-actions class="justify-center">
|
||||
<v-btn
|
||||
:loading="loading"
|
||||
flat
|
||||
text
|
||||
@click="submit"
|
||||
class="blue_accent white--text mx-0 mt-3"
|
||||
>Add Torrent</v-btn
|
||||
|
|
|
@ -41,9 +41,6 @@
|
|||
<v-btn small fab text class="mr-0 ml-0" @click="pauseTorrents">
|
||||
<v-icon color="grey">pause</v-icon>
|
||||
</v-btn>
|
||||
<v-btn small fab text class="mr-0 ml-0" @click="refreshTorrents">
|
||||
<v-icon color="grey">autorenew</v-icon>
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
<!--navigation drawer itself -->
|
||||
<v-navigation-drawer app v-model="drawer" class="primary">
|
||||
|
@ -156,6 +153,7 @@
|
|||
import { mapMutations, mapState } from 'vuex'
|
||||
import { setInterval } from 'timers'
|
||||
import VueApexCharts from 'vue-apexcharts'
|
||||
import qbit from '@/services/qbit'
|
||||
|
||||
export default {
|
||||
components: { apexcharts: VueApexCharts },
|
||||
|
@ -215,12 +213,13 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
...mapMutations(['REFRESH_TORRENTS', 'CLEAR_INTERVALS']),
|
||||
clearInterval() {},
|
||||
startInterval() {},
|
||||
pauseTorrents() {},
|
||||
resumeTorrents() {},
|
||||
pauseTorrents() {
|
||||
qbit.pauseTorrents(this.selected_torrents)
|
||||
},
|
||||
resumeTorrents(){
|
||||
qbit.resumeTorrents(this.selected_torrents)
|
||||
},
|
||||
removeTorrents() {},
|
||||
refreshTorrents() {},
|
||||
updateChart() {
|
||||
this.$refs.chart.updateSeries(this.series, true)
|
||||
},
|
||||
|
@ -229,7 +228,7 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['stats'])
|
||||
...mapState(['stats', 'selected_torrents'])
|
||||
},
|
||||
created() {
|
||||
this.chartInterval = setInterval(async () => {
|
||||
|
|
153
src/components/Torrent.vue
Normal file
153
src/components/Torrent.vue
Normal file
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<v-layout row wrap :class="`pa-4 ml-0 project ${torrent.state}`">
|
||||
<v-flex xs12 sm2 md3>
|
||||
<div class="caption grey--text">Torrent title</div>
|
||||
<div>{{ torrent.name }}</div>
|
||||
</v-flex>
|
||||
<v-flex xs6 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">Size</div>
|
||||
<div>
|
||||
{{
|
||||
torrent.size.substring(
|
||||
0,
|
||||
torrent.size.indexOf(' ')
|
||||
)
|
||||
}}
|
||||
<span class="caption grey--text">{{
|
||||
torrent.size.substring(
|
||||
torrent.size.indexOf(' ')
|
||||
)
|
||||
}}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs5 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">Done</div>
|
||||
<div>
|
||||
{{
|
||||
torrent.dloaded.substring(
|
||||
0,
|
||||
torrent.dloaded.indexOf(' ')
|
||||
)
|
||||
}}
|
||||
<span class="caption grey--text">{{
|
||||
torrent.dloaded.substring(
|
||||
torrent.dloaded.indexOf(' ')
|
||||
)
|
||||
}}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs6 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">Download</div>
|
||||
<div>
|
||||
{{
|
||||
torrent.dlspeed.substring(
|
||||
0,
|
||||
torrent.dlspeed.indexOf(' ')
|
||||
)
|
||||
}}
|
||||
<span class="caption grey--text">{{
|
||||
torrent.dlspeed.substring(
|
||||
torrent.dlspeed.indexOf(' ')
|
||||
)
|
||||
}}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs5 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">Upload</div>
|
||||
<div>
|
||||
{{
|
||||
torrent.upspeed.substring(
|
||||
0,
|
||||
torrent.upspeed.indexOf(' ')
|
||||
)
|
||||
}}
|
||||
<span class="caption grey--text">{{
|
||||
torrent.upspeed.substring(
|
||||
torrent.upspeed.indexOf(' ')
|
||||
)
|
||||
}}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs6 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">ETA</div>
|
||||
<div>{{ torrent.eta }}</div>
|
||||
</v-flex>
|
||||
<v-flex xs5 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">Peers</div>
|
||||
<div>
|
||||
{{ torrent.num_leechs }}
|
||||
<span class="grey--text caption"
|
||||
>/{{ torrent.available_peers }}</span
|
||||
>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs5 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">Seeds</div>
|
||||
<div>
|
||||
{{ torrent.num_seeds }}
|
||||
<span class="grey--text caption"
|
||||
>/{{ torrent.available_seeds }}</span
|
||||
>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs4 sm12 md1>
|
||||
<div class="right">
|
||||
<v-chip
|
||||
small
|
||||
:class="
|
||||
`${torrent.state} white--text my-2 caption`
|
||||
"
|
||||
>{{ torrent.state }}</v-chip
|
||||
>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm12 md12>
|
||||
<v-progress-linear
|
||||
height="3"
|
||||
color="cyan darken-1"
|
||||
background-color="cyan lighten-3"
|
||||
:value="(torrent.dloaded / torrent.size) * 100"
|
||||
></v-progress-linear>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'Torrent',
|
||||
props: {
|
||||
torrent: Object
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.project.done {
|
||||
border-left: 4px solid #3cd1c2;
|
||||
}
|
||||
.project.busy {
|
||||
border-left: 4px solid #ffaa2c;
|
||||
}
|
||||
.project.fail {
|
||||
border-left: 4px solid #f83e70;
|
||||
}
|
||||
.project.paused {
|
||||
border-left: 4px solid #cfd8dc;
|
||||
}
|
||||
.v-chip.done {
|
||||
background: #3cd1c2 !important;
|
||||
}
|
||||
.v-chip.busy {
|
||||
background: #ffaa2c !important;
|
||||
}
|
||||
.v-chip.fail {
|
||||
background: #f83e70 !important;
|
||||
}
|
||||
.v-chip.paused {
|
||||
background: #cfd8dc !important;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
|
@ -2,6 +2,8 @@ import Vue from "vue";
|
|||
import Vuetify from "vuetify";
|
||||
import "vuetify/dist/vuetify.min.css";
|
||||
|
||||
import colors from "vuetify/lib/util/colors";
|
||||
|
||||
Vue.use(Vuetify);
|
||||
|
||||
export default new Vuetify({
|
||||
|
@ -23,7 +25,7 @@ export default new Vuetify({
|
|||
green_accent: "#3cd1c2",
|
||||
download: "#64CEAA",
|
||||
upload: "#00b3fa",
|
||||
background: "#0000",
|
||||
background: colors.grey.lighten4,
|
||||
},
|
||||
dark: {
|
||||
primary: "#35495e",
|
||||
|
|
|
@ -37,7 +37,7 @@ export default new Vuex.Store({
|
|||
}
|
||||
},
|
||||
getters: {
|
||||
CONTAINS_TORRENT: state => hash =>
|
||||
containsTorrent: state => hash =>
|
||||
state.selected_torrents.includes(hash),
|
||||
getTheme: state => () => state.darkTheme,
|
||||
getModalState: state => name => state.modals[name.toLowerCase()]
|
||||
|
@ -52,14 +52,15 @@ export default new Vuex.Store({
|
|||
modal.toLowerCase()
|
||||
]
|
||||
},
|
||||
ADD_SELECTED: (state, payload) => {
|
||||
state.selected_torrents.push(payload)
|
||||
},
|
||||
REMOVE_SELECTED: (state, payload) => {
|
||||
state.selected_torrents.splice(
|
||||
state.selected_torrents.indexOf(payload),
|
||||
1
|
||||
)
|
||||
SET_SELECTED: (state, payload) => {
|
||||
if(payload.type === 'add')
|
||||
state.selected_torrents.push(payload.hash)
|
||||
if(payload.type === 'remove')
|
||||
state.selected_torrents.splice(
|
||||
state.selected_torrents.indexOf(payload.hash),
|
||||
1
|
||||
)
|
||||
|
||||
},
|
||||
RESET_SELECTED: state => {
|
||||
state.selected_torrents = []
|
||||
|
@ -114,7 +115,7 @@ export default new Vuex.Store({
|
|||
// torrents
|
||||
state.torrents = []
|
||||
for (const [key, value] of Object.entries(data.torrents)) {
|
||||
state.torrents.push(new Torrent({ id: key, ...value }))
|
||||
state.torrents.push(new Torrent({ hash: key, ...value }))
|
||||
}
|
||||
|
||||
// stats
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="dashboard" @click.self="resetSelected">
|
||||
<h1 class="subheading grey--text">Dashboard</h1>
|
||||
<v-container class="my-4" @click.self="resetSelected">
|
||||
<div style="height: 89vh" class="dashboard" @click.self="resetSelected">
|
||||
<h1 style="font-size: 1.1em !important" class="subtitle-1 grey--text">Dashboard</h1>
|
||||
<v-container class="my-4" @click.self="resetSelected">
|
||||
<!-- justify-center here in layout to center!! -->
|
||||
<v-flex xs12 sm6 md3 @click.self="resetSelected">
|
||||
<v-text-field
|
||||
|
@ -31,117 +31,7 @@
|
|||
"
|
||||
@click.native="selectTorrent(torrent.hash)"
|
||||
>
|
||||
<v-layout row wrap :class="`pa-3 project ${torrent.state}`">
|
||||
<v-flex xs12 sm2 md3>
|
||||
<div class="caption grey--text">Torrent title</div>
|
||||
<div>{{ torrent.name }}</div>
|
||||
</v-flex>
|
||||
<v-flex xs6 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">Size</div>
|
||||
<div>
|
||||
{{
|
||||
torrent.size.substring(
|
||||
0,
|
||||
torrent.size.indexOf(' ')
|
||||
)
|
||||
}}
|
||||
<span class="caption grey--text">{{
|
||||
torrent.size.substring(
|
||||
torrent.size.indexOf(' ')
|
||||
)
|
||||
}}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs5 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">Done</div>
|
||||
<div>
|
||||
{{
|
||||
torrent.dloaded.substring(
|
||||
0,
|
||||
torrent.dloaded.indexOf(' ')
|
||||
)
|
||||
}}
|
||||
<span class="caption grey--text">{{
|
||||
torrent.dloaded.substring(
|
||||
torrent.dloaded.indexOf(' ')
|
||||
)
|
||||
}}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs6 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">Download</div>
|
||||
<div>
|
||||
{{
|
||||
torrent.dlspeed.substring(
|
||||
0,
|
||||
torrent.dlspeed.indexOf(' ')
|
||||
)
|
||||
}}
|
||||
<span class="caption grey--text">{{
|
||||
torrent.dlspeed.substring(
|
||||
torrent.dlspeed.indexOf(' ')
|
||||
)
|
||||
}}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs5 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">Upload</div>
|
||||
<div>
|
||||
{{
|
||||
torrent.upspeed.substring(
|
||||
0,
|
||||
torrent.upspeed.indexOf(' ')
|
||||
)
|
||||
}}
|
||||
<span class="caption grey--text">{{
|
||||
torrent.upspeed.substring(
|
||||
torrent.upspeed.indexOf(' ')
|
||||
)
|
||||
}}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs6 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">ETA</div>
|
||||
<div>{{ torrent.eta }}</div>
|
||||
</v-flex>
|
||||
<v-flex xs5 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">Peers</div>
|
||||
<div>
|
||||
{{ torrent.num_leechs }}
|
||||
<span class="grey--text caption"
|
||||
>/{{ torrent.available_peers }}</span
|
||||
>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs5 sm1 md1 class="mr-2">
|
||||
<div class="caption grey--text">Seeds</div>
|
||||
<div>
|
||||
{{ torrent.num_seeds }}
|
||||
<span class="grey--text caption"
|
||||
>/{{ torrent.available_seeds }}</span
|
||||
>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs4 sm12 md1>
|
||||
<div class="right">
|
||||
<v-chip
|
||||
small
|
||||
:class="
|
||||
`${torrent.state} white--text my-2 caption`
|
||||
"
|
||||
>{{ torrent.state }}</v-chip
|
||||
>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm12 md12>
|
||||
<v-progress-linear
|
||||
height="3"
|
||||
color="cyan darken-1"
|
||||
background-color="cyan lighten-3"
|
||||
:value="(torrent.dloaded / torrent.size) * 100"
|
||||
></v-progress-linear>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<Torrent :torrent="torrent"/>
|
||||
<v-divider></v-divider>
|
||||
</v-card>
|
||||
</div>
|
||||
|
@ -150,16 +40,19 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import { mapState, mapMutations} from 'vuex'
|
||||
import Torrent from '@/components/Torrent'
|
||||
|
||||
export default {
|
||||
name:'Dashboard',
|
||||
components: {Torrent},
|
||||
data() {
|
||||
return {
|
||||
sort_input: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['mainData', 'torrents'])
|
||||
...mapState(['mainData', 'torrents', 'selected_torrents'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['SORT_TORRENTS']),
|
||||
|
@ -252,12 +145,18 @@ export default {
|
|||
this.$store.state.sort_options = { name, reverse }
|
||||
},
|
||||
selectTorrent(hash) {
|
||||
return hash
|
||||
if (this.containsTorrent(hash)) {
|
||||
this.$store.commit('SET_SELECTED', {type:"remove", hash})
|
||||
} else {
|
||||
this.$store.commit('SET_SELECTED', {type:"add", hash})
|
||||
}
|
||||
},
|
||||
containsTorrent(hash) {
|
||||
return hash
|
||||
return this.$store.getters.containsTorrent(hash)
|
||||
},
|
||||
resetSelected() {}
|
||||
resetSelected() {
|
||||
this.$store.commit('RESET_SELECTED')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('INIT_INTERVALS')
|
||||
|
@ -268,33 +167,4 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.project.done {
|
||||
border-left: 4px solid #3cd1c2;
|
||||
}
|
||||
.project.busy {
|
||||
border-left: 4px solid #ffaa2c;
|
||||
}
|
||||
.project.fail {
|
||||
border-left: 4px solid #f83e70;
|
||||
}
|
||||
.project.paused {
|
||||
border-left: 4px solid #cfd8dc;
|
||||
}
|
||||
.v-chip.done {
|
||||
background: #3cd1c2;
|
||||
}
|
||||
.v-chip.busy {
|
||||
background: #ffaa2c;
|
||||
}
|
||||
.v-chip.fail {
|
||||
background: #f83e70;
|
||||
}
|
||||
.v-chip.paused {
|
||||
background: #cfd8dc;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Add table
Reference in a new issue