mirrors/VueTorrent
1
0
Fork 0
mirror of https://github.com/VueTorrent/VueTorrent.git synced 2024-11-28 21:18:54 +03:00
Code Issues Projects Releases Packages Wiki Activity

logging out + available disk space + torrent download location

Browse source
This commit is contained in:
Daan Wijns 2020-05-22 21:44:05 +02:00
parent 3456fa83bf
commit bbbe89a290
7 changed files with 119 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
README.md
View file

@ -1,71 +1,71 @@
# VueTorrent
The sleekest looking WEBUI for qBittorrent made with Vuejs!
> Vue, qBitorrent, Vuetify
## Screenshots
<p align="center">
<a href="https://i.imgur.com/vPBcrK4.png"><img src="https://i.imgur.com/vPBcrK4.png" title="Desktop" alt="Desktop Screenshot" ></a>
</p>
<p align="center">
<a href="https://i.imgur.com/SUOEyy9.png"><img src="https://i.imgur.com/SUOEyy9.png" title="Mobile" alt="Mobile Screenshot" width="320" height="540"></a>
</p>
## Installation
- Download & Unzip the latest release
- Point your Alternate WEBUI location to it
## Development
- clone the repo
- npm install
- npm run serve
## Features
- viewing sessions stats ( down / upload speed, session uploaded / downloaded )
- adding / removing / pausing / resuming torrents
- sorting by every property shown!
* mobile friendly! (maybe not for thousands of torrents...)
- works on QBittorrent V4.2 and later
## Contributing
I'll gladly accept help/pull requests & advice! (this is my first project of this nature, pls be kind 😛 ).
## FAQ
- **Why build this??**
* Why not? Most WebUI's look very dated and now it's no longer necessary to search for a remote control app!
## Support
Reach out to me at one of the following places!
- <a href="https://m.me/WijnsDaan" target="_blank">`Facebook Messenger`</a>
* Open up an issue 😛
[<img src="https://cdn.buymeacoffee.com/buttons/lato-blue.png" alt="drawing" width="180"/>](https://www.buymeacoffee.com/wdaan 'Buy me a coffee')
## Credits
- Dashboard design heavily inspired by: '[Net Ninja - Vuetify](https://github.com/iamshaunjp/vuetify-playlist)'.
Also check out The Net Ninja's Youtube Channel.
# VueTorrent
The sleekest looking WEBUI for qBittorrent made with Vuejs!
> Vue, qBitorrent, Vuetify
## Screenshots
<p align="center">
<a href="https://i.imgur.com/vPBcrK4.png"><img src="https://i.imgur.com/vPBcrK4.png" title="Desktop" alt="Desktop Screenshot" ></a>
</p>
<p align="center">
<a href="https://i.imgur.com/SUOEyy9.png"><img src="https://i.imgur.com/SUOEyy9.png" title="Mobile" alt="Mobile Screenshot" width="320" height="540"></a>
</p>
## Installation
- Download & Unzip the latest release
- Point your Alternate WEBUI location to it
## Development
- clone the repo
- npm install
- npm run serve
## Features
- viewing sessions stats ( down / upload speed, session uploaded / downloaded )
- adding / removing / pausing / resuming torrents
- sorting by every property shown!
* mobile friendly! (maybe not for thousands of torrents...)
- works on QBittorrent V4.2 and later
## Contributing
I'll gladly accept help/pull requests & advice! (this is my first project of this nature, pls be kind 😛 ).
## FAQ
- **Why build this??**
* Why not? Most WebUI's look very dated and now it's no longer necessary to search for a remote control app!
## Support
Reach out to me at one of the following places!
- <a href="https://m.me/WijnsDaan" target="_blank">`Facebook Messenger`</a>
* Open up an issue 😛
[<img src="https://cdn.buymeacoffee.com/buttons/lato-blue.png" alt="drawing" width="180"/>](https://www.buymeacoffee.com/wdaan 'Buy me a coffee')
## Credits
- Dashboard design heavily inspired by: '[Net Ninja - Vuetify](https://github.com/iamshaunjp/vuetify-playlist)'.
Also check out The Net Ninja's Youtube Channel.
* This repo '[CzBiX qb-web ](https://github.com/CzBiX/qb-web)'

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

@ -57,6 +57,7 @@
<v-text-field
v-model="directory"
:placeholder="savepath"
label="Download Directory"
prepend-icon="folder"
></v-text-field>
@ -83,6 +84,7 @@
</template>
<script>
import { mapGetters } from 'vuex'
import Modal from "@/mixins/Modal";
import qbit from '@/services/qbit'
export default {
@ -111,6 +113,7 @@ export default {
let params= { urls: null};
if(this.files.length) torrents.push(...this.files)
if(this.url) params.urls = this.url
if(this.directory) params.savepath = this.directory
qbit.addTorrents(params, torrents)
@ -121,12 +124,16 @@ export default {
},
},
computed: {
...mapGetters(['getSettings']),
validFile() {
return this.Files.length > 0;
},
phoneLayout() {
return this.$vuetify.breakpoint.xsOnly;
},
savepath(){
return this.getSettings().savePath
}
},
};
</script>

23
src/components/Navbar.vue
View file

@ -144,6 +144,29 @@
</v-flex>
</v-layout>
</v-card>
<v-card flat style="margin-top: 30px;" color="secondary" class="ml-2 mr-2">
<v-layout row wrap class="pa-3 project nav_upload mx-auto">
<v-flex md6>
<div style="font-size: 0.95em; margin-top: 6px;" class="upload--text">Diskspace</div>
</v-flex>
<v-flex md5 class="ml-4">
<span class="upload--text title">
{{
stats.freeDiskSpace.substring(
0,
stats.freeDiskSpace.indexOf(' ')
)
}}
<span class="font-weight-light caption">{{
stats.freeDiskSpace.substring(
stats.freeDiskSpace.indexOf(' ')
)
}}</span>
</span>
</v-flex>
</v-layout>
</v-card>
</v-flex>
<v-container>
<v-row justify="space-between" style="position:fixed; bottom: 0px; right: 15px;">

1
src/models/sessionStat.js
View file

@ -6,6 +6,7 @@ export default class Stat {
this.uploaded = this.formatBytes(data.up_info_data, 1)
this.dlspeed = this.formatBytes(data.dl_info_speed, 1)
this.upspeed = this.formatBytes(data.up_info_speed, 1)
this.freeDiskSpace = this.formatBytes(data.free_space_on_disk)
}
}

4
src/services/qbit.js
View file

@ -28,6 +28,10 @@ class Qbit {
return data
}
async logout(){
this.axios.post('/auth/logout')
}
getGlobalTransferInfo() {
return this.axios.get('/transfer/info')
}

15
src/store/index.js
View file

@ -34,13 +34,15 @@ export default new Vuex.Store({
addmodal: false,
deletemodal: false,
settingsmodal: false
}
},
settings : {}
},
getters: {
containsTorrent: state => hash =>
state.selected_torrents.includes(hash),
getTheme: state => () => state.darkTheme,
getModalState: state => name => state.modals[name.toLowerCase()]
getModalState: state => name => state.modals[name.toLowerCase()],
getSettings: state => () => state.settings
},
mutations: {
@ -69,6 +71,7 @@ export default new Vuex.Store({
state.darkTheme = !state.darkTheme
},
LOGOUT: state => {
qbit.logout()
state.authenticated = false
},
LOGIN: async (state, payload) => {
@ -118,7 +121,11 @@ export default new Vuex.Store({
)
)
}
}
},
SET_SETTINGS: async state => {
const {data} = await qbit.getAppPreferences()
state.settings.savePath = data.save_path;
}
},
actions: {
INIT_INTERVALS: async context => {
@ -133,9 +140,11 @@ export default new Vuex.Store({
Vue.$toast.success('Successfully logged in!')
context.commit('LOGIN', true)
context.commit('updateMainData')
context.commit('SET_SETTINGS')
return true;
}
Vue.$toast.error('Log in failed 😕')
return false;
}
}

2
src/views/Login.vue
View file

@ -20,6 +20,7 @@
:rules="inputRules"
@keyup.enter.native="Login"
autocomplete="current email"
name="username"
></v-text-field>
<v-text-field
flat
@ -32,6 +33,7 @@
:rules="inputRules"
@keyup.enter.native="Login"
autocomplete="current password"
name="password"
></v-text-field>
<v-spacer></v-spacer>
<v-card-actions class="justify-center">