mirror of
https://github.com/VueTorrent/VueTorrent.git
synced 2025-03-14 12:10:18 +03:00
Daan Wijns
GitHub
parent
745376c02b
commit
fcb021972a
24 changed files with 273 additions and 691 deletions
|
|
@ -1,131 +0,0 @@
|
|||
<template>
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
max-width="800px"
|
||||
scrollable
|
||||
:content-class="isPhone ? 'rounded-0' : 'rounded-form'"
|
||||
:width="dialogWidth"
|
||||
:fullscreen="isPhone"
|
||||
>
|
||||
<v-card
|
||||
class="rounded-t-formtop noselect"
|
||||
:class="isPhone ? '' : 'fix-height'"
|
||||
>
|
||||
<v-card-title class="primary pa-0">
|
||||
<v-toolbar flat dense class="primary white--text">
|
||||
<v-toolbar-title class="mt-auto white--text">
|
||||
<h3>{{ $t('settings') | titleCase }}</h3>
|
||||
</v-toolbar-title>
|
||||
<template #extension>
|
||||
<v-tabs v-model="tab" align-with-title show-arrows>
|
||||
<v-tabs-slider color="white" />
|
||||
<v-tab class="white--text" href="#vuetorrent">
|
||||
<h4>{{ $t('modals.settings.tabName.VueTorrent') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#downloads">
|
||||
<h4>{{ $t('modals.settings.tabName.downloads') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#connection">
|
||||
<h4>{{ $t('modals.settings.tabName.connection') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#bittorrent">
|
||||
<h4>{{ $t('modals.settings.tabName.bittorrent') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#webui">
|
||||
<h4>{{ $t('modals.settings.tabName.webUI') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#tagsAndCategories">
|
||||
<h4>{{ $t('modals.settings.tabName.tagsAndCategories') }}</h4>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</template>
|
||||
</v-toolbar>
|
||||
</v-card-title>
|
||||
<!--<v-divider />-->
|
||||
<v-card-text class="pa-0">
|
||||
<v-tabs-items v-model="tab" touchless>
|
||||
<v-tab-item eager value="vuetorrent">
|
||||
<VueTorrent :is-active="tab === 'vuetorrent'" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="downloads">
|
||||
<Downloads :is-active="tab === 'downloads'" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="connection">
|
||||
<Connection :is-active="tab === 'connection'" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="bittorrent">
|
||||
<BitTorrent :is-active="tab === 'bittorrent'" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="webui">
|
||||
<WebUI :is-active="tab === 'webui'" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="tagsAndCategories">
|
||||
<TagsAndCategories :is-active="tab === 'tagsAndCategories'" />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</v-card-text>
|
||||
<v-divider />
|
||||
<v-card-actions class="justify-end">
|
||||
<!-- class="justify-center" -->
|
||||
<v-btn
|
||||
class="accent white--text elevation-0 px-4"
|
||||
@click="saveSettings"
|
||||
>
|
||||
{{ $t('save') }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
class="error white--text elevation-0 px-4"
|
||||
@click="close"
|
||||
>
|
||||
{{ $t('cancel') }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Modal, FullScreenModal, SettingsTab } from '@/mixins'
|
||||
import { mdiClose } from '@mdi/js'
|
||||
import {
|
||||
WebUI,
|
||||
BitTorrent,
|
||||
Downloads,
|
||||
VueTorrent,
|
||||
TagsAndCategories,
|
||||
Connection
|
||||
} from './Tabs'
|
||||
|
||||
export default {
|
||||
name: 'SettingsModal',
|
||||
components: { WebUI, BitTorrent, Downloads, VueTorrent, TagsAndCategories, Connection },
|
||||
mixins: [Modal, FullScreenModal, SettingsTab],
|
||||
data() {
|
||||
return {
|
||||
tab: null,
|
||||
items: [],
|
||||
peers: [],
|
||||
mdiClose
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isPhone() {
|
||||
return this.$vuetify.breakpoint.xsOnly
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('FETCH_SETTINGS')
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.dialog = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fix-height .v-card__text {
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
<template>
|
||||
<v-card flat>
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="6">
|
||||
<v-subheader>
|
||||
{{ $t('modals.settings.pageVueTorrent.pageDashboard.busyTorrentTip') }}
|
||||
</v-subheader>
|
||||
<v-row dense>
|
||||
<v-list flat class="ma-2 pa-0">
|
||||
<draggable
|
||||
:list="busyTorrentProperties"
|
||||
tag="tbody"
|
||||
>
|
||||
<v-list-item
|
||||
v-for="(item, index) in busyTorrentProperties"
|
||||
:key="index"
|
||||
class="ma-2 elevation-2 rounded-lg pointer"
|
||||
>
|
||||
<v-checkbox
|
||||
v-model="item.active"
|
||||
dense
|
||||
hide-details
|
||||
class="pa-0 ma-0"
|
||||
/>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="truncate" v-text="item.name" />
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-icon>
|
||||
{{ mdiMenu }}
|
||||
</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</draggable>
|
||||
</v-list>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-subheader>
|
||||
{{ $t('modals.settings.pageVueTorrent.pageDashboard.completedTorrentTip') }}
|
||||
</v-subheader>
|
||||
<v-row dense>
|
||||
<v-list flat class="ma-2 pa-0">
|
||||
<draggable
|
||||
:list="doneTorrentProperties"
|
||||
tag="tbody"
|
||||
>
|
||||
<v-list-item
|
||||
v-for="(item, index) in doneTorrentProperties"
|
||||
:key="index"
|
||||
class="ma-2 elevation-2 rounded-lg pointer"
|
||||
>
|
||||
<v-checkbox
|
||||
v-model="item.active"
|
||||
dense
|
||||
hide-details
|
||||
class="pa-0 ma-0"
|
||||
/>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="truncate" v-text="item.name" />
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-icon>
|
||||
{{ mdiMenu }}
|
||||
</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</draggable>
|
||||
</v-list>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import { mdiMenu } from '@mdi/js'
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
data: () => ({
|
||||
mdiMenu
|
||||
}),
|
||||
computed: {
|
||||
busyTorrentProperties() {
|
||||
return this.$store.state.webuiSettings.busyTorrentProperties
|
||||
},
|
||||
doneTorrentProperties() {
|
||||
return this.$store.state.webuiSettings.doneTorrentProperties
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,317 +0,0 @@
|
|||
<template>
|
||||
<v-card flat>
|
||||
<v-subheader>
|
||||
{{ $t('modals.settings.pageVueTorrent.pageGeneral.tip') }}
|
||||
</v-subheader>
|
||||
<v-list-item>
|
||||
<v-row dense>
|
||||
<v-col>
|
||||
<v-switch
|
||||
v-model="showCurrentSpeed"
|
||||
class="v-input--reverse pa-0 ma-0"
|
||||
hide-details
|
||||
inset
|
||||
:label="$t('modals.settings.pageVueTorrent.pageGeneral.currentSpeed')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-row dense>
|
||||
<v-col>
|
||||
<v-switch
|
||||
v-model="showSpeedGraph"
|
||||
class="v-input--reverse pa-0 ma-0"
|
||||
hide-details
|
||||
inset
|
||||
:label="$t('modals.settings.pageVueTorrent.pageGeneral.speedGraph')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-row dense>
|
||||
<v-col>
|
||||
<v-switch
|
||||
v-model="showSessionStat"
|
||||
class="v-input--reverse pa-0 ma-0"
|
||||
hide-details
|
||||
inset
|
||||
:label="$t('modals.settings.pageVueTorrent.pageGeneral.sessionStats')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-row dense>
|
||||
<v-col>
|
||||
<v-switch
|
||||
v-model="showAlltimeStat"
|
||||
class="v-input--reverse pa-0 ma-0"
|
||||
hide-details
|
||||
inset
|
||||
:label="$t('modals.settings.pageVueTorrent.pageGeneral.allTimeStats')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-row dense>
|
||||
<v-col>
|
||||
<v-switch
|
||||
v-model="freeSpace"
|
||||
class="v-input--reverse pa-0 ma-0"
|
||||
hide-details
|
||||
inset
|
||||
:label="$t('modals.settings.pageVueTorrent.pageGeneral.freeSpace')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-row dense>
|
||||
<v-col>
|
||||
<v-switch
|
||||
v-model="showTrackerFilter"
|
||||
class="v-input--reverse pa-0 ma-0"
|
||||
hide-details
|
||||
inset
|
||||
:label="$t('modals.settings.pageVueTorrent.pageGeneral.trackerFilter')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-row dense>
|
||||
<v-col>
|
||||
<v-switch
|
||||
v-model="rightDrawer"
|
||||
class="v-input--reverse pa-0 ma-0"
|
||||
hide-details
|
||||
inset
|
||||
:label="$t('modals.settings.pageVueTorrent.pageGeneral.rightDrawer')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-row dense>
|
||||
<v-col cols="8" sm="8" md="10">
|
||||
<p class="subtitle-1 mt-2">
|
||||
{{ $t('modals.settings.pageVueTorrent.pageGeneral.language') }}
|
||||
</p>
|
||||
</v-col>
|
||||
<v-col cols="4" sm="4" md="2">
|
||||
<v-select
|
||||
v-model="lang"
|
||||
flat
|
||||
solo
|
||||
dense
|
||||
hide-details
|
||||
background-color="background"
|
||||
class="rounded-xl"
|
||||
:items="languages"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-row dense>
|
||||
<v-col cols="8" sm="8" md="10">
|
||||
<p class="subtitle-1 mt-2">
|
||||
{{ $t('modals.settings.pageVueTorrent.pageGeneral.paginationSize') }}
|
||||
</p>
|
||||
</v-col>
|
||||
<v-col cols="4" sm="4" md="2">
|
||||
<v-select
|
||||
v-model="paginationSize"
|
||||
flat
|
||||
solo
|
||||
dense
|
||||
hide-details
|
||||
background-color="background"
|
||||
class="rounded-xl"
|
||||
:items="paginationSizes"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-row dense>
|
||||
<v-col cols="8" sm="8" md="10">
|
||||
<p class="subtitle-1 mt-2">
|
||||
{{ $t('modals.settings.pageVueTorrent.pageGeneral.vueTorrentTitle') }}
|
||||
</p>
|
||||
</v-col>
|
||||
<v-col cols="4" sm="4" md="2">
|
||||
<v-select
|
||||
v-model="title"
|
||||
flat
|
||||
solo
|
||||
dense
|
||||
hide-details
|
||||
background-color="background"
|
||||
class="rounded-xl"
|
||||
:items="titleOptions"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-row dense>
|
||||
<v-col cols="10" sm="10" md="11">
|
||||
<p class="subtitle-1">
|
||||
{{ $t('modals.settings.pageVueTorrent.pageGeneral.currentVersion') }}
|
||||
</p>
|
||||
</v-col>
|
||||
<v-col cols="2" sm="2" md="1">
|
||||
<a target="_blank" :href="`https://github.com/WDaan/VueTorrent/releases/tag/v${version}`">
|
||||
<p class="mb-2">{{ version }}</p>
|
||||
</a>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-row dense>
|
||||
<v-col cols="10" sm="10" md="11">
|
||||
<p class="subtitle-1">
|
||||
{{ $t('modals.settings.pageVueTorrent.pageGeneral.qbittorrentVersion') }}
|
||||
</p>
|
||||
</v-col>
|
||||
<v-col cols="2" sm="2" md="1">
|
||||
<a target="_blank" :href="`https://github.com/qbittorrent/qBittorrent/releases/tag/release-${Qbitversion}`">
|
||||
<p class="mb-2">
|
||||
{{ Qbitversion }}
|
||||
</p>
|
||||
</a>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import qbit from '@/services/qbit'
|
||||
import { availableLanguages } from '@/lang'
|
||||
|
||||
export default {
|
||||
name: 'General',
|
||||
data() {
|
||||
return {
|
||||
languages: availableLanguages,
|
||||
paginationSizes: [5, 15, 30, 50],
|
||||
titleOptions: ['Default', 'Global Speed', 'First Torrent Status'],
|
||||
Qbitversion: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['webuiSettings']),
|
||||
...mapGetters(['getAppVersion']),
|
||||
freeSpace: {
|
||||
get() {
|
||||
return this.webuiSettings.showFreeSpace
|
||||
},
|
||||
set(val) {
|
||||
this.webuiSettings.showFreeSpace = val
|
||||
}
|
||||
},
|
||||
showCurrentSpeed: {
|
||||
get() {
|
||||
return this.webuiSettings.showCurrentSpeed
|
||||
},
|
||||
set(val) {
|
||||
this.webuiSettings.showCurrentSpeed = val
|
||||
}
|
||||
},
|
||||
showSpeedGraph: {
|
||||
get() {
|
||||
return this.webuiSettings.showSpeedGraph
|
||||
},
|
||||
set(val) {
|
||||
this.webuiSettings.showSpeedGraph = val
|
||||
}
|
||||
},
|
||||
showSessionStat: {
|
||||
get() {
|
||||
return this.webuiSettings.showSessionStat
|
||||
},
|
||||
set(val) {
|
||||
this.webuiSettings.showSessionStat = val
|
||||
}
|
||||
},
|
||||
showAlltimeStat: {
|
||||
get() {
|
||||
return this.webuiSettings.showAlltimeStat
|
||||
},
|
||||
set(val) {
|
||||
this.webuiSettings.showAlltimeStat = val
|
||||
}
|
||||
},
|
||||
showTrackerFilter: {
|
||||
get() {
|
||||
return this.webuiSettings.showTrackerFilter
|
||||
},
|
||||
set(val) {
|
||||
this.webuiSettings.showTrackerFilter = val
|
||||
}
|
||||
},
|
||||
rightDrawer: {
|
||||
get() {
|
||||
return this.webuiSettings.rightDrawer
|
||||
},
|
||||
set(val) {
|
||||
this.webuiSettings.rightDrawer = val
|
||||
}
|
||||
},
|
||||
paginationSize: {
|
||||
get() {
|
||||
return this.webuiSettings.paginationSize
|
||||
},
|
||||
set(val) {
|
||||
this.webuiSettings.paginationSize = val
|
||||
}
|
||||
},
|
||||
title: {
|
||||
get() {
|
||||
return this.webuiSettings.title
|
||||
},
|
||||
set(val) {
|
||||
this.webuiSettings.title = val
|
||||
}
|
||||
},
|
||||
lang: {
|
||||
get() {
|
||||
return this.webuiSettings.lang
|
||||
},
|
||||
set(val) {
|
||||
this.webuiSettings.lang = val
|
||||
}
|
||||
},
|
||||
version() {
|
||||
return this.getAppVersion()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchQbitVersion()
|
||||
},
|
||||
methods: {
|
||||
async fetchQbitVersion() {
|
||||
const version = await qbit.getAppVersion()
|
||||
this.Qbitversion = version.includes('v') ? version.substring(1) : version
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .v-select .v-select__selection {
|
||||
padding-top: 10px !important;
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
// Reversed input variant
|
||||
::v-deep .v-input--reverse .v-input__slot {
|
||||
@import "src/styles/styles.scss";
|
||||
@include reverse-switch;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import Content from '@/components/Modals/TorrentDetailModal/Tabs/Content'
|
||||
import Info from '@/components/Modals/TorrentDetailModal/Tabs/Info'
|
||||
import Peers from '@/components/Modals/TorrentDetailModal/Tabs/Peers'
|
||||
import Trackers from '@/components/Modals/TorrentDetailModal/Tabs/Trackers'
|
||||
import TagsAndCategories from '@/components/Modals/TorrentDetailModal/Tabs/TorrentTagsAndCategories'
|
||||
|
||||
export { Content, Info, Peers, Trackers, TagsAndCategories }
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
<template>
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
scrollable
|
||||
:content-class="isFullscreen ? 'rounded-0' : 'rounded-form'"
|
||||
:width="dialogWidth"
|
||||
:fullscreen="isFullscreen"
|
||||
>
|
||||
<v-card
|
||||
class="rounded-t-formtop"
|
||||
:class="isFullscreen ? '' : 'fix-height'"
|
||||
>
|
||||
<v-card-title class="primary pa-0" @dblclick="hndlFullscreen = !hndlFullscreen">
|
||||
<v-toolbar flat dense class="primary white--text">
|
||||
<v-toolbar-title class="mt-auto">
|
||||
<h3>{{ $t('modals.detail.title') }}</h3>
|
||||
</v-toolbar-title>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
v-if="!isPhone"
|
||||
fab
|
||||
small
|
||||
class="primary white--text elevation-0"
|
||||
@click="hndlFullscreen = !hndlFullscreen"
|
||||
>
|
||||
<v-icon>{{ isFullscreen ? mdiWindowRestore : mdiWindowMaximize }}</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab
|
||||
small
|
||||
class="primary elevation-0"
|
||||
@click="close"
|
||||
>
|
||||
<v-icon>{{ mdiClose }}</v-icon>
|
||||
</v-btn>
|
||||
<template #extension>
|
||||
<v-tabs v-model="tab" align-with-title show-arrows>
|
||||
<v-tabs-slider color="white" />
|
||||
<v-tab class="white--text" href="#info">
|
||||
<h4>{{ $t('modals.detail.tabTitleInfo') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#trackers">
|
||||
<h4>{{ $t('modals.detail.tabTitleTrackers') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#peers">
|
||||
<h4>{{ $t('modals.detail.tabTitlePeers') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#content">
|
||||
<h4>{{ $t('modals.detail.tabTitleContent') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#tagsAndCategories">
|
||||
<h4>{{ $t('modals.detail.tabTitleTagsCategories') }}</h4>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</template>
|
||||
</v-toolbar>
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-0">
|
||||
<v-tabs-items v-model="tab" touchless>
|
||||
<v-tab-item eager value="info">
|
||||
<info :is-active="tab === 'info'" :hash="hash" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="trackers">
|
||||
<Trackers :is-active="tab === 'trackers'" :hash="hash" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="peers">
|
||||
<Peers :is-active="tab === 'peers'" :hash="hash" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="content">
|
||||
<Content :is-active="tab === 'content'" :hash="hash" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="tagsAndCategories">
|
||||
<TagsAndCategories :is-active="tab === 'tagsAndCategories'" :hash="hash" />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { Modal, FullScreenModal } from '@/mixins'
|
||||
import { Content, Info, Peers, Trackers, TagsAndCategories } from './Tabs'
|
||||
import { mdiClose, mdiWindowMaximize, mdiWindowRestore } from '@mdi/js'
|
||||
|
||||
export default {
|
||||
name: 'TorrentDetailModal',
|
||||
components: { Content, Info, Peers, Trackers, TagsAndCategories },
|
||||
mixins: [Modal, FullScreenModal],
|
||||
props: {
|
||||
hash: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hndlFullscreen: false,
|
||||
tab: null,
|
||||
items: [{ tab: 'Info' }, { tab: 'Content' }],
|
||||
peers: [],
|
||||
mdiClose, mdiWindowMaximize, mdiWindowRestore
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['getTorrent']),
|
||||
torrent() {
|
||||
return this.getTorrent(this.hash)
|
||||
},
|
||||
isPhone() {
|
||||
return this.$vuetify.breakpoint.xsOnly
|
||||
},
|
||||
isFullscreen() {
|
||||
if (this.hndlFullscreen)
|
||||
return true
|
||||
else if (this.isPhone)
|
||||
return true
|
||||
|
||||
return false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.dialog = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fix-height .v-card__text {
|
||||
height: 600px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
class="mr-0 ml-0"
|
||||
:aria-label="$t('navbar.topActions.openSettings')"
|
||||
v-on="on"
|
||||
@click="addModal('SettingsModal')"
|
||||
@click="goToSettings"
|
||||
>
|
||||
<v-icon color="grey">
|
||||
{{ mdiCog }}
|
||||
|
|
@ -157,6 +157,10 @@ export default {
|
|||
},
|
||||
addModal(name) {
|
||||
this.createModal(name)
|
||||
},
|
||||
goToSettings() {
|
||||
if (this.$route.name !== 'settings')
|
||||
this.$router.push({ name: 'settings' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -386,7 +386,7 @@ export default {
|
|||
qbit.recheckTorrents(this.hashes)
|
||||
},
|
||||
showInfo() {
|
||||
this.createModal('TorrentDetailModal', { hash: this.torrent.hash })
|
||||
this.$router.push({ name: 'torrentDetail', params: { hash: this.torrent.hash } })
|
||||
},
|
||||
setPriority(priority) {
|
||||
qbit.setTorrentPriority(this.hashes, priority)
|
||||
|
|
|
|||
7
src/components/TorrentDetail/Tabs/index.js
Normal file
7
src/components/TorrentDetail/Tabs/index.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import Content from './Content'
|
||||
import Info from './Info'
|
||||
import Peers from './Peers'
|
||||
import Trackers from './Trackers'
|
||||
import TagsAndCategories from './TorrentTagsAndCategories'
|
||||
|
||||
export { Content, Info, Peers, Trackers, TagsAndCategories }
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Dashboard from '@/views/Dashboard.vue'
|
||||
import Login from '@/views/Login.vue'
|
||||
import MagnetHandler from '@/views/MagnetHandler'
|
||||
import { isAuthenticated } from '@/services/auth.js'
|
||||
import Dashboard from './views/Dashboard.vue'
|
||||
import Login from './views/Login.vue'
|
||||
import Settings from './views/Settings.vue'
|
||||
import TorrentDetail from './views/TorrentDetail'
|
||||
import MagnetHandler from './views/MagnetHandler'
|
||||
import { isAuthenticated } from './services/auth.js'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
|
|
@ -15,6 +17,16 @@ const router = new Router({
|
|||
name: 'dashboard',
|
||||
component: Dashboard
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'settings',
|
||||
component: Settings
|
||||
},
|
||||
{
|
||||
path: '/torrent/:hash',
|
||||
name: 'torrentDetail',
|
||||
component: TorrentDetail
|
||||
},
|
||||
{ path: '/download=:magnet',
|
||||
name: 'MagnetHandler',
|
||||
component: MagnetHandler,
|
||||
|
|
|
|||
|
|
@ -365,7 +365,7 @@ export default {
|
|||
},
|
||||
showInfo(hash) {
|
||||
if (!this.$store.state.selectMode)
|
||||
this.createModal('TorrentDetailModal', { hash })
|
||||
this.$router.push({ name: 'torrentDetail', params: { hash } })
|
||||
},
|
||||
resetSelected() {
|
||||
this.$store.commit('RESET_SELECTED')
|
||||
|
|
|
|||
135
src/views/Settings.vue
Normal file
135
src/views/Settings.vue
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div
|
||||
class="px-1 px-sm-5 background noselect"
|
||||
>
|
||||
<v-row
|
||||
no-gutters
|
||||
class="grey--text"
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
<v-col>
|
||||
<h1 style="font-size: 1.6em !important" class="subtitle-1 ml-2">
|
||||
{{ $t('settings') | titleCase }}
|
||||
</h1>
|
||||
</v-col>
|
||||
<v-col class="align-center justify-center">
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn
|
||||
class="accent"
|
||||
small
|
||||
elevation="0"
|
||||
@click="saveSettings"
|
||||
>
|
||||
<v-icon>{{ mdiContentSave }}</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
small
|
||||
elevation="0"
|
||||
@click="close"
|
||||
>
|
||||
<v-icon>{{ mdiClose }}</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="ma-0 pa-0">
|
||||
<v-tabs
|
||||
v-model="tab"
|
||||
align-with-title
|
||||
show-arrows
|
||||
background-color="primary"
|
||||
>
|
||||
<v-tab class="white--text" href="#vuetorrent">
|
||||
<h4>{{ $t('modals.settings.tabName.VueTorrent') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#downloads">
|
||||
<h4>{{ $t('modals.settings.tabName.downloads') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#connection">
|
||||
<h4>{{ $t('modals.settings.tabName.connection') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#bittorrent">
|
||||
<h4>{{ $t('modals.settings.tabName.bittorrent') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#webui">
|
||||
<h4>{{ $t('modals.settings.tabName.webUI') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#tagsAndCategories">
|
||||
<h4>{{ $t('modals.settings.tabName.tagsAndCategories') }}</h4>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
|
||||
<!--<v-divider />-->
|
||||
<v-card-text class="pa-0">
|
||||
<v-tabs-items v-model="tab" touchless>
|
||||
<v-tab-item eager value="vuetorrent">
|
||||
<VueTorrent :is-active="tab === 'vuetorrent'" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="downloads">
|
||||
<Downloads :is-active="tab === 'downloads'" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="connection">
|
||||
<Connection :is-active="tab === 'connection'" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="bittorrent">
|
||||
<BitTorrent :is-active="tab === 'bittorrent'" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="webui">
|
||||
<WebUI :is-active="tab === 'webui'" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="tagsAndCategories">
|
||||
<TagsAndCategories :is-active="tab === 'tagsAndCategories'" />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</v-card-text>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { mdiClose, mdiContentSave } from '@mdi/js'
|
||||
import {
|
||||
WebUI,
|
||||
BitTorrent,
|
||||
Downloads,
|
||||
VueTorrent,
|
||||
TagsAndCategories,
|
||||
Connection
|
||||
} from '@/components/Settings/Tabs'
|
||||
import { SettingsTab } from '../mixins'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: { WebUI, BitTorrent, Downloads, VueTorrent, TagsAndCategories, Connection },
|
||||
mixins: [SettingsTab],
|
||||
data() {
|
||||
return {
|
||||
tab: null,
|
||||
items: [],
|
||||
peers: [],
|
||||
mdiClose, mdiContentSave
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['getSettings']),
|
||||
settings() {
|
||||
return this.getSettings()
|
||||
},
|
||||
isPhone() {
|
||||
return this.$vuetify.breakpoint.xsOnly
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('FETCH_SETTINGS')
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$router.back()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
108
src/views/TorrentDetail.vue
Normal file
108
src/views/TorrentDetail.vue
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<div
|
||||
class="px-1 px-sm-5 background noselect"
|
||||
>
|
||||
<v-row
|
||||
no-gutters
|
||||
class="grey--text"
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
<v-col>
|
||||
<h1 style="font-size: 1.6em !important" class="subtitle-1 ml-2">
|
||||
{{ $t('modals.detail.title') | titleCase }}
|
||||
</h1>
|
||||
</v-col>
|
||||
<v-col class="align-center justify-center">
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn
|
||||
small
|
||||
elevation="0"
|
||||
@click="close"
|
||||
>
|
||||
<v-icon>{{ mdiClose }}</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="ma-0 pa-0">
|
||||
<v-tabs
|
||||
v-model="tab"
|
||||
align-with-title
|
||||
show-arrows
|
||||
background-color="primary"
|
||||
>
|
||||
<v-tabs-slider color="white" />
|
||||
<v-tab class="white--text" href="#info">
|
||||
<h4>{{ $t('modals.detail.tabTitleInfo') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#trackers">
|
||||
<h4>{{ $t('modals.detail.tabTitleTrackers') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#peers">
|
||||
<h4>{{ $t('modals.detail.tabTitlePeers') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#content">
|
||||
<h4>{{ $t('modals.detail.tabTitleContent') }}</h4>
|
||||
</v-tab>
|
||||
<v-tab class="white--text" href="#tagsAndCategories">
|
||||
<h4>{{ $t('modals.detail.tabTitleTagsCategories') }}</h4>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-card-text class="pa-0">
|
||||
<v-tabs-items v-model="tab" touchless>
|
||||
<v-tab-item eager value="info">
|
||||
<info :is-active="tab === 'info'" :hash="hash" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="trackers">
|
||||
<Trackers :is-active="tab === 'trackers'" :hash="hash" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="peers">
|
||||
<Peers :is-active="tab === 'peers'" :hash="hash" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="content">
|
||||
<Content :is-active="tab === 'content'" :hash="hash" />
|
||||
</v-tab-item>
|
||||
<v-tab-item eager value="tagsAndCategories">
|
||||
<TagsAndCategories :is-active="tab === 'tagsAndCategories'" :hash="hash" />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</v-card-text>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { Content, Info, Peers, Trackers, TagsAndCategories } from '@/components/TorrentDetail/Tabs'
|
||||
import { mdiClose } from '@mdi/js'
|
||||
|
||||
export default {
|
||||
name: 'TorrentDetail',
|
||||
components: { Content, Info, Peers, Trackers, TagsAndCategories },
|
||||
data() {
|
||||
return {
|
||||
tab: null,
|
||||
items: [{ tab: 'Info' }, { tab: 'Content' }],
|
||||
peers: [],
|
||||
mdiClose
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['getTorrent']),
|
||||
torrent() {
|
||||
return this.getTorrent(this.hash)
|
||||
},
|
||||
hash() {
|
||||
return this.$route.params.hash
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$router.back()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue