mirrors/VueTorrent
1
0
Fork 0
mirror of https://github.com/VueTorrent/VueTorrent.git synced 2025-03-14 12:10:18 +03:00
Code Issues Projects Releases Packages Wiki Activity

pausing & resuming

Browse source
This commit is contained in:
Daan Wijns 2020-05-20 15:25:44 +02:00
parent 5d1654a871
commit ae096d68f8
6 changed files with 194 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Modals/AddModal.vue
View file

@ -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

17
src/components/Navbar.vue
View file

@ -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
View 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>

4
src/plugins/vuetify.js
View file

@ -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",

21
src/store/index.js
View file

@ -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

166
src/views/Dashboard.vue
View file

@ -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>