mirror of
https://github.com/VueTorrent/VueTorrent.git
synced 2024-11-28 13:08:53 +03:00
webui start + basic torrent showing
This commit is contained in:
Daan Wijns
parent
402bb61a98
commit
d1d01aafe4
25 changed files with 15035 additions and 14945 deletions
|
|
@ -1,6 +0,0 @@
|
|||
nodemodules
|
||||
LICENSE.md
|
||||
README.md
|
||||
babel.config.js
|
||||
.gitignore
|
||||
.env
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
VUE_APP_DOMAIN=http://localhost:3001
|
||||
VUE_APP_WEB_USER=test
|
||||
VUE_APP_WEB_PASS=test
|
||||
QBIT_USER=test
|
||||
QBIT_PASS=test
|
||||
QBIT_HOST=localhost:8080
|
||||
PORT=3001
|
||||
55
.eslintrc.js
55
.eslintrc.js
|
|
@ -1,29 +1,30 @@
|
|||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
commonjs: true,
|
||||
es6: true,
|
||||
},
|
||||
extends: ['plugin:vue/essential', 'airbnb-base'],
|
||||
globals: {
|
||||
Atomics: 'readonly',
|
||||
SharedArrayBuffer: 'readonly',
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaVersion: 2018,
|
||||
},
|
||||
plugins: ['vue'],
|
||||
rules: {
|
||||
semi: ['warn', 'never'],
|
||||
'no-console': 0,
|
||||
camelcase: 0,
|
||||
'no-restricted-syntax': 0,
|
||||
'no-shadow': 0,
|
||||
'class-methods-use-this': 0,
|
||||
'prefer-promise-reject-errors': 0,
|
||||
'no-underscore-dangle': 0,
|
||||
'no-param-reassign': 0,
|
||||
'no-unused-vars': 0,
|
||||
'indent': 0
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
commonjs: true,
|
||||
es6: true
|
||||
},
|
||||
extends: ['plugin:vue/essential', 'airbnb-base'],
|
||||
globals: {
|
||||
Atomics: 'readonly',
|
||||
SharedArrayBuffer: 'readonly'
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaVersion: 2018
|
||||
},
|
||||
plugins: ['vue', 'prettier'],
|
||||
rules: {
|
||||
semi: ['warn', 'never'],
|
||||
'no-console': 0,
|
||||
camelcase: 0,
|
||||
'no-restricted-syntax': 0,
|
||||
'no-shadow': 0,
|
||||
'class-methods-use-this': 0,
|
||||
'prefer-promise-reject-errors': 0,
|
||||
'no-underscore-dangle': 0,
|
||||
'no-param-reassign': 0,
|
||||
'no-unused-vars': 0,
|
||||
indent: 0,
|
||||
'comma-dangle': 0
|
||||
}
|
||||
}
|
||||
|
|
|
|||
7
.prettierrc
Normal file
7
.prettierrc
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"tabWidth": 4,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"arrowParens": "avoid"
|
||||
}
|
||||
18
Dockerfile
18
Dockerfile
|
|
@ -1,18 +0,0 @@
|
|||
# build stage
|
||||
FROM node:10-slim as build-stage
|
||||
# Create app directory
|
||||
WORKDIR /usr/src/app
|
||||
COPY package*.json ./
|
||||
RUN npm install -D
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
# production stage
|
||||
FROM node:10-slim as production-stage
|
||||
WORKDIR /usr/src/app
|
||||
COPY --from=build-stage /usr/src/app ./
|
||||
RUN rm -r node_modules && rm -r src && npm install
|
||||
|
||||
#serve
|
||||
EXPOSE 3001
|
||||
CMD ["node", "server/server.js"]
|
||||
291
README.md
291
README.md
|
|
@ -1,220 +1,71 @@
|
|||
|
||||
|
||||
|
||||
# VueTorrent
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
A modern looking WEBUI for qBittorrent made with Vuejs & express!
|
||||
|
||||
|
||||
|
||||
(support for more clients coming in the future)
|
||||
|
||||
|
||||
|
||||
> Vue, Node, Express, qBitorrent
|
||||
|
||||
|
||||
PS : This is NOT an alternate WEBUI, this is a webapp that interacts with your existing qBitorrent client.
|
||||
|
||||
|
||||
## Update
|
||||
|
||||
|
||||
|
||||
now using this 'https://github.com/TheFlow95/node-qbittorrent-api-v2' qbittorrent-api
|
||||
|
||||
|
||||
|
||||
& deleting & adding don't quite work yet :/
|
||||
|
||||
|
||||
### With the updates it has become too unstable to use unfortunately, I'll update it when I find a fully working library or maybe write one myself if I find the time.
|
||||
|
||||
## 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
|
||||
|
||||
Easiest way is with docker-compose:
|
||||
|
||||
```
|
||||
|
||||
vuetorrent:
|
||||
|
||||
image: wdaan/vuetorrent
|
||||
|
||||
container_name: vuetorrent
|
||||
|
||||
restart: always
|
||||
|
||||
ports:
|
||||
|
||||
- "4000:3000"
|
||||
|
||||
environment:
|
||||
|
||||
- VUE_APP_WEB_USER=vuetr
|
||||
|
||||
- VUE_APP_WEB_PASS=vuetr
|
||||
|
||||
- QBIT_USER=qbit
|
||||
|
||||
- QBIT_PASS=qbit
|
||||
|
||||
- QBIT_HOST=https://qbit.example.com
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
With Docker run
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
docker run --name=vuetorrent -d --env VUE_APP_WEB_USER=vuetr --env VUE_APP_WEB_PASS=vuetr --env QBIT_USER=admin --env QBIT_PASS=adminadmin --env QBIT_HOST=http://10.0.0.10:8080 --restart unless-stopped -p 3000:3000 wdaan/vuetorrent:latest
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Development
|
||||
|
||||
|
||||
|
||||
FRONTEND : Git clone & npm run serve!
|
||||
|
||||
|
||||
|
||||
SERVER : npm run build & npm run start!
|
||||
|
||||
|
||||
|
||||
|
||||
## 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 😛
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Credits
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Dashboard design heavily inspired by: 'https://github.com/iamshaunjp/vuetify-playlist'
|
||||
|
||||
|
||||
|
||||
Also check out The Net Ninja's Youtube Channel.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](https://www.gnu.org/licenses/gpl-3.0)
|
||||
# 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)'
|
||||
|
|
|
|||
27222
package-lock.json
generated
27222
package-lock.json
generated
File diff suppressed because it is too large
Load diff
143
package.json
143
package.json
|
|
@ -1,72 +1,77 @@
|
|||
{
|
||||
"name": "vuetr",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "./node_modules/\\@vue/cli-service/bin/vue-cli-service.js build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"start": "nodemon server/server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"apexcharts": "^3.17.0",
|
||||
"axios": "^0.18.1",
|
||||
"cors": "^2.8.5",
|
||||
"date-fns": "^1.30.1",
|
||||
"dotenv": "^8.2.0",
|
||||
"express": "^4.17.1",
|
||||
"filepond": "^4.13.0",
|
||||
"filepond-plugin-file-validate-size": "^2.2.0",
|
||||
"filepond-plugin-file-validate-type": "^1.2.4",
|
||||
"filepond-plugin-image-preview": "^4.6.1",
|
||||
"multer": "^1.4.2",
|
||||
"qbittorrent-api-v2": "^1.2.0",
|
||||
"register-service-worker": "^1.7.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-apexcharts": "^1.5.2",
|
||||
"vue-filepond": "^5.1.3",
|
||||
"vue-router": "^3.1.6",
|
||||
"vuetify": "^1.5.24",
|
||||
"vuex": "^3.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.12.1",
|
||||
"@vue/cli-plugin-eslint": "^3.12.1",
|
||||
"@vue/cli-plugin-pwa": "^3.12.1",
|
||||
"@vue/cli-service": "^3.12.1",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-airbnb-base": "^14.1.0",
|
||||
"eslint-plugin-import": "^2.20.1",
|
||||
"eslint-plugin-vue": "^5.2.3",
|
||||
"stylus": "^0.54.7",
|
||||
"stylus-loader": "^3.0.1",
|
||||
"vue-cli-plugin-vuetify": "^0.4.6",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"vuetify-loader": "^1.4.3",
|
||||
"webpack": "^4.42.0",
|
||||
"webpack-cli": "^3.3.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
"name": "vuetr",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "./node_modules/\\@vue/cli-service/bin/vue-cli-service.js build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"format": "pretty-quick"
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential"
|
||||
],
|
||||
"rules": {},
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
"dependencies": {
|
||||
"apexcharts": "^3.17.0",
|
||||
"axios": "^0.18.1",
|
||||
"cors": "^2.8.5",
|
||||
"date-fns": "^1.30.1",
|
||||
"dotenv": "^8.2.0",
|
||||
"eslint-plugin-prettier": "^3.1.3",
|
||||
"express": "^4.17.1",
|
||||
"filepond": "^4.13.0",
|
||||
"filepond-plugin-file-validate-size": "^2.2.0",
|
||||
"filepond-plugin-file-validate-type": "^1.2.4",
|
||||
"filepond-plugin-image-preview": "^4.6.1",
|
||||
"lodash": "^4.17.15",
|
||||
"multer": "^1.4.2",
|
||||
"prettier": "^2.0.5",
|
||||
"pretty-quick": "^2.0.1",
|
||||
"qbittorrent-api-v2": "^1.2.0",
|
||||
"register-service-worker": "^1.7.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-apexcharts": "^1.5.2",
|
||||
"vue-filepond": "^5.1.3",
|
||||
"vue-router": "^3.1.6",
|
||||
"vue-toastification": "^1.7.1",
|
||||
"vuetify": "^1.5.24",
|
||||
"vuex": "^3.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.12.1",
|
||||
"@vue/cli-plugin-eslint": "^3.12.1",
|
||||
"@vue/cli-plugin-pwa": "^3.12.1",
|
||||
"@vue/cli-service": "^3.12.1",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-airbnb-base": "^14.1.0",
|
||||
"eslint-plugin-import": "^2.20.1",
|
||||
"eslint-plugin-vue": "^5.2.3",
|
||||
"stylus": "^0.54.7",
|
||||
"stylus-loader": "^3.0.1",
|
||||
"vue-cli-plugin-vuetify": "^0.4.6",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"vuetify-loader": "^1.4.3",
|
||||
"webpack": "^4.42.0",
|
||||
"webpack-cli": "^3.3.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential"
|
||||
],
|
||||
"rules": {},
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
module.exports = class Stat {
|
||||
constructor(data) {
|
||||
if (data != undefined && data != null) {
|
||||
this.status = data.connection_status;
|
||||
this.downloaded = this.formatBytes(data.dl_info_data, 1);
|
||||
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);
|
||||
}
|
||||
}
|
||||
formatBytes(a, b) {
|
||||
if (0 == a) return '0 Bytes';
|
||||
var c = 1024,
|
||||
d = b || 2,
|
||||
e = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
|
||||
f = Math.floor(Math.log(a) / Math.log(c));
|
||||
return parseFloat((a / Math.pow(c, f)).toFixed(d)) + ' ' + e[f];
|
||||
}
|
||||
};
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
module.exports = class Torrent {
|
||||
constructor(data) {
|
||||
this.name = data.name
|
||||
this.size = this.formatBytes(data.size)
|
||||
this.birth = new Date(data.added_on * 1000).toLocaleString()
|
||||
this.dlspeed = this.formatBytes(data.dlspeed, 1)
|
||||
this.dloaded = this.formatBytes(data.downloaded)
|
||||
this.upspeed = this.formatBytes(data.upspeed, 1)
|
||||
this.uploaded = this.formatBytes(data.uploaded)
|
||||
this.eta = `${new Date(data.eta).getHours()
|
||||
}h ${
|
||||
new Date(data.eta).getMinutes()
|
||||
}min`
|
||||
this.num_leechs = data.num_leechs
|
||||
this.num_seeds = data.num_seeds
|
||||
this.path = data.path === undefined ? '/downloads' : data.path
|
||||
this.state = this.formatState(data.state)
|
||||
// hash is used to identify
|
||||
this.hash = data.hash
|
||||
// available seeds
|
||||
this.available_seeds = data.num_complete
|
||||
this.available_peers = data.num_incomplete
|
||||
}
|
||||
|
||||
formatState(state) {
|
||||
switch (state) {
|
||||
case 'pausedDL':
|
||||
return 'paused'
|
||||
case 'downloading':
|
||||
return 'busy'
|
||||
case 'stalledDL':
|
||||
return 'fail'
|
||||
case 'pausedUP':
|
||||
return 'done'
|
||||
case 'missingFiles':
|
||||
return 'fail'
|
||||
case 'stalledUP':
|
||||
return 'done'
|
||||
default:
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
formatBytes(a, b) {
|
||||
if (a == 0) return '0 Bytes'
|
||||
const c = 1024
|
||||
const d = b || 2
|
||||
const e = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
const f = Math.floor(Math.log(a) / Math.log(c))
|
||||
return `${parseFloat((a / Math.pow(c, f)).toFixed(d))} ${e[f]}`
|
||||
}
|
||||
}
|
||||
101
server/qbit.js
101
server/qbit.js
|
|
@ -1,101 +0,0 @@
|
|||
const api = require('qbittorrent-api-v2')
|
||||
const dotenv = require('dotenv')
|
||||
const Torrent = require('./models/torrent.class.js')
|
||||
const Stat = require('./models/stat.class.js')
|
||||
|
||||
dotenv.config()
|
||||
|
||||
const connection = api.connect(process.env.QBIT_HOST, process.env.QBIT_USER, process.env.QBIT_PASS)
|
||||
|
||||
|
||||
class Qbit {
|
||||
async get_all(prop) {
|
||||
try {
|
||||
const res = await (await connection).torrents('all', null, prop.name, String(prop.reverse), '20', null, null)
|
||||
const torrents = []
|
||||
res.forEach((el) => {
|
||||
const t = new Torrent(el)
|
||||
torrents.push(t)
|
||||
})
|
||||
return torrents
|
||||
} catch (err) {
|
||||
return `something went wrong:${err}`
|
||||
}
|
||||
}
|
||||
|
||||
async get_session_stats() {
|
||||
try {
|
||||
const res = await (await connection).transferInfo()
|
||||
return new Stat(res)
|
||||
} catch (err) {
|
||||
return `something went wrong:${err}`
|
||||
}
|
||||
}
|
||||
|
||||
async pause_torrents(torrents) {
|
||||
let _torrents = ''
|
||||
torrents.forEach((el) => {
|
||||
_torrents += `${el}|`
|
||||
})
|
||||
try {
|
||||
return await (await connection).pauseTorrents(_torrents)
|
||||
} catch (err) {
|
||||
return `something went wrong:${err}`
|
||||
}
|
||||
}
|
||||
|
||||
async pause_all() {
|
||||
try {
|
||||
return await (await connection).pauseTorrents('all')
|
||||
} catch (err) {
|
||||
return `something went wrong:${err}`
|
||||
}
|
||||
}
|
||||
|
||||
async resume_torrents(torrents) {
|
||||
let _torrents = ''
|
||||
torrents.forEach((el) => {
|
||||
_torrents += `${el}|`
|
||||
})
|
||||
console.log(_torrents)
|
||||
try {
|
||||
return await (await connection).resumeTorrents(_torrents)
|
||||
} catch (err) {
|
||||
return `something went wrong:${err}`
|
||||
}
|
||||
}
|
||||
|
||||
async resume_all() {
|
||||
try {
|
||||
return await (await connection).resumeTorrents('all')
|
||||
} catch (err) {
|
||||
return `something went wrong:${err}`
|
||||
}
|
||||
}
|
||||
|
||||
async remove_torrents(torrents) {
|
||||
let _torrents = ''
|
||||
torrents.forEach((el) => {
|
||||
_torrents += `${el}|`
|
||||
})
|
||||
console.log(_torrents)
|
||||
try {
|
||||
return await (await connection).deleteTorrents(_torrents, 'true')
|
||||
} catch (err) {
|
||||
return `something went wrong:${err}`
|
||||
}
|
||||
}
|
||||
|
||||
async add(torrent) {
|
||||
return new Promise((resolve, reject) => {
|
||||
connection.add(torrent.path, null, null, (err, res) => {
|
||||
resolve(res)
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const qbit = new Qbit()
|
||||
|
||||
module.exports = qbit
|
||||
127
server/server.js
127
server/server.js
|
|
@ -1,127 +0,0 @@
|
|||
const express = require('express')
|
||||
const multer = require('multer')
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
const dotenv = require('dotenv')
|
||||
const qbit = require('./qbit')
|
||||
|
||||
dotenv.config()
|
||||
|
||||
const PORT = process.env.PORT || 3000
|
||||
|
||||
const newest_torrent = {
|
||||
name: '',
|
||||
path: '',
|
||||
}
|
||||
|
||||
const upload = multer({
|
||||
dest: './src/tmp/',
|
||||
})
|
||||
|
||||
// init express
|
||||
const app = express()
|
||||
|
||||
app.use(express.json())
|
||||
app.use(express.static('dist'))
|
||||
|
||||
// requests
|
||||
// login
|
||||
app.post('/login', (req, res) => {
|
||||
console.log(req.body)
|
||||
if (req.body.username !== process.env.VUE_APP_WEB_USER) {
|
||||
return res.send('No such user')
|
||||
} if (
|
||||
req.body.username === process.env.VUE_APP_WEB_USER
|
||||
&& req.body.password !== process.env.VUE_APP_WEB_PASS
|
||||
) {
|
||||
return res.send('Wrong password!')
|
||||
} if (
|
||||
req.body.username === process.env.VUE_APP_WEB_USER
|
||||
&& req.body.password === process.env.VUE_APP_WEB_PASS
|
||||
) {
|
||||
return res.send('SUCCES')
|
||||
}
|
||||
return res.send('Something went wrong')
|
||||
})
|
||||
|
||||
// get all torrents
|
||||
// AAAND sort torrents
|
||||
app.post('/all', async (req, res) => {
|
||||
const torrents = await qbit.get_all(req.body)
|
||||
res.set('Content-Type', 'application/json')
|
||||
res.send(torrents)
|
||||
})
|
||||
|
||||
// get session stats
|
||||
app.get('/session', async (req, res) => {
|
||||
const stats = await qbit.get_session_stats()
|
||||
res.set('Content-Type', 'application/json')
|
||||
res.send(stats)
|
||||
})
|
||||
|
||||
// pause selected torrents
|
||||
app.post('/pause', async (req, res) => {
|
||||
// console.log(req.body);
|
||||
const msg = await qbit.pause_torrents(req.body)
|
||||
return res.send(msg)
|
||||
})
|
||||
|
||||
// pause all torrents
|
||||
app.post('/pause_all', async (req, res) => {
|
||||
const msg = await qbit.pause_all()
|
||||
return res.send(msg)
|
||||
})
|
||||
|
||||
// resume selected torrents
|
||||
app.post('/resume', async (req, res) => {
|
||||
// console.log(req.body);
|
||||
const msg = await qbit.resume_torrents(req.body)
|
||||
return res.send(msg)
|
||||
})
|
||||
|
||||
// resume all torrents
|
||||
app.post('/resume_all', async (req, res) => {
|
||||
const msg = await qbit.resume_all()
|
||||
return res.send(msg)
|
||||
})
|
||||
|
||||
// remove selected torrents
|
||||
app.post('/remove', async (req, res) => {
|
||||
// console.log(req.body);
|
||||
const msg = await qbit.remove_torrents(req.body)
|
||||
return res.send(msg)
|
||||
})
|
||||
|
||||
// upload files to server
|
||||
app.post('/upload', upload.single('file'), (req, res) => {
|
||||
newest_torrent.name = req.file.filename
|
||||
newest_torrent.path = req.file.path
|
||||
return res.send('succes')
|
||||
})
|
||||
|
||||
// add a torrent
|
||||
app.post('/add', async (req, res) => {
|
||||
const msg = await qbit.add(newest_torrent)
|
||||
fs.unlinkSync(newest_torrent.path)
|
||||
return res.send(msg)
|
||||
})
|
||||
|
||||
// delete last uploaded file
|
||||
app.delete('/upload', upload.single('file'), (req, res) => {
|
||||
fs.unlinkSync(newest_torrent.path)
|
||||
return res.send('deleted file')
|
||||
})
|
||||
|
||||
app.listen(PORT, () => console.log(`Server listening on port ${PORT}!`))
|
||||
|
||||
// clear the tmp directory on every boot
|
||||
const directory = path.resolve(`${__dirname}/tmp`)
|
||||
|
||||
fs.readdir(directory, (err, files) => {
|
||||
if (err) console.log(err)
|
||||
for (const file of files) {
|
||||
fs.unlink(path.join(directory, file), (err) => {
|
||||
if (err) console.log(err)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -1 +0,0 @@
|
|||
Here will torrents files be stored temporarily
|
||||
88
src/App.vue
88
src/App.vue
|
|
@ -1,63 +1,47 @@
|
|||
<template>
|
||||
<v-app class="grey lighten-4">
|
||||
<!--snackbar popup for torrent added -->
|
||||
<v-snackbar :value="snackbar" :timeout="4000" top color="success">
|
||||
<span>{{succes_msg}}</span>
|
||||
<v-btn color="white" flat @click="snackbarClose">Close</v-btn>
|
||||
</v-snackbar>
|
||||
|
||||
<!--snackbar popup for errors -->
|
||||
<v-snackbar :value="snackbar_error" :timeout="4000" top color="error">
|
||||
<span>{{error_msg}}</span>
|
||||
<v-btn color="white" flat @click="snackbar_errorClose">Close</v-btn>
|
||||
</v-snackbar>
|
||||
|
||||
<div v-if="authenticated">
|
||||
<Navbar/>
|
||||
<v-content class="mx-4 mb-4">
|
||||
<router-view></router-view>
|
||||
</v-content>
|
||||
</div>
|
||||
<v-container v-else fill-height>
|
||||
<v-layout row wrap align-center class="justify-center" justify-center>
|
||||
<div style="margin: 0 auto">
|
||||
<Login/>
|
||||
<v-app class="grey lighten-4">
|
||||
<div v-if="authenticated">
|
||||
<Navbar />
|
||||
<v-content class="mx-4 mb-4">
|
||||
<router-view></router-view>
|
||||
</v-content>
|
||||
</div>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<p class="grey--text caption text-sm-center text-md-center text-xs-center">Made by Daan Wijns</p>
|
||||
</v-app>
|
||||
<v-container v-else fill-height>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
align-center
|
||||
class="justify-center"
|
||||
justify-center
|
||||
>
|
||||
<div style="margin: 0 auto;">
|
||||
<Login />
|
||||
</div>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
<v-spacer></v-spacer>
|
||||
<p
|
||||
class="grey--text caption text-sm-center text-md-center text-xs-center"
|
||||
>
|
||||
Made by Daan Wijns
|
||||
</p>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Navbar from './components/Navbar'
|
||||
import Login from './components/Login'
|
||||
import Navbar from './components/Navbar.vue'
|
||||
import Login from './components/Login.vue'
|
||||
import qbit from './services/qbit'
|
||||
|
||||
export default {
|
||||
components: { Navbar, Login },
|
||||
name: 'App',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'authenticated',
|
||||
'snackbar_error',
|
||||
'error_msg',
|
||||
'snackbar',
|
||||
'succes_msg',
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
snackbar_errorClose() {
|
||||
this.$store.state.snackbar_error = false
|
||||
components: { Navbar, Login },
|
||||
name: 'App',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
snackbarClose() {
|
||||
this.$store.state.snackbar = false
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(['authenticated', 'rid', 'mainData', 'preferences'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,72 +1,75 @@
|
|||
<template>
|
||||
<v-container class="grey lighten-4">
|
||||
<v-card max-width="400" flat>
|
||||
<v-container :class="`pa-3 project done`">
|
||||
<v-card-title class="justify-center">
|
||||
<h2>Login</h2>
|
||||
</v-card-title>
|
||||
<div class="mr-5 ml-5"></div>
|
||||
<v-card-text>
|
||||
<v-form class="px-3" ref="form">
|
||||
<v-text-field
|
||||
flat
|
||||
solo
|
||||
background-color="grey lighten-4"
|
||||
label="username"
|
||||
prepend-icon="person"
|
||||
v-model="username"
|
||||
:rules="inputRules"
|
||||
@keyup.enter.native="Login"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
flat
|
||||
solo
|
||||
background-color="grey lighten-4"
|
||||
type="password"
|
||||
label="password"
|
||||
prepend-icon="lock"
|
||||
v-model="password"
|
||||
:rules="inputRules"
|
||||
@keyup.enter.native="Login"
|
||||
></v-text-field>
|
||||
<v-spacer></v-spacer>
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn
|
||||
:loading="loading"
|
||||
flat
|
||||
@click="Login"
|
||||
class="blue_accent white--text mx-0 mt-3"
|
||||
>Login</v-btn>
|
||||
</v-card-actions>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-container>
|
||||
<v-container class="grey lighten-4">
|
||||
<v-card max-width="400" flat>
|
||||
<v-container :class="`pa-3 project done`">
|
||||
<v-card-title class="justify-center">
|
||||
<h2>Login</h2>
|
||||
</v-card-title>
|
||||
<div class="mr-5 ml-5"></div>
|
||||
<v-card-text>
|
||||
<v-form class="px-3" ref="form">
|
||||
<v-text-field
|
||||
flat
|
||||
solo
|
||||
background-color="grey lighten-4"
|
||||
label="username"
|
||||
prepend-icon="person"
|
||||
v-model="username"
|
||||
:rules="inputRules"
|
||||
@keyup.enter.native="Login"
|
||||
autocomplete="current email"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
flat
|
||||
solo
|
||||
background-color="grey lighten-4"
|
||||
type="password"
|
||||
label="password"
|
||||
prepend-icon="lock"
|
||||
v-model="password"
|
||||
:rules="inputRules"
|
||||
@keyup.enter.native="Login"
|
||||
autocomplete="current password"
|
||||
></v-text-field>
|
||||
<v-spacer></v-spacer>
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn
|
||||
:loading="loading"
|
||||
flat
|
||||
@click="Login"
|
||||
class="blue_accent white--text mx-0 mt-3"
|
||||
>Login</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
inputRules: [(v) => v.length >= 1 || 'At least 1 character'],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
Login() {
|
||||
this.$store.state.loading = true
|
||||
this.$store.dispatch('LOGIN', {
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
})
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
inputRules: [v => v.length >= 1 || 'At least 1 character']
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(['loading']),
|
||||
},
|
||||
methods: {
|
||||
Login() {
|
||||
this.$store.state.loading = true
|
||||
this.$store.dispatch('LOGIN', {
|
||||
username: this.username,
|
||||
password: this.password
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['loading'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,108 +1,173 @@
|
|||
<template>
|
||||
<nav>
|
||||
<!--title-->
|
||||
<v-toolbar flat app>
|
||||
<v-toolbar-side-icon @click="drawer = !drawer" class="grey--text"></v-toolbar-side-icon>
|
||||
<v-toolbar-title :class="['grey--text', {'subheading ml-0': $vuetify.breakpoint.smAndDown}]">
|
||||
<span class="font-weight-light">Vue</span>
|
||||
<span>Torrent</span>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<nav>
|
||||
<!--title-->
|
||||
<v-toolbar flat app>
|
||||
<v-toolbar-side-icon
|
||||
@click="drawer = !drawer"
|
||||
class="grey--text"
|
||||
></v-toolbar-side-icon>
|
||||
<v-toolbar-title
|
||||
:class="[
|
||||
'grey--text',
|
||||
{ 'subheading ml-0': $vuetify.breakpoint.smAndDown }
|
||||
]"
|
||||
>
|
||||
<span class="font-weight-light">Vue</span>
|
||||
<span>Torrent</span>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<!--right corner functions-->
|
||||
<AddTorrent @torrentAdded="snackbar = true"/>
|
||||
<v-btn small fab flat class="mr-0 ml-0" @click="removeTorrents">
|
||||
<v-icon color="grey">remove</v-icon>
|
||||
</v-btn>
|
||||
<v-btn small fab flat class="mr-0 ml-0" @click="resumeTorrents">
|
||||
<v-icon color="grey">play_arrow</v-icon>
|
||||
</v-btn>
|
||||
<v-btn small fab flat class="mr-0 ml-0" @click="pauseTorrents">
|
||||
<v-icon color="grey">pause</v-icon>
|
||||
</v-btn>
|
||||
<v-btn small fab flat class="mr-0 ml-0" @click="refreshTorrents">
|
||||
<v-icon color="grey">autorenew</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
<!--navigation drawer itself -->
|
||||
<v-navigation-drawer app v-model="drawer" class="primary allow-spacer">
|
||||
<!--current download speeds -->
|
||||
<v-flex class="mt-3">
|
||||
<div class="secondary_lighter--text text-uppercase caption ml-4">current speed</div>
|
||||
<v-card color="secondary" flat class="mr-2 ml-2">
|
||||
<v-layout row wrap :class="`pa-3 project nav_download`">
|
||||
<v-icon color="download">keyboard_arrow_down</v-icon>
|
||||
<span class="download--text title">
|
||||
{{stats.dlspeed.substring(0, stats.dlspeed.indexOf(' '))}}
|
||||
<span
|
||||
class="font-weight-light caption"
|
||||
>{{stats.dlspeed.substring(stats.dlspeed.indexOf(' '))}}</span>
|
||||
</span>
|
||||
<v-icon class="pl-5" color="upload">keyboard_arrow_up</v-icon>
|
||||
<span class="upload--text title">
|
||||
{{stats.upspeed.substring(0, stats.upspeed.indexOf(' '))}}
|
||||
<span
|
||||
class="font-weight-light caption"
|
||||
>{{stats.upspeed.substring(stats.upspeed.indexOf(' '))}}</span>
|
||||
</span>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
<!--speeds graph -->
|
||||
<div class="mt-4">
|
||||
<apexchart ref="chart" type="line" :options="chartOptions" :series="series"></apexchart>
|
||||
</div>
|
||||
<div class="mt-4"></div>
|
||||
<div class="secondary_lighter--text text-uppercase caption ml-4">session stats</div>
|
||||
<v-card flat color="secondary" class="mr-2 ml-2">
|
||||
<v-layout row wrap :class="`pa-3 project nav_download`">
|
||||
<v-flex md6>
|
||||
<div class="download--text">Total downloaded</div>
|
||||
<!--right corner functions-->
|
||||
<AddTorrent @torrentAdded="snackbar = true" />
|
||||
<v-btn small fab flat class="mr-0 ml-0" @click="removeTorrents">
|
||||
<v-icon color="grey">remove</v-icon>
|
||||
</v-btn>
|
||||
<v-btn small fab flat class="mr-0 ml-0" @click="resumeTorrents">
|
||||
<v-icon color="grey">play_arrow</v-icon>
|
||||
</v-btn>
|
||||
<v-btn small fab flat class="mr-0 ml-0" @click="pauseTorrents">
|
||||
<v-icon color="grey">pause</v-icon>
|
||||
</v-btn>
|
||||
<v-btn small fab flat class="mr-0 ml-0" @click="refreshTorrents">
|
||||
<v-icon color="grey">autorenew</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
<!--navigation drawer itself -->
|
||||
<v-navigation-drawer app v-model="drawer" class="primary allow-spacer">
|
||||
<!--current download speeds -->
|
||||
<v-flex class="mt-3">
|
||||
<div
|
||||
class="secondary_lighter--text text-uppercase caption ml-4"
|
||||
>
|
||||
current speed
|
||||
</div>
|
||||
<v-card color="secondary" flat class="mr-2 ml-2">
|
||||
<v-layout v-if="stats" row wrap :class="`pa-3 project nav_download`">
|
||||
<v-icon color="download">keyboard_arrow_down</v-icon>
|
||||
<span class="download--text title">
|
||||
{{
|
||||
stats.dlspeed.substring(
|
||||
0,
|
||||
stats.dlspeed.indexOf(' ')
|
||||
)
|
||||
}}
|
||||
<span class="font-weight-light caption">{{
|
||||
stats.dlspeed.substring(
|
||||
stats.dlspeed.indexOf(' ')
|
||||
)
|
||||
}}</span>
|
||||
</span>
|
||||
<v-icon class="pl-5" color="upload"
|
||||
>keyboard_arrow_up</v-icon
|
||||
>
|
||||
<span class="upload--text title">
|
||||
{{
|
||||
stats.upspeed.substring(
|
||||
0,
|
||||
stats.upspeed.indexOf(' ')
|
||||
)
|
||||
}}
|
||||
<span class="font-weight-light caption">{{
|
||||
stats.upspeed.substring(
|
||||
stats.upspeed.indexOf(' ')
|
||||
)
|
||||
}}</span>
|
||||
</span>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
<!--speeds graph -->
|
||||
<div class="mt-4">
|
||||
<apexchart
|
||||
ref="chart"
|
||||
type="line"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
></apexchart>
|
||||
</div>
|
||||
<div class="mt-4"></div>
|
||||
<div
|
||||
class="secondary_lighter--text text-uppercase caption ml-4"
|
||||
>
|
||||
session stats
|
||||
</div>
|
||||
<v-card v-if="stats" flat color="secondary" class="mr-2 ml-2">
|
||||
<v-layout row wrap :class="`pa-3 project nav_download`">
|
||||
<v-flex md6>
|
||||
<div class="download--text">Total downloaded</div>
|
||||
</v-flex>
|
||||
<v-flex md5 class="mr-2">
|
||||
<span class="download--text title pl-3">
|
||||
{{
|
||||
stats.downloaded.substring(
|
||||
0,
|
||||
stats.downloaded.indexOf(' ')
|
||||
)
|
||||
}}
|
||||
<span class="font-weight-light caption">{{
|
||||
stats.downloaded.substring(
|
||||
stats.downloaded.indexOf(' ')
|
||||
)
|
||||
}}</span>
|
||||
</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
<v-card v-if="stats" flat color="secondary" class="mr-2 ml-2 mt-1">
|
||||
<v-layout row wrap :class="`pa-3 project nav_upload`">
|
||||
<v-flex md6>
|
||||
<div class="upload--text">Total uploaded</div>
|
||||
</v-flex>
|
||||
<v-flex md5 class="mr-2">
|
||||
<span class="upload--text title pl-3">
|
||||
{{
|
||||
stats.uploaded.substring(
|
||||
0,
|
||||
stats.uploaded.indexOf(' ')
|
||||
)
|
||||
}}
|
||||
<span class="font-weight-light caption">{{
|
||||
stats.uploaded.substring(
|
||||
stats.uploaded.indexOf(' ')
|
||||
)
|
||||
}}</span>
|
||||
</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-flex md5 class="mr-2">
|
||||
<span class="download--text title pl-3">
|
||||
{{stats.downloaded.substring(0, stats.downloaded.indexOf(' '))}}
|
||||
<span
|
||||
class="font-weight-light caption"
|
||||
>{{stats.downloaded.substring(stats.downloaded.indexOf(' '))}}</span>
|
||||
</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
<v-card flat color="secondary" class="mr-2 ml-2 mt-1">
|
||||
<v-layout row wrap :class="`pa-3 project nav_upload`">
|
||||
<v-flex md6>
|
||||
<div class="upload--text">Total uploaded</div>
|
||||
</v-flex>
|
||||
<v-flex md5 class="mr-2">
|
||||
<span class="upload--text title pl-3">
|
||||
{{stats.uploaded.substring(0, stats.uploaded.indexOf(' '))}}
|
||||
<span
|
||||
class="font-weight-light caption"
|
||||
>{{stats.uploaded.substring(stats.uploaded.indexOf(' '))}}</span>
|
||||
</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-spacer></v-spacer>
|
||||
<v-layout class="align-end">
|
||||
<Settings/>
|
||||
<v-spacer></v-spacer>
|
||||
<v-tooltip top v-if="paused">
|
||||
<v-btn small fab flat class="mr-4" @click="startInterval" slot="activator">
|
||||
<v-icon color="green_accent">play_arrow</v-icon>
|
||||
</v-btn>
|
||||
<span>Resumes connection to client</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip top v-else>
|
||||
<v-btn small fab flat class="mr-4" @click="clearInterval" slot="activator">
|
||||
<v-icon color="green_accent">pause</v-icon>
|
||||
</v-btn>
|
||||
<span>Pauses connection to client</span>
|
||||
</v-tooltip>
|
||||
</v-layout>
|
||||
</v-navigation-drawer>
|
||||
</nav>
|
||||
<v-spacer></v-spacer>
|
||||
<v-layout class="align-end">
|
||||
<Settings />
|
||||
<v-spacer></v-spacer>
|
||||
<v-tooltip top v-if="paused">
|
||||
<v-btn
|
||||
small
|
||||
fab
|
||||
flat
|
||||
class="mr-4"
|
||||
@click="startInterval"
|
||||
slot="activator"
|
||||
>
|
||||
<v-icon color="green_accent">play_arrow</v-icon>
|
||||
</v-btn>
|
||||
<span>Resumes connection to client</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip top v-else>
|
||||
<v-btn
|
||||
small
|
||||
fab
|
||||
flat
|
||||
class="mr-4"
|
||||
@click="clearInterval"
|
||||
slot="activator"
|
||||
>
|
||||
<v-icon color="green_accent">pause</v-icon>
|
||||
</v-btn>
|
||||
<span>Pauses connection to client</span>
|
||||
</v-tooltip>
|
||||
</v-layout>
|
||||
</v-navigation-drawer>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -112,105 +177,98 @@ import AddTorrent from './AddTorrent'
|
|||
import Settings from './Settings'
|
||||
|
||||
export default {
|
||||
components: { AddTorrent, Settings },
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
paused: false,
|
||||
links: [
|
||||
{ icon: 'dashboard', text: 'Dashboard', route: '/' },
|
||||
{ icon: 'settings', text: 'Settings', route: '/settings' },
|
||||
],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
dynamicAnimation: {
|
||||
speed: 2000,
|
||||
components: { AddTorrent, Settings },
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
paused: false,
|
||||
links: [
|
||||
{ icon: 'dashboard', text: 'Dashboard', route: '/' },
|
||||
{ icon: 'settings', text: 'Settings', route: '/settings' }
|
||||
],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
dynamicAnimation: {
|
||||
speed: 2000
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: ['#00b3fa', '#64CEAA'],
|
||||
stroke: {
|
||||
show: true,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
width: 4
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
type: 'vertical',
|
||||
shadeIntensity: 0.5,
|
||||
opacityFrom: 0.6,
|
||||
opacityTo: 0.5,
|
||||
stops: [0, 50, 100]
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'upload',
|
||||
type: 'area',
|
||||
data: this.$store.state.upload_data
|
||||
},
|
||||
{
|
||||
name: 'download',
|
||||
type: 'area',
|
||||
data: this.$store.state.download_data
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['REFRESH_TORRENTS', 'CLEAR_INTERVALS']),
|
||||
clearInterval() {
|
||||
|
||||
},
|
||||
colors: ['#00b3fa', '#64CEAA'],
|
||||
stroke: {
|
||||
show: true,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
width: 4,
|
||||
startInterval() {
|
||||
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
type: 'vertical',
|
||||
shadeIntensity: 0.5,
|
||||
opacityFrom: 0.6,
|
||||
opacityTo: 0.5,
|
||||
stops: [0, 50, 100],
|
||||
},
|
||||
pauseTorrents() {
|
||||
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'upload',
|
||||
type: 'area',
|
||||
data: this.$store.state.upload_data,
|
||||
resumeTorrents() {
|
||||
|
||||
},
|
||||
{
|
||||
name: 'download',
|
||||
type: 'area',
|
||||
data: this.$store.state.download_data,
|
||||
removeTorrents() {
|
||||
|
||||
},
|
||||
],
|
||||
refreshTorrents() {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['getStats']),
|
||||
stats() {
|
||||
return this.getStats()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['REFRESH_TORRENTS', 'CLEAR_INTERVALS']),
|
||||
clearInterval() {
|
||||
this.$store.commit('CLEAR_INTERVALS')
|
||||
this.$data.paused = !this.$data.paused
|
||||
},
|
||||
startInterval() {
|
||||
this.$store.dispatch('REFRESH_TORRENTS')
|
||||
this.$store.dispatch('REFRESH_SESSION_STATS')
|
||||
this.$data.paused = !this.$data.paused
|
||||
},
|
||||
pauseTorrents() {
|
||||
this.$store.dispatch('PAUSE_TORRENTS')
|
||||
},
|
||||
resumeTorrents() {
|
||||
this.$store.dispatch('RESUME_TORRENTS')
|
||||
},
|
||||
removeTorrents() {
|
||||
this.$store.dispatch('REMOVE_TORRENTS')
|
||||
},
|
||||
refreshTorrents() {
|
||||
this.$store.state.init_torrents = false
|
||||
this.$store.dispatch('REFRESH_TORRENTS')
|
||||
},
|
||||
closeSnackbar() {
|
||||
this.$store.state.snackbar = false
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('REFRESH_SESSION_STATS')
|
||||
},
|
||||
computed: {
|
||||
...mapState(['stats', 'snackbar_error', 'error_msg', 'snackbar']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.project.nav_upload {
|
||||
border-left: 4px solid #00b3fa;
|
||||
border-left: 4px solid #00b3fa;
|
||||
}
|
||||
.project.nav_download {
|
||||
border-left: 4px solid #64ceaa;
|
||||
border-left: 4px solid #64ceaa;
|
||||
}
|
||||
.allow-spacer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
10
src/main.js
10
src/main.js
|
|
@ -1,20 +1,24 @@
|
|||
import Vue from 'vue'
|
||||
import './plugins/vuetify'
|
||||
import VueApexCharts from 'vue-apexcharts'
|
||||
import Toast from 'vue-toastification'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './services/store'
|
||||
import './registerServiceWorker'
|
||||
|
||||
import 'vue-toastification/dist/index.css'
|
||||
|
||||
Vue.use(VueApexCharts)
|
||||
|
||||
Vue.component('apexchart', VueApexCharts)
|
||||
|
||||
Vue.use(Toast)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: (h) => h(App),
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
|
|
|||
21
src/models/sessionStat.js
Normal file
21
src/models/sessionStat.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
export default class Stat {
|
||||
constructor(data) {
|
||||
if (data != undefined && data != null) {
|
||||
this.status = data.connection_status
|
||||
this.downloaded = this.formatBytes(data.dl_info_data, 1)
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
formatBytes(a, b) {
|
||||
if (a == 0) return '0 Bytes'
|
||||
const c = 1024
|
||||
const d = b || 2
|
||||
const e = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
const f = Math.floor(Math.log(a) / Math.log(c))
|
||||
return `${parseFloat((a / Math.pow(c, f)).toFixed(d))} ${e[f]}`
|
||||
}
|
||||
|
||||
}
|
||||
52
src/models/torrent.js
Normal file
52
src/models/torrent.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
export default class Torrent {
|
||||
constructor(data) {
|
||||
this.id = data.id
|
||||
this.name = data.name
|
||||
this.size = this.formatBytes(data.size)
|
||||
this.birth = new Date(data.added_on * 1000).toLocaleString()
|
||||
this.dlspeed = this.formatBytes(data.dlspeed, 1)
|
||||
this.dloaded = this.formatBytes(data.downloaded)
|
||||
this.upspeed = this.formatBytes(data.upspeed, 1)
|
||||
this.uploaded = this.formatBytes(data.uploaded)
|
||||
this.eta = `${new Date(data.eta).getHours()}h ${new Date(
|
||||
data.eta
|
||||
).getMinutes()}min`
|
||||
this.num_leechs = data.num_leechs
|
||||
this.num_seeds = data.num_seeds
|
||||
this.path = data.path === undefined ? '/downloads' : data.path
|
||||
this.state = this.formatState(data.state)
|
||||
// hash is used to identify
|
||||
this.hash = data.hash
|
||||
// available seeds
|
||||
this.available_seeds = data.num_complete
|
||||
this.available_peers = data.num_incomplete
|
||||
}
|
||||
|
||||
formatState(state) {
|
||||
switch (state) {
|
||||
case 'pausedDL':
|
||||
return 'paused'
|
||||
case 'downloading':
|
||||
return 'busy'
|
||||
case 'stalledDL':
|
||||
return 'fail'
|
||||
case 'pausedUP':
|
||||
return 'done'
|
||||
case 'missingFiles':
|
||||
return 'fail'
|
||||
case 'stalledUP':
|
||||
return 'done'
|
||||
default:
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
formatBytes(a, b) {
|
||||
if (a == 0) return '0 Bytes'
|
||||
const c = 1024
|
||||
const d = b || 2
|
||||
const e = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
const f = Math.floor(Math.log(a) / Math.log(c))
|
||||
return `${parseFloat((a / Math.pow(c, f)).toFixed(d))} ${e[f]}`
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +1,294 @@
|
|||
const axios = require('axios')
|
||||
import axios from 'axios'
|
||||
|
||||
class Qbit {
|
||||
constructor() {
|
||||
this._axios = axios.create({
|
||||
timeout: 1000,
|
||||
})
|
||||
}
|
||||
constructor() {
|
||||
this.axios = axios.create({
|
||||
baseURL: 'api/v2'
|
||||
})
|
||||
|
||||
async getAll(sort) {
|
||||
const res = await this._axios.post('/all', sort)
|
||||
return res.data
|
||||
}
|
||||
this.axios.defaults.headers.post['Content-Type'] =
|
||||
'application/x-www-form-urlencoded'
|
||||
}
|
||||
|
||||
async get_sessions_stats() {
|
||||
const res = await this._axios.get('/session')
|
||||
return res.data
|
||||
}
|
||||
getAppVersion() {
|
||||
return this.axios.get('/app/version')
|
||||
}
|
||||
|
||||
async pause_torrents(torrents) {
|
||||
const res = await this._axios.post('/pause', torrents)
|
||||
return res.data
|
||||
}
|
||||
getApiVersion() {
|
||||
return this.axios.get('/app/webapiVersion')
|
||||
}
|
||||
|
||||
async pause_all() {
|
||||
const res = await this._axios.post('/pause_all')
|
||||
return res.data
|
||||
}
|
||||
async login(params) {
|
||||
const payload = new URLSearchParams(params)
|
||||
const { data } = await this.axios.post('/auth/login', payload, {
|
||||
validateStatus(status) {
|
||||
return status === 200 || status === 403
|
||||
}
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
||||
async resume_torrents(torrents) {
|
||||
const res = await this._axios.post('/resume', torrents)
|
||||
return res.data
|
||||
}
|
||||
getGlobalTransferInfo() {
|
||||
return this.axios.get('/transfer/info')
|
||||
}
|
||||
|
||||
async resume_all() {
|
||||
const res = await this._axios.post('/resume_all')
|
||||
return res.data
|
||||
}
|
||||
getAppPreferences() {
|
||||
return this.axios.get('/app/preferences')
|
||||
}
|
||||
|
||||
async add_torrent(torrent) {
|
||||
const res = await this._axios.post('/add', torrent)
|
||||
return res
|
||||
}
|
||||
getMainData(rid) {
|
||||
const params = {
|
||||
rid
|
||||
}
|
||||
return this.axios.get('/sync/maindata', {
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
async remove_torrents(torrents) {
|
||||
const res = await this._axios.post('/remove', torrents)
|
||||
return res.data
|
||||
}
|
||||
addTorrents(params, torrents) {
|
||||
let data
|
||||
if (torrents) {
|
||||
const formData = new FormData()
|
||||
for (const [key, value] of Object.entries(params)) {
|
||||
// eslint-disable-next-line
|
||||
formData.append(key, value)
|
||||
}
|
||||
|
||||
async login(credentials) {
|
||||
let timeout = false
|
||||
const res = await this._axios.post('/login', credentials).catch((error) => {
|
||||
if (error.code === 'ECONNABORTED') timeout = true
|
||||
else throw error
|
||||
})
|
||||
return timeout ? 'timeout' : res.data
|
||||
}
|
||||
for (const torrent of torrents) {
|
||||
formData.append('torrents', torrent)
|
||||
}
|
||||
|
||||
data = formData
|
||||
} else {
|
||||
data = new URLSearchParams(params)
|
||||
}
|
||||
return this.axios.post('/torrents/add', data).then(Api.handleResponse)
|
||||
}
|
||||
|
||||
switchToOldUi() {
|
||||
const params = {
|
||||
alternative_webui_enabled: false
|
||||
}
|
||||
|
||||
return this.setPreferences(params)
|
||||
}
|
||||
|
||||
setPreferences(params) {
|
||||
const data = new URLSearchParams({
|
||||
json: JSON.stringify(params)
|
||||
})
|
||||
|
||||
return this.axios.post('/app/setPreferences', data)
|
||||
}
|
||||
|
||||
setTorrentFilePriority(hash, idList, priority) {
|
||||
const idListStr = idList.join('|')
|
||||
const params = {
|
||||
hash,
|
||||
id: idListStr,
|
||||
priority
|
||||
}
|
||||
|
||||
const data = new URLSearchParams(params)
|
||||
return this.axios
|
||||
.post('/torrents/filePrio', data)
|
||||
.then(Api.handleResponse)
|
||||
}
|
||||
|
||||
getLogs(lastId) {
|
||||
const params = {
|
||||
last_known_id: lastId
|
||||
}
|
||||
|
||||
return this.axios
|
||||
.get('/log/main', {
|
||||
params
|
||||
})
|
||||
.then(Api.handleResponse)
|
||||
}
|
||||
|
||||
toggleSpeedLimitsMode() {
|
||||
return this.axios.post('/transfer/toggleSpeedLimitsMode')
|
||||
}
|
||||
|
||||
deleteTorrents(hashes, deleteFiles) {
|
||||
return this.actionTorrents('delete', hashes, { deleteFiles })
|
||||
}
|
||||
|
||||
pauseTorrents(hashes) {
|
||||
return this.actionTorrents('pause', hashes)
|
||||
}
|
||||
|
||||
resumeTorrents(hashes) {
|
||||
return this.actionTorrents('resume', hashes)
|
||||
}
|
||||
|
||||
reannounceTorrents(hashes) {
|
||||
return this.actionTorrents('reannounce', hashes)
|
||||
}
|
||||
|
||||
recheckTorrents(hashes) {
|
||||
return this.actionTorrents('recheck', hashes)
|
||||
}
|
||||
|
||||
setTorrentsCategory(hashes, category) {
|
||||
return this.actionTorrents('setCategory', hashes, { category })
|
||||
}
|
||||
|
||||
getTorrentTracker(hash) {
|
||||
const params = {
|
||||
hash
|
||||
}
|
||||
|
||||
return this.axios
|
||||
.get('/torrents/trackers', {
|
||||
params
|
||||
})
|
||||
.then(Api.handleResponse)
|
||||
}
|
||||
|
||||
getTorrentPeers(hash, rid) {
|
||||
const params = {
|
||||
hash,
|
||||
rid
|
||||
}
|
||||
|
||||
return this.axios
|
||||
.get('/sync/torrentPeers', {
|
||||
params
|
||||
})
|
||||
.then(Api.handleResponse)
|
||||
}
|
||||
|
||||
editTracker(hash, origUrl, newUrl) {
|
||||
return this.actionTorrents('editTracker', [hash], { origUrl, newUrl })
|
||||
}
|
||||
|
||||
setTorrentLocation(hashes, location) {
|
||||
return this.actionTorrents('setLocation', hashes, { location })
|
||||
}
|
||||
|
||||
getTorrentProperties(hash) {
|
||||
const params = {
|
||||
hash
|
||||
}
|
||||
|
||||
return this.axios
|
||||
.get('/torrents/properties', {
|
||||
params
|
||||
})
|
||||
.then(Api.handleResponse)
|
||||
}
|
||||
|
||||
getTorrentPieceStates(hash) {
|
||||
const params = {
|
||||
hash
|
||||
}
|
||||
|
||||
return this.axios
|
||||
.get('/torrents/pieceStates', {
|
||||
params
|
||||
})
|
||||
.then(Api.handleResponse)
|
||||
}
|
||||
|
||||
getTorrentFiles(hash) {
|
||||
const params = {
|
||||
hash
|
||||
}
|
||||
|
||||
return this.axios
|
||||
.get('/torrents/files', {
|
||||
params
|
||||
})
|
||||
.then(Api.handleResponse)
|
||||
}
|
||||
|
||||
getRssItems() {
|
||||
const params = {
|
||||
withData: true
|
||||
}
|
||||
|
||||
return this.axios
|
||||
.get('/rss/items', {
|
||||
params
|
||||
})
|
||||
.then(Api.handleResponse)
|
||||
}
|
||||
|
||||
addRssFeed(url, path = '') {
|
||||
const params = {
|
||||
url,
|
||||
path
|
||||
}
|
||||
|
||||
const data = new URLSearchParams(params)
|
||||
return this.axios.post('/rss/addFeed', data).then(Api.handleResponse)
|
||||
}
|
||||
|
||||
removeRssFeed(path) {
|
||||
const params = {
|
||||
path
|
||||
}
|
||||
|
||||
const data = new URLSearchParams(params)
|
||||
return this.axios.post('/rss/removeItem', data).then(Api.handleResponse)
|
||||
}
|
||||
|
||||
refreshRssFeed(path) {
|
||||
const params = {
|
||||
itemPath: path
|
||||
}
|
||||
|
||||
const data = new URLSearchParams(params)
|
||||
return this.axios
|
||||
.post('/rss/refreshItem', data)
|
||||
.then(Api.handleResponse)
|
||||
}
|
||||
|
||||
moveRssFeed(path, newPath) {
|
||||
const params = {
|
||||
itemPath: path,
|
||||
destPath: newPath
|
||||
}
|
||||
|
||||
const data = new URLSearchParams(params)
|
||||
return this.axios.post('/rss/moveItem', data).then(Api.handleResponse)
|
||||
}
|
||||
|
||||
getRssRules() {
|
||||
return this.axios.get('/rss/rules').then(Api.handleResponse)
|
||||
}
|
||||
|
||||
setRssRule(name, def) {
|
||||
const params = {
|
||||
ruleName: name,
|
||||
ruleDef: JSON.stringify(def)
|
||||
}
|
||||
|
||||
const data = new URLSearchParams(params)
|
||||
return this.axios.post('/rss/setRule', data).then(Api.handleResponse)
|
||||
}
|
||||
|
||||
removeRssRule(name) {
|
||||
const params = {
|
||||
ruleName: name
|
||||
}
|
||||
|
||||
const data = new URLSearchParams(params)
|
||||
return this.axios.post('/rss/removeRule', data).then(Api.handleResponse)
|
||||
}
|
||||
|
||||
actionTorrents(action, hashes, extra) {
|
||||
const params = {
|
||||
hashes: hashes.join('|'),
|
||||
...extra
|
||||
}
|
||||
const data = new URLSearchParams(params)
|
||||
return this.axios
|
||||
.post(`/torrents/${action}`, data)
|
||||
.then(Api.handleResponse)
|
||||
}
|
||||
}
|
||||
|
||||
const qbit = new Qbit()
|
||||
|
||||
export default qbit
|
||||
export default new Qbit()
|
||||
|
|
|
|||
64
src/services/qbitOld.js
Normal file
64
src/services/qbitOld.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
const axios = require('axios')
|
||||
|
||||
class Qbit {
|
||||
constructor() {
|
||||
this._axios = axios.create({
|
||||
timeout: 1000
|
||||
})
|
||||
}
|
||||
|
||||
async getAll(sort) {
|
||||
const res = await this._axios.post('/all', sort)
|
||||
return res.data
|
||||
}
|
||||
|
||||
async get_sessions_stats() {
|
||||
const res = await this._axios.get('/session')
|
||||
return res.data
|
||||
}
|
||||
|
||||
async pause_torrents(torrents) {
|
||||
const res = await this._axios.post('/pause', torrents)
|
||||
return res.data
|
||||
}
|
||||
|
||||
async pause_all() {
|
||||
const res = await this._axios.post('/pause_all')
|
||||
return res.data
|
||||
}
|
||||
|
||||
async resume_torrents(torrents) {
|
||||
const res = await this._axios.post('/resume', torrents)
|
||||
return res.data
|
||||
}
|
||||
|
||||
async resume_all() {
|
||||
const res = await this._axios.post('/resume_all')
|
||||
return res.data
|
||||
}
|
||||
|
||||
async add_torrent(torrent) {
|
||||
const res = await this._axios.post('/add', torrent)
|
||||
return res
|
||||
}
|
||||
|
||||
async remove_torrents(torrents) {
|
||||
const res = await this._axios.post('/remove', torrents)
|
||||
return res.data
|
||||
}
|
||||
|
||||
async login(credentials) {
|
||||
let timeout = false
|
||||
const res = await this._axios
|
||||
.post('/login', credentials)
|
||||
.catch(error => {
|
||||
if (error.code === 'ECONNABORTED') timeout = true
|
||||
else throw error
|
||||
})
|
||||
return timeout ? 'timeout' : res.data
|
||||
}
|
||||
}
|
||||
|
||||
const qbit = new Qbit()
|
||||
|
||||
export default qbit
|
||||
|
|
@ -1,208 +1,120 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import { cloneDeep, merge, map, groupBy, sortBy } from 'lodash'
|
||||
import Torrent from '../models/torrent'
|
||||
import Stat from '../models/sessionStat'
|
||||
|
||||
import qbit from './qbit'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
intervals: [],
|
||||
stats: {
|
||||
status: 'init',
|
||||
dlspeed: '6 Mbps',
|
||||
upspeed: '1 Mbps',
|
||||
downloaded: '6.95 Gb',
|
||||
uploaded: '1014 Mb',
|
||||
state: {
|
||||
intervals: [],
|
||||
stats: null,
|
||||
upload_data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
download_data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
torrents: [],
|
||||
selected_torrents: [],
|
||||
authenticated: false,
|
||||
loading: false,
|
||||
sort_options: { sort: 'name', reverse: false },
|
||||
rid: 0,
|
||||
mainData: undefined,
|
||||
preferences: null,
|
||||
pasteUrl: null
|
||||
},
|
||||
upload_data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
download_data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
torrents: [],
|
||||
init_torrents: false,
|
||||
selected_torrents: [],
|
||||
network_error: false,
|
||||
snackbar_error: false,
|
||||
error_msg: '',
|
||||
snackbar: false,
|
||||
succes_msg: '',
|
||||
authenticated: false,
|
||||
loading: false,
|
||||
sort_options: { sort: 'name', reverse: false },
|
||||
},
|
||||
getters: {
|
||||
CONTAINS_TORRENT: (state) => (hash) => state.selected_torrents.includes(hash),
|
||||
},
|
||||
mutations: {
|
||||
REFRESH_TORRENTS: async (state) => {
|
||||
const torrents = await qbit.getAll(state.sort_options).catch(() => {
|
||||
state.network_error = true
|
||||
state.error_msg = 'Lost connection with server, reload page'
|
||||
state.snackbar_error = true
|
||||
})
|
||||
if (torrents) {
|
||||
state.torrents = torrents.map((a) => ({ ...a }))
|
||||
state.init_torrents = true
|
||||
}
|
||||
getters: {
|
||||
CONTAINS_TORRENT: state => hash =>
|
||||
state.selected_torrents.includes(hash)
|
||||
},
|
||||
REFRESH_SESSION_STATS: async (state) => {
|
||||
const _stats = await qbit.get_sessions_stats()
|
||||
// push in array for graph
|
||||
state.download_data.splice(0, 1)
|
||||
if (_stats.dlspeed.indexOf('KB' > -1)) {
|
||||
state.download_data.push(
|
||||
_stats.dlspeed.substring(0, _stats.dlspeed.indexOf(' ')) / 1000,
|
||||
)
|
||||
} else {
|
||||
state.download_data.push(
|
||||
_stats.dlspeed(0, _stats.dlspeed.indexOf(' ')),
|
||||
)
|
||||
}
|
||||
state.upload_data.splice(0, 1)
|
||||
if (_stats.upspeed.indexOf('KB' > -1)) {
|
||||
state.upload_data.push(
|
||||
_stats.upspeed.substring(0, _stats.upspeed.indexOf(' ')) / 1000,
|
||||
)
|
||||
} else {
|
||||
state.upload_data.push(
|
||||
_stats.upspeed.substring(0, _stats.upspeed.indexOf(' ')),
|
||||
)
|
||||
}
|
||||
state.stats = _stats
|
||||
},
|
||||
CLEAR_INTERVALS: (state) => {
|
||||
if (state.intervals.length > 1) { state.intervals.forEach((el) => clearInterval(el)) }
|
||||
},
|
||||
ADD_SELECTED: (state, payload) => {
|
||||
state.selected_torrents.push(payload)
|
||||
},
|
||||
REMOVE_SELECTED: (state, payload) => {
|
||||
state.selected_torrents.splice(
|
||||
state.selected_torrents.indexOf(payload),
|
||||
1,
|
||||
)
|
||||
},
|
||||
RESET_SELECTED: (state) => {
|
||||
state.selected_torrents = []
|
||||
},
|
||||
PAUSE_TORRENTS: async (state) => {
|
||||
let res
|
||||
if (state.selected_torrents.length === 0) {
|
||||
res = await qbit.pause_all()
|
||||
} else {
|
||||
res = await qbit.pause_torrents(state.selected_torrents)
|
||||
}
|
||||
},
|
||||
RESUME_TORRENTS: async (state) => {
|
||||
let res
|
||||
if (state.selected_torrents.length === 0) {
|
||||
res = await qbit.resume_all()
|
||||
} else {
|
||||
res = await qbit.resume_torrents(state.selected_torrents)
|
||||
}
|
||||
},
|
||||
ADD_TORRENT: async (state, payload) => {
|
||||
const res = await qbit.add_torrent(payload)
|
||||
if (res.statusText === 'OK') {
|
||||
state.snackbar = true
|
||||
state.succes_msg = 'Awesome! You added a new Torrent.'
|
||||
setTimeout(() => {
|
||||
state.snackbar = false
|
||||
}, 4000)
|
||||
} else {
|
||||
state.snackbar_error = true
|
||||
state.error_msg = 'Something went wrong'
|
||||
setTimeout(() => {
|
||||
state.snackbar_error = false
|
||||
}, 4000)
|
||||
}
|
||||
},
|
||||
REMOVE_TORRENTS: async (state) => {
|
||||
if (state.selected_torrents.length !== 0) {
|
||||
const res = await qbit.remove_torrents(state.selected_torrents)
|
||||
}
|
||||
},
|
||||
LOGIN: async (state, payload) => {
|
||||
const res = await qbit.login(payload)
|
||||
if (res == 'timeout') {
|
||||
state.loading = false
|
||||
state.snackbar_error = true
|
||||
state.error_msg = 'Express server timed out!'
|
||||
setTimeout(() => {
|
||||
state.snackbar_error = false
|
||||
}, 4000)
|
||||
} else {
|
||||
switch (res) {
|
||||
case 'No such user':
|
||||
state.snackbar_error = true
|
||||
state.error_msg = 'No such user!'
|
||||
setTimeout(() => {
|
||||
state.snackbar_error = false
|
||||
}, 4000)
|
||||
break
|
||||
case 'Wrong password!':
|
||||
state.snackbar_error = true
|
||||
state.error_msg = 'Wrong password!'
|
||||
setTimeout(() => {
|
||||
state.snackbar_error = false
|
||||
}, 4000)
|
||||
break
|
||||
case 'SUCCES':
|
||||
state.snackbar = true
|
||||
state.succes_msg = 'Succesfully logged in!'
|
||||
state.authenticated = true
|
||||
setTimeout(() => {
|
||||
state.snackbar = false
|
||||
}, 4000)
|
||||
break
|
||||
default:
|
||||
state.snackbar_error = true
|
||||
state.error_msg = 'Something went wrong'
|
||||
setTimeout(() => {
|
||||
state.snackbar_error = false
|
||||
}, 4000)
|
||||
break
|
||||
mutations: {
|
||||
REMOVE_INTERVALS: state => {
|
||||
state.intervals.forEach(el => clearInterval(el))
|
||||
},
|
||||
ADD_SELECTED: (state, payload) => {
|
||||
state.selected_torrents.push(payload)
|
||||
},
|
||||
REMOVE_SELECTED: (state, payload) => {
|
||||
state.selected_torrents.splice(
|
||||
state.selected_torrents.indexOf(payload),
|
||||
1
|
||||
)
|
||||
},
|
||||
RESET_SELECTED: state => {
|
||||
state.selected_torrents = []
|
||||
},
|
||||
PAUSE_TORRENTS: async state => {
|
||||
let res
|
||||
if (state.selected_torrents.length === 0) {
|
||||
res = await qbit.pause_all()
|
||||
} else {
|
||||
res = await qbit.pause_torrents(state.selected_torrents)
|
||||
}
|
||||
},
|
||||
RESUME_TORRENTS: async state => {
|
||||
let res
|
||||
if (state.selected_torrents.length === 0) {
|
||||
res = await qbit.resume_all()
|
||||
} else {
|
||||
res = await qbit.resume_torrents(state.selected_torrents)
|
||||
}
|
||||
},
|
||||
ADD_TORRENT: async (state, payload) => {
|
||||
const res = await qbit.add_torrent(payload)
|
||||
if (res.statusText === 'OK') {
|
||||
state.snackbar = true
|
||||
state.succes_msg = 'Awesome! You added a new Torrent.'
|
||||
setTimeout(() => {
|
||||
state.snackbar = false
|
||||
}, 4000)
|
||||
} else {
|
||||
state.snackbar_error = true
|
||||
state.error_msg = 'Something went wrong'
|
||||
setTimeout(() => {
|
||||
state.snackbar_error = false
|
||||
}, 4000)
|
||||
}
|
||||
},
|
||||
REMOVE_TORRENTS: async state => {
|
||||
if (state.selected_torrents.length !== 0) {
|
||||
const res = await qbit.remove_torrents(state.selected_torrents)
|
||||
}
|
||||
},
|
||||
LOGIN: async (state, payload) => {
|
||||
const res = await qbit.login(payload)
|
||||
if (res === 'Ok.') {
|
||||
state.loading = false
|
||||
Vue.$toast.success('Successfully logged in!')
|
||||
state.authenticated = true
|
||||
}
|
||||
},
|
||||
updateMainData: async state => {
|
||||
const rid = state.rid ? state.rid : undefined
|
||||
const { data } = await qbit.getMainData(rid)
|
||||
|
||||
// torrents
|
||||
state.torrents = []
|
||||
for (const [key, value] of Object.entries(data.torrents)) {
|
||||
state.torrents.push(new Torrent({ id: key, ...value }))
|
||||
}
|
||||
|
||||
// download speed
|
||||
state.stats = new Stat(data.server_state)
|
||||
}
|
||||
state.loading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
REFRESH_TORRENTS: (context) => {
|
||||
context.state.intervals[1] = setInterval(async () => {
|
||||
context.commit('REFRESH_TORRENTS')
|
||||
if (context.state.network_error) {
|
||||
context.commit('CLEAR_INTERVALS')
|
||||
actions: {
|
||||
INIT_INTERVALS: async (context) => {
|
||||
context.state.intervals[0] = setInterval(() => {
|
||||
context.commit('updateMainData')
|
||||
}, 2000)
|
||||
},
|
||||
LOGIN: async (context, payload) => {
|
||||
context.commit('LOGIN', payload)
|
||||
context.commit('updateMainData')
|
||||
}
|
||||
}, 2000)
|
||||
},
|
||||
REFRESH_SESSION_STATS: (context) => {
|
||||
context.state.intervals[0] = setInterval(async () => {
|
||||
context.commit('REFRESH_SESSION_STATS')
|
||||
}, 1000)
|
||||
},
|
||||
ADD_SELECTED: (context, payload) => {
|
||||
context.commit('ADD_SELECTED', payload)
|
||||
},
|
||||
REMOVE_SELECTED: (context, payload) => {
|
||||
context.commit('REMOVE_SELECTED', payload)
|
||||
},
|
||||
RESET_SELECTED: (context) => {
|
||||
context.commit('RESET_SELECTED')
|
||||
},
|
||||
PAUSE_TORRENTS: (context) => {
|
||||
context.commit('PAUSE_TORRENTS')
|
||||
},
|
||||
RESUME_TORRENTS: (context) => {
|
||||
context.commit('RESUME_TORRENTS')
|
||||
},
|
||||
ADD_TORRENT: (context, payload) => {
|
||||
context.commit('ADD_TORRENT', payload)
|
||||
},
|
||||
REMOVE_TORRENTS: (context) => {
|
||||
context.commit('REMOVE_TORRENTS')
|
||||
},
|
||||
LOGIN: (context, payload) => {
|
||||
context.commit('LOGIN', payload)
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
getStats: state => () => state.stats
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,273 +1,294 @@
|
|||
<template>
|
||||
<div class="dashboard" @click.self="resetSelected">
|
||||
<h1 class="subheading 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
|
||||
flat
|
||||
label="type to sort..."
|
||||
height="50"
|
||||
clearable
|
||||
solo
|
||||
hint="eg `size desc` + enter"
|
||||
background-color="grey lighten-3"
|
||||
v-model="sort_input"
|
||||
@keyup.enter.native="sortBy"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-container v-if="!init_torrents" fill-height>
|
||||
<div style="margin: 150px auto;">
|
||||
<v-progress-circular :size="100" indeterminate color="green_accent"></v-progress-circular>
|
||||
</div>
|
||||
</v-container>
|
||||
<div v-if="torrents.length === 0 && init_torrents" class="mt-5 text-xs-center">
|
||||
<p class="grey--text">No active Torrents!</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-card
|
||||
ripple
|
||||
flat
|
||||
v-for="torrent in torrents"
|
||||
:key="torrent.name"
|
||||
class="pointer"
|
||||
:class=" containsTorrent(torrent.hash) ? 'grey lighten-3' : ''"
|
||||
@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>
|
||||
<div class="dashboard" @click.self="resetSelected">
|
||||
<h1 class="subheading 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
|
||||
flat
|
||||
label="type to sort..."
|
||||
height="50"
|
||||
clearable
|
||||
solo
|
||||
hint="eg `size desc` + enter"
|
||||
background-color="grey lighten-3"
|
||||
v-model="sort_input"
|
||||
@keyup.enter.native="sortBy"
|
||||
></v-text-field>
|
||||
</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>
|
||||
<v-divider></v-divider>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-container>
|
||||
</div>
|
||||
<div v-if="torrents.length === 0" class="mt-5 text-xs-center">
|
||||
<p class="grey--text">No active Torrents!</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-card
|
||||
ripple
|
||||
flat
|
||||
v-for="torrent in torrents"
|
||||
:key="torrent.name"
|
||||
class="pointer"
|
||||
:class="
|
||||
containsTorrent(torrent.hash) ? 'grey lighten-3' : ''
|
||||
"
|
||||
@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>
|
||||
<v-divider></v-divider>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sort_input: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['torrents', 'init_torrents']),
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['SORT_TORRENTS']),
|
||||
sortBy() {
|
||||
let name; let
|
||||
reverse
|
||||
// search if order was presented
|
||||
const index = this.sort_input.indexOf(' ')
|
||||
if (index > -1) {
|
||||
name = this.sort_input.substring(0, index)
|
||||
const temp = this.sort_input.substring(index)
|
||||
if (temp.indexOf('asc') > -1) {
|
||||
reverse = false
|
||||
} else if (temp.indexOf('desc') > -1) {
|
||||
reverse = true
|
||||
data() {
|
||||
return {
|
||||
sort_input: ''
|
||||
}
|
||||
} else {
|
||||
// no order so we assume input is propname
|
||||
name = this.sort_input
|
||||
reverse = false
|
||||
}
|
||||
// prop names
|
||||
switch (name) {
|
||||
case 'title':
|
||||
case 'name':
|
||||
case 'Name':
|
||||
case 'Title':
|
||||
name = 'name'
|
||||
break
|
||||
case 'size':
|
||||
case 'Size':
|
||||
name = 'size'
|
||||
break
|
||||
case 'dlspeed':
|
||||
case 'Dlspeed':
|
||||
case 'Download':
|
||||
case 'download':
|
||||
case 'downloadspeed':
|
||||
name = 'dlspeed'
|
||||
break
|
||||
case 'upspeed':
|
||||
case 'upload':
|
||||
case 'Upload':
|
||||
case 'Upspeed':
|
||||
case 'uploadspeed':
|
||||
name = 'upspeed'
|
||||
break
|
||||
case 'leechs':
|
||||
case 'leechers':
|
||||
case 'leech':
|
||||
case 'peers':
|
||||
case 'Leechs':
|
||||
case 'Leechers':
|
||||
case 'Leech':
|
||||
case 'Peers':
|
||||
name = 'num_leechs'
|
||||
break
|
||||
case 'seeds':
|
||||
case 'seeders':
|
||||
case 'Seeds':
|
||||
case 'Seeders':
|
||||
name = 'num_seeds'
|
||||
break
|
||||
case 'remaining':
|
||||
case 'time':
|
||||
case 'Time':
|
||||
case 'ETA':
|
||||
case 'eta':
|
||||
name = 'eta'
|
||||
break
|
||||
case 'done':
|
||||
case 'downloaded':
|
||||
case 'dloaded':
|
||||
case 'Done':
|
||||
case 'Downloaded':
|
||||
case 'Dloaded':
|
||||
name = 'downloaded'
|
||||
break
|
||||
case 'state':
|
||||
case 'status':
|
||||
case 'State':
|
||||
case 'Status':
|
||||
name = 'state'
|
||||
break
|
||||
default:
|
||||
name = 'name'
|
||||
break
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['mainData', 'torrents'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['SORT_TORRENTS']),
|
||||
sortBy() {
|
||||
let name
|
||||
let reverse
|
||||
// search if order was presented
|
||||
const index = this.sort_input.indexOf(' ')
|
||||
if (index > -1) {
|
||||
name = this.sort_input.substring(0, index)
|
||||
const temp = this.sort_input.substring(index)
|
||||
if (temp.indexOf('asc') > -1) {
|
||||
reverse = false
|
||||
} else if (temp.indexOf('desc') > -1) {
|
||||
reverse = true
|
||||
}
|
||||
} else {
|
||||
// no order so we assume input is propname
|
||||
name = this.sort_input
|
||||
reverse = false
|
||||
}
|
||||
// prop names
|
||||
switch (name) {
|
||||
case 'title':
|
||||
case 'name':
|
||||
case 'Name':
|
||||
case 'Title':
|
||||
name = 'name'
|
||||
break
|
||||
case 'size':
|
||||
case 'Size':
|
||||
name = 'size'
|
||||
break
|
||||
case 'dlspeed':
|
||||
case 'Dlspeed':
|
||||
case 'Download':
|
||||
case 'download':
|
||||
case 'downloadspeed':
|
||||
name = 'dlspeed'
|
||||
break
|
||||
case 'upspeed':
|
||||
case 'upload':
|
||||
case 'Upload':
|
||||
case 'Upspeed':
|
||||
case 'uploadspeed':
|
||||
name = 'upspeed'
|
||||
break
|
||||
case 'leechs':
|
||||
case 'leechers':
|
||||
case 'leech':
|
||||
case 'peers':
|
||||
case 'Leechs':
|
||||
case 'Leechers':
|
||||
case 'Leech':
|
||||
case 'Peers':
|
||||
name = 'num_leechs'
|
||||
break
|
||||
case 'seeds':
|
||||
case 'seeders':
|
||||
case 'Seeds':
|
||||
case 'Seeders':
|
||||
name = 'num_seeds'
|
||||
break
|
||||
case 'remaining':
|
||||
case 'time':
|
||||
case 'Time':
|
||||
case 'ETA':
|
||||
case 'eta':
|
||||
name = 'eta'
|
||||
break
|
||||
case 'done':
|
||||
case 'downloaded':
|
||||
case 'dloaded':
|
||||
case 'Done':
|
||||
case 'Downloaded':
|
||||
case 'Dloaded':
|
||||
name = 'downloaded'
|
||||
break
|
||||
case 'state':
|
||||
case 'status':
|
||||
case 'State':
|
||||
case 'Status':
|
||||
name = 'state'
|
||||
break
|
||||
default:
|
||||
name = 'name'
|
||||
break
|
||||
}
|
||||
|
||||
this.$store.state.sort_options = { name, reverse }
|
||||
this.$store.state.sort_options = { name, reverse }
|
||||
},
|
||||
selectTorrent(hash) {},
|
||||
containsTorrent(hash) {},
|
||||
resetSelected() {}
|
||||
},
|
||||
selectTorrent(hash) {
|
||||
if (this.containsTorrent(hash)) {
|
||||
this.$store.dispatch('REMOVE_SELECTED', hash)
|
||||
} else {
|
||||
this.$store.dispatch('ADD_SELECTED', hash)
|
||||
}
|
||||
created() {
|
||||
this.$store.dispatch('INIT_INTERVALS')
|
||||
},
|
||||
containsTorrent(hash) {
|
||||
return this.$store.getters.CONTAINS_TORRENT(hash)
|
||||
},
|
||||
resetSelected() {
|
||||
this.$store.dispatch('RESET_SELECTED')
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('REFRESH_TORRENTS')
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$store.commit('REMOVE_INTERVALS')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.project.done {
|
||||
border-left: 4px solid #3cd1c2;
|
||||
border-left: 4px solid #3cd1c2;
|
||||
}
|
||||
.project.busy {
|
||||
border-left: 4px solid #ffaa2c;
|
||||
border-left: 4px solid #ffaa2c;
|
||||
}
|
||||
.project.fail {
|
||||
border-left: 4px solid #f83e70;
|
||||
border-left: 4px solid #f83e70;
|
||||
}
|
||||
.project.paused {
|
||||
border-left: 4px solid #cfd8dc;
|
||||
border-left: 4px solid #cfd8dc;
|
||||
}
|
||||
.v-chip.done {
|
||||
background: #3cd1c2;
|
||||
background: #3cd1c2;
|
||||
}
|
||||
.v-chip.busy {
|
||||
background: #ffaa2c;
|
||||
background: #ffaa2c;
|
||||
}
|
||||
.v-chip.fail {
|
||||
background: #f83e70;
|
||||
background: #f83e70;
|
||||
}
|
||||
.v-chip.paused {
|
||||
background: #cfd8dc;
|
||||
background: #cfd8dc;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
module.exports = {
|
||||
devServer: {
|
||||
proxy: 'http://localhost:3001/',
|
||||
},
|
||||
outputDir: 'dist/public',
|
||||
publicPath: './',
|
||||
|
||||
devServer: {
|
||||
port: 8000,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://127.0.0.1:8080'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue