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

Merge branch 'development' of github.com:WDaan/VueTorrent into development

Browse source
This commit is contained in:
Daan 2020-08-27 19:38:27 +02:00
commit 1c4e90e61d
32 changed files with 1091 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
.gitignore vendored
View file

@ -1,24 +1,24 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
vuetorrent
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
vuetorrent
config

2
README.md
View file

@ -46,6 +46,8 @@ The sleekest looking WEBUI for qBittorrent made with Vuejs!
- searching for new torrents straight from the WEBUI!
- changing the most common settings
* works on QBittorrent V4.2 and later
### Sorting/Filtring

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "vuetorrent",
"version": "0.1.2",
"version": "0.1.3",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",

8
src/App.vue
View file

@ -1,22 +1,24 @@
<template>
<v-app :style="{ backgroundColor: background }">
<AddModal />
<OldUIModal />
<SettingsModal />
<SearchModal />
<Navbar v-if="isAuthenticated" />
<v-content fill-height fill-width>
<v-main fill-height fill-width>
<router-view></router-view>
</v-content>
</v-main>
</v-app>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import Navbar from '@/components/Navbar.vue'
import SettingsModal from '@/components/SettingsModal/SettingsModal.vue'
import { isAuthenticated } from '@/services/auth.js'
export default {
components: { Navbar },
components: { Navbar, SettingsModal },
name: 'App',
data() {
return {}

4
src/components/Modals/SettingsModal.vue → src/components/Modals/OldUIModal.vue
View file

@ -52,7 +52,7 @@ import { mapState } from 'vuex'
import Modal from '@/mixins/Modal'
import qbit from '@/services/qbit'
export default {
name: 'SettingsModal',
name: 'OldUIModal',
mixins: [Modal],
methods: {
async switchOldUI() {
@ -61,7 +61,7 @@ export default {
window.location.reload(true)
},
save() {
this.$store.commit('TOGGLE_MODAL', 'settingsmodal')
this.$store.commit('TOGGLE_MODAL', 'olduimodal')
}
},
computed: {

103
src/components/Modals/SettingsModal/SettingsModal.vue Normal file
View file

@ -0,0 +1,103 @@
<template>
<v-dialog
v-model="dialog"
scrollable
:width="dialogWidth"
:fullscreen="phoneLayout"
>
<v-card style="min-height: 400px; overflow: hidden !important">
<div :style="{ height: phoneLayout ? '100vh' : '' }">
<v-card-title class="pb-0 justify-center primary">
<h2 class="white--text">Settings</h2>
</v-card-title>
<v-tabs v-model="tab" background-color="primary" center-active>
<v-tab href="#downloads">Downloads</v-tab>
<v-tab href="#bittorrent">BitTorrent</v-tab>
<v-tab href="#webui">WebUI</v-tab>
<v-tab href="#vuetorrent">VueTorrent</v-tab>
</v-tabs>
<perfect-scrollbar>
<v-tabs-items
v-model="tab"
touchless
:style="{ maxHeight: dialogHeight }"
>
<v-tab-item value="webui">
<WebUI :is-active="tab === 'webui'" />
</v-tab-item>
<v-tab-item value="bittorrent">
<BitTorrent :is-active="tab === 'bittorrent'" />
</v-tab-item>
<v-tab-item value="downloads">
<Downloads :is-active="tab === 'downloads'" />
</v-tab-item>
<v-tab-item value="vuetorrent">
<VueTorrent :is-active="tab === 'vuetorrent'" />
</v-tab-item>
</v-tabs-items>
</perfect-scrollbar>
</div>
<v-card-actions class="d-flex justify-center">
<v-btn color="success" @click="save_settings">Save</v-btn>
<v-fab-transition v-if="phoneLayout">
<v-btn
@click="close"
color="red"
dark
absolute
bottom
right
>
<v-icon>close</v-icon>
</v-btn>
</v-fab-transition>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import qbit from '@/services/qbit'
import { Modal, FullScreenModal } from '@/mixins'
import { WebUI, BitTorrent, Downloads, VueTorrent } from './Tabs'
export default {
name: 'SettingsModal',
mixins: [Modal, FullScreenModal],
components: { WebUI, BitTorrent, Downloads, VueTorrent },
data() {
return {
tab: null,
items: [],
peers: []
}
},
methods: {
close() {
this.$store.commit('TOGGLE_MODAL', 'SettingsModal')
},
save_settings() {
qbit.setPreferences(this.getSettings()).then(() => {
Vue.$toast.success('Settings saved successfully!')
})
}
},
computed: {
...mapGetters(['getSettings']),
dialogWidth() {
return this.phoneLayout ? '100%' : '750px'
},
dialogHeight() {
return this.phoneLayout ? '79vh' : '70vh'
}
},
watch: {
dialog(visible) {
!visible ? (this.tab = null) : this.$store.commit('SET_SETTINGS')
}
}
}
</script>

171
src/components/Modals/SettingsModal/Tabs/BitTorrent.vue Normal file
View file

@ -0,0 +1,171 @@
<template>
<v-container>
<v-card flat>
<v-card-text>
<h3>Privacy</h3>
<div class="settings_content ml-5 mr-5">
<v-checkbox
dense
:label="`Enable DHT (decentralized network) to find more peers`"
v-model="settings.dht"
/>
<v-checkbox
dense
:label="`Enable Peer Exchange (PeX) to find more peers`"
v-model="settings.pex"
/>
<v-checkbox
dense
:label="`Enable Local Peer Discovery to find more peers`"
v-model="settings.lsd"
/>
<v-checkbox
dense
:label="`Enable anonymous mode`"
v-model="settings.anonymous_mode"
/>
</div>
<v-checkbox
dense
:label="`Torrent Queueing`"
v-model="settings.queueing_enabled"
/>
<div class="settings_content ml-5 mr-5">
<v-text-field
class="mb-2"
outlined
dense
hide-details
:label="`Maximum active downloads`"
:disabled="!settings.queueing_enabled"
v-model="settings.max_active_downloads"
/>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:label="`Maximum active uploads`"
:disabled="!settings.queueing_enabled"
v-model="settings.max_active_uploads"
/>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:label="`Maximum active torrents`"
:disabled="!settings.queueing_enabled"
v-model="settings.max_active_torrents"
/>
<v-checkbox
dense
:label="`Do not count slow torrents in these limits`"
v-model="settings.dont_count_slow_torrents"
/>
<div class="settings_content">
<v-text-field
class="mb-2"
outlined
dense
hide-details
:label="`Download rate threshold KiB/s`"
:disabled="!settings.dont_count_slow_torrents"
v-model="settings.slow_torrent_dl_rate_threshold"
/>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:label="`Upload rate threshold KiB/s`"
:disabled="!settings.dont_count_slow_torrents"
v-model="settings.slow_torrent_ul_rate_threshold"
/>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:label="`Torrent inactivity timer`"
:disabled="!settings.dont_count_slow_torrents"
v-model="settings.slow_torrent_inactive_timer"
/>
</div>
</div>
<h3>Seeding Limits</h3>
<div class="settings_content ml-5 mr-5">
<v-row dense>
<v-col cols="10">
<v-checkbox
dense
:label="`When ratio reaches`"
v-model="settings.max_ratio_enabled"
/>
</v-col>
<v-col>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:disabled="!settings.max_ratio_enabled"
v-model="settings.max_ratio"
/>
</v-col>
</v-row>
<v-row dense>
<v-col cols="10">
<v-checkbox
dense
:label="`When seeding time reaches`"
v-model="settings.max_seeding_time_enabled"
/>
</v-col>
<v-col>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:disabled="!settings.max_seeding_time_enabled"
v-model="settings.max_seeding_time"
/>
</v-col>
</v-row>
</div>
</v-card-text>
</v-card>
</v-container>
</template>
<script>
import SettingsTab from '@/mixins/SettingsTab'
export default {
name: 'BitTorrent',
mixins: [SettingsTab]
}
</script>
<style lang="scss" scoped>
.v-input--selection-controls {
padding-top: 0px;
}
.settings_content {
border-left: 2px solid black;
padding-left: 8px;
}
.box {
margin: 2px;
padding: 5px;
border-radius: 4px;
border: 1px solid black;
}
</style>

101
src/components/Modals/SettingsModal/Tabs/Downloads.vue Normal file
View file

@ -0,0 +1,101 @@
<template>
<v-container>
<v-card flat>
<v-card-text>
<h3>When adding a torrent</h3>
<div class="settings_content ml-5 mr-5">
<v-checkbox
dense
:label="`Create subfolder for torrents with multiple files`"
v-model="settings.create_subfolder_enabled"
/>
<v-checkbox
dense
:label="`Do not start the download automatically`"
v-model="settings.start_paused_enabled"
/>
<!-- <v-checkbox
dense
:label="`Delete .torrent files afterwards`"
v-model="settings.lsd"
/> -->
</div>
<v-checkbox
dense
:label="`Pre-allocate disk space for all files`"
v-model="settings.preallocate_all"
/>
<v-checkbox
dense
:label="` Append .!qB extension to incomplete files`"
v-model="settings.incomplete_files_ext"
/>
<h3>Saving Management</h3>
<div class="settings_content ml-5 mr-5">
<v-row dense>
<v-col cols="5" class="d-flex align-center">
<h4>Default Save Path</h4>
</v-col>
<v-col>
<v-text-field
class="mb-2"
outlined
dense
hide-details
v-model="settings.save_path"
/>
</v-col>
</v-row>
<v-row dense>
<v-col cols="5">
<v-checkbox
dense
:label="`Keep incomplete torrents in:`"
v-model="settings.temp_path_enabled"
/>
</v-col>
<v-col>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:disabled="!settings.temp_path_enabled"
v-model="settings.temp_path"
/>
</v-col>
</v-row>
</div>
</v-card-text>
</v-card>
</v-container>
</template>
<script>
import SettingsTab from '@/mixins/SettingsTab'
export default {
name: 'BitTorrent',
mixins: [SettingsTab]
}
</script>
<style lang="scss" scoped>
.v-input--selection-controls {
padding-top: 0px;
}
.settings_content {
border-left: 2px solid black;
padding-left: 8px;
}
.box {
margin: 2px;
padding: 5px;
border-radius: 4px;
border: 1px solid black;
}
</style>

68
src/components/Modals/SettingsModal/Tabs/VueTorrent.vue Normal file
View file

@ -0,0 +1,68 @@
<template>
<v-container>
<v-card flat>
<v-card-text class="pa-0" style="font-size: 1.1em">
<div class="box">
<v-subheader
>These settings are for the custom WebUI
itself</v-subheader
>
<v-form class="px-6 mt-3">
<v-container>
<v-switch
class="v-input--reverse v-input--expand"
inset
v-model="freeSpace"
color="green_accent"
>
<template #label>
<span class="grey--text">
Show Free Space
</span>
</template>
</v-switch>
</v-container>
</v-form>
</div>
</v-card-text>
</v-card>
</v-container>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'VueTorrent',
computed: {
...mapState(['webuiSettings']),
freeSpace: {
get() {
return this.webuiSettings.showFreeSpace
},
set(val) {
this.webuiSettings.showFreeSpace = val
}
}
}
}
</script>
<style lang="scss" scoped>
// Reversed input variant
::v-deep .v-input--reverse .v-input__slot {
flex-direction: row-reverse;
justify-content: flex-end;
.v-application--is-ltr & {
.v-input--selection-controls__input {
margin-right: 0;
margin-left: 8px;
}
}
.v-application--is-rtl & {
.v-input--selection-controls__input {
margin-left: 0;
margin-right: 8px;
}
}
}
</style>

71
src/components/Modals/SettingsModal/Tabs/WebUI.vue Normal file
View file

@ -0,0 +1,71 @@
<template>
<v-container>
<v-card flat>
<v-card-text class="pa-0" style="font-size: 1.1em">
<div class="box">
<v-subheader>Use Alternative WebUI</v-subheader>
<div class="ml-5 mr-5">
<v-checkbox
dense
:label="`Use Alternative WebUI`"
v-model="settings.alternative_webui_enabled"
/>
<v-text-field
outlined
dense
hide-details="true"
:label="`Files location`"
:disabled="!settings.alternative_webui_enabled"
v-model="settings.alternative_webui_path"
/>
</div>
</div>
<div class="box">
<v-subheader
>Web User Interface (Remote Control)</v-subheader
>
<v-row class="ml-5 mr-5">
<v-col cols="10">
<v-text-field
class="mr-1"
outlined
dense
hide-details="true"
:label="`IP Address:`"
v-model="settings.web_ui_address"
/>
</v-col>
<v-col>
<v-text-field
class="ml-1"
outlined
dense
hide-details="true"
:label="`Port`"
v-model="settings.web_ui_port"
/>
</v-col>
</v-row>
</div>
</v-card-text>
</v-card>
</v-container>
</template>
<script>
import SettingsTab from '@/mixins/SettingsTab'
export default {
name: 'WebUI',
mixins: [SettingsTab]
}
</script>
<style lang="scss" scoped>
.box {
margin: 2px;
padding: 5px;
border-radius: 4px;
border: 1px solid black;
}
</style>

6
src/components/Modals/SettingsModal/Tabs/index.js Normal file
View file

@ -0,0 +1,6 @@
import WebUI from '@/components/Modals/SettingsModal/Tabs/WebUI.vue'
import BitTorrent from '@/components/Modals/SettingsModal/Tabs/BitTorrent.vue'
import Downloads from '@/components/Modals/SettingsModal/Tabs/Downloads.vue'
import VueTorrent from '@/components/Modals/SettingsModal/Tabs/VueTorrent.vue'
export { WebUI, BitTorrent, Downloads, VueTorrent }

185
src/components/SettingsModal/BitTorrent.vue Normal file
View file

@ -0,0 +1,185 @@
<template>
<v-container>
<v-card flat>
<v-card-text>
<h3>Privacy</h3>
<div class="settings_content ml-5 mr-5">
<v-checkbox
dense
:label="`Enable DHT (decentralized network) to find more peers`"
v-model="settings.dht"
/>
<v-checkbox
dense
:label="`Enable Peer Exchange (PeX) to find more peers`"
v-model="settings.pex"
/>
<v-checkbox
dense
:label="`Enable Local Peer Discovery to find more peers`"
v-model="settings.lsd"
/>
<v-checkbox
dense
:label="`Enable anonymous mode`"
v-model="settings.anonymous_mode"
/>
</div>
<v-checkbox
dense
:label="`Torrent Queueing`"
v-model="settings.queueing_enabled"
/>
<div class="settings_content ml-5 mr-5">
<v-text-field
class="mb-2"
outlined
dense
hide-details
:label="`Maximum active downloads`"
:disabled="!settings.queueing_enabled"
v-model="settings.max_active_downloads"
/>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:label="`Maximum active uploads`"
:disabled="!settings.queueing_enabled"
v-model="settings.max_active_uploads"
/>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:label="`Maximum active torrents`"
:disabled="!settings.queueing_enabled"
v-model="settings.max_active_torrents"
/>
<v-checkbox
dense
:label="`Do not count slow torrents in these limits`"
v-model="settings.dont_count_slow_torrents"
/>
<div class="settings_content">
<v-text-field
class="mb-2"
outlined
dense
hide-details
:label="`Download rate threshold KiB/s`"
:disabled="!settings.dont_count_slow_torrents"
v-model="settings.slow_torrent_dl_rate_threshold"
/>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:label="`Upload rate threshold KiB/s`"
:disabled="!settings.dont_count_slow_torrents"
v-model="settings.slow_torrent_ul_rate_threshold"
/>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:label="`Torrent inactivity timer`"
:disabled="!settings.dont_count_slow_torrents"
v-model="settings.slow_torrent_inactive_timer"
/>
</div>
</div>
<h3>Seeding Limits</h3>
<div class="settings_content ml-5 mr-5">
<v-row dense>
<v-col cols="10">
<v-checkbox
dense
:label="`When ratio reaches`"
v-model="settings.max_ratio_enabled"
/>
</v-col>
<v-col>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:disabled="!settings.max_ratio_enabled"
v-model="settings.max_ratio"
/>
</v-col>
</v-row>
<v-row dense>
<v-col cols="10">
<v-checkbox
dense
:label="`When seeding time reaches`"
v-model="settings.max_seeding_time_enabled"
/>
</v-col>
<v-col>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:disabled="!settings.max_seeding_time_enabled"
v-model="settings.max_seeding_time"
/>
</v-col>
</v-row>
</div>
</v-card-text>
<v-card-actions class="d-flex justify-center">
<v-btn color="success" @click="save_settings">Save</v-btn>
</v-card-actions>
</v-card>
</v-container>
</template>
<script>
import { mapGetters } from 'vuex'
import qbit from '@/services/qbit'
export default {
name: 'BitTorrent',
methods: {
async save_settings() {
await qbit.setPreferences(this.getSettings())
}
},
computed: {
...mapGetters(['getSettings']),
settings() {
return this.getSettings()
}
}
}
</script>
<style lang="scss" scoped>
.v-input--selection-controls {
padding-top: 0px;
}
.settings_content {
border-left: 2px solid black;
padding-left: 8px;
}
.box {
margin: 2px;
padding: 5px;
border-radius: 4px;
border: 1px solid black;
}
</style>

115
src/components/SettingsModal/Downloads.vue Normal file
View file

@ -0,0 +1,115 @@
<template>
<v-container>
<v-card flat>
<v-card-text>
<h3>When adding a torrent</h3>
<div class="settings_content ml-5 mr-5">
<v-checkbox
dense
:label="`Create subfolder for torrents with multiple files`"
v-model="settings.create_subfolder_enabled"
/>
<v-checkbox
dense
:label="`Do not start the download automatically`"
v-model="settings.start_paused_enabled"
/>
<!-- <v-checkbox
dense
:label="`Delete .torrent files afterwards`"
v-model="settings.lsd"
/> -->
</div>
<v-checkbox
dense
:label="`Pre-allocate disk space for all files`"
v-model="settings.preallocate_all"
/>
<v-checkbox
dense
:label="` Append .!qB extension to incomplete files`"
v-model="settings.incomplete_files_ext"
/>
<h3>Saving Management</h3>
<div class="settings_content ml-5 mr-5">
<v-row dense>
<v-col cols="5" class="d-flex align-center">
<h4>Default Save Path</h4>
</v-col>
<v-col>
<v-text-field
class="mb-2"
outlined
dense
hide-details
v-model="settings.save_path"
/>
</v-col>
</v-row>
<v-row dense>
<v-col cols="5">
<v-checkbox
dense
:label="`Keep incomplete torrents in:`"
v-model="settings.temp_path_enabled"
/>
</v-col>
<v-col>
<v-text-field
class="mb-2"
outlined
dense
hide-details
:disabled="!settings.temp_path_enabled"
v-model="settings.temp_path"
/>
</v-col>
</v-row>
</div>
</v-card-text>
<v-card-actions class="d-flex justify-center">
<v-btn color="success" @click="save_settings">Save</v-btn>
</v-card-actions>
</v-card>
</v-container>
</template>
<script>
import { mapGetters } from 'vuex'
import qbit from '@/services/qbit'
export default {
name: 'BitTorrent',
methods: {
async save_settings() {
await qbit.setPreferences(this.getSettings())
}
},
computed: {
...mapGetters(['getSettings']),
settings() {
return this.getSettings()
}
}
}
</script>
<style lang="scss" scoped>
.v-input--selection-controls {
padding-top: 0px;
}
.settings_content {
border-left: 2px solid black;
padding-left: 8px;
}
.box {
margin: 2px;
padding: 5px;
border-radius: 4px;
border: 1px solid black;
}
</style>

75
src/components/SettingsModal/SettingsModal.vue Normal file
View file

@ -0,0 +1,75 @@
<template>
<v-dialog max-width="750px" v-model="dialog">
<v-card>
<div :style="{ height: phoneLayout ? '100vh' : '' }">
<v-card-title class="pb-0 justify-center primary">
<h2 class="white--text">Settings</h2>
</v-card-title>
<v-tabs v-model="tab" background-color="primary" center-active>
<v-tab href="#downloads">Downloads</v-tab>
<v-tab href="#bittorrent">BitTorrent</v-tab>
<v-tab href="#webui">WebUI</v-tab>
</v-tabs>
<v-tabs-items v-model="tab" touchless>
<v-tab-item value="webui">
<WebUI :is-active="tab === 'webui'" />
</v-tab-item>
<v-tab-item value="bittorrent">
<BitTorrent :is-active="tab === 'bittorrent'" />
</v-tab-item>
<v-tab-item value="downloads">
<Downloads :is-active="tab === 'downloads'" />
</v-tab-item>
</v-tabs-items>
</div>
<v-fab-transition v-if="phoneLayout">
<v-btn @click="close" color="red" dark absolute bottom right>
<v-icon>close</v-icon>
</v-btn>
</v-fab-transition>
</v-card>
</v-dialog>
</template>
<script>
/* eslint-disable vue/no-unused-components */
import Modal from '@/mixins/Modal'
// import { mapGetters } from 'vuex'
import WebUI from '@/components/SettingsModal/WebUI.vue'
import BitTorrent from '@/components/SettingsModal/BitTorrent.vue'
import Downloads from '@/components/SettingsModal/Downloads.vue'
export default {
name: 'SettingsModal',
mixins: [Modal],
components: { WebUI, BitTorrent, Downloads },
data() {
return {
tab: null,
items: [],
peers: []
}
},
methods: {
close() {
this.$store.commit('TOGGLE_MODAL', 'SettingsModal')
}
},
computed: {
phoneLayout() {
return this.$vuetify.breakpoint.xsOnly
}
},
watch: {
dialog(visible) {
if (!visible) {
this.tab = null
} else {
// Grab the settings from qbittorrent again
this.$store.commit('SET_SETTINGS')
}
}
}
}
</script>

88
src/components/SettingsModal/WebUI.vue Normal file
View file

@ -0,0 +1,88 @@
<template>
<v-container>
<v-card flat>
<v-card-text class="pa-0" style="font-size: 1.1em;">
<div class="box">
<v-subheader>Use Alternative WebUI</v-subheader>
<div class="ml-5 mr-5">
<v-checkbox
dense
:label="`Use Alternative WebUI`"
v-model="settings.alternative_webui_enabled"
/>
<v-text-field
outlined
dense
hide-details="true"
:label="`Files location`"
:disabled="!settings.alternative_webui_enabled"
v-model="settings.alternative_webui_path"
/>
</div>
</div>
<div class="box">
<v-subheader
>Web User Interface (Remote Control)</v-subheader
>
<v-row class="ml-5 mr-5">
<v-col cols="10">
<v-text-field
class="mr-1"
outlined
dense
hide-details="true"
:label="`IP Address:`"
v-model="settings.web_ui_address"
/>
</v-col>
<v-col>
<v-text-field
class="ml-1"
outlined
dense
hide-details="true"
:label="`Port`"
v-model="settings.web_ui_port"
/>
</v-col>
</v-row>
</div>
</v-card-text>
<v-card-actions class="d-flex justify-center">
<v-btn color="success" @click="save_settings">Save</v-btn>
</v-card-actions>
</v-card>
</v-container>
</template>
<script>
import { mapGetters } from 'vuex'
import qbit from '@/services/qbit'
export default {
name: 'WebUI',
props: {
// localSettings: {}
},
methods: {
async save_settings() {
await qbit.setPreferences(this.getSettings())
}
},
computed: {
...mapGetters(['getSettings']),
settings() {
return this.getSettings()
}
}
}
</script>
<style lang="scss" scoped>
.box {
margin: 2px;
padding: 5px;
border-radius: 4px;
border: 1px solid black;
}
</style>

29
src/components/Torrent.vue
View file

@ -175,7 +175,10 @@ export default {
<style>
.project.done {
border-left: 4px solid #3cd1c2;
border-left: 4px solid #2e5eaa;
}
.project.downloading {
border-left: 4px solid #1fc176;
}
.project.busy {
border-left: 4px solid #ffaa2c;
@ -184,13 +187,16 @@ export default {
border-left: 4px solid #f83e70;
}
.project.paused {
border-left: 4px solid #cfd8dc;
border-left: 4px solid #eb8a90;
}
.project.queued {
border-left: 4px solid #2e5eaa;
}
.v-chip.done {
background: #3cd1c2 !important;
background: #2e5eaa !important;
}
.v-chip.downloading {
background: #1fc176 !important;
}
.v-chip.busy {
background: #ffaa2c !important;
@ -199,12 +205,8 @@ export default {
background: #f83e70 !important;
}
.v-chip.paused {
background: #cfd8dc !important;
background: #eb8a90 !important;
}
.v-chip.queued {
background: #2e5eaa !important;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
@ -214,6 +216,17 @@ export default {
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.v-chip.queued {
background: #2e5eaa !important;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.pointer {
cursor: pointer;
}

0
src/components/TorrentDetailModal/Content.vue → src/components/TorrentDetailModal/Tabs/Content.vue
View file

0
src/components/TorrentDetailModal/CreateNewTagDialog.vue → src/components/TorrentDetailModal/Tabs/CreateNewTagDialog.vue
View file

0
src/components/TorrentDetailModal/DeleteTagDialog.vue → src/components/TorrentDetailModal/Tabs/DeleteTagDialog.vue
View file

0
src/components/TorrentDetailModal/Info.vue → src/components/TorrentDetailModal/Tabs/Info.vue
View file

3
src/components/TorrentDetailModal/Peers.vue → src/components/TorrentDetailModal/Tabs/Peers.vue
View file

@ -6,7 +6,7 @@
:items="peers"
:items-per-page="-1"
:hide-default-footer="true"
style="max-height: 500px; min-height: 400px;"
style="max-height: 500px; min-height: 400px"
>
<template v-slot:item="row">
<tr>
@ -45,7 +45,6 @@
<script>
import { map, merge, cloneDeep } from 'lodash'
import qbit from '@/services/qbit'
// eslint-disable-next-line no-unused-vars
import { codeToFlag, isWindows } from '@/helpers'
export default {

0
src/components/TorrentDetailModal/Tags.vue → src/components/TorrentDetailModal/Tabs/Tags.vue
View file

0
src/components/TorrentDetailModal/Trackers.vue → src/components/TorrentDetailModal/Tabs/Trackers.vue
View file

7
src/components/TorrentDetailModal/Tabs/index.js Normal file
View file

@ -0,0 +1,7 @@
import Content from '@/components/TorrentDetailModal/Tabs/Content'
import Info from '@/components/TorrentDetailModal/Tabs/Info'
import Peers from '@/components/TorrentDetailModal/Tabs/Peers'
import Trackers from '@/components/TorrentDetailModal/Tabs/Trackers'
import Tags from '@/components/TorrentDetailModal/Tabs/Tags'
export { Content, Info, Peers, Trackers, Tags }

28
src/components/TorrentDetailModal/TorrentDetailModal.vue
View file

@ -7,7 +7,7 @@
>
<v-card
v-if="torrent"
style="min-height: 400px; overflow: hidden !important;"
style="min-height: 400px; overflow: hidden !important"
>
<div
:class="`pa-0 project ${torrent.state}`"
@ -54,20 +54,15 @@
</template>
<script>
/* eslint-disable vue/no-unused-components */
import Modal from '@/mixins/Modal'
import { mapGetters } from 'vuex'
import Content from '@/components/TorrentDetailModal/Content'
import Info from '@/components/TorrentDetailModal/Info'
import Peers from '@/components/TorrentDetailModal/Peers'
import Trackers from '@/components/TorrentDetailModal/Trackers'
import Tags from '@/components/TorrentDetailModal/Tags'
import { Modal, FullScreenModal } from '@/mixins'
import { Content, Info, Peers, Trackers, Tags } from './Tabs'
export default {
name: 'TorrentDetailModal',
mixins: [Modal],
components: { Content, Info, Peers, Trackers,Tags },
mixins: [Modal, FullScreenModal],
components: { Content, Info, Peers, Trackers, Tags },
data() {
return {
tab: null,
@ -87,19 +82,6 @@ export default {
},
torrent() {
return this.getTorrent(this.hash)
},
phoneLayout() {
return this.$vuetify.breakpoint.xsOnly
},
dialogWidth() {
return this.phoneLayout ? '100%' : '80%'
}
},
watch: {
dialog(visible) {
if (!visible) {
this.tab = null
}
}
}
}

17
src/mixins/FullScreenModal.js Normal file
View file

@ -0,0 +1,17 @@
export default {
computed: {
phoneLayout() {
return this.$vuetify.breakpoint.xsOnly
},
dialogWidth() {
return this.phoneLayout ? '100%' : '80%'
}
},
watch: {
dialog(visible) {
if (!visible) {
this.tab = null
}
}
}
}

9
src/mixins/SettingsTab.js Normal file
View file

@ -0,0 +1,9 @@
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['getSettings']),
settings() {
return this.getSettings()
}
}
}

5
src/mixins/index.js Normal file
View file

@ -0,0 +1,5 @@
import FullScreenModal from '@/mixins/FullScreenModal'
import Modal from '@/mixins/Modal'
import SettingsTab from '@/mixins/SettingsTab'
export { FullScreenModal, Modal, SettingsTab }

2
src/models/torrent.js
View file

@ -30,7 +30,7 @@ export default class Torrent {
case 'pausedDL':
return 'paused'
case 'downloading':
return 'busy'
return 'downloading'
case 'stalledDL':
return 'fail'
case 'pausedUP':

1
src/store/index.js
View file

@ -35,6 +35,7 @@ export default new Vuex.Store({
addmodal: false,
deletemodal: false,
settingsmodal: false,
olduimodal: false,
torrentdetailmodal: false
},
settings: {},

2
src/store/mutations.js
View file

@ -52,7 +52,7 @@ export default {
},
SET_SETTINGS: async state => {
const { data } = await qbit.getAppPreferences()
state.settings.savePath = data.save_path
state.settings = data
},
SET_SELECTED_TORRENT_DETAIL: (state, hash) => {
state.selectedDetailTorrent = hash

7
vue.config.js
View file

@ -2,7 +2,14 @@ module.exports = {
outputDir: 'vuetorrent/public',
publicPath: './',
transpileDependencies: ['vuetify'],
configureWebpack: {
devtool: 'source-map'
},
devServer: {
watchOptions: {
poll: true
},
host: 'localhost',
port: 8000,
proxy: {
'/api': {